Sənədin və veb saytın strukturu

• Sənədin əsas bölmələri
  • Başlıq
  • Naviqasiya menyusu
  • Əsas kontent
  • Yan panel
  • Futer
• Kontentin strukturlaşdırılması
• HTML maket elementləri haqda daha ətraflı

Bu dərsdə saytın strukturunu planlaşdırmağı və HTML-in köməyilə bu strukturu qurmağı nəzərdən keçirəcəyik.

Sənədin əsas bölmələri

Veb səhifələr vizual olaraq bir-birindən fərqlənsələr də, lakin onlar bir çox hallarda aşağıdakı ümumi standart komponentlərdən ibarətdirlər:

Başlıq (header)

Veb səhifənin ən yuxarı hissəsində yerləşən bu bölmə adətən bütün digər veb səhifələrdə standart komponent kimi istifadə edilir. Burda veb-saytın adı, loqotip, əsas menyu, axtarış sətri, qeydiyyat, hesaba giriş düymələri yerləşdirilə bilər. Bu bölmə sayt üzrə sürətli naviqasiya üçün çox vacibdir, çünki burada adətən saytın əsas bölmələrindən ibarət menyu yerləşdirilir.

Saytda başlıq bölməsini yaratmaq üçün <header> elementindən (<header> ... </header> teqləri) istifadə edilir.

Naviqasiya menyusu (navigation bar)

Saytın əsas bölmələrinə keçid etmək üçün bağlantılar çox vaxt bu komponentin içərisində yerləşdirilir. Naviqasiya menyusu, həmçinin saytın bütün veb səhifələrində standart komponent kimi istifadə edilir. Müxtəlif veb səhifələrdə fərqli naviqasiya menyusu istifadəçilərdə çaşqınlıq yarada bilər.

Naviqasiya menyusu yaratmaq üçün <nav> elementindən (<nav> ... </nav>) istifadə edilir.

Əsas kontent (main content)

Veb səhifənin böyük hissəsini əhatə edən bu komponentdə unikal kontent (məsələn, yazı, şəkil, video və sairə) yerləşdirilir. Bu bölmənin məzmunu səhifədən səhifəyə dəyişir, çünki kontent unikaldır!

Əsas kontent <main> elementinin (<main> ... </main>) köməyilə strukturlaşdırılır. Səhifədə yalnız bir <main> elementindən istifadə edin.

Yan panel (sidebar)

Yan paneldə adətən oxşar məqalələrin bağlantıları, müəllifin bioqrafiyası, reklam və sitatlar yerləşdirilir, ancaq bəzi hallarda bu komponentdə ikinci naviqasiya sistemi də ola bilər.

Yan panel <aside> elementininin (<aside> ... </aside>) köməyilə strukturlaşdırılır. Adətən <main> elementinin içərisində olur.

Futer (footer)

Veb səhifənin aşağı hissəsində yerləşən bu bölmədə çox vaxt müəllif hüquqları, əlaqə vasitələri, sosial şəbəkə səhifələri üçün ikonkalar, həmçinin saytın əsas bölmələrinin bağlantıları yerləşdirilir.

Futer <footer> elementininin (<footer> ... </footer>) köməyilə strukturlaşdırılır.

"Tipik sayt" aşağıdakı kimi strukturlaşdırıla bilər:

Kontentin strukturlaşdırılması

Yuxarıdakı veb sayt maketi sadədir, lakin tipik veb sayt maketini göstərmək üçün işimizə yarayır. Bəzi saytlarda 2 deyil, daha çox sütun olur, bəzilərinin strukturu çox mürəkkəbdir, ümid edirəm ki, siz ideyanı anladınız. CSS texnologiyasının köməyilə saytdakı bölmələrə istədiyimiz vizual effekti verə bilərik.

Ancaq vizual effekt hər şey demək deyil. Biz istifadəçilərin diqqətini cəlb etmək üçün saytda müxtəlif rəng və şrift ölçüsündən istifadə edirik. Bəs görmə qabiliyyəti zəif olanlar necə? Buna görə veb səhifədə semantikaya riayət etməli və düzgün elementdən istifadə etməliyik. Semantika dedikdə HTML elementlərinin səhifədə ifadə etdiyi məna başa düşülür.

Nəzərə alın ki, veb səhifələrə istifadəçilərdən başqa, həmçinin axtarış robotları daxil olurlar. Bu robotlar səhifədəki informasiyanı toplayır, təhlil edir, səhifənin əhəmiyyətini və unikallığını müəyyənləşdirirlər. Axtarış robotlarının gözü olmadığına görə onlar veb sayt maketini insan kimi asanlıqla bölmələrə ayıra bilmirlər. Buna görə veb səhifədə semantika qaydalarına riayət edilməsi, yəni HTML elementlərinin düzgün istifadəsi axtarış robotlarının işini xeyli asanlaşdırır. Bu halda axtarış robotları veb səhifəni HTML elementlərinin ifadə etdiyi mənaya görə təhlil edirlər.

Bundan başqa, görmə qabiliyyəti zəif olan insanlar screen reader (mətni ekrandan oxuyan qurğu) qurğusunun köməyilə veb səhifələri dinləyirlər. Bu qurğunun veb səhifədəki başlıq, naviqasiya menyu, əsas kontent və digər bölmələrin yerləşməsini düzgün təyin etməsi üçün səhifəni semantik olaraq düzgün strukturlaşdırmaq lazımdır.

HTML maket elementləri haqda daha ətraflı

HTML-in bütün struktur elementlərinin mənasını başa düşmək faydalıdır. İndiki halda aşağıdakı semantik elementləri başa düşməyə çalışmalısınız:

1) <main> blokunda səhifənin əsas və unikal kontenti yerləşir. Saytın başlığı, futer, naviqasiya menyusu, axtarış forması, müəllif hüquqları haqda infromasiya bu blokda yerləşdirilmir.

Səhifədə yalnız bir <main> elementindən istifadə edin və onu <body> elementinin içərisində yerləşdirin. Məsələn:

<!DOCTYPE html>
<html lang="az">
    <head>
        <meta charset="UTF-8">
        <title>İlk sərt disk</title>
    </head>

    <body>
        <header>
            <h1>İlk sərt disk</h1>
        </header>

        <main>
            <p>
                1949-cu ilin iyununda IBM korporasiyasında mühəndis və tədqiqatçılardan ibarət qrupu 
                məlumatların saxlanılması üçün yeni qurğu üzərində işlərə başlayıblar. Məhz, bu hadisə 
                məlumatların saxlanılması üçün maqnit qurğularının inkişafı tarixində başlanğıc nöqtəsi olub. 
               1952-ci il mayın 21-də IBM korporasiyası IBM 701 hesablama maşını üçün IBM 726 lentşəkilli
               daşıyıcı modulunu təqdim edib.
            </p>

            <p>
				<strong>Nəhayət, 4 il sonra, 1956-ci il sentyabrın 13-də ilk sərt disk təqdim edilib.</strong> 
				Təxminən 1 tona yaxın (971 kq) çəkisi olan sərt disk ölçüsünə görə iri şkafı xatırladırdı. 
				Perfokart və maqnit lentlərindən istifadə olunan bir dövrdə 5 milyon simvolu (5 MB!) yaddaşda
                saxlayan sərt diskin hazırlanması çox böyük nailiyyət idi. IBM RAMAC 350 adlandırılan sərt disk 
                IBM şirkətinin San-Xose şəhərindəki laboratoriyasında hazırlanmışdı. Məlumat üçün bildirim ki, 
                bu şəhər  sonralar Silikon vadisinin "ürəyinə" çevrildi.
            </p>
        </main>
    </body>
</html>

Brauzerdə görünüş:

Yuxarıdakı kodda <main> semantik elementini <div> qeyri-semantik elementilə əvəz etsək, brauzerdə görünüş eyni olaraq qalır. Koda dəyişiklik edirik:

<!DOCTYPE html>
<html lang="az">
    <head>
        <meta charset="UTF-8">
        <title>İlk sərt disk</title>
    </head>

    <body>
        <header>
            <h1>İlk sərt disk</h1>
        </header>

        <div>
            <p>
                1949-cu ilin iyununda IBM korporasiyasında mühəndis və tədqiqatçılardan ibarət qrupu 
                məlumatların saxlanılması üçün yeni qurğu üzərində işlərə başlayıblar. Məhz, bu hadisə 
                məlumatların saxlanılması üçün maqnit qurğularının inkişafı tarixində başlanğıc nöqtəsi olub. 
               1952-ci il mayın 21-də IBM korporasiyası IBM 701 hesablama maşını üçün IBM 726 lentşəkilli
               daşıyıcı modulunu təqdim edib.
            </p>

            <p>
				<strong>Nəhayət, 4 il sonra, 1956-ci il sentyabrın 13-də ilk sərt disk təqdim edilib.</strong> 
				Təxminən 1 tona yaxın (971 kq) çəkisi olan sərt disk ölçüsünə görə iri şkafı xatırladırdı. 
				Perfokart və maqnit lentlərindən istifadə olunan bir dövrdə 5 milyon simvolu (5 MB!) yaddaşda
                saxlayan sərt diskin hazırlanması çox böyük nailiyyət idi. IBM RAMAC 350 adlandırılan sərt disk 
                IBM şirkətinin San-Xose şəhərindəki laboratoriyasında hazırlanmışdı. Məlumat üçün bildirim ki, 
                bu şəhər  sonralar Silikon vadisinin "ürəyinə" çevrildi.
            </p>
        </div>
    </body>
</html>

Brauzerdə görünüş:

Göründüyü kimi, həm <main>, həm də <div> elementi ilə nəticə eynidir, brauzer hər ikisini eyni göstərir. Bəs onda fərq nədədir? Kontentin strukturlaşdırılması yarımbaşlığında artıq bu suala cavab verilib. <main> semantik elementdir, ona görə axtarış sistemləri üçün daha vacib əhəmiyyət kəsb edir. Həmçinin semantik elementlərdən istifadə HTML sənədinin düzgün strukturlaşdırılmasına imkan verir ki, bu da veb səhifəni dinləyən görmə qabiliyyəti zəif olan insanların məlumatı əldə etməsini asanlaşdırır.

<div> qeyri-semantik elementi bu üstünlüklərdən məhrumdur. Onu uyğun semantik element tapılmadıqda istifadə edin.

2) <article> semantik elementi sənədin, səhifənin və ya saytın kontentdən ibarət müstəqil bölməsini ifadə edir. Bloq yazısı, məqalə, şərhlər, elektron ticarət saytında məhsulu göstərmək üçün bu elementdən istifadə edilə bilər.

Hər bir <article> elementinin içərisində mütləq başlıq elementi (<h1> - </h6>) istifadə edilməlidir. Bu elementin içərisində <main> elementi istifadə edilə bilməz. Məsələn:

<!DOCTYPE html>
<html lang="az">
    <head>
        <meta charset="UTF-8">
        <title>Hava proqnozu</title>
    </head>

    <body>
        <h1>Şəhərlər üzrə hava proqnozu</h1>

        <article>
            <h2>Bakı şəhəri, 2023-cü il</h2>

            <section>
                <h3>26 noyabr</h3>
                <p>Günəşli</p>
            </section>

            <section>
                <h3>27 noyabr</h3>
                <p>Günəşli</p>
            </section>

            <section>
                <h3>28 noyabr</h3>
                <p>Yağışlı</p>
            </section>
        </article>
    </body>
</html>

Brauzerdə görünüş: