HTML Nedir? Hypertext Markup Language Hakkında Genel Bilgiler

HTML nedir? Hypertext Markup Language kısaltması olan HTML, kullanıcılara web sayfaları ve uygulamaları için yapı profilleri, paragraflar, başlıklar, bağlantılar ve blok alıntılar oluşturmalarını sağlar.

HTML ne demek diye sorarsak, mesela bir programlama dili değildir, yani dinamik işlevsellik oluşturma kapasitesi bulunmuyor. Bunun yerine, Microsoft Word’e benzer olarak belgeleri biçimlendirme ve organize etmeyi mümkün kılıyor.

HTML ile çalışırken basit kod yapıları (etiketler ve nitelikler) kullanarak website sayfasını şekillendirebiliriz. Örneğin, <p> başlangıcı ve </p> kapanış etiketleri arasına metin ekleyerek bir paragraf oluşturabiliriz.

<p>HTML'de paragraf bu şekilde eklenir..</p>
<p>Birden fazla ekleyebilirsiniz!</p>

Genel olarak, HTML gerçekten websitesi kurma konusunda tamamen yeni başlayanlar için bile öğrenmesi kolay bir biçimleme dilidir. Bu rehberi okuyarak öğrenecekleriniz aşağıdaki gibidir:

HTML’nin Geçmişi

HTML, İsviçre’deki CERN araştırma enstitüsünde bir fizikçi olan Tim Berners-Lee icat edilmiştir. İnterneti baz alan bir hiper-metin sistemi tasarlamıştır.

Hiper metinin anlamı, ziyaretçilerin anında erişebileceği metinlere referanslar (bağlantılar) içeren bir metindir. HTML’nin ilk sürümü 1991 yılında yayınlandı ve 18 HTML etiketi içeriyordu. O zamandan bu yana, HTML’nin her bir yeni sürümü yeni etiketleri ve nitelikleri (etiket düzenleyici) beraberinde getirdi.

Mozilla Geliştiriciler Ağının HTML Element Referansına göre şu an için toplamda 140 HTML etiketi bulunuyor ancak bunlardan bazıları kullanılmıyor (modern tarayıcılar tarafından desteklenmiyor).

Popülerliğindeki hızlı artış sebebiyle HTML artık resmi bir web standardı olarak kabul ediliyor. HTML özellikleri World Wide Web Consortium (W3C) tarafından denetlenmekte ve geliştirilmektedir. HTML dilindeki son yenilikleri W3C’nin websitesinden kontrol edebilirsiniz.

Son zamanlardaki en büyük güncellemelerden birisi 2014 yılındaki HTML5 tanıtımı olmuştur. Bu sürümle birlikte biçime, <article></article>, <header> ve footer> gibi içeriğin anlamını belirten bazı yeni anlamsal etiketler eklenmiştir.

HTML Nasıl Çalışır?

HTML dosyaları .html veya .html uzantısıyla biten belgelerdir. Bu dosyaları herhangi internet tarayıcısı (Google Chrome, Safari veya Mozilla Firefox) kullanarak görüntüleyebilirsiniz. Tarayıcı HTML dosyasını okur ve internet kullanıcılarının görebileceği içeriğe dönüştürür.

Genel olarak ortalama bir websitesi çeşitli farklı HTML sayfaları içerir. Örneğin anasayfalar, hakkında sayfaları, iletişim sayfaları gibi farklı sayfalar farklı HTML belgelerine sahiptir.

Her bir HTML sayfası, web sayfalarının yapı taşları olan bir dizi etikete (elements adı da kullanılır) sahiptir. Bu yapı taşları, içeriği bölümlere, paragraflara, başlıklara ve diğer içerik bloklarına biçimleyen bir hiyerarşi oluşturur.

Çoğu HTML elementi bir açılış ve bir de kapanış etiketine sahiptir, <tag></tag> gibi:

Peki HTML div nedir? Aşağıda HTML elementlerinin yapı biçimi örneğini görebilirsiniz:

<div>
  <h1>Ana Başlık</h1> 
  <h2>Dikkat çekici altbaşlık</h2>
  <p>Birinci paragraf</p> 
  <img src="/" alt="Image"> 
  <p><a href="https://ornek.com">Hyperlink</a> içeren ikinci paragraf.</p>
</div>

• En dıştaki element daha büyük içerik bölümlerini işaretleyebileceğiniz basit bir division (<div></div>) yani bölüktür.
• Bir başlık (<h1></h1>), bir altbaşlık (<h2></h2>), iki paragraf (<p></p>) ve bir de görsel (img>) içerir.
• İkinci paragraf, hedef URL’yi içeren href niteliğine sahip bir bağlantı (<a></a>) içerir.
• Görsel etiketi ayrıca iki niteliğe sahiptir: görsel konumu için src, görsel açıklaması içinse alt.

En Çok Kullanılan HTML Etiketlerini İnceleyelim

HTML etiketleri iki türe ayrılır: block-level ve inline tags.

1. Block-level elementler bir belge içerisindeki mevcut tüm alanı kullanır ve her zaman yeni bir satır başlatır. Başlıklar ve paragraflar blok etiketlere harika birer örnektirler.
2. Inline elementler sadece ihtiyaç duydukları kadar alan kullanırlar ve sayfada yeni bir satır başlatmazlar. Genellikle blok-level elementlerin içerik biçiminden sorumludurlar. Bağlantılar ve belirtili string’ler inline etiketlere iyi bir örnektirler.

Block-Level Etiketler

Her HTML dosyasının içermesi gereken üç blok seviye etiketi <html>, <head> ve <body>etiketleridir.

1. <html></html> etiketi her bir HTML sayfasını kapatan en yüksek seviye elementtir.
2. <head></head> etiketi, sayfa başlığı ve karakter sınırı gibi meta bilgilerini içerir.
3. Son olarak <body></body> etiketi sayfada görünen tüm içeriği bütünleştirir.

<html>
  <head>
    <!-- META BILGISI -->  
  </head>
  <body>
    <!-- SAYFA ICERIGI -->
  </body>
</html>

• HTML’de başlıklar 6 seviyeye sahiptirler. <h1></h1>‘den <h6></h6>‘ya kadardır, h1 en yüksek seviye başlık iken, h6 ise en küçüğüdür. Paragraflar <p></p> etiketiyle kapatılırken, blok alıntılar <blockquote></blockquote> etiketini kullanır.
• Division, yani bölükler genellikle birkaç paragraf, görseller, bazen blok alıntılar ve diğer elementler içerirler. <div></div> etiketi kullanarak bu bölüklerden oluşturabiliriz. Bir div elementi kendi içerisinde başka bir div etiketi içerebilir.
• Ayrıca sıralı listeler için <ol></ol> etiketleri, sırasız etiketler için <ul></ul> etiketi kullanabilirsiniz. Bireysel liste öğeleri <li></li> etiketi ile kapatılmalıdır. Örneğin, HTML’de basit bir sırasız liste görünümü aşağıdaki gibidir:

<ul>
    <li>Liste maddesi 1</li>
    <li>Liste maddesi 2</li>
    <li>Liste maddesi 3</li>
</ul>

Inline Etiketler

Çoğu inline etiket metin biçimlendirmek için kullanılır. Örneğin bir <strong></strong> etiketi kullanarak bir öğeyi kalınlaştırabilir veya <em></em> etiketi ile eğik hale getirebiliriz.

Hyperlinkler <a></a> etiketi ve bağlantı hedefini belirten href niteliğine sahip inline elementlerdir.

<a href="https://ornek.com/">Tıkla bana!</a>

Görseller de inline elementlerdir. Bir tane eklemek için kapanış etiketi olmaksızın <img> etiketi kullanabilirsiniz. Ancak ayrıca görsel konumunu gösteren bir src niteliği kullanmalısınız.

<img src="/resimler/ornkek.jpg" alt="Ornek resim">

Eğer daha fazla HTML etiketi öğrenmek istiyorsanız, detaylı anlatıma sahip HTML rehberimize(dilerseniz indirebilirsiniz) göz atabilirsiniz.

HTML Devrimi. HTML ile HTML5 Farkları Nelerdir?

İlk zamanlarından bu yana HTML müthiş bir evrim geçirdi. W3C sürekli olarak yeni sürümler ve güncellemeler yayınlarken, tarihsel devrimler kendi özel isimlerini aldı.

HTML4 (günümüzde genellikle “HTML” olarak anılır) 1999 yılında yayınlanmıştır, diğer bir büyük sürüm ise 2014’de yayınlanan HTML5‘dir ve bu güncelleme dile çeşitli pek çok yenilik getirmiştir. Peki bu HTML5 nedir?

HTML5’in en beğenilen özelliklerinden birisi gömülü ses ve videolara verdiği dahili destektir. Flash oynatıcı kullanmak yerine artık gömülü video ve ses dosyalarını web sayfalarımıza <audio></audio> ve <video></video> etiketleri kullanarak ekleyebiliriz. Ayrıca dahili scalable vector graphics (SVG) ve matematik ile bilimsel formüller için MathML desteğine sahiptir.

HTML5 çeşitli anlamsal düzeltmeler de getirmiştir. Tarayıcıları, içeriğin anlamı konusunda bilgilendirmek üzere yeni anlamsal etiketlerle hem okuyuculara hem arama motorlarına yardımcı olmaktadır.

En popüler anlamsal etiketler <article></article>, <section></section>, <aside></aside>, <header></header> ve <footer></footer> etiketleridir. Daha fazla farklılık bilgisi istiyorsanız, detaylı anlatıma sahip HTML ve HTML5 karşılaştırmasına göz atabilirsiniz.

HTML Artıları ve Eksileri

Her şeyde olduğu gibi, HTML de bazı güçlü ve zayıf yanlara sahiptir.

Artılar:

• Devasa bir kitleye ve çok sayıda kaynağa sahip yaygın kullanılan bir dil.
• Bütün internet tarayıcılarında native olarak çalışır.
• Öğrenmesi nispeten kolaydır.
• Açık kaynak kodludur ve tamamen ücretsizdir.
• Temiz ve istikrarlı biçimleme.
• Resmi web standartları World Wide Web Consortium (W3C) tarafından denetlenir.
• PHP ve Node.js gibi backend dilleriyle kolayca entegre olur.

Eksiler:

• Genellikle statik web sayfaları için kullanılır. Dinamik işlevsellik için JavaScript veya PHP gibi bir backend dili kullanmanız gerekebilir.
• Kullanıcıya mantık ekleme olanağı tanımaz. Bunun bir sonucu olarak bütün web sayfaları ayrı ayrı oluşturulur. Bu durum, aynı öğeleri (başlıklar ve footer’lar gibi) kullanıyor olsalar bile değişmez.
• Bazı tarayıcılar yeni özellikleri tanımakta yavaş davranabiliyor.
• Tarayıcı davranışlarını tahmin etmesi bazen zorlaşabiliyor (örneğin eski tarayıcıların yeni etiketleri biçimlendirememesi gibi).

HTML, CSS ve JavaScript Arasındaki İlişki Nedir?

HTML güçlü bir dil olsa da, profesyonel ve tamamen responsive bir websitesi kurmak için yeterli değildir. HTML kullanarak sadece metin öğeleri ekleyebilir ve içerik yapısını biçimlendirebiliriz.

Ancak HTML diğer iki frontend dili ile muazzam uyumlu çalışıyor: CSS ve JavaScript. Birlikte kullanıldığında gelişmiş işlevler eklenerek, zengin bir kullanıcı tecrübesi oluşturulabilir.

• CSS arkaplan, renkler, tasarım, boşluklar ve animasyonlar gibi genel görünümden sorumludur.
• JavaScript ise slider’lar, açılır pencereler ve fotoğraf galerileri gibi dinamik işlesellik eklemenize olanak sağlar.

HTML’i çıplak bir kişi gibi hayal edin, bu durumda CSS kıyafetimiz JavaScript ise davranış ve hareketlerimiz gibi düşünebilirsiniz.

Kapanış

HTML nedir sorusunun en basit tarifi internetin biçim dili demekten geçer. Bütün internet tarayıcılarında yerel olarak çalışabilir ve World Wide Web Consortium tarafından denetlenir.

Bu dili kullanarak web sitelerinin ve uygulamalarının içerik yapılarını düzenleyebilirsiniz. JavaScript kullanarak işlevsellik, CSS ile de şekil verebilen en düşük seviye frontend teknolojilerinden biridir.