Uzun zamandır farklı platformlar için front-end konulu ücretli eğitim setleri hazırlıyorum. Her zaman aklımda ücretsiz set hazırlayıp paylaşma fikir vardı. Steemit hesabımda bulunması için burada öncelikle Html ve Css konulu dersler paylaşacağım.
Html Eğitim Seti Ders 1 - Herkes İnternet Sitesi Yapabilir
Websitesi Nedir ?
Öncelikle websitesinin ne olduğundan bahsedelim. Geçmişte websiteleri .html uzantılı yalnızca birkaç paragraf yazı ve düşük bit imajlardan oluşan şeylerdi. Ancak günümüzde teknolojiyle beraber websitelerinin de gelişmesi önlenemiyor.
Tüm internet sitelerinde html(Hyper Text Markup Language) dili kullanılmaktadır. Elbette günümüzde html dili bilmek yeterli değil fakat websitesi oluşturmak istiyorsanız mutlaka bilmeniz gerekmektedir. Çünkü tarayıcıya bir sayfanın internet sitesi olduğu bilgisini vermek için html kodlarına ihtiyacınız vardır.
Websitesi; temelde internet tarayıcılarının kodları yorumlarıp ekrana görüntüler oluşturmasıyla meydana gelir. Yani yazacağınız kodlar internet tarayıcıları(Firefox, Chrome, Explorer vb.) tarafından biliniyor ve yorumlanıp ekrana sonuçlar gösteriliyor.
Kodları Nereye Yazacağız ?
Kodları windows işletim sisteminde notepad gibi yazı yazabileceğiniz metin editörlerine yazacaksınız. Kaydederken uzantılarını .html olarak ayarlayacaksınız ve bu sayfa artık bir internet sayfası olacak.
Hadi Başlayalım
Html Yazım Kuralları ve Standart Html Etiketleri
Html'de yazılan her koda, aynı zamanda etkiket diyebilirsiniz. Öğreneceğiniz ilk etiket <html></html> etiketi olacaktır. Zaten adını aldığı dilin kısaltması olarak kullanılıyor. Burada dikkat edeceğiniz nokta her html etiketi küçüktür "<" işareti ile başlar ve büyüktür ">" işareti ile son bulur. Aynı zamanda yukarıdaki etikette gördüğünüz gibi her html etiketinin bir açılışı bir de kapanışı vardır. Kapanışlar her zaman / işareti ile yapılır. Aşağıdaki kodları ve açıklamaları incelediğinizde daha iyi anlayacaksınız.
| Html etiketi | Açıklaması |
|---|---|
<doctype html> | Sayfanın en üstüne yazılır. Doysa tipinin html olduğu bilgisini tarayıcıya iletir. |
<html></html> | Yazılan tüm kodlar bu iki etiket arasına yazılmalıdır. |
<title></title> | Sayfa başlığının bulunacağı etikettir. Aynı zamanda tarayıcının üst kısmında görünen isim de bu alan içerisinden alınır. |
<head></head> | Sayfanın üst kısmında bulunur bazı özel etiketler head etiketi arasına yazılır. Arama motorlarının ilk baktığı yer de burasıdır. |
<body></body> | Sayfanın tüm içeriğini kapsayacak etikettir. Her şey body etiketleri arasında yer alır. |
Aşağıda hep birlikte kullanımını görebilirsiniz.
<html>
<head>
<title>Örnek Sayfa Başlığı</title>
</head>
<body>
Merhaba Dünya !
</body>
</html>
Örneği biraz inceleyelim. Html'de ilk yazılan kod her zaman son kapanır. Html etiketini ilk açtığımız için en son kapattık. Bu yazım kuralına dikkat etmelisiniz.
Yukarıdaki kodları metin editörüne yapıştırıp .html uzantı ile kaydederseniz çift tıklayarak önizleyebilirsiniz.
Bu dersimiz bu kadardı. Bir sonraki dersimizde görüşmek üzere.
Görsel Kaynak: http://news.bbc.co.uk/2/shared/spl/hi/pop_ups/07/in_pictures_10_years_of_the_bbc_news_website/html/2.stm