Özet - İçindekiler tablosu

İç içe sıralı ve sırasız listelerle bir içindekiler tablosu oluşturursun.

Bu grupta öğrendiklerimiz

Bu grupta dört liste türünü gördün:

Sırasız liste: <ul> ve <li>
Sıralı liste: <ol> ile type ve start öznitelikleri
Açıklama listesi: <dl>, <dt>, <dd>
İç içe ve bağlantılı listeler

Şimdi bunları birleştirip sayfa içinde gezinmeyi kolaylaştıran bir içindekiler tablosu yapacağız.

Uygulama İçindekiler tablosu yap

Body içine bir <ul> içindekiler tablosu ekle. İki <li> olsun; her birinde bir <a href="#bolum-1"> ve <a href="#bolum-2"> ile sayfa içi bağlantı. Sonra iki başlık ekle: <h2 id="bolum-1">Bölüm 1</h2> ve <h2 id="bolum-2">Bölüm 2</h2>.

Örnek çözümü göster

<body>
  <ul>
    <li><a href="#bolum-1">Bölüm 1</a></li>
    <li><a href="#bolum-2">Bölüm 2</a></li>
  </ul>
  <h2 id="bolum-1">Bölüm 1</h2>
  <h2 id="bolum-2">Bölüm 2</h2>
</body>

Kendini test et

Etiketi rolüyle eşleştir

<ul>

Sırasız liste kabı
<ol>

Sıralı liste kabı
<dl>

Açıklama listesi kabı
<a href="#x">

Sayfa içi bağlantı
<h2 id="x">

Çapa olacak başlık
Bir içindekiler tablosu temel olarak ne işe yarar?
- Sayfanın yüklenme süresini kısaltır
- Sayfanın arka plan rengini belirler
- Başlıklara hızlı geçiş sağlar
- Başlıkların yazı tipini değiştirir
Cevabı göster

Başlıklara hızlı geçiş sağlar — Doğru. İçindekiler tablosu, başlıklara tıklanabilir bağlantılarla hızlı geçiş sağlar.

Sayfa içi bağlantıyı yaz

<a href="____">Bölüm 1'e git</a>

Cevabı göster

<a href="#bolum-1">Bölüm 1'e git</a>

Sıradaki ders: Proje: Kartvizit sayfası

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler