
Rasmlar yuklash

----------

I) Rasm yuklashning qoidalari:

<img> tagini ishlatamiz, bu tagni yopuvchi tagi yo'q, attributelaridan eng muhimi "src" (source-manba) dir u quyidagicha yoziladi <img src=" " />, qo'shtirnoq ichiga rasm nomi formati bilan yoziladi. 
web sahifangizga yuklamoqchi bo'lgan rasmingiz web sahifangiz saqlangan papka ichida bo'lgani yaxshiroq agar web sahifangiz papkasida bo'lmasa rasm manzilini to'g'ri ko'rsatishingizga to'g'ri keladi. masalan D diskda "Photos" papkasi bor uning ham ichida "My Phootos" papkasi bor va uning ichida "tabiat" deb nomalangan rasm JPEG formatda saqlangan, shunda uning manzili quyidagicha yo'ziladi: <img src="D:\Photos\My Photos\tabiat.jpeg" />. Nafaqat rasm balki barcha siz web sahifangiz uchun ishlatmoqchi bo'lgan dokumentlar bitta papkada saqlanib turgani yaxshidir, chunki rasm yoki boshqa narsaning manzili boshqa papkada bo'lsa uni o'rni almashinishi mumkin shunda HTML dokument siz ko'rsatgan manzil o'zgarsa rasmni yuklay olmaydi oqibatda hato chiqadi. 
Har qanday rasmning ustiga sichqonchaning o'ng tugmachasini bosib "properties (свойства)" dan uning manzilini bilib olsa bo'ladi. 
agar siz yuklamoqchi bo'lgan rasm web sahifangiz saqlangan papka ichida bo'lsa uning nomini yozishiz kifoya, yani <img src="tabial.jpeg" /> 
rasmingiz manzili scr="_" qo'shtirnoq ichida yozilishi shart.
rasmingiz formati rasm nomidan keyin albatta yozilishi kerak, masalan: "rasm.jpeg" , "rasm.jpg" , "rasm.png" , "rasm.gif" 
hohlagan web sahifada uchratgan rasmingizni ham yuklashingiz mumkin buning ikki yo'li bor: 
birinchisi avval u rasmni o'zingizni papkangizga yuklab olishingiz, rasm ustiga sichqonchaning o'ng tugmachasini bosib "Save Picture As" orqali, unda rasm sizniki bo'ladi va rasm manzili o'ziz rasmni boshqa joyga ko'chirib o'zgartirmagunizcha o'zgarmaydi. 
yoki har qanday web sahifadagi rasm ustiga sichqoncha o'ng tugmasini bosib "Copy Link Address" ni tanlab rasm manzilini ko'chirib <img src="_" /> dagi "src" attribute qiymati sifatida qo'shtirnoq ichiga "Ctrl+V" yoki sinchqoncha o'ng tugmachasini bosib "Paste" ni tanlab rasm manzilini ko'chirishimiz mumkin. Bu usulning yomon tarafi shundaki, agar siz rasmini ko'chirgan web sahifa o'sha rasmni boshqasiga almashtirsa yoki olib tashlasa sizni web sahifangizdagi rasm yo'q bo'lib ketadi, chunki rasm manzil va rasm nomlanishi o'zgarishi mumkin.

II) <img /> Attributelari 

<img> ning attributelari birga kelganda orasida vergul shart emas hamma attributlar qatori, ularning joylashuv o'rni ham ahamiyatsiz. Quyida o'sha asosiy attributelar:
src=" " - SOURCE deganidir tarjimasi manba deganidir, qiymati sifatida rasm manzili va nomi yozilishi shart bo'lgan attribute, bu attributesiz rasmni yuklab bo'lmaydi. Ushbu rasmning HTML kodi: <img src="Tree.jpg" height="120" width="150" />




align=" " - ALIGN tarjimasi saflash deganidir, uning asosiy qiymatlari "bottom", "middle", "top","left", "right", bu qiymatlar yordamida rasmimizning web sahifamizda u rasmni o'rab turgan matnga nisbatan joylashish o'rnini belgilashimiz mumkin. Quyida rasmlarning matnga nisbatan joylashuvi ko'rsatilgandir (matnnning o'ziga e'tibor bermang shuchaki yozilgan halos), biroq CSS yordamida bu joylashuvning imkoniyatlari ancha kengdir. <img src="rasm1.jpg" align="left" />

border=" " - BORDER chegara deganidir, bu attribute rasmimiz tashqarisini chegaralaydi, uning qiymati sifatida tartib raqamlar yoziladi (butun sonlar), va bu raqamlar tashqi chizig'ining qalinligini biliradi. Agar qo'shtirnoq bo'sh qoldirilsa chegara qo'yilmaydi eng kichik qiymat "1", "2" undan qalinroq. Quyidagi rasmning HTML kodi: <img src="Forest.jpg" width="150" height="120" border="5"/>

alt=" " - ALTERNATIVE degan tarjimaga ega, bu attribute agar rasm ba'zi sabablarga ko'ra browserga yuklanmi qolsa o'rnida yozilishi kerak bo'lgan istalgan so'z yoki biron iboradir, masalan alt="Bu yerda kitob rasmi bo'lishi kerak edi!". Quyidagi rasm HTML kodi: <img src="rasm11.jpg" width="150" height="120"border="5" alt="Bu yerda kitob rasmi bo'lishi kerak edi!"/>

width=" " - WIDTH rasm kengligi yoki bo'lmasam eni degan tushunchani beradi, uning qiymatlari "pixel" da belgilanadi, masalan width="300" rasmning enini 300 pixel qilib belgilaydi. "pixel" deb yozish shart emas. Quyidagi rasm HTML kodi: <img src="Autumn Leaves.jpg" width="300" height="200" />

height=" " - HEIGHT (balandlik) esa rasmning bo'yini belgilaydi bu attributening ham qiymatlari pixelda belgilanadi, masalan height="200", rasmning enidan bo'yini ozgincha pixel o'lchami kichiroq rasmlar chiroyli ko'rinishga egadir. Quyidagi rasm HTML kodi: <img src="Autumn Leaves.jpg" width="300" height="200" />

hspace=" " - HORIZONTAL SPACE (gorizontal bo'sh joy), attribute qiymatiga qarab rasmni hajmini o'zgartirmagan holda rasmning o'ng va chap tarafidan atrofida o'rab urgan matn va boshqa narsalarga nisbatan bo'sh joy tashlaydi. Qiymati sifatida pixel olingandir. Quyidagi rasm HTML kodi: <img src="Autumn Leaves.jpg" width="300" height="200" hspace="50" align="middle" />

vspace=" " - VERTICAL SPACE (vertikal bo'sh joy), attribute qiymatiga qarab rasmni hajmini o'zgartirmagan holda rasmning tepa va pastki qismidan atrofida o'rab turgan matnga nisbatan bo'sh joy tashlaydi. Qiymati sifatida pixel olingandir. Quyidagi rasm HTML kodi: <img src="Autumn Leaves.jpg" width="300" height="200" vspace="50" align="middle" />

III) Thumb-nail uslubida rasm yuklash 

Thumb-nail (thumb - bosh barmoq, nail-tirnoq, to'g'risi nima maqsadda bunday nomlanganini bilmayman) uslubi rasmlar uchun web sahifalarda juda ko'plab ishlatiladigan uslubdir. Bu asosan juda ko'p rasmlarga ega web sahifalarda qo'l kelishi mumkin. Chunki rasmlar web sahifalarda paydo bo'lib yuklanishi uchun azgincha vaqt ketadi ayniqsa Dial-up hizmatidan foydalanuvchilar uchun bu narsa ancha muammodir, buni hisobga olgan holda rasmlarni kichikroq qilib (tez yuklanishi uchun) web sahifada ko'rsatib asl holati uchun alohida link (bog'lovchi) ulab qo'yamiz shunda agar tashrif buyuruvchiga rasmning asl holi kerak bo'lsa kichik rasm ustiga sichqoncha bilan bossa u ikkinchi oynada asl holatda paydo bo'ladi. Shuningdek, bitta rasmning o'rniga thumb-nail uslubi bilan ikkita rasm bog'lasa ham bo'ladi. Yani bir rasmni web browserda kichikroq holati ko'rsatiladi agar rasm ustiga sichqoncha bilan bosilsa u ikkinchi rasmni boshqa oynada ochadi. Shu yerda bir narsani takidlamoqchi edim, iloji boricha rasmlarni web sahifangizga kamroq joylashtiring ayniqsa katta hajmdagilarini chunki ba'zi tashrif buyuruvchilar rasmlarni yuklanishini kutmasdan yopib yuborishlari mumkin. 

1. bitta rasmni thumb-nail uslubi bilan ochish:

yodizda bo'lsin "width" va "height" <img> attributelari shuning uchun ular <img> tagi ichida bo'lishi kerak, qiymatlari rasm o'lchamlaridir. Qaysi o'lchmga qo'yish sizni hohishingizdir. Men quyidagi rasmning enini 300 pixel, bo'yini esa 250 pixel qilib belgilab oldim, ushbu o'lchamlik rasm web sahifada ko'rinadi, asl holati ustiga boshganda chiqadi.
<a href="tabiat.jpg"> <img src="tabiat.jpg" width="300" height="250" / ></a>

2. ikkita rasmni thumb-nail uslubi bilan ochish: 

Quyidagi rasm HTML kodi: <a href="rasm_1.jpg"><img src="rasm_2.jpg" width="300" height="200" /></a>

Downloaded from http://test1.ru