Web- sahifa yaratish usullari

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   matnning   o’zaro   joylashish   holatlari,   rasmni   joylashtirish   imkoniyatlari   haqida  web   sahifada   grafikadan   foydalanish,   rasm   va 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. 3. FONT tegi yangi qatorga o’tishni bildiradi? (yo’q) 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. 7. 8. 9. HTML tili buyruqlari teglar deb yuritiladi?(ha) Bloknot dasturi Microsoft Officce dasturlari tarkibiga kiradi? (yo’q) HTMLda shrift o’lchamlari 7 xil? (ha) 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) Teg(deskriptor)lar juft yoki toq bo’ladi? (ha) 14. 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) Left,  Right, Middle, Buttom shrift turini aniqlovchi teglar? (yo’q) 18. 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) Yangi mavzuga oid terminlar o’quvchilarning  lug’at  daftarlariga yozdiriladi. 9­slayd  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 Web­sahifada matn va rasmni ALIGN parametrining quyidagi jadvaldagi qiymatlariga mos holatlardan birida joylashtirish mumkin: MIDDLE Rasmning   o’rtasi   joriy   (rasmdan   keyingi)   satrning   tagiga tekislanadi ABSMIDDLE Rasmning o’rtasi joriy satrning o’rtasiga tekislanadi BOTTOM ABSBUTTOM Rasmning quyi chegarasi joriy satrning tagchizig’iga tekislanadi TOP Rasmning yuqori chegarasi joriy satrning eng katta elementiga Rasmning quyi chegarasi joriy satrning tagiga tekislanadi LEFT RIGHT tekislanadi Rasm chap hoshiyaga tegib turadi, matn rasmni o’ng tomoniga yoziladi Rasm o’ng hoshiyaga tegib turadi, matn rasmni chap tomoniga yoziladi 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