آموزش تگ img در HTML

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

آموزش تگ img در HTML

Free-Learn

تگ Img در HTML

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۴ : نحوه ساخت عکس لینک دار در HTML

امتحان کنید

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

امتحان کنید

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 این تگ باید بصورت زیر بسته شود.


Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ img را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.


Free-Learn