HTML a Etiketi Kullanımı

Bağlantılar olmadan web nasıl olurdu? Eh, pek bir web değil. Mozilla, World Wide Web‘i şu şekilde tanımlar:

“İnternet aracılığıyla erişilebilen, birbirine bağlı genel web sayfalarından oluşan bir sistem.”

Mozilla

Peki bu sayfalar bir bir birine nasıl bağlıdır? Genellikle köprü metni olarak görünen köprüler veya bir belgeden diğerine bağlantılar. Aslında, HTTP/HTTPS’deki “H”, “Köprü Metni” anlamına gelir. Basitçe söylemek gerekirse, bağlantıları olmayan web yoktur.

HTML’nin ilk sürümünden beri kullanımda olan <a> etiketinin kullanımı göstereceğim. Bazı kaynaklarda a href kullanımı bazı kaynaklarda da HTML bağlantı oluşturma olarak geçmektedir.

<a> etiketini HTML dosyasında bağlantı oluşturmak için kullanılır. Bu bağlantılar sayfa içinde bir noktaya yada başka bir sayfa olabileceği gibi mail yada harici bir site de olabilir.

<a> Anchor Element (Bağlantı Öğesi)

HTML öğesi (veya bağlantı öğesi), href özniteliğiyle birlikte web sayfalarına, dosyalara, e-posta adreslerine, aynı sayfadaki konumlara veya bir URL’nin adresleyebileceği herhangi bir şeye bir köprü oluşturur.

Her <a> içindeki içerik, bağlantının hedefini belirtmelidir. href özelliği ile gidileceği sayfaya yönlendirir.

World Wide Web’in tanımıyla bağlantı kurduğumda, yukarıdaki girişte bir href örneğiyle zaten tanıştınız. Bu köprünün HTML’si şöyle görünür:

Burada dikkat edilmesi gereken birkaç şey var, hepsi bağlantının çalışması için önemli:

• Bağlantı metni, bir <a>açılış etiketi ve </a>bir kapanış etiketine sarılır. Bu etiketler arasındaki tüm metinler seçilebilir ve bağlantı stilini alır.
• href niteliği ve beraberindeki nitelikler, açılış etiketinin içine yerleştirilir.
• href öznitelik değeri (tırnak işaretleri içinde), bağlantı seçildiğinde tarayıcıya nereye gideceğini söyleyen bir URL’dir.
• target=”_blank” ve rel=”noopener” ek özelliklerine dikkat edin – bunlar tarayıcıya web sayfasını yeni bir sekmede açmasını söyler. href‘den farklı olarak, bu nitelikler gerekli değildir.
• Daha kesin olmak gerekirse, yukarıdaki bağlantı, farklı bir web sitesinde bir hedef belirtmek için mutlak bir URL kullanır. Ancak, ileride göreceğimiz gibi, href başka değerler de alabilir.

a href Değerleri

Aynı etki alanındaki veya farklı bir etki alanındaki başka bir web sayfasına bağlanmak için kullanılan href niteliğini sıklıkla görürsünüz. href, aynı sayfanın farklı bir bölümüne bağlantı vermek veya HTTPS’den farklı bir web protokolü sunmak gibi başka şeyler için de kullanılabilir. Bu olası değerlerin her birini örneklerle inceleyelim.

Mutlak URL

Yukarıda tartışıldığı gibi, mutlak bir URL başka bir web sitesindeki bir dosyaya işaret eder.

Başka bir deyişle, geçerli sayfanın URL’sinden farklı bir alan adı içeren bir URL’dir

İşte başka bir örnek: Google aramaya gidin.

Bu köprü ayrıca mutlak bir URL içerir: GOOGLE SİTESİ

Bu bağlantının nerede kullanıldığı önemli değil – her zaman aynı yere, Google ana sayfasına işaret ediyor. Bu yüzden buna “mutlak” URL denir.

Bonus ipucu: Bağlantı metninin, bağlantının ne yaptığını nasıl açıkladığına dikkat edin. Bu, sitenizi yardımcı teknolojileri kullananlar için daha erişilebilir hale getirir.

Bağıl URL

Bağıl bir URL, aynı web sitesindeki bir dosyaya başvurur. Örneğin, işte Web Sitesi Örnekleri bir bağlantıdır.

Ve işte bunun kodu şöyle görünüyor:

