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://sanagrafi.com" rel="nofollow noopener" target="_blank">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%20111%2000%2011">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://sanagrafi.com" target="_blank" rel="noopener noreferrer nofollow">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://sanagrafi.com" rel="nofollow noopener" target="_blank">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="logo.png" alt="Logo" title="Html'De Link (Bağlantı) Ekleme 1">
</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://sanagrafi.com" title="Online Eğitimler" rel="nofollow noopener" target="_blank">Sanagrafi</a> 