خانه / آموزش HTML / بخش پانزدهم-تصاویر html
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۱۲ آبان ۱۳۹۷ تعداد بازدید : 16 بازدید بدون دیدگاه

بخش پانزدهم-تصاویر html

قدم قبلی >< قدم بعدی

تصاویر htmlتصاویر html

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

تصاویر می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشد.

نحوه استفاده از تصاویر در HTML

در HTML، تصاویر با برچسب <img> تعریف می شوند.

برچسب <img> خالی است، شامل فقط صفات است و تگ بسته ندارد.

ویژگی src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند:

ویژگی alt

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

مقدار خصیصه alt باید تصویر را توصیف کند:

اگر یک مرورگر نمیتواند تصویری پیدا کند، مقدار خصیصه alt را نمایش می دهد:

نکته: ویژگی alt مورد نیاز است. یک صفحه وب به درستی بدون آن اعتبار ندارد.

اندازه تصویر – عرض و ارتفاع

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

همچنین می توانید از ویژگی های عرض و ارتفاع استفاده کنید:

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

نکته: همیشه عرض و ارتفاع یک تصویر را مشخص کنید. اگر عرض و ارتفاع مشخص نشده باشند، در حالی که تصویر بارگیری می شود، صفحه ممکن است سوسو زده شود.

عرض و ارتفاع یا استایل؟

ویژگی های عرض، ارتفاع و سبک در HTML5 معتبر است.

با این حال، ما پیشنهاد می کنیم با استفاده از ویژگی سبک. این باعث می شود صفحات سبک از تغییر اندازه تصاویر جلوگیری شود:

تصاویر در پوشه دیگر

اگر مشخص نشده باشد، مرورگر انتظار دارد که تصویر را در همان پوشه به عنوان صفحه وب پیدا کند.

با این حال، معمول است که تصاویر را در زیر پوشه ذخیره کنید. سپس باید نام پوشه را در ویژگی src وارد کنید:

تصاویر در یک سرور دیگر

برخی از وب سایت ها تصاویر خود را در سرورهای تصویر ذخیره می کنند.

در واقع، شما می توانید تصاویر را از هر آدرس وب در جهان دسترسی داشته باشید:

تصاویر متحرک

HTML به GIF های متحرک اجازه می دهد:

تصویر به عنوان یک لینک

برای استفاده از یک تصویر به عنوان یک لینک، تگ <img> را در داخل برچسب <a> قرار دهید:

تصویر شناور

از ویژگی CSS float استفاده کنید تا تصویر به سمت راست یا چپ متن برسد:

نقشه های تصویر

برچسب <map> یک نقشه تصویر را تعریف می کند. یک نقشه تصویر یک تصویر با مناطق قابل کلیک است.

در تصویر زیر، روی رایانه، تلفن یا فنجان قهوه کلیک کنید:

مشخصه نام برچسب <map> با ویژگی usemap <img> مرتبط است و ارتباط بین تصویر و نقشه ایجاد می کند.

عنصر <map> حاوی تعدادی از برچسب های <area> است که مناطق قابل کلیک در نقشه تصویر را تعریف می کنند.

تصویر پس زمینه

برای اضافه کردن تصویر پس زمینه بر روی یک عنصر HTML، از پس زمینه تصویر CSS استفاده کنید:

تگ <picture>

HTML5 عنصر <picture> را برای افزودن انعطاف پذیری بیشتر در هنگام تعیین منابع تصویر معرفی کرد.

عنصر <picture> حاوی تعدادی از عناصر <source> است که هر کدام به منابع تصویری اشاره دارند. به این ترتیب مرورگر می تواند تصویری را انتخاب کند که به بهترین شکل متناسب با نمای فعلی و / یا دستگاه باشد.

هر عنصر <source> دارای صفاتی است که توصیف می کند هنگامی که تصویر آنها مناسب تر است.

مرورگر از اولین عنصر <source> با مقادیر تطبیق تطابق استفاده می کند و هر عنصر <source> زیر را نادیده می گیرد.

نکته: همیشه عنصر <img> را بعنوان عنصر آخرین عنصر عنصر <picture> تعیین کنید. عنصر <img> توسط مرورگرهایی که از عنصر <picture> پشتیبانی نمی کند یا اگر هیچ کدام از تگ <source> مطابقت ندارند استفاده می شود.

خوانندگان صفحه HTML

یک خواننده صفحه یک برنامه نرم افزاری است که کد HTML را می خواند، متن را تبدیل می کند و به کاربر اجازه می دهد تا به محتوای آن گوش دهد. خوانندگان صفحه نمایش برای افرادی که دچار اختلال دید و یا معلولیت هستند مفید است.

 

 

 

گام قبلی >< گام بعدی
بخش پانزدهم-تصاویر html
5 (100%) 2 votes

لینک کوتاه این مطلب: https://tiktheme.com/?p=11724


کانال تلگرام تیک تم

دیدگاهتان را بنویسید

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