O’zbekiston respublikasi oliy va o’rta maxsus ta’lim vazirligi farg’ona davlat universiteti fizika-matematika fakulteti

balandligi - Pikselda yoki foizda ko'rsatilgan - Rasm balandligini belgilaydi
kengligi - Pikselda yoki foizda ko'rsatilgan - Tasvirning kengligini belgilaydi.

Tasvirning balandligi va kengligini sozlash

Rasmning o'lchamlari balandlik va kenglik atributlaridan foydalanib aniqlanishi mumkin. Ushbu atributlarning qiymatlari piksellar soni yoki sahifa o'lchamiga nisbatan foiz sifatida belgilanadi. Quyidagi HTML kodini ko'rib chiqing. Birinchi teg, ushbu darslikning oldingi rasmlarida ko'rgan asl rasmning o'lchamlarini vertikal ravishda 60 piksel va gorizontal ravishda 60 piksel qilib belgilaydi. Ikkinchi teg bir xil rasmning kengligini sahifa kengligining 6% ga va balandlikni sahifa balandligining 10% ga o'rnatadi. Rasmda ikkala rasm ham brauzer oynasida qanday ko'rinishini ko'rsatadi.

Tasvirni o'z oynasida namoyish etish orqali brauzer piksel va foizlarda belgilangan qiymatlarni boshqarish bo'yicha teng darajada yaxshi ish qiladi. Ammo shuni yodda tutingki, veb-sahifangizga kiruvchilarning kompyuterlari ekran o'lchamiga qaraganda boshqacha bo'lishi mumkin. monitoringiz uchun o'rnatilgan. Bundan nima kelib chiqadi? Masalan, monitorda 800x600 o'lchamlari mavjud. Oldingi misolda veb-sahifaga qo'shilgan rasm sahifa kengligining 6% kengligida o'rnatildi, bu o'lchamlari 48 pikselni tashkil qiladi. Agar siz xuddi shu tasvirni 1024x800 o'lchamdagi monitorda ko'rsangiz, belgilangan 6% sahifa kengligi 61 pikselga teng kenglikka to'g'ri keladi.

Tasvirning o'lchamini o'zgartirganda, uning balandligi va kengligiga mos keladigan ikkala qiymatni ham unutmang. Agar siz ushbu qiymatlarning bittasini o'zgartirsangiz, tasvirning o'zi ekranda vertikal yoki gorizontal ravishda cho'ziladi. Shu bilan bir qatorda, grafik muharriri yordamida tasvir hajmini sozlash.

Rasmni tezroq yuklash illyuziyasini yaratishingiz mumkin. Rasmning o'lchamini o'zgartiriladimi yoki yo'qligidan qat'i nazar, har doim balandlik va kenglik atributlari uchun qiymatlarni kiriting, chunki ular brauzerga rasmni joylashtirish uchun sahifada qancha joy ajratilishi kerakligi haqida muhim ma'lumot beradi. Bunday holda, brauzer rasm uchun zarur bo'lgan joyni belgilashi va rasmning o'zi yuklanishini to'xtatmasdan boshqa sahifa elementlarini qurishni davom ettirishi mumkin. Bu sahifa tezroq yuklanayotgani haqida taassurot qoldiradi, chunki tashrif buyuruvchilar rasm to'liq yuklanmaguncha, sahifada keltirilgan boshqa ma'lumotlarni ko'rish uchun kutishlariga to'g'ri kelmaydi.

Agar siz haqiqatan ham rasmni sahifaning kengligi bo'ylab kerakli hajmga to'g'ri kelishini xohlasangiz, foizlardan foydalaning. Bunday holda, har qanday monitorning ekrandagi tasvir sizning sahifangizning ekranidagi kabi sahifani egallaydi. Agar siz tasvir aniqligi (piksel o'lchami) doimiy bo'lib qolishini xohlasangiz, piksel qiymatlaridan foydalaning.

Matn va grafikalarni tekislang

Teglarni tekislash xususiyatiRasmni matn chizig'ining o'ng (o'ng qiymati) yoki chap (chap qiymati) chetiga tekislash imkonini beradi. Ushbu atributdan foydalanish misollari rasmda keltirilgan.

Xuddi shu atributdan rasmni vertikal ravishda hizalash uchun foydalanish mumkin (yana matn satriga nisbatan). U uchta, shuningdek pastki va o'rtadagi boshqa qiymatlarni olishi mumkin. Agar hizalama atributi tepaga o'rnatilgan bo'lsa, rasmning yuqori qismi atrofdagi har qanday matnning tepasiga moslashtiriladi. Agar hizalama atributi pastga o'rnatilgan bo'lsa, rasmning pastki qismi atrofdagi matnning pastki qismi bilan hizalanadi. Agar hizalama atributi markazga o'rnatilgan bo'lsa, rasmning o'rtasi matn chizig'ining o'rtasiga hizalanadi.

Rasmlarni havolalar sifatida ishlatish

Rasmlar nafaqat veb-sahifa dizayni uchun yaxshi. Ular boshqa hujjatlarga giperhavolalar sifatida muvaffaqiyatli ishlatilishi mumkin. HTMLda bu juda oson, chunki rasmlar matn oynalari bilan bir xil tarzda giperhavolalarga aylanadi. Buning uchun siz boshqa hujjatga havola bo'lishi kerak bo'lgan veb-sahifa elementini o'z ichiga olgan tegni ham qo'llashingiz kerak. Shunday qilib, agar biron bir rasmni bosgandan keyin giperhavolaga o'tishni amalga oshirish kerak bo'lsa, ushbu rasmning yorlig'ini tegga qo'shish kerak.

Bunday holda, veb-sahifaga tashrif buyuruvchi rasm ustida harakatlangach, kursor yonida "Bu mening o'zimning portretim!" Matnli xabar paydo bo'ladi. Rasmni bosgandan so'ng, DOC2.htm hujjati ochiladi, u giperhavola ko'rsatiladi.

Rasm eskizlari

HTML-ning giperhavola olish qobiliyatidan yana bir keng tarqalgan foydalanish bu boshqalarga o'tish uchun ba'zi rasmlardan foydalanishdir. Bu nima uchun? Gap shundaki, ko'pincha veb-sahifada nashr qilmoqchi bo'lgan rasmlar hajmi juda katta va tashrif buyuruvchilar yuklashni tugatguncha kutishga sabr qilishlariga ishonch yo'q. Bunday hollarda, asl rasmning kichik bir nusxasi yaratiladi, u eskiz deb nomlanadi va uni brauzer tezroq ishlaydi. Agar tashrif buyuruvchi rasmga qiziqsa va uning to'liq nusxasini yuklab olishni istasa, u faqat ushbu rasmni bosishi kerak.

Tasvirlardan muvaffaqiyatli foydalanish sirlari

Rasmlar qiziqarli va jozibali, juda ko'p vizual ma'lumotlarga ega va veb-sahifalarga qo'shish juda oson, ammo agar siz haqiqatan ham Internet foydalanuvchilari orasida mashhur bo'lib ketadigan sayt yaratmoqchi bo'lsangiz, quyidagi qoidalarga amal qilishingiz kerak.

Tasvir faylining hajmi qanchalik katta bo'lsa, uni foydalanuvchi kompyuteriga yuklab olish uchun ko'proq vaqt kerak bo'ladi. Aksariyat Internet foydalanuvchilari hali ham Internetga kirish uchun past o'tkazuvchanlik havolalaridan foydalanganligi sababli, yuklab olish hajmi ular uchun haligacha muhimdir. Shuni yodda tuting va veb-sahifangizda rasmlarni iloji boricha kichkina saqlashga harakat qiling.

Bu nafaqat alohida rasmning fayl hajmi, balki butun HTML-hujjatning fayl hajmi ham muhimdir. Ko'proq rasmlar veb-sahifaga qo'shiladi, ular kichik bo'lsa ham, yakuniy hujjatning fayl hajmi shunchalik katta bo'ladi. Turli xil brauzerlarda sahifangizni oldindan ko'rib chiqing va har bir brauzerni yuklashga qancha vaqt ketishini taxmin qiling.

Alt atribut juda muhim bo'lganligi sababli (uni har bir teg uchun belgilash tavsiya etiladi), undan foydalanganda ehtiyot bo'ling. Matnli xabarning mazmuni har doim rasmning o'ziga mos kelishiga ishonch hosil qiling, aks holda sizning sahifangizga kiruvchilar adashishi mumkin. Xuddi shu eslatma qarama-qarshi yo'nalishda qo'llaniladi: rasmlarning veb-sahifadagi matnli ma'lumotlarga mos kelishiga ishonch hosil qiling. Samolyotning fotosurati havo sayohati joyida mos bo'lishi kerak va yovvoyi hayot joyida mutlaqo ortiqcha bo'ladi.

Internetda ko'plab qiziqarli rasmlarni topishingiz va ularni kompyuteringizda osongina saqlashingiz mumkin. Biroq, bu rasmlarning aksariyati mualliflik huquqi bilan himoyalangan. Agar siz o'zingiz yoqtirgan rasmni tijorat saytida topsangiz, u erda mualliflik huquqiga oid biron bir xabar bormi yoki yo'qmi, agar ushbu rasm bepul foydalanish uchun mavjud bo'lsa.

Agar veb-sahifadagi rasm mualliflik huquqi bilan himoyalanmagan bo'lsa, uni kompyuteringizga nusxalashingiz mumkin. Buni amalga oshirish uchun ushbu rasm ustiga sichqonchaning o'ng tugmasi bilan bosing va ochilgan menyudan Image Image as buyrug'ini tanlang. Tasvirni kompyuteringizga saqlaganingizdan so'ng, boshqa har qanday chizmalar singari undan foydalanishingiz mumkin.

Rasm qo'shish ikki bosqichda amalga oshiriladi: birinchidan, grafik fayl kerakli format va hajmda tayyorlanadi, so'ngra fayl element yordamida sahifada aks ettiriladi..

Fayl formatlari

Veb-grafika uchun ikkita format keng qo'llaniladi - PNG va JPEG. Ularning ko'p funktsionalligi, ko'p qirraliligi, sayt uchun etarli darajada sifatli oz miqdordagi dastlabki fayllar ularga ijobiy xizmat qildi, aslida ularni veb-rasmlar uchun standart sifatida belgilab qo'ydi. Ularga qo'shimcha ravishda, saytlar GIF va SVG formatlaridan foydalanadi.

PNG-8 formati

PNG-8 (Portable Network Grafika) - bu uzoq vaqtdan beri mulkiy algoritmlardan foydalangan GIF o'rnini bosadigan bepul format.

Xususiyatlari:

• 
  U 8 bitli palitradan (256 rang) foydalanadi, buning uchun u sakkiz raqamni o'z nomiga oldi. Bunday holda, faylda qancha rang saqlanishini tanlashingiz mumkin - 2 dan 256 gacha.
  
• 
  GIF-dan farqli o'laroq, u animatsiyani namoyish qilmaydi.
  

Qo'llash sohasi

PNG-24 formati

PNG-24 bu PNG-8 formatiga o'xshash format, ammo JPEG-ga o'xshash 24-bitli ranglar palitrasidan foydalanib, fotosuratlardagi ranglarning yorqinligi va ranglarini saqlab qoladi. GIF va PNG-8 singari, chizilgan rasmlar, logotiplar yoki rasmlar kabi tasvir tafsilotlarini saqlaydi.

Xususiyatlari:

• 
  Bir faylda taxminan 16,7 million rang ishlatiladi, shuning uchun ushbu format to'liq rangli rasmlar uchun ishlatiladi.
  
• 
  Ko'p darajali shaffoflikni qo'llab-quvvatlaydi, bu shaffofdan rangli joylarga silliq o'tishni yaratishga imkon beradi.
  
• 
  Ishlatilgan siqishni algoritmi boshqa formatlar bilan taqqoslaganda, rasmdagi barcha ranglar va piksellarni o'zgarishsiz saqlaganligi sababli, PNG-24 grafik faylning eng katta hajmiga ega.
  

Qo'llash sohasi

Shaffof va yarim shaffof joylarni o'z ichiga olgan fotosuratlar, chizmalar, ranglarning ko'pligi va tasvirlarning aniq qirralari.

JPEG formati

JPEG (qo'shma fotosuratlar bo'yicha mutaxassislar guruhi) - bu veb-sayt yaratishda va fotosuratlarni saqlashda keng foydalaniladigan mashhur rasm fayl formati. JPEG 24-bitli rangni qo'llab-quvvatlaydi va fotosuratlaringizdagi yorqinlik va ranglarni o'zgartirmaydi. Ushbu format yo'qolgan siqish deb nomlanadi, chunki JPEG algoritmi ma'lumotlarni tanlab rad etadi. Siqish, tasvirni buzishi mumkin, ayniqsa matn, nozik tafsilotlar yoki o'tkir qirralar bo'lsa. JPEG formati shaffoflikni qo'llab-quvvatlamaydi. Fotosuratni ushbu formatda saqlaganingizda, shaffof piksellar belgilangan rang bilan to'ldiriladi.

Xususiyatlari:

• 
  Rasmdagi ranglar soni taxminan 16,7 millionni tashkil etadi, bu rasmning fotosurat sifatini saqlab qolish uchun etarli.
  
• 
  Formatning asosiy xarakteristikasi "sifat" dir, bu sizga faylning yakuniy hajmini boshqarishga imkon beradi. Sifat 0 dan 100 gacha o'lchanadi, qiymati qanchalik katta bo'lsa, rasm yaxshiroq bo'ladi, lekin fayl hajmi ham ortadi.
  
• 
  Progressiv JPEG deb nomlangan texnologiyani qo'llab-quvvatlaydi, unda tasvirning past aniqlikdagi versiyasi tasvir to'liq yuklanmaguncha tomoshabinda paydo bo'ladi.
  

Qo'llash sohasi

Asosan fotosuratlar uchun ishlatiladi. Shaffof joylar, kichik tafsilotlar yoki matnni o'z ichiga olgan rasmlar uchun juda mos emas.

GIF formati

GIF (Graphics Interchange Format) - bu animatsion tasvirlarni yaratishda keng qo'llaniladigan grafik fayl formatidir. GIF 8 bitli rangdan foydalanadi va tasvir tafsilotlarini saqlab qolishda qattiq ranglarni samarali ravishda siqib chiqaradi.

Xususiyatlari:

• 
  Rasmdagi ranglar soni 2 dan 256 gacha bo'lishi mumkin, ammo 24 bitli palitradan har qanday rang bo'lishi mumkin. GIF faylida shaffof joylar bo'lishi mumkin. Agar oq rangdan tashqari fon ishlatilsa, u rasmdagi "teshiklar" orqali ko'rinadi.
  
• 
  Freym-by-frame tasvirlarini qo'llab-quvvatlaydi, bu esa oddiy animatsiyalar yaratish uchun formatni mashhur qiladi.
  
• 
  Yo'qotishsiz siqish usulini qo'llaydi
  

Qo'llash sohasi

Matn, logotiplar, o'tkir qirrali rasmlar, animatsion chizmalar, shaffof joylarga ega rasmlar, bannerlar.

SVG formati

SVG (Scalable Vector Grafika) - bu vektor formati, unda tasvir piksellardan emas, balki ob'ektlar va egri chiziqlardan iborat. Shu sababli, nuqta qismlardan iborat bo'lgan rastrli fotosuratlar uchun mos emas, lekin aniq konturlari bo'lgan rasmlar uchun juda yaxshi.

Xususiyatlari:

• 
  SVG formatidagi rasmlar kerak bo'lganda tasvir sifatini yo'qotmasdan o'lchanishi mumkin.
  
• 
  Fayl hajmi odatda kichikdir.
  
• 
  Animatsiya va interaktivlikni qo'llab-quvvatlaydi.
  

Qo'llash sohasi

Matn, logotiplar, o'tkir qirrali rasmlar

Muqobil matn

Shu bilan bir qatorda, matn rasmlarning muhim qismidir va ko'rish qobiliyati zaif odamlarga mo'ljallangan bo'lib, ular rasmlarni ko'ra olmaydilar va saytdan eshitish orqali ma'lumot oladilar. Maxsus ekran o'quvchilari saytdan matnni o'qiydilar va rasmlar o'rniga alt atributda yozilgan matnni aytadilar. An'anaviy brauzerlarda alt tarkib faqat rasmlar biron-bir sababga ko'ra veb-sahifada ko'rsatilmasa ko'rsatiladi.

Rasm hajmini o'zgartirish

Element rasmini o'lchamini o'zgartirish uchunkenglik (kenglik) va balandlik (balandlik) atributlari mavjud. Piksellar yoki foizlar qiymat sifatida ishlatiladi.

Kenglik va balandlik atributlari ixtiyoriydir, rasmni yuklaganingizdan so'ng brauzer avtomatik ravishda asl hajmini o'rnatadi. Ushbu atributlar asosan quyidagi maqsadlarda ishlatiladi:

• 
  rasm uchun joy ajratish;
  
• 
  katta fotosuratlar hajmini kamaytirish;
  
• 
  retina displeylari uchun tasvir sifatini yaxshilash.
  

Agar rasmning o'lchamlari aniq ko'rsatilgan bo'lsa, brauzer hujjatni yuklash paytida rasmga mos keladigan bo'sh joyni ko'rsatish uchun ulardan foydalanadi. Aks holda, brauzer rasmning to'liq yuklanishini kutadi va keyin rasmning kengligi va balandligini o'zgartiradi. Bunday holda, matn qayta formatlanishi mumkin, chunki dastlab rasmning hajmi noma'lum va u avtomatik ravishda kichik qilib o'rnatiladi.

Tasvirning kengligi va balandligi pastga va yuqoriga qarab o'zgarishi mumkin. Kerakli o'lchamdagi rasmni olish uchun brauzer keraksiz piksellarni o'zi o'chiradi yoki aksincha, etishmayotganlarni to'ldiradi. Olingan rasmning sifati uning tarkibiga juda bog'liqdir, har qanday holatda ham, tasvirni faqat filmda tafsilotlarini yo'qotmasdan cheksiz kattalashtirish mumkinligini yodda tutish kerak.

Retina displeylari yuqori pikselli zichlik va tasvir tafsilotlariga ega bo'lib, oddiy tasvirlar biroz yuvilib ketishini ta'minlaydi. Ularning sifatini oshirish uchun rasmlar ikki baravar kattaroq tayyorlanadi. Masalan, agar veb-sahifa kengligi 400 piksel bo'lgan fotosuratni talab qilsa, biz 800 piksel kengligida fotosurat olamiz, lekin kenglik atributi qiymatida 400 piksel kengligida qoldiramiz.

Kenglik va balandlik atributlari birgalikda borish shart emas. Agar ushbu atributlardan birortasi ko'rsatilmagan bo'lsa, brauzer avtomatik ravishda rasmning tomonlar nisbati asosida kerakli qiymatni o'zgartiradi.

Biz rasmning kengligi va balandligini mustaqil ravishda o'zgartirganimiz sababli, rasmni vertikal yoki gorizontal ravishda cho'zish orqali biz uning nisbatlarini ataylab buzib tashlashimiz mumkin.

Piksellardan tashqari, o'lchovlar sifatida foiz belgilaridan foydalanishga ruxsat beriladi. Bunday holda, kenglik ota elementga nisbatan.

Bunday hollarda balandlik bilan bog'liq qiyinchiliklar mavjud, chunki rasmning balandligi foiz sifatida, ota-onasining balandligi aniq belgilangan bo'lsa, hisoblanadi. Agar ona elementining balandligi biron bir tarzda ko'rsatilmagan bo'lsa, unda balandlik \u003d "100%" kabi yozuv hisobga olinmaydi.

Foydalanilgan adabiyotlar

1. M.Aripov, M.Muhammadaliyev, “Informatika texnologiyalar”. Darslik Toshkent, 2005

2. M.Mamajonov, S.Tursunov. “Kompyuter grafikasi va Web dizayn” Darslik.

Toshkent. “Cho’lpon”. 2013

3. U.Yo’ldashev, M.Mamajonov, S.Tursunov. “Pedagogik Web dizayn” O’quv qo’llanma.Tohkent. “Voris” 2013.

Internet saytlari

1. www.tdpu.uz

2. www.edu.uz

3. www.pedagog.uz

4. http:// www.intuit.ru