HTML Listeleme ve Etiketler

Kod Gösterim Etiketleri

Web tasarımda dikkat edilecek konulardan biri de örnek olarak kullandığımız kodlar için <code> etiketidir.

Örneğin bir sitede makale yazıyorsunuz ve bu makalenin içinde yazılım kodları geçiyor. <code> etiketi, içindeki metnin bilgisayar kodu olduğunu belirtir; tarayıcılar onu eş aralıklı bir yazı tipiyle gösterir. Kodun içinde < ve > gibi HTML karakterleri varsa bunları < ve > olarak yazmalısınız; aksi hâlde tarayıcı onları sayfanın bir parçası sanar. Kullanımı şu şekildedir:

<code>
var x = 5;
var y = 6;
document.getElementById("HTML ders-5").innerHTML = x + y;
</code>

HTML Yorum Satırı Ekleme Etiketi

Bu etiketler içerisine HTML kodları arasına unutmamak için düşmek istediğimiz notları yazarız.
Ancak yalnızca bu amaç için değil, daha farklı amaçlar için de yorum satırı kullanabilirsiniz. Örneğin sayfanızı bir konuda test ederken yazdığınız başka bir kod engel oluyorsa, engel olan kodları yorum satırı içerisine alarak çalışmaz hâle getirebiliriz; böylece testinize engel olmayacaktır. Yorum satırı içerisindeki kodlar çalışmaz ve sayfada görünmez.

Örnek:

<!-- Burası İçerik Alanı -->

Eski Internet Explorer sürümleri için koşullu yorum satırları da vardı; örneğin kodların yalnızca Internet Explorer 9’da çalışması isteniyorsa şöyle yazılırdı. Günümüz tarayıcıları bu yazımı tanımaz, karşılaşırsanız ne işe yaradığını bilmeniz yeterlidir.

<!--[if IE 9]>
    .... Çalışmasını istediğiniz HTML kodları ....
<![endif]-->

HTML’de Listeler

Listeler web tasarımda en çok kullanılan elemanlar arasındadır; gerek menülerde gerekse içeriklerde listeyi çok kez kullanırız.

HTML’de sıralı ve sırasız olmak üzere 2 farklı liste türü vardır.
Şimdi sizlerle bu liste türlerini öğreneceğiz:

Sırasız Liste

İlk önce sırasız listeden başlayalım:
Sırasız liste oluşturmak için liste elemanlarını <ul> etiketleri arasına alırız ki tarayıcı bu listenin türünü anlayabilsin.
<ul> etiketlerinin arasına <li> etiketleri getirilir ve listelemek istediklerimizi bu etiketler arasına yazarız.

Hemen bir örnek verelim:

<ul>
    <li>Anasayfa</li>
    <li>Hizmetlerimiz</li>
    <li>Hakkımızda</li>
    <li>İletişim</li>
</ul>

Sıralı Liste

Diğer liste türümüz de sıralı listedir.
Sıralı liste oluşturmak için <ul> yerine <ol> etiketini kullanıyoruz ve karşımıza numaralı bir liste çıkıyor.

Hemen sıralı listeye de bir örnek verelim:

<ol>
    <li>Anasayfa</li>
    <li>Hizmetlerimiz</li>
    <li>Hakkımızda</li>
    <li>İletişim</li>
</ol>