Sayfa içi bağlantılar
Aynı sayfa içinde bölümlere bağlantı vermeyi öğrenirsin.
Sayfa içi geçiş nasıl yapılır?
Uzun bir sayfada başlıklara atlamak için sayfa içi bağlantı kullanılır. Önce hedef öğeye bir id özniteliği verilir; bu, sayfada tek olmalıdır. Bağlantının href değeri de # işaretiyle başlar ve aynı id adını taşır: href="#bolum-2".
Tarayıcı, bağlantıya tıklanınca ilgili öğeyi görünür alana kaydırır. Böylece uzun bir belgede hızlı gezinme mümkün olur.
Bağlantıdan bölüme atlamak
Bir id tanımladıktan sonra, aynı sayfada o bölüme atlamak için <a href="#bolum-2"> yazılır. # işareti bir parça (fragment) gösterir ve sonrasındaki ad hedef id'dir.
Bağlantı metni hedefi anlatmalıdır: 'İkinci bölüme geç' gibi. Tarayıcı, sayfayı yeniden yüklemeden yalnızca kaydırma yapar; bu yüzden sayfa içi geçişler hızlıdır.
Uygulama Müze sitesi için sayfa içi menü ekle.
İskelette üç bölüm başlığı var. Üst tarafa, her bölüme atlayan üç bağlantı ekle: #koleksiyon, #ziyaret ve #iletisim. Çapa metinleri kendin seç.
Örnek çözümü göster
<h1>Pera Müzesi</h1>
<a href="#koleksiyon">Koleksiyon</a>
<a href="#ziyaret">Ziyaret</a>
<a href="#iletisim">İletişim</a>
<h2 id="koleksiyon">Koleksiyon</h2>
<p>Sergi hakkında.</p>
<h2 id="ziyaret">Ziyaret</h2>
<p>Saatler.</p>
<h2 id="iletisim">İletişim</h2>
<p>Adres.</p>Sayfa içi bağlantılar özet
Sayfa içi geçiş iki parçayla kurulur: hedef öğede benzersiz bir id, bağlantıda ise #id biçiminde href. Tarayıcı sayfayı yeniden yüklemeden kaydırdığı için gezinme hızlıdır.
Uzun belgelerde içerik tablosu ya da 'üstüne dön' bağlantısı bu yöntemle yapılır. Bir sonraki derste bağlantıların nerede açılacağını denetlemeyi göreceğiz.
Kendini test et
-
Başlığa id ekle.
<h2 id="____">İkinci bölüm</h2>Cevabı göster
<h2 id="bolum-2">İkinci bölüm</h2> -
Sayfa içi bağlantı parçalarını eşleştir.
- id
- Hedef öğenin adı
- #
- Parça işareti
- href
- Bağlantı adresi
- fragment
- Adresteki # sonrası bölüm
-
Sayfanın en üstüne dönmek için href değeri ne olmalı?
- href="üst"
- href="#üst"
- href="top"
- href="#"
Cevabı göster
href="#" — Doğru. Yalnızca # işareti sayfanın en üstüne götürür.