0'dan HTML Dərsləri - body, header, nav, section, aside, div, footer tegləri Dərs #4

3334
Kategoriya: html

Salam dəyərli dostlar HTML 5 dərslərinə qaldığımız yerdən davam edirik. Bu gün sizlərə HTML 5 də yer alan body, header, nav, section, aside, div, footer tegləri haqqında danışmaq istəyirəm keçək dərsimizə.

<body> </body>

Bu teg haqqında ümumilikdə desək websaytda gördüyümüz hər birşey bu tegin içində göstərilir. Body teginin xaricində yazılan heç birşeyi browserdə müşahidə edə bilmərik.

Body tegi:

Açılıb bağlanan tegdir - "<body>kodlar</body>"

Brovserdə görünməsini istədiyimiz bütün kodlar bu teglər içində yazılmalıdır.

Bir fayl içində birdən çox body teginin istifadə olunması sintaksis səhf kimi qəbul olunur.

Head teginin içində yer alan açarsözlər və ya açıqlama meta tegləri body teginin içində istifadə olunarsa əgər - öz əhəmiyyətini itirər.

Body teginin sonunda yazılan scritpt faylları saytın daha sürətli işləməsinə şərait yaradır.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Yuxarıda göstərilən nümunə html5 in şablon kod blokudu. Və dediyimiz kimi browserdə görünməsini istədiyimiz bütün kodları body tegləri arasında yazmalıyıq.

<header></header>

HTML5 vasitəsilə brovserimizə daxil olan header tegi adındanda bilindiyi kimi saytın əsas başlıq bölmünü əmələ gətirir. Header tegi body teginin içərisində body tegindən sonra yerləşdirilir. Məsələn saytda yer alan Yuxarı menu və ya başlıq reklam bölmələri header teginin içərisində yer alır. İçərisində

<nav> </nav> tegini saxlayır. Diqqət: Header tegi Head tegi ilə eyni vəzifəni daşımır.

<nav></nav>

Header teginin içində yer alan nav tegi html5 vasitəsilə gəlmişdir. funksiyası header bölmündə yer alan başlıq menu hissələrini ayırmaqdır. Məslən header bölmündə bir sayt menyusu bir ədəd də istifadəçi menusu varsa o zaman nav tegini aşağıdakı kimi istifadə edə bilərik.

<header>
	<nav>Ana Menu</nav>
	<nav>Istifadeci menusu</nav>
</header>

<section></section>

Bu teg HTML5 vasitəsilə brovserlərimizə daxil oldu. Bootstrapda row klası ilə demək olarki eyni funksiyanı yerinə yetirir deyə bilərik. Section tegi tam olaraq desək bir ərazı bir bölmə olaraq istifadə edilir. Nümunə olaraq desək aşağıdakı şəkildə iki sectiondan istifadə olunub. İlk section şəkilin və məqalə adının yer aldığı, ikincisi isə sidebarın yer aldığı - yəni sağ çübüğun section'udur.

<aside></aside>

HTML5 vasitəsilə browserimizə daxil olan növbəti teg aside tegidir. Bu teg Section teginin içində yer alır. Və yuxarıda dediyimiz kimi section teginin aldığı bölmələri öz içərisində bölür. Məsələn yuxarıda dediyimiz kimi şəkildə 2 section bölməsi vardır. Birincisi sidebar ikincisi isə şəkil, ad və məqalə yazısının yer aldığı əsas bölmə. Birdə şəkil və adın eyni zamanda textin yer aldığı bölmə aside tegi ilə 2 hissəyə bölünmüşdür. Nümunə üçün aşağıdakı kod blokuna baxaq.

<section>
	<aside>
		<h1>Meqale adı</h1>
		<img src="Meqale şekili">
	</aside>
	<aside>Meqalə Yazısı</aside>
</section>

Bir section tegi içərisində istənilən qədər aside tegindən istifadə edilə bilər.

<div></div>

HTML5 gəlməmişdən öncə saytlar tam olaraq div vasitəsilə hazırlanırdı deyə bilərik. Html 5 olduğdan sonra kodların yazılması və sintakksis səhflər çoaldığı halda, html5 tegləri olmadan öncə yanlız div teglərindən istifadə edərək sintaksis səhflərə az yol verərək bir vebsayt qurmaq çox rahat idi. Təbii ki də bu o demək deyil ki html5'in əvvəlki versiyası yəni html özü çox html5dən daha asandır. html5 vasitəsilə google, bing, yandex və s. kimi axtarış saytları saytın hansi bölməsində hansı məlumatların yerləşdiyini tam rahatlıqla anlaya bildiyi üçün daha az sintaksis səhfi olan saytları daha çox qabağa çəkkir. Yəni çox əziyyət çəkən çox qabağa gedir deyə bilərikki, sintaksis səhflər haqqında ayrıca bir dərsdə danışacağıq. Qısaca desək hər hansısa yazı üçün belə div tegindən istifadə edə bilərsiniz. hər hansısa bir şəkili ortalayıb bir küncdə yerləşdirmək üçün şəkil teginidə div içərisinə yerləşdirə bilirsiniz.

<footer></footer>

HTML5 ilə browserlərimizə daxil olan növbəti teg və html5 kod blokunu tamamlayan sonuncu kod bu tegdir. Footer tegi sayın axır bölmünü tamamlayır. yanlız body tegi arasında yer alır. section və ya div kimi hət hansısa bir tegin içində istifadə olunması sintaksis səhfdir. Əsasən footer bölməsi daxilində script kodları və saytın haqqında və yaxud saytın əlaqə bölməsi yer alır.

Yaranan suallarınızı bizə commentlər bölmündən bildirə bilərsiniz bu dərsimiz bu qədər. Hər birinizə uğurlar