☰ Mundarija · Informatika

Web-sahifaga rasm va grafika joylash

Darslar 20 · 1 ta dars · N. I. Taylaqov (umumiy muharrir), A. B. Axmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatika va axborot texnologiyalari, 11-sinf, 1-nashr. «Extremum-press», Toshkent, 2018
20

Web-sahifalarga rasmli, grafikli ma’lumotlarni joylashtirish va bezash

Darslik: 73–76-betlar
MaqsadWeb-sahifaga rasm joylaydi (img tegi, src, alt, o‘lcham), rasm formatini va hajmini sahifa uchun tanlaydi hamda CSS yordamida sahifani ranglar, chegara va shrift bilan bezaydi.
Yangi so‘zlar
<img> tegi · <img> tag: puts a picture on the page; src gives the file and alt gives a text descriptionalt matn · alt text: a short description of a picture for screen readers and for when the picture does not loadCSS · CSS: the language that sets colours, fonts, sizes and layout of HTML elementskontrast · contrast: the difference in brightness between text and background; low contrast is hard to read
Tushuntirish

Web-sahifada tasvirlar HTML dagi <img> tegi bilan joylanadi: src atributi fayl yo‘lini, alt – rasmning qisqa matnli tavsifini, width va height – o‘lchamini (piksel) beradi. Rasm fayli sahifa bilan bir papkada bo‘lsa, yo‘l faqat fayl nomi bo‘ladi, boshqa papkada bo‘lsa «images/klub.jpg» kabi yoziladi. Veb uchun JPEG (fotosurat), PNG (shaffoflik va aniq chiziqlar), SVG (vektor, kattalashganda ham aniq) va zamonaviy WebP formatlari qulay. Rasmning fayl o‘lchami sahifa tezligiga ta’sir qiladi: 4000×3000 piksellik suratni 300 piksellik quti ichida ko‘rsatish uchun uni asl holida yuklash ortiqcha; yuklashdan oldin uni kerakli o‘lchamga kichraytirish (PhotoShopda Image → Image Size) va siqish kerak. Sahifaning ko‘rinishi CSS bilan beriladi: color – matn rangi, background – fon, border – chegara, padding – ichki bo‘sh joy, margin – tashqi bo‘sh joy, font-family – shrift, text-align – tekislash; qoidalar <style> ichida yoki alohida .css faylida yoziladi. Ranglar #RRGGBB (o‘n oltilik) kodi bilan beriladi. Matn va fon kontrasti yetarli bo‘lishi kerak: oddiy matn uchun kamida 4,5:1 tavsiya etiladi (oq matn #0b5cad fonda ≈ 6,7:1, #1e90ff fonda esa faqat ≈ 3,2:1, ya’ni juda katta sarlavha uchungina yetarli). Rasmni boshqa saytdan nusxalamang: muallif huquqiga rioya qiling, o‘zingizniki yoki erkin litsenziyali rasm ishlating.

Namunalar
Klub sahifasi: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>Maktab klubi</title> ⏎  <style> ⏎    body { font-family: Arial, sans-serif; background: #f4f8ff; margin: 0; } ⏎    header { background: #0b5cad; color: #ffffff; padding: 16px; text-align: center; } ⏎    .karta { width: 300px; margin: 20px auto; background: #ffffff; padding: 12px; } ⏎    img { max-width: 100%; height: auto; border: 3px solid #0b5cad; } ⏎  </style> ⏎ </head> ⏎ <body> ⏎  <header><h1>Informatika klubi</h1></header> ⏎  <div class="karta"> ⏎    <img src="klub.jpg" alt="Klub a’zolari kompyuter oldida" width="300" height="200"> ⏎    <p>Klub har juma kuni soat 15:00 da yig‘iladi.</p> ⏎  </div> ⏎ </body> ⏎ </html> «klub.jpg» sahifa bilan bir papkada bo‘lishi kerak; rasm bo‘lmasa, alt matn ko‘rinadi. max-width: 100% rasmni telefon ekranida ham sig‘diradi.
Hajm hisobi: sahifada har biri 2 MB li 5 ta rasm bo‘lsa, jami 10 MB = 80 Mbit; 10 Mbit/s tezlikda yuklanishi 80:10 = 8 soniya. Rasmlar 400 KB gacha kichraytirilsa, jami 2 MB = 16 Mbit va yuklanish 1,6 soniya bo‘ladi.
Sinfda faoliyat

«Tez va chiroyli sahifa»: juftliklar bitta katta fotosuratni PhotoShopda veb uchun kichraytirib (800 piksel eni), JPEG sifatida saqlaydi, hajmini oldingisi bilan solishtiradi va sahifaga alt matn bilan joylaydi.

Mashq
1
<img> tegining src, alt, width va height atributlari nimani bildiradi?
2
Sahifada 3 ta rasm bor, har biri 1,5 MB (jami 4,5 MB). 9 Mbit/s tezlikda yuklanish necha soniya (1 bayt = 8 bit)?
3
«gul.png» rasmini 200 piksel enda, «Qizil gul» alt matni bilan joylash uchun HTML qatorini yozing.
4
Nima uchun katta fotosuratni brauzerda width bilan kichraytirib ko‘rsatish o‘rniga, avval faylning o‘zini kichraytirish yaxshi?