- Konu sahibi
- #1
HTML’de liste oluşturmak için her satırı
Maddelerin belirli bir sıraya bağlı olmadığı durumlarda
Kapsayıcı etiketi seçtikten sonra her öğeyi ayrı bir
Tarayıcı bu kodu varsayılan olarak 1, 2 ve 3 numaralı maddeler şeklinde gösterir. Numaraları elle metin olarak yazmayın; sıralamayı
Bir listenin maddesi içinde alt liste oluşturabilirsiniz. Alt liste, ilgili üst öğenin
Bu yapıda ikinci
Sıralı listenin belirli bir sayıdan başlaması gerekiyorsa
Bu örnekte tarayıcı maddeleri 3, 4 ve 5 olarak gösterir. Bu kullanım, listenin önceki adımları başka bir bölümde verilmişse anlamlıdır. Sadece görünümü değiştirmek için numaraları metin olarak yazmak yerine HTML’nin liste yapısını koruyun; renk, boşluk veya numara biçimi gibi görsel değişiklikleri CSS ile yapın.
Liste ekranda beklediğiniz gibi görünmüyorsa önce her
<li> etiketiyle yazıp bu öğeleri bir kapsayıcı içine yerleştirin. Sırasız liste için <ul>, numaralı veya sıralı liste için <ol> kullanılır. Örneğin aşağıdaki kod, tarayıcıda üç maddelik madde işaretli bir liste oluşturur:
HTML:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ul> ve <ol> yalnızca listeyi başlatıp bitirir; görünen her madde mutlaka <li> içinde bulunmalıdır. <li> etiketi tek başına kullanıldığında hangi listeye ait olduğu açıkça belirtilmediği için doğru yapı kurulmuş olmaz.Sırasız ve sıralı liste arasındaki fark
Maddelerin belirli bir sıraya bağlı olmadığı durumlarda
<ul> kullanın. Menü bağlantıları, özellik listeleri veya konu başlıkları buna örnektir. Maddelerin sırasının anlam taşıdığı durumlarda ise <ol> kullanın; tarif adımları, kurulum aşamaları ve yapılacak işlemler buna örnektir.| Etiket | Görünen yapı | Uygun kullanım |
|---|---|---|
<ul> | Madde işaretleri | Sırası önemli olmayan maddeler |
<ol> | Numaralı maddeler | Sırası önemli olan adımlar |
<li> | Tek bir liste öğesi | Her iki liste türünün içindeki maddeler |
<li> etiketi içine yazın. Örneğin sıralı bir işlem listesi şöyle oluşturulur:
HTML:
<ol>
<li>HTML dosyasını oluşturun.</li>
<li>Dosyaya temel HTML yapısını ekleyin.</li>
<li>Dosyayı tarayıcıda açın.</li>
</ol>Tarayıcı bu kodu varsayılan olarak 1, 2 ve 3 numaralı maddeler şeklinde gösterir. Numaraları elle metin olarak yazmayın; sıralamayı
<ol> sağlasın. Böylece araya yeni bir madde eklediğinizde sonraki numaralar otomatik olarak güncellenir.İç içe liste oluşturma
Bir listenin maddesi içinde alt liste oluşturabilirsiniz. Alt liste, ilgili üst öğenin
<li> etiketi kapanmadan önce yerleştirilmelidir:
HTML:
<ul>
<li>Web teknolojileri
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Sunucu teknolojileri</li>
</ul>Bu yapıda ikinci
<ul>, “Web teknolojileri” maddesinin alt listesidir. Alt listeyi doğrudan dıştaki <ul> içine, herhangi bir <li> olmadan koymayın; HTML yapısında liste öğeleri kapsayıcı görevi görmelidir.Numaralı listenin başlangıcını değiştirme
Sıralı listenin belirli bir sayıdan başlaması gerekiyorsa
start özniteliğini <ol> üzerinde kullanabilirsiniz:
HTML:
<ol start="3">
<li>Üçüncü adım</li>
<li>Dördüncü adım</li>
<li>Beşinci adım</li>
</ol>Bu örnekte tarayıcı maddeleri 3, 4 ve 5 olarak gösterir. Bu kullanım, listenin önceki adımları başka bir bölümde verilmişse anlamlıdır. Sadece görünümü değiştirmek için numaraları metin olarak yazmak yerine HTML’nin liste yapısını koruyun; renk, boşluk veya numara biçimi gibi görsel değişiklikleri CSS ile yapın.
Liste ekranda beklediğiniz gibi görünmüyorsa önce her
<li> etiketinin bir <ul> veya <ol> içinde olup olmadığını kontrol edin. Numaralı liste yerine madde işareti görüyorsanız kapsayıcı etiketin <ol> olduğundan emin olun. Listenin içeriği doğru olduğu hâlde görünümü farklıysa sorun genellikle HTML yapısında değil, uygulanan CSS kurallarındadır.