این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ img در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ img در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Img در HTML
تگ img همونطور که از اسمش مشخصه از کلمه ( Image ) گرفته شده است، تگی است که با استفاده از آن میتوان تصویر / عکس را در یک صفحه وب قرار داد.
پس ما به راحتی با استفاده از این تگ میتونیم عکسامون رو داخل صفحه قرار بدیم ، این تگ ۲ صفت پرکاربرد داره به اسم های src و alt :
- صفت Src : برای مشخص کردن آدرس URL فایل تصویر / عکس
- صفت Alt : برای مشخص کردن یه توضیح کوتاه در مورد تصویر / عکس ( برای سئو ضروری و مفیده )
پیشنهاد میکنم حتما آموزش کار با تصاویر در HTML را مشاهده نمایید.
Free-Learn
مثال از تگ img در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : قرار دادن عکس در صفحه با استفاده از تگ IMG
|
1 2 3 4 5 |
<body> <img src="images/cat.gif"> </body> |
مثال شماره ۲ : نحوه استفاده از صفت alt در تگ img
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" alt="دختر سوار بر اسب"> </body> |
مثال شماره ۳ : تنظیم اندازه عرض و ارتفاع عکس
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" width="300" height="194"> </body> |
مثال شماره ۴ : تنظیم اندازه عرض و ارتفاع عکس با استفاده از دستورات CSS
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" style="width:300px; height:194px;"> </body> |
مثال شماره ۵ : عکس لینک دار ( یعنی بشه روی عکس کلیک کرد )
|
1 2 3 4 5 6 7 |
<body> <a href="https://free-learn.ir"> <img src="images/logo-1.png"> </a> </body> |
مثال شماره ۶ : نحوه ایجاد نقشه تصویری در HTML
|
1 2 3 4 5 6 7 8 9 |
<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> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ img در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ 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 | مشخص کردن اندازه عرض تصویر |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ img از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- برای ایجاد نقشه های تصویری میتوانید از ابزار آنلاین فری لرن برای اینکار استفاده نمایید. برای مشاهده ابزار آنلاین تولید نقشه تصویری کلیک کنید.
- استفاده از صفت alt و صفت src در تگ img بسیار مهم و ضروری می باشد، صفت src برای مشخص کردن مسیر فایل عکس و صفت alt برای مشخص کردن یک توضیح کوتاه ( که بتونه عکس رو توصیف کنه برای موتورهای جستجوگر مثه گوگل که برای سئو خیلی مفیده ) مورد استفاده قرار میگیرد.
- در زبان HTML تگ img یک تگ تنهاست ( یعنی تگ پایانی برای بستن ندارد )
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ img را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
img { display: inline-block; } |
