Codecourse

HTML-in əsasları

Redaktə edilib:

Bu yazıda HTML dili ilə işləmək üçün onun əsaslarına ("elementlər", "atributlar", "teqlər" və digər vacib anlayışlar) nəzər salacağıq.

HTML nədir?

HTML (HyperText Markup Language - hipermətn nişanlama dili) proqramlaşdırma dili deyil; bu, istifadəçilərin daxil olduğu veb səhifələrin strukturunu təyin etmək üçün istifadə olunan nişanlama dilidir. Veb səhifələrin strukturu mürəkkəb və ya sadə ola bilər, bu, veb tərtibatçının istəyindən asılıdır. HTML, məzmunun müəyyən bir görünüşə malik olması üçün onun müxtəlif hissələrini əhatə etmək və ya nişanlamaq üçün istifadə etdiyiniz bir sıra elementlərdən ibarətdir. Teqlər məzmunun bir hissəsini digər veb səhifəyə keçməyə imkan verən istinada çevirə, sözü maili edə bilər və sairə. Məsələn, aşağıdakı sətri nəzərdən keçirin:

Mənim pişiyim çox acıqlıdır.

Sətri olduğu kimi saxlamaq üçün biz onu paraqraf (<p>) elementi daxilində göstərməklə onu paraqraf kimi təyin edə bilərik:

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

HTML-də teqlər registrə həssas deyillər, yəni onlar kiçik və ya böyük hərflərlə yazıla bilərlər. Məsələn, <title> teqi <title>, <TITLE>, <Title>, <TiTLe> kimi yazıla bilər və bu halda normal işləyəcək. Lakin bütün teqlərin kiçik hərflərlə yazılması yaxşı təcrübə sayılır.

HTML elementinin strukturu

Gəlin paraqraf elementini bir qədər daha yaxşı araşdıraq:

HTML elementin strukturu

Elementin əsas hissələri aşağıdakılardır:

1. Açılan teq: Bucaqşəkilli mötərizələr daxilində yerləşdirilmiş elementin adından (bizin nümunədə p) adından ibarətdir. Bu teq elementin başlanğıc əlaməti kimi ifadə olunur, bu andan etibarən teq ondan sonra gələn kontentə öz təsirini göstərir.

2. Bağlanan teq: açılan teq kimidir, lakin teqin adından əvvəl sleş ("/") simvolu var. Elementin sonunu ifadə edir. Bağlanan teqin yaddan çıxarılması yeni öyrənməyə başlayanlar tərəfindən yol verilən geniş yayılmış səhvlərdən biridir və bu, qeyri-müəyyən nəticələrə səbəb ola bilər.

3. Kontent: Bizim nümunədə kontent sadə bir mətndir.

4. Element: açılan teq + bağlanan teq + kontent = element

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

Siz, həmçinin elementləri digər elementlərin içərisinə yerləşdirə bilərsiniz - bu, iç-içə yerləşdirmə adlanır. Pişiyimizin çox acıqlı olduğunu vurğulamaq üçün biz "çox" sözünü <strong> elementinin daxilində yerləşdirə bilərik və bu, həmin sözün baxdığımız kontekstdə son dərəcə vacib olduğunu bildirir:

<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: biz yuxarıdakı nümunədə birinci p elementini, sonra isə strong elementini açırıq, daha sonra birinci strong elementini, bundan sonra isə p elementini bağlayırıq. Aşağıdakı yazılış qaydası səhvdir:

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

Blok və sətir elementləri

HTML-də bilməli olduğunuz iki vacib element kateqoriyası var: blok səviyyəli elementlər və sətir elementlər.

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>

<em> sətir elementidir, buna görə aşağıda gördüyünüz kimi ilk üç element aralarında boşluq olmadan eyni sətirdə yerləşir. Digər tərəfdən, <p> blok səviyyəli elementdir, buna görə hər bir element yeni sətirdə yerləşir.

Birinciikinciüçüncü

dördüncü

beşinci

altıncı

Boş elementlər

Bütün elementlər yuxarıda göstərilən şablona (açılan teq, kontent, bağlanan teq) uyğun deyil. Bəzi elementlər yalnız bir teqdən ibarətdir və adətən sənədə nəsə yerləşdirmək üçün istifadə olunur. Məsələn, <img> elementi səhifəyə şəkil əlavə edir:

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

Bu kod səhifəyə aşağıdakı şəkli çıxardacaq:

Atributlar

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

Atributlar element haqqında əlavə məlumatları özündə saxlayır. Yuxarıdakı şəkildə class atributu elementə identifikasiya adı təyin etməyə imkan verir ki, bu da sonradan stil haqqında məlumatla bağlı elementə müraciət üçün istifadə edilə bilər.

Atribut aşağıdakı qaydaları nəzərdə tutur:

1. Elementin adı və atribut arasında boşluq simvolu.

2. Atributun adı və ondan sonra gələn bərabərlik işarəsi.

3. Dırnaq işarəsi arasında yazılmış atributun qiyməti.

Məntiqi atributlar

Bəzən qiyməti olmayan atributlar görəcəksiniz - bu, tamamilə mümkündür. Boolean adlandırılan bu cür atributlar yalnız bir qiymətə malik ola bilərlər ki, bu da çox vaxt atributun adı ilə eyni olur. Nümunə olaraq, daxiletmə elementini (input) deaktiv etmək üçün təyin edilən disabled atributunu nəzərdən keçirək:

<input type="text" disabled="disabled">

Sintaksisi qısaltmaq üçün aşağıdakı kimi yazmaq mümkündür (baş verənləri daha yaxşı anlamağınız üçün, həmçinin deaktiv edilməmiş daxiletmə elementi yerləşdirilib):

<input type="text" disabled>

<input type="text">

Nəticə:

218 baxış

Şərhlər: