آموزش html و css جلسه ۸ وارد کردن تصاویر در صفحات HTML

مطالب پیشنهادی برای شما مهمان عزیز

بنام خدا سلام ,

در خدمت شما هستم با جلسه ۸ آموزش html و css در این جلسه از آموزش html و css میخواهیم تگ img را خدمت شما آموزش بدم پس با من همراه باشید.

تگ img ، یکی از پرکاربردترین ترین تگ ها در زبان html به حساب میاد.

آموزش html و css جلسه ۸ وارد کردن تصاویر در صفحات HTML

شما اگر بخواهید در مرورگرتون عکسی به نمایش در بیاد ، باید از تگ img استفاده کنید.

آموزش html و css

خاصیت scr : این خاصیت مهمترین خاصیت تگ img می باشد.این خصوصیت آدرس عکس را شامل می شود.

تگ img در html

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است.
حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد،
شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) .
شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.

خاصیت alt

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

بیشتر بخوانید :
آموزش html و css خاصیت margin و padding جلسه 12 | پاسخ وردپرس |

مرورگرها همیشه تصویری را که توسط عنصر اشاره شده است نمایش نمی دهد. این مورد برای مرورگرهای غیر گرافیکی (از جمله کسانی است که توسط افراد مبتلا به اختلال بینایی استفاده می شود)، در صورتی که کاربر تصمیم به نمایش تصاویر نمی دهد یا اگر مرورگر نمی تواند تصویر را نمایش دهد، زیرا این نامعتبر است یا نوع نامشخص است . در این موارد، مرورگر ممکن است تصویر را با متن تعریف شده در altویژگی این عنصر جایگزین کند . شما باید برای این دلایل و دیگران، altهر زمان که ممکن باشد، ارزش مفیدی داشته باشید .

وارد کردن تصاویر در صفحات HTML

حذف این ویژگی به طور کلی نشان می دهد که تصویر بخش مهمی از محتوا است و هیچ معادل متنی در دسترس نیست. تنظیمات این ویژگی به یک رشته خالی ( alt=””) نشان می دهد که این تصویر است نه یک بخش کلیدی از محتوا، و که مرورگرهای غیر بصری ممکن است آن را از ارائه حذف.

ویژگی title در تگ img

علاوه بر alt که متن جایگزین تصویر است،
از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد،
درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید.

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش نمایش جدید ترین مطالب در سایدبار | پاسخ وردپرس |

وپژگی height در تگ img

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

وپژگی width در تگ img

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

در نظر داشته باشید که تگ img از فرمت های زیر پشتیبانی می کنید .

[checklist]

  • JPEG
  • GIF ، از جمله GIF های متحرک
  • PNG
  • APNG
  • SVG
  • BMP
  • BMP ICO
  • PNG ICO

[/checklist]

خوب دوست عزیز این جلسه از آموزش html و css همین جا به پایان رسید تا یکی دیگر از آموزش های وب سایت پاسخ وردپرس خدا نگهدار.

منتظر نظرات پیشنهادات شما عزیزان هستیم

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *