Istasyon DSY 1840 metrede kuruludur ve dort buyuklugu olcer.
`; 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 ------ 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: `
` bir açılış etiketi, `
` 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.