HTML necə veb səhifəyə çevrilir?

HTML-dən veb səhifəyə çevrilmə prosesi əsasən bir neçə mərhələdən ibarətdir:

HTML-nin parsinqi:
- Brauzer HTML kodunu oxuyur və obyekt ağacı — DOM (Sənəd Obyekti Modeli) qurur.
- DOM sənədin strukturunu elementlər, atributlar və mətn kimi göstərir.
CSS-nin parsinqi:
- Brauzer CSS stillərini oxuyur (xarici, daxili, inline).
- Stil ağacı — CSSOM (CSS Obyekti Modeli) qurulur.
Render ağacının qurulması:
- DOM və CSSOM birləşdirilir.
- Görünən məlumatları ehtiva edən obyektlər ağacı yaradılır (hansı elementlərin görünür və necə görünməli). display: none olan elementlər Render ağacında yer almaz.
Layout (Reflow):
- Hər elementin dəqiq koordinatları və ölçüləri hesablanır.
- Elementlər ölçüləri və mövqeləri dəyişdikdə (məsələn, pəncərə ölçüsü dəyişdikdə və ya məzmun əlavə edildikdə) yenidən yerləşdirilir.
Çizim (Painting):
- Render ağacından və layout nəticələrindən istifadə edərək piksellər ekranda vizual şəkildə çəkilir.
- Çizim qatlar şəklində (fon, sərhəd, məzmun) həyata keçirilir.
Kompozisiya (Compositing):
- Müxtəlif render qatları düzgün ardıcıllıqla üst-üstə qoyularaq səhifənin son görüntüsü yaradılır.

Bu mərhələlər ardıcıl şəkildə həyata keçirilir, lakin bəzi mərhələlər təkrarlana bilər (məsələn, DOM və ya stillər dəyişdikdə layout və painting yenidən həyata keçirilir).

<!-- Sadə HTML5 sənəd nümunəsi -->
<!DOCTYPE html>
<html>
<head>
    <title>Nümunə səhifə</title>
    <style>
        /* CSS stillər nümunəsi */
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Salaam, dünya!</h1> <!-- DOM və Render ağacına əlavə ediləcək element -->
    <p style="display: none;">Bu mətn gizlidir.</p> <!-- DOM-da, lakin Render ağacında deyil -->
</body>
</html>

/* HTML nümunəsindən CSSOM nümunəsi */
/* Stil strukturu təmsil edir */
h1 {
    color: blue;
}

Brauzer HTML və CSS-i analiz edir, daxili modellər qurur, elementlərin yerləşməsini hesablayır və onları ekranda göstərir.