Kako se HTML pretvara u veb stranicu?

Proces konverzije HTML u veb stranicu uključuje nekoliko glavnih faza:

Parsiranje HTML-a:
- Pregledač čita HTML kod i gradi stablo objekata — DOM (Model objekta dokumenta).
- DOM predstavlja strukturu dokumenta u obliku čvorova (elementi, atributi, tekst).
Parsiranje CSS-a:
- Pregledač čita CSS stilove (spoljašnje, unutrašnje, inline).
- Kreira se stablo stilova — CSSOM (CSS objekat model).
Izgradnja stabla za renderovanje (Render Tree):
- DOM i CSSOM se kombinuju.
- Kreira se stablo objekata koje sadrži vizuelne informacije (koji elementi su vidljivi i kako treba da izgledaju). Elementi sa display: none se ne pojavljuju u Render Tree.
Layout (Reflow):
- Izračunavaju se tačne koordinate i dimenzije svakog elementa u Render Tree na ekranu.
- Elementi se preuređuju ako se njihove veličine ili pozicije promene (npr. pri promeni veličine prozora ili dodavanju sadržaja).
Štampanje (Painting):
- Pikseli se vizuelno prikazuju na ekranu koristeći informacije iz Render Tree i rezultate layout-a.
- Štampanje se vrši u slojevima (pozadina, ivica, sadržaj).
Kompuzicija (Compositing):
- Različiti slojevi renderovanja se preklapaju u pravom redosledu da bi se formirala finalna slika stranice.

Ovi koraci se izvršavaju sekvencijalno, ali neki od njih mogu da se ponove (npr. layout i štampanje pri promenama DOM-a ili stilova nakon učitavanja).

<!-- Primer jednostavnog HTML5 dokumenta -->
<!DOCTYPE html>
<html>
<head>
    <title>Primer stranice</title>
    <style>
        /* Primer CSS stilova */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Zdravo, svet!</h1> <!-- Element koji će biti dodat u DOM i Render Tree -->
    <p style="display: none;">Ovaj tekst je sakriven.</p> <!-- Element u DOM-u, ali ne u Render Tree -->
</body>
</html>

/* Primer CSSOM za stilove iz HTML-a */
/* Predstavlja strukturu stilova */
h1 {
    color: blue;
}

Pregledač analizira HTML i CSS, gradi interne modele, računa raspored elemenata i ih prikazuje na ekranu.