Merhaba, Bir önceki yazıları takip ettiyseniz artık HTML nedir iyi biliyorsunuz. HTML’i dökümanını nasıl oluşturacağımızı, nasıl HTML olarak kaydedeceğimizi biliyoruz. O halde artık HTML sayfasını tanımaya başlayalım ve HTML sayfa yapısı konusunu inceleyelim.

Daha önce yaptığımız örnekte bir paragraf – metin yazmak için <p> ve </p> etiketlerini kullanmamız gerektiğini öğrenmiştik. Bu en çok kullanacağımız etiketlerin başında gelir çünkü hazırlayacağımız bir sayfa içerisinde bir çok metin alanı bulunacaktır. Bunun gibi daha öğreneceğimiz bir çok etiket de olacak. Ancak bu yazıda biz HTML sayfamızı oluşturmayı öğreneceğiz.

HTML sayfasını bir iskelet gibi düşünecek olursak 2 ye ayırıyoruz. 1 kafa bölümü, 2 vücut bölümü. Bu ayırmayı da doğrudan bu kelimelerin İngilizcesi ile yapıyoruz. Yani head ve body kelimeleri. Ama bizim dilimiz İngilizce değil, HTML, bu sebeple bu kelimeleri HTML diliyle kullanmamız gerekiyor yani <head> ve <body> şeklinde.

Paragraf etiketinde de gördüğümüz üzere bizim bir başlangıç etiketimiz, <p> ve bir de bitiş etiketimiz </p> mevcut. Bu iki etiket arasında kalan kısım da ilgili etiketin içeriğini yerleştirdiğimiz yerdir. Başı ve sonu olan tüm içeriğimizi başlangıç ve bitiş etiketleri arasında kullanmak zorundayız. O halde sayfamızı oluşturmaya başlayalım.

HTML Sayfa Yapısı

İlk olarak tarayıcımıza bu dökümanın bir HTML dökümanı olduğunu söylememiz gerekiyor. Ve HTML dilinin de versiyonları var. Tarayıcımıza hangi HTML versiyonunu kullandığımızı da iletmemiz gerekki, kullandığımız dili ona göre yorumlasın. İlk komutumuz:

<!DOCTYPE html>

Bu komut bir HTML etiketi değildir. Yalnızca kullandığımız HTML versiyonunu belirtir. Bir içeriği yoktur, dolayısı ile bir başlangıcı ve bir bitişi de yoktur. Tek başına yukarıdaki haliyle kullanılır. HTML sayfası oluştururken, web tarayıcısının döküman tipimizi tanıyabilmesi için bu komutu mutlaka kullanmamız gerekir. Bu komuttan sonra sayfamızı oluşturmaya başlayabiliriz. Sayfamızı oluştururken de ilk yapmamız gereken, sayfanın başlangıcını ve bitişini, tüm sayfa içeriğini kapsayacak temel etiketimizi kullanmak olacak.

<!DOCTYPE html>
<html>
.
.
.
</html>

HTML kodumuzun başladığını <html> ve tüm kodlarımızı yazdıktan sonra bittiğini </html> etiketleriyle belirtiyoruz. Artık sayfamızın tamamını bu iki etiket arasında oluşturmaya devam edeceğiz. Şimdi yukarıda belirttiğim, HTML iskeletimizin 2 bölümünü, kafa (<head>) ve vücut (<body>) bölümlerini inceleyelim.

Kafa Bölümü (<head>)

Bu bölüm web sayfamızın aslında görünmeyen kısmıdır. Web sayfamızda yazdığımız içeriğin dili, renk-boyut vb biçim özellikleri, web tarayıcısına veya arama motorlarına sayfa hakkında bilgi veren başlık, açıklama, anahtar kelime gibi özellikleri içeren bölümdür. İçerik barındırmaz ancak içeriği etkileyen önemli bilgileri <head> </head> etiketleri arasında yazarız.

<title> , <style> , <link> , <meta> , <script> gibi, kullanımlarını daha sonra ele alacağımız etiketleri bu bölümde kullanırız. <head> </head> etiketleri, <html> etiketinden sonra gelen ilk etikettir.

<!DOCTYPE html>
<html>
   <head>
   .
   .
   .
   </head>
</html>

Vücut Bölümü (<body>)

</head> kapanış etiketini kullanmamızın hemen ardından <body> etiketimiz başlar ve ta ki kodumuzun bittiğiniz belirten </html> kapanış etiketimize kadar devam eder. Bu bölüm web sayfamızın tüm içeriğini kapsar. Sayfamızda kullanacağımız yazılar, görseller, başlıklar ve diğer tüm içerik materyallerimiz <body> </body> etiketleri arasına yazılır. Diğer gördüğümüz etiketler gibi içerik kodlarımızın başladığını belirtmek için <body> açılış etiketimizi ve içerik bölümümüz bittiğini belirtmek için </body> kapanış etiketini kullanırız.

<p> , <img> , <a> , <ul> vb. bir çok HTML içerik etiketimizi, bu bölümde kullanırız.

<!DOCTYPE html>
<html>
   <head>
   .
   .
   .
   </head>
   <body>
   .
   .
   .
   .
   .
   .
   </body>
</html>

Ve bu kodları yazdığımız zaman, artık boş bir HTML sayfasına sahibiz demektir. Bundan sonra sayfamızın özelliklerini belirlemeye ve içeriklerimizi eklemeye başlayabiliriz.

Div Etiketleri

<div> etiketlerimiz, HTML sayfa yapısı içerisinde farklı kod grupları oluşturmamızı sağlar. Nasıl <header> , <footer> gibi adlandırılmış kodlar sayfamızın bölümlerini tanımlıyor, aynı şekilde biz de sayfa içerisinde farklı bölümler oluşturmak için <div> etiketinden faydalanabiliriz.

Bu etiket şimdilik bir anlam ifade etmiyor gibi görünebilir ancak sayfa yapımızı oluştururken en çok kullandığımız etiketlerden biridir. CSS öğrenmeye başladığımızda ne kadar işlevsel olduğunu daha iyi anlayabileceğiz

Sayfa yapımızı artık oluşturduk. Sayfamızın özelliklerini belirleyeceğimiz <head> bölümünü bir sonraki yazıda aktaracağım.