به دلیل حجم بالای مطالب و زمان بر بودن دسته بندی و ترجمه آن ها، بخش هایی از سایت به صورت موقت غیر فعال است.

W3Persian.com

معادل فارسی وب سایت W3Schools.com، تقدیم به فارسی زبانان جهان!

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

تصاویر HTML

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

مثال
<img src="pulpitrock.jpg" alt="Mountain View">خودتان امتحان کنید >

مثال
<img src="img_girl.jpg" alt="Girl in a jacket">خودتان امتحان کنید >

مثال
<img src="img_chania.jpg" alt="Flowers in Chania">خودتان امتحان کنید >

نحوه تعریف تصاویر HTML

در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> یک تگ خالی است، فقط شامل خصیصه هاست و تگ بسته ندارد.
خصیصه src نشانی اینترنتی (آدرس وب) تصویر را مشخص می کند:

<img src="url">

خصیصه alt

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

مثال
<img src="img_chania.jpg" alt="Flowers in Chania">خودتان امتحان کنید >

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

مثال
<img src="wrongname.gif" alt="Flowers in Chania"> خودتان امتحان کنید >

توجه: خصیصه alt ضروری است و یک صفحه وب بدون آن اعتبار ندارد.

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

شما می توانید از خصیصه style برای تعیین عرض و ارتفاء تصویر استفاده کنید:

مثال
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">خودتان امتحان کنید >

همچنین می توانید از ویژگی های width و height استفاده کنید:

مثال
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">خودتان امتحان کنید >

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

عرض و ارتفاء، یا سبک؟

هر سه ویژگی عرض، ارتفاء و سبک در HTML5 معتبر هستند.
با این حال، ما پیشنهاد می کنیم که از سبک ها برای تعریف عرض و ارتفاء استفاده کنید:

مثال
<!DOCTYPE html> <html> <head> <style> img { width:100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>خودتان امتحان کنید >

عکس ها در پوشه های دیگر

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

مثال
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">خودتان امتحان کنید >

عکس ها در سرور های دیگر

بعضی از وب سایت ها، تصاویر خود را در سرور های آپلود تصویر ذخیره می کنند.
شما می توانید از هر آدرس وب به تصاویر دسترسی داشته باشید:

مثال
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">خودتان امتحان کنید >

شما می توانید اطلاعات بیشتری را درباره مسیر های فایل در مسیر های فایل در HTML به دست آورید.

تصاویر متحرک

HTML، فایل های GIF متحرک را اجرا می کند:

مثال
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">خودتان امتحان کنید >

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

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

مثال
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a>خودتان امتحان کنید >

جابجایی تصاویر

برای جابجایی تصویر به سمت چپ یا راست از ویژگی float در CSS استفاده کیند (ویژگی float فقط برای تصاویر نیست و آن را می توانید به هر یک از تگ های HTML نسبت دهید):

مثال
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p>خودتان امتحان کنید >

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

از تگ <map> برای تعریف یک نقشه تصویر استفاده کنید. یک نقشه تصویر یک تصویر با مناطق قابل کلیک است.
در تصویر زیر، روی کامپیوتر، تلفن همراه و یا فنجان قهوه کلیک کنید:
Workplace Sun Mercury Venus

مثال
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> <map name="workmap"> <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm"> </map>خودتان امتحان کنید >

خصیصه name در تگ <map> به وسیله خصیصه usemap در تگ <img> ارتباط برقرار می کند.
تگ <map> حاوی تعدادی از تگ های است که مناطق قابل کلیک در نقشه تصویر را مشخص می کنند.

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

برای اختصاص دادن یک تصویر به عنوان پس زمینه یک تگ HTML از background-image در CSS استفاده کنید:

مثال

برای قرار دادن تصویر پس زمینه برای صفحه وب، آن را به تگ body نسبت دهید:

<body style="background-image:url('clouds.jpg')"> <h2>Background Image</h2> </body>خودتان امتحان کنید >

مثال

برای قرار دادن تصویر پس زمینه برای یک پاراگراف، تصویر پس زمینه را به تگ p نسبت دهید:

<body> <p style="background-image:url('clouds.jpg')"> ... </p> </body>خودتان امتحان کنید >

برای کسب اطلاعات بیشتر درباره تصاویر پس زمینه می توانید آموزش پس زمینه های CSS سایت ما را مطالعه کنید.

عنصر <picture>

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

مثال

نمایش یک تصویر اگر اندازه مرورگر بزرگ تر از 650 پیکسل باشد، اگر بزرگ تر از 465 پیکسل باشد تصویر دیگر، وگرنه تصویر پیشفرض نمایش داده می شود

<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>خودتان امتحان کنید >

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

صفحه خوان

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

خلاصه فصل

  • استفاده از عنصر <img> در HTML برای تعریف یک تصویر
  • استفاده از خصیصه src برای تعیین مسیر تصویر
  • استفاده از خصیصه alt برای تعریف یک متن مناسب برای تصویر، اگر نمی تواند نمایش داده شود
  • استفاده از خصیصه های width و height برای تعیین اندازه تصویر
  • استفاده از عناوین width و height در CSS برای تعریف اندازه تصویر (از سوی دیگر)
  • استفاده از عنوان float در CSS برای شناور کردن تصویر
  • استفاده از عنصر <map> برای تعریف نقشه تصویر
  • استفاده از عنصر <area> برای تعریف نقاط قابل کلیک در نقشه تصویر
  • استفاده از خصیصه usemap در تگ <img> برای اتصال تصویر به نقشه تصویر
  • استفاده از عنصر <picture> برای نمایش تصاویر مختلف در دستگاه های مختلف
توجه: بارگیری تصاویر طول می کشد، استفاده از تصاویر بزرگ با حجم بالا می تواند صفحه وب شما را کُند کند، در استفاده از تصاویر دقت کنید.

با تمرینات خودتان را امتحان کنید!

تمرین 1 تمرین 2 تمرین 3 تمرین 4 تمرین 5 تمرین 6

تگ های تصویر در HTML

تگ توضیحات
<img> تعریف یک تصویر
<map> تعریف یک نقشه تصویر
<area> تعریف نقاط قابل کلیک برای نقشه تصویر
<picture> تعریف تصاویر مختلف برای اندازه های مختلف صفحه نمایش