آموزش تگ img در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ img در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Img در HTML
تگ img تگی است که با استفاده از آن میتوان تصویر / عکس را در صفحه وب ایجاد / قرار داد.
پس ما به راحتی با استفاده از این تگ میتونیم تصاویر را در صفحه ی وبمون قرار بدیم ، این تگ ۲ صفت بسیار مهم و ضروری دارد به اسم های src و alt که همیشه باید از این صفات در این تگ استفاده نمود.
- صفت Src : برای مشخص کردن مسیر / محل فایل تصویر
- صفت Alt : برای تعیین یک متن جایگزین برای تصویر ( این متن مثه شناسنامه برای تصویر میمونه )
پیشنهاد میکنم حتما آموزش کار با تصاویر در HTML را مشاهده نمایید.
Free-Learn
مثال از تگ img در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : قرار دادن عکس در 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/cat.gif" alt="mycat"> </body> |
مثال شماره ۳ : تنظیم اندازه عرض و ارتفاع عکس
|
1 2 3 4 5 |
<body> <img src="images/girls-1.jpg" width="300" height="194"> </body> |
مثال شماره ۴ : نحوه ساخت عکس لینک دار در HTML
|
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 10 11 12 13 14 |
<body> <img src="images/image-map.jpg" usemap="#freelearn"> <map name="freelearn"> <area shape="rect" coords="101, 48, 299, 170" href="link1.html"> <area shape="rect" coords="62, 198, 109, 225" href="link2.html"> <area shape="rect" coords="118, 196, 165, 224" href="link3.html"> <area shape="rect" coords="174, 198, 220, 223" href="link4.html"> <area shape="rect" coords="232, 198, 280, 222" href="link5.html"> <area shape="rect" coords="289, 198, 335, 225" href="link6.html"> </map> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ img در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ img در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت
یعنی در HTML5 پشتیبانی نمی شود.)
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| 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 | برای مشخص کردن اندازه عرض تصویر. |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ img از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
استفاده از صفت alt و صفت src در تگ img بسیار مهم و ضروری می باشد، صفت src برای مشخص کردن مسیر فایل عکس و صفت alt برای مشخص کردن یک متن جایگزین ( که بتونه عکس رو توصیف کنه برای موتورهای جستجوگر ) مورد استفاده قرار میگیرد.
در HTML تگ img یک تگ تنهاست (یعنی تگ پایانی ندارد) ولی در XHTML این تگ باید بصورت زیر بسته شود.
|
1 |
<img /> |
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ img را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 |
img { display: inline-block; } |
