Saytlar hazırlamağı bacarmaq istəyirsiniz?

Biz sizi ÖDƏNİŞSİZ oyrədərik!
Ətraflı məlumat əldə etmək üçün asağıdakı keçidə klikləyin
Daha ətraflı Bildirişi gizlət
Dərs 3

İlk HTML səhifəsi

20 noyabr

Səhifənin başlıqları <h1>-dən başlayaraq <h6> qədər teqlərlə təyin olunur. Ən vacib başlıq <h1>, ən az prioriteti olan başlıq isə <h6> başlığıdır. Brauzerlər bu başlıqların üst və alt hissələrində avtomatik olaraq məsafə yaradılar.


Bütün başlıq teqləri istifadə olunan misala nəzər yetirək:


<!DOCTYPE html>
<html>
<head>
<title>HTML başlıqları</title>
<meta charset="utf-8">
</head>
<body>
<h1>Birinci səviyyəli başlıq</h1>
<h2>İkinci səviyyəli başlıq</h2>
<h3>Üçüncü səviyyəli başlıq</h3>
<h4>Dördüncü səviyyəli başlıq</h4>
<h5>Beşinci səviyyəli başlıq</h5>
<h6>Altıncı səviyyəli başlıq</h6>
</body>
</html>


İndi isə misalın nəticəsinə baxaq:



Yatay xətt

Səhifənin başlıqları <h4> səhifədə yatay xətt yerləşdirmək üçün işlənilir. Yatay xətt mətnlərdə ayırıcı kimi işlədilə bilər. Teq tək teqdir və bunun üçün bağlayıcı teqə ehtiyacı yoxdur.


Növbəti misalda paraqrafları (<p> teqi) ayırmaq üçün yatay xətt istifadə edəcəyik:


<!DOCTYPE html>
<html>
<head>
<title>Yatay xətt</title>
<meta charset="utf-8">
</head>
<body>
<p>Birinci paraqraf</p>
<hr>
<p>İkinci paraqraf</p>
<hr>
<p>Üçüncü paraqraf</p>
<hr>
</body>
</html>



Yeni sətr

Yeni sətr yaratmaq üçün <br> teqindən istifadə edə bilərsiniz. Eynilikdə bu teq də tək teqdir və bunun üçün bağlayıcı teqə ehtiyacı yoxdur. Sətrdən sətrə keçirmək yöntəmini Səməd Vurğunun şeirini bir hissəsini HTML-də yazaraq yoxlaya bilərik:


<!DOCTYPE html>
<html>
<head>
<title>Səməd Vurğun - Dünya</title>
<meta charset="utf-8">
</head>
<body>
<p>Səməd Vurğun</p>
<p>Yerlərə baxıram-bağçalı-bağlı,<br>
Göylərə baxıram – qapısı bağlı.<br>
Kainat ixtiayar, sirli-soraqlı.<br>
Əzəldən yaranıb tamaşa dünya.</p>
</body>
</html>



Şəkillər

Hər hanısa bir səhifəni şəkilsiz təsəvvür etmək çətindir. Şəkilləri <img> teq ilə əlavə edə bilərsiniz. Amma qeyd etmək lazımdır ki, bu teq sadə teq deyil. <img> teqinin əlavə atributları var. Atributları teqləri dəqiqləşdirmək üçün istifadə olunur. Məsələn <img> teqi sadəcə bir teqdir, o, heç bir şəkli idxal etmir. Bunu dəqiqləşdirmək üçün src atributundan istifadə edəcəyik. Eynilikdə bu teq də tək teqdir və bunun üçün bağlayıcı teqə ehtiyacı yoxdur. Atributlar bu şəkildə istifadə olunur:


atributun_adı="atributun dəyəri"


Atributlar teqlərin içərisində, teqin adından sonra boşluq qoyularaq istifadə olunmalıdır. Əgər teq cütdürsə və onun atributu varsa, atribut ancaq başlanğıc teqində qeyd olunur:


<teq atribut="dəyəri"> tək teq
<teq atribut="dəyəri"> cüt teq </teq>


Gəlin <img> teqinin əsas atributlarına nəzər yetirək:

  • idxal olunacaq fayl (src) - əgər şəkil HTML sənədi ilə eyni qovluqdadırsa, faylın adı yazılır. Məsələn, sekil.jpg. Əgər, şəkil digər qovluqdadırsa, faylın adından əvvəl qovluğu adı da qeyd olunmalıdır. Məsələn, əgər sekil.jpg faylı sekiller qovluqdadırsa, atributun dəyəri belə olacaq: sekiller/sekil.jpg.
  • alternativ mətn (alt) - əgər hər hansısa bir səbəbə görə brauzer faylı yükləyə bilmədisə, şəklin əvəzinə bu atributun dəyərindəki olan mətn göstəriləcəkdir.
  • ölçülər (widthheight) - şəklin eni və hündürlüyü. Piksellərlə və ya faizlə ölçülür. Şəklin enini vacib hündürlüyünü həmişə qeyd etmək məsləhətdir. Əks halda, şəkil tam ölçüsündə yüklənəcək.
  • şəklin təsviri (title) - kursoru şəklin üzərinə yönləndirdikdə bu mətn göstəriləcəkdir.

Diqqət!
<img> teqinin 2 vacib atributu var - srcalt, bu atributlar mütləq qeyd edilməlidir, qalan atributlar istəyə bağlıdır.


Atributlar haqqında daha ətraflı gələn dərsdə bəhs edəcəm. İndi isə <img> teqini sınayaq. Bunun üçün ilk öncə bir şəkil tapın, məsələn, internetdən Mirzə Ələkbər Sabirin şəklini yükləyib, HTML faylımızın yerləşdiyi qovluqda yerləşdirək.


<!DOCTYPE html>
<html>
<head>
<title>Mirzə Ələkbər Sabir</title>
<meta charset="utf-8">
</head>
<body>
<img src="mirzeelekbersabir.jpg" alt="Mirzə Ələkbər Sabir" width="200">
</body>
</html>


Diqqət yetirin ki, mən sadəcə width atributunu qeyd etdim. Siz isə ya width, ya height ya da ki, hər iki atributu eyni anda istifadə edə bilərsiniz. Nəticəsi isə belədir: