Bu dərsdə sadə bloq veb səhifəsi hazırlayacağıq. Onun görünüşü aşağıdakı kimidir:
Yuxarıdakı şəkli diqqətlə nəzərdən keçirin, veb səhifənin müəyyən struktura malik olduğu görünür. Strukturlaşdırılmış veb səhifədə mətni oxumaq daha rahatdır. Ə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östərilib. Bundan başqa, hər bir yarımbaşlıqdan sonra abzas və dərc tarixi gəlir.
Bloq veb səhifəsinin HTML kodunu yazmazdan əvvəl onun planını hazırlayaq:
Bundan sonra yalnız redaktorda müvafiq HTML kodu yazmaq qalır.
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="az">
<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>
Göründüyü kimi, kodun əsas hissəsi <body>
elementinin içərisində yazılıb, səbəb odur ki, brauzer məhz həmin elementin içərisində yazılmış HTML kodunu "oxuyur" və kliyentə göstərir.
blog.html faylını brauzerdə açın, yaxud "Visual Studio Code" proqramında Live Server genişlənməsindən istifadə edib nəticəyə baxın. Nəticə yuxarıdakı şəkildəki kimi olmalıdır.
Kodda istifadə edilmiş <h1>
, <h2>
, <p>
və <time>
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 üçün isə <h2>
elementindən istifadə edilib.
Abzaslar
<p>
elementi veb səhifədə abzas yaradır. 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 artırsaq, məncə daha yaxşı görünər.
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>
Nəticə:
Bloq veb səhifəsinə diqqətlə nəzər salın. Sizcə hər bir yarımbaşlıq, abzas və tarix sanki bir blok formalaşdırmı?
Bəs bu blokları bir-birindən üfüqi xəttlə ayırsaq necə?
Ü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ə:
İndi bloklar bir-birindən üfüqi xəttlə ayrılır və bu, veb səhifədəki informasiyanın oxunaqlılığını artırır.
<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.
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.