როგორ გარდაიქმნება HTML ვებგვერდად?

HTML-ის გარდაქმნის პროცესი მოიცავს რამდენიმე ძირითად ეტაპს:

HTML-ის ანალიზი:
- ბრაუზერი კითხულობს HTML კოდს და ქმნის ობიექტების ხეს — DOM (Document Object Model).
- DOM წარმოადგენს დოკუმენტის სტრუქტურას ელემენტების, ატრიბუტების და ტექსტის სახით.
CSS-ის ანალიზი:
- ბრაუზერი კითხულობს CSS სტილებს (გარე, შიდა, inline).
- იქმნება სტილების ხე — CSSOM (CSS Object Model).
რენდერების ხის შექმნა:
- DOM და CSSOM ერთიანდებიან.
- იქმნება ობიექტების ხე, რომელიც შეიცავს ვიზუალურ ინფორმაციას (რომელ ელემენტებს აქვთ ხილვადობა და როგორ უნდა გამოიყურებოდნენ). ელემენტები display: none არ შედიან Render Tree-ში.
გეგმარება (Layout/Reflow):
- ზუსტად იანგარიშება თითოეული ელემენტის გეოგრაფიული კოორდინატები და ზომები.
- ხდება ელემენტების გადანაწილება, თუ მათი ზომები ან პოზიცია იცვლება.
ფერადება (Painting):
- ვიზუალურად იჩენს პიქსელებს ეკრანზე, გამოყენებით Render Tree-ს და გეგმარების შედეგებს.
- ხდება ფონის, საზღვრის და შიგთავსის ფენების ფერადება.
კომპოზიცირება (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-ის, ქმნის შიდა მოდელებს, ითვლის ელემენტების განლაგებას და იძერწავს მათ ეკრანზე.