Jak se HTML převádí na webovou stránku?

Proces převodu HTML na webovou stránku zahrnuje několik hlavních fází:

Parsování HTML:
- Prohlížeč načte HTML kód a vytvoří strom objektů — DOM (Document Object Model).
- DOM představuje strukturu dokumentu ve formě uzlů (prvky, atributy, texty).
Parsování CSS:
- Prohlížeč načte CSS styly (vnější, vnitřní, inline).
- Vytvoří se strom stylů — CSSOM (CSS Object Model).
Vytvoření renderovacího stromu (Render Tree):
- DOM a CSSOM jsou spojeny.
- Vytvoří se strom objektů obsahujících vizuální informace (které prvky jsou viditelné a jak mají vypadat). Prvky s display: none se v Render Tree nezobrazí.
Rozložení (Layout / Reflow):
- Přesně se vypočítají souřadnice a rozměry každého prvku v Render Tree na obrazovce.
- Pokud se změní velikost nebo pozice prvků (například při změně velikosti okna nebo přidání obsahu), dojde k jejich přeplánování.
Vykreslení (Painting):
- Pixely jsou vizuálně vykresleny na obrazovku podle informací z Render Tree a výsledků rozložení.
- Vykreslování probíhá ve vrstvách (pozadí, rámeček, obsah).
Kompózování (Compositing):
- Různé vrstvy vykreslení jsou překryty ve správném pořadí, čímž vznikne finální obrázek stránky.

Tyto kroky se provádějí sekvenčně, ale některé se mohou opakovat (například layout a painting při změnách DOM nebo stylů po načtení).

<!-- Příklad jednoduchého HTML5 dokumentu -->
<!DOCTYPE html>
<html>
<head>
    <title>Příklad stránky</title>
    <style>
        /* Příklad CSS stylů */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Ahoj, světe!</h1> <!-- Element, který bude přidán do DOM a Render Tree -->
    <p style="display: none;">Tento text je skrytý.</p> <!-- Element v DOM, ale ne v Render Tree -->
</body>
</html>

/* Příklad CSSOM pro styly z HTML */
/* Reprezentuje strukturu stylů */
h1 {
    color: blue;
}

Prohlížeč analyzuje HTML a CSS, vytváří vnitřní modely, počítá rozložení prvků a vykresluje je na obrazovku.