Kuidas HTML-st saab veebileht?

HTML-i teisendamise protsess veebilehele hõlmab mitmeid põhietappe:

HTML-i analüüs:
- Brauser loeb HTML-koodi ja loob objektide puu — DOM (Document Object Model).
- DOM kujutab dokumendi struktuuri elementide, atribuutide ja teksti kujul.
CSS-i analüüs:
- Brauser loeb CSS- stiile (välised, sisemised, inline).
- Koostatakse stiilide puu — CSSOM (CSS Object Model).
Render-puu loomine:
- DOM ja CSSOM ühendatakse.
- Luues objektide puu, mis sisaldab visuaalset teavet (millised elemendid on nähtavad ja kuidas nad välja näevad). Elemendid, millel on display: none, ei kuulu Render-puusse.
Paigutus (Layout/Reflow):
- Täpselt arvutatakse iga elemendi geomeetrilised koordinaadid ja suurused.
- Kui nende suurus või asukoht muutub, toimub ümberpaigutamine.
Värvimine (Painting):
- Visuaalselt kuvatakse piksleid ekraanil, kasutades Render-puust ja paigutuse tulemustest.
- Toimub kihistamine (taust, ääris, sisu).
Komponeerimine (Compositing):
- Erinevad värvimiskihid kattuvad õigesti, moodustades lõpliku pildi leheküljest.

Need etapid toimuvad järjekindlalt, kuid mõned neist võivad korrata (näiteks, Layout ja Painting pärast DOM-i või stiilide muutmist).

<!-- Näide lihtsast HTML5 dokumendist -->
<!DOCTYPE html>
<html>
<head>
    <title>Näidissait</title>
    <style>
        /* CSS stiilide näide */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Tere, maailm!</h1> <!-- Element, mis lisatakse DOM-i ja Render-puusse -->
    <p style="display: none;">See tekst on peidetud.</p> <!-- Element DOM-is, kuid mitte Render-puus -->
</body>
</html>

/* CSSOM näide HTML-stiilidele */
/* Esitab stiilide struktuuri */
h1 {
    color: blue;
}

Brauser analüüsib HTML-i ja CSS-i, loob sisemisi mudeleid, arvutab elementide asukohad ja joonistab need ekraanile.