HTML Nedir?

HTML, web sayfalarının temelidir. Dünyadaki hemen hemen tüm web sayfaları, HTML ile kodlanmıştır. Tabi HTML'in yanı sıra, JavaScript (JS) ve CSS de kullanılmaktadır. JS ve CSS, HTML'in yardımcılarıdır diyebiliriz ve HTML kodları içerisinde JS ve CSS kodlarını da rahatlıkla kullanabiliriz.

HTML, Hyper Text Markup Language ifadesinin kısaltılmış halidir ve Türkçe'de "Köprü Metni Biçimlendirme Dili" olarak ifade edilir. Türkçe pek anlamlı bir çeviri olmadığını kabul etmek durumundayız. O yüzden tüm içeriklerimizde "HTML" olarak ifade edeceğiz.

HTML, web sayfalarının temelidir. Dünyadaki hemen hemen tüm web sayfaları, HTML ile kodlanmıştır. Tabi HTML'in yanı sıra, JavaScript (JS) ve CSS de kullanılmaktadır. JS ve CSS, HTML'in yardımcılarıdır diyebiliriz ve HTML kodları içerisinde JS ve CSS kodlarını da rahatlıkla kullanabiliriz. HTML yardımcılara ihtiyaç duyar. Çünkü HTML dili, kendi kendine çalışabilen programlar üretemeyeceği için HTML tam olarak bir programlama dili sayılmaz.

HTML, zaman içerisinde sürekli gelişim göstermiştir. Günümzde HTML 5 versiyonu daha revaçtadır. Bu yüzden biz de tüm kodlarımızda, HTML 5 kullanacağız. HTML 5'in eski sürümlerinden farkı, sadece bazı HTML etiketlerinin artık kullanılmamaya başlanması ve bazı HTML etiketlerinin de, yeni olarak eklenmesidir. Bu gibi ayrıntılara, daha sonraki derslerimizde yeri geldiğince değinilecektir.

HTML dosyaları, .htm veya .html uzantılı dosyalardır. Genellikle .html uzantısı tercih edilir. Bunların dışında örneğin .php uzantılı olup, HTML desteği olan dosyalar da vardır. Bu durum, PHP sunucuların aynı zamanda HTML desteği verebilmesindendir. Yani, PHP dili ile kodlanan tüm dosyalar, HTML desteği de sunarlar.

HTML etiketleri, kurallı bir formda yazılabildiği gibi, kuralsız bir formda da yazılıp, çalıştırılabilirler. Kurallı olarak;

<html> ... kodlar ... </html>

şeklinde, html etiketleri arasında yazılan kodlar şeklinde oluşturulabilir. Fakat kuralsız olarak, örneğin rastgele bir HTML etiketini .html uzantılı bir dosyaya yazıp kaydederseniz, o HTML kodu yine de çalışacaktır. Kısaca, HTML kodlarının çalışması için <‎html‎> etiketi içine yazılma zorunluluğu yoktur.

HTML etiketlerinin büyük çoğunluğu başlangıç ve bitiş kısımlarına sahiptir. Örneğin yazıları kalınlaştırmaya yarayan <‎b‎> etiketi kullanımda,

<b> yazı... </b>

şeklinde / ile ifade edilen bir bitiş kısmına sahiptir.

Aynı şekilde, başlık etiketi olan h1 de başlangıç ve bitişe sahiptir ve kod içerisinde,

<h1> başlık </h1>

şeklinde ifade edilir.

Bazı HTML etiketleri ise, sadece başlangıç kısmına sahiptir. Bunlardan en bilineni img etiketidir. Resimleri göstermeye yarayan img etiketi kod içerisinde <‎img ...‎> şeklinde kullanılır. Üç nokta olan yere resimle ilgili ayrıntıları içeren bilgiler gelecektir. Fakat gördüğünüz gibi, <‎/img‎> şeklinde bir bitiş etiketi yoktur. Kod içerisinde <‎img ...‎/> şeklinde de kullanılabilmektedir.

HTML etiketleri çeşitli parametreler alırlar. Bu parametreler, ilgili HMTL etiketini şekillendirmektedir. Parametre mantığını insanlar üzerinden örnek verecek olursak, insan bir HTML etiketi olsaydı, "gözrengi", "saçrengi", "boyu", "ismi", "kilosu" gibi bilgiler onun parametreleri olurdu. Örneğin, a HTML etiketi web sayfalarında link göstermeye yarayan bir etikettir. Fakat göstereceğimiz linkin hangi web sayfasına gitmesi gerektiğini (yani web adresini) href parametresi ile gösteririz.


<a href="https://google.com.tr" title="Google">Google Link</a>

Birçok HTML parametresi, ilgili HTML etiketine özeldir. Örneğin, href parametresini img HTML etiketinde kullanamayız. Bazı HTML parametreleri de, tüm HTML etiketlerinde kullanılırlar. Buna örnek olarak title ve style parametrelerini verebiliriz.

HTML etiketinde style parametresi

HTML etiketlerindeki style parametresine CSS kodları yazılır. Bu şekilde her HTML etiketini CSS kodlarını kullanarak, manipüle edebiliriz. Yani bir anlamda; rengini, boyutunu ve benzeri tüm özelliklerini değiştirebiliriz.


<h1 style="text-align:center">...</h1>

Bu HMTL kodu, h1 içerisine yazılan yazıyı sayfanın ortasında göstermektedir. Çünkü style parametresinde text-align css komutu, center olarak girilmiştir.

HTML 5 dosyalarının en üst kısmında,

<!doctype html>

şeklinde bir etiket bulunabilir. Bu etiket ilgili sayfanın HTML 5 ile kodlandığını belirten özel bir yapıdır.

Yukarıda anlattığımız içeriğin bazı bölümlerine aşağıdaki videodan da erişebilirsiniz. Dilerseniz, TEMEL WEB TASARIM DERSLERİ adlı video listesini sık kullanılanlarınıza kaydedip, gerektiği zaman kolayca bulabilir ve izleyebilirsiniz.

HTML ile ilgili ön bilgi olarak birçok konuya değindik. HTML derslerine başladığımızda, yukarıda kısaca değindiğimiz konuların, örneklerine ve ayrıntılarına değineceğiz. Ayrıca yazdığımız HTML kodlarının sayfa içerisinde nasıl görüntülendiğini de göstermiş olacağız.