HTML Rasmlar

HTML Rasmlar


JPG Rasmlar

fashion

GIF Rasmlar

PNG Rasmlar

Graph

Namuna:

<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">
</body>
</html>

...   Har doim rasm kengligi va balandligini aniq belgilang. Agar rasm kengligi va balandligi aniqlanmasa, rasm yuklanganga qadar web sahifa titrashi, ya'ni sahifa kontenti o'z joyini o'zgartirib, o'ynashi mumkin.


HTML Rasm Sintaksisi

HTML da, rasmlar <img> tegi orqali aniqlanadi

<img> tegi bo’sh holatda bo’ladi, faqat uning ichida anilovchilar bo’ladi va yakunlovchi tag bo’lmaydi.

src attributi rasmning joylashish adresini belgilaydi:

<img src="url" alt="rasm_haqida_yozuv">

alt Atributi

alt atributi rasm ochilmagan holatda paydo bo’ladigan matn hisoblanadi

Agar foydalanuvchi ba’zi bir sabablarga ko’ra rasmni ko’ra olmaganda , alt atributi qo’shimcha ma’lumot bilan ta’minlaydi.

(sekin internet, rasmning adresi bilan bo’ladigan muammolar kabi). Agar brauzer rasmni topa olmasa, alt atributi orqali kiritilgan yozuvni ko’rsatadi

Namuna:

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

alt atributi majburiy. Web sahifa u siz amalga to’gri joriy qilinmaydi.


HTML Screen Reader

"Screen reader" sahifada ko’rsatilgan ma’lumotlarni o’quvchi darsur.

"Screen reader"lar ko’zi ojiz, ko’rishga qiynaladigan odamlar uchun juda foydali.

...   Screen reader alt attributi orqali kiritilgan yozuvni o’qiydi.


Rasm O’lchami - Balandligi va Kengligi

style atributi yordamida rasm kengligi va balandiligini aniqlashimiz mumkin.

Qiymatlar pikselda yoziladi.

Namuna:

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

Shu bilan bilan birgalikda width va height atributlaridan foydalanishingiz mumkin. Bu yerda qiymatlar standart holatda piksel ko’rinishida kiritilgan bo’ladi:

Namuna:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

Width va Height yoki Style?

HTML5 da height, width va style atributlarining barchasi bor.

Style atributi ko’pchilik tomonidan ma'qullangan. Bu rasmning haqiqiy rasmning hajmini o’zgarib ketishini oldini oladi.

Namuna:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    width:100%; 
}
</style>
</head>
<body>
    <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
    <img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>

Boshqa papkadagi rasmlar

Browser rasmni ko’rsatish uchun rasmning joylashuv adresini talab qiladi. Shunga qaramasdan, rasmlarni boshqa fayllarda saqlash mumkin.

Buning uchun "src" atributida rasm nomi va u joylashgan papka nomini yozish lozim:

Namuna:

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

Boshqa serverdagi rasmlar

Ayrim websaytlar rasmlarni serverlarda saqlaydi.

Va siz istalgan web sahifadagi rasmni o’z saytingizda qo’shib qo’ya olasiz:

Namuna:

<img src="http://www.keepgoing.uz/images/kg_logo.png" alt="KeepGoing.uz">

Animatsion rasmlar

Gif standartidagi rasmlar animatsion hisoblanadi.

Namuna:

<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Rasmni link sifatida ishlatish

Rasmni link sifatida ishlatish uchun <a> tegi ichkarisiga <img> tegini yozish orqali ishlatamiz

Namuna:

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

...   Internet Explorer 9(va undan oldigi versiyalari) brauzerlarida rasm chetida chegaralar bo’lmasligini oldini olish uchun, "border:0;" qo’shing.


Rasm Joylashuvi

Rasmni chap yoki o’ng tomonga joylashtirish uchun CSS ning float parametridan foydalaning

Rasm yozuvning o’ng yoki chap tomoniga joylashishi mumkin

Namuna:

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
Rasm yozuvning o'ng tomoniga joylashadi.
</p>

<p> 
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
Rasm yozuvning chap tomoniga joylashadi.
</p>

Rasm Xaritasi

<map> tegi rasm xaritasini ifodalaydi. Rasm xaritasi rasmning bosiladigan qismini belgilaydi.

<map> tegi bir qancha <area> tegini o’z ichiga oladi va <area> tegi rasmning bosiladigan qismlarini aniqlaydi.

Namuna:

<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">
    <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"></map>

Bo’lim xulosasi

  • HTML <img> ni rasmni aniqlashda ishlatiladi
  • HTML src attributi rasm adresini aniqlaydi
  • HTML alt attributi rasm
  • HTML width and height attributlari rasm hajmini aniqlaydi
  • CSS width and height rasm hajmini aniqlaydi
  • CSS float rasm chap yoki o’ng yoniga paragraf qo’yish uchun ishlatiladi
  • HTML <map> elementi rasm kartasi hisoblanadi
  • HTML <area> elementi rasmning bosiladigan qismiga ishlatiladi

...   Rasmlarni yuklash birmuncha vaqt oladi. Katta hajmdagi rasmlar sahifa yuklanishini sekinlashtiradi. Shuning uchun rasmlardan ehtiyotkorlik bilan foydalaning.


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017