HTML

HTML-də şəkillər

müəllif Emil Hüseynov

İlk vaxtlar veb yalnız mətndən ibarət idi və bu, çox darıxdırıcı idi. Bir müddət sonra veb səhifələrə şəkillər əlavə etmək imkanı əlçatan oldu.

Şəkli veb səhifədə necə yerləşdirək?

<img> teqi vasitəsilə şəkli veb səhifədə yerləşdirə bilərik. Teqin bir əsas atributu var: src (es-ar-si kimi tələffüz olunur, tam adı source-dur). src atributu şəklin yerləşdiyi yerin ünvanını göstərmək üçün lazımdır. Həmin URL ünvanlar tam və ya nisbi ola bilərlər. Şəklin veb səhifəyə əlavə edilməsi sintaksisi aşağıdakı kimidir:

<img src="image.jpg">

İndi isə aşağıdakı addımları ardıcıllıqla icra edirik:

  • html qovluğunda images_in_htmlqovluğu yaradırıq
  • images_in_html qovluğunun içərisində images qovluğu və images.html faylı yaradırıq
  • Bu şəkli images qovluğuna köçürürük

images.html faylını Notepad++ redaktorunda açırıq, aşağıdakı HTML kodunu ona əlavə edirik və yadda saxlayırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>    
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="images/mickey-mouse.png">
</body>
</html>

Faylı brauzerdə açırıq:

Şəklin veb səhifədə yerləşdirilməsi

Şəkli veb səhifədə yerləşdirmək üçün, həmçinin tam URL ünvandan istifadə edə bilərik:

<img src="https://vebkurs.info/uploads/mickey-mouse.png">

images.html faylını Notepad++ redaktorunda açırıq, src atributunda tam URL ünvan göstəririk və dəyişikliyi yadda saxlayırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="https://vebkurs.info/uploads/mickey-mouse.png">
</body>
</html>

Faylı brauzerdə açırıq:

Şəklin veb səhifədə yerləşdirmək üçün tam URL ünvandan istifadə edilməsi

Şəkli veb səhifədə yerləşdirmək üçün src atributunda həm nisbi, həm də tam URL ünvanlardan istifadə etdik. Göründüyü kimi nəticə eynidir. Lakin tam URL ünvandan istifadə zamanı brauzer hər dəfə DNS serverdən IP ünvanı sorğulayır ki, bu da vaxt itkisinə səbəb olur. Əksər hallarda sayt üçün şəkillər digər fayllarla birgə eyni serverdə yerləşir, ona görə nisbi URL ünvanlardan istifadəyə üstünlük verin.

Alternativ mətn

alt atributunda yazılmış mətn şəkildə nə təsvir edildiyini sözlə ifadə edir. Bəzən hansısa səbəbdən brauzerdə şəkil yüklənmir, bu zaman istifadəçiyə alternativ mətn göstərilir:

<img src="image.jpg" alt="şəklin mətnlə təsvir edilməsi">

İndi images.html faylını Notepad++ redaktorunda açırıq, img teqində alt atributuna mətn yazırıq:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="images/mickey-mouse.png" alt="Mikki Maus">
</body>
</html>

Faylı brauzerdə açırıq:

Alternativ mətn

İlk baxışdan heç bir fərq görsənmir. alt atributunun işini təcrübədə nümayiş etdirməyin ən asan üsulu şəklin adını bilərəkdən səhv yazmaqdır. Şəklin adını mickey-mouse.png kimi deyil, mickey-mous.png kimi yazsaq, brauzer onu göstərməyəcək və alt atributuna yazdığımız mətn istifadəçiyə göstəriləcək:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="images/mickey-mous.png" alt="Mikki Maus">
</body>
</html>

Faylı yenidən brauzerdə açırıq:

Şəklin mətnlə təsvir edilməsi

Beləliklə, alt atributuna yazılmış mətn aşağıdakı hallarda faydalı ola bilər:

  1. Görmə qüsurlu istifadəçilər ekrandan oxuma qurğularından (screen reader) istifadə edirlər. Bu tip qurğular veb səhifədəki elementlərin təsvirini səsləndirirlər
  2. Şəklin adı və ya URL ünvanı səhv yazıldıqda
  3. Brauzer şəklin formatını dəstəkləmədikdə
  4. Saytdakı şəkillərin axtarış sistemləri tərəfindən tapılmasını istədikdə

Şəklin ölçüsü

width və height atributlarının köməyilə şəklin ölçüsünü təyin edə bilərik. width atributu şəklin enini, height atributu isə şəklin hündürlüyünü piksellərlə (px) təyin edir. Bu halda ölçü vahidini - pxyazmaq lazım deyil, brauzer özü "başa düşür". Yuxarıdakı nümunələrdə istifadə etdiyimiz mickey-mouse.png şəklinin ölçüsü 286x348 pikseldir.

images.html faylının HTML kodunda şəklin ölçüsünü təyin edirik:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="images/mickey-mouse.png" 
    alt="Mikki Maus" 
    width="286" 
    height="348">
</body>
</html>

Faylı brauzerdə açırıq:

Şəklin ölçüsünün təyin edilməsi

width və height atributlarının köməyilə şəklin ölçüsünü böyütmək və ya kiçiltmək mümkündür. Ancaq bu, şəklin yüklənmə sürətinə təsir etmir, çünki şəklin real ölçüsü dəyişməz qalır. Bu səbəbdən sözügedən atributların köməyilə şəklin ölçüsünü kiçiltmək istədikdə ehtiyatlı olun, çünki "kiçikölçülü" şəklin gec yüklənməsi istifadəçilərə qəribə gələ bilər. Gəlin bunu təcrübədə sınaqdan keçirək:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

     <img src="images/mickey-mouse.png" 
     alt="Mikki Maus" 
     width="70" 
     height="150">        
</body>
</html>

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

width və height atributlarının köməyilə şəklin ölçüsünü kiçildirik

Göründüyü kimi, width və height atributlarının köməyilə şəklin ölçüsü kiçildilib. Ancaq şəklin real ölçüsü dəyişməz qalıb. Həm də diqqət etsəniz, görərsiniz ki, şəklin tərəflər nisbəti (en və hündürlük) uyğun gəlmir. Ona görə şəklin ölçüsünü düzgün dəyişdirmək üçün qrafik redaktorlardan (Adobe Photoshop, Gimp və sairə) istifadə edin.

Şəkil barədə əlavə informasiya

title atributunun köməyilə şəkil barədə əlavə informasiya vermək mümkündür.

images.html faylının HTML koduna dəyişiklik edirik:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <img src="images/mickey-mouse.png" 
    alt="Mikki Maus" 
    width="286" 
    height="348"
    title="Mikki Maus - cizgi filmi personajıdır">
</body>
</html>

Faylı brauzerdə açırıq (mausu şəklə yaxınlaşdırıb bir qədər saxladıqda title atributuna yazdığımız əlavə informasiya görsənir):

şəkil barədə əlavə informasiya

Şəkil üçün semantik konteyner və başlıq

Şəklə başlıq əlavə etmək üçün ən yaxşı variant HTML elementlərindən - <figure> və <figcaption> istifadə etməkdir. images.html faylının koduna dəyişlik edirik:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML-də şəkillər</title>
</head>

<body>
    <h1>Mikki Maus</h1>
    <p>Cizgi filmi personajıdır. İlk dəfə 15 may 1928-ci ildə yaradılıb. <br>
        Yaradıcıları Ab Ayverks və Volt Disneydir.</p>

    <figure>
        <img src="images/mickey-mouse.png" 
        alt="Mikki Maus" 
        width="286"
        height="348"
        title="Mikki Maus - cizgi filmi personajıdır">

        <figcaption>Mikki Maus - cizgi filmi personajıdır</figcaption>
    </figure>
</body>
</html>

Faylı brauzerdə açırıq:

şəkil üçün başlıq əlavə edilməsi

Gec yüklənmə texnologiyası - loading atributu

Brauzerlər səhifənin HTML kodunu "oxuyur" və <img> teqində göstərilmiş bütün şəkilləri dərhal yükləyirlər. Lakin bəzən səhifədə çoxlu şəkil yerləşdirilir və brauzerə hansısa yolla bildirmək lazımdır ki, bax, bu şəkilləri hələ ki yükləmə, çünki istifadəçi onları görmür. İstifadəçi səhifəni aşağıya doğru sürüşdürüb şəkilləri gördükdə, onları göstərərsən. Bu halda səhifədəki bütün şəkillər dərhal deyil, yalnız onlara ehtiyac olduqda yüklənir. Bu, məhsuldarlığı yüksəltməyə və qurğunun resursuna qənaət etməyə imkan verir.

şəklin gec yüklənməsi

Yuxarıdakı nümunədə iki vəziyyət göstərilib. Birinci vəziyyətdə loading atributu istifadə edilməyib və səhifədəki bütün şəkillər (10 MB) dərhal yüklənib. İkinci vəziyyətdə isə loading atributu istifadə edilib və səhifədə yalnız istifadəçiyə görsənən şəkillər (250 KB) yüklənilib. İstifadəçi səhifəni aşağıya doğru sürüşdürdükcə digər şəkillər də yüklənəcək.

loading atributu aşağıdakı qiymətləri ala bilər:

  • eager- şəkillər dərhal yüklənir. Bu standart ayardır, ona görə yazılmır
  • lazy - istifadəçi səhifəni aşağıya doğru sürüşdürdükcə şəkillər yüklənir

Dərsin kodunu github-dan  köçürə bilərsiniz.

1

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