MohirDox

Ko'rinishi

HTML Rasmlar ​

Rasmlar veb-sahifaning dizayni va ko‘rinishini yaxshilaydi.

Misol Rasmlar ​

Italyan TrulliKurtkali qizChaniyadagi gullar
html
<img src="/pic_trulli.jpg" alt="Italyan Trulli">
<img src="/img_girl.jpg" alt="Kurtkali qiz">
<img src="/img_chania.jpg" alt="Chaniyadagi gullar">

HTML Rasmlar Sintaksisi ​

HTML <img> tegi veb-sahifaga rasm joylash uchun ishlatiladi.

Rasmlar texnik jihatdan sahifaga kiritilmaydi; ular sahifaga bog‘lanadi. <img> tegi rasm uchun joy ajratadi.

<img> tegi yopiluvchi tegga ega emas, faqat atributlardan iborat.

<img> tegida ikki majburiy atribut bor:

  • src - Rasmga yo‘lni ko‘rsatadi
  • alt - Rasm ko‘rinmasa, muqobil matn ko‘rsatadi

Sintaksis:

html
<img src="url" alt="muqobilmatn">

src Atributi ​

Majburiy src atributi rasmga yo‘lni (URL) ko‘rsatadi.

Eslatma: Veb-sahifa yuklanganda, brauzer rasmni serverdan olib, sahifaga joylaydi. Rasm joylashuvi o‘zgarmasligiga ishonch hosil qiling, aks holda mehmonlar buzilgan havola belgisini ko‘radi. Brauzer rasmni topa olmasa, buzilgan havola belgisi va alt matni ko‘rsatiladi.

html
<img src="/img_chania.jpg" alt="Chaniyadagi gullar">

alt Atributi ​

Majburiy alt atributi rasm ko‘rinmasa (sekin internet, src xatosi yoki ekranni o‘qiydigan dastur ishlatilsa) muqobil matn ko‘rsatadi.

alt atributining qiymati rasmni tavsiflash kerak:

html
<img src="img_chania.jpg" alt="Chaniyadagi gullar">

Brauzer rasmni topa olmasa, alt atributidagi matn ko‘rsatiladi:

html
<img src="wrongname.gif" alt="Chaniyadagi gullar">

TIP

Ekranni o‘qiydigan dastur HTML kodini o‘qiydi va foydalanuvchiga matnni "eshittiradi". Bu ko‘zi ojiz yoki o‘rganishda qiynaladiganlar uchun foydalidir.

Rasm o‘lchami - Kenglik va Balandlik ​

style atributi yordamida rasmning kengligi va balandligini belgilash mumkin:

html
<img src="/img_girl.jpg" alt="Kurtkali qiz" style="width:500px;height:600px;">

Yoki, width va height atributlaridan foydalanish mumkin:

html
<img src="/img_girl.jpg" alt="Kurtkali qiz" width="500" height="600">

width va height atributlari har doim piksellarda o‘lchamni belgilaydi.

WARNING

Rasmning kengligi va balandligini har doim belgilang. Agar belgilanmasa, sahifa yuklanayotganda titrash bo‘lishi mumkin.

Kenglik va Balandlik yoki Style? ​

width, height va style atributlari HTMLda to‘g‘ri ishlatiladi.

Lekin, style atributidan foydalanish tavsiya etiladi. Bu usulda rasm o‘lchamini uslub fayllari o‘zgartira olmaydi:

html
<!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>

Rasmlar Boshqa Papkada ​

Agar rasm boshqa papkada bo‘lsa, src atributida papka nomini ham ko‘rsatish kerak:

html
<img src=html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Rasmlar Boshqa Serverda/Yangi Saytda ​

Ba’zi saytlar rasmni boshqa serverdan oladi.

Boshqa serverdagi rasmga havola qilish uchun src atributida to‘liq (absolute) URL ko‘rsatiladi:

html
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

Eslatma: Tashqi rasmlar mualliflik huquqiga ega bo‘lishi mumkin. Ruxsat olmasdan ishlatsangiz, qonunni buzishingiz mumkin. Bundan tashqari, tashqi rasmlarni nazorat qila olmaysiz; ular o‘chirilishi yoki o‘zgartirilishi mumkin.

Animatsiyalangan Rasmlar ​

HTMLda animatsiyalangan GIFlar ishlatiladi:

html
<img src="programming.gif" alt="Kompyuter odam" style="width:48px;height:48px;">

Rasmni Havola Sifatida Ishlatish ​

Rasmni havola sifatida ishlatish uchun <img> tegini <a> tegiga joylashtiring:

html
<a href="default.md">
  <img src="smiley.gif" alt="HTML darsligi" style="width:42px;height:42px;">
</a>

Rasmni Oqizish (Float) ​

CSS float xossasi yordamida rasmni matnning o‘ngiga yoki chapiga oqizish mumkin:

html
<p>
  <img src="smiley.gif" alt="Smaylik" style="float:right;width:42px;height:42px;">
  Rasm matnning o‘ngiga oqadi.
</p>

<p>
  <img src="smiley.gif" alt="Smaylik" style="float:left;width:42px;height:42px;">
  Rasm matnning chapiga oqadi.
</p>

TIP

CSS Float haqida ko‘proq bilish uchun CSS Float Darsligi sahifasini o‘qing.

Mashhur Rasm Formatlari ​

Quyidagi rasm fayl turlari barcha brauzerlarda (Chrome, Edge, Firefox, Safari, Opera) qo‘llab-quvvatlanadi:

QisqartmaFayl FormatiFayl Kengaytmasi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

Bob Yakuni ​

  • HTML <img> elementi yordamida rasm belgilanadi
  • HTML src atributi yordamida rasm URLi ko‘rsatiladi
  • HTML alt atributi yordamida rasm ko‘rinmasa, muqobil matn ko‘rsatiladi
  • HTML width va height atributlari yoki CSS width va height xossalari yordamida rasm o‘lchami belgilanadi
  • CSS float xossasi yordamida rasmni chapga yoki o‘ngga oqizish mumkin

WARNING

Katta rasm fayllari sahifani sekinlashtiradi. Rasmlardan ehtiyotkorlik bilan foydalaning.

HTML Rasm Teglari ​

TegTavsifi
<img>Rasmni belgilaydi
<map>Rasm xaritasini belgilaydi
<area>Rasm xaritasida bosiladigan hududni belgilaydi
<picture>Bir nechta rasm manbalari uchun konteyner belgilaydi

TIP

Barcha HTML teglar ro‘yxatini ko‘rish uchun HTML Teglar Ma’lumotnomasi sahifasiga tashrif buyuring.