آموزش HTML – تگ img

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/10 | بخش : آموزش HTML

تعریف و کاربرد تگ img در HTML

تگ img تگی است که با استفاده از آن می توان تصویر یا عکس را در صفحه وب قرار داد.

  • تگ <img> یک تصویر در صفحه HTML تعریف می کند.
  • تگ <img> دو خصوصیت الزامی دارد که شامل: src و alt است.
  • از لحاظ فنی تصاویر داخل سند HTML قرار داده نمی شوند، بلکه تصاویر به سند HTML لینک می شوند. تگ <img> فضایی برای نمایش تصویر ایجاد می کند.
  • برای لینک کردن یک تصویر به آسانی می توان تگ <img> را در تگ <a> قرار داد.

 

پس ما به راحتی با استفاده از تگ <img> میتونیم تصاویر را در صفحه ی وبمون قرار بدیم ، تگ <img> دو  صفت بسیار مهم و ضروری دارد به اسم های src و alt که همیشه باید از این صفات در این تگ استفاده نمود.

  • صفت Src : برای مشخص کردن مسیر / محل فایل تصویر
  • صفت Alt : برای تعیین یک متن جایگزین برای تصویر

 

تفاوت بین HTML 4.01 و HTML5

خصوصیت های: align ،border ،hspace ،longdesc و vspace در HTML5 پشتیبانی نمی شود.

 

تفاوت بین HTML و XHTML

در HTML تگ <img> تگ پایانی ندارد.

در XHTML تگ <img> باید با یک تگ پایانی بسته شوند.

<img />

 

مثال از تگ img در HTML

<img src="https://www.sitekade.com/wp-content/uploads/2020/01/html-tag-img_-_sitekade.com_.jpg" width="350" height="280" alt="آموزش htm تگ img"> 

تمرین کنید !

 

پشتیبانی مرورگرها از تگ <img>

Element
<img> بله بله بله بله بله

 

جدول صفات تگ img در HTML

نام صفت  مقدار توضیح
align top
bottom
middle
left
right
تراز یا موقعیت قرار گیری تگ IMG را مشخص می کند.
alt text یک متن جایگزین را برای تصویر مشخص میکند. (از نظر سئو خیلی مهم است)
border pixels یک خط صاف را به دور لبه های تصویر می کشد.
crossorigin anonymous
use-credentials
اجازه نمایش تصاویر در ظرف کَنویس ( canvas ) از طریق دسترسی متقابل سایت مبدأ.
height pixels برای مشخص کردن اندازه ارتفاع تصویر.
hspace pixels یک فاصله (فضای خالی) را از سمت راست و چپ تصویر اضافه می کند.
ismap ismap برای ایجاد یک نقشه تصویری.
longdesc URL یک مسیر/آدرس که حاوی اطلاعات بیشتری درباره تصویر می باشد را مشخص می کند.
sizes pixels اندازه تصویر را حالت های مختلف یک صفحه مشخص می کند.
src URL مسیر/آدرس/سورس تصویر را برای نماش مشخص می کند.
srcset URL مسیر/آدرس فایل تصویر برای نمایش در حالت های مختلف صفحه نمایش.
usemap mapname# برای ایجاد/تعریف نقشه تصویری.
vspace pixels یک فاصله (فضای خالی) را از سمت بالا و پایین تصویر اضافه می کند.
width pixels برای مشخص کردن اندازه عرض تصویر.