Temel HTML - HTML Nedir ?
Günümüz dünyasının çokça karşımıza çıkan bu terimi sizin için biraz özetlemeye çalıştım. HTML (Hypertext Markup Language ) bir çok kaynakta Hiper Metin İşaret Dili olarak geçmektedir. Buradaki Markup tek başına baktığınızda biçimlendirme anlamı da taşımaktadır. Yani bu dil bir içerik biçimlendirici olarakda düşünülebilir.
Genel çalışma prensibine bakıldığında da zaten bir içeriği; genelde bu içerik bir paragraf olur, yapılandırmaya biçimlendirmeye çalışmaktadır. İçerikler bir paragraf olabildiği gibi bir resim veya bir listede olabilir.
İnternette HTML tanımını baktığınızda yine en çok karşınıza çıkan bir diğer bilgide bu kodlama şeklinin bir yazılım dili olmadığıdır. Bunun denmesinin başlıca sebebi yazılım dillerindeki method veya fonksiyon yapısının yani çalıştırılabilir kod yapısının olmamasıdır.
Zaten HTML 'inde method veya fonksiyon çalıştırmak gibi bir derdi de yoktur. HTML içeriğinizin yapısını tanımlayan bir biçimlendirme dilidir.
HTML'in yapı taşları öge adını verdiğimiz bir dizi işaretleyiciden oluşur. Ögeler bir içeriği sararak içeriğin farklı bölümlerini gizleyebilir yada şeklini değiştirebilir yada farklı bir yere köprüler oluşturabilir.
Örneğin : Aşağıdaki metni ele alalım:
Kedim çok yaramazdır.
Bu metnin tek başına bir paragraf olarak bulunmasını istersek bu metni paragraf tagı <p> ile sarabiliriz.
<p>Kedim çok yaramazdır.</p>
Böylece bu içeriğin bir paragraf olduğu bilgisini tanımlamış olduk. Bu örnek başlı başına bir HTML elementini temsil etmektedir.
Bir HTML Elementinin Anatomisi
Mozillanın temel HTML içeriğinden aldığım şu görsel bir HTML elementinin bütün anatomisini yansıtmaktadır:
Açılış Tagı (Openin tag) : Öğenin nereden başladığını veya etkili olmaya başladığını ifade eder.
Kapanış Tagı (Closing tag): Açılış tagıyla neredeyse aynıdır sadece öge adından önce / yer alır. Bu ögenin nerede bittiğini belirtir.
İçerik (Content) : İçerik ögenin içeriğini belirtir.
Element : Bu birimlerin hepsinin toplamı bir HTML elementini oluşturmaktadır.
Ögeler aynı zamanda bazı niteliklere de sahip olabilirler. Bunlara Attribute adı verilir.
Attributeler ögeler hakkında ek bilgiler içerirler. Yukarıdaki resimde de görüldüğü gibi bir Attribute iki kısımdan oluşmaktadır. Class Attributenin ismini gösterirken, "editor-note" ise bu Attributenin değerini ifade eder.
Attributelerle ögeye bir stil bilgisi verilebileceği gibi ögeyi hedef göstermek için de kullanılabilir.
Bir Attribute her zaman aşağıdakilere sahip olmalıdır:
Öge adı veya başka nitelik varsa aralarında boşluk olmalıdır.
Özellik adı ve ardından eşittir işareti.
Tırnak işaretlerini açıp kapatarak nitelik değeri.
İç içe Elementler
Elementleri içe içe koyabilirsiniz. Diyelim ki kedimizin çok yaramaz olduğunu belirtmek istiyoruz fakat çok kelimesini daha güçlü yazdırmak istiyoruz. Bu durumda şöyle bir şey yazabiliriz.
<p> Kedim <strong>çok</strong> yaramazdır </p>
Kapanış ögelerinin doğru sırada olması gerektiğini unutmayın. Şu şekildeki bir kapatma hatalı olacaktır.
<p> Kedim <strong>çok yaramazdır </p> </strong>
Boş Elementler
Bazı ögelerin içeriği yoktur. Bu ögeler boş element olarak adlandırılır. Örneğin <img> ögesine sahip bir element bu şekilde bir elementtir.
<img src="images/test.png">
Bunun nedeni bir <img> ögesinin etkilemek için bir içeriğe sahip olmasına gerek olmadığıdır. Görevi sadece resmi istenilen yerde göstermektir.
Bir HTML Belgesinin Anatomisi
Elementler tek başlarına bir şeyler ifade eder fakat bu tek başına yeterli değildir. Elementler HTML belgesinin temellerini oluşturur. Gelin elementlerin nasıl bir HTML belgesini oluşturduğuna bakalım:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html> <!DOCTYPE html> :
Bu belgenin bir HTML belgesi olduğunu ifade eder.
<html></html> :
Bu öge, tüm sayfadaki tüm içeriği sarar ve bazen kök öge olarak da bilinir.
<head></head> :
Bu öge HTML belgenize dahil etmek istediğiniz diğer ögeleri referans edebileceğiniz bir kap görevi görür.
Bu, arama sonuçlarında görünmesini istediğiniz anahtar kelimeler ve sayfa açıklaması, içeriğimizi şekillendirmek için CSS, karakter kümesi bildirimleri ve daha fazlasını içerir.
<meta charset="utf-8"> :
Bu öge, belgenizin kullanması gereken karakter kümesini, yazılı dillerin büyük çoğunluğunun çoğunu içeren UTF-8 olarak ayarlar.
<title></title> :
Bu, sayfanızın başlığını ayarlar; bu, sayfanın yüklendiği tarayıcı sekmesinde görünen başlıktır. Ayrıca, yer işareti eklediğinizde / favorilere eklediğinizde sayfayı tanımlamak için de kullanılır.
<body></body> :
Metin, resim, video, oyun, oynatılabilir ses parçaları veya başka herhangi bir şey olsun, web kullanıcılarına sayfanızı ziyaret ettiklerinde göstermek istediğiniz tüm içeriği içerir