HTML Link Ekleme
HTML’de link eklemek için <a> (anchor) etiketi kullanılır. Bu etiket, bir sayfayı başka bir sayfaya, belgeye, kaynağa veya aynı sayfa içinde bir noktaya bağlamak için kullanılır. Link eklemek, web sayfalarını birbiriyle bağlantılı hale getirmenin temel yöntemidir.
Bir bağlantı oluşturmak için <a> etiketi içine bağlanılacak URL adresi, href (hyperlink reference) özniteliği ile eklenir. Aşağıdaki kod, tıklandığında kullanıcının https://www.google.com adresine yönlendirilmesini sağlar.
<a href="https://www.google.com">Bu bir bağlantıdır</a>HTML dökümanlarında link oluşturmak için <a> </a> elementinden faydalanılır. Bu iki etiket arasına yazılan herhangi bir şey tıklanabilir hale gelecektir; <a href="url">bağlantı metni</a>
HTML dökümanımızdaki <a> </a> etiketleri arasında arasındaki metin, bağlantı metni olarak adlandırılır. Ve mümkün mertebe bağlantı metni, ziyaretçilerin tıklamaları halinde nereye götürüleceği açıklayacak şekilde yazılmalıdır.
Zira anlaşılır bir şekilde yazılmış bağlantı metni, ziyaretçilerin istediklerini bulmalarına yardımcı olabilir. Bu sitenizi ziyaret eden kullanıcılara siteniz hakkında daha olumlu bir izlenim verecektir.
Hyper REFerence kelimelerinin kısaltmasından türetilen href özelliğine yazılan URL ise başka bir HTML sayfası olabildiği gibi bir web sitesi veya herhangi bir dosya olabilir. Zaten HTML’in açılımının Hyper Text Markup Language olduğu göz önünde bulundurulduğunda bu durum anlaşılacaktır.
Web tarayıcılarında varsayılan olarak bir link aşağıdaki varsayılan özelliklerde görüntülenir. Tabi belirtmek gerekir ki CSS kullanarak pekala bu varsayılan özellikler değiştirilebilir:
- Eğer link hiç tıklanmadıysa altı çizgili ve mavi
- Eğer link daha önce tıklandıysa altı çizgili ve mor
- Link tam tıklama anında ise altı çizgili ve kırmızı (buna aktif link denir) olur.
HTML Link (Anchor) Etiketinin Öznitelikleri
href: Bağlantının hedef adresini belirtir.- Mutlak URL: Örneğin,
https://www.example.comgibi tam adresler. - Göreli URL: Aynı site içindeki dosyalara veya sayfalara bağlantılar, örneğin
/about.html. - mailto: Belirli bir e-posta adresine bağlantı verir. Kullanıcı, bağlantıya tıkladığında varsayılan e-posta istemcisi açılır.
Örnek:mailto:[email protected] - tel: Telefon numarasına bağlantı verir. Kullanıcı, bağlantıya tıkladığında telefon uygulaması açılır.
Örnek:tel:+905551234567
- Mutlak URL: Örneğin,
target: Bağlantının nasıl açılacağını belirler._self: Aynı sekmede açar (varsayılan)._blank: Yeni bir sekmede açar._parent: Bağlantıyı bir üst çerçevede açar (çerçeve yapılarında)._top: Bağlantıyı tarayıcı penceresinin en üst düzeyinde açar.
title: Bağlantı hakkında ek bilgi sağlar. Fare ile üzerine gelindiğinde görüntülenir. Örnek:title="Bu, örnek bir bağlantıdır."download: Bağlantıdaki dosyayı indirilmek üzere tanımlar. Örnek:<a href="belge.pdf" download>Belgeyi İndir</a>rel: Bağlantının hedefiyle ilişkiyi tanımlar.- nofollow: Arama motorlarının bağlantıyı takip etmesini engeller.
- noopener/noreferrer: Güvenlik için yeni sekmede açılan bağlantılarda kullanılır.
type: Bağlantıdaki hedefin MIME türünü belirtir. Örnek:type="application/pdf"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Link Örnekleri</title>
</head>
<body>
<h1>HTML Link Etiketi Örnekleri</h1>
<!-- href özniteliği -->
<a href="https://www.example.com">Örnek Siteye Git</a><br>
<!-- target özniteliği -->
<a href="https://www.example.com" target="_blank">Yeni Sekmede Açılan Link</a><br>
<!-- title özniteliği -->
<a href="https://www.example.com" title="Bu, örnek siteye giden bir linktir.">Açıklamalı Link</a><br>
<!-- download özniteliği -->
<a href="dosya.pdf" download="belgem.pdf">PDF Dosyasını İndir</a><br>
<!-- rel özniteliği -->
<a href="https://www.example.com" rel="nofollow">SEO'ya Özel Link</a><br>
<!-- E-posta bağlantısı -->
<a href="mailto:[email protected]">Bize E-posta Gönder</a><br>
<!-- Telefon bağlantısı -->
<a href="tel:+905551234567">Bizi Arayın</a><br>
<!-- Sayfa içi bağlantı -->
<a href="#bolum2">2. Bölüme Git</a><br>
<!-- Sayfa içindeki hedef -->
<h2 id="bolum2">2. Bölüm</h2>
<p>Burası 2. bölüm içeriğidir.</p>
</body>
</html>