href değerinin nasıl farklı göründüğünü görüyor musunuz? HTTPS protokolünü veya alan adını içermez. URL’nin bu kısmı dışarıda bırakıldığında, tarayıcı belirtilen dosyanın geçerli sayfa ile aynı etki alanında (bu durumda tasarimkodlama.com) bulunduğunu varsayar.

Bu URL’lere “göreli- bağıl” diyoruz çünkü bağlantının hedefi mevcut web sayfasına göre belirlenir. Yukarıdaki HTML’yi farklı bir web sitesindeki bir sayfaya yapıştırsaydık, işe yaramazdı.

Neden mutlak URL’ler yerine göreli URL’ler kullanıyorsunuz? Cevap, bir web sitesinin yeniden yapılandırılması veya bir alan değişikliği durumunda olduğu gibi, bağlantılı dosyanın dosya yolu değiştiğinde göreli URL’lerin kullanışlı olmasıdır. Bu olursa, dosya yolunun tamamını değil, yalnızca bağlantılı kaynağın adını içerdiğinden göreli URL çalışmaya devam eder.

URI Parçası (Çapaya yada id’ye bağlantı)

Aynı web sayfasının farklı bir bölümüne bağlanmak için bir URI parçası kullanın. URI parçaları, karma (#) simgesiyle başlar ve ardından istenen sayfa öğesinin kimliği(id) gelir.

#ornek-baslik sayfa içinde bu kimliğe sahip bir noktaya gitmesini sağlar.

Ek Protokoller

Şimdiye kadar gördüğümüz mutlak URL’ler ve göreli URL’ler, World Wide Web’deki sayfalara hizmet veren HTTP/HTTPS protokolünü kullanır. Ancak, mailto:, :tel ve file: gibi href ile diğer protokolleri de kullanabiliriz.

Örneğin, ornek@gmail.com‘a bir e-posta göndermek için bir bağlantı kullanabilirsiniz.

yada bir telefon numarasına bağlantı verebiliriz.

Script Çalıştırma

href içinde bir script çalıştırmak da mümkündür. Aşağıdaki örnekte ekrana merhaba yazdıran örnek bir script kodu mevcuttur.

<a> etiketinin Nitelikler

Bu bölümde <a> etiketinin bazı önemli niteliklerine kısaca örnekler ile bakacağız. Tüm listeye ulaşmak için buradaki bağlantıyı kullabilirsiniz.

download

Kullanıcıdan bağlantılı URL’ye gitmek yerine onu kaydetmesini ister. Bir değerle veya değer olmadan kullanılabilir.

href

Köprünün işaret ettiği URL. Bağlantılar, HTTP tabanlı URL’lerle sınırlı değildir – tarayıcılar tarafından desteklenen herhangi bir URL şemasını kullanabilirler.

Yukarıda detaylandırıldı ama kısaca yazacak olursak

• Parça URL’leri olan bir sayfanın bölümleri
• Medya parçaları içeren medya dosyalarının parçaları
• :tel içeren telefon numaraları URL’leri
• :mailto içeren e-posta adresleri URL’leri
• Web tarayıcıları diğer URL şemalarını desteklemeyebilirken, web siteleri registerProtocolHandler() ile destekleyebilir.

hreflang

Bağlantılı URL’nin insan diline ilişkin ipuçları. Yerleşik işlevsellik yok. İzin verilen değerler, global lang özelliğiyle aynıdır.

referrerpolicy

Bağlantıyı takip ederken yönlendirenin ne kadarının gönderileceğini belirtir.

• no-referrer: Referer başlığı gönderilmez.
• no-referrer-while-downgrade: Yönlendiren başlığı, TLS (HTTPS) olmadan kaynaklara gönderilmez.
• origin: Gönderilen yönlendiren, yönlendiren sayfanın kaynağı ile sınırlı olacaktır: şeması, ana bilgisayarı ve bağlantı noktası.
• origin-When-cross-origin: Diğer kaynaklara gönderilen yönlendirici, şema, ana bilgisayar ve bağlantı noktası ile sınırlı olacaktır. Aynı orijin üzerindeki navigasyonlar yolu da içerecektir.
• same-origin: Aynı kaynak için bir yönlendiren gönderilecek, ancak çapraz kaynak istekleri hiçbir yönlendiren bilgisi içermeyecek.
• strict-origin: Protokol güvenlik düzeyi aynı kaldığında (HTTPS→HTTPS), yönlendirici olarak yalnızca belgenin kökenini gönderin, ancak daha az güvenli bir hedefe (HTTPS→HTTP) göndermeyin.
• strict-origin-while-cross-origin (varsayılan): Aynı kaynaktan istek gerçekleştirirken tam URL gönder, kaynağı yalnızca protokol güvenlik düzeyi aynı kaldığında gönder (HTTPS→HTTPS) ve daha azına üstbilgi gönderme güvenli hedef (HTTPS→HTTP).
• unsafe-url: Yönlendiren, kaynak ve yolu içerecektir (ancak parça, parola veya kullanıcı adı değil). Bu değer güvenli değildir, çünkü TLS korumalı kaynaklardan güvenli olmayan kaynaklara kaynak ve yollar sızdırır.

target

Bir göz atma bağlamının adı olarak bağlantılı URL’nin nerede görüntüleneceği (bir sekme, pencere veya <iframe>). Aşağıdaki anahtar kelimelerin, URL’nin nereye yükleneceği konusunda özel anlamları vardır:

• _self: geçerli tarama bağlamı. (Varsayılan)
• _blank: genellikle yeni bir sekmedir, ancak kullanıcılar tarayıcıları bunun yerine yeni bir pencere açacak şekilde yapılandırabilir.
• _parent: geçerli olanın ana tarama bağlamı. Ebeveyn yoksa, _self gibi davranır.
• _top: en üstteki tarama bağlamı (geçerli olanın atası olan “en yüksek” bağlam). Ata yoksa, _self gibi davranır.

Not: <a> öğelerinde target=”_blank” ayarı dolaylı olarak, window.opener’ı ayarlamayan rel=”noopener” ayarıyla aynı rel davranışını sağlar. Destek durumu için tarayıcı uyumluluğuna bakın.

Bağlantı Verme Örnekleri 

Yazıya Link Verme

Yukarıdaki örnekte belirtilmiş olmasına rağmen hızlı bir şekilde tekrar edecek olursak <a> ile </a> etiketleri arasında yazılan her şey link olarak gösterilmektedir.

Bu yüzden <a>Ekranda görünmesini istediğiniz içerik</a> şeklinde yazdığımızda ekranda görünmesini istediğiniz içerik link olacaktır.

Aşağıdaki örnekte yazılım kodlama yazısına link verilmiştir.

Resim Link Verme

Yazıya link verme yöntemi için ekranda gösterilen bir resmi içinde bağlantı yapmak mümkündür. Ekranda resim göstermek için kullanılan <img src=""> etiketini bir <a>...</a> etiketi içine yerleştirdiğimizde mevcut resim link olacaktır.

Örnek: İçinde link verilecek sayfa ile aynı dizinde logo.png adında bir dosyamız olduğunu düşünecek olursak. logo.png resmine tıkladığımızda yazılım kodlama sayfasını açmak için şöyle bir kod yazmalıyız.

Sayfayı yeni bir sekmede açmak isterseniz de target niteliğini eklemelisiniz. Onu da eklersek kodumuz şu şekilde değişecektir.

PDF Dosyasına Link Verme

Yine mevcut link verme etiketi ile bir PDF dosyasını açabilir yada indirebilirsiniz. Bunu yapmak için href=”pdfyolu” şeklinde PDF dosyasının tam adını  ve yolu yazmalısınız. Mevcut PDF dosyasını tarayıcıda açmak yerine indirmek için ise download niteliğini kullanmalısınız. Aşağıdaki ikinci örnek PDF dosyasını açmak yerine indirme işemi yapar.

Bağlantının altındaki çizgiyi kaldırma

Bu konu aslında CSS konusu olmasına rağmen bağlantı kavramı anlatılmışken burada az da olsa değinelim. <a> etiketleri varsayılan olarak altı çizili görünmektedir. Bunu CSS kullanarak kaldırabiliriz. CSS’de yazının dekorasyonu ile oynayarak değişiklik yapabiliriz. Aşağıdaki kod tüm <a> etikerleri altındaki çizgiyi kaldıracaktır.

Kaynaklar:

https://www.yazilimkodlama.com/html/link-verme/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

https://blog.hubspot.com/website/html-a-href