Ders 11 / 25

Bağlantılar

Göreli ve mutlak adreslerin çözülmesi, taban adresin belirlenmesi, bağlantı metninin taşıdığı bilgi ve bağlantı ilişkisi bildirimleri.

İçindekiler

Listeler içeriği gruplandırdı ama belge hâlâ kendi içine kapalıdır. Bağlantı, bir belgeyi başka bir kaynağa bağlayan ögedir ve web’i bir belge yığını olmaktan çıkarıp bir ağ yapan şeydir.

Bağlantı ögesi a, hedefini href özniteliğiyle bildirir. Bu ders özniteliğin değerinin nasıl yorumlandığını, metnin ne taşıması gerektiğini ve bağlantının hedefiyle ilişkisini bildiren özniteliklerini ele alır.

Adresin Çözülmesi

İnternet Nasıl Çalışır kursundaki Tarayıcı Ne Yapar dersi bir adresin bölümlerini —şema, konak, bağlantı noktası, yol, sorgu, parça— ayırmıştı. Belgede yazılan adres çoğu zaman bu bölümlerin tamamını taşımaz; eksik bölümler taban adresten tamamlanır.

Taban adres, varsayılan olarak belgenin kendi adresidir. Çözümleme kuralı tanımlıdır ve her istemcide aynı sonucu verir.

// baglantilar.mjs — goreli adreslerin taban adrese gore cozulmesi
const taban = "https://ornek.test/istasyon/kuzey-yamac/olcumler.html";

const adaylar = [
  "gunluk.html",
  "./gunluk.html",
  "../ozet.html",
  "../../dizin.html",
  "/hakkinda.html",
  "//baska.test/veri.json",
  "https://baska.test/veri.json",
  "?tur=nem",
  "#sicaklik",
  "veri/2024.csv",
];

console.log("taban:", taban);
for (const aday of adaylar) {
  console.log(aday.padEnd(28), "->", new URL(aday, taban).href);
}

console.log("--- base ogesi tabani degistirir ---");
const yeniTaban = new URL("/arsiv/", taban).href;
console.log("yeni taban:", yeniTaban);
console.log("gunluk.html".padEnd(28), "->", new URL("gunluk.html", yeniTaban).href);

taban: https://ornek.test/istasyon/kuzey-yamac/olcumler.html
gunluk.html                  -> https://ornek.test/istasyon/kuzey-yamac/gunluk.html
./gunluk.html                -> https://ornek.test/istasyon/kuzey-yamac/gunluk.html
../ozet.html                 -> https://ornek.test/istasyon/ozet.html
../../dizin.html             -> https://ornek.test/dizin.html
/hakkinda.html               -> https://ornek.test/hakkinda.html
//baska.test/veri.json       -> https://baska.test/veri.json
https://baska.test/veri.json -> https://baska.test/veri.json
?tur=nem                     -> https://ornek.test/istasyon/kuzey-yamac/olcumler.html?tur=nem
#sicaklik                    -> https://ornek.test/istasyon/kuzey-yamac/olcumler.html#sicaklik
veri/2024.csv                -> https://ornek.test/istasyon/kuzey-yamac/veri/2024.csv
--- base ogesi tabani degistirir ---
yeni taban: https://ornek.test/arsiv/
gunluk.html                  -> https://ornek.test/arsiv/gunluk.html

Çıktı beş ayrı biçimi ayırt eder.

Aynı dizin göreli: gunluk.html ve ./gunluk.html aynı sonucu verir; belgenin bulunduğu dizin tabandır. Belgenin adının çözümlemede atıldığına dikkat edilmelidir — olcumler.html sonucun parçası değildir.

Üst dizin göreli: ../ her yinelemede bir dizin yukarı çıkar.

Kök göreli: / ile başlayan adres, yolu kökten yazar; konak ve şema tabandan gelir. Belge dizin ağacında taşındığında bu adresler değişmez, göreli olanlar değişir.

