Bağlantılar

Özelliklere giriş bölümünde, özelliklerin açılış etiketine nasıl eklendiğine dair bir örnek paylaşmıştık. Örnekte <a> etiketi kullanılmış ancak ne öğe ne de örnekte tanıtılan belirli özellikler ele alınmıştır.

Bir HTML öğesinde etiketlenmiş açılış etiketi, özellikler ve kapanış etiketi.

href özelliğiyle birlikte <a> bağlantı etiketi, köprü oluşturur. Bağlantılar, internetin temelini oluşturur. İlk web sayfasında, "W3 ile ilgili internetteki her şey doğrudan veya dolaylı olarak bu belgeye bağlıdır" yazan 25 bağlantı vardı. Büyük olasılıkla, W3 ile ilgili internette yer alan her şey bu belgeden doğrudan veya dolaylı olarak da bağlantılıdır.

Tim Berners-Lee bu ilk açıklamayı Ağustos 1991'de yayınladığından beri web'in ve <a> etiketinin gücü muazzam ölçüde arttı. Bağlantılar, biri geçerli doküman olan 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, formlarla ilgili bir öğrenme bölümü de vardır. Bu oturumda, tek harfli ve pek de basit olmayan <a> etiketi hakkında bilgi edineceksiniz.

href özelliği

Zorunlu olmasa da href özelliği neredeyse tüm <a> etiketlerinde bulunur. Köprünün adresini sağladığınızda <a> bağlantıya dönüşür. href özelliği, geçerli sayfa içindeki konumlara, bir site içindeki diğer sayfalara veya tamamen diğer sitelere köprü oluşturmak için kullanılır. Ayrıca, dosyaları indirmek veya belirli bir adrese e-posta göndermek için de kodlanabilir. Bu e-postaya konu ve önerilen e-posta gövdesi içeriği de dahil edilebilir.

<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ı, MLW ana sayfasına gitmek için dünyanın herhangi bir sitesinde kullanılabilen mutlak bir URL içerir. Mutlak URL'ler bir protokol (bu örnekte https://) ve bir alan adı içerir. Protokol // olarak yazıldığında bu, örtülü bir protokoldür ve "etkin olarak kullanılan protokolle aynı protokolü kullan" anlamına gelir.

Göreli URL'ler protokol veya alan adı içermez. Bunlar, mevcut dosyaya göre "görelidir". MLW tek sayfalık bir site olsa da bu HTML serisi birkaç bölümden oluşuyor. Bu sayfadan özellikler dersine bağlantı vermek için göreli bir URL kullanılır <a href="../attributes/">Attributes</a>.

İkinci bağlantı yalnızca bir bağlantı parçası tanımlayıcısıdır ve geçerli sayfada varsa id="teachers", kimlikli öğeye bağlanır. Tarayıcılar ayrıca iki "sayfanın üst kısmı" bağlantısını da destekler: <a href="#top">Top</a> (büyük/küçük harf duyarlı değildir) veya yalnızca <a href="#">Top</a> simgesini tıklamak, aynı harf büyük/küçüklüğünde top kimliğine sahip bir öğe yoksa kullanıcıyı sayfanın en üstüne döndürür.

MLW oldukça uzun bir belgedir. Kaydırmayı azaltmak için #teachers bölümünün alt kısmından en üste geri dönme bağlantısı ekleyebilirsiniz:

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

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

href özelliği, e-posta göndermek veya arama yapmak için mailto: ya da tel: ile başlayabilir. Bağlantının işlenmesi cihaza, işletim sistemine ve yüklü uygulamalara bağlıdır.

mailto bağlantısının e-posta adresi içermesi gerekmez ancak e-postayı önceden doldurmak için cc, bcc, subject ve body metniyle birlikte e-posta adresi içerebilir. 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. Belgenin altbilgisindeki bağlantımızda kayıt URL'si yer alır:

<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 (?), sorgu terimini mailto: ve varsa e-posta adresinden ayırır. Sorguda, alanlar "ve" işaretiyle (&) ayrılır ve her alan adı, değerine eşittir işaretiyle (=) bağlanır. Dizenin tamamı yüzde olarak kodlanır. Bu, href değeri tırnak içine alınmamışsa veya değerler tırnak içeriyorsa kesinlikle gereklidir.

Kullanıcı bir tel bağlantısını tıkladığında, dokunduğunda veya Enter tuşuna bastığında hangi uygulamanın açılacağı; işletim sistemine, yüklü uygulamalara ve kullanıcının cihazındaki ayarlara bağlıdır. iPhone'da FaceTime, telefon uygulaması veya kişiler açılabilir. Windows masaüstünde, yüklüyse Skype açılabilir.

Blob'lar ve veri URL'leri gibi başka URL türleri de vardır (download özelliğiyle ilgili tartışmadaki ö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çması muhtemel bağlantılar eklerken kullanıcıya bilgi vermek iyi bir uygulamadır. Açılış ve kapanış etiketleri arasındaki metnin, kullanıcıya etkinleştirmek üzere olduğu bağlantının türünü bildirdiğinden emin olun. [href^="mailto:"], [href^="tel:"] ve [href$=".pdf"] gibi CSS özelliği seçicileri, stilleri uygulama türüne göre hedeflemek için kullanılabilir.

İndirilebilir kaynaklar

href, indirilebilir bir kaynağı işaret ettiğ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 Optimizer olan SVGOMG, optimize edici tarafından oluşturulan indirilebilir blob için dosya adı önermek üzere download özelliğini kullanır. hal.svg optimize edildiğinde SVGOMG'nin indirme bağlantısı açma etiketi şuna benzer:

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

Ayrıca, <canvas> oluşturarak indirilebilir bir PNG veri URL'si oluşturan bir demo da vardır.

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

Göz atma bağlamı

target özelliği, bağlantı 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 çizgiyle öneklenmiş dört anahtar kelime <base> öğesiyle birlikte ele alınmıştır. Bunlardan bazıları:

  • (Varsayılan) _self: Bağlantıyı geçerli pencerede açar.
  • _blank: Bağlantıyı yeni sekmede açar.
  • _parent: Bağlantıyı üst nesnede veya iFrame'de açın.
  • _top: Bağlantıyı en üstteki üst öğede açar. Bu, özellikle bağlantı derin bir şekilde yerleştirilmişse yararlıdır.

Bağlantı iç içe yerleştirilmemişse _top ve _parent, _self ile aynı şekilde çalışır. target özelliği bu dört anahtar terimle sınırlı değildir. Herhangi bir terim kullanılabilir.

Her göz atma bağlamının (veya her tarayıcı sekmesinin) bir göz atma bağlamı adı vardır. Bağlantılar, bağlantıları geçerli sekmede, yeni ve adlandırılmamış bir sekmede veya yeni ya da mevcut adlandırılmış bir sekmede açabilir. Varsayılan olarak ad, boş dizedir.

Kullanıcılar, bağlantıyı yeni sekmede açmak için sağ tıklayıp "Yeni sekmede aç"ı seçebilir. Geliştiriciler, target="_blank" öğesini ekleyerek bunu zorunlu kılabilir.

target="_blank" içeren bir bağlantı, boş bir adla yeni sekmede açılıyor ve her bağlantı tıklamasında yeni, adlandırılmamış bir sekme açılıyor. Bu işlem sonucunda birçok yeni sekme açılabilir. Çok fazla sekme var. Örneğin, kullanıcı <a href="registration.html" target="_blank">Register Now</a> simgesini 15 kez tıklarsa kayıt formu 15 ayrı sekmede açılır. Bu sorun, sekme bağlamı adı sağlanarak düzeltilebilir. Büyük/küçük harfe duyarlı bir değerle (ör. <a href="registration.html" target="reg">Register Now</a>) targetözelliğini eklediğinizde, ilk tıklama kayıt formunu yeni bir reg sekmesinde açar. Bu bağlantıyı 15 kez daha tıkladığınızda, ek sekme açılmadan reg tarama bağlamında kayıt yeniden yüklenir.

rel özelliği, bağlantının oluşturduğu bağlantı türlerini kontrol eder ve mevcut doküman ile köprüde bağlantısı verilen kaynak arasındaki ilişkiyi tanımlar. Özelliğin değeri, <a> etiketi tarafından desteklenen bir veya daha fazla rel özelliği değerinin puanı için boşlukla ayrılmış bir liste olmalıdır.

Örümceklerin bağlantıyı takip etmesini istemiyorsanız nofollow anahtar kelimesi eklenebilir. Bağlantının harici bir URL'ye yönlendirdiğini ve mevcut alan adındaki bir sayfa olmadığını belirtmek için external değeri eklenebilir. help anahtar kelimesi, köprünün bağlama duyarlı yardım sağlayacağını gösterir. Bu rel değerine sahip bir bağlantının üzerine gelindiğinde 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 yönlendiren bağlantılarda kullanılabilir.

<link rel="alternative"> özelliğine benzer şekilde, <a rel="alternative"> özelliğinin anlamı diğer özelliklere bağlıdır. RSS özet akışı alternatifleri de type="application/rss+xml" veya type="application/atom+xml içerecek, alternatif biçimler type özelliğini, çeviriler ise hreflang özelliğini içerecek. Açılış ve kapanış etiketleri arasındaki içerik, ana doküman dilinden farklı bir dildeyse lang özelliğini ekleyin. Köprülenmiş belgenin dili farklıysa hreflang özelliğini ekleyin.

Bu örnekte, çevrilmiş sayfanın URL'sini href değeri olarak ekliyoruz. rel="alternate" özelliği, bunun bir sitenin alternatif sürümü olduğunu belirtir. hreflang özelliği, çevirilerin dilini sağlar:

<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 PDF ise bağlantılı kaynağın PDF MIME türüyle birlikte tür özelliğini sağlayabilirsiniz. MIME türü tamamen tavsiye niteliğinde olsa da kullanıcıya bir bağlantının farklı biçimde bir belge 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>

Kullanıcı etkileşimlerini izlemenin bir yolu, bir bağlantı tıklandığında URL'ye ping göndermektir. Varsa ping özelliği, kullanıcının köprüyü etkinleştirmesi durumunda bildirilmesi veya ping gönderilmesi gereken güvenli URL'lerin (https ile başlayan) boşlukla ayrılmış bir listesini içerir. Tarayıcı, POST özelliğinin değeri olarak listelenen URL'lere gövdesi PING olan POST istekleri gönderir.ping

Kullanıcı deneyimiyle ilgili 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ı bilmesi için bağlantılı kaynak hakkında yeterli bilgi sağlamalıdır.
  • Bir metin bloğundaki bağlantılarınızın görünümü, çevreleyen metinden yeterince farklı olmalıdır. Böylece kullanıcılar, bağlantıları diğer içeriklerden daha kolay ayırt edebilir. Renk ve alt çizgi gibi birden fazla görsel gösterge kullanın. Yalnızca renk yeterli değildir.
  • Her zaman odaklanma stillerini ekleyin. Bu, klavye ile gezinme özelliğini kullananların içeriğinizde sekme tuşuna basarak ilerlerken nerede olduklarını bilmelerine yardımcı olur.
  • Açılış <a> ve kapanış </a> arasındaki içerik, bağlantının varsayılan erişilebilir adıdır ve kullanıcıyı bağlantının hedefi veya amacı hakkında bilgilendirmelidir. Bir bağlantının içeriği resimse alt açıklaması, erişilebilir addır. Bağlantı metni ve alt metni, "burayı tıklayın" veya "daha fazla bilgi"den daha açıklayıcı olmalıdır. Bunun yerine, bağlantı etkinleştirildiğinde kullanıcının nereye gideceği hakkında bilgi verilmelidir. Bu, ekran okuyucu kullanıcıları ve arama motoru sonuçları için kritik öneme sahiptir.
  • Bağlantıların içine <button> veya <input> gibi etkileşimli içerikler eklemeyin. Bağlantıları <button> veya <label> içine de yerleştirmeyin. HTML sayfası oluşturulmaya devam etse de odaklanılabilir ve tıklanabilir öğeleri etkileşimli öğelerin içine yerleştirmek kötü bir kullanıcı deneyimine yol açar.
  • href özelliği varsa <a> öğesine odaklanmışken Enter tuşuna basıldığında öğe etkinleştirilir.
  • Bağlantılar HTML ile sınırlı değildir. a öğesi, SVG içinde de kullanılabilir ve "href" veya "xlink:href" özellikleriyle bağlantı oluşturur.

links özelliği, a ve area öğeleriyle eşleşen bir HTMLCollection döndürür. Bu öğelerde href özelliği bulunur.

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 (diğer adıyla gezinme) oluşturabilmek için öğrenmemiz gereken listeler ele alınmaktadır.

Anlayıp anlamadığınızı kontrol etme

Bağlantılarla ilgili bilginizi test edin.

Nofollow bağlantısı ne işe yarar?

Bağlantının tıklanmasını engeller.
Tekrar deneyin.
Örümceklerden bağlantıyı izlememelerini ister.
Doğru!
Siteyi ziyaretiniz izlenemez hale gelir.
Tekrar deneyin.

Hangi bağlantılar sizi sayfanın en üstüne götürür?

#start
Tekrar deneyin.
#
Doğru!
#top
Doğru!