Kā HTML tiek pārvērsts par tīmekļa lapu?

HTML pārveidošanas process tīmekļa lapā ietver vairākus galvenos posmus:

HTML parsēšana:
- Pārlūkprogramma lasa HTML kodu un veido objektu koku — DOM (Document Object Model).
- DOM attēlo dokumenta struktūru kā mezglus (elementus, atribūtus, tekstu).
CSS parsēšana:
- Pārlūkprogramma lasa CSS stilus (ārējos, iekšējos, inline).
- Veido stilu koku — CSSOM (CSS Object Model).
Render koka veidošana:
- Apvieno DOM un CSSOM.
- Veido objektu koku, kas satur vizuālo informāciju (kuri elementi ir redzami un kā tie izskatīsies). Elementi ar display: none netiek iekļauti Render kokā.
Izvietojums (Layout/Reflow):
- Precīzi tiek aprēķinātas katra elementa ģeometriskās koordinātes un izmēri.
- Notiek elementu pārkārtošana, ja to izmēri vai pozīcija mainās.
Zīmēšana (Painting):
- Vizuāli tiek attēloti pikseļi uz ekrāna, izmantojot Render koka un izvietojuma rezultātus.
- Notiek slāņu zīmēšana (background, border, content).
Kompozīcija (Compositing):
- Dažādi zīmēšanas slāņi tiek pārklāti pareizā secībā, veidojot galīgo lapas attēlu.

Šie posmi tiek veikti secīgi, bet daži no tiem var atkārtoties (piemēram, Layout un Painting pēc DOM vai stilu izmaiņām).

<!-- Vienkāršs HTML5 dokumenta piemērs -->
<!DOCTYPE html>
<html>
<head>
    <title>Piemēra lapa</title>
    <style>
        /* CSS stilu piemērs */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Sveiki, pasaule!</h1> <!-- Elements, kas tiks pievienoti DOM un Render kokam -->
    <p style="display: none;">Šis teksts ir paslēpts.</p> <!-- Elements DOM, bet ne Render kokā -->
</body>
</html>

/* CSSOM piemērs HTML stiliem */
/* Attēlo stilu struktūru */
h1 {
    color: blue;
}

Pārlūkprogramma parsē HTML un CSS, veido iekšējos modeļus, aprēķina elementu izvietojumu un zīmē tos ekrānā.