HTML Nedir ve HTML Etiketleri Nasıl Kullanılır?

YouTube'ta Takip Et →

Bir web sitesinin ne şekilde göründüğü ile ilgili kodların bulunduğu yapıdır HTML. Hyper Text Mark-Up Language anlamına gelen HTML, açılış ve kapanış kodları ile sayfanın kullanıcıya iletilmesinde önemli ve o kadar da basit bir dildir.

Sadece HTML ile dinamik sayfalar, formlar ya da başlı başına bir web sitesi yapamazsınız ama HTML bilmenin birçok avantajı var. Örneğin, bir WordPress sitesinde bir şeyler kayarsa, tablolarda sıkıntı olursa, görsellerle ilgili istenmeyen durumlarla karşılaşırsanız HTML bilginiz sayesinde bu sorunların üstesinden gelebilirsiniz. HTML, web tasarım dünyasında ilk öğrenmeniz gereken dildir. Tasarımcı da olsanız, web sitesi tasarlıyorsanız HTML’in işleyişini bilmeniz sizin avantajınıza.

HTML Tarihi

HTML dili de birçok dil gibi kendini geliştiren bir dil. İlk HTML 1991 yılında çıktı ve takip den yıllarda HTML 2.0, HTML 3.2, HTML 4.01, XHTML şeklinde HTML versiyonları ile karşılaştık. 2004 yılından bu yana HTML5 kullanılıyor.

HTML’de bütün etiketlerin hiyerarşik bir yapısı var. Bu yapının en başında ve sonunda HTML etiketleri bulunuyor. HTML etiketleri arasında iki önemli etiket bulunur. Head etiketi ve Body etiketi. Head etiketinin içinde, sayfanın ön yüzünü dolaylı olarak etkileyen kodlar bulunur. CSS ve JS dosyaları, sayfa başlığının yer aldığı Title etiketi gibi kodlar Head etiketleri arasında yer alır. Body etiketleri arasında ise sayfada direkt olarak gördüğümüz içerik kodları yer alır. Aşağıda standart bir HTML yapısını görebilirsiniz.


<html>
  <head>
    <title>Page Title</title>
  </head>

  <body>
  </bdoy>
</html>

HTML Etiketleri Nasıl Kullanılır?

Yukarıdaki kodda fark ettiyseniz açılan her etiketin bir de kapanışı var ve bu kapanışlar / işaretiyle sağlanıyor. Kapanışları unutursak ya da hiyerarşik yapıya uymazsak ortaya çıkan sayfa istediğimiz gibi bir sayfa olmaz, sistemin kafası karışır. Örnek bir kullanımı aşağıda görebilirsiniz.

<etiket>Buraya içerik gelir.</etiket>

Gördüğünüz gibi bir açılış etiketi ve bir kapanış etiketi bulunuyor. Kapanış etiketinin önünde ise kapanış olduğunu ifade eden bir / işareti bulunuyor. HTML etiketleri genellikle bu şekilde işler, çok az sayıda bu kurala bağlı olmayan etiket vardır.

HTML kodlarını Notepad, VS Code, Atom, Sublime Text, Notepad ++ gibi herhangi bir metin editörüne yazıp, Dosya > Farklı Kaydet diyerek *.html uzantılı bir dosya şekilde kaydetmeliyiz ki, bu uzantıları Chrome, Firefox gibi web tarayıcımızda açabilelim. İsterseniz jsfiddle ya da codepen gibi sitelerde de test edebilirsiniz kodları ve kodların anlık olarak nasıl sonuç verdiğini görebilirsiniz. Bu tip siteler HTML, CSS ve JavaScript kodlarını test edebileceğiniz sitelerdendir ve online olarak bu servislerden ücretsiz olarak faydalanabilirsiniz.

Sayfa Kaynağı Nasıl Görüntülenir?

Tarayıcılar yazdığınız kodları okurlar ve ziyaretçinin anlayabileceği görüntüye çevirirler. Aslında arkaplanda bu kodlar hala vardır. Bu kodları görüntümek için sayfanın kaynağını görüntülemeniz gerekir.

Sayfanın kaynağını görüntülemek için yapmanız gereken şey sayfa üzerinde sağ tıklayıp Kaynağı Görüntüle (View Source) demektir. Böylee sayfanın arka planında yer alan kodlar çıkacak karşınıza.