0 gün Seviye 1 Avar Teknolojileri

Sayfa İçi Bağlantılar

Ders 14/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda uzun bir sayfanın belirli bölümlerine atlayan bağlantılar yapabileceksiniz.

id ve #

Bir bölüme bağlantı vermek için iki adım gerekir:

  1. Hedef elemana bir id niteliği verin. Örnek: <h2 id="kurallar">Kurallar</h2>
  2. Bağlantının href değerine # ve bu id değerini yazın. Örnek: <a href="#kurallar">Kurallara git</a>
<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sayfa içi bağlantılar</title>
</head>
<body>
  <p><a href="#kurallar">Kurallara git</a></p>
  <p><a href="#iletisim">İletişime git</a></p>

  <h2 id="kurallar">Kurallar</h2>
  <p>Kulüp her cuma toplanır.</p>

  <h2 id="iletisim">İletişim</h2>
  <p>Bize okuldan ulaşabilirsiniz.</p>

  <p><a href="#">Başa dön</a></p>
</body>
</html>

href="#" sayfanın en üstüne götürür. Bu yüzden “Başa dön” bağlantılarında kullanılır.

Atlama etkisini görmek için sayfanın kaydırılacak kadar uzun olması gerekir. Kodu kendi dosyanıza kopyalayıp bölümlerin arasına birkaç paragraf ekleyerek deneyin.

Başka bir sayfanın bölümüne gitmek

Dosya adının sonuna # ve id ekleyebilirsiniz:

<a href="sss.html#iade">İade koşulları</a>
id kuralları

Bir id sayfada yalnızca bir kez kullanılabilir ve içinde boşluk bulunamaz. Küçük harf, tire ve İngilizce harfler kullanmak en güvenli yoldur: iade-kosullari

Sık yapılan hatalar

# işaretini id değerine de yazmak. id="#kurallar" yanlıştır. # yalnızca bağlantıda yazılır.

Aynı id değerini iki kez kullanmak. Bağlantı yalnızca ilk elemana gider.

Büyük ve küçük harf farkı. id="Kurallar" ile #kurallar eşleşmez.

Soru 1

<h2 id="sonuc"> başlığına giden bağlantı nasıl yazılır?

  • <a href="#sonuc">Sonuç</a> :: Doğru.
  • <a href="sonuc">Sonuç</a> :: # olmadan bu bir dosya adı sanılır.
  • <a id="#sonuc">Sonuç</a> :: Bağlantının adresi href niteliğine yazılır.
Soru 2

Aynı sayfada iki elemanın id değeri aynı olabilir mi?

  • Evet, sorun olmaz :: id sayfada benzersiz olmalıdır.
  • Hayır, her id benzersiz olmalıdır :: Doğru.
  • Yalnızca başlıklarda olabilir :: Kural bütün elemanlar için geçerlidir.
İçindekiler bağlantısı

Hedefteki kodu yazın. Yalnızca body içine yazılacak kodu yazın. Fiyatlar bağlantısı, id değeri fiyatlar olan başlığa gitsin. Önizlemedeki bağlantıya tıklamanız gerekmez.

<p><a href="#fiyatlar">Fiyatlar</a></p>
<h2 id="fiyatlar">Fiyat Listesi</h2>
<p>Üyelik ücretsizdir.</p>

Bu derste öğrendikleriniz

  • Hedef elemana id verilir, bağlantıda #id yazılır.
  • href="#" sayfanın başına döner.
  • dosya.html#id başka bir sayfanın bölümüne gider.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.