HTML’de Link (Bağlantı) Ekleme

Linkler, kullanıcıyı bulundukları sayfadan başka bir sayfaya ulaşmalarını sağlayan aracı metinlerdir. Fare imleciniz linklerin üzerine geldiğinde el işaretine döner. Tüm sayfalarda tıklayabildiğiniz her şey birer linktir. Linkler, metinlere, başlıklara, imajlara verilebilir. Bu makalede HTML ile sayfa içinde link vermeyi ve özelliklerini öğreniyoruz.

HTML’de Link Yapısı

HTML’de linkler a etiketi ile başlar ve href ile yönlendirilecek sayfanın adresi belirtilir. HTML’de linkler a etiketi ile başlar ve href ile yönlendirilecek sayfanın adresi belirtilir.

<a href="https://www.sanagrafi.com">Online Dersler</a>

Örnekte gördüğünüz gibi Online Dersler yazısına tıklayan bir kullanıcı sanagrafi web sitesine yönlendirilecektir. Online Dersler metni sayfa içerisinde, kullanıcılara görünen kısım.

Tıklandığında başka bir sayfaya geçmek için de linkler kullanılır. Tıklanabilir her şey bir linktir ve logoda, menülerde, sayfa içinde başka bir sayfaya geçerken ya da footer dediğimiz sayfanın en alt bölümünde bu linklerden bolca görünür. Bir metne ya da bir imaja link vermek için a etiketi ve linke tıklandığında yönleneceği adres olan href kullanılır. Aşağıdaki örnekte Tıkla kelimesine tıkladığınızda sayfa.html sayfasına yönlendirilirsiniz.

<a href="sayfa.html">Tıkla</a>

Linkleme konusunda bilmemiz gereken iki ek özellik var. Tıklandığında arayan telefon numarası oluşturmak ve tıklandığında varsayılan mail adresi programını açan mail linki oluşturmak.

Telefon Numarası Linki Oluşturma

Siteye tıklanabilir telefon numarası eklemek için a etiketinin tel özelliğini kullanıyoruz. Böylece onun bir telefon numarası olduğu anlaşılıyor telefonlar ya da iletişim programları tarafından.

<a href="tel:0888 111 00 11">0(888) 111 00 11</a>

Mail Linki Oluşturma

Tıklandığında mail programının açılmasını sağlayan mail linki için de mailto özelliğini kullanıyoruz.

<a href="mailto:name@domain.com">name@domain.com</a>

HTML Link Renkleri

Varsayılan olarak tarayıcılar ziyaret edilmemiş linklere, ziyaret edilmiş linklere ve aktif linklere renk tanımlar. Örneğin, varsayılan link rengi mavidir. Biz, bu renkleri sayfanın ihtiyacına ve görünüşe göre değiştirebiliyoruz. Örneğin; bir linkin kırmızı renge sahip olmasını istersek CSS’i kullanıyoruz.

<style>
a:link {color:red;}
a:visited {color:orange;}
a:hover {color:green;}
</style>

Bu kodları açıklayacak olursak varsayılan link rengi red (kırmızı), önceden ziyaret edilmiş link rengi orange (turuncu) ve fare imleci linkin üzerine geldiğinde green (yeşil) renk olacaktır.

HTML Link Özellikleri

Sayfalardaki linklere tıkladığınızda yönlendirilen sayfa aynı sayfada mı açılacağını, yoksa yeni bir sayfaya mı yönlendirileceğini belirleyebiliyoruz. Linkte tıklandığında nerede açılacağını target komutu ile belirliyoruz.

_blank: Link, yeni bir sekmede açılır.
_self: Link, aynı sayfada açılır.
_parent: iFrame kullanılan bir sayfada, iframe’deki linkte tıklandığında yine iframe içinde açılması sağlanır.
_top: Link bir iframe içerisindeyse ve linkte tıkladığınızda iframe içinde değil, sayfanın genelinde açılır.

<a href="https://www.sanagrafi.com" target="_blank" rel="noopener noreferrer">Sanagrafi</a>

Sanagrafi linkine tıkladığınızda sanagrafi.com adresi, target=”_blank” değeri sayesinde yeni bir sekmede açılacak.

HTML’de Resimlere Link Vermek

Resimlere link vermek için de tamamen aynı mantık uygulanıyor. Metin yerine resmin kodunu ekliyoruz sadece. a etiketleri arasında img etiketini ekliyoruz. Aşağıdaki örneğe göre img etiketi ile görünen logoya tıkladığınızda sanagrafi.com adresine yönlendiriliyorsunuz.

<a href="https://www.sanagrafi.com">
	<img src="logo.png" />
</a>

HTML Link Başlıkları

Link başlıkları, fare imleci ile link üzerine geldiğinizde tooltip şeklinde tabir ettiğimiz küçük mesaj olarak görünür. Bu mesajın çıkmasını title özelliği ile sağlıyoruz.

<a href="https://www.sanagrafi.com" title="Online Eğitimler">Sanagrafi</a>