Şema göreli: // ile başlayan adres yalnızca şemayı tabandan alır. Şemayı belgeye bağlamak, güvenli olmayan bir bağlamdan güvenli olmayan bir hedefe geçilmesine izin verdiği için yeğlenmez; şema açıkça yazılır.

Aynı belge göreli: yalnızca sorgu veya parça taşıyan adresler belgenin kendi yolunu korur. #sicaklik biçimindeki parça adresleri ağa hiç çıkmaz; hedef, belgede o kimliği taşıyan ögedir.

Taban Adresin Değiştirilmesi

Baş bölümüne yazılan base ögesi, belgedeki tüm göreli adreslerin tabanını değiştirir.

<head>
  <base href="/arsiv/">
</head>

Çıktının son bölümü etkiyi gösterir: aynı gunluk.html değeri başka bir adrese çözülür. Bu öge belgede en çok bir kez bulunur ve kendisinden sonra yazılan adresleri etkiler; önce yazılmasının nedeni budur.

Etkisi belge geneline yayıldığı için bu öge dikkatle kullanılır. Bir bölümü etkileyen değil, her göreli adresi etkileyen bir karardır — belgedeki parça adresleri de dahil.

Adresteki Karakterler

Adres, sınırlı bir karakter kümesiyle yazılır. Bu kümenin dışındaki karakterler —Türkçe harfler, boşluk— yüzde kodlamasıyla baytlara çevrilir.

// kodlama.mjs — adreste ASCII disi karakterler ve bosluklar
const taban = "https://ornek.test/istasyon/";
for (const aday of ["ölçüm raporu.pdf", "veri/2024 mart.csv", "arşiv/kuzey-yamaç"]) {
  console.log(JSON.stringify(aday), "->", new URL(aday, taban).pathname);
}
console.log("--- konak adi ayri bir kuralla kodlanir ---");
console.log(new URL("https://ölçüm.test/veri").href);

"ölçüm raporu.pdf" -> /istasyon/%C3%B6l%C3%A7%C3%BCm%20raporu.pdf
"veri/2024 mart.csv" -> /istasyon/veri/2024%20mart.csv
"arşiv/kuzey-yamaç" -> /istasyon/ar%C5%9Fiv/kuzey-yama%C3%A7
--- konak adi ayri bir kuralla kodlanir ---
https://xn--lm-4ia2d6a.test/veri

Her %XX çifti bir bayttır ve baytlar Karakter Kodlamaları dersinde tanımlanan kuralla üretilmiştir; ö harfi iki bayt tuttuğu için iki çifte çevrilir. Boşluk %20 olur.

Son satır konak adının ayrı bir kuralla ele alındığını gösterir: yol bölümü yüzde kodlamasıyla, konak adı ise Alan Adı Nedir dersinde belirtilen ASCII gösterimiyle yazılır. Aynı adresin iki bölümü iki farklı kodlamaya girer.

Dosya adlarını ASCII karakterlerle yazmak bu dönüşümü gereksiz kılar ve adresi okunabilir tutar; zorunlu değildir ancak kaynak metinde adresin kısa kalmasını sağlar.

Bağlantı Metni

Bağlantının metni, hedefin ne olduğunu bildirmelidir. Bunun ölçütü çevresindeki cümle değildir: ekran okuyucular belge içindeki bağlantıları bir liste hâlinde sunar ve kullanıcı bu listeyi metinlerine bakarak tarar.

<!-- baglamdan koparildiginda bilgi tasimaz -->
<p>Günlük ölçüm dosyaları için <a href="/veri/gunluk">buraya tıklayın</a>.</p>

<!-- kendi basina anlasilir -->
<p>Ölçümler <a href="/veri/gunluk">günlük dosyalar hâlinde</a> yayımlanır.</p>

İkinci yazımda bağlantı metni hedefi tanımlar. Aynı belgede aynı metni taşıyan iki bağlantının farklı hedeflere gitmesi de kaçınılması gereken bir durumdur.

Bağlantı, belge dışına çıkmayan bir eyleme —bir kaydı silmek, bir formu göndermek— değil, bir kaynağa gitmek içindir. Eylemler için düğme ögesi kullanılır; ayrım, konunun form derslerinde ele alınacaktır.

Hedefin Türü ve İlişkisi

download özniteliği, hedefin görüntülenmek yerine indirilmesini ister ve isteğe bağlı olarak dosya adını verir. type özniteliği hedefin içerik türünü bildirir; bir ipucudur, bağlayıcı değildir.

rel özniteliği bağlantının hedefiyle ilişkisini bildirir. Değerleri boşlukla ayrılmış anahtar sözcüklerdir ve her biri tanımlıdır.

<p>Ham veri: <a href="/veri/2024-03.csv" download type="text/csv">Mart ayı kayıtları</a></p>

<p>Yöntem, <a href="https://baska.test/standart" rel="noopener external">ölçüm
   standardında</a> tanımlanmıştır.</p>

target="_blank" özniteliği hedefi yeni bir bağlamda açar. Bu özniteliğin yazıldığı her yerde rel="noopener" de yazılır: açılan belgenin, kendisini açan belgeye program yoluyla erişmesini engeller. Yeni bağlamda açmanın kendisi de gözden geçirilmesi gereken bir karardır; kullanıcının geri dönüş beklentisini bozar ve bu davranışı bekleyip beklemediği belgeden anlaşılmaz.

rel özniteliği a ögesine özgü değildir. Baş bölümündeki link ögesi aynı özniteliği kullanır ve belgeyle ilişkili kaynakları bildirir — biçem dosyası, simge, aynı belgenin başka dildeki sürümü, sayfalanmış bir dizinin önceki ve sonraki sayfaları. İki ögede de rel, “bu adres benimle şu ilişkidedir” bildirimidir.

İstasyon Belgesinde

<h2>Veri Erişimi</h2>
<p>Kayıtlar <a href="veri/">günlük dosyalar hâlinde</a> yayımlanır. Ölçüm yöntemi
   <a href="../yontem.html">ağ genelinde ortaktır</a>. Ham veri dosyaları
   <a href="veri/2024-03.csv" download type="text/csv">Mart ayı kayıtları</a>
   biçiminde indirilebilir.</p>

Üç bağlantının üçü de göreli yazılmıştır ve belgenin dizin ağacındaki yerine bağlıdır. Belge taşınırsa ../yontem.html bağlantısı kırılır; kök göreli yazım bu kırılmayı önler ama belgeyi başka bir kökte yayımlamayı zorlaştırır. İki yazım arasındaki seçim, belgenin nerede yayımlanacağına ilişkin bir karardır.

Özet

Göreli adresler taban adrese göre çözülür; taban, varsayılan olarak belgenin kendi adresidir ve belgenin dosya adı çözümlemede atılır.
Beş göreli biçim vardır: aynı dizin, üst dizin, kök göreli, şema göreli ve aynı belge; parça adresleri ağa hiç çıkmaz.
base ögesi belgedeki tüm göreli adreslerin tabanını değiştirir ve belgede en çok bir kez bulunur.
Bağlantı metni bağlamından koparıldığında da hedefi tanımlamalıdır; ekran okuyucular bağlantıları liste hâlinde sunar.
rel özniteliği bağlantının hedefiyle ilişkisini bildirir; yeni bağlamda açan bağlantılarda noopener ilişkisi de bildirilir.

Sonraki Adım

Belge bu noktada başka kaynaklara bağlanabiliyor. Geriye bu konunun son yapısı kalıyor: iki boyutlu veri. Ölçüm kayıtları bir liste değil bir çizelgedir — her satırın birden çok alanı, her alanın bir başlığı vardır. Sonraki ders tablo ögelerini ele alır ve bir veri hücresinin hangi başlıklara bağlı olduğunun nasıl hesaplandığını gösterir.

İlerlemeni kaydetmek ve not almak için Giriş yap

Notlarım

Not almak için giriş yapmalısın.