• Kasblar
    • HTML
    CSS
    JavaScript
    PHP
    SQL
    Python
  • Bo'limlar
    • Yangiliklar
    Texnologiyalar
    Maqolalar

    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.