Jak HTML jest przekształcany w stronę internetową…

Proces konwersji HTML na stronę internetową obejmuje kilka głównych etapów:

Parsowanie HTML:
- Przeglądarka odczytuje kod HTML i tworzy drzewo obiektów — DOM (Model Obiektu Dokumentu).
- DOM reprezentuje strukturę dokumentu w postaci węzłów (elementy, atrybuty, tekst).
Parsowanie CSS:
- Przeglądarka odczytuje style CSS (zewnętrzne, wewnętrzne, inline).
- Tworzone jest drzewo stylów — CSSOM (Model Obiektu CSS).
Budowa drzewa renderowania (Render Tree):
- DOM i CSSOM są łączone.
- Tworzone jest drzewo obiektów zawierających informacje wizualne (które elementy są widoczne i jak mają wyglądać). Elementy z display: none nie pojawiają się w Render Tree.
Układ (Layout/Reflow):
- Obliczane są dokładne współrzędne i rozmiary każdego elementu w Render Tree na ekranie.
- Elementy są ponownie rozmieszczane, jeśli ich rozmiary lub pozycje się zmieniają (np. przy zmianie rozmiaru okna lub dodaniu treści).
Malowanie (Painting):
- Piksele są wizualnie renderowane na ekranie, korzystając z informacji z Render Tree i wyników układu.
- Malowanie odbywa się warstwami (tło, obramowanie, zawartość).
Kompozycja (Compositing):
- Różne warstwy renderowania nakładają się na siebie w odpowiedniej kolejności, tworząc końcowy obraz strony.

Etapy te są wykonywane kolejno, choć niektóre mogą się powtarzać (np. układ i malowanie przy zmianie DOM lub stylów po załadowaniu).

<!-- Przykład prostego dokumentu HTML5 -->
<!DOCTYPE html>
<html>
<head>
    <title>Przykład strony</title>
    <style>
        /* Przykład stylów CSS */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Witaj, świecie!</h1> <!-- Element, który zostanie dodany do DOM i Render Tree -->
    <p style="display: none;">Ten tekst jest ukryty.</p> <!-- Element w DOM, ale nie w Render Tree -->
</body>
</html>

/* Przykład CSSOM dla stylów z przykładowego HTML */
/* Reprezentuje strukturę stylów */
h1 {
    color: blue;
}

Przeglądarka analizuje HTML i CSS, tworzy modele wewnętrzne, oblicza rozmieszczenie elementów i renderuje je na ekranie.

Jak HTML jest przekształcany w stronę internetową?