HTML rasmlar
Rasmlar veb-sahifaning dizayni va tashqi ko‘rinishini yaxshilashi mumkin.
HTML rasmlar sintaksisi
HTML <img> tegi veb-sahifaga rasm joylashtirishda ishlatiladi.
Texnik jihatdan rasmlar veb-sahifaga kiritilmaydi; rasmlar veb-sahifalarga havola qilinadi. <img> tegi havola qilingan rasm uchun joy saqlaydi.
<img> tegi bo‘sh, u faqat atributlardan iborat va yopish tegi yo‘q.
<img> tegida ikkita majburiy atribut bor:
- src - Rasmga yo‘lni belgilaydi
- alt - Rasm uchun muqobil matnni belgilaydi
Sintaksis
<img src="url" alt="alternatetext">
src atributi
Majburiy src atributi rasmga yo‘lni (URL manzilni) belgilaydi.
Eslatma: veb-sahifa yuklanayotganda brauzer rasmni veb-serverdan olib, sahifaga joylashtiradi. Shuning uchun rasmning veb-sahifaga nisbatan joylashuvi o‘zgarmaganiga ishonch hosil qiling. Aks holda, tashrif buyuruvchilar buzilgan havola belgisini ko‘radi. Brauzer rasmni topa olmasa, buzilgan havola belgisi va alt matni ko‘rsatiladi.
alt atributi
Majburiy alt atributi, agar foydalanuvchi biror sababga ko‘ra rasmni ko‘ra olmasa (sekin aloqa, src atributidagi xato yoki foydalanuvchi ekran o‘quvchidan foydalangani uchun), rasm uchun muqobil matn taqdim etadi.
alt atributining qiymati rasmni tavsiflashi kerak:
Agar brauzer rasmni topa olmasa, u alt atributining qiymatini ko‘rsatadi:
Maslahat: ekran o‘qish dasturi HTML kodini o‘qib, foydalanuvchiga kontentni "tinglash" imkonini beradi. Bunday dasturlar ko‘rish yoki o‘rganishda qiyinchiliklari bo‘lgan insonlar uchun foydalidir.
Rasm o‘lchami — width va height
Rasmning kengligi va balandligini belgilash uchun style atributidan foydalanishingiz mumkin.
Misol
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
O‘zingiz sinab ko‘ring »
Shu bilan bir qatorda, width va height atributlaridan foydalanishingiz mumkin:
Misol
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
O‘zingiz sinab ko‘ring »
width va height atributlari doim rasmning kengligi va balandligini piksellarda belgilaydi.
Eslatma: rasmning width va height qiymatlarini doim belgilang. Agar width va height belgilanmasa, rasm yuklanayotganda veb-sahifa ko‘rinishi sakrab o‘zgarishi mumkin.
width va height yoki style?
width, height va style atributlari HTML’da hammasi haqiqiy (yaroqli).
Biroq, biz style atributidan foydalanishni tavsiya qilamiz. Bu uslublar jadvallari rasmlar o‘lchamini o‘zgartirishiga yo‘l qo‘ymaydi:
Misol
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
O‘zingiz sinab ko‘ring »
Boshqa papkadagi rasmlar
Agar rasmlaringiz kichik papkada (sub-folder) bo‘lsa, src atributida papka nomini ham kiritishingiz shart:
Misol
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
O‘zingiz sinab ko‘ring »
Boshqa server/veb-saytdagi rasmlar
Ba’zi veb-saytlar boshqa serverdagi rasmga ishora qiladi.
Boshqa serverdagi rasmga ishora qilish uchun src atributida absolyut (to‘liq) URL manzilni belgilashingiz shart:
Misol
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
O‘zingiz sinab ko‘ring »
Tashqi rasmlar haqida eslatmalar: Tashqi rasmlar mualliflik huquqi ostida bo‘lishi mumkin. Agar undan foydalanishga ruxsat olmasangiz, mualliflik huquqi qonunlarini buzgan bo‘lishingiz mumkin. Bundan tashqari, tashqi rasmlarni boshqara olmaysiz; ular birdan olib tashlanishi yoki o‘zgartirilishi mumkin.
Animatsion rasmlar
HTML animatsiyali GIF’larga ruxsat beradi:
Misol
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
O‘zingiz sinab ko‘ring »
Rasm havola sifatida
Rasmni havola sifatida ishlatish uchun <img> tegini <a> tegi ichiga joylashtiring:
Misol
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
O‘zingiz sinab ko‘ring »
Rasmni float qilish
Rasmning matnning o‘ng yoki chap tomoniga suzishiga imkon berish uchun CSS float xususiyatidan foydalaning:
Misol
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
O‘zingiz sinab ko‘ring »
Maslahat: CSS Float haqida batafsil ma’lumot uchun CSS Float darsligimizni o‘qing.
Keng tarqalgan rasm formatlari
Mana barcha brauzerlarda (Chrome, Edge, Firefox, Safari, Opera) qo‘llab-quvvatlanadigan eng keng tarqalgan rasm fayl turlari:
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Bob xulosasi
- Rasmni aniqlash uchun HTML
<img>elementidan foydalaning - Rasmning URL manzilini aniqlash uchun HTML
srcatributidan foydalaning - Rasm ko‘rsatilmaganda uning muqobil matnini aniqlash uchun HTML
altatributidan foydalaning - Rasm o‘lchamini aniqlash uchun HTML
widthvaheightatributlaridan yoki CSSwidthvaheightxususiyatlaridan foydalaning - Rasmning chapga yoki o‘ngga suzishiga imkon berish uchun CSS
floatxususiyatidan foydalaning
Eslatma: katta rasmlarni yuklash vaqt talab qiladi va veb-sahifangizni sekinlashtirishi mumkin. Rasmlardan oqilona foydalaning.
HTML rasm teglari
| Tag | Tavsif |
|---|---|
| <img> | Rasmni belgilaydi |
| <map> | Rasm xaritasini (image map) belgilaydi |
| <area> | Rasm xaritasi ichidagi bosiladigan sohani belgilaydi |
| <picture> | Bir nechta rasm resurslari uchun konteynerni belgilaydi |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
Video: HTML rasmlari
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!