HTML dilinin əsasları

• HTML nədir
• HTML elementlərinin strukturu
  • Tək teqdən ibarət olan elementlər
  • İç-içə yerləşən elementlər
  • Blok və sətir elementləri
• Atributlar
  • Tək və ya cüt dırnaq işarəsi?
• HTML sənədinin strukturu
• İlk HTML səhifəmizi yaradırıq
  • HTML-də boşluq simvolları
• HTML-də xüsusi simvollar
• HTML şərhlər

Sayt hazırlamaq üçün veb səhifənin strukturunu formalaşdıran HTML texnologiyasını öyrənmək lazımdır. Paraqraf, siyahı, başlıq, bağlantı, şəkil, media pleyer, forma və digər HTML elementlərinin köməyilə hazırlanmış kontent brauzer tərəfindən "oxunur" və istifadəçiyə göstərilir. Məhz brauzer HTML teqlərini "başa düşür".

Bu dərsdə HTML dilinin əsasları (elementlər, atributlar, teqlər və digərləri) haqda məlumat verilir.

HTML nədir?

HTML - bu, veb səhifələrin strukturunu formalaşdırmaq üçün istifadə olunan texnologiyadır.

HTML elementlərinin strukturu

Elementin strukturu aşağıdakı kimidir:

1. Açılan teq: bucaqşəkilli mötərizələrin içərisində yerləşdirilmiş elementin adından (yuxarıdakı nümunədə <p>) ibarətdir. Bu teq elementin başlanğıcını ifadə edir
2. Bağlanan teq: açılan teqə oxşayır, lakin bağlanan teqin adının qarşısında sleş (/) simvolu qoyulur, elementin sonunu ifadə edir. Yeni öyrənməyə başlayanalar çox vaxt bağlanan teqin yazılmasını unudurlar, bu, geniş yayılmış səhvlərdən biridir
3. Kontent: yuxarıdakı nümunədə Mənim pişiyim çox acıqlıdır mətni kontentdir
4. Element: açılan teq + bağlanan teq + kontent = element

Yuxarıdakı şəkildə <p> açılan teqi "deyir": "Paraqraf başlayır", </p> bağlanan teqi isə "deyir":  "Paraqraf bitdi". <p> və </p> teqləri arasında yazılmış mətn - bu, kontentdir və o, brauzerdə göstərilir.

Tək təqdən ibarət olan elemenlər

Lakin bəzi elementlər yuxarıda göstərilən şablona (açılan teq + bağlanan teq + kontent) uyğun gəlmirlər, onlar yalnız bir teqdən ibarətdirlər. Məsələn, səhifəyə şəkil yerləşdirməyə imkan verən <img> elementi:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Yuxarıdakı kod brauzerdə aşağıdakı şəkli göstərir:

İç-içə yerləşən elementlər

Elementlər digər elementlərin içərisinə yerləşdirilə bilər və bu, iç-içə yerləşdirmə adlanır. Biz pişiyimizin çox acıqlı olduğuna diqqət çəkmək üçün çox sözünü <strong> elementinin içərisində yerləşdirə bilərik. Bu halda brauzer həmin sözü qalın şriftlə göstərir:

<p>Mənim pişiyim <strong>çox</strong> acıqlıdır.</p>

Elementlərin iç-içə düzgün yerləşdirilməsinə əmin olmaq lazımdır: yuxarıdakı nümunədə birinci <p>, sonra isə <strong> teqlərini açırıq, daha sonra birinci </strong>, sonda isə <p> teqlərini bağlayırıq.

Aşağıdakı yazılış səhvdir:

<p>Mənim pişiyim <strong>çox</p> acıqlıdır.</strong>

Buna görə brauzer yuxarıdakı HTML kodunu gözlənildiyi kimi göstərməyəcək.

Blok və sətir elementləri

HTML-də iki vacib element kateqoriyası vardır: blok və sətir elementləri

• Blok səviyyəli elementlər (Block level) - özündən əvvəl gələn istənilən kontentdən sonra yeni bir sətirdə yerləşir və ondan sonra gələn hər hansı bir kontent, həmçinin yeni bir sətirdən başlayır. Blok elementlərini sətir elementlərin içərisinə yerləşdirmək düzgün deyil, amma bəzən digər blok səviyyəli elementlərin içərisində yerləşdirilə bilər
• Sətir elementləri (Inline level) səhifədə yeni bir sətir formalaşdırmır və blok elementlərinin içərisində yerləşdirilir

