Mavzu: Web-sahifaga jadval joylashtirish

Informatika-9-A-B. 59 – dars.

Mavzu: Web-sahifaga jadval joylashtirish

Maqsad:

1) ta’limiy: o`quvchilarga web-sahifaga jadval joylashtirishni o`rgatish;

2) tarbiyaviy: o`quvcchilarga estetik tarbiya berish;

3) rivojlantiruvchi: o`quvchilarda web-sahifaga jadval joylashtirsh ko`nikmalarini rivojlantirsh.

DTS: Web-sahifaga jadval joylashtirishni bilish.

I. Tashkiliy davr

II. Takrorlash

1. MS Wordda qanday ro’yxat turlari bor?

2. Web-sahifada necha xil ro’yhat ishlatish mumkin? Misollar keltiring.

3. Tartib raqamli ro’yhat qanday tashkil qilinadi? Misollar keltiring.

4. Markerli ro’yhat qanday tashkil qilinadi? Misollar keltiring.

5. Grafik tasvirli ro’yxatni tashkil etish jarayonini izohlab bering.

6. Grafik markerli ro’yxat qanday tashkil etiladi?

7. Ta’riflar ro’yxati haqida so’zlab bering.

III. Yangi mavzuni o`rganish

Web-sahifaga jadval kiritish uchun

(table - jadval), (table row – jadval satri), juft tegi jadval satrini va tegisiz ishlatilmaydi. Agar web-sahifada jadvalning chegara chiziqlari ham aks etishi lozim bo’lsa, u holda BORDER parametri qo’llaniladi. BORDER parametrining qiymatlari piksellarda o’lchanadi va faqat jadval ramkasining tashqi chiziqlarining qalinligiga o’ziga xos ta’sir etadi.

Jadval satrlardan tashkil topadi. O’z navbatida har bir satr ustunlarga bo’linadi.

va va teglari bilan yopiladi. Masalan,

(table header – jadvaldagi sarlavha) va	(table data – jadval ma’lumotlari) juft teglari qo’llaniladi. tegi jadval boshlanishini, tegi esa jadval oxirini,
juft tegi esa jadval ustunini belgilaydi.	juft tegi sarlavhali katakchalarni bildirib, bu katakchalardagi ma’lumotlar web-sahifada qalin shrift bilan katakcha o’rtasida tekislangan holda (ya’ni, ALIGN=Center va VALIGN=Middle, bu yerda V – vertikal yo’nalishni bildiradi) aks etadi.	tegi
teglari mos ravishda

Oy nomi	Fasl	Oy tartibi
Yanvar	Qishning 2-oyi	Yilning birinchi oyi
Dekabr	Qishning 1-oyi	Yilning oxirgi oyi

jadvalni ifodalovchi HTML-hujjat lavhasi quyidagicha yoziladi:

Oy nomi	Fasl	Oy tartibi
Yanvar	Qishning 2-oyi	Yilning birinchi oyi
Dekabr	Qishning 1-oyi	Yilning oxirgi oyi

Jadvalning chegara chiziqlarisiz va chegara chiziqlari bilan aks ettiruvchi HTML-hujjat va unga mos web-sahifada jadvalning joylashishini quyidagi misolda ko’rish mumkin:

Web sahifada aks ettirilayotgan jadvalga sarlavha berish lozim bo’lsa (sarlavha) juft tegi ishlatilib, u birinchi tegidan oldin yozilishi shart. Bu tegning ALIGN va VALIGN parametrlari bo’lib, parametr qiymatlari qanday ishlatilishi mumkinligi quyidagi jadvalda keltirilgan:

ALIGN	VALIGN	Izoh
TOP	yozilmaydi	Sarlavha jadvaldan tepasida jadvalning o’rtasiga mos tekislanadi
BOTTOM	yozilmaydi	Sarlavha jadvaldan tagida jadvalning o’rtasiga mos tekislanadi
LEFT	TOP	Sarlavha jadval tepasida jadvalning chap chegarasiga mos tekislanadi
LEFT	BOTTOM	Sarlavha jadval tagida jadvalning chap chegarasiga mos tekislanadi
CENTER	TOP	Sarlavha jadval tepasida jadvalning o’rtasiga mos tekislanadi
CENTER	BOTTOM	Sarlavha jadval tagida jadvalning o’rtasiga mos tekislanadi
RIGHT	TOP	Sarlavha jadval tepasida jadvalning o’ng chegarasiga mos tekislanadi
RIGHT	BOTTOM	Sarlavha jadval tagida jadvalning o’ng chegarasiga mos tekislanadi

Quyidagi misolda ALIGN va VALIGN parametrlarini ishlatilishini ko’rish mumkin:

Jadvalning ichki chiziqlari qalinligini (ikkita katakchani ajratuvchi parallel chiqlar orasidagi masofani) CELLSPACING parametri bilan (masalan, CELLSPACING =5) piksellarda tanlash mumkin. Katakchaga kiritilgan ma’lumotlar bilan katakcha orasidagi masofa esa CELLPADDING parametri bilan (masalan, CELLPADDING=9) piksellarda aniqlanadi.

Avvalroq, web-sahifaga rasm joylashtirganda uning atrofiga matnning joylashishi haqida ma’lumot bergan edik. Xuddi shunday, jadvalning ham atrofiga matn joylashtirish imkoni bo’lib, matn jadvalning faqat chap yoki o’ng tomoniga joylashtirlishi mumkin. Buning uchun

tegi ALIGN parametri bilan birga ishlatiladi, masalan: . Agar jadval web-sahifani chap tomoniga tekislansa, matn jadvalning o’ng tomonida aks etadi va aksincha.

Shuni ta’kidlash joizki, katakcha ichidagi ma’lumotlarni formatlash uchun sarlavha, matn va rasmlarni formatlash uchun ishlatilgan barcha teglardan foydalanish mumkin. Jadval, satr va katakchalar chegara chiziqlarini rangini o’zgartirish BORDERCOLOR parametri orqali amalga oshiriladi.

Yuqorida keltirilgan ma’lumotlar asosida quyidagi HTML-hujjat va web-sahifani hosil qilish mumkin:

MS Word dasturida hujjatga joylashtirilgan jadvalning kataklarini birlashtirish yoki katakchani yana katakchalarga bo‘lish mumkin edi, masalan:

1-katakcha	2 ta ustun birlashgan katakcha
2ta satr birlashgan katakcha	4-katakcha	2 ta satr birlashgan katakcha
	6-katakcha

HTML tili ham shunday imkoniyat beradi. Buning uchun yoki teglari COLSPAN (column spanning – ustunni birlashtirish) va ROWSPAN (row spanning - satrni birlashtirish) parametrlari bilan birga ishlatiladi. Mantiqan qaraganda bo’lingan katakchali jadvalni hosil qilish uchun katakchani bo’lish o’rniga boshqa katakchalarni birlashtirish orqali erishish mumkin. Yuqoridagi jadvalning HTML-hujjati quyidagichadir:

Jadvallar ustida yana bir qancha amallar bajarish mumkinki, ularni mustaqil o’rganishni tavsiya etamiz.

IV. Mustahkamalsh

1. Web-sahifada jadval qanday tashkil etiladi?

2. Jadvalning chegara chiziqlarini qanday formatlash mumkin?

3. Jadvaldagi sarlavha haqida ma’lumot bering.

4. Jadval sarlavhasi haqida ma’lumot bering.

5. Jadval bilan matn web-sahifada qanday joylashishi mumkin?

6. Jadval ichidagi ma’lumotlarni formatlashga oid misol tuzing.

7. Jadval chegara chiziqlarini formatlashga oid misol tuzing.

Mashqlar

1. Jadvalga oid teglar va ularni ta’riflash ustunli web-sahifasini hosil qiling.

2. “Bizning sinf” nomli web-sahifaga jadval joylashtiring.

V. Uyga vazifa

3. “Mening oilam” nomli web-sahifangizdagi oila azolaringiz haqidagi ma’lumotlarni jadval ko’rinishida ifodalang.