Bağlantılar

Özellikler bölümünün girişinde, özelliklerin açılış etiketine nasıl eklendiğini gösteren bir örnek gördünüz. Örnekte <a> etiketi kullanılmıştır, ancak ne öğe ne de bu örnekte tanıtılan belirli özellikler tartışılmıştır:

<a> bağlantı etiketi, href özelliğiyle birlikte bir köprü oluşturur. Bağlantılar internetin bel kemiğidir. İlk web sayfası 25 bağlantı içeriyordu. Burada "W3 ile ilgili çevrimiçi olan her şey doğrudan veya dolaylı olarak bu belgeye bağlıdır." Büyük olasılıkla, W3 ile ilgili çevrimiçi olan her şey bu belgeden de doğrudan veya dolaylı olarak bağlanır.

Tim Berners-Lee'nin bu ilk açıklamayı Ağustos 1991'de yayınlamasından bu yana, web'in ve <a> etiketinin gücü büyük oranda arttı. Bağlantılar, biri geçerli belge olmak üzere iki kaynak arasındaki bağlantıyı temsil eder. Bağlantılar <a>, <area>, <form> ve <link> tarafından oluşturulabilir. <link> hakkında bilgi edindiniz ve formları ayrı bir bölümde keşfedeceksiniz. Ayrıca form öğrenme bölümünün de tamamını kullanabilirsiniz. Bu oturumda, çok basit olmayan, tek harfli <a> etiketini öğreneceksiniz.

href özelliği

Zorunlu olmamakla birlikte, href özelliği neredeyse tüm <a> etiketlerinde bulunur. Köprünün adresinin sağlanması, <a> öğesini bir bağlantıya dönüştürür. href özelliği, geçerli sayfadaki konumlara, bir sitedeki başka sayfalara veya tamamen başka sitelere yönlendiren köprüler oluşturmak için kullanılır. Ayrıca, bir konu ve önerilen e-posta gövde içeriği de dahil olmak üzere, dosyaları indirmek veya belirli bir adrese e-posta göndermek için kodlanabilir.

<a href="https://machinelearningworkshop.com">Machine Learning Workshop</a>
<a href="#teachers">Our teachers</a>
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="tel:8005551212">Call Hal</a>

İlk bağlantı, dünyadaki herhangi bir sitede MLW ana sayfasına gitmek için kullanılabilecek mutlak bir URL içerir. Mutlak URL'ler, bir protokol (bu örnekte https://) ve bir alan adı içerir. Protokol basitçe // olarak yazıldığında örtülü bir protokoldür ve "şu anda kullanılmakta olan protokolün aynısını kullan" anlamına gelir.

Göreli URL'ler protokol veya alan adı içermez. Geçerli dosyaya "göredir"ler. MLW tek sayfalık bir sitedir ancak bu HTML serisinde birkaç bölüm vardır. Bu sayfadan özellikler dersine bağlantı vermek için göreli bir URL (<a href="../attributes/">Attributes</a>) kullanılır.

İkinci bağlantı yalnızca bir bağlantı parçası tanımlayıcısıdır ve geçerli sayfada varsa id="teachers", içeren öğeye bağlantı verir. Tarayıcılar ayrıca iki "sayfanın üst kısmı" bağlantısını destekler: <a href="#top">Top</a> öğesini (büyük/küçük harfe duyarlı değil) veya yalnızca <a href="#">Top</a> bağlantısını tıklamak, aynı büyük/küçük harf kullanımına sahip top kimliğine sahip bir öğe olmadığı sürece kullanıcıyı sayfanın en üstüne kaydırır.

MLW oldukça uzun bir belgedir. Kaydırma işleminden tasarruf etmek için #ogretmenler bölümünün alt tarafından üst kısma yeniden bir bağlantı ekleyebilirsiniz:

<a href="#top">Go to top.</a>

Üçüncü bağlantı, iki değeri birleştirir: Mutlak bir URL ve ardından bir bağlantı parçası içerir. Bu, tanımlanan URL'deki bir bölüme (bu örnekte MLW ana sayfasının #teachers bölümüne) doğrudan bağlantı verilmesini sağlar. MLW sayfası yüklenir. Ardından tarayıcı, HTTP isteğindeki parçayı göndermeden öğretmenler bölümüne kaydırır.

href özelliği, e-posta göndermek veya telefon etmek için mailto: ya da tel: ile başlayabilir. Bağlantı, cihaza, işletim sistemine ve yüklü uygulamalara bağlı olarak işlenir.

mailto bağlantısının e-posta adresi içermesi gerekmez ancak bağlantı cc, bcc, subject ve body metniyle birlikte e-postayı önceden doldurabilir. Varsayılan olarak bir e-posta istemcisi açılır. Site ziyaretçilerinin kendi arkadaşlarını davet etmesine izin vermek için e-postanın konusunu ve gövdesini e-posta adresi olmadan önceden doldurabilirsiniz. Sunduğumuz bağlantıda, belgenin alt bilgisine kaydın URL'sini ekleriz:

<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

Soru işareti (?), mailto: ve varsa e-posta adresini sorgu teriminden ayırır. Sorguda "ve" işareti (&) alanları ayırır ve eşittir işaretleri (=) her alan adını kendi değeriyle eşler. Dizenin tamamı yüzde olarak kodlanmıştır. Bu, href değeri tırnak içine alınmamışsa veya değerler tırnak işareti içeriyorsa kesinlikle gereklidir.

Kullanıcı bir tel bağlantısını tıkladığında, dokunduğunda veya bağlantıyı tıkladığında hangi uygulamanın açılacağı işletim sistemine, yüklü uygulamalara ve kullanıcının cihazında bulunan ayarlara bağlıdır. iPhone; FaceTime, telefon uygulaması veya kişileri açabilir. Skype yüklüyse bir Windows masaüstü bilgisayar tarafından açılabilir.

Blob'lar ve veri URL'leri gibi başka birkaç URL türü de vardır (download özelliği tartışmasındaki örneklere bakın). Güvenli sitelerde (https üzerinden sunulanlar) registerProtocolHandler() ile uygulamaya özel protokoller oluşturup çalıştırmak mümkündür.

Yüklü diğer uygulamaları açma olasılığı yüksek olan bağlantıları eklerken kullanıcıya bunu bildirmek iyi bir fikirdir. Açılış ve kapanış etiketleri arasındaki metnin, kullanıcıya ne tür bir bağlantı etkinleştirmek üzere olduğunu belirttiğinden emin olun. Stilleri uygulama türüne göre hedeflemek için [href^="mailto:"], [href^="tel:"] ve [href$=".pdf"] gibi CSS özellik seçicileri kullanılabilir.

İndirilebilir kaynaklar

href, indirilebilir bir kaynağı gösterdiğinde download özelliği eklenmelidir. İndirme özelliğinin değeri, kullanıcının yerel dosya sistemine kaydedilecek kaynak için önerilen dosya adıdır. SVG Optimize Edici olan SVGOMG, optimize edicinin oluşturduğu indirilebilir blob için bir dosya adı önermek üzere download özelliğini kullanır. hal.svg optimize edildiğinde SVGOMG'nin indirme bağlantısı açılış etiketi şuna benzer:

<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">

Ayrıca, indirilebilir bir PNG veri URL'si oluşturan <canvas> demosunu inceleyebilirsiniz.

İndirilebilir bir kaynağa bağlantı vermek için, href özelliğinin değeri olarak öğenin URL'sini ve download özelliğinin değeri olarak kullanıcının dosya sisteminde kullanılabilecek önerilen dosya adını ekleyin.

Göz atma bağlamı

target özelliği, bağlantıda gezinme (ve form gönderme) için göz atma bağlamının tanımlanmasını sağlar. Büyük/küçük harfe duyarlı olmayan, alt çizgi önekli dört anahtar kelime <base> öğesiyle ele alınmıştır. Varsayılan _self (geçerli pencere olan _blank) ve bağlantıyı yeni bir sekmede açar. _parent, mevcut bağlantı bir nesneye veya iframe'e yerleştirilmişse üst öğedir. _parent ise en üstteki üst öğedir. _top, özellikle mevcut bağlantı derinlemesine iç içe yerleştirilmişse kullanışlıdır. Bağlantı iç içe yerleştirilmemişse _top ve _parent, _self ile aynıdır. target özelliği, şu dört anahtar terimle sınırlı değildir: herhangi bir terim kullanılabilir.

