Dərslər
Başlamaq
Öyrənməyə başlayın
CodeGym /Kurslar /Python SELF AZ /HTML ilə tanışlıq

HTML ilə tanışlıq

Python SELF AZ
Səviyyə , Dərs
Mövcuddur

1. HTML-də Teyq-lər

HTML nədir?

HTML (HyperText Markup Language) — bu, veb-səhifələrin yaradılması və strukturlaşdırılması üçün istifadə olunan işarələmə dilidir. HTML vasitəsilə biz səhifənin məzmununu təşkil edə bilərik və fərqli teyg-lər və atributlardan istifadə edərək brauzerə məlumatın necə göstəriləcəyini bildirmiş oluruq. Bu mühazirədə HTML-in əsas anlayışlarını, məsələn, teyg-ləri, teyg-lər ağacını, atributları, tək teyg-ləri və HTML sənədinin strukturunu müzakirə edəcəyik.

HTML-də teyg-lər — məzmunu işarələməyə imkan verən əsas elementlərdir. Onlar mətnləri və digər elementləri əhatə edir, brauzerin onları necə göstərməsini anlamasına kömək edir. Məsələn, <h1> və <p> teyg-ləri brauzerə onların daxilindəki mətnin başlıq və ya abzas olduğunu bildirir.

Teyg-lər bucaq mötərizələrinin içində yazılır <>. Çox vaxt teyg-lər açılır və bağlanır, yəni başlanğıc və son teyg-dən ibarət olur. Məsələn:

HTML 
                      
                        <h1>Bu başlıqdır</h1>
                        <p>Bu mətn abzasıdır.</p>

Burada <h1> — başlanğıc teyg-dir, </h1> isə son teyg-dir.

Teyg ağacı

HTML sənədi bir iyerarxik struktura malikdir, burada teyg-lər bir-birinə daxildir və ağac formasında bir struktur yaradır. Bu «teyg ağacı» səhifədəki elementlərin bir-biri ilə necə bağlı olduğunu və hansı ardıcıllıqla göstəriləcəyini müəyyən edir.

Bax burada sadə bir teyg ağacı nümunəsi:

Python 

<html>
<head>
  <title>Səhifə nümunəsi</title>
</head>
<body>
  <h1>Səhifə başlığı</h1>
  <p>Burada abzas mətni yerləşir.</p>
</body>
</html>

Bu nümunədə <html> teyg-i kök elementdir, onun daxilində <head> və <body> yerləşir. <body>-nin daxilində isə <h1> və <p> teyg-ləri yerləşir. Bu struktur səhifənin məzmununu məntiqi olaraq təşkil etməyə imkan verir.

Atributlar

HTML-də atributlar teyg-lərə əlavə məlumatlar əlavə etmək üçün istifadə olunur. Onlar başlanğıc teyg-də yerləşir və ad və dəyərdən ibarətdir. Məsələn:

HTML 

<a href="https://example.com">Sayta keçid</a>
<img src="image.jpg" alt="Şəkilin təsviri">
  • href keçidin ünvanını göstərir.
  • src — şəkilə olan yol.
  • alt — şəkil yüklənmədikdə görünəcək alternativ mətn.

Atributlar elementlərə əlavə xüsusiyyətlər əlavə etməyə imkan verir, məsələn, identifikator (id), siniflər (class), stillər (style) və daha çox.

Tək teyg-lər

Bəzi HTML teyg-ləri daxili məzmuna malik deyil və bağlanma teyg-inə ehtiyac duymur. Belə teyg-lərə «tək teyg-lər» deyilir. Məsələn, <img> teyg-i şəkili yerləşdirmək üçün istifadə olunur, və onun strukturu belədir:

CSS 
  
    <img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Şəkilin təsviri">
HTML 
  
    <img src="image.jpg" alt="Şəkilin təsviri">

Başqa tək teyg-lər nümunələri:

  • <br> — sətrin keçidi üçün.
  • <hr> — üfüqi xətt əlavə etmək üçün.

2. HTML sənədi ilə tanışlıq

HTML sənədi hər zaman <!DOCTYPE html> ilə başlayır, bu isə brauzerə bu sənədin HTML5 olduğunu bildirir. Daha sonra isə əsas <html> etiketi gəlir, bu etiketi isə <head> və <body> etiketi izləyir. <head> etiketi sənədin metadata məlumatlarını (başlıq, stillər, skriptlər), <body> isə səhifənin əsas məzmununu ehtiva edir.

HTML sənədindən nümunə

Python 
      
        <!DOCTYPE html>
        <html lang="az">
        <head>
          <meta charset="UTF-8">
          <title>Mənim ilk səhifəm</title>
        </head>
        <body>
          <h1>Xoş gəlmisiniz!</h1>
          <p>Bu HTML sənədinin nümunəsidir.</p>
          <a href="https://example.com">Bizim saytı ziyarət edin</a>
        </body>
        </html>
  • <!DOCTYPE html> brauzerə bu sənədin HTML5 formatında olduğunu bildirir.
  • <html lang="az"> sənədin dilini göstərir.
  • <meta charset="UTF-8"> kodlaşdırmanı təyin edir ki, simvollar düzgün görünsün.
  • <title> səhifənin adını təyin edir, bu ad brauzerin başlığında görünəcək.

<head> daxilində əlavə etiketlər

<head> etiketi səhifədə birbaşa göstərilməyən, lakin sayt üçün vacib olan məlumatları özündə saxlayır. <head> daxilində aşağıdakı etiketləri əlavə edə bilərsiniz:

  • <meta name="description" content="Səhifənin təsviri"> — axtarış sistemləri üçün səhifənin qısa təsviri.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> — saytın mobil cihazlar üçün uyğunlaşmasını təmin edir.
  • <link rel="stylesheet" href="styles.css"> — CSS faylını qoşmaq üçün istifadə olunur.
  • <script src="script.js"></script> — xarici JavaScript faylını qoşmaq üçün istifadə olunur.

Bu etiketlər istifadəçi təcrübəsini yaxşılaşdırmağa, səhifəni axtarış sistemləri üçün optimallaşdırmağa və zəruri resursları qoşmağa kömək edir.

Şərhlər
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION