HTML'ye Giriş
Bu modülde sizlerle birlikte öncelikle HTML'yi tüm detaylarıyla tanımlayacağız. Ardından bir web sayfasının ve html etiketlerinin anatomisini inceleyerek html kodlama sürecini ayrıntılandıracağız.
Türkçeye "Hiper Metin İşaretleme Dili" olarak çevirilen HTML (Hypertext Markup Language), web sayfaları oluşturmak için geliştirilmiş standart bir kodlama dilidir.
- HTML, bir programlama dili değildir; web içeriğinin yapısını tanımlayan bir işaretleme dilidir.
- HTML, iç içe geçmiş bir dizi hiyerarşik ögeden meydana gelir.
- HTML, web içeriklerinin tarayıcılar tarafından görüntülenebilmesini mümkün kılar.
- HTML; h1, p, ul, img ve table gibi etiketler kullanılarak kodlanır.
Bir HTML Dosyasının Anatomisi
İlk web sayfamızı oluşturarak bir HTML dosyasının anatomisini inceleyelim.
DocType bildirimi, web tarayıcılarına bu belgenin bir HTML kodu olduğunu belirtmek amacıyla kullanılır. Kullanılan HTML sürümüne göre farklı değerler alır. Bu değer HTML5 sürümünü belirtmek için kullanılır.
etiketi, bir web sayfasını yapılandırmak için kullanılan kök ogedir. Diğer tüm etiketler bunun içerisine yazılır.
etiketi, bir web sayfasının yapısına dair üst verileri tanımlamak için kullanılır. Dosyanın başlığı, anahtar kelimeler, arama motorlarının web sayfasını tanıması için gerekli açıklamalar ve CSS tanımlamaları pek çok üst veri head etiketi içerisine yazılarak tanımlanır.
Bu satır, web sayfanızda kullanılması gereken karakter kümesini UTF-8'e ayarlar.
etiketi, birinci seviye bir başlık oluşturmak için kullanılır.
etiketi, metni paragraf olarak tanımlamak için kullanılır.
Bir HTML Ögesinin Anatomisi
HTML dosyasının genel yapısını inceledik, şimdi de web sayfalarının en küçük yapı taşı olan HTML ögelerinin anatomisini mercek altına alalım.

- Açılış Etiketi: HTML ögesinin başlangıç noktasıdır. Açılışta kullanılan etiket ile kapanışta kullanılan etiket aynı olmak zorundadır.
- Kapanış Etiketi: HTML ögesinin sonlandırıldığı bölümdür.
- İçerik: Biçimlendirilmek istenen içeriktir. Örneğimizde, bu içerik metindir.
Bir HTML ögesinin yapısını kontrol etmek için özniteliklerden faydalanılır.

Öznitelikler, HTML ögesi hakkında ek bilgiler sunar. Açılış etiketine eklenir ve söz dizimi oznitelik="deger" formatındadır. Örneğimizde; class özniteliğine vurgu değeri verilerek paragraf CSS ile biçimlendirilmiştir.
Bazı HTML ögelerinin içeriği yoktur ve genellikle boş öge olarak adlandırılırlar. Web sayfalarına görsel eklemek için kullanılan img, buna en güzel örnektir. Boş bir HTML ögesinin söz dizimi şu şekildedir:
<img src="images/gorselin-adi.png" alt="Görsele ilişkin açıklama" />