HTML link verme (<a>)

Question

Link vermek için etiketini kullanıyorum ama nereye yazacağımı tam anlayamadım. Hangi özelliği eklemem gerektiğini ve tıklanınca yeni sekmede açılmasını nasıl sağlarım karıştırıyorum.

Answer 1

📎 HTML'de Link Verme: Web'in Temel Taşı

Merhaba! Bu dersimizde, web sayfalarını birbirine bağlayan ve interneti "ağ" yapan en önemli HTML etiketlerinden biri olan <a> etiketini öğreneceğiz.

🎯 <a> Etiketi Nedir?

<a> etiketi, "anchor" (çapa) kelimesinin kısaltmasıdır. Bu etiket, bir metni veya görseli tıklanabilir bir bağlantıya (hyperlink) dönüştürmek için kullanılır. Kullanıcı bu bağlantıya tıkladığında, belirlenen hedefe (başka bir web sayfası, dosya, e-posta adresi vb.) yönlendirilir.

🛠️ Temel Kullanım: "href" Niteliği

Bir bağlantı oluşturmak için <a> etiketinin en önemli arkadaşı href niteliğidir. "href", "Hypertext REFerence"ın kısaltmasıdır ve bağlantının gideceği adresi belirtir.

🔹 Temel Yazım Kuralı:

<a href="hedef_adres">Tıklanacak Yazı</a>

📌 Örnek:

<a href="https://www.wikipedia.org">Wikipedia'ya Git</a>

Bu kod, tarayıcıda şu şekilde görünecektir: Wikipedia'ya Git

🌐 Hedef Türleri

href niteliğiyle farklı türde hedeflere bağlantı verebilirsiniz:

• ✅ Başka Bir Web Sitesi: Tam bir internet adresi (URL) yazılır.

<a href="https://www.google.com">Google'da Arama Yap</a>

• ✅ Aynı Sitedeki Başka Bir Sayfa: Sadece dosya adı veya klasör yolu yazılır.

<a href="hakkimizda.html">Hakkımızda</a>

<a href="urunler/bilgisayar.html">Bilgisayarlar</a>

• ✅ E-posta Gönderme: mailto: ifadesi kullanılır.

<a href="mailto:[e-mail]">Bize E-posta Gönderin</a>

• ✅ Telefon Arama (Mobil Cihazlarda): tel: ifadesi kullanılır.

<a href="tel:[phone]">Bizi Arayın</a>

• ✅ Sayfa İçindeki Bir Bölüme (Çapa - Anchor): # işareti ve bölümün id'si kullanılır.

<a href="#bolum3">3. Bölüme Git</a>

... ve sayfanın aşağısında <h2 id="bolum3">3. Bölüm Başlığı</h2> şeklinde bir hedef olmalıdır.

🎯 Pencere Hedefi: "target" Niteliği

target niteliği, bağlantının nasıl açılacağını kontrol eder.

• ➡️ target="_self": Varsayılan değerdir. Bağlantıyı mevcut pencerede/aynı sekmede açar.
• ➡️ target="_blank": En yaygın kullanılan bu değer, bağlantıyı yeni bir sekmede veya pencerede açar. Kullanıcıyı sizin sitenizden uzaklaştıracak bağlantılar için idealdir.

<a href="https://www.haber.com" target="_blank">Haber Sitesini Yeni Sekmede Aç</a>

💡 İpuçları ve En İyi Uygulamalar

• 📌 Bağlantı metninizin, nereye gideceğini açıkça anlatmasına özen gösterin. "Buraya tıklayın" yerine "HTML ders notlarını indirin" gibi ifadeler kullanın.
• 📌 Görsellere de bağlantı verebilirsiniz. Sadece <a> etiketinin içine bir <img> etiketi yerleştirmeniz yeterlidir.

<a href="buyuk_foto.jpg"><img src="kucuk_foto.jpg" alt="Manzara"></a>

• 📌 Erişilebilirlik için, bağlantılar klavye ile (Tab tuşuyla) seçilebilir olmalı ve odaklandıklarında görsel bir değişiklik göstermelidir.

Artık web sayfalarını birbirine bağlamanın temelini öğrendin! 🎉 Pratik yaparak bu bilgileri pekiştirmeyi unutma.