Çapa bağlantıları

<a> etiketi ve href özniteliğiyle başka sayfalara bağlantı vermeyi öğrenirsin.

Çapa etiketi ne işe yarar?

Bir sayfadan diğerine geçiş yapmayı sağlayan etiket <a>'dır. Çapa (anchor) adı da verilir. Bir <a> etiketi içine alınan metin tıklanabilir hale gelir ve tarayıcı bu metni bağlantı olarak çizer.

Bağlantının gideceği adresi href özniteliği belirler. Önceki derste gördüğümüz başlıklar ve paragraflar bilgi sunarken, <a> sayfayı etkileşimli yapar.

Çapa metni nasıl seçilir?

<a> etiketinin arasındaki metne çapa metni (anchor text) denir. Bu metin bağlantının ne hakkında olduğunu anlatmalıdır. 'Buraya tıkla' gibi belirsiz ifadeler yerine 'Menüyü gör' ya da 'Bilet al' gibi açık metinler tercih edilir.

Açık çapa metni hem okuyucuya hem de ekran okuyucuya yardımcı olur; arama motorları da bağlantının bağlamını bu metinden çıkarır.

Uygulama Bir kafe sayfası için çapa bağlantısı ekle.

Aşağıdaki iskelette <a> etiketiyle menü sayfasına giden bir bağlantı oluştur. Çapa metni "Menüyü gör" olsun.

Örnek çözümü göster

<p>Galata Kafesi'ne hoş geldiniz.</p>
<a href="menu.html">Menüyü gör</a>

Bağlantılar sayfayı canlandırır

Bu derste <a> etiketinin bir metni bağlantıya dönüştürdüğünü gördün. href özniteliği hedefi, etiketin arasındaki metin ise bağlamı belirler. Açık çapa metni seçmek, bağlantının hem anlaşılır hem de ekran okuyucular için erişilebilir olmasını sağlar.

Önümüzdeki derslerde bu adreslerin farklı biçimlerini — tam, göreli ve sayfa içi — adım adım inceleyeceğiz.

Kendini test et

Bir bağlantının gideceği adresi hangi öznitelik belirler?
- href
- src
- link
- name
Cevabı göster

href — Doğru. href, bağlantının hedef adresini taşır.

Şehir rehberi bağlantısını tamamla.

<a href="____">İstanbul gezisi</a>

Cevabı göster

<a href="https://sehir-rehberi.example/istanbul">İstanbul gezisi</a>

Çapa bağlantısı parçalarını eşleştir.

<a>

Çapa etiketi
href

Hedef adres özniteliği
çapa metni

Tıklanabilir yazı
bağlantı

Sayfalar arası geçiş

Sıradaki ders: Mutlak ve göreli URL'ler

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler