HTML 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.