1. Başlıqlar
HTML, mətn kontentini, şəkilləri, keçidləri və siyahıları formatlamaq və strukturlaşdırmaq üçün bir çox tag təqdim edir. Əsas HTML tag-lar asan oxunan və məntiqi şəkildə təşkil edilmiş, eyni zamanda cəlbedici və rahat qavranılan bir səhifə yaratmağa imkan verir. Ən çox istifadə edilən əsas tag-lara və onların məqsədinə baxaq.
Başlıqlar (və ya header) səhifədə müxtəlif səviyyəli başlıqları göstərmək üçün istifadə olunur. HTML altı səviyyəli başlıq təqdim edir — <h1>-dən <h6>-ya qədər, burada <h1> ən böyük və ən vacib başlıqdır, <h6> isə ən kiçik başlıqdır.
<h1>Səhifənin əsas başlığı</h1>
<h2>Birinci səviyyəli alt başlıq</h2>
<h3>İkinci səviyyəli alt başlıq</h3>
...
<h6>Ən kiçik başlıq</h6>
Başlıqların istifadəsi mətn məlumatlarını strukturlaşdırmağa kömək edir, həmçinin SEO-nu (axtarış optimizasiyası) yaxşılaşdırır, çünki axtarış sistemləri səhifənin məzmununu analiz edərkən başlıqları nəzərə alır.
2. Mətnin tərtibatı
Mətnin tərtibatı üçün HTML bir neçə sadə, amma güclü teqlər təklif edir.
Paragraf/Abzaslar
İndi ki, başlıqlarla tanış olduq, mətnə diqqət yetirmək zamanı gəldi. Paragraf HTML-də <p> teqi ilə yaradılır. Bu, sizin sevimli mətn redaktorlarınız kimidir, burada yeni abzas başlamaq üçün "Enter" düyməsinə basırsınız. Məsələn:
<p>Bu, bizim səhifəmizdəki ilk paragrafdır və mövzumuz haqqında sizə bir az daha çox məlumat verəcək.</p>
<p>Bu isə artıq ikinci paragrafdır, çünki "birinci" düşüncələri tam izah etmək üçün bəzən kifayət etmir!</p>
Mətn blokları
Həmçinin <span> və <div>-i də unutmamalıyıq. <span> — HTML kodunda mətn fraqmentlərini stilizasiya etmək üçün təvazökar köməkçilərinizdir, amma <div> — bloklar və konteynerlər yaradılması üçün əsl çempiondur.
<div>Bu blok çox maraqlı şeylərdən ibarət ola bilər!</div>
<span>Bu mətn isə rəng və ya şrift ilə vurğulana bilər.</span>
Qalın mətn
Qalın mətn — <b>: <b> teqi mətni qalın şriftlə vurğulayır. Bu teq adətən ayrı-ayrı sözlərin və ya ifadələrin əhəmiyyətini vurğulamaq üçün istifadə olunur.
<p>Bu <b>vacib mətndir</b>, diqqət çəkir.</p>
Əyilmiş mətn
Kursiv — <i>: <i> teqi mətni kursiv edir. O, sitatları, xarici sözləri və ya vurğu tələb edən digər elementləri seçmək üçün uyğundur.
<p>Bu kursiv mətn nümunəsidir: <i>nümunə kursiv mətn</i>.</p>
3. Şəkillər
Səhifəyə şəkil əlavə etmək üçün <img> tag-ından istifadə olunur. Bu tag tək işləyən biridir və onun işləməsi üçün src atributu vasitəsilə şəkilin yolunu göstərmək lazımdır. Həmçinin alt (alternativ mətn) atributu vasitəsilə şəkilin təsvirini əlavə etmək vacibdir ki, əlillər və ya yükləmə problemləri zamanı istifadəçilər şəkildə nə olmalı olduğunu başa düşsünlər.
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="Şəklin təsviri">
<img src="image.jpg" alt="Şəklin təsviri">
<img> üçün digər faydalı atributlar:
-
width— şəklin eni (məsələn,width="200"). -
height— şəklin hündürlüyü (məsələn,height="150").
width və height atributları ilə nümunə:
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Şəklin təsviri" width="200" height="150">
<img src="http://google.com/image.jpg" alt="Şəklin təsviri" width="200" height="150">
4. Hiperkeçidlər
Keçidlər — HTML-in vacib elementidir, istifadəçilərə digər səhifələrə və ya resurslara keçməyə imkan verir. Keçidlər <a> tag-ı ilə yaradılır, burada əsas atribut href-dir, təyinatın URL ünvanını göstərir. 'A' burada 'anchor' (lənkər) mənasını verir, çünki keçid sənədin strukturunda müəyyən bir nöqtədə yerləşməlidir:
<a href="https://example.com">Nümunə sayta keçid edin</a>
Keçid üçün faydalı atributlar:
-
target="_blank"— keçidi yeni tab-da açır. -
title="İpucu"— keçid üzərinə gələndə ipucu əlavə edir.
Əlavə atributlarla keçid nümunəsi:
<a href="https://example.com" target="_blank" title="Yeni tab-da açılacaq">Saytımıza baş çəkin</a>
5. Siyahılar
Siyahılar məlumatları qavranılması rahat olan bloklara təşkil etməyə kömək edir. HTML iki növ siyahını dəstəkləyir:
Nöqtəli siyahı
Markerlənmiş siyahı (sırasız) — <ul>: Bu cür siyahıdakı elementlər markerlərlə (nöqtələrlə) işarələnir.
<ul>
<li>Siyahının birinci elementi</li>
<li>Siyahının ikinci elementi</li>
<li>Siyahının üçüncü elementi</li>
</ul>
Rəqəmlərlə siyahı
Rəqəmlənmiş siyahı (sıralanmış) — <ol>: Bu siyahının elementləri avtomatik olaraq nömrələnir.
<ol>
<li>Siyahının birinci elementi</li>
<li>Siyahının ikinci elementi</li>
<li>Siyahının üçüncü elementi</li>
</ol>
Siyahıdakı elementlər <li> teqi ilə yaradılır, bu teq isə <ul> və ya <ol> daxilinə yerləşdirilir. Siyahılar menyular yaratmaq, fəaliyyət ardıcıllıqları, siyahılar və digər struktural məlumatlar üçün geniş istifadə olunur.
6. Bütün əsas teqlərin istifadəsi üçün nümunə
İndi bütün təsvir edilmiş teqləri bir HTML fraqmentində birləşdirək:
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Əsas HTML-teqləri ilə səhifə nümunəsi</title>
</head>
<body>
<h1>Səhifənin başlığı</h1>
<h2>Alt başlıq</h2>
<p>Bu, bir abzas mətnin nümunəsidir, burada <b>qalın mətn</b> və <i>kursiv mətn</i> var.</p>
<h3>Şəkil</h3>
<img data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="Təsvirin təsviri" width="200" height="150">
<h3>Keçid</h3>
<p>Budur <a href="https://example.com" target="_blank" title="Saytın nümunəsi">xarici bir sayta keçid</a>.</p>
<h3>Markerlənmiş siyahıya nümunə</h3>
<ul>
<li>Birinci element</li>
<li>İkinci element</li>
<li>Üçüncü element</li>
</ul>
<h3>Rəqəmlənmiş siyahıya nümunə</h3>
<ol>
<li>Birinci element</li>
<li>İkinci element</li>
<li>Üçüncü element</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="az">
<head>
<meta charset="UTF-8">
<title>Əsas HTML-teqləri ilə səhifə nümunəsi</title>
</head>
<body>
<h1>Səhifənin başlığı</h1>
<h2>Alt başlıq</h2>
<p>Bu, bir abzas mətnin nümunəsidir, burada <b>qalın mətn</b> və <i>kursiv mətn</i> var.</p>
<h3>Şəkil</h3>
<img src="image.jpg" alt="Təsvir nümunəsi" width="200" height="150">
<h3>Keçid</h3>
<p>Budur <a href="https://example.com" target="_blank" title="Saytın nümunəsi">xarici bir sayta keçid</a>.</p>
<h3>Markerlənmiş siyahıya nümunə</h3>
<ul>
<li>Birinci element</li>
<li>İkinci element</li>
<li>Üçüncü element</li>
</ul>
<h3>Rəqəmlənmiş siyahıya nümunə</h3>
<ol>
<li>Birinci element</li>
<li>İkinci element</li>
<li>Üçüncü element</li>
</ol>
</body>
</html>
Nəticə
Artıq əsas HTML-teqlərin istifadəsini necə edəcəyinizi bilirsinizsə, onların kombinasiyaları ilə daha mürəkkəb səhifələr yaratmağa başlaya bilərsiniz. Başlıq, bir neçə paragraf və digər resursa keçid kimi xidmət edən şəkildən ibarət öz HTML-səhifənizi yaratmağa çalışın.
HTML dünyasında teqləri bilmək yalnız başlanğıcdır. Bu, sevdiyiniz düymələrin klaviaturada harada olduğunu bilmək kimidir. Növbəti mühazirələrdə biz CSS-i araşdıracağıq, bu isə elementləri bizim ideyamıza uyğun şəkildə tərtib etməyimizə kömək edəcək. Hələlik isə eksperimentlərə davam edin və yadda saxlayın ki, "kapotu açmaq" ifadəsi HTML ilə işləməyi təsvir etmək üçün yaxşı bir üsuldur.
Bununla da, kiçik amma zəngin mühazirəmizə son qoyuruq. Ümid edirəm ki, HTML-in veb-səhifələrinizin ürəyi olduğunu başa düşdünüz. Artıq veb inkişafında ilk addımlarınızı necə atmağı bilirsiniz: brauzerin anlayacağı kodu yazmaq!
GO TO FULL VERSION