ویژگی های برچسب IMG

استفاده از برچسب HTML IMG برای تصاویر و اشیاء

برچسب HTML IMG بر روی درج تصاویر و دیگر اشیا گرافیکی استاتیک در یک صفحه وب مدیریت می کند. این برچسب مشترک، چند ویژگی اجباری و اختیاری را پشتیبانی می کند که توانایی شما برای طراحی یک وب سایت متمرکز بر تصویر را جذابیت می بخشد.

یک مثال از HTML IMG به طور کامل تشکیل شده است به شرح زیر است:

برچسب های مورد نیاز IMG

SRC تنها ویژگی که شما نیاز دارید یک تصویر برای نمایش در یک صفحه وب دریافت کنید، ویژگی SRC است. این ویژگی نام و مکان فایل تصویری را که نمایش داده می شود شناسایی می کند.

ALT برای نوشتن XHTML معتبر و HTML4، ویژگی ALT نیز مورد نیاز است. این خصیصه برای ارائه مرورگرهای غیرمستقیم با متن است که تصویر را توصیف می کند. مرورگر متن جایگزین را به روش های مختلف نمایش می دهد. بعضی از آنها هنگامی که ماوس خود را بر روی تصویر قرار می دهد، آن را به صورت پاپ آپ نشان می دهد، دیگران آن را در ویژگی های خود نشان می دهد هنگامی که شما بر روی تصویر کلیک راست کرده و برخی دیگر آن را نمایش نمی دهد.

از متن alt برای ارائه جزئیات بیشتر در مورد تصویر که مربوط به متن صفحه وب نیستند استفاده کنید. اما به یاد داشته باشید که در صفحه خوانندگان و سایر مرورگرهای متن فقط متن با بقیه متن در صفحه خوانده می شود. برای جلوگیری از سردرگمی، از متن توصیفی alt استفاده کنید که به جای «لوگو» فقط (به عنوان مثال)، «درباره طراحی وب و HTML» می گوید.

در HTML5، ویژگی ALT همیشه مورد نیاز نیست، زیرا شما می توانید از یک عنوان برای اضافه کردن توضیحات بیشتر به آن استفاده کنید. شما همچنین می توانید از attribute ARIA DESCRIBED برای نشان دادن یک ID که شامل یک توضیحات کامل است استفاده کنید.

اگر تصویر کاملا تزئینی است، مانند یک گرافیک در بالای صفحه وب یا آیکون، متن آل متن نیز لازم نیست. اما اگر مطمئن نیستید، فقط متن را در متن مورد نظر قرار دهید.

توصیف ویژگی های IMG

عرض و ارتفاع . شما باید عادت همیشه با استفاده از ویژگی های WIDTH و HEIGHT. و همیشه باید از اندازه واقعی استفاده کنید و تصاویر خود را با مرورگر تغییر اندازه ندهید.

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

دیگر ویژگی های IMG مفید

TITLE این ویژگی یک ویژگی جهانی است که می تواند برای هر عنصر HTML اعمال شود. علاوه بر این، ویژگی TITLE به شما اجازه می دهد اطلاعات اضافی در مورد تصویر اضافه کنید.

اکثر مرورگرها از ویژگی TITLE پشتیبانی می کنند، اما این کار آنها را به روش های مختلف انجام می دهد. بعضی از آنها متن را به صورت پاپ آپ نمایش می دهند در حالی که دیگران آن را در صفحه نمایش اطلاعات نشان می دهد زمانی که کاربر راست روی تصویر کلیک کند. شما می توانید از ویژگی TITLE برای نوشتن اطلاعات اضافی در مورد تصویر استفاده کنید، اما بر روی این اطلاعات پنهان یا قابل مشاهده نیستید. شما باید قطعا این را برای مخفی کردن کلمات کلیدی موتورهای جستجو استفاده نکنید. این عمل در حال حاضر توسط اغلب موتورهای جستجو مجازات می شود.

USEMAP و ISMAP . این دو ویژگی، تصویر سمت چپ (سمت راست) و سمت سرور (ISMAP) را به تصاویر شما می رساند.

LONGDESC این ویژگی URL ها را برای توضیحات طولانی تر از تصویر پشتیبانی می کند. این ویژگی باعث می شود تصاویر شما بیشتر قابل دسترسی باشد.

ویژگی های غیرقابل پیش بینی و قدیمی قدیمی IMG

چند ویژگی در حال حاضر در HTML5 منسوخ شده یا در HTML4 منسوخ شده است. برای بهترین HTML، شما باید به جای استفاده از این ویژگی ها، راه حل های دیگری پیدا کنید.

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

ALIGN این ویژگی به شما اجازه می دهد تا یک تصویر را داخل متن قرار دهید و جریان متن را در اطراف آن قرار دهید. شما می توانید یک تصویر را به سمت راست یا چپ بچسبانید. این به نفع ملک CSS شناور در HTML4 و در HTML5 منسوخ شده است.

HSPACE و VSPACE . HSPACE و ویژگی های VSPACE فضای سفید را به صورت افقی (HSPACE) و عمودی (VSPACE) اضافه می کند. فضای سفید به هر دو طرف گرافیکی (بالا و پایین یا چپ و راست) اضافه می شود، بنابراین اگر شما فقط از یک طرف به یک فضای نیاز دارید، باید از CSS استفاده کنید. این خصیصه ها در HTML4 به نفع عنصر CSS حاشیه رفته اند و در HTML5 منسوخ شده اند.

LOWSRC ویژگی LOWSRC یک تصویر جایگزین را فراهم می کند زمانی که منبع تصویر شما خیلی بزرگ است و آن را بسیار کند می کند. به عنوان مثال، شما ممکن است یک تصویر 500KB داشته باشید که می خواهید بر روی صفحه وب خود نمایش داده شود، اما 500 کیلوبایت برای دانلود بسیار طول می کشد. بنابراین شما یک کپی کوچکتر از تصویر ایجاد می کنید، شاید در سیاه و سفید و یا فقط به شدت بهینه سازی شده، و قرار دادن آن در ویژگی LOWSRC. تصویر کوچکتر برای اولین بار بارگیری و نمایش داده می شود، و هنگامی که تصویر بزرگتر ظاهر شود، منبع کمتری جایگزین خواهد شد.

ویژگی LOWSRC به Netscape Navigator 2.0 به برچسب IMG اضافه شد. این بخش بخشی از DOM 1 بود، اما بعد از سطح DOM حذف شد. پشتیبانی مرورگر برای این مشخصه طراحی شده است، اگر چه بسیاری از سایت ها ادعا می کنند که از همه مرورگرهای مدرن پشتیبانی می کند. این در HTML4 معتبر نیست و یا در HTML5 منسوخ شده است، زیرا هرگز جزء رسمی هر یک از مشخصات نبود.

اجتناب از استفاده از این ویژگی و به جای آن تصاویر خود را بهینه کنید تا سریعا بارگیری شوند. سرعت بارگذاری صفحه، بخش مهمی از طراحی وب خوب است و تصاویر بزرگ صفحات را به شدت کاهش می دهند حتی اگر از ویژگی LOWSRC استفاده کنید.