Kısım I · Makine · Bölüm 20

İnternet ve Web: HTML'e Varış

İnternet, web ve tarayıcı (The internet, the web and the browser)

1. Kat 10Bizim uygulamamızHukuk dersleri, puan ve etkileşim; Kısım II'de inşa edeceğiz.
2. Kat 9Web ve tarayıcıURL, HTTP, HTML, CSS, JavaScript ve ekrana varış.
3. Kat 8Ağ ve internetDNS, IP ve taşıma hizmetleri; Bölüm 19'un üstüne kurulur.
4. Kat 7İşletim sistemiSüreç, bellek, dosya ve aygıt erişimi sağlar.
5. Kat 0–6Elektrikten açılışa bütün temelHer istekte yeniden kurulmaz; çalışan sistemin dayanağıdır.

MDN’in How the web works sayfasını okudun. Şimdi özetin altını dolduracağız: ad ile adres, taşıma ile HTTP, HTML metni ile bellekteki yapı arasındaki fark. Sonunda “Enter’a basınca ne olur?” sorusunun her adımını kendi katına bağlayabileceksin.

20.1 İnternet ve web aynı şey değil; web'in doğuşu

İnternet (Internet), Bölüm 19'da gördüğümüz, farklı ağları birbirine bağlayan altyapıdır. Web (World Wide Web, WWW) ise bu altyapı üzerinde kaynaklara adreslerle ulaşmayı ve bağlantılarla kaynaklar arasında gezinmeyi sağlayan sistemdir. İnternette e-posta gibi başka hizmetler de vardır; web, internetin bütününe verilen ikinci bir ad değildir. Aynı yol ağında hem kargo hem otobüs çalışması gibi: yolu ve onun üzerindeki hizmeti ayırıyoruz.¹

Hiper metin (hypertext), başka kaynaklara bağlantılar içeren metindir. Hukuk dersindeki “anayasanın üstünlüğü” ifadesinden ilgili açıklamaya geçebilmen, hedefi her seferinde kendin aramanı önler. Web’de adres kaynağı belirtir; istemci ister, sunucu yanıtlar, tarayıcı yorumlar.³²

Tim Berners-Lee web’i 1989’da CERN’de, farklı kurumlardaki bilim insanlarının bilgi paylaşımı için geliştirdi. İlk site web projesini anlatıyordu. Bu, internetin aynı anda doğduğu anlamına gelmez: zaten var olan bilgisayar ve ağların üstüne ortak bir bilgiye erişim düzeni kondu.²

20.2 URL'nin anatomisi: şema, alan adı, yol ve sorgu

URL (Uniform Resource Locator), bir kaynağa erişmek için kullanılan adres gösterimidir. Kaynak bir HTML belgesi olabilir; CSS, JavaScript, resim veya bir hizmetin ürettiği veri de olabilir. Kaynağı yalnızca “diskte duran dosya” diye daraltma. Bir URL'nin hangi yanıtı üreteceğini sunucu belirler; bazen hazır dosyayı okur, bazen o anda veri üretir.⁴

Aşağıdaki adres, kendi uygulamamız için bir tasarım örneğidir; yayında böyle bir site bulunduğunu söylemiyoruz. Kod içinde duruyor, açılacak dış kaynak bağlantısı değil:

https://hukuk.example:443/dersler/anayasa.html?seviye=1&dil=tr#soru-2
\___/   \___________/\_/\__________________/\________________/\_____/
 şema       alan adı port        yol              sorgu        parça

İsimleri tek tek açalım. Şema (scheme), URL'nin hangi erişim düzeniyle yorumlanacağını söyler: burada https. Alan adı (domain name) burada hukuk.example; IP adresi yerine insanın yazabildiği addır. :443 portu belirtir. HTTPS'nin varsayılan portu 443 olduğu için normalde yazılmayabilir. Bu yüzden port görünmeyince “port kullanılmıyor” sonucu çıkmaz. HTTP'nin varsayılan portu ise 80'dir.⁴

Yol (path), bu hizmette hangi kaynağın istendiğini belirleyen bölümdür: /dersler/anayasa.html. Sorgu (query), ? ile başlayan ek bilgidir; burada seviye=1 ve dil=tr çiftleri & ile ayrılır. Bu adlara hangi anlamın verileceği uygulamanın kararıdır. Tarayıcı “seviye”nin hukuk dersindeki zorluğu anlattığını kendiliğinden bilmez; yalnızca URL düzenini taşır.⁴

Parça tanımlayıcısı (fragment identifier), # sonrasındaki bölümdür. Örneğimizde soru-2, belgenin içindeki bir hedefi gösterebilir. Bu bölüm HTTP isteğiyle sunucuya gönderilmez; tarayıcı tarafında yorumlanır. Sorgu ile parçanın aynı tür “ek bilgi” olmadığını böyle ayır: ?dil=tr sunucunun isteği yorumlamasına katılabilir; #soru-2 aynı belge içinde nereye gidileceğini belirtebilir.⁴

Dosya yolu ile URL yolu benzer, ama özdeş değil

16.1’deki göreli yol fikri burada geri gelir: başlangıç, belgenin temel URL’sidir. Temel adres https://hukuk.example/dersler/index.html ise style.css, /dersler/style.css yoluna tamamlanır; /style.css ise site kökünden başlar. Tarayıcının kurulu olduğu klasöre göre arama yapılmaz.⁴

URL yolu sunucunun diskindeki dizinlerle aynı olmak zorunda değildir. /dersler/17 hazır dosyayla da o an üretilen içerikle de cevaplanabilir. Dışarıya sunulan kaynak adı, içerideki saklama yolunu açıklamak zorunda değildir.⁴

20.3 DNS: alan adından IP adresine

19.4’ün yönlendiricileri alan adıyla değil IP adresiyle iletir. İkisini bağlayan DNS (Domain Name System), hiyerarşik ve dağıtık adlandırma sistemidir. En tanıdık işi, ada bağlı IP adreslerini bulmaktır: ad çözümleme (name resolution, DNS lookup).⁵

Adı bilip numarayı rehberden bulmak gibi. Ama DNS dünyanın tek bilgisayarda duran değişmez rehberi değildir: sorumluluk ad hiyerarşisinde bölünür, yetkili bilgiyle yakındaki önbellek kopyası ayrıdır.⁵⁶

Bir çözümlemenin sade akışı

1. Uygun önbellek varsa yeniden uzaktan sorgu gerekmez: 8.2’nin “sık kullanılanı yakına koy” fikri.⁶
2. DNS çözümleyicisi (DNS resolver), kendi önbelleği yetmezse diğer sunuculardan bilgi edinir.⁷
3. Yetkili ad sunucusu (authoritative name server) kendi alanının kayıtlarını verir; sonuç geri döner ve uygun süreyle önbelleklenebilir.⁷
4. Tarayıcı bulunan adresle bağlantıyı deneyebilir. Adın çözülmesi, web hizmetinin çalıştığını kanıtlamaz; adlandırma ve hizmet isteği farklı işlerdir.³⁶

A kaydı IPv4, AAAA kaydı IPv6 adresini taşır; başka kayıt türleri de vardır. Bir ada birden çok IP, bir IP’ye birden çok site bağlanabilir. DNS URL’nin /dersler/17 yolunu çözmez; yolun anlamı sonraki HTTP isteğindedir.⁷³

Yaşam süresi (time to live, TTL), DNS kaydının önbellekte yeniden kullanılma süresini sınırlar. Kayıt değişince herkesin aynı anda yeni adrese geçmemesinin nedeni budur. IP paketindeki atlama sayacıyla aynı görev değildir. DNS yönetimini Bölüm 43 açacak.⁷

20.4 HTTP ve HTTPS; TLS ile koruma; istek ve yanıt

Adresi bilmek, ne istediğini söylemek değildir. HTTP (Hypertext Transfer Protocol) kaynak alışverişinin uygulama katmanı protokolüdür. İstek (request) istemciden gider; yanıt (response) sunucudan gelir. TCP’nin byte akışının anlam kazanması için ortak ileti biçimi gerekir; HTTP bunu sağlar.³

