BAĞLANTILAR (LİNKLER)

kullanıcıların tıklama yapabileceği ve bu tıklama sonucu başka bir sayfaya gidebileceği alanlar oluşturmak için <a> etiketi kullanılır. bir menüde gördüğünüz yazılar, başka bir yazıya yönlendiren bağlantılar yada bir resme tıkladığınızda açılan sayfalar bu kullanımın örnekleridir.

şimdi en basit hali ile bir bağlantı oluşturalım.

<a href="https://github.com/">Buraya Tıkla</a>

burada tıklama sonucu gidilecek hedef href özelliği içinde belirtilir. açılış ve kapanış etiketleri arasında kalan Buraya Tıkla yazısı ise kullanıcının ekranda göreceği kısımdır. yani adres ile görünen yazının aynı olması gerekmez.

örnekte Buraya Tıkla dedik ama bir sitede bu şekilde çok sayıda bağlantı olursa hangisinin nereye gittiğini anlamak zorlaşır. bunun yerine GitHub sayfasına git gibi bir yazı yazarsanız kullanıcı bağlantıyı açmadan önce ne ile karşılaşacağını bilir.

href içine ne yazacağız?

başka bir siteye bağlantı vereceksek yukarıdaki gibi https:// ile başlayan adresini yazabiliriz. kendi sitemizdeki bir yazıya bağlantı vereceksek de site kökünden başlayan bir yol kullanabiliriz. mesela paragraf etiketini anlattığımız yazıya bir bağlantı verelim.

<a href="/html-etiketlerini-gorelim-baslik-paragraf-etiketi">Paragraf etiketi yazısını oku</a>

adresin başındaki / işareti burada önemlidir. tarayıcı bu yolu bulunduğunuz sayfanın altından değil sitenin kökünden itibaren arar. örneği başka bir sitede deniyorsanız aynı adreste bir sayfanız olmadığında bağlantı çalışmaz. (etiketin doğru yazılması ile hedef sayfanın var olması ayrı şeylerdir.)

target ve title özellikleri

target, bağlantının nerede açılacağını belirtir. _self yazarsak bulunduğumuz sekmede açılır. target özelliğini hiç yazmadığımız normal bir bağlantı da aynı şekilde davranır. _blank ise genellikle yeni bir sekmede açar, tarayıcı ayarına göre yeni pencere de olabilir. buradaki alt çizgilere dikkat edin, self ile _self aynı değer değildir.

title ise bağlantıya ek bilgi yazmak için kullanılır. fare ile üzerine gelip biraz beklediğinizde çoğu masaüstü tarayıcısı bu yazıyı bir bilgi balonu olarak gösterir. fakat bağlantının nereye gittiğini anlatan asıl yazıyı yine etiketlerin arasına yazalım, sadece title içine yazmakla yetinmeyelim.

bir de sık karıştırılan alt konusu var. alt, <a> etiketinin bir özelliği değildir. bir resmi bağlantı yaptığınızda alt açıklamasını resme ait <img> etiketine yazarsınız. linke açıklama eklemek için a etiketinin içine alt yazmamız doğru olmaz.

örnek kodlarımız

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Link etiketi örneği</title>
</head>
<body>
    <a href="https://www.youtube.com/vikuba"
       target="_blank"
       rel="noopener"
       title="youtubede bulunan kanalım">Ücretsiz Video Eğitimler</a>
</body>
</html>

bu kodları bir html dosyasına kaydedip tarayıcıda açtığınızda Ücretsiz Video Eğitimler yazısını göreceksiniz. üzerine tıklayınca hedef adres yeni sekmede açılacaktır. buradaki rel="noopener" yeni açılan sayfanın bağlantıyı açan pencereye window.opener üzerinden ulaşmasını engeller.

kodlarımızın tarayıcı çıktısı

Ücretsiz Video Eğitimler bağlantısının tarayıcıdaki görünümü

son olarak bağlantı açılmıyor ise önce href içine yazdığınız adresi kontrol edin. tırnakları kapatmayı unuttuysanız yada adresin bir harfini eksik yazdıysanız istediğiniz sayfaya gidemezsiniz. aynı adresi tarayıcının adres çubuğuna doğrudan yazarak da kontrol edebilirsiniz.