Cum se transformă HTML în o pagină web?

Procesul de conversie a HTML în pagină web include mai multe etape principale:

Analiza HTML:
- Browserul citește codul HTML și construiește un arbore de obiecte — DOM (Modelul de Obiect al Documentului).
- DOM-ul reprezintă structura documentului sub formă de noduri (elemente, atribute, text).
Analiza CSS:
- Browserul citește stilurile CSS (externe, interne, inline).
- Se construiește arborele de stiluri — CSSOM (Modelul de Obiect CSS).
Construirea arborelui de randare (Render Tree):
- DOM și CSSOM sunt combinate.
- Se creează un arbore de obiecte care conține informații vizuale (care elemente sunt vizibile și cum trebuie să arate). Elementele cu display: none nu apar în Render Tree.
Layout (Reflow):
- Se calculează coordonatele și dimensiunile exacte ale fiecărui element în Render Tree pe ecran.
- Elementele sunt redistribuite dacă dimensiunile sau pozițiile lor se schimbă (de exemplu, la schimbarea dimensiunii ferestrei sau la adăugarea de conținut).
Pictarea (Painting):
- Pixeii sunt redați vizual pe ecran, folosind informațiile din Render Tree și rezultatele layout-ului.
- Pictura se face pe straturi (fundal, border, conținut).
Compoziția (Compositing):
- Diferitele straturi de randare sunt suprapuse în ordinea corectă pentru a forma imaginea finală a paginii.

Acești pași sunt executați secvențial, dar unii pot repeta (de exemplu, layout și painting la modificări ale DOM sau stilurilor după încărcare).

<!-- Exemplu de document HTML5 simplu -->
<!DOCTYPE html>
<html>
<head>
    <title>Exemplu de pagină</title>
    <style>
        /* Exemplu de stiluri CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Salut, lume!</h1> <!-- Element care va fi adăugat în DOM și Render Tree -->
    <p style="display: none;">Acest text este ascuns.</p> <!-- Element în DOM, dar nu în Render Tree -->
</body>
</html>

/* Exemplu de CSSOM pentru stilurile din HTML */
/* Reprezintă structura stilurilor */
h1 {
    color: blue;
}

Browserul analizează HTML și CSS, construiește modele interne, calculează poziția elementelor și le afișează pe ecran.