HTTPS (HTTP over TLS), HTTP’nin TLS (Transport Layer Security) korumasıyla yapılmasıdır. TLS şifreleme, değişikliği fark etmeyi sağlayan bütünlük ve kimlik doğrulama sunar. Normal web kullanımında tarayıcı sunucunun sertifikasını (certificate) ve alan adıyla ilişkisini denetler. Bu belge kimlik hakkında doğrulanabilir bilgi taşır; ayrıntıları Bölüm 41 açacak.⁸

TLS taşıma sırasında koruma sağlar; hizmetin dürüstlüğünün veya hukuk bilgisinin doğruluğunun sertifikası değildir. Yanlış puan sonucu da güvenle taşınabilir. TCP’nin güvenilirliği, TLS koruması ve uygulamanın doğruluğu ayrı sözlerdir.⁸³

Bir isteği açalım

Bu, önceki URL için örnek HTTP/1.1 isteği; sunucu kaydı değil. Okunabilir biçimi seçtik. HTTP/2 ve HTTP/3’ün ağdaki gösterimi farklı olsa da istek/yanıt anlamı sürer.³

GET /dersler/anayasa.html?seviye=1&dil=tr HTTP/1.1
Host: hukuk.example

İlk satırdaki GET, kaynağı getirmeyi isteyen yöntem (method) adıdır. Ardındaki yol ve sorgu hangi kaynağın hangi bilgilerle istendiğini söyler; HTTP/1.1 bu gösterimin sürümüdür. İkinci satır bir başlık (header) alanıdır: Host, hangi alan adına yönelik hizmetin istendiğini belirtir. Boş satır başlıkları bitirir. Örnekte gönderilecek bir istek gövdesi (body) yoktur; başka istekler, örneğin cevap verisi gönderilirken, bir gövde taşıyabilir. #soru-2'nin bu satırlarda bulunmadığına dikkat et.³⁴

Başarılı bir yanıtın başlangıcını da öğretim örneği olarak düşünelim. Aşağıdaki son satır tam HTML belgesi değil, gövdeden bir parçadır:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<h1>Anayasa</h1>

200 bir durum kodu (status code): isteğin başarısını bildirir. Content-Type içeriğin HTML ve UTF-8 olduğunu belirtir; 2.5’in byte–karakter ayrımı burada işe yarar. Boş satırdan sonrası gövdedir. 404 ise istenen kaynağın bulunamadığı yanıttır: sunucudan HTTP cevabı alınmıştır, ağın hiç çalışmadığı sonucu çıkmaz.³⁹

Bir sayfa her zaman tek istek değildir

HTML’de bulunan CSS, JavaScript ve resim adresleri ek istekler doğurabilir; uygun kaynaklar önbellekten gelebilir. Bir URL yazmak, tek ileti ve tek dosya alınacağını göstermez. HTTP yöntemlerini ve durum kodlarını Bölüm 35 açacak.³¹¹

20.5 Tarayıcı da bir programdır: işleme motoru ve JavaScript motoru

Tarayıcı (browser), kaynak isteyen, yorumlayan ve kullanıcıyla etkileşen uygulamadır; “HTML anlayan özel devre” değildir. Süreçler, adres alanları ve aygıt hizmetleri onun için de geçerlidir. Chrome’u örnek alıyoruz; her tarayıcının aynı süreç mimarisini kullanması zorunlu değil.¹⁰

İşleme motoru (rendering engine), belge ve görünüm kurallarından gösterilecek sonucu üretir. JavaScript motoru (JavaScript engine) kod yürütür; Chrome’da adı V8 (V8 JavaScript engine)’dir. Bunlar fiziksel motor değil, farklı görevli yazılım bileşenleridir.¹⁰¹¹

15.4’teki süreç ayrımını kullanıyoruz: adres çubuğu tarayıcı tarafındadır, sayfa içeriğinin işlenmesi uygun işleme sürecine aktarılır. Ağ ve dosya işleri de paylaştırılabilir; bu görev dağılımı örnektir, değişmez süreç sayısı değil.¹⁰¹³

Gelen byte'lar neden doğrudan resim olmuyor?

HTML metni her pikselin rengini söylemez. Ayrıştırma (parsing) metni anlamlı yapıya dönüştürür. HTML’den DOM (Document Object Model), belgenin bellekteki ağaç gösterimi oluşur. Başlık ve paragraf artık rastgele harfler değil, ilişkili öğelerdir. Bölüm 11’in ağaç fikrini Bölüm 23’te DOM’a uygulayacağız.¹¹

CSS kuralları okunduğunda hangi öğenin hangi görünüm özelliklerini alacağı belirlenir. Ardından yerleşim (layout) hesaplanır: öğelerin boyutları ve konumları ne olacak? Sonra boyama (paint) aşamasında hangi sırada ne çizileceğine ilişkin kayıtlar üretilir. Bu kayıtların piksel verisine çevrilmesi pikselleştirme (rasterization), ayrı görüntü katmanlarının son karede toplanması birleştirme (compositing) işidir. Bu terimleri optimizasyon reçetesi olarak değil, metinden görüntüye giden eksik basamaklar olarak öğreniyoruz.¹¹

HTML metni → DOM
CSS kuralları → görünüm özellikleri
DOM + görünüm → yerleşim → boyama kayıtları
boyama kayıtları → pikseller → görüntü katmanlarını birleştirme → ekran

Her değişiklikte bütün aşamalar baştan yapılmak zorunda değildir. Örneğin bazı durumlarda var olan görüntü katmanlarını hareket ettirmek, bütün yerleşim ve boyama işini tekrarlamadan kare üretmeye izin verir. CSS ayrıntıları Bölüm 24’te.¹¹

JavaScript çalışırken belgeyi veya görünümü değiştirebilir; bu yeni görüntü hesabına yol açar. Bazı betikler HTML ayrıştırmasını da bekletebilir. Dolayısıyla “önce bütün dosyalar bitsin, sonra tek seferde çizilsin” modeli yetmez. Motorun yorumlama ve derleme yollarını 21.2 açacak.¹¹

20.6 Adres çubuğuna yazıp Enter'a bastığında ne olur?

Şimdi Bölüm 1.7'nin yerel dosya önizlemesini tamamlayalım. O örnekte dosya kendi bilgisayarındaydı; bu kez başka bir bilgisayardaki HTML'i HTTPS ile istiyoruz. Bir öğrenme modeli seçiyoruz: sistem zaten açılmış, URL açıkça yazılmış, ağ erişimi var, yanıt kullanılabilir bir önbellekte yok, yeni TCP bağlantısı kuruluyor, TLS doğrulanıyor ve sunucu HTML döndürüyor. Bunlar her gezinmede zorunlu olarak aynen tekrarlanan adımlar değildir. Modeli kurduktan sonra kısayolları ayıracağız.¹³³

1. Önkoşul — Kat 6–7: Bölüm 12'deki gömülü yazılım ve önyükleme, işletim sistemini daha önce başlatmıştır. Her Enter'da bilgisayar yeniden açılmaz. Tarayıcı da Bölüm 14'teki anlamıyla çalışan programdır. Kat 6 bu isteğin yeni aşaması değil, sistemin önceki önkoşuludur.

2. Girdi — Kat 0–3 ve Kat 7: Enter olayı donanım ve sürücüler üzerinden işletim sistemine, oradan tarayıcıya ulaşır. Klavye URL'nin anlamını çözmez. Fiziksel girdiyle programdaki eylem arasındaki köprü 17.4'ün konusuydu.

3. URL — Kat 9: Tarayıcı şema, alan adı, port, yol ve sorguyu ayırır. Tam URL verdiğimiz için arama motoruna soru gönderme yoluna gitmiyoruz. Parça tanımlayıcısı sunucu isteğine katılmaz. Chrome yazı dizisinin “gezinme” dediği hazırlık başlar.¹³⁴

4. DNS — Kat 8: Gerekli ad çözümlemesi yapılır; uygun önbellek varsa hiyerarşi yeniden dolaşılmaz. Bir veya daha fazla IP adresi öğrenilebilir. DNS HTML'i değil, ada ilişkin adres bilgisini getirir; URL yolundaki dosyayı aramaz.⁵⁷

5. Bağlantı — Kat 8, Kat 7 ve aygıt: Seçilen IP ve port için örneğimizde TCP el sıkışması yapılır. Ağ yığını ve sürücü veriyi arayüzden çıkarır. Paketler yerel ağdan yönlendiriciye, diğer ağlardan hedefe ilerler. TCP uçlarda sıra ve kayıpla ilgilenir; her yönlendirici soru metnini anlamak zorunda değildir. Bkz. 19.5.

6. Koruma — TLS: HTTPS için taraflar güvenli iletişim hazırlığını yapar; tarayıcı sunucunun sertifikasını doğrular. TCP ve TLS el sıkışmaları farklı görevlerdir: taşıma bağlantısı ve korumalı iletişim. HTTP/3 seçilseydi taşıma kısmını QUIC üzerinden anlatırdık.⁸¹²

7. İstek — Kat 9: HTTP isteğinde yol ve sorguyla kaynak istenir. TLS'nin koruduğu ileti, taşıma ve IP verisi olarak ağdan gider. Böylece “nereye?” sorusuna ek olarak “orada ne istiyorum?” da söylenir. HTTP uygulama katmanındadır; kitabın Kat 10'undaki puan mantığıyla özdeş değildir.³⁸

8. Karşı makine ve yanıt: Sunucunun aygıtı veriyi alır; işletim sistemi ilgili hizmete ulaştırır; sunucu süreci isteği işler. Hazır dosya dosya sistemi üzerinden okunabilir, içerik bellekte bulunabilir veya o anda üretilebilir. Her yanıtta yeni disk okuması şart değildir. Durum, başlıklar ve gövde geri gönderilir; istemcide katmanlar ters yönde açılır.³

9. Belge — Kat 3 ve Kat 9: Tarayıcı yanıtı yorumlar ve bu HTML örneğinde veriyi uygun işleme sürecine aktarır. RAM'deki byte'lar kodlama bilgisiyle karakterlere, HTML ayrıştırılarak DOM'a dönüşür. Dosyanın metni ile bellekteki ağaç aynı gösterim değildir. Bir yönlendirme veya indirme yanıtı olsaydı farklı yoldan devam edilirdi.¹¹¹³

10. Ek kaynaklar ve görüntü — Kat 8–9: HTML'deki CSS, JavaScript ve resim adresleri yeni istekler doğurabilir; uygun kaynaklar önbellekten gelebilir. Ayrıştırma ve indirme örtüşebilir. DOM ile görünüm kurallarından yerleşim, boyama kayıtları, pikselleştirme ve birleştirme sonucu görüntü üretilir. JavaScript'in belge değişiklikleri yeni görüntü hesabına yol açabilir.³¹¹

11. Çalışma zemini — Kat 5, 4, 3, 2, 1 ve 0: Tarayıcı, ağ yığını ve sürücüler dillerle yazılmış, yürütülebilir biçimlere çevrilmiş yazılımdır. CPU uygun makine komutlarını yürütür; bellek veri tutar. Hesap ve hafıza devreleri, mantık kapıları ve transistörlerden kuruludur; bitler fiziksel durumlarla temsil edilir. Bunlar HTTP'den sonra sırayla açılan yeni istasyonlar değildir: URL ayrıştırılırken de paket işlenirken de görüntü hesaplanırken de aynı temel çalışıyordu. JavaScript motorunun yürütme yollarını 21.2 açacak.

12. Çıktı ve anlam — Kat 7, donanım ve Kat 10: Üretilen kare grafik sistemi ve GPU işlerinin katılabildiği yoldan ekrana sunulur. 17.4'ün girdi–işlem–çıktı çevrimi tamamlandı. Gördüğün hukuk dersi, cevap ve puan mantığı ise Kat 10'daki uygulamanın anlamıdır; alt katlar o anlamı bilmeden hizmetlerini sağlar.¹⁰¹¹

Şimdi bu akıştaki kısayolları doğru yere koy

Uygun önbellek, kaynağı yeniden ağdan almayı; mevcut bağlantı, yeni TCP/TLS başlangıcını gereksiz kılabilir. İndirme ve işleme de örtüşebilir. Anlatım sırası gerçek zaman çizelgesinin fotoğrafı değildir: görevlerin bağımlılığıyla zaman içindeki örtüşmelerini ayırıyoruz.³¹¹

file: ile yerel HTML açarken ilk belgeyi uzak HTTP sunucusundan istemek gerekmez. Ama belge sonradan uzak kaynaklar isteyebilir; “yerel” demek her koşulda ağsız demek değildir. 1.7’nin sade örneğinde kaynaklar yereldi. HTML’in yorumlanıp görüntüye dönüşmesi aynı kalır.¹¹⁴

20.7 HTML, CSS ve JavaScript'in yeri; Kısım II'ye kapı

HTML (HyperText Markup Language) belge yapısını ve anlamını, CSS (Cascading Style Sheets) görünüm ve yerleşimi, JavaScript (JavaScript) programlanabilir davranışı verir. Üçü metin olarak gelebilir, ama farklı dillerdir. HTTP bunları yorumlayan dil değil, alışveriş protokolüdür.⁹¹¹

Bu örnekte sunucunun ekran görüntüsü aktarılmadı: kaynaklar geldi ve görüntü istemcide hesaplandı. Aynı belge farklı ekran genişliğinde başka yerleşimle görünebilir. Artık HTML’in altını makine ve ağ hizmetleriyle bağladık.¹¹

Bu bölümde neler kuruldu

İnternet altyapı, web onun üzerindeki hizmettir. URL kaynağı adlandırır; DNS alan adı ile ağ adresi arasında köprü kurar. HTTP istek ve yanıtı, HTTPS ise bu alışverişin TLS korumasını anlatır. Tarayıcı kaynakları alan, HTML'i DOM'a dönüştüren, CSS ile yerleşim ve görüntü hesaplayan, JavaScript motorunda kod yürüten bir programdır. Adres çubuğundan ekrana kadar gördüğümüz akış, Kat 0–10'un nasıl birlikte iş gördüğünü tamamladı; katlar her istek sırasında yeniden yapılan bir montaj sırası değildir.

Terimler sözlükte, Bölüm 20 başlığı altında. Kısım I'in hedefi artık tamam: makinenin hangi hizmeti nereden aldığını biliyorsun. Kısım II'de soru değişiyor: Bu hizmetlerle kendi uygulamamızı nasıl kuracağız?

Kaynaklar

1. MDN, How does the Internet work?: Internet and the web.
2. CERN, The birth of the Web: 1989, Berners-Lee ve ilk site.
3. MDN, Overview of HTTP: Components, HTTP flow ve HTTP messages.
4. MDN, What is a URL?: anatomy of a URL ve relative URLs.
5. MDN, DNS: hiyerarşik ve dağıtık adlandırma.
6. MDN, What is a Domain Name?: How does a DNS request work?.
7. Özgün teknik açıklama, The Internet explained from first principles: DNS: çözümleyici, kayıt, yetkili sunucu, TTL.
8. Ilya Grigorik, HPBN, Transport Layer Security (TLS): Encryption, Authentication, and Integrity; Chain of Trust.
9. Harvard, CS50x Hafta 8 yazılı notları: HTTPS, HTML, CSS ve JavaScript.
10. Mariko Kosaka, Chrome for Developers, Inside look at modern web browser (part 1): Browser architecture.
11. Aynı dizi, part 3: Parsing, Subresource loading, Layout, Paint, Compositing.
12. MDN, HTTP/3: QUIC ve UDP.
13. Mariko Kosaka, Inside look at modern web browser (part 2): A simple navigation, Read response, Commit navigation; aynı dizinin 4. yazısı, Input events.