Bu dərsdə aşağıdakı şəkildəki kimi sadə bloq veb səhifəsi hazırlayacağıq:
Yuxarıdakı şəkli diqqətlə nəzərdən keçirdikdə, veb səhifənin müəyyən struktura malik olduğu başa düşülür. Strukturlaşdırılmış veb səhifələrdə mətni oxumaq daha rahatdır. Göründüyü kimi, əsas başlıq - Bloq yazıları daha qalın və böyük şriftlə, yarımbaşlıqlar isə nisbətən daha az qalın və nisbətən kiçik şriftlə görsənir. Bundan başqa, hər bir yarımbaşlıqdan sonra abzas və dərc tarixi gəlir.
html qovluğunda blog.html faylını yaradın, sonra "Visual Studio Code" proqramında onu açıb aşağıdakı kodu əlavə edin və yadda saxlayın:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bloq</title>
</head>
<body>
<h1>Bloq yazıları</h1>
<p>Hər kəsi öz bloqumda salamlayıram. Bu veb səhifədə proqramlaşdırmaya aid
yazılarım yerləşdiriləcək.</p>
<h2>Nə üçün Laravel?</h2>
<p>Əvvəllər dinamik veb səhifələrin hazırlanması prosesi indikindən tamamilə
fərqlənirdi. Proqramçı saytın arxitekturasını qurmaqla yanaşı, həm də digər
komponentlərin kodunu yazmaq məcburiyyətində idi.</p>
<p>Hazırda proqramçılar onlarla freymvörkdən istifadə edə bilərlər.</p>
<p><time>2024-09-18</time></p>
<h2>JavaScript-də dəyişənin qiymətinin tipi</h2>
<p>Dəyişənlərə mənimsədilən qiymətin tipi olur. Həmin tipindən asılı olaraq
dəyişənlər üzərində müxtəlif əməliyyatlar aparmaq mümkündür. Riyaziyyat
fənnindən bilirik ki, iki ədədin hasili mümkündür. Bəs iki sətrin hasilini
təsəvvür edirsinizmi?</p>
<p><time>2023-12-03</time></p>
</body>
</html>Bundan sonra faylı brauzerdə aça, yaxud "Visual Studio Code" proqramında Live Server genişlənməsindən istifadə edib nəticəyə baxa bilərsiniz. Nəticə yuxarıdakı şəkildəki kimi olmalıdır.
Göründüyü kimi, kodun əsas hissəsi <body> elementinin içərisində yazılıb, səbəb odur ki, həmin elementin içərisində yazılmış kod brauzerdə görsənir.
Yuxarıdakı nümundə <h1>, <h2>, <p> və <time> elementlərindən istifadə edilib. HTML elementləri brauzerə təlimat verir ki, bax, mətndə bu hissə əsas başlıq, digər hissə abzas və sairə olsun.
Başlıq elementləri
6 başlıq elementi vardır: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Bu elementlər veb səhifədə başlıqları göstərmək üçün istifadə edilir. <h1> əsas başlığı, <h2> yarımbaşlığı göstərmək üçün təyin edilir və bu ardıcıllıqla davam edir.
Veb səhifədə yalnız bir <h1> elementindən istifadə edilməlidir.
Başlıq elementlərinin düzgün istifadəsinə riayət edilməlidir, yəni <h1>-dən sonra <h3> deyil, <h2> elementindən istifadə etmək düzgündür.
Başlıq elementləri həmişə yeni sətirdən göstərilir, ondan əvvəl və sonra müəyyən məsafə saxlanılır.
Bloq veb səhifəsində əsas başlıq üçün <h1> elementi, yarımbaşlıqlar isə <h2> elementindən istifadə edilib.
Abzaslar
<p> elementi veb səhifədə abzas yaradır. HTML kodda hər dəfə bu elementdən istifadə etdikdə brauzerdə mətn yeni sətirdən başlayır.
Bloq yazısının dərc tarixini göstərmək üçün <time> elementindən istifadə edilib. Bundan başqa, <time> elementi <p> elementinin içərisində yerləşdirilib.
Elementlərin iç-içə yerləşdirilməsi
Düzgün yazılış:
<p><time>2023-12-01</time></p>Səhv yazılış:
<p><time>2023-12-01</p></time>Yeni sətrə keçid
Bloq veb səhifəsində Bloq yazıları adlı əsas başlıqla ilk yarımbaşlıq arasındakı məsafə yaxındır. Bu məsafəni bir qədər böyütsək, daha yaxşı olar.
Görəsən HTML standartında elə bir teq mövcuddur ki, brauzerə "əmr" etsin ki, bax, bu hissədə yeni sətrə keçməlisən. Bəli, yeni sətrə keçid üçün <br> elementi mövcuddur. Koda dəyişiklik edin:
<h1>Bloq yazıları</h1>
<p>Hər kəsi öz bloqumda salamlayıram. Bu veb səhifədə proqramlaşdırmaya aid yazılarım yerləşdiriləcək.</p>
<br>Kodun digər hissələri olduğu kimi saxlanılır. Nəticə:
Bloq veb səhifəsinə diqqət yetirsək, görərik ki, hər bir yarımbaşlıq, abzas və tarix sanki bir blok formalaşdırır:
Hər bir blok bir-birindən üfüqi xəttlə ayrılsa, daha yaxşı olar.
Üfüqi xətt
<hr> elementi brauzerdə üfüqi xətt göstərir. Koda dəyişiklik edin:
<h2>Nə üçün Laravel?</h2>
<p>Əvvəllər dinamik veb səhifələrin hazırlanması prosesi indikindən tamamilə
fərqlənirdi. Proqramçı saytın arxitekturasını qurmaqla yanaşı, həm də digər
komponentlərin kodunu yazmaq məcburiyyətində idi.</p>
<p>Hazırda proqramçılar onlarla freymvörkdən istifadə edə bilərlər.</p>
<p><time>2024-09-18</time></p>
<hr>
<h2>JavaScript-də dəyişənin qiymətinin tipi</h2>
<p>Dəyişənlərə mənimsədilən qiymətin tipi olur. Həmin tipindən asılı olaraq
dəyişənlər üzərində müxtəlif əməliyyatlar aparmaq mümkündür. Riyaziyyat
fənnindən bilirik ki, iki ədədin hasili mümkündür. Bəs iki sətrin hasilini
təsəvvür edirsinizmi?</p>
<p><time>2023-12-03</time></p>
<hr>Nəticə:
Göründüyü kimi, indi bloklar bir-birindən üfüqi xəttlə ayrılır və bu, veb səhifədə bir blokun harda başlayıb harda bitməsini daha tez ayırd etməyə kömək edir.
<strong> və <em> elementləri
Mətndə hansısa sözü digərlərindən fərqləndirmək üçün onları <strong> elementinin köməyilə qalın şriftlə göstərə bilərik. <em> elementi isə dərc tarixlərini maili yazı ilə göstərməyə imkan verir. Növbəti dəfə koda dəyişiklik edin:
<h2>Nə üçün Laravel?</h2>
<p>Əvvəllər dinamik veb səhifələrin hazırlanması prosesi indikindən tamamilə
fərqlənirdi. Proqramçı saytın arxitekturasını qurmaqla yanaşı, həm də digər
komponentlərin kodunu yazmaq məcburiyyətində idi.</p>
<p>Hazırda proqramçılar onlarla freymvörkdən istifadə edə bilərlər.</p>
<p><em><time>2024-09-18</time></em></p>
<hr>
<h2>JavaScript-də dəyişənin qiymətinin tipi</h2>
<p><strong>Dəyişənlərə</strong> mənimsədilən qiymətin tipi olur. Həmin tipindən asılı olaraq
dəyişənlər üzərində müxtəlif əməliyyatlar aparmaq mümkündür. Riyaziyyat
fənnindən bilirik ki, iki ədədin hasili mümkündür. Bəs iki sətrin hasilini
təsəvvür edirsinizmi?</p>
<p><em><time>2023-12-03</time></em></p>
<hr>Nəticə:
<b> və <i> elementlərindən istifadə etməklə də eyni nəticəni əldə edə bilərik. Bəs onda niyə <strong> və <em> elementləri?
Ona görə ki <strong> elementi mətn fraqmentini screenreader-də (mətni ekrandan oxuyan proqram təminatı) xüsusi intonasiya ilə səsləndirir.
<em> elementi isə screenreader-də mətnin xüsusi vurğulanmasını təmin edir.
Bu səbəbdən <strong> və <em> elementlərindən istifadəni tövsiyə edirəm.