HTML nasıl web sayfasına dönüştürülür?

HTML'yi web sayfasına dönüştürme süreci birkaç temel aşamadan oluşur:

HTML Ayrıştırması:
- Tarayıcı HTML kodunu okur ve bir nesne ağacı oluşturur — DOM (Belge Nesne Modeli).
- DOM, belgenin yapısını düğümler (öğeler, öznitelikler, metinler) şeklinde temsil eder.
CSS Ayrıştırması:
- Tarayıcı CSS stillerini okur (harici, dahili, satır içi).
- Stil ağacı — CSSOM (CSS Nesne Modeli) oluşturulur.
Render Ağacının Oluşumu:
- DOM ve CSSOM birleştirilir.
- Görsel bilgileri içeren bir nesne ağacı oluşturulur (hangi öğelerin görünür olduğu ve nasıl görünecekleri). display: none olan öğeler Render Ağacına dahil edilmez.
Layout (Reflow):
- Her öğenin kesin konumları ve boyutları hesaplanır.
- Öğeler, boyutları veya konumları değiştiğinde yeniden düzenlenir (örneğin, pencere boyutu değiştiğinde veya içerik eklendiğinde).
Boyama (Painting):
- Render Ağacı ve layout sonuçlarına göre ekran üzerinde pikseller görsel olarak çizilir.
- Katmanlar halinde (arka plan, kenarlık, içerik) çizim yapılır.
Bileşim (Compositing):
- Farklı render katmanları doğru sırayla üst üste bindirilerek sayfanın nihai görüntüsü oluşturulur.

Bu adımlar sıralı olarak gerçekleştirilir, ancak bazıları tekrar edebilir (örneğin, DOM veya stiller değiştiğinde layout ve painting tekrar yapılır).

<!-- Basit bir HTML5 belgesi örneği -->
<!DOCTYPE html>
<html>
<head>
    <title>Örnek Sayfa</title>
    <style>
        /* CSS stilleri örneği */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Merhaba, dünya!</h1> <!-- DOM ve Render Ağacına eklenecek öğe -->
    <p style="display: none;">Bu metin gizlidir.</p> <!-- DOM'da, ancak Render Ağacında değil -->
</body>
</html>

/* HTML örneğinden alınan CSSOM örneği */
/* Stil yapısını temsil eder */
h1 {
    color: blue;
}

Tarayıcı HTML ve CSS'i ayrıştırır, dahili modeller oluşturur, öğelerin konumunu hesaplar ve ekran üzerinde çizer.