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.

Sıradaki ders: Bağlantı hedefleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler