Merhaba,

Bu yazımızda web sayfamızda en çok kullanacağımız metin ögelerinin etiketlerini göreceğiz.

Paragraflar – <p> Etiketi

Paragraf etiketini daha önceki yazılarımızda görmüştük. Paragraf etiketi <p> açılış ve </p> kapanış etiketleri arasında metinlerin yazılmasıyla oluşturulur. En basit örnekle şu anda okuduğunuz bu satırlar da bir paragraf etiketi içerisinde yer almaktadır. Paragraf etiketimiz block seviye etikettir ve her bir paragraf yeni bir satırdan başlar.

<p>Paragraflar en sık kullandığımız HTML etiketidir.</p>

Listeler – <ul> , <ol> , <dl> Etiketleri

Web sayfamızda herhangi bir listeleme yapacağımız zaman bu etiketleri kullanabiliriz. Aşağıda yine bu etiketlerden <ul> kullanarak bir listeleme yapalım ve hangisinin ne işe yaradığına bakalım.

  • <ul> – Sırasız listeleri oluşturur.
  • <ol> – Sıralı listeleri oluşturur. (Her bir liste öğesi otomatik numaralandırılır.)
  • <dl> – Tanım listelerini oluşturur.

Bu HTML listelerinin diğer gördüğünüz etiketlere göre farklı bir kullanımı vardır. Önce liste tipini belirttiğimiz etiketi kullanırız ve bu etiket içerisine her bir liste öğemizi ayrıca bir etiket içerisinde belirtiriz. Örnekler ile daha iyi anlayabiliriz:

Sırasız Liste (Unordered List – <ul>)

Bu liste tipi en sık kullandığımız liste tipidir.

<p>Alışveriş listem:</p>

<ul>
   <li>Ekmek</li>
   <li>Süt</li>
   <li>Çikolata</li>
</ul>

Örnekte bir alışveriş listesi hazırladık. Listemizin öncelikle sırasız bir liste olduğunu belirtmek için <ul> </ul> etiketlerimizi yazdık. Daha sonra her bir liste öğemizi (list-item) <li> </li> etiketleri arasına yazdık.

Aşağıdaki gibi bir sonuca ulaştık.

Sıralı Liste (Ordered List – <ol>)

Yazacağımız liste öğeleri birbirleriyle alakalı ve birbirlerini takip eden öğeler olduğu zaman kullanacağımız ve otomatik numaralandırılan listelerdir.

<p>Web geliştirmede en çok kullanılan diller:</p>
<ol>
   <li>HTML</li>
   <li>JavaScript</li>
   <li>PHP</li>
   <li>Java</li>
   <li>Pyhton</li>
</ol>

Şeklinde kullanabiliriz. 

Bu kodumuzun da web tarayıcı görüntüsü:

Tanım Listeleri – (Definition List – <dl>)

Tanım listeleri çift halde gelen öğeler içindir. <dl> etiketi ile listeyi tanımlarız ve <dt> etiketi (definition term) ile öğe başlığını belirtir <dd> etiketi (definition description) ile öğenin içeriğini yazarız.

<dl>
  <dt>HTML</dt>
  <dd>Web sayfalarını oluşturmak için kullanılan standart metin işaretleme dilidir.</dd>
  <dt>CSS</dt>
  <dd>Metin ve format biçimlendirme alanında fazladan olanaklar sunan bir Web teknolojisidir.</dd>
  <dt>JavaScript</dt>
  <dd>Yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir.</dd>
</dl>

Alıntılar – <blockquote> Etiketi

Bu etiket bir alıntıyı tanımlamak için kullanılır:

<p>Steve Jobs diyor ki:</p>
<blockquote>Bir şey yaptığınızda iyi bir sonuç alırsanız, bir başka iyi şey daha yapın ve ona çok uzun süre takılıp kalmayın. Bir sonrakinin ne olacağını düşünün.</blockquote>

Bunun görüntüsü:

Başlıklar – Headings <h1> , <h2> , <h3> , <h4> , <h5> , <h6> Etiketleri

HTML’de 6 seviye başlık bulunmaktadır. Bunlar sayfa içerisindeki önem sırasına göre sıralanır. Sayfanın ana başlığı 1. önceliğe sahip ve en büyük olandır. Bu sebeple <h1> etiketi ile yazılır. Alt başlıklar <h2> , <h3> , <h4> , <h5> , <h6> etiketleri ile ihtiyaca göre kullanılabilir.

<h1>Bu sayfamın 1. seviye ana başlığıdır.</h1>

<h2>Bu bir 2. seviye alt başlıktır.</h2>

<h3>Bu bir 3. seviye alt başlıktır.</h3>

<h4>Bu bir 4. seviye alt başlıktır.</h4>

<h5>Bu bir 5. seviye alt başlıktır.</h5>

<h6>Bu bir 6. seviye alt başlıktır.</h6>

Görüntüsü:

Göründüğü gibi her bir başlık etiketimizin kendine özgü bir boyu bulunmaktadır. Ancak biz başlıkları kullanırken boyutlarına ve biçim özelliklerine göre değil sayfa içerisindeki sıralamasına göre kullanmalıyız. Boyut ve biçimlendirme ayrıca stil kodları ile yapılmalıdır.

Temel metin etiketlerimiz bu şekilde. Bu yazıyı bu noktada tamamlıyorum ve bir sonraki yazıda satır içi metin öğelerini göreceğiz.