Images

Rasmlar veb-sahifaning dizaynini va tashqi ko’rinishini yaxshilashi mumkin.

Namuna

<img src="https://picsum.photos/200/300" alt="Test Image" />   

Natija 

alternatetext

 

HTML rasmlar sintaksisi

Rasmni veb-sahifaga joylashtirish uchun HTML <img> tegidan foydalaniladi.

Rasmlar veb-sahifaga texnik jihatdan kiritilmagan va ular  veb-sahifalarga bog'langan hisoblanadi.

<img>  tegi aslida bo'sh tag hisoblanadi, u faqat atributlardan tashkil topadi  va uning yopish tagi bo'lmaydi.

<img>  tegida ikkita majburiy atribut mavjud:

  • src - source so'zidan olingan bo'lib manba deb tarjima qilinadi. Ma'nosi  rasm turgan joy yoki rasm turgan linkni  bildiradi. 
  • alt - qandaydir teks yoziladi. Agar rasm topilmasa shu teks ko'rsatiladi.

Sintaksis

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

Namuna

<!DOCTYPE html>
<html>
<body>

 <img src="https://picsum.photos/id/237/200/300" alt="Rasm" >

</body>
</html>

Natija

Rasm

Rasm hajmi 

Rasmning  hajmi deganda biz uning  uzunligi (width)  va balandligi (height) o'lchamlari tushuniladi.

Rasmning kengligi va balandligini belgilash uchun siz  width va height atributlaridan foydalanishingiz mumkin.

Namuna


<!DOCTYPE html>
<html>
<body>

 <img src="https://picsum.photos/id/240/200/300" alt="Rasm" width="200" height="300">    

</body>
</html>

Natija

Rasm

 

Shu bilan bir qatorda, siz style atributidan foydalanib width va height qiymatlarini ko'rsatishingiz mumkin.

Namuna

<!DOCTYPE html>
<html>
<body>

 <img src="https://picsum.photos/id/25/200/300" alt="Rasm" style="width:200px; height:300px">    

</body>
</html>

Natija

Rasm

Width va Height, yoki Style?

width, height va style atributlari HTML-da hamma narsaga mos keladi.

Ammo ko'p  manbalarda style atributidan foydalanishni tafsiya etiladi. Bu stillar aralashganda rasm stili buzilib ketishini oldini oladi.

Namuna

<!DOCTYPE html>
<html>
 <head>
	<style>
 		img { 
  		     width: 100%; 
		    }
    </style>
 </head>
 <body>
 	
   <p> Bu yerda tepada style tegi orqali img ga width xususiyati yozilgan.</p>
   <p> Shu sababdan birinchi rasm ning stili buzilib ketgan.</p>
   
   <img src="https://picsum.photos/id/50/200/300" alt="HTML5 gif" width="128" height="128">

   <img src="https://picsum.photos/id/50/200/300" alt="HTML5 gif" style="width:128px;height:128px;">

 </body>
</html>

Image as a Link

Rasm bilan  linklarni birga ishlatish uchun  <a>  tagi ichiga  <img>  tagini joylashtiring.

Namuna

<!DOCTYPE html>
<html>
 <body>
   <h1> Rasm va Link </h1>
   <p> Rasm ustiga bosing </p>
   <a href="dasturlash.uz">
        <img src="https://picsum.photos/id/45/42/42" alt="Rasm" style="width:42px;height:42px;">
   </a>   
 </body>
</html>

Natija

Rasm

Odatiy rasm formatlari

Bu yerda barcha brauzerlarda qo'llab-quvvatlanadigan eng ko'p tarqalgan rasm fayl turlari.

Qisqartmasi     Fayl Formati Fayl kengaytmasi
 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

Mavzuning qisqacha bayoni.

  • Rasmni ko'rsatish  uchun HTML <img> elementidan foydalaning.
  • rasmni URL manzilini  ko'rsatish  uchun HTML src atributidan foydalaning.
  • Agar rasm ko'rsatilmasa,  alternativ matnni ko'rsatish uchun HTML  alt  atributidan foydalaning
  • Rasmni hajmini belgilash uchun HTML da kengligi (width) va balandlik (height) atributlaridan yoki  style atributida width va height xususiyatlaridan foydalaning.