Web sahifada grafika

Buxoro viloyat G’ijduvon tuman

XTB ga qarashli

2 – umumiy o’rtata’lim maktabi

Informatika va axborot texnologiyalari fani o’qituvchisi

Aziza Bahronovaning

9 – sinflar uchun

“Web sahifada grafika”

mavzusida tayyorlagan

dars ishlanmasi

G’ijduvon -2019

“

O’quv fanining nomi: Informatika va axborot texnologiyalari

Mavzu: Web-sahifada grafika

Dars maqsadlari:

ta’limiy maqsad: O’quvchilarga web sahifada grafikadan foydalanish, rasm va matnning o’zaro joylashish holatlari, rasmni joylashtirish imkoniyatlari haqida ma’lumot berish;

tarbiyaviy maqsad: O`quvchilarni axborotli jamiyatning faol va g’ayratli a’zosi qilib tarbiyalash,mavzu orqali ularni doimiy ravishda jismoniy, ma’naviy va intelektual kamolotga intilish ruhida tarbiyalash;

rivojlantiruvchi maqsad: O`quvchilarning kompyuter savodxonlik malakasini oshirish, mustaqil fikrlash qobiliyati va dunyoqarashini rivojlantirish, ularni hayoti davomida doimo o’qib-o’rganish, mehnat qilish, bunyodkorlik, yaratilgan imkoniyatlardan foydlana olishga undash;

Tayanch kompetensiyalar:

TK-1:Kommunikativ kompetensiyasi:

-axborot kommunikatsion texnologiyasidan foydalanishda xorijiy tildagi atamalarni mazmunini tushungan holda uni jarayonga qo‘llash;

TK-2:Axborotlar bilan ishlash kompetensiyasi:

- Web-sahifa ko‘rinishida sodda axborot resurslarini tayyorlash;

TK-3:O‘zini-o‘zi rivojlantirish kompetensiyasi:

-hayot davomida mustaqil o‘qib-o‘rganish;

FK2-Axborotlarni elektron vositalarda qayta ishlash va saqlash kompetensiyasi shakllanadi.

Dars jihozi: Kompyuter va uning dasturiy ta’minoti, Блокнот dasturi, videoglaz, ekran

Dars turi: Yangi tushunchalarni shakllantirish

Dars metodi: Interfaol, kichik guruhlarda ishlash, topshiriq

DTS talabi: Web sahifa yaratishda grafikadan foydalana olish;

Fanlararo bog’liqlik: Chet tillari, tasviriy san’at

Dars davomiyligi: 45 minut

Dars o’tish joyi: Informatika fan xonasi

Foydalanilgan adabiyotlar va internet saytlar ro’yxati: WWW.edunet.uz sayti, WWW.Ref.uz sayti, 9-sinf darslik- Toshkent-2015 yil

DARSNING BORISHI:

Darsning shiori: Biz yosh avlod barkamol, O’qib topamiz kamol !

I.Tashkiliy qism. (5 daqiqa)

1. Salomlashish.

2. O’quvchilar davomati bilan tanishish.

3. Sinf xonasining va AKTning darsga tayyorgarlik holatini kuzatish

4. O’quvchilarni guruhlarga ajratib olish (Bir partada o’tirgan o’quvchilar kichik guruh sifatida ish olib boradi)

II. O’tilgan mavzuni so’rash. (9 daqiqa)

O’tilgan mavzularni yodga olish maqsadida “Tanlab ol !” didaktik o’yini o’tkaziladi. Bunda kichik guruhlarga “qizil, “sariq”, “yashil”, “ko’k” rangli kartochkalar beriladi. 4-7-slayddagi qaysi rangli javob to’g’ri bo’lsa, o’sha rangni tanlab ko’rsatishi lozim. (4 daqiqa)

O’quvchilar o’tilgan mavzuni qay darajada o’zlashtirganliklarini aniqlash maqsadida

“Ha” yoki “Yo’q” metodi o’tkaziladi.(Kichik guruhlarga ikkitadan savol o’qiladi) (5 daqiqa) (8-slayd)

1. HTML dasturlash tili? (yo’q)

2. FONT tegi yangi qatorga o’tishni bildiradi? (yo’q)

3. Bloknot dasturi yordamida HTML hujjat yaratiladi? (ha)

4. Web sayt web sahifalar majmui? (ha)

5. HTMLda sarlavha qo’yishning 7 pog’onasi mavjud?(yo’q)

6. HTML tili buyruqlari teglar deb yuritiladi?(ha)

7. Bloknot dasturi Microsoft Officce dasturlari tarkibiga kiradi? (yo’q)

8. HTMLda shrift o’lchamlari 7 xil? (ha)

9. TITLE tegi web sahifaga nom berish uchun qo’llaniladi? (ha)

10. HTML gippermatnli markerlash tili? (ha)

11. P tegi yangi qatorga o’tish uchun qo’llaniladi? (yo’q)

12. B, I, U teglari matnni sahifadagi holatini aniqlab beradi?(yo’q)

13. HEAD abzats joylashtirish tegi? (yo’q)

14. Teg(deskriptor)lar juft yoki toq bo’ladi? (ha)

15. Web saytlar majmui web sahifa? (yo’q)

16. HTMLda shrift rangi TEXT COLOR tegi yordamida beriladi? (ha)

17. BR tegi yangi qatorga o’tish uchun qo’llaniladi? (yo’q)

18. Left, Right, Middle, Buttom shrift turini aniqlovchi teglar? (yo’q)

O’tilgan mavzular bo’yicha berilgan savollar xulosalanib, fikrlar jamlanadi va guruhlarga kartotekaga yozilgan ballar beriladi (maximal ball 5 ball).

lII. Yangi mavzuning bayoni (20 daqiqa)

Y

• Image - tasvir

• Source - manbaa

• Align - tekislash

• Width - eni, kengligi

• Height - bo’yi, balandlikgi

• Space - bo’shliq

• Border - chegara

Yangi mavzuda o’rganiladigan bilimlarning ahamiyati aytib o’tiladi. Taqdimot slaydlari orqali yangi mavzu reja asosida tushuntiriladi. (10-26-slayd)

Web-sahifani “jonlantirish”ning eng samarali usuli – unga turli rasmlar joylashtirishdir. Faqat matndan iborat web-sahifa ma’lumotga boy bo’lishi mumkin, lekin zerikarli bo’ladi. Ammo web-sahifaga haddan ziyod rasm joylashtirish web-sahifani bachkana qilib yuboradi hamda web-sahifa faylining hajmini kattalashtirib yuboradi. Fayl qanchalik katta hajmga ega bo’lsa, uni Internet tarmog’idan o’qib olish shuncha ko’p vaqt talab etadi. Demak, web-sahifaga fayl hajmi kichik bo’lgan rasmlarni joylashtirish maqsadga muvofiqdir. Internet tarmog’ida, asosan, jpeg va gif formatli rasm fayllari qo’llaniladi. Chunki, birinchidan, web-sahifa hajmi kichik bo’lishi uchun, ikkinchidan, web-brauzerlar bu fayllarni qo’shimcha dasturlarsiz aks ettira oladi. Darhaqiqat, bmp formatli rasm faylini jpeg formatga o’tkazilsa, fayl hajmi bir necha barobar kichrayadi. Rasm faylini bir formatdan boshqasiga o’tkazish maxsus dasturlar (ACDSee, Photoshop,…) yordamida amalga oshiriladi.

Web-sahifaga rasm joylashtirish uchun juftmas tegi (image ing. tasvir) qo’llaniladi. Rasm faylini ko’rsatish uchun mazkur tegga SRC (source - manbaa) parametri qo’shilishi shart. Masalan, web-sahifaga joylashtirilayoygan rasm faylining nomi “mypic.jpg” bo’lsa, HTML-hujjatga quyidagi satr qo’shiladi:

,

bu yerda mypic.jpg SRC parametrining qiymati.

Avvalgi mavzularda matnni web-sahifada ALIGN parametri yordamida joylashtirish bilan tanishdingiz. Mazkur parametrni web-sahifada rasmni chap yoki o’ng tomonga joylashtirish uchun ham qo’llash mumkin. Aslida bu parametr rasm yoniga matnni turli holatlarda joylashtirish uchun qo’llaniladi, ammo rasm joylashgan satrda matn bo’lmasa, u rasmning joylashishiga ta’sir etadi. Masalan, yoki yozuvi “mypic.jpg” rasmni web-sahifaning o’ng tomoniga joylashtiradi.

Web-sahifada matn va rasmni ALIGN parametrining quyidagi jadvaldagi qiymatlariga mos holatlardan birida joylashtirish mumkin:

Masalan:

1. yozuvi web-sahifaga “kub.bmp” rasmini matnning joriy satrini eng katta elementiga tekislaydi:

2. yozuvi web-sahifaga “kub.bmp” rasmini o’ng hoshiyaga tegizib, rasmning yuqori chegarasi joriy satrning eng katta elementiga tekislaydi va joriy satr rasmni chap tomoniga yoziladi:

Shuni ta’kidlash joizki, web-sahifada matn va rasmning joylashish holatlari matn formatiga xos teglarning ishlatilishiga ham bog’liq, buni ko’rish uchun yuqoridagi misollardan ikkinchisida
tegini olib tashlashning o’zi kifoya.

Web-sahifaga rasm joylashtirishda uning o’lchamlarini ham tanlash mumkin. Buning uchun WIDTH (eni, ,kengligi) va HEIGHT (bo’yi, balandligi) parametrlaridan foydalaniladi. Mazkur buyruqlar yordamida web-sahifaga joylashtirilayotgan rasmning eni va bo’yi piksellarda yoki rasmning asl o’lchamiga nisbatan foiz hisobida beriladi. Rasmning o’lchamlarini foiz hisobida berilishi noqulay (ba’zi brauzerlar foizni qabul qilmaydi). Masalan,

yozuvi mypic.jpg fayldagi rasmning (yuqoridagi jadvaldagi 130x100 pikselli rasm) asl o’lchamlari qanday bo’lishidan qatiy nazar uni web-sahifaga 50x100 piksel o’lchamli qilib joylashtiradi:

Rasm o’lchamlarini kattalashtirish uning sifatini yomonlashishiga olib kelishini unutmang! Rasmni biror grafik muhharir yordamida kerakli o’lchamga keltirib olib, so’ngra web-sahifaga joylashtirish maqsadga muvofiqdir!

Web-sahifaga rasm joylashtirilganda uning atrofida bo’sh joy bo’lmasligi, ya’ni, ekranda bu rasmga matn yoki boshqa rasm “tegib” chiqishi mumkin (yuqoridagi 1-misol). Web-sahifadagi rasm atrofida bo’sh joy (bo’shliq – space) qoldirish (rasmdan chekinish) uchun HSPACE (rasmning chap va o’ng tomonidan bo’sh joy qoldiradi) va VSPACE (rasmning tepasi va tagidan bo’sh joy qoldiradi) buyruqlari qo’llaniladi. Qoldiriladigan bo’sh joy piksellarda beriladi. Masalan,

yozuvi web-sahifadagi (lola.jpg) rasmning o’ng, chap, tepa va pastki tomonlaridan kengligi 15 pikselga teng (ramkasimon) bo’sh joy qoldiradi:

Rasm atrofida (qora) ramka hosil qilish uchun BORDER (chegara) parametridan foydalaniladi. Bunda parametr qiymati sifatida ramka qalinligi piksellarda olinadi, ya’ni masalan: .

 IV. O’tilgan mavzuni mustahkamlash: (7 daqiqa)

O’tilgan mavzuni mustahkamlash maqsadida mustaqil ish ya’ni topshiriq usulidan foydalaniladi: Kichik guruhlarga topshiriqlar yozilgan kartotekalar tarqatiladi. Ular kompyuterdan foydalanib topshiriqni bajaradilar.(28-slayd)

Topshiriq

“Men sevgan kasb” nomli web-sahifaga kasbga oid rasmlar joylashtirib, rasmlar atrofida 15 pikselli ramka hosil qiling.

Topshiriq

“Mening oilam” nomli web-sahifaga oila a’zolaringiz kasbiga oid rasmlarni joylashtiring. Bunda turli joylashtirish usullaridan foydalaning.

Topshiriq

“Buyuk ajdodlarimiz” nomli web sahifaga ajdodlarimiz yutuqlarga erishgan sohaga mos rasmlarni turli o’lchamlarda joylashtiring

Kichik guruhlar o’zlari tayyorlagan web sahifani web brouzerda taqdim etib ko’rsatadilar va ball yig’adilar.

V. Baholash (2 daqiqa) Kichik guruhlarning jamlagan kartochkalaridagi ballar to’planadi. Guruhlarning jamlagan ballari bo’yicha o’quvchilar baholanadi.

VI. Uyga vazifa: (2 daqiqa) (29-slayd)

1. Mavzuni o’qish

2. Tayanch iboralarni o’rganish

3. “Mening yurtim” nomli web sahifa yarating, mavzuga oid rasmlar joylashtiring