Kutay Utku

"Kutay Utku'in Projeleri Ve Notları"

HTML’de bağlantı vermek ve görselleri tıklanabilir hale getirmek oldukça yaygın bir tekniktir. Kullanıcıların sayfalar arasında kolayca geçiş yapabilmesi için linkler kullanılır. <a> ve <img> etiketleriyle görselleri bağlantı haline getirerek, hem görsel hem de metin tabanlı içeriklerde etkileşim oluşturabilirsiniz. Aşağıda, bu etiketlerin nasıl geliştirilebileceği ve daha kapsamlı bir şekilde nasıl kullanılacağına dair örnekleri ve açıklamaları bulabilirsiniz.

HTML’de Link Verme ve Görseli Bağlantı Haline Getirme

HTML’de bir yazıya veya görsele bağlantı eklemek için, <a> ve <img> etiketleri kullanılır. Bu sayede, kullanıcılar görsel veya metin üzerine tıkladığında başka bir sayfaya yönlendirilir.

1. Linki Mevcut Pencerede Açmak İçin:

Varsayılan olarak, <a> etiketi ile oluşturulan bağlantılar aynı pencerede veya sekmede açılır.

<a href="https://www.example.com" title="Örnek web sitesine git">Buraya Tıklayın</a>

Bu kod, kullanıcı “Buraya Tıklayın” yazısına tıkladığında https://www.example.com adresine yönlendirir. Aynı zamanda, title özelliği sayesinde fareyle üzerine gelindiğinde “Örnek web sitesine git” açıklaması görünür.

2. İç Bağlantılar (Site İçindeki Sayfalara Yönlendirme):

Web sitesi içinde başka bir sayfaya yönlendirmek için iç bağlantılar kullanılır:

<a href="hakkimizda.html" title="Hakkımızda sayfasına git">Hakkımızda Sayfasına Git</a>

Bu kod, kullanıcının hakkimizda.html adlı sayfaya yönlendirilmesini sağlar.

3. Linki Yeni Bir Pencerede Açmak İçin:

Bağlantıyı yeni bir sekmede veya pencerede açmak için target="_blank" parametresi kullanılır:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer" title="Yeni sekmede aç">Buraya Tıklayın</a>

Bu kod, bağlantıyı yeni sekmede açar ve mevcut sayfa açık kalır. Güvenlik açısından rel="noopener noreferrer" eklemek, yeni sekmenin mevcut sayfa ile bağlantı kurmasını engeller.

4. Linki E-Posta Göndermek İçin:

Bir kullanıcıya e-posta göndermek için mailto: protokolü kullanılır:

<a href="mailto:ornek@mail.com" title="E-posta gönder">Bana E-Posta Gönder</a>

Bu kod, kullanıcı linke tıkladığında varsayılan e-posta istemcisini açar ve belirtilen adrese e-posta göndermesini sağlar.

5. Linki Telefon Araması İçin:

Bir telefon numarasına bağlantı vermek için tel: protokolü kullanılır:

<a href="tel:+901234567890" title="Bu numarayı ara">Beni Ara</a>

Bu kod, mobil cihazlarda veya arama destekleyen uygulamalarda tıklandığında belirtilen numarayı arama işlemi başlatır.

HTML’de Alt ve Title Açıklamaları

Bazı HTML etiketlerinde, özellikle <img> ve <a> gibi etiketlerde, açıklamalar eklemek için alt ve title özellikleri kullanılır. Bu özellikler, görsellerin erişilebilirliğini artırır ve SEO açısından faydalıdır.

1. alt Açıklaması (Alternatif Metin):

alt (alternatif metin) etiketi genellikle <img> etiketi ile kullanılır ve resim yüklenemediğinde veya görüntülenemediğinde yerine geçen metni gösterir. Bu açıklamalar, ekran okuyucular tarafından okunur ve web sayfalarının erişilebilirliğini artırır.

Örnek Kullanım:

<img src="resim.jpg" alt="Dağ manzarası ve gökyüzü" title="Muhteşem doğa manzarası">

• alt=”Dağ manzarası ve gökyüzü” → Resim yüklenmediğinde bu metin görüntülenir.
• title=”Muhteşem doğa manzarası” → Kullanıcı fareyi resmin üzerine getirdiğinde açıklama görünür.

2. title Açıklaması (Araç İpucu Metni):

title etiketi, kullanıcı fareyi öğenin üzerine getirdiğinde küçük bir kutuda açıklama görünmesini sağlar. Bu açıklamalar genellikle <a>, <img>, <button> gibi etiketlerde kullanılır.

Başka bir Örnek:

<a href="https://www.example.com" title="Örnek web sitesine git">Buraya Tıklayın</a>

Bu bağlantının üzerine gelindiğinde “Örnek web sitesine git” açıklaması kullanıcıya gösterilir.

Görseli Bağlantı Haline Getirme

Görseli bir bağlantı haline getirmek için <a> ve <img> etiketlerini birleştirebilirsiniz. Bu, kullanıcıların görsele tıkladığında başka bir sayfaya yönlendirilmesini sağlar.

Örnek Kullanım:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Örnek Görsel" title="Tıklayın ve siteyi ziyaret edin">
</a>

Açıklama:

• <a> etiketi: Kullanıcının tıklayabileceği bağlantıyı tanımlar. href ile yönlendirilecek URL belirlenir.
• <img> etiketi: Sayfada gösterilecek görseli tanımlar. src ile görselin dosya yolu, alt ile resim yüklenemediğinde görünen metin, title ile fare ile üzerine gelindiğinde görünen açıklama belirlenir.

Bu şekilde, görseli bir bağlantı haline getirerek kullanıcıları başka bir sayfaya yönlendirebilirsiniz.

Sonuç

HTML’de bağlantı eklemek ve görselleri tıklanabilir hale getirmek çok basittir. Farklı bağlantı türlerini, iç ve dış bağlantıları, telefon numarası ve e-posta bağlantıları gibi çeşitli kullanım alanlarını anlamak ve uygun şekilde kullanmak, web sayfalarınızın erişilebilirliğini ve kullanıcı etkileşimini artıracaktır.