Her göz atma bağlamı (temel olarak her tarayıcı sekmesi) bir göz atma bağlamı adı içerir. Bağlantılar, bağlantıları geçerli sekmede, yeni bir adsız sekmede veya yeni ya da mevcut bir adlandırılmış sekmede açabilir. Ad varsayılan olarak boş dizedir. Kullanıcı, bir bağlantıyı yeni sekmede açmak için sağ tıklayıp "Yeni sekmede aç"ı seçebilir. Geliştiriciler target="_blank" ifadesini ekleyerek bunu zorlayabilirler.

target="_blank" içeren bir bağlantı, boş adla yeni bir sekmede açılır ve her bağlantı tıklamasında adsız yeni bir sekme açılır. Bu, birçok yeni sekme oluşturabilir. Çok fazla sekme var. Örneğin, kullanıcı <a href="registration.html" target="_blank">Register Now</a> bağlantısını 15 kez tıklarsa kayıt formu 15 ayrı sekmede açılır. Bu sorun, bir sekme bağlamı adı sağlanarak giderilebilir. targetözelliğini büyük/küçük harfe duyarlı bir değerle (ör. <a href="registration.html" target="reg">Register Now</a>) eklediğinizde bu bağlantı ilk tıklandığında kayıt formu yeni bir reg sekmesinde açılır. Bu bağlantıyı 15 kez daha tıkladığınızda, reg göz atma bağlamında kayıt, ek sekme açılmadan yeniden yüklenir.

rel özelliği, bağlantının ne tür bağlantılar oluşturacağını kontrol ederek geçerli doküman ile köprüde bağlantı verilen kaynak arasındaki ilişkiyi tanımlar. Özelliğin değeri, <a> etiketi tarafından desteklenen rel özellik değerleri puanının bir veya daha fazlasında boşlukla ayrılmış bir liste olmalıdır.

Örümceklerin bağlantıyı izlemesini istemiyorsanız nofollow anahtar kelimesini dahil edebilirsiniz. external değeri, bağlantının harici bir URL'ye yönlendirdiğini ve geçerli alandaki bir sayfa olmadığını belirtmek için eklenebilir. help anahtar kelimesi, köprünün bağlama duyarlı yardım sağlayacağını belirtir. Bu rel değerine sahip bir bağlantının üzerine geldiğinizde, normal işaretçi imleci yerine yardım imleci gösterilir. Bu değeri yalnızca yardım imlecini almak için kullanmayın. Bunun yerine CSS cursor özelliğini kullanın. prev ve next değerleri, bir serideki önceki ve sonraki dokümana işaret eden bağlantılarda kullanılabilir.

<link rel="alternative">'e benzer şekilde, <a rel="alternative"> öğesinin anlamı da başka özelliklere bağlıdır. RSS özet akışı alternatifleri, type="application/rss+xml" veya type="application/atom+xml özelliğini, alternatif biçimler type özelliğini ve çevirilerde hreflang özelliğini içerir. Açılış ve kapanış etiketleri arasındaki içerik ana belge dilinden farklı bir dildeyse lang özelliğini ekleyin. Köprü bağlantılı dokümanın dili farklı bir dildeyse hreflang özelliğini ekleyin.

Bu örnekte, sitenin alternatif bir sürümü olduğunu belirtmek için, çevrilmiş sayfanın URL'sini href değeri olarak rel="alternate" ekleriz; hreflang özelliği ise çevirilerin dilini belirtir:

<a href="/fr" hreflang="fr-FR" rel="alternate" lang="fr-FR">atelier d'apprentissage mechanique</a>
<a href="/pt" hreflang="pt-BR" rel="alternate" lang="pt-BR">oficina de aprendizado de máquina</a>

