HTML Link Verme

Emre Nogay · · HTML


00:30 Yazılara Link Verme
01:15 Linki Yeni Sekmede Açtırma
02:00 Resimlere Link Verme

Selamlar,
HTML için, hem yazıya, hem de resimlere nasıl link verebilirsiniz, bu linkleri yeni bir sekmede nasıl açtırırsınız bunu anlatıyor olucam. Sayfanın en altına da, meraklısı için yazıya tıklandığında e-posta açmayı, telefon numarasına link vermek gibi detayları bıraktım.

İlk aşamada HTML link verme için sayfamızın çalışması için gerekli olan kodları yazdığımızı varsayıyorum.

HTML Yazıya Link Verme:

Yazıya, resime veya herhangi bir objeye link vermek için, HTML’de bulunan <a> etiketini kullanmamız gerekiyor.
Kullanıcıyı bir sayfaya yönlendirmek için, <a> etiketinin alması gereken şart olan bir özellik var. Bu özellik href özelliğidir.

<a href="https://emrenogay.com">Emre Nogay</a>

Sayfayı açtırma işlemi tamam ama, bu sayfayı yeni bir sekmede açmak için ne yapmalıyız? Bunun için <a> etiketine 1 özellik daha eklememiz gerekiyor. Bu özelliğimizin adı target. Örnek bir yeni sayfada açma kodu:

<a href="https://emrenogay.com" target="_blank">Emre Nogay</a>

Target özelliğinin alabildiği değerler;

  • _blank (Yeni sekmede açar.)
  • _self (Varsayılandır aynı sekmede açar.)
  • _parent (iFrame kullanırken belgeyi ana frame’de açar.)
  • _top (Frame kullanırken sayfayı gövdede açar.)
  • frameismi (Adı verilen frame’de açar.)

HTML Resime Link Verme:

Yazıya link verme işlemi ile neredeyse aynı. <a> etiketlerinin arasına <img> etiketini ekleyerek resime link vermiş olacağız. Ben örnek bir resme link verme kodu yazdım:

<a href="https://emrenogay.com"> 
     <img src="tebrikler.jpeg" /> 
</a>

Ben .jpeg uzantılı bir resim belirledim ancak uzantısı fark etmez.

HTML Link Verme Hakkında Tüm Detaylar

<a> etiketinin temel kullanımı yukarıdaki gibidir. Şimdi işin meraklılarına, HTML link verme başka nasıl ve nerelerde kullanılıyor anlatayım.

Eklenebilen diğer nitelikler (attributes):

Özellik Adı Aldığı değer Açıklaması
hreflang Bulunan sayfanın farklı dildeki versiyonu için kullanılır.
download Tıklandığında içeriği indirmeye zorlar.
target _blank
_parent
_self
_top
frame ismi
Sayfayı farklı türlerde açmanızı sağlar.
title yazı (string) Üzerine gelindiğinde ipucu şeklinde kullanıcıya gösterilir.
href url Tıklanıldığında yazılan içeriğe yönlendirir.

HREF için Farklı URL Formatları:

Protokol Değer
Tam Nitelikli https://siteadi.com veya http://siteadi.com
Esnek //siteadi.com
Tarayıcı Özel chrome://settings/
Direkt Giriş /wp-content/uploads/foo.jpg
JavaScript javascript:fonksiyon();

HTML Telefon ve Mail Kodu

Yazıya tıklandığında telefon numarasını aratmak için bu kodu kullanın.

<a href="tel:05357418569">Tıkla Ara</a>

Yazıya tıklandığında mail uygulamasını açtırmak için bu kodu kullanın.

<a href="mailto:[email protected]">Tıkla Mail Gönder</a>

<a> etiketi popüler tüm tarayıcılar tarafından desteklenmektedir. Bu bilgiler size yeterli gelmediyse, mozilla blogundan fazla bilgi edinebilirsiniz. Hatalarınızı kontrol etmek maksadıyla, kendi yazmış olduğum HTML hata bulucuyu deneyin. Efenim HTML link verme, kullanıcıyı yönlendirme konumuzun sonuna geldik. Herhangi bir probleminiz olursa yorum kısmından bana sorabilirsiniz. Size yardımcı olmaktan mutluluk duyarım.

Ben Emre Nogay,
Sevgiler.

Yorumlar
Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İnternet bağlantınız kesintiye uğradı.