Temel HTML Etiketleri ve Kurallar

Bu dersimizde bir önceki dersimizde gördüğümüz basit HTML yapısını inceleyeceğiz ve HTML'deki önemli bazı kuralları öğreneceğiz.

İlk olarak basit bir HTML örneğini ele alalım:

<html>
     <head>
         <title>Başlık</title>
     </head>
     <body>
         <p>Bu bir deneme yazısıdır.</p>
     </body>
</html>

Bu örneği daha da basite indirgeyeyim:

<html>
     <head></head>
     <body></body>
</html>

Her şey daha açık bir hâl aldı. Yazdığım <html> etiketinin içinde head ve body adlı iki farklı element daha olduğunu göreceksiniz. Ayrıca klavyemizdeki Caps Lock tuşunun bir üstündeki Tab tuşuna basarak head ve body'nin html etiketinin içinde yazıldığına dikkatinizi çekmek isterim. Açıkçası bunu yapmayabilirdim; ama yapmamdaki amacım HTML'deki hiyerarşik yapıyı sizlere öğretmek.

Tüm HTML etiketleri <örnek> şeklinde açılır ve köşeli parantezlerin içine yazdığınız "etiket adı"nın başına / (slash) işareti yazılarak kapatılır. Böylece "örnek" etiketini kapalı hâli </örnek> şeklindedir. <örnek>'i açma etiketi olarak, </örnek> şeklinde yazılanı ise kapatma etiketi olarak adlandırabiliriz. Ayrıca bir kısım HTML üstadları 'etiket' yerine 'element' terimini kullanmayı tercih etmektedir. Bu da aklınızda olsun.

HTML etiketinin açılım ve kapatım şekli bazı istisnalar dışında daima böyledir. Yazmak istediğimiz içerik daima açılım ve kapatım etiketlerinin içindeki boş alana yazılır.

Şimdi tekrar daha da basite indirgenmiş örneğimize dönelim:

html açma etiketi ile kapatma etiketi arasında head ve body etiketlerinin olduğunu görüyorsunuz. head ve body'nin ise aynı satır düzeyinde yer aldıklarını... head İngilizce'de baş, body ise gövde anlamına gelmektedir. Bu da bize HTML'in bir iskelet yapısı olduğunu gösterir. html etiketini bir insan vücudu; body ve head'in ise bu vücudun başı ve gövdesi olduğunu düşünebilirsiniz.

<head> etiketi daima <html> etiketinin içinde yer alır ve <head>'in içerisine yazılan <title> dışındaki tüm içerik kullanıcı tarafından görülmez. <body>'in içine yazılan içerik neyse tarayıcı ekranında o görülecektir.

<title> sayfa başlığı anlamındadır. Örneğin şu an tarayıcınızın sekmesindeki başlığın "Temel HTML etiketleri ve Kurallar" şeklinde başlayan bir yazı oldunu göreceksiniz:

Bu da aslında pencere içeriğinde görülmez; fakat bir istisna olarak kabul edilebilir.

HTML5'teki hiyararşik yapıyı tam olarak anlamadıysanız aşağıdaki hatalı HTML kodlarını inceleyiniz:

<head>
    <title>Site Başlığı</title>
</head>
<html>
    <body>Site İçeriği</body>
</html>

<html>
    <head>
         <title>Site Başlığı</title>
    </head>
    <body>Site içeriği
</html>
    </body>

İlk örnekteki hata head elementinin html etiketinin dışına yazılmış olması. Unutmayın ki HTML5'teki tüm etiketler daima <html> etiketinin içine yazılır.

İkinci örnekteki hata biraz daha komplike. body'nin kapatma etiketi html'in dışına yazılmış ve bu da yanlış kodlama örneklerinden biri. Yine unutmayın ki iki HTML5 etiketi asla ve asla birbirleri ile kesişmezler.
Yani <a etiketi><b etiketi></a etiketi></b etiketi> şeklinde bir yazım yoktur.
Doğrusu <a etiketi><b etiketi></b etiketi></a etiketi> şeklindedir.

Sayfanın başındaki ilk örneğe dönelim.

adlı bir etiket göreceksiniz. Bu etiket HTML5'te içerik eklenirken en sık kullanılan elementlerden biridir. Paragraf kelimesinin kısaltmasıdır.

Şimdi ilk web sayfanızı nasıl yapacağınızı anlatacağım.

Notepad++'ı açın. Yeni bir sayfa oluşturun. Sayfa tamamen boş olsun. İçine aşağıdaki kodları yazın. Ama lütfen kopyala / yapıştır yapmayın. Tek tek yazın.

<html>
     <head>
         <title>[Site başlığım buraya]</title>
     </head>
     <body>
         <p>[İçerik buraya]</p>
     </body>
</html>

Hiyararşik yazmaya özen gösterin. Örneğin; <html> yazdıktan sonra enter'a basın. Daha sonra tab tuşu ile boşluk bırakın ve kodun kalan kısmını yazın. [Site başlığım buraya] kısmına kendi adınızı ya da rumuzunuzu yazabilirsiniz. [İçerik buraya] kısmına ise yazmak istediklerinizi yazın.

Her şey bittikten sonra Notepad++'ın menüsünden Dosya > Farklı Kaydet...'e tıklayınız. File name kısmına istediğiniz dosya adını yazınız ve Save as type kısmındaki açılır menüden Hyper Text Markup Language file'ı seçiniz.

Eğer son yazdıklarımı yapamadıysanız üzülmeyin. Dosyanızı txt dosyası şeklinde masaüstüne kaydediniz ve uzantısındaki .txt'yi siliniz. Yerine .html yazınız.

Şimdi kaydettiğiniz dosyaya dönünüz ve Birlikte aç komutundan Google Chrome'u seçiniz. Daha sonra dosyanızı açınız.

Tebrikler! İlk web sayfanızı oluşturdunuz. Her şey bu kadar kolay.

Şimdi dilerseniz bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Diğer derse geçmek için tıklayınız. >>>