HTML

HTML-də mətnlə işləmək

müəllif Emil Hüseynov

HTML-in əsas vəzifəsindən biri mətnin strukturunu və semantikasını elə təyin etməkdir ki, brauzer onu düzgün göstərə bilsin.

Başlıq və paraqraflar

Bir çox strukturlaşdırılmış mətnlər (hekayə, qəzet, dərslik, jurnal və sairə) başlıq və paraqraflardan ibarətdirlər:

qəzetdə başlıq və paraqraflardan istifadə

Strukturlaşdırılmış kontent daha rahat oxunuşu təmin edir.

Məntin əsas hissəsi paraqraflardan ibarət olur. Paraqraflar <p> elementinin içərisində yazılır:

<p>Mən paraqrafam, bəli, bu, mənəm.</p>

Başlıq <h1> elementinin içərisində yazılır:

<h1>Mən hekayənin başlığıyam.</h1>

6 başlıq elementi vardır: <h1>, <h2>, <h3>, <h4>, <h5> və <h6>. Hər bir element sənəddə müxtəlif kontent səviyyəsini ifadə edir; <h1> əsas başlığı, <h2> yarımbaşlığı ifadə edir və bu ardıcıllıqla davam edir. Veb səhifədə yalnız bir <h1> elementindən istifadə edilməlidir. <h2>, <h3> yarımbaşlıqları mətni məntiqi cəhətdən bir-birilə bağlı hissələrə bölmək üçün istifadə olunur.

<h4>, <h5>, <h6> elementləri az istifadə olunur, mətnin strukturlaşdırılması üçün adətən ilk üç başlıq elementi - <h1>, <h2>, <h3> kifayət edir.

Başlıqların düzgün iyerarxiyasına riayət etmək lazımdır, yəni <h1> elementindən sonra birbaşa <h3> istifadə etmək tövsiyə edilmir. <h1> elementindən sonra <h2>, sonra <h3> elementləri gəlməlidir, ardıcıllığa riayət edilməlidir:

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Aşağıdakı kimi düz deyil:

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Ardıcıllıq pozulub. <h1> elementindən sonra <h3> deyil, <h2> elementi gəlməlidir.

İyerarxik struktur yaradırıq

Aşağıdakı addımları ardıcıllıqla yerinə yetiririk:

  • html qovluğunun içərisində text_formatting qovluğu yaradırıq
  • text_formatting qovluğunda text_complete.html faylını yaradırıq

text_complete.html faylını redaktorda açırıq və aşağıdakı HTML kodunu əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Verilənlərin tipi</title>
</head>

<body>
    <h1>Verilənlərin tipi</h1>
    <p>Müəllif: Emil Hüseynov</p>

    <h2>Məntiqi tip (Boolean)</h2>
    <p>Ən sadə verilənlər tipidir. Bu tip ya true (doğru), ya da false (yalan) qiymətlərini ala bilər.</p>

    <h2>Sətir</h2>
    <p>PHP-də sətir (string tipi) baytlar ardıcıllığıdır. Sətrin uzunluğu 2 QB-dan çox ola bilməz.</p>

    <h3>Tək dırnaq işarəsi</h3>
    <p>Tək dırnaq işarəsi içərisində yazılmış sətirdə (məsələn, 'string') dəyişənlər və idarəedici simvollar yazıldığı
        kimi görsənir.</p>
</body>
</html>

text_complete.html faylını brauzerdə açırıq:

iyerarxik struktur

Göründüyü kimi, yuxarıdakı kiçikhəcmli mətndə <h1> mətnin başlığını, <h2> hər bir bölmənin başlığını, <h3> isə hər bir bölmədəki yarımbaşlığı ifadə edir. İyerarxik strukturun yaradılması zamanı aşağıdakı bir neçə yaxşı təcrübəni nəzərə almaq lazımdır:

  • Səhifədə <h1> elementindən yalnız bir dəfə istifadə etmək məqsədəuyğundur - bu, ən əsas başlıq teqidir, digərləri iyerarxiya üzrə ondan aşağıda yerləşirlər
  • Başlıq teqlərinin iyerarxiyasına düzgün riayət etdiyinizə əmin olun. <h1> elementindən sonra <h4> deyil, <h2> elementi gəlməlidir
  • Təcrübədə <h1>, <h2>, <h3> elementləri həmişə, <h4> və <h5> elementləri daha az, <h6> isə çox az halda istifadə olunurlar

İyerarxik struktur nə üçün lazımdır?

Bu suala cavab vermək üçün yuxarıdakı HTML kodunu iyerarxik struktura riayət etmədən yazaq. text_start.html faylı yaradırıq və aşağıdakı HTML kodunu ona əlavə edib yadda saxlayırıq:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Verilənlərin tipi</title>
</head>

<body>
    Verilənlərin tipi
    Müəllif: Emil Hüseynov

    Məntiqi tip (Boolean)
    Ən sadə verilənlər tipidir. Bu tip ya true (doğru), ya da false (yalan) qiymətlərini ala bilər.

    Sətir
    PHP-də sətir (string tipi) baytlar ardıcıllığıdır. Sətrin uzunluğu 2 QB-dan çox ola bilməz.

    Tək dırnaq işarəsi
    Tək dırnaq işarəsi içərisində yazılmış sətirdə (məsələn, 'string') dəyişənlər və idarəedici simvollar yazıldığı
    kimi görsənir.
</body>
</html>

Brauzerdə görünüş:

iyerarxik struktur nə üçün lazımdır

Göründüyü kimi iyerarxik struktur olmadan mətni oxumaq olduqca çətindir və bu halda istifadəçilər çox vaxt saytı tez tərk edirlər. Səhifədə kontentin strukturunu təyin edən elementlər olmadığına görə brauzer mətndə başlıq və paraqrafları ayırd edə bilmir.

Bundan başqa, başlıqların adı axtarış sistemləri tərəfindən vacib açar sözlər kimi qəbul edilir, ona görə mətndə başlıqlardan istifadə edin.

Görmə qabiliyyəti zəif olan insanlar çox vaxt veb səhifələri oxumur, əvəzində screen reader (mətni ekrandan oxuyan proqram) proqram təminatının köməyilə onu dinləyirlər. Həmin proqramın səhifədəki əsas informasiyanı, menyunu, başlıqları və sairə elementləri ayırd edə bilməsi üçün sənədi düzgün strukturlaşdırmaq lazımdır. Bu halda görmə qabiliyyəti zəif olanlar üçün sözügedən qurğu veb səhifəni məntiqi bloklara düzgün şəkildə ayırır və istifadəçilər səhifədən rahat şəkildə istifadə edə bilirlər. Belə konsepsiya Əlçatan Veb adlanır.

Siyahılar

Kontenti səhifədə yerləşdirmək üsullarından biri olan siyahılar bir-birilə bağlı kiçik fraqmentləri qruplaşdırmağa imkan verir.

Nömrələnməmiş siyahılar

Bu tip siyahılarda elementlərin ardıcıllığı heç bir əhəmiyyət kəsb etmir. Hər bir nömrələnməmiş siyahı <ul> (unordered list) elementi ilə başlayır. Siyahının elementləri - süd, yumurta, çörək, şokolad <ul></ul> teqləri içərisində yerləşdirilir:

<ul>
    süd
    yumurta
    çörək
    şokolad
</ul>

Son addım ondan ibarətdir ki, siyahının hər bir elementi <li></li> teqləri içərisində yerləşdirilməlidir:

<ul>
    <li>süd</li>
    <li>yumurta</li>
    <li>çörək</li>
    <li>şokolad</li>
</ul>

Brauzerdə görünüş:

nömrələnməmiş siyahılar

Nömrələnmiş siyahılar

Bu tip siyahılarda elementlərin ardıcıllığı əhəmiyyət kəsb edir. Hər bir nömrələnmiş siyahı <ol> (ordered list) elementi ilə başlayır. Siyahının hər bir elementi <li></li> teqləri içərisində yerləşdirilir:

<p>Uzunluğuna görə dünyanın 5 ən böyük çayı:</p>
<ol>
    <li>Nil</li>
    <li>Amazon</li>
    <li>Yantszı</li>
    <li>Missisipi</li>
    <li>Yenisey</li>
</ol>

Brauzerdə görünüş:

nömrələnmiş siyahılar

Kursiv və qalın şrift

Mətndə hansısa sözü və ya hissəni digərlərindən fərqləndiririk

Biz yazıda sözləri kursivlə yazaraq onları digərlərindən fərqləndiririk. HTML-də hansısa bir sözü və yaxud hissəni kursivlə yazmaq üçün onu <em></em> teqləri içərisində yerləşdirmək lazımdır:

<p>HTML - bu, veb səhifələrin strukturunu formalaşdırmaq üçün istifadə olunan <em>nişanlama dilidir.</em></p>

<em> elementi, həmçinin mətni ekrandan oxuyan proqram tərəfindən fərqli səs tonunda səsləndirilir.

Mətndə vacib söz

Həmçinin yazıda sözün vacibliyini vurğulamaq üçün onu qalın şriftlə yazırıq. HTML-də bu məqsədlə <strong> elementindən istifadə edilir:

<p>İlk öncə qeyd edim ki, <strong>istifadəçilərin şifrələrini verilənlər bazasında heç vaxt açıq şəkildə saxlamayın.</strong></p>

Mətni ekrandan oxuyan proqram təminatı <strong></strong> teqləri içərisində yazılmış sözü, yaxud mətnin hansısa hissəsini fərqli səs tonunda səsləndirir.

Resept səhifəmizi yaradırıq

Biz artıq başlıqlar, paraqraf, siyahılar ilə işləyə, həmçinin mətndə hansısa sözü və ya hissəni kursiv, yaxud qalın şriftlə digərlərindən fərqləndirə bilirik. recipe.html adlı veb səhifədə bu dərsdə öyrəndiyimiz elementlərin bir çoxundan istifadə edilib:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Dovğanın hazırlanması resepti</title>
</head>

<body>
    <h1>Dovğanın hazırlanması resepti</h1>
    <p>Azərbaycanın milli xörəklərindən biridir.</p>

    <p><strong>Lazım olan ərzaqlar:</strong></p>
    <ul>
        <li>3 litr qatıq</li>
        <li>1 ədəd yumurta</li>
        <li>2 xörək qaşığı un</li>
        <li>1/2 stəkan yumru düyü</li>
        <li>4 dəstə göyərti</li>
        <li>duz (<em>zövqə görə</em>)</li>
    </ul>

    <p><strong>Hazırlanma qaydası</strong>:</p>
    <ol>
        <li>Göyərtiləri təmizləyib yuduqdan sonra xırda doğrayırıq.</li>
        <li>Qatığa yuyulmuş düyünü, yumurtanı, unu və az duzu əlavə edib, setka qaşıqla çalırıq.
            Setka qaşıqla çaldıqda qatıq yaxşı açılır.</li>
        <li>Qatığa təxminən öz ölçüsü qədər su tökürük. Hazırladığımız ayranı qazın üstünə qoyuruq. Taxta qaşıqla
            qarışdırırıq.</li>
        <li>Düyü bişəndə ayran yavaş- yavaş qaynamağa başlayanda göyərtini tökürük və qarışdırırıq.</li>
        <li>Göyərtini tökdükdən sonra zövqə görə duzunu da əlavə edirik və təxminən 15-20 dəqiqə də qarışdırıb
            götürürük.</li>
    </ol>

</body>
</html>

Brauzerdə görünüş:

resept səhifəsi

Yeni sətrə keçid və üfüqi ayırıcı

<br> elementi yeni sətrə keçid üçün istifadə edilir:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Azərbaycan şeiri</title>
</head>

<body>

    <p>El bilir ki, sən mənimsən,<br>
        Yurdum, yuvam, məskənimsən,<br>
        Anam doğma vətənimsən!<br>
        Ayrılarmı könül candan?<br>
        Azərbaycan, Azərbaycan!</p>

</body>
</html>

Brauzerdə görünüş:

br elementi

<hr> elementi veb səhifədə üfüqi ayırıcı xətt yaratmaq üçün istifadə edilir:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>hr elementi</title>
</head>

<body>

    <hr>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
        euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
        ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
        ut aliquip ex ea commodo consequat.</p>
    <hr>

</body>
</html>

Brauzerdə görünüş:

hr elementi

Dərsin kodlarını github-dan yükləyə bilərsiniz.

0
Çalışmalara (1) giriş əldə etmək üçün hesabınıza daxil olun.

Şərh yazmaq üçün hesabınıza daxil olun.