Bölüm 13 (HTML Dersleri) Listeler

Bölüm 13 (HTML Dersleri) Listeler

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.

HTML Listeleri

En genel HTML Listeleri sıralı ve sırasız listelerdir.

HTML Sıralı Listeler

<ol> etiketi ile başlar sıralı listeler. Her bir liste elemanı da <li> tag ı ile başlar.

Liste elemanları numaralanmış olarak gözükür.

1. Kahve
2. Süt

gibi. Kodlar da şöyle;

<ol>
<li>Kahve</li>
<li>Süt</li>
</ol>

HTML Sırasız listeler

Sırasız listeler de <ul> etiketi ile başlar. Elemanları da <li> etiketi ile…

Küçük siyah daireler ile işaretlidir liste;

• Kahve
• Süt

gibi, kodları da şöyle;

<ul>
<li>Kahve</li>
<li>Süt</li>
</ul>

HTML, Tanımlı Listeler

Tanımlı liste liste elemanlarının her bir parçasının tanımlı olduğu listedir.

<dl> etiketi bu listeyi tanımlar.

<dl> etiketi <dt> etiketi ile bağlanır(listedeki elemanı tanımlar) ve <dd> ile bağlanır(listedeki elemanı açıklar.).

Misal;

<dl>
<dt>Kahve</dt>
<dd>- kahverengi sıcak içeçek</dd>
<dt>Süt</dt>
<dd>- beyaz soğuk içecek</dd>
</dl>

Şöyle gözükür;

 

Temel notlar – Yararlı ipuçları

Bir liste elemanının  içine; yazı, satır sonu, resim, link vb. listeler de ekleyebilirsiniz.

Sıralı listenin değişik halleri
Değişik sıralı liste uygulaması.

Sırasız listelerin değişik halleri
Sırasız listenin değişik uygulamaları.

İç içe liste
İç içe liste nasıl hazırlanır…

İç içe liste 2
Daha karışık iç içe listenin gösterimi.

Tanımlı liste
Tanımlı liste gösterimi.

HTML Liste Etiketleri

HTML’de listeleri de görmüş olduk. Basit/Temel HTML’yi birkaç konu sonra bitireceğiz. Unutulan yerler varsa eklemelerini yapacağım ve HTML5’e dair eklemeler de yapabileceğim. Ve yine birkaç konu ile ileri düzey HTML derslerine geçeceğiz. Bu sayede bir HTML arayüzü oluşturabilecek hale geleceğiz. Bu HTML dersleri, bitiminde e-kitap haline gelecekler.

Yararlı olması dileğiyle…