HTML Nedir? başlıklı yazımızda bahsettiğimiz bilgilerin üzerinden kısaca geçecek olursak HTML’in bir metin işaretleme dili olduğundan ve tarayıcıların kodlanan bilgileri ekranda nasıl konumlandıracağı ve göstereceğine bu dil sayesinde karar verdiğinden bahsetmiştik. Bu yazımızda HTML Nasıl Yazılır? konusunu inceleyelim.
Şimdi bu dilin standartlarına ve temel bir html sayfasının tarayıcı tarafından nasıl yorumlandığına bakalım.
<!DOCTYPE html>
<html>
<head>
<title>Sayfa Başlığı</title>
</head>
<body>
<h1>Yazı Başlığı</h1>
<p>Bu bir paragraf yazısıdır...</p>
</body>
</html>Bunu öğrenmenin en iyi yolu tabi ki denemek. Örneğin bilgisayarınızda masaüstüne “index.txt” adında bir metin belgesi oluşturun ve yukarıda yer alan kodu bu belgenin içine kopyalayıp yapıştırın. Dosyayı kaydedip kapattıktan sonra dosya adını “index.html” olarak değiştirin ve dosyayı yeniden açın. Büyük ihtimalle karşınıza aşağıdakine benzer bir tarayıcı penceresi açılacaktır.
Şimdi de tarayıcı kodları nasıl yorumluyor onu inceleyelim.
Kodları en baştan incelersek;
<!DOCTYPE html>Bu kodla tarayıcıya okuyacağı dokümanın bir HTML dokümanı olduğunu söylemiş oluyoruz.
<html>...</html>Bu taglar arasına sayfa kodlarını yerleştiriyoruz.
<head>
<title>Sayfa Başlığı</title>
</head>Resim-2’de göreceğiniz üzere tarayıcı <head>…</head> tagları arasındaki bilgileri ekrana yansıtmaz ancak buradaki içerikleri sayfa hakkında genel bilgi edinmek için kullanır.
<body>
<h1>Yazı Başlığı</h1>
<p>Bu bir paragraf yazısıdır...</p>
</body><body>…</body> tagları arasında ise sayfada görünmesini istediğimiz elemanları yerleştiriyoruz. Tabi ki taraıyıcı her bir elemanı HTML standartlarına göre algılayıp ekrana yansıtıyor. Burada özellikle “standart” kelimesini aklınızdan çıkarmamanızı istiyorum. Oluşturacağınız HTML dokümanının içeriğine göre ekrana resim, yazı, başlık, video gibi bir çok element koymak isteyebilirsiniz. Unutmayın ki bunların hepsinin bir raconu yani bir standardı var.
HTML Standartları
Öncelikle kodlardaki her bir <tag>…</tag> yapısına biz element (eleaman) diyoruz. Bir html elementinin yapısı tam olarak nasıl olmalı onu inceleyelim.
Resim-3’ü incelediğimizde bir elementin açılış ve kapanış tagları, Attribute yani nitelikleri, bu niteliklerin adı ve değeri ve son olarak da bu taglar arasına yazdığımız content yani içeriği olduğunu görüyoruz. Kendi örnek kod yapımızda gördüğümüz üzere bir element içerisinde başka html elementleri barındırabilir. Burada HTML dilinin Syntax’ını yani sözdizimini görmüş olduk. HTML yazmak istiyorsanız bu standartlara göre yazmanız gereklidir.
Attribute konusuna gelecek olursak buradaki durum ekranda gösterilen elementlerin belirli özelliklerini değiştirebilmemiz için geliştirilmiş bir standart yapıdır. Kısa bir örnekle açıklayalım.
Resim-4’te dikkat ederseniz <h1>…</h1> etiketine title isimli bir attribute yani özellik ekledik ve <h1 title=”Bu bir başlıktır”>Yazı Başlığı</h1> şeklinde yazdık. Ve tarayıcı bunu yorumlayarak mouse ile bu elementin üstüne gelindiğinde verdiğimiz özelliğin değerini yazdırdı. Buradan çıkaracağımız sonuç: Bahsedilen bu attribute yani özelliklerin yalnızca görüntü ile ilgili olmayıp davranışları da etkileyebildiğidir.
Element yapısını öğrendiğimize göre şimdi bu elementler neler olabilir kısaca onlara bakalım.
HTML Elementleri
Daha önce de söylediğim gibi yapmak istediğiniz html sayfasının içeriğine göre ekrana resim, yazı, video, link ya da başlık gibi bir çok şey koymak isteyebilirsiniz. En çok kullanılan html elementlerinden bir kaçını verdikten sonra sizi işin kaynağına yönlendirip gerisini kendiniz halletmenizi istiycem.
| Element | Örnek Kullanım | Açıklama |
| h1 | <h1>….</h1> | Başlık (Header) |
| p | <p>…</p> | Yazı (Paragraph) |
| img | <img src=”…” /> | Resim (Image) |
| a | <a href=”…”>…</a> | Link (Anchor) |
| b | <b>…</b> | Kalın yazı (Bold) |
| div | <div id=”…” class=”…”>…<div> | Bölüm (Division) |
Tablo-1’de gördüğünüz üzere her bir elementin kendine has yazımı ve alabileceği özellikler var. Bunların tamamına göz atmak için w3schools adresine bakmanızı tavsiye ederim. Listenin uzayıp gitmesi gözünüzü korkutmasın. Her birini ihtiyacınız oldukça kullanacaksınız. Hatta emin olun bazılarını hiç kullanmayacaksınız. Bu yüzden sakın ezberlemeye falan kalkmayın 🙂 HTML Nasıl Yazılır? sorusunun cevabını da kendi HTML sayfalarınızı yazarak en iyi şekilde bulabilirsiniz. Unutmayın en kalıcı öğrenme yöntemi yaparak, yaşayarak öğrenmedir.
Bir sonraki yazımızda dilin son sürümü olan HTML5 nedir onu inceleyelim.
