آموزش و يادگيري تگ img در HTML

در اين بخش از دوره آموزش HTML در آموزش دون ، با تگ <img> آشنا مي‌شويم. اين تگ براي نمايش تصاوير در صفحات وب استفاده مي‌شود و يکي از پرکاربردترين تگ‌هاي HTML است.

تگ img در HTML چيست؟

تگ <img> براي درج تصاوير در صفحه وب استفاده مي‌شود. اين تگ يک عنصر خالي (self-closing) است و شامل ويژگي‌هايي مانند مسير تصوير، متن جايگزين، عرض و ارتفاع مي‌باشد.

مثال ساده از تگ img

<img src="images/logo.png" alt="لوگوي سايت" width="200" height="100">

در اين مثال تصوير لوگو با عرض 200 پيکسل و ارتفاع 100 پيکسل نمايش داده مي‌شود و متن جايگزين براي دسترسي بهتر قرار گرفته است.

ويژگي‌هاي مهم تگ img

ويژگي	توضيح
src	آدرس تصوير
alt	متن جايگزين براي دسترسي و زماني که تصوير بارگذاري نمي‌شود
width	عرض تصوير
height	ارتفاع تصوير
title	عنوان تصوير که هنگام هاور نمايش داده مي‌شود

مثال با استايل CSS

<style>
  img {
    border: 2px solid #2196f3;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
  }
</style>

<img src="images/logo.png" alt="لوگوي سايت">