Fransızca çeviri bir PDF ise tür özelliğini bağlı kaynağın PDF MIME türüyle sağlayabilirsiniz. MIME türü yalnızca tavsiye amaçlı olsa da kullanıcıya bir bağlantının farklı biçimdeki bir dokümanı açacağını bildirmek her zaman iyi bir fikirdir.

<a href="/fr.pdf" hreflang="fr-FR" rel="alternate" lang="fr-FR" type="application/x-pdf">atelier d'apprentissage mechanique (pdf).</a>

Bağlantı tıklamalarını izleme

Kullanıcı etkileşimlerini izlemenin bir yolu, bir bağlantı tıklandığında URL'yi pinglemektir. ping özelliği, varsa, kullanıcı köprüyü etkinleştirirse bilgilendirilmesi veya pinglenmesi gereken güvenli URL'lerin boşlukla ayrılmış bir listesini (https ile başlar) içerir. Tarayıcı, PING gövdesine sahip POST isteklerini, ping özelliğinin değeri olarak listelenen URL'lere gönderir.

Kullanıcı deneyimi ipuçları

• HTML yazarken her zaman kullanıcı deneyimini göz önünde bulundurun. Bağlantılar, kullanıcının neyi tıkladığını anlayabilmesi için bağlantılı kaynak hakkında yeterli bilgi sağlamalıdır.
• Bir metin bloğunda, bağlantılarınızın etrafındaki metinden yeterince farklı olduğundan emin olun. Böylece kullanıcılar içeriğin geri kalanındaki bağlantıları kolayca belirleyebilir. Böylece metin ve etrafındaki içeriği ayırt etmek için tek başına renk kullanmak yeterli olmaz.
• Odak stillerini her zaman dahil edin. Böylece klavye gezginleri, içeriğinizde gezinirken nerede olduklarını bilir.
• <a> açılışı ile </a> kapanışı arasındaki içerik, bağlantının varsayılan erişilebilir adı olup kullanıcıyı bağlantının hedefi veya amacı hakkında bilgilendirmelidir. Bağlantının içeriği bir resimse alt açıklaması, erişilebilir addır. Erişilebilir ad, ister alt özelliğinden ister bir metin blokundaki kelime alt kümesinden gelsin, bağlantının hedefi hakkında bilgi sağladığından emin olun. Bağlantı metni, "burayı tıklayın" veya "daha fazla bilgi" ifadelerinden daha açıklayıcı olmalıdır. Bu, ekran okuyucu kullanıcılarınız ve arama motoru sonuçlarınız için önemlidir!
• Bir bağlantının içine <button> veya <input> gibi etkileşimli içerik eklemeyin. Bağlantıyı <button> veya <label> içine de yerleştirmeyin. HTML sayfası oluşturulmaya devam edecek olsa da, odaklanılabilir ve tıklanabilir öğelerin etkileşimli öğelerin içine yerleştirilmesi kötü bir kullanıcı deneyimine neden olur.
• href özelliği mevcutsa <a> öğesine odaklanıldığında Enter tuşuna basılması bu özelliği etkinleştirir.
• Bağlantılar HTML ile sınırlı değildir. a öğesi ayrıca SVG içinde de kullanılabilir ve "href" veya "xlink:href" özellikleriyle bir bağlantı oluşturabilir.

Bağlantılar ve JavaScript

links özelliği, href özelliğine sahip olan ve HTMLCollection ile eşleşen a ve area öğeleri döndürür.

let a = document.links[0]; // obtain the first link in the document

a.href = 'newpage.html'; // change the destination URL of the link
a.protocol = 'ftp'; // change just the scheme part of the URL
a.setAttribute('href', 'https://machinelearningworkshop.com/'); // change the attribute content directly

Bu bölümde bağlantılar hakkında her şeyi öğrendiniz. Bir sonraki bölümde, bağlantı listeleri (gezinme olarak da bilinir) oluşturmak üzere bunları gruplandırabilmemiz için öğrenmemiz gereken listeler ele alınmaktadır.

Öğrendiklerinizi sınayın

Bağlantılar hakkındaki bilginizi test edin.