9.1 Blok Elementlər
HTML Blok Modeli — HTML elementlərinin sənəd içindəki strukturunu və görüntülənməsini təsvir edən bir konsepsiyadır. Bu, tərtibatçılara elementlərin bir-biri ilə necə qarşılıqlı əlaqə qurduğunu və səhifədə necə yerləşdiğini başa düşməyə kömək edir. Blok modelini anlamaq, strukturlu və estetik baxımdan cəlbedici veb səhifələr yaratmaq üçün vacibdir.
HTML Blok Modeli iki əsas element növündən ibarətdir: blok və sətir. Bu elementlər veb səhifələrin tərtibatında əsas rol oynayır.
Blok elementlər
| HTML Tag | Təsviri |
|---|---|
<div> |
Digər elementləri qruplaşdırmaq üçün əsas konteyner. |
<p> |
Mətn paraqrafı. |
<h1> – <h6> |
Müxtəlif səviyyəli başlıqlar. |
<ul>, <ol> |
Sırasız və sıralı siyahılar. |
<li> |
Siyahı elementi. |
<section> |
Sənədin bölməsi üçün semantik konteyner. |
<article> |
Müstəqil məzmun bloku. |
<aside> |
Əsas məzmunla əlaqəli məzmun (yan panel). |
<header> |
Səhifənin və ya bölmənin giriş və ya naviqasiya hissəsi. |
<footer> |
Səhifənin və ya bölmənin alt hissəsi. |
<nav> |
Naviqasiya linkləri. |
<main> |
Sənədin əsas məzmunu. |
Blok elementi nümunəsi:
<div>
<h1>Başlıq</h1>
<p>Bu, div blok elementi daxilində bir mətn paraqrafıdır.</p>
</div>
9.2 Sətir elementi
Sətir elementi (inline-level elements) məzmunu üçün yalnız lazım olan eni tutur və yeni sətirdən başlamır. Onlar yalnız sətir elementi və ya mətn daxil edə bilər. Sətir elementlərinə nümunələr:
| HTML Tag | Təsvir |
|---|---|
<span> |
Sətir məzmununu qruplaşdırmaq üçün əsas konteyner. |
<a> |
Hiperlink. |
<strong>, <b> |
Mətnin vurğulanması (qalın şrift). |
<em>, <i> |
Mətnin vurğulanması (kursiv). |
<img> |
Şəkillərin daxil edilməsi. |
<code> |
Kodun vurğulanması. |
<label> |
Label ilə form elementi arasındakı əlaqə. |
<input>, <select>, <textarea> |
Form elementləri. |
Sətir elementinə nümunə:
<span>Bu, <strong>qalın mətn</strong> və <em>kursivlə</em> olan bir paraqrafdır.</span>
9.3 Blok Modelinin Tərkib Hissələri
Blok modelində hər bir elementi aşağıdakı hissələrdən ibarət olan düzbucaqlı blok şəklində təqdim etmək olar:
- Məzmun (Content): elementin daxilindəki məzmun, məsələn, mətn və ya şəkil
- Daxili boşluq (Padding): məzmun və elementin sərhədi arasındakı boşluq
- Sərhəd (Border): daxili boşluğu və məzmunu əhatə edən xətt
- Xarici boşluq (Margin): elementin sərhədi ilə qonşu elementlər arasındakı boşluq
Blok modelinin vizuallaşdırılması:
.element {
width: 200px; /* Məzmunun eni */
padding: 10px; /* Daxili boşluq */
border: 2px solid red; /* Sərhəd */
margin: 20px; /* Xarici boşluq */
}
Blok modelinin HTML misalı:
Bu nümunədə "box" sinifi ilə <div> elementi 200px eni, 10px daxili boşluq, 2px sərhəd və 20px xarici boşluğa malikdir. Bu xüsusiyyətlər onun səhifədə necə göründüyünü və digər elementlərlə necə qarşılıqlı əlaqədə olduğunu müəyyən edir.
.box {
width: 200px;
padding: 10px;
border: 2px solid red;
margin: 20px;
}
<div class="box">
Bu blok modelinin nümunəsidir.
</div>
GO TO FULL VERSION