Html Ders 3 – Bağlantılar

Bağlantı Etiketi (<a>)

Bağlantılar, web sayfalarının temel yapı taşlarından biridir ve kullanıcıların farklı sayfalara, kaynaklara veya aynı sayfanın belirli bölümlerine kolayca geçiş yapmasını sağlar. <a> etiketi, bu bağlantıları oluşturmak için kullanılan HTML öğesidir.

Temel Kullanım ve Sözdizimi:

<a href=”bağlantı_adresi”>Bağlantı Metni</a>

href Özelliği (Hypertext Reference): Bu, bağlantının en önemli özelliğidir. Bağlantının hedef URL’sini belirtir. Hedef URL, bir web sitesinin adresi, aynı sayfadaki bir bölümün kimliği veya başka bir kaynak olabilir.

  • Mutlak URL: Tam adresini içeren URL’dir (örnek: https://www.example.com).
  • Göreceli URL: Mevcut sayfanın konumuna göre belirlenen URL’dir (örnek: hakkimizda.html, resimler/logo.png). Aynı web sitesindeki farklı sayfaları veya kaynakları belirtmek için kullanılır.

Bağlantı Metni (Link Text): Kullanıcının tıklayabileceği ve bağlantıyı tanımlayan metindir. Anlamlı ve açıklayıcı bir metin kullanmak önemlidir.

Farklı Bağlantı Türleri ve href Değerleri:

  • İçerideki Sayfa Bağlantısı (Internal Link): Aynı web sitesindeki farklı bir sayfaya bağlantı verir. Örnek: <a href=”hakkimizda.html”>Hakkımızda</a>
  • Dışarıdaki Sayfa Bağlantısı (External Link): Farklı bir web sitesine bağlantı verir. Örnek: <a href=”https://www.google.com”>Google’a Git<a/>
  • E-posta Bağlantısı (Email Link): Kullanıcının e-posta programını açarak belirli bir adrese e-posta göndermesini sağlar. mailto: şeması kullanılır. Örnek: <a href=”mailto:info@example.com”>Bize E-posta Gönderin</a>. Ayrıca,  “?subject=Konu Başlığı” ve “&body=Mesaj İçeriği” gibi ek parametreler kullanılabilir. Örnek: <a href=”mailto:info@example.com?subject=İletişim&body=Merhaba,”>Bize Ulaşın</a>
  • Dosya İndirme Bağlantısı (Download Link): Bir dosyayı indirmeyi sağlar. download özelliği kullanılır. Örnek: <a href=”dosyam.pdf” download>PDF Dosyasını İndirin</a>
  • Çapa Bağlantısı (Anchor Link): Aynı sayfadaki belirli bir bölüme bağlantı verir. # sembolü ve hedef bölümün kimliği kullanılır. Örnek: <a href=”#iletisim-formu”>İletişim Formuna Git</a>. Hedef bölümün kimliği, HTML öğesine id özelliği ile atanır: <div id=”iletisim-formu”>…</div>

Hedef Özelliği (target) ve Bağlantıların Yeni Sekmelerde Açılması:

target özelliği, bağlantının yeni bir sekme veya pencerede açılmasını kontrol eder.

  • _blank: Bağlantıyı yeni bir sekmede veya pencerede açar. Kullanıcı deneyimi açısından dikkatli kullanılmalıdır (kullanıcının yönlendirmeyi fark etmesini sağlamak önemlidir). Örnek: <a href=”https://www.example.com” target=”_blank”>Example</a>
  • _self: Bağlantıyı aynı sekmede veya pencerede açar (varsayılan değer).
  • _parent: Üst çerçevede açar (genellikle çerçeve yapıları için kullanılır).
  • _top: Tüm tarayıcı penceresinde açar (çerçeveleri yok eder).

Bağlantı Stili ve Görünümü (CSS ile):

HTML, bağlantıların temel yapısını sağlar, ancak görünümünü CSS ile özelleştirebilirsiniz. Örnek:

CSS
a {
  color: blue; /* Bağlantı rengi */
  text-decoration: none; /* Alt çizgi kaldırır */
}

a:hover {
  color: red; /* Fare üzerine gelindiğinde renk değiştirir */
  text-decoration: underline; /* Fare üzerine gelindiğinde alt çizgi ekler */
}

Erişilebilirlik ve Bağlantılar:

  • Bağlantı metninin açıklayıcı ve anlamlı olduğundan emin olun. “Tıklayın”, “Buraya tıklayın” gibi genel ifadelerden kaçının.
  • Ekran okuyucular için bağlantının amacını açıkça belirtin.
  • title özelliği ile ek bilgi sağlayabilirsiniz (ancak bu özellik her zaman güvenilir değildir).

Kaynak: https://developer.mozilla.org/en-US/docs/Web/HTML

Etiketler