İşaretleme Dili Kavramı

İnternet Nasıl Çalışır kursu, adres satırına yazılan bir adın nasıl bir sunucuya ulaştığını ve sunucunun bir yanıt gövdesi döndürdüğünü kurdu. O gövdenin nasıl taşındığı, hangi başlıkla nitelendiği ve bağlantının nasıl kurulduğu orada anlatıldı. Bir soru açıkta kaldı: gövdenin kendisi nedir?

Bu kurs o soruyu yanıtlar. Yanıt gövdesi çoğu zaman bir HTML belgesidir ve HTML bir işaretleme dilidir (markup language). Bu ders işaretlemenin ne olduğunu, neyi tanımlayıp neyi tanımlamadığını ve neden ayrı bir dil olarak var olduğunu tanımlar.

İşaretleme Metne Eklenen Bildirimdir

İşaretleme, düz metnin içine serpiştirilen ve o metnin parçalarının ne olduğunu söyleyen ek bilgidir. Terim, basılı yayıncılıktaki düzeltmen işaretlerinden gelir: dizgiciye gönderilen müsveddede, bir sözcüğün altı çizilerek “bu vurgulanacak”, kenara not düşülerek “bu bir başlıktır” denirdi. İşaretin kendisi basılmazdı; basılacak olanı nitelerdi.

HTML aynı işi yapar. Aşağıdaki metinde iki tür bayt vardır: okunacak olanlar ve okunacak olanı niteleyenler.

// isaretleme.mjs — işaretlemeyi metinden ayırır
const belge = `<h1>Kuzey Yamac Istasyonu</h1>
<p>Istasyon <abbr title="deniz seviyesinden yukseklik">DSY</abbr> 1840 metrede
kuruludur ve <strong>dort</strong> buyuklugu olcer.</p>`;

let icerik = "";
let yapi = "";
let i = 0;
while (i < belge.length) {
  const k = belge.indexOf("<", i);
  if (k === -1) { icerik += belge.slice(i); break; }
  icerik += belge.slice(i, k);
  const son = belge.indexOf(">", k);
  yapi += belge.slice(k, son + 1);
  i = son + 1;
}

console.log("--- yalnizca icerik ---");
console.log(icerik.trim());
console.log("--- yalnizca yapi ---");
console.log(yapi);
console.log("--- bayt sayimi ---");
console.log("toplam :", Buffer.byteLength(belge));
console.log("icerik :", Buffer.byteLength(icerik));
console.log("yapi   :", Buffer.byteLength(yapi));

--- yalnizca icerik ---
Kuzey Yamac Istasyonu
Istasyon DSY 1840 metrede
kuruludur ve dort buyuklugu olcer.
--- yalnizca yapi ---
<h1></h1><p><abbr title="deniz seviyesinden yukseklik"></abbr><strong></strong></p>
--- bayt sayimi ---
toplam : 165
icerik : 82
yapi   : 83

İki bölüm de tek başına eksiktir. İçerik bölümü okunabilir ama yapısızdır: hangi satırın başlık olduğu, DSY kısaltmasının neyin karşılığı olduğu kaybolmuştur. Yapı bölümü ise içeriksizdir. Belge ikisinin birleşimidir ve bu örnekte yapı bildirimi, içerikten daha çok bayt tutar. Bu oran her belgede farklıdır; bilgi yoğunluğu arttıkça yapının payı düşer.

Dikkat edilecek nokta, yapı bildiriminin kaybolmamasıdır. abbr ögesinin title özniteliğinde taşınan açıklama ekranda görünmese de belgede durur; kısaltmayı okuyamayan bir program veya kişi ona başvurabilir. İşaretleme, görünmeyen ama sorgulanabilen bir katmandır.

Üç Ayrı Sorumluluk

Bir web sayfası üç ayrı soruya yanıt verir ve bu üç soru üç ayrı dille yanıtlanır.

Soru	Katman	Dil
Bu içerik ne?	Yapı	HTML
Nasıl görünecek?	Sunum	CSS
Kullanıcı etkileşince ne olacak?	Davranış	JavaScript

Bu ayrım bir üslup tercihi değil, bakım maliyetiyle ilgili bir karardır. Aynı belge farklı sunumlarla gösterilebilir: dar bir ekranda, yazıcıda, ekran okuyucuda, arama motorunun dizinleyicisinde. Bunların hepsi aynı yapıyı okur; yalnızca sunum katmanı değişir. Yapı ile sunum aynı yerde tanımlanmış olsaydı, her yeni ortam için belgenin kendisinin yeniden yazılması gerekirdi.

Ayrımın ihlali somut bir örnekle görülür. Bir metni büyük ve kalın göstermek için h1 ögesi kullanmak, sunum amacıyla yapı bildirimi yapmaktır: belgeye “burası birinci düzey başlıktır” denmiş olur ve bu bildirimi okuyan her program yanıltılır. Tersi de geçerlidir: bir başlığı p ögesiyle yazıp yalnızca biçemle büyütmek, yapı bilgisini yok eder.

Bu kurs yapı katmanını kurar. Sunum katmanı sonraki kursta, davranış katmanı JavaScript kurslarında ele alınır; bu kurs boyunca biçem ve betik yalnızca yapıyla ilişkileri ölçüsünde geçer.

Bildirimsel Bir Dil

Programlama Temelleri kursunda deyim, ifade ve denetim akışı tanımlanmıştı. HTML bu anlamda bir programlama dili değildir: koşul kuramaz, döngü çeviremez, değişken tutamaz, hesap yapamaz. Yazılan şey bir komut dizisi değil, bir bildirimdir.

Bildirimsel olmanın iki sonucu vardır.

Birincisi, belgenin işlenme sırası yazarın denetiminde değildir. Bir belge yazıldığında “önce şunu yap, sonra bunu yap” denmez; “bu bir başlık, bu bir liste, bu bir bağlantı” denir. Bu bildirimlerden ne yapılacağını okuyan program kararlaştırır. Aynı belge, bir tarayıcıda çizilir, bir dizinleyicide çözümlenir, bir dönüştürücüde başka biçime çevrilir.

İkincisi, hata karşısındaki davranış farklıdır. Programlama Temelleri kursundaki sözdizim hatası kavramı burada aynı biçimde işlemez: kusurlu bir HTML belgesi işlenmeyi reddetmez. Ayrıştırıcı, tanımlı kurtarma kurallarını uygulayarak bir sonuç üretir. Bu kuralları ilerleyen derslerde ayrıntısıyla ele alacağız; şimdilik önemli olan, “geçersiz belge” diye bir çıktının olmadığıdır. Her belge bir sonuca çevrilir — sorun, çevrilen sonucun yazarın niyetiyle uyuşup uyuşmadığıdır.

Üçüncü bir sonuç, dilin genişlemesiyle ilgilidir. Ayrıştırıcı, tanımadığı bir öge adıyla karşılaştığında belgeyi reddetmez; o adı taşıyan bir öge kurar ve içeriğini olağan biçimde işler. Tanımadığı bir özniteliği de saklar. Bu davranış, dile yeni bir öge eklendiğinde onu tanımayan gerçekleştirimlerin belgeyi büsbütün yitirmesini önler: yeni ögenin sağladığı ek anlam kaybolur, içeriği kalır. Aynı ilkeyi İnternet Nasıl Çalışır kursunda HTTP başlıkları için de görmüştük; tanınmayan başlık yok sayılır, istek geçersiz sayılmaz. Genişletilebilirlik, her iki tasarımda da hataya karşı hoşgörüyle satın alınmıştır.

Öge, Etiket ve Belge

Üç sözcük sık karıştırılır; kurs boyunca ayrımları korunacaktır.

Etiket (tag), kaynak metinde köşeli parantezler arasındaki yazımdır: <p> bir açılış etiketi, </p> bir kapanış etiketidir. Etiket, kaynak metnin bir parçasıdır.

Öge (element), açılış etiketi, kapanış etiketi ve aralarındaki içeriğin oluşturduğu bütündür. Öge, ayrıştırma sonrasında var olan kavramsal birimdir; kaynak metinde değil, ondan üretilen yapıda bulunur.

Belge (document), ögelerin oluşturduğu bütündür.

Bu ayrım gereksiz bir titizlik gibi görünebilir, ancak bir sonraki derste ayrıştırma aşamalarını incelerken belirleyici olacaktır: bazı ögelerin kaynak metinde hiçbir etiketi yoktur ve buna karşın belgede bulunurlar.

Kurs Boyunca İzlenecek Belge

Bu kurs tek bir örnek belge üzerinde ilerler: bir ölçüm istasyonu sayfası. Kuzey Yamaç adlı bir istasyon, deniz seviyesinden 1840 metre yükseklikte kuruludur ve sıcaklık, bağıl nem, rüzgâr hızı ve yağış ölçer. Sayfa istasyonun künyesini, ölçüm çizelgesini, konum görselini ve son olarak gözlemcilerin veri düzeltmesi bildirebileceği bir formu taşıyacaktır.

Belge kurs boyunca büyür. Bu derste yalnızca bir cümlelik bir parçası vardır; kurs sonunda çok bölümlü, medya taşıyan ve doğrulanabilir bir form içeren bütün bir sayfa olacaktır. Her ders bu belgeye bir katman ekler ve eklenen katmanın neden o biçimde olduğunu gerekçelendirir.

Özet

• İşaretleme, metnin parçalarının ne olduğunu söyleyen ve metne karışan bir bildirim katmanıdır; işaretleme baytları içerik baytlarıyla aynı belgede taşınır ancak okunacak metnin parçası değildir.
• Bir sayfa üç ayrı soruya yanıt verir: içerik ne (yapı), nasıl görünecek (sunum), ne olacak (davranış). Bu kurs yalnızca yapı katmanını kurar.
• HTML bildirimsel bir dildir: denetim akışı, değişken ve hesap içermez; ne yapılacağını bildirimi okuyan program kararlaştırır.
• Kusurlu bir belge işlenmeyi reddetmez; ayrıştırıcı tanımlı kurtarma kurallarıyla her zaman bir sonuç üretir.
• Etiket kaynak metnin parçasıdır, öge ayrıştırma sonrasında oluşan birimdir; ikisi birebir örtüşmez.

Sonraki Adım

Bu ders işaretlemenin ne olduğunu tanımladı ama tarayıcının onunla ne yaptığını anlatmadı. İnternet Nasıl Çalışır kursundaki Tarayıcı Ne Yapar dersi aşamaları başlıklar hâlinde saymıştı: ayrıştırma, yerleşim, çizim. Sonraki ders bu aşamaları belgenin kendisi açısından ele alır ve gelen baytların hangi dönüşümlerden geçerek ekranda bir şeye dönüştüğünü, her aşamanın çıktısını göstererek izler.