HTML qanday qilib veb-sahifaga aylantiriladi…

HTML-ni web sahifa qilish jarayoni bir nechta asosiy bosqichlarni o'z ichiga oladi:

HTML-ni tahlil qilish:
- Brauzer HTML kodini o'qiydi va obyektlar daraxtini quradi — DOM (Hujjat Ob'ekt Modeli).
- DOM hujjat tuzilmasini elementlar, atributlar, matn shaklida ifodalaydi.
CSS-ni tahlil qilish:
- Brauzer CSS uslublarini o'qiydi (tashqi, ichki, inline).
- Stil daraxti — CSSOM (CSS Ob'ekt Modeli) quriladi.
Render daraxtini qurish:
- DOM va CSSOM birlashtiriladi.
- Vizual ma'lumotlarni o'z ichiga olgan obyektlar daraxti yaratiladi (qaysi elementlar ko'rinadigan va qanday ko'rinishda bo'lishi kerak). display: none bo'lgan elementlar Render daraxtida ko'rinmaydi.
Layout (Reflow):
- Har bir elementning aniq koordinatalari va o'lchamlari hisoblanadi.
- Elementlar o'lchamlari yoki joylashuvi o'zgarganda (masalan, oynaning o'lchami o'zgarganda yoki kontent qo'shilganda) ularni qayta joylashtirish amalga oshiriladi.
Chizish (Painting):
- Render daraxti va layout natijalariga asoslanib, piksellar ekranda vizual tarzda chiziladi.
- Qatlamlar bo'yicha chiziladi (fon, chegara, kontent).
Kompazitsiya (Compositing):
- Turli qatlamlar to'g'ri tartibda joylashtiriladi va sahifa yakuniy tasviri hosil qilinadi.

Ushbu bosqichlar ketma-ket amalga oshiriladi, ammo ba'zilari takrorlanishi mumkin (masalan, DOM yoki uslublar o'zgarganda layout va chizish).

<!-- Oddiy HTML5 hujjatining misoli -->
<!DOCTYPE html>
<html>
<head>
    <title>Misol sahifa</title>
    <style>
        /* CSS uslublar misoli */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Salom, dunyo!</h1> <!-- DOM va Render daraxtiga qo'shiladigan element -->
    <p style="display: none;">Ushbu matn yashirilgan.</p> <!-- DOMda, ammo Render daraxtida emas -->
</body>
</html>

/* HTML misolidan CSSOM misoli */
/* Uslublar tuzilmasini ifodalaydi */
h1 {
    color: blue;
}

Brauzer HTML va CSS-ni tahlil qiladi, ichki modellar quradi, elementlarning joylashishini hisoblaydi va ekraning ustiga chizadi.

HTML qanday qilib veb-sahifaga aylantiriladi?