تصاویر در HTML

در HTML تصاویر با استفاده از تگ img تعریف می شوند. تگ img یک تگ تهی است، فقط حاوی خصیصه های تگ است و تگ پایانی ندارد. خصیصه src محل تصویر یا URL آن را مشخص می کند. مثال: خصیصه alt متن جایگزین تصویر را مشخص می کند. اگر کاربر به هر دلیلی نتواند عکس را ببیند (کند بودن سرعت اینترنت، خطای خصیصه src و مسیر فایل تصویر، یا کاربر از صفحه خوان (اسکرین ریدر) استفاده کند)، این متن بجای عکس نمایش می یابد.

مثال:

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>

دستور درج تصویر در HTML

در HTML تصاویر با استفاده از تگ <img> تعریف می شوند. تگ <img> یک تگ تهی است، فقط حاوی خصیصه های تگ است و تگ پایانی ندارد.

خصیصه src محل تصویر یا URL آن را مشخص می کند. مثال:

<img src="/url" alt="some_text" style="width:width;height:height;">

خصیصه alt

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

اگر مرورگر به هر دلیلی نتواند فایل تصویر را برای نمایش پیدا کند، متن موجود در خصیصه alt را نمایش خواهد داد. مثال:

<img src="/wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

خصیصه alt اجباری است. وب پیج بدون این خصیصه صحیح اعتبارسنجی نخواهد شد.

صفحه خوان های HTML

صفحه خوان (screen reader) یک برنامه نرم افزاری است که کد HTML را می خواند، آن را به متن تبدیل می کند و به کاربر اجازه می دهد که به محتوای آن «گوش» دهد. اسکرین ریدرها برای کسانی مفید است که کور هستند، مشکل بینایی یا ناتوانی یادگیری دارند.

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

می توان از خصیصه Style برای مشخص کردن طول و عرض (پهنا و ارتفاع) عکس استفاده کرد.

مقدار این دو ویژگی به واحد پیکسل مشخص می گردد (بایستی بعد از مقدار طول عرض px گذاشت). مثل:

<img src="/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

بطور بدیل می توان بجای خصیصه Style از خود خصیصه های width و height استفاده کرد. در اینجا مقدار به صورت پیش فرض به پیکسل ست می شود و نیازی به آوردن px بعد از عدد نیست. مثل:

<img src="/html5.gif" alt="HTML5 Icon" width="128" height="128">

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

خصیصه Width و Height بهتر است یا Style؟

هر دوی خصیصه های Width و Height و Style در HTML5 معتبر است. هرچند، پیشنهاد می شود که از خصیصه Style استفاده کنید. اینکار موجب می شود استیل شیت های داخلی یا خارجی سایت نتوانند سایز اصلی و اورجینال تصاویر را تغییر دهند. برای مثال:

<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>

<img src="/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="/html5.gif" alt="HTML5 Icon" width="128" height="128">

</body>
</html>

استفاده از تصاویر پوشه های دیگر

اگر مسیر تصویر مشخص نشده باشد، مرورگر انتظار دارد که فایل عکس در همان پوشه ای باشد که وب پیج در آن قرار دارد.

هرچند استاندارد عملکرد برتر توصیه می کند که تصاویر یک وب سایت همگی در یک ساب فلدر ذخیره شوند. سپس نام فلدر و مسیر کامل تصویر در خصیصه src درج شود. مثال:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

استفاده از تصاویر بر روی سرور دیگر

بعضی از وبسایت ها تصاویر خود را بر روی سرور تصویر (image servers) نگهداری می کنند. در واقع می توان به تصاویر موجود در هر آدرس وب دنیا دسترسی داشت. مثال:

<img src="https://www.parastar.info/images/w3schools_green.jpg" alt="parastar vebgah">

می توانید در مورد مسیر فایل در بخش مسیرهای فایل 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>

توجه: خصیصه border: 0 به این خاطر اضافه شده است که مرورگر IE9 (اینترنت اکسپلورر نسخه 9 و قبل از آن) دور تصویر حاشیه نشان ندهند (زمانی که تصویر به عنوان لینک استفاده شود، مرورگر اینترنت اکسپلورر نسخه 9 یا قدیمی تر، دور عکس یک حاشیه نمایش می دهند).

تصاویر شناور

می توان خصیصه float را استفاده کرد تا تصویر در داخل وبسایت شناور باشد و به حاشیه چپ یا راست و یا همراستا با متن چیده شود. مثل:

<p><img src="/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">

این دستور تصویر را در سمت راست صفحه شناور می کند و متن در سمت چپ تصویر ظاهر می شود.

<p><img src="/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">

دستور فوق تصویر را در سمت چپ متن شناور می کند.

نقشه تصویر در HTML

برای تعریف یک نقشه تصویر (image-map) در کد HTML از تگ <map> استفاده می شود. نقشه تصویر یک تصویر با نواحی قابل کلیک کردن است.

Workplace Sun Mercury Venus

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

<img src="/planets.gif" alt="Planets" usemap="#planetmap" style="width:145px;height:126px;">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="/sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="/mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="/venus.htm">
</map>

خلاصه مطلب

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

توجه: بارگذاری تصاویر زمانبر است. تصاویر بزرگ موجب کند شدن بارگذاری وب پیج می شود. بنابراین در استفاده از تصویر دقت کنید و تصاویر بهینه سازی شده برای وب را استفاده کنید.

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

تگ

شرح

<img>

تعریف تصویر

<map>

تعریف نقشه تصویر

<area>

تعیین نواحی قابل کلیک در یک نقشه تصویر

اگر در اجرای این راهنما به مشکل برخورد کردید و سایر سئوالات و پیشنهادات خود را در بخش سئوالات عمومی انجمن پلکسا مطرح نمایید. گروه توسعه وب پلکسا به سئوالات شما پاسخ خواهند داد.

عضویت در خبرنامه پلکسا

در صورت تمایل ایمیل خود را وارد کنید و تازه های پلکسا را از طریق ایمیل دریافت کنید. خبرنامه الکسا هفته نامه بوده و حاوی جدیدترین مطالب و نشریات پلکسا است.

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.