4. Web sahifada grafika.

Web sahifada grafika.

Reja:

1. Ob’ekt ulchamlari.

2. Rasm qo'yish.

3. Bajarish uchun mashiqlar.

Tayanch iboralar: img src, images, www, veb , http, width, height, border, alt, align.

  Internet bilan ishlovchi dasturlar tasvirlarni (grafik elementlar) ochish imkoniga ega bo'lishi bilan internetda mavjud sahifalarning deyarli barchasi tasvirli ahborotlarni nashir eta boshladi. Siz yaratgan veb sahifa qiziqarli va chiroyli dizayn asosiga qurilgan bo'lsa uning o'quvchilar soni shubhasiz ortadi. Tarvirlar yordamida harakatlanuvchi tugmalar va Gif animatziyalarni kiritish mumkin. Biroq tasvirlar bilan ishlashda ularni hajmi va formatiga etibor berish kerak. Hozirgi paytda internetga joylashtirilayotgan deyarli barcha sahifalarda ishlatilayotgan tasvirlar formati *.JPEG yoki *. GIF ni tashkil etadi. Bunga asosiy sabab, bu formatdagi tasvirlar hajmi juda ham oz. Bu formatdagi tasvirlar ishlatilganda Veb sahifa hajmi ortib ketmaydi va sizning veb sahifangizdan foydalanuvchi sahifani ochilishini uzoq vaqt kutmaydi.

Agar siz boshqa formatdagi tasvirlardan veb sahifani bezashda foydalansangiz uning hajmi ortib ketadi va undan foydalanuvchilarga sahifani ochishda muammolar keltirib chiqaradi. Veb safini bezatishda uning dizayiniga *.GIF formatdagi tasvirlardan foydalaning boshqa tasvirlar uchun *.JPEG dan foydalanishingiz mumkin.

Tasvir formatlari haqidagi batafsil malumot va ular bilan ishlash imkoniyatlari haqidagi ma'lumotlarni ushbu qo'llanmaning "Tasvirlar bilan ishlash" bo'limida tanishingiz mumkin. Bu bo'limda Adobe Photoshop tasvir tahrirlagich dasturi bilan ishlash usullari video misollar bilan izohlangan.

Endi HTML hujjatda tasvirlar bilan ishlovchi teglar va ularni vazifalari bilan tanishib chiqamiz:

< IMG SRC="image.gif" WIDTH=60 HEIGHT=70 BORDER=0 ALT="IMAGE" ALIGN=left>

HTMLhujjatning qaysi joyiga tegini joylashtirsangiz, osha joyda siz ko'rib turgandek tasvir hosil bo'lad. Yuqorida yozilgan tegiga etibor bersangiz, uni yopuvchi tegi yo'qligini sezasiz. Bu tegni yopish shart emas. Faqatgina uni ishlatishda talab qilinadigan shartlardan biri SRC. Usiz tasvir sahifada ochilmaydi. Qyyida tegi o'lchamlari tasnifini keltiramiz.

SRC

Bu o'lcham ortida tasvir nomi va joylashgan joyga yo'l ko'rsatiladi. Uning yordamida brauser tasvirni qidiradi va ochishga harakt qiladi. Standart holda veb sahifada ishlatilgan tasvirlar IMAGE papkasiga joylashtiriladi.

Veb sihifani oz kompuyteringizda yaratayotgan paytda tasvirga bo'lgan yo'lni quyidagi tartibda berasiz: C/Veb sahifa/Images/photo_01.gif bunda '/' belgisi papkalar nomlarini bir-biridan ajratish uchun ishlatiladi.

Agar siz qo'ymoqchi bo'lgan fayl HTML fayllar joylashgan papkada bo'lsa, u holda tasvir joylashgan papkaga yo'lni mana bunday ifodalash mumkin: Images/photo_01.gif

Veb sahifa internetga joylashtirilgan taqdirda tasvir joylashgan papkaga yo'l quyidagi tarzda ifodalanadi: http://www.veb sihifa nomi/Images/photo_01.gif

WIDTH

Tasvir eni o'lchamlarini pikselda belgilaydi. Agar orginal tasvir eni siz qo'ymoqchi bo'lgan joyga kattalik qilsa, siz uni bu teg yordamida uning enini qisqartirishingiz mumkin. Eng yahshi variant, tasvirni tasvir tahrirlagich dasturi yordamida oldindan kerakli hajimlarini belgilab olishdir. Siz tasvirlarni veb sahifaga joylashtirayotgan paytda har doim tasvir tahrirlagich dasturnii aktivlashtirib qo'ying va olchamlar to'g'ri kelmagan taqdirda uni tasvir bilan ishlovchi dastur yordamida qayta ishlang.

HEIGHT

Tasvir bo'yi o'lchamlarini kiritish uchun hizmat qiladi. Agar siz tasvirning real o'lchamlarini o'zgartirmoqchi bo'lsangiz unda: tasvir eni uchun WIDTH va tasvir bo'yi uchun HEIGHT teglaridan foydalanishingiz mumkin. Tasvir o'lchami 1 dan boshlab cheksiz sanoq sonlarni kiritishingiz mumkin.

Tasvir o'lchamlari ozgartirilganda qanday ko'rinishda bo'lishini ko'rmoqchi bo'lsangiz mana bu erga bosing.

 BORDER

Sahifaga kiritilgan tasvir atrofida chiziqli ramka hosil qiladi. Ramka qalinligin piksellar yordamida o'zgartiriladi. Ramka qalinligini sonlar bilan 1 dan cheksiz. Sahifada tasvir kiritigan maydondagi matn qaysi rangda bo'lsa tasvir ramkasi ham o'sha rangda bo'ladi.

