№7 HTML dars — Havolalar(ссылка) va ro’yhatlar hosil qiluvchi teglar

www.dasturim.uz

Har bir sayt bir necha sahifalardan tashkil topgan bo‘ladi. Bu sahifalarga havola(ссылка)lar orqali o‘tiladi. Demak, havolalar saytning asosiy boshqaruvchi elementlari hisoblanar ekan. Maqola, aynan shu havolalarni hosil qiluvchi va har xil ko‘rinishdagi ro‘yxatlarni yaratuvchi teglarga bag‘ishlanadi.

Boshqa maqolalardan farqli ravishda, bu maqolada ikkita sahifa yaratamiz, chunki havola bir sahifada ikkinchi bir sahifaga o‘tishda ishlatiladi. Dastlab, birinchi sahifamizning html kodini ko‘rib chiqamiz.

<html>

<head> <title>ManchesterUnited</title><head>

<body>

<a href="2.html" title="havola"> Ikkinchi </a> sahifani ko'ramiz.

<hr>

Manchester United_1:

<li type="I">Rafael</li>

<li type="I">Giggs</li>

<li>Rooney</li>

<li type="square">Lindegaard</li>

<li>Young</li>

<li>Van Persie</li>

</ul>

Manchester United_2:

<ol>

<li>Vidic</li>

<li value="1">Scholes</li>

<li>Hernandes</li>

</ol>

</body>

</html>

Bu kodda biz uchun quyidagi yangi teglar mavjud:

1. <a>…</a> — havolalar yaratuvchi teg. Bu teg orqali boshqa sahifalarga o‘tishni amalga oshirishimiz mumkin. Biror saytni html kodini ko‘rsangiz, u yerda juda ko‘p «a» tegini ko‘rasiz. Bu tegning quyidagi attributlari mavjud.

accesskey — bu attribut orqali klaviuturadagi biror tugmalar orqali aynan shu havolani aktiv holga keltirishingiz mumkin bo‘ladi. Qiymatlari: «0» dan «9» gacha yoki «a» dan «z» gacha.

Bu kod, har xil brauzerlarda har xil klaviatura tugmalarini birlashmasini anglatadi.

Internet Explorer: ALT+C

Chrome: ALT+C

Opera: Shift+ESS, C

Safari: ALT+C

Firefox: SHIFt+ALT+C

Brauzeringizga mos tugmalarni bossangiz, shu havola aktiv bo‘ladi.

download — kiritilgan faylni ko‘chirib olishni amalga oshirib beradi.

<a href=»rasm.jpg» download>Yuklash</a>

href — havola adresini ko‘rsatish. Ko‘rsatilgan adresdagi veb sahifaga o‘tiladi.

<a href=»index.html»>Asosiy sahifa</a>

«Asosiy sahifa» nomiga sichqoncha bosilsa, «index.html» sahifasiga o‘tiladi.

tabindex — klaviaturadan nechi marotaba «tab» tugmasi bosilsa, shu havolaga o‘tish kerakligini o‘rnatish. Qiymat raqamlardan iborat bo‘ladi.

«tab» tugmasini uch marotaba bossangiz shu havolaga o‘tasiz.

target — havola qay holda ochilishini aniqlashtirish. Quyidagi qiymatlarni qabul qilishi mumkin:

*_blank — brauzerning yangi sahifasida havolani ochish;

*_self — odatdagi oynada ochish(odatiy qiymat);

*_parent — havolani asosiy freymda ochish, freymlar ishlatilmasa, «_self» rejimida ishlaydi.

*_top — barcha freymlarni rad etib, asosiy brauzer oynasida ochadi, freymlar bo‘lmasa «_self» rejimida ishlaydi.

title — sichqoncha havola nomiga olib borilsa, shu attribut ichida yozilgan yozuv paydo bo‘ladi. Bu yordam sifatida ishlatiladi, ya’ni havola qaysi sahifaga o‘tishini aniqlab berishda.

type — qanday tipdagi sahifaga o‘tishni o‘rnatish, CSS bilan ishlatilganda foydlai bo‘ladi. Hozircha biz uchun muhim emas.

2. <ul>…</ul> — ro‘yxatlar tuzishda ishlatiladi. Bu teg ichidagi har bir ro‘yxat «<li>» tegi bilan boshlanishi lozim. «ul» tegini quyidagi attributi bor:

type — ro‘yxat oldiga biror marker o‘rnatib beradi. Uning qiymatlari:

*disc — ro‘yxat oldiga kichik dumaloq shakl chizib beradi;

*circle — ro‘yxat oldiga kichik aylana shakl chizib beradi;

*square — ro‘yxat oldiga kichik bo‘yalgan kvadrat shakl chizib beradi.

3. <li>…</li> — ro‘yxatdagi yozuvlarni chiqarish uchun ishlatiladi. «ul» tegi ichida ishlatiladi. Uning quyidagi attributlari bor:

type — marker tipini o‘rnatish. Qiymatlari:

*disc — ro‘yxat oldiga kichik dumaloq shakl chizib beradi;

*circle — ro‘yxat oldiga kichik aylana shakl chizib beradi;

*square — ro‘yxat oldiga kichik bo‘yalgan kvadrat shakl chizib beradi.

*A — marker, katta harfda lotin alifbosida bo‘ladi;

*a— marker, kichik harfda lotin alifbosida bo‘ladi;

*I — marker, katta rim raqamlarida bo‘ladi;

*i — marker, kichik rim raqamlarida bo‘ladi;

*1 — marker, arab raqamlarida bo‘ladi;

4. <ol>…</ol> — raqamlangan ro‘yxat yaratishda ishlatiladi. Bu teg ichida ham «li» tegi ishlatiladi. Quyidagi attributlari mavjud:

type — marker tipi. Qiymatlari «li» tegidagi «type» attributi bilan bir hil: A, a, I, i, 1.

reversed — ro‘yxatdagi raqamlarning teskari tartibini yaratadi, ro‘yxat raqamlari 1,2,3 bo‘lsa, bu attributdan so‘ng ularning ketma-ketligi 3,2,1 bo‘ladi.

start — nechi raqamidan boshlab ro‘yxat tuzish kerakligi aniqlashtiriladi. Rim va arab raqamlari bilan ishlaydi. Bunda, «type» attributi e’tiborga olinmaydi.

YUqoridagi kodni brauzerda natijasini ko‘ramiz

Agar «ikkinchi» so‘zini bossangiz, «2.html» sahifasiga o‘tadi. Bu sahifa quyidagi kodlardan iborat:

<html>

<head> <title>ManchesterUnited</title><head>

<body>

<a href="92.jpg" download>Rasmni yuklash</a>

<dl>

<dd>Manchester United Football Club</dd>

<dd>Football Club Barcelona</dd>

</dl>

<dir>

<li>Windows</li>

<li>System32</li>

<li>System</li>

</dir>

</body>

</html>

Yangi kodlar bilan tanishamiz:

1. <dl>…</dl> — aniqlashtiruvchi ro‘yxatlarni yaratishda ishlatiladi, ya’ni terminlarga birin ketin ta’rif berishda. Bu teglarni ichiga «dt«, «dd» teglari kiradi.

2. <dt>…</dt> — ta’rif berayotgan termin nomini kiritish uchun yoki abbviaturani ochib yozishda, abbviatura nomini yozishda.

3. <dd>…</dd> — butun ta’rif uchun, ya’ni katta hajmdagi mantlarni kiritishda, tushuntirish ishlarini olib borayotganda.

4. <dir>…</dir> — direktiriya(papka)larni yozishda foydalaniladigan teg. «li» tegi bilan birga ishlatiladi. Attributlari mavjud emas. Hozirda unchalik ishlatilmaydi, uning o‘rniga «ul» dan foydalaniladi.

Natijani ko‘ramiz

Ko‘rib turganingizdek, termin va uning ta’rifi har xil abzats bilan yozilmoqda. YUqoriroqdagi «Rasmni yuklash» yozuvini bossangiz, «92.jpg» nomli rasmni yuklab olishingiz mumkin.

№7 HTML dars — Havolalar(ссылка) va ro’yhatlar hosil qiluvchi teglar

№7 HTML dars — Havolalar(ссылка) va ro’yhatlar hosil qiluvchi teglar

Bizga qo'shiling @informatika

Report Page