HTML Temel Etiketler

Bir önceki yazıda HTML’e giriş yapmıştık. Bu yazıda ise HTML’de kullanılan bazı temel etiketleri göreceğiz. Öncesinde yazdığımız HTML kodunun çıktısını nasıl görebileceğimize değinmek istiyorum.

HTML yazmak için piyasada bulabileceğiniz çok sayıda editör bulunmakta. Bunları kısa bir araştırma ile bulabilirsiniz. Ancak ben size Notepad++ önereceğim. Aslına bakarsanız herhangi bir metin düzenleyici (Notepad, Word vs.) HTML yazmanız için yeterli. Yazdığınız HTML kodunu dosya_adı.html formatı ile kaydederseniz oluşan dosyayı herhangi bir tarayıcı ile açarak sonuçları görebilirsiniz.

Gelelim temel etiketlere(tag).

<!DOCTYPE html>
<html>

  <head>
    <title>Başlık</title>
  </head>

  <body>
    <h1>Başlık-Heading 1</h1>
    <h2>Başlık-Heading 2</h2>
    <h3>Başlık-Heading 3</h3>
    <h4>Başlık-Heading 4</h4>
    <h5>Başlık-Heading 5</h5>
    <h6>Başlık-Heading 6</h6>
  </body>

</html>

Bu kodun çıktısı alttaki gibi olacaktır

Şimdi sırasıyla etiketleri inceleyelim.

<!DOCTYPE html>

Bu etiket sayfanın bir HTML5 sayfası olduğunu göstermektedir.

<html>...</html>

Bu etiketler arasında kalan bölgede sayfanın tüm doküman bilgilerini tutar. Sayfa tanımları ve tarayıcıda görsel olarak oluşturulacak öğeler bu etiketler arasındadır.

<head>...</head>

Bu etiketler arasında kalan bölgede sayfaya ait meta veriler, varsa tarayıcıda çalışacak kütüphaneler veya stiller gibi bilgiler tutulur.

<title>Başlık</title>

Bu kısım sayfa başlığını gösterir. Eğer bu yazıda verilen kodu tarayıcınızda çalıştırır iseniz sekme başlığı olarak bu tag içerisinde kalan “Başlık” sözcüğü olacaktır.

<body>...</body>

Bu etiketlerin içinde kalan kısım tarayıcıda oluşacak görüntüyü oluşturmaktadır. Yani yukarıda gösterilen çıktı bu bölümdedir.

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

Bu  etiketler arasında kalan metinler tıpkı haber sitelerindeki gibi başlık olarak sayfada gösterilir. h1 en büyük şekilde gösterim, h6 ise en küçük şekilde gösterim içindir.

Şu ana kadar gösterilenlerden anlaşılacağı üzere HTML’de etiket yazma biçimi <etiket>içerik</etiket> biçimindedir. Ayrıca etiketin içerik bölgesine başka bir etiket girebilir. Tıpkı body etiketindeki gibi. Buna istinaden bazı farklı etiketleri de inceleyelim.

<!DOCTYPE html>
<html>
  <body>

      <p>Bu bir paragraf</p>
      <p>Aşağıdaki bir çeşit liste</p>

      <ul>
          <li>Eleman 1</li>
          <li>Eleman 2</li>
          <li>Eleman 3</li>
      </ul>  

      <p>Bu da başka bir çeşit liste</p>

      <ol>
          <li>Eleman 1</li>
          <li>Eleman 2</li>
          <li>Eleman 3</li>
      </ol>

      <p><b>Kalın yazı</b></p>
      <i>Eğik yazı</i><br><br>
      Satır atlatmanın bir yolu<br>
      <button>Bu bir düğme</button>
      <p><a href="http://ucemucar.com">Bu ana sayfama bağlantı</a></p>  
      
  </body>
</html>

Bu kod kendi kendini açıklamaktadır. Kodu bir dosyaya kaydedip tarayıcınızla görüntülerseniz aşağıdaki gibi bir görüntü ile karşılaşacaksınız.

HTML etiketlerini temel olarak bu şekilde sıralayabiliriz. İlerleyen bölümlerde HTML’e daha detaylı olarak değinmeye devam edeceğiz.

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir