Πώς μετατρέπεται το HTML σε μια ιστοσελίδα;

Η διαδικασία μετατροπής του HTML σε μια ιστοσελίδα περιλαμβάνει αρκετά βασικά στάδια:

Ανάλυση HTML:
- Ο περιηγητής διαβάζει τον κώδικα HTML και κατασκευάζει ένα δέντρο αντικειμένων — DOM (Μοντέλο Αντικειμένου Εγγράφου).
- Το DOM αντιπροσωπεύει τη δομή του εγγράφου με κόμβους (στοιχεία, χαρακτηριστικά, κείμενο).
Ανάλυση CSS:
- Ο περιηγητής διαβάζει τα στυλ CSS (εξωτερικά, εσωτερικά, inline).
- Δημιουργείται το δέντρο στυλ — CSSOM (Μοντέλο Αντικειμένου CSS).
Κατασκευή του δέντρου απόδοσης (Render Tree):
- Το DOM και το CSSOM συνδυάζονται.
- Δημιουργείται ένα δέντρο αντικειμένων που περιέχει οπτικές πληροφορίες (ποια στοιχεία είναι ορατά και πώς πρέπει να φαίνονται). Τα στοιχεία με display: none δεν εμφανίζονται στο Render Tree.
Διάταξη (Layout / Reflow):
- Υπολογίζονται οι ακριβείς συντεταγμένες και διαστάσεις κάθε στοιχείου στο Render Tree στην οθόνη.
- Τα στοιχεία επανατοποθετούνται αν οι διαστάσεις ή οι θέσεις τους αλλάξουν (π.χ., κατά το μέγεθος του παραθύρου ή την προσθήκη περιεχομένου).
Ζωγραφική (Painting):
- Τα pixels αποδίδονται οπτικά στην οθόνη, χρησιμοποιώντας τις πληροφορίες από το Render Tree και τα αποτελέσματα του layout.
- Η ζωγραφική γίνεται σε στρώματα (background, border, content).
Σύνθεση (Compositing):
- Τα διάφορα στρώματα απόδοσης τοποθετούνται το ένα πάνω στο άλλο με τη σωστή σειρά για να σχηματίσουν την τελική εικόνα της σελίδας.

Αυτά τα στάδια εκτελούνται διαδοχικά, αλλά μερικά μπορούν να επαναληφθούν (π.χ., layout και painting όταν αλλάζει το DOM ή τα στυλ μετά τη φόρτωση).

<!-- Παράδειγμα απλού εγγράφου HTML5 -->
<!DOCTYPE html>
<html>
<head>
    <title>Παράδειγμα σελίδας</title>
    <style>
        /* Παράδειγμα CSS στυλ */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Γειά σου, κόσμε!</h1> <!-- Στοιχείο που θα προστεθεί στο DOM και στο Render Tree -->
    <p style="display: none;">Αυτό το κείμενο είναι κρυφό.</p> <!-- Στοιχείο στο DOM, αλλά όχι στο Render Tree -->
</body>
</html>

/* Παράδειγμα CSSOM για τα στυλ από το HTML */
/* Αντιπροσωπεύει τη δομή των στυλ */
h1 {
    color: blue;
}

Ο περιηγητής αναλύει το HTML και το CSS, κατασκευάζει εσωτερικά μοντέλα, υπολογίζει τη θέση των στοιχείων και τα αποδίδει στην οθόνη.