Bu ders notu, HTML'de bağlantı (link) oluşturmak için kullanılan <a> etiketinin temel özelliklerini, niteliklerini ve farklı kullanım senaryolarını kapsamaktadır. Bu konuları anlayarak testteki soruları kolayca çözebilirsin.
<a> Etiketi: Hiperlink OluşturmaHTML'deki <a> (anchor - çapa) etiketi, web sayfaları arasında veya aynı sayfa içinde gezinmeyi sağlayan hiperlinkler oluşturmak için kullanılır. Temel amacı, bir metni veya görseli tıklanabilir hale getirerek kullanıcıyı başka bir konuma yönlendirmektir.
<a> etiketi açılır ve kapanır.href niteliği ile belirtilir.<a> etiketlerinin arasına yazılır.Örnek: <a href="https://www.example.com">Örnek Siteye Git</a>
href Niteliği: Bağlantı Adresi Belirlemehref (hypertext reference) niteliği, bağlantının hedef adresini (URL) tanımlar. Bu adres, bir web sayfası, bir dosya, bir e-posta adresi veya aynı sayfa içindeki bir bölüm olabilir.
https://www.google.com). Genellikle başka bir web sitesine yönlendirmek için kullanılır.hakkimizda.html veya ../resimler/logo.png). Kendi web siteniz içindeki sayfalara veya dosyalara bağlantı verirken tercih edilir.💡 İpucu: Kendi sitenizdeki sayfalara bağlantı verirken göreceli yollar kullanmak, sitenizi başka bir sunucuya taşıdığınızda bağlantıların bozulmamasını sağlar.
target Niteliği: Bağlantıyı Nerede Açmalı?target niteliği, tıklanan bağlantının hangi pencerede veya sekmede açılacağını belirtir. Bu, kullanıcı deneyimini doğrudan etkileyen önemli bir özelliktir.
_self: Bağlantıyı mevcut pencere/sekmede açar (varsayılan değerdir)._blank: Bağlantıyı yeni bir pencerede veya sekmede açar._parent: Bağlantıyı üst çerçevede açar (eğer sayfa bir çerçeve içindeyse)._top: Bağlantıyı pencerenin tamamında açar, tüm çerçeveleri iptal eder.Örnek: <a href="https://www.yeni-site.com" target="_blank">Yeni Sekmede Aç</a>
⚠️ Dikkat: target="_blank" kullanırken güvenlik açıkları oluşmaması için rel="noopener noreferrer" niteliğini de eklemek iyi bir uygulamadır: <a href="..." target="_blank" rel="noopener noreferrer">...</a>
Uzun sayfalarda, kullanıcıların belirli bölümlere hızlıca atlamasını sağlamak için sayfa içi bağlantılar (çapa bağlantıları) kullanılır. Bu, kullanıcı deneyimini büyük ölçüde iyileştirir.
id niteliği atanır (örn: <h3 id="bolum1">Bölüm 1 Başlığı</h3>).href niteliğine # işaretiyle birlikte bu id değeri yazılır (örn: <a href="#bolum1">Bölüm 1'e Git</a>).Günlük Hayat Örneği: Bir kitabın içindekiler kısmına tıklayıp doğrudan ilgili bölüme gitmek gibi düşünebilirsin.
<a> etiketi sadece web sayfalarına değil, e-posta gönderme veya telefon araması başlatma gibi farklı eylemleri de tetikleyebilir.
href niteliği mailto: ile başlar ve ardından e-posta adresi gelir. Konu (subject) veya mesaj içeriği (body) gibi ek parametreler de eklenebilir.href niteliği tel: ile başlar ve ardından telefon numarası gelir. Mobil cihazlarda tıklanabilir telefon numaraları oluşturmak için kullanılır.E-posta Örnek: <a href="mailto:[email protected]?subject=Soru&body=Merhaba,">Bize E-posta Gönder</a>
Telefon Örnek: <a href="tel:+905551234567">Bizi Ara</a>
Bir resmi tıklanabilir bir bağlantı haline getirmek için <img> etiketini <a> etiketinin içine yerleştirebilirsin.
<a> etiketi açılır.<img> etiketi yerleştirilir (src, alt nitelikleriyle birlikte).<a> etiketi kapatılır.Örnek: <a href="https://www.google.com"><img src="google-logo.png" alt="Google Logosu" style="width:100px;"></a>
Bağlantıları doğru ve erişilebilir bir şekilde oluşturmak, tüm kullanıcılar için web sitenizi daha kullanışlı hale getirir.
title Niteliği: Bağlantı metnine ek bilgi vermek için title niteliğini kullanabilirsiniz. Fare imleci bağlantının üzerine geldiğinde bu metin bir ipucu olarak görünür.💡 İpucu: İyi bağlantı metinleri, kullanıcıların bir bağlantıya tıklamadan önce nereye gidecekleri hakkında net bir fikir edinmelerini sağlar ve SEO açısından da faydalıdır.