Mavzu: Web-sahifada grafika

Informatika-9-A,B,D,E,F. 55 – dars.
Mavzu: Web-sahifada grafika
Maqsad:
1) ta’limiy: o`quvchilarga HTML da rasmlar bilan ishlash haqida ma’lumot berish;
2) tarbiyaviy: o`quvchilarga estetik tarbiya berish;
3) rivojlantiruvchi: o`quvchilarda web-sahifaga rasm joylashtirish ko`nikmalarni rivojlantirish.
DTS: web-sahifaga rasm joylashtirish deskriptori, rasm o`lchami va chegarasini o`rnatishda ishlatiladigan buyruq hamda paramerlarni bilish.
I. Tashkiliy davr
1) salomlashish;
2) davomatni aniqlash.
II. Takrorlash

1. 
   HTML da nechta rangdan foydalanish mumkin?
   
2. 
   Web-sahifadagi shrift o’lchami qaysi teg yordamida belgilanadi?
   
3. 
   Web-sahifadagi shrift rangi qaysi teg yordamida belgilanadi?
   
4. 
   Web-sahifadagi matn rangi qaysi teg yordamida belgilanadi?
   
5. 
   tegi parametrlarining ishi haqida misollar keltiring.
   
6. 
   Web-sahifa fonini turli rangda belgilashni misollar yordamida ko’rsating.
   
7. 
   Web-sahifa foniga rasm joylashtirish haqida so’zlab bering.
   

III. Yangi mavzuni o`rganish.
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:

MIDDLE	Rasmning o’rtasi joriy (rasmdan keyingi) satrning tagiga tekislanadi
ABSMIDDLE	Rasmning o’rtasi joriy satrning o’rtasiga tekislanadi
BOTTOM	Rasmning quyi chegarasi joriy satrning tagiga tekislanadi
ABSBUTTOM	Rasmning quyi chegarasi joriy satrning tagchizig’iga tekislanadi
TOP	Rasmning yuqori chegarasi joriy satrning eng katta elementiga tekislanadi
LEFT	Rasm chap hoshiyaga tegib turadi, matn rasmni o’ng tomoniga yoziladi
RIGHT	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:

.