تصاویر HTML

با استفاده از HTML، می‌توان تصاویر را در مستند نمایش داد.

مثال

درج تصویر
این مثال نشان می‌دهد که چگونه تصاویر در صفحه وب نمایش داده می‌شوند.
درج تصاویر از مکان‌های مختلف
این مثال نشان می‌دهد که چگونه تصاویر از دیگر پوشه‌ها یا سرورها در صفحه وب نمایش داده می‌شوند.

(مثال‌های بیشتری در پایین صفحه پیدا می‌کنید)

برچسب تصویر (<img>) و ویژگی منبع (Src)

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

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

برای نمایش تصویر در صفحه، باید از ویژگی منبع (src) استفاده کنید. src به معنای "منبع" است. مقدار ویژگی منبع آدرس URL تصویر است.

عبارت تعریف تصویر به صورت زیر است:

<img src="url" />

URL مکانی است که تصویر ذخیره شده است. اگر تصویر به نام "boat.gif" در دایرکتوری "images" وب‌سایت www.codew3c.com قرار دارد، URL آن http://www.codew3c.com/images/boat.gif است.

مرورگر تصاویر را در مکان برچسب تصویر در مستند نمایش می‌دهد. اگر برچسب تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا اولین پاراگراف را نمایش می‌دهد، سپس تصویر را نمایش می‌دهد و در نهایت دومین پاراگراف را نمایش می‌دهد.

متن جایگزین ویژگی Alt

ویژگی alt برای تعریف یک رشته متن جایگزین برای تصویر استفاده می‌شود. ارزش ویژگی متن جایگزین توسط کاربر تعیین می‌شود.

<img src="boat.gif" alt="Big Boat">

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

نکات اولیه - نکات مفید:

اگر یک فایل HTML ده تصویر داشته باشد، برای نمایش صحیح صفحه، نیاز به بارگذاری ۱۱ فایل است. بارگذاری تصاویر زمان‌بر است، بنابراین توصیه ما این است: از تصاویر با دقت استفاده کنید.

مثال‌های بیشتر

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

برچسب تصویر

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