Ako sa HTML premení na webovú stránku?

Proces transformácie HTML na webovú stránku zahŕňa niekoľko hlavných krokov:

Parsovanie HTML:
- Prehliadač načíta HTML kód a vytvorí strom objektov — DOM (Document Object Model).
- DOM predstavuje štruktúru dokumentu vo forme uzlov (elementy, atribúty, text).
Parsovanie CSS:
- Prehliadač načíta CSS štýly (externé, interné, inline).
- Vytvorí sa strom štýlov — CSSOM (CSS Object Model).
Vytvorenie render stromu (Render Tree):
- DOM a CSSOM sú spojené.
- Vytvorí sa strom objektov obsahujúcich vizuálne informácie (aké prvky sú viditeľné a ako by mali vyzerať). Prvky s display: none sa do Render Tree nezahrnú.
Rozloženie (Layout/Reflow):
- Presne sa vypočítajú geometrické súradnice a veľkosti každého prvku Render Tree na obrazovke.
- Dochádza k preusporiadaniu prvkov, ak sa ich veľkosti alebo poloha mení (napríklad pri zmene veľkosti okna alebo pridávaní obsahu).
Vykreslenie (Painting):
- Vizuálne sa zobrazia pixely na obrazovke, využívajúc informácie z Render Tree a výsledky fázy rozloženia.
- Dochádza k vrstvenému vykresleniu (background, border, content).
Kompózovanie (Compositing):
- Rôzne vrstvy vykreslenia sa prekryjú v správnom poradí na vytvorenie finálneho obrázku stránky.

Tieto kroky sa vykonávajú postupne, ale niektoré z nich sa môžu opakovať (napríklad Layout a Painting pri zmene DOM alebo štýlov po načítaní).

<!-- Príklad jednoduchého HTML5 dokumentu -->
<!DOCTYPE html>
<html>
<head>
    <title>Príklad stránky</title>
    <style>
        /* Príklad CSS štýlov */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Ahoj, svet!</h1> <!-- Prvok, ktorý bude pridaný do DOM a Render Tree -->
    <p style="display: none;">Tento text je skrytý.</p> <!-- Prvok v DOM, ale nie v Render Tree -->
</body>
</html>

/* Príklad CSSOM pre štýly z príkladu HTML */
/* Predstavuje štruktúru štýlov */
h1 {
    color: blue;
}

Prehliadač parsuje HTML a CSS, vytvára vnútorné modely, vypočíta rozloženie prvkov a vykresľuje ich na obrazovku.