Əsas blok elementləri aşağıdakılardır:

• <div> elementi
• başlıqlar (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>)
• paraqraf (<p>)
• siyahı (<ul>, <ol>, <li>)

Tez-tez istifadə olunan sətir elementləri aşağıdakılardır:

• <span>
• <a>
• <em>, <strong>

Aşağıdakı nümunəyə baxaq:

<em>Birinci</em><em>ikinci</em><em>üçüncü</em>

<p>dördüncü</p><p>beşinci</p><p>altıncı</p>

Nəticə:

Birinciikinciüçüncü

dördüncü

beşinci

altıncı

<em> sətir elementidir və ilk üç element aralarında heç bir boşluq olmadan eyni sətirdə yerləşir. Digər tərəfdən, <p> blok elementidir. Hər bir <p> elementi yeni sətirdə yerləşir, aşağıdan və yuxarıdan müəyyən məsafə saxlanılır.

Aşağıdakı şəkil blok və sətir elementləri arasındakı fərqi daha yaxşı izah edir:

Atributlar

Elementlər, həmçinin atributa malik ola bilərlər:

Atributlar element haqda əlavə məlumat verirlər. Atribut yalnız açılan teqə tətbiq olunur.

Yuxarıdakı nümunədə class atributunun köməyilə <p> elementinə identifikasiya adı təyin edilir. Sonradan həmin identifikasiya adının köməyilə <p> elementinin stilini dəyişmək olar.

İnternetdə bir səhifədən digərinə keçid etmək üçün bağlantılardan istifadə edilir:

<a>veb proqramlaşdırma dərsləri</a>

Təəssüf ki, brauzer hələ ki fikirlərimizi oxuya bilmir və ona görə istifadəçiləri hansı səhifəyə yönəltmək istədiyimizi özü təyin edə bilmir. Brauzerə kömək etməliyik. İstifadəçi veb proqramlaşdırma dərsləri bağlantısına sıxdıqda onu lazımi səhifəyə yönəltmək üçün href atributundan istifadə edilir. href atributuna keçid etmək istədiyimiz səhifənin URL ünvanını yazırıq:

<a href="https://vebkurs.info">veb proqramlaşdırma dərsləri</a>

Atributlardan istifadə edərkən aşağıdakı qaydalara riayət etmək lazımdır:

• Elementin adı ilə atribut arasında boşluq simvolu olmalıdır
• Atributun adından sonra bərabərlik işarəsi gəlməlidir
• Atributun qiyməti dırnaq işarəsi arasında yazılmalıdır

Tək və ya cüt dırnaq işarəsi?

Bu dərsdə bütün atributlar cüt dırnaq işarəsi içərisində yazılıb. Lakin digər veb səhifələrdə atributlar tək dırnaq işarəsi içərisində də yazıla bilərlər. Bu, şəxsi seçimdir. Məsələn, aşağıdakı hər iki sətir eynidir:

<a href='https://www.example.com'>A link to my example.</a>

<a href="https://www.example.com">A link to my example.</a>

Tək və cüt dırnaq işarələrini bir-birinə qarışdırmayın. Aşağıdakı nümunədə tək və cüt dırnaq işarələri bir-birinə qarışdırılıb. Belə yazılış səhvdir:

<a href="https://www.example.com'>A link to my example.</a>

HTML sənədinin strukturu

HTML elementlərinin birgə istifadəsi HTML səhifə formalaşdırır:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>Səhifənin adı</title>
</head>

<body>
    Burda kontent yerləşir
</body>
</html>

1. <!DOCTYPE html>: Bu, document type (sənədin tipi) ifadəsinin qısaltmasıdır. Obrazlı şəkildə izah etsək, <!DOCTYPE html> brauzerə "deyir": "zəhmət olmasa, səhifəni standart rejimdə aç". Bu, müasir HTML üçün yeganə standartdır və sənədin birinci sətrində yazılmalıdır
2. <html></html>:  Səhifənin kontenti məhz bu elementin içərisində yerləşdirilir. Bu elementə aid olan lang atributunun köməyilə brauzerlər müxtəlif dillərdə mövcud olan bir çox xüsusi simvolları düzgün "tanıyırlar". lang atributu veb səhifənin dilini təyin edilir. Məsələn, azərbaycan dili üçün bu - lang="az", ingilis dili üçün - lang="en" olacaq
3. <head></head>: Bu elementin içərisində brauzer və axtarış sistemləri üçün faydalı köməkçi informasiya yerləşdirilir. Köməkçi informasiya dedikdə açar sözlər, səhifənin qısa təsviri, CSS fayl üçün bağlantı, səhifə üçün ikonkalar, metaverilənlər və digər məlumatlar nəzərdə tutulur. Axtarış sistemləri bu informasiyanı oxuyur və çoxsaylı alqoritmləri sayəsində müvafiq saytın axtarış nəticələrindəki mövqeyini təyin edir
4. <meta charset="utf-8">: Tək teqdən ibarət olan bu element HTML sənədinə dünya dillərinin əlifabasını əlavə edir. Müxtəlif dillər üzrə lazımi simvolların əksəriyyəti UTF-8 kodlaşdırmasına daxildir. Bu element yazılmadıqda brauzer standart latın əlifbasına daxil olmayan simvolları düzgün göstərməyə bilər
5. <title></title>: Veb səhifənin adı bu elementin içərisində yerləşdirilir və brauzerdə görsənir
6. <body></body>: Səhifənin kontenti (mətn, şəkil, video, oyunlar, səs yazıları və sairə) bu elementin içərisində yerləşdirilir

İlk HTML səhifəmizi yaradırıq

HTML kodunu yazmaq üçün Notepad++ redaktorundan istifadəni tövsiyə edirəm. Bu redaktoru burdan yükləyə bilərsiniz.

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

• D:\ diskində html qovluğu yaradırıq
• html qovluğunun içərisində start qovluğu yaradırıq
• start qovluğunun içərisində isə index.html faylı yaradırıq

Notepad++ redaktorunda index.html faylının kodlaşdırmasını UTF-8 təyin edirik:

İndi isə bu kodu index.html faylına əlavə edirik:

Faylı yadda saxlayırıq (CTRL + S) və onu brauzerdə açırıq:

Təbrik edirəm, ilk HTML səhifəniz hazırdır!.

HTML-də boşluq simvolları

Diqqət etsəniz, yuxarıdakı nümunələrdə HTML kodda çoxlu sayda boşluq simvollarından istifadə edilib. Aşağıdakı hər iki kod fraqmenti eynidir:

<p id="noWhitespace">Dogs are silly.</p>

<p id="whitespace">Dogs
    are
        silly.</p>

HTML elementinin içərisində çoxlu sayda boşluq simvolundan istifadə edilməsindən asılı olmayaraq, brauzer HTML kodunu təhlil edir və yalnız 1 boşluq simvolu saxlayır. Bəs nə üçün kodda çoxlu sayda boşluq simvolundan istifadə etməliyik? Ona görə ki bu halda kod daha oxunaqlıdır.

Brauzer yuxarıdakı hər iki kod fraqmentini eyni cür göstərir:

Dogs are silly.

Dogs are silly.

HTML-də xüsusi simvollar

HTML-də <, >, ", ' və & simvolları xüsusi simvollardır. Bəs bu xüsusi simvolları mətndə necə yerləşdirmək olar? Bunun üçün xüsusi simvolları əks etdirən xüsusi kodlardan istifadə etmək lazımdır. Hər bir xüsusi kod ampersand (&) işarəsi ilə başlayır və nöqtəli vergüllə (;) bitir:

Xüsusi simvol	Xüsusi kod
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

HTML şərhlər

HTML-də koda şərh yazmaq mexanizmi mövcuddur. Koda yazılan şərhlər istifadəçilərə görsənmir, onlar veb tərtibatçıya kömək məqsədi daşıyır. Müəyyən vaxtdan sonra koda düzəliş etmək lazım gəldikdə, yaxud layihə başqa şəxsə təhvil verildikdə bu şərhlər kömək edə bilər.

HTML şərh yazmaq üçün onu <!-- və --> xüsusi markerləri arasında yerləşdirmək lazımdır. start qovluğunun içərisində comments.html faylı yaradırıq və aşağıdakı kodu ona əlavə edirik:

<!DOCTYPE html>
<html lang="az">
<head>
    <meta charset="utf-8">
    <title>HTML koda şərh yazmaq</title>
</head>

<body>
  <!-- Kontent hissə -->
  Burda kontent yerləşir
</body>
</html>

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

Göründüyü kimi şərh brauzerdə görsənmir.

Dərsin kodlarını github-dan köçürə bilərsiniz.