ALT

Agar brauser yoki sahifani ochuvchi dastur tasvirlarni ochish imkoniga ega bo'lmagan taqdirda ushbu o'lchamdan so'ng kiritilgan matn aynan shu joyda tasvir borligidan habar beradi. Brauser tasvirlarni ko'rsatish imkoniga ega bo'lsa, tasvir ustiga kursor olib kelinganda ALT o'lchamidan so'ng qanday so'z kiritilgan bo'lsa shu so'z yoki jumla kursor ostida hozil bo'ladi. Bu o'lcham ostida tasvir bilan bo'g'liq bo'lgan turli qo'shimcha ma'lumotlar kiritish mumkin. Agar brauser tasvirni umuman ko'rsatmagan taqdirda, tasvir hosil bo'lishi lozim bo'lgan maydonda ALT o'lchamidan so'ng kiritilgan ma'lumot ekranda hosil bo'ladi.

ALIGN

Bu o'lcham grafik elemet sahifadagi boshqa elementlarga nisbatan joylashtirish o'rnini tekkislash uchun ishlatiladi. Yuqorida keltirilgan tasvir jadval va matnga nisbagftan ALIGN teng left. Bu tasvirni sahifaning chap burchagida jadval va matnga nisbatan joylashtirilsin komandasini anglatadi. ALIGN o'lchamining ishlatilishi mumkin bo'lgan qo'shimcha komandalari:

< IMG> tegi bilan bo'g'liq bolgan, quyida keltirilgan asosiy qoyidalar biloan tanishinb chiqing va oz sahifangizni yaratishda ushbu qoidalarga doim rioya qilishga harakat qiling.

• Tasvir nomi va joylashgan ornini yozganda harflarning bir hllida bolishini taminlash katta ahamiyatga ega.

Tasvir joylashgan joy nomi va tasvirning nomini kiritganda harflarni bir hilda yozilishi shart. Biror bir harfni tushrib qoldirish yoki hato yozilishi tasvirni ochishda hatoliklarni keltirib chiqaradi.

• Tasvir yoki papka nomini kiritganda probel ishlatmang.

Veb safifani yaratayotganingizda fayllar yoki papkalar nomini kiritganda probel (bo'shliq) ishlatmang. Agar siz kiritgan nom ikki yoki bir necha so'zlardan iborat bo'lsa, probel ornida _ (pastdan chiziqsha) ishlatishingiz mumkin. Masalan: .../Chet_elga_sayohat/Germaniya/Baden_baden_01.jpeg

• Internetda ishlatiluvchi tasvir formatlari.

Hozirgi paytda Internetda ikki hil formatdagi tasvirlar keng qollanilib kelinmoqda. Bu formatlar: GIF (bu formatdagi tasvirlar *.gif qisqartmasiga ega) hamda JPEG (bu formatdagi tasvirlar esa *. jpg yoki * .jpeg qisqartmasiga ega). Siz ham ushbu formatdagi tasvirlardan foydalaning. Boshqa formatdagi tasvirlarni aksariyat brauserlar ocha olmaydi.

• Har doim WIDTH va HEIGHT o'lchamlarini kiritishga harakat qiling.

Bu sizning veb sahifangizni ochilishini tezlashtiradi va tasvirlarni asl olchamda bo'lishini ta'minlaydi.

• Tasvir hajmini suniy kichraytirish.

WIDTH va HEIGHT orqali tasvirning real o'lchamini o'lchmlarini kichraytirish mumkin. Ammo bu usuldan iloji boricha kanroq foydalangan maqul. Eng yahshi usul tasvirni real o'lchamini tasvir tahrirlagich dastur yordamida kichraytirish. Bu usul tasvirning ochilish vaqtini kamaytiradi.

• Tasvir hajmini suniy kattalashtirish.

Tasvir olchami kattalashtirilganda yuki kichraytirilganda uning sifatida o'zgarish sodir bo'ladi. Agar siz olchamlarni o'zgartirganda bir hillikka etibor bermasangiz, tasvir sifatini buzilishiga olib keladi. WIDTH va HEIGHT olchamlari orqali tasvir hajmini kattalashtirganda, real o'lchamni 2 matra, 3 marta va shu tariqa oshishiga erishish kerak. Masalan tasvirning real olchami WIDTH = 100, HEIGTH 200 ga teng bo'lsa, uni ikki marta kattalashtirganda WIDTH=200, HEIGTH= 400 ga teng bo'lishi shart. Bu usul tasvir sifatidagi salbiy o'zgarishlarni bir oz yumshatadi. Shuningdek, ayni holatni tasvir o'lchamini kichraytirishda ham qo'llash maqsadga muvoffiq.

• Har doim ALT o'lchamini qo'llang.

Har doim ALT dan so'ng tasvirga aloqador qo'shimcha axborotni kiritishga harakat qiling. Bunnig asosiy sababi, siz joylashtirgan tasvir ochilmangan taqdirda, Internetdan foydalanuvchi siz kiritgan tasvir izohini o'qiydi va minimum axborotga ega bo'ladi.

Olgan nazariy bilimlaringizni amalda sinash vaqti keldi. Kompuyter hotirasida bavjud tasvirni HTML sahifaga joylashtirishga harakat qilamiz.

Notepad dasturini ochamiz va quyida keltirilgan teglarni yazamiz (nuqtalar o'rniga o'zingiz haqingizdagi kerakli ma'lumotlarni kiritib, tarjimai holingiz bitilgan sahifani yaratishingiz mumkin):