آموزش تگ img در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ img در HTML با من همراه باشید.

تگ Img در HTML

تگ img همونطور که از اسمش مشخصه از کلمه ( Image ) گرفته شده است، تگی است که با استفاده از آن میتوان تصویر / عکس را در یک صفحه وب قرار داد.

پس ما به راحتی با استفاده از این تگ میتونیم عکسامون رو داخل صفحه قرار بدیم ، این تگ 2 صفت پرکاربرد داره به اسم های src و alt :

صفت Src : برای مشخص کردن آدرس URL فایل تصویر / عکس
صفت Alt : برای مشخص کردن یه توضیح کوتاه در مورد تصویر / عکس ( برای سئو ضروری و مفیده )

پیشنهاد میکنم حتما آموزش کار با تصاویر در HTML را مشاهده نمایید.

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

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره 1 : قرار دادن عکس در صفحه با استفاده از تگ IMG

<body>

<img src="images/cat.gif">

</body>

امتحان کنید

مثال شماره 2 : نحوه استفاده از صفت alt در تگ img

<body>

<img src="images/girls-1.jpg" alt="دختر سوار بر اسب">

</body>

امتحان کنید

مثال شماره 3 : تنظیم اندازه عرض و ارتفاع عکس

<body>

<img src="images/girls-1.jpg" width="300" height="194">

</body>

امتحان کنید

مثال شماره 4 : تنظیم اندازه عرض و ارتفاع عکس با استفاده از دستورات CSS

<body>

<img src="images/girls-1.jpg" style="width:300px; height:194px;">

</body>

امتحان کنید

مثال شماره 5 : عکس لینک دار ( یعنی بشه روی عکس کلیک کرد )

<body>

<a href="https://free-learn.ir">
 <img src="images/logo-1.png">
</a>

</body>

امتحان کنید

مثال شماره 6 : نحوه ایجاد نقشه تصویری در HTML

<body>

<img src="images/girls-1.jpg" usemap="#map">

<map name="map">
 <area shape="rect" coords="231, 31, 287, 195" href="https://free-learn.ir/" alt="سره اسب" title="سره اسب">
</map>

</body>

امتحان کنید

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ img در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	Edge
پشتیبانی	بله	بله	بله	بله	بله

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

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

نام صفت	مقدار	توضیح
alt	text	یک توضیح کوتاه درباره تصویر را مشخص میکند ( از نظر سئو خیلی مهم است )
crossorigin	anonymous use-credentials	اجازه نمایش تصاویر در ظرف کَنویس ( canvas ) از طریق دسترسی متقابل سایت مبدأ
height	pixels	مشخص کردن اندازه ارتفاع تصویر
ismap	ismap	برای ایجاد یک نقشه تصویری سمت سرور
longdesc	URL	مشخص کردن یک آدرس URL که حاوی اطلاعات بیشتری درباره تصویر می باشد
sizes	pixels	مشخص کردن اندازه تصویر در اندازه های مختلف صفحه نمایش
src	URL	مشخص کردن آدرس URL تصویر
srcset	URL	مشخص کردن آدرس URL فایل تصویر برای نمایش در اندازه های مختلف صفحه نمایش
usemap	mapname#	برای ایجاد / تعریف نقشه تصویری
width	pixels	مشخص کردن اندازه عرض تصویر

پشتیبانی از صفات و رویدادهای عمومی

تگ img از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

نکات و توضیحات

برای ایجاد نقشه های تصویری میتوانید از ابزار آنلاین فری لرن برای اینکار استفاده نمایید. برای مشاهده ابزار آنلاین تولید نقشه تصویری کلیک کنید.
استفاده از صفت alt و صفت src در تگ img بسیار مهم و ضروری می باشد، صفت src برای مشخص کردن مسیر فایل عکس و صفت alt برای مشخص کردن یک توضیح کوتاه ( که بتونه عکس رو توصیف کنه برای موتورهای جستجوگر مثه گوگل که برای سئو خیلی مفیده ) مورد استفاده قرار میگیرد.
در زبان HTML تگ img یک تگ تنهاست ( یعنی تگ پایانی برای بستن ندارد )