نمونه مثال زیر نحوه ی استفاده از عنصر img برای نمایش یک تصویر را نشان میدهد :
<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 از نوع عناصر empty بوده و فقط شامل صفات است و فاقد تگ پایانیست.
صفت src آدرس اینترنتی تصویر را مشخص میکند :
<";img src="url" alt="some_text" style="width:width;height:height>
صفت alt
اگر کاربر به هر دلیلی نتواند تصویر را در صفحه مشاهده کنید(سرعت پایین اینترنت، خطا در آدرس مشخص شده برای src و یا زمانی که کاربران از صفحه خوان ها استفده میکنند)، صفت alt متن جایگزینی را برای نمایش در صفحه مشخص میکند:
<";img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px>
صفت alt برای تصاویر لازم است. یک صفحه ی وب بدون این صفت به درستی راستی آزمایی نخواهد شد.
صفحه خوان های HTML
یک صفحه خوان یک نرم افزار است که کد های HTML را خوانده، آن را به متن تبدیل و اجازه میدهد که کاربران محتوا را بشنوند. صفحه خوان ها برای کاربران نابینا و یا کم بینا بسیار مفیدند.
اندازه ی تصاویر – طول و عرض
برای مشخص کردن طول و عرض تصویر میتوانید از صفت style استفاده کنید. واحد طول و عرض برای تصاویر پیکسل است.
<";img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px>
شما میتوانید از خاصیت های width و height به جای صفت style استفاده کنید. واحدهای اندازه برای این دو نیز پیکسل است.
<"img src="html5.gif" alt="HTML5 Icon" width="128" height="128>
از width و height استفاده کنیم و یا از style ؟
استفاده از هر دو روش در HTML5 قابل قبول است. با این حال پیشنهاد میشود از صفت style استفاده کنید. به این ترتیب از اعمال استایل های internal و external برای تغییر سایز تصویر در امان خواهید بود.
<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>
در مثال بالا تصویر در پوشه ی images قرار دارد.
تصاویر روی سروری دیگر
در صفحات وب خود میتوایند از تصاویری که روی وب سرور های دیگر هستند استفاده کنید، در این موارد فقط کافیست از آدرس مطلق(کامل) استفاده کنید :
<"img src="https://www.learnsource.net/images/learnsource.jpg" alt="learnsource.net>
تصاویر متحرک
تصاویری با پسوند gif. معمولا تصاویر متحرک هستند :
<";img src="programming.gif" alt="Computer Man" style="width:48px;height:48px>
دقت داشته باشید که سینتکس استفاده از تصاویر متحرک هیچ تفاوتی با سینتکس تصاویر ثابت ندارد.
استفاده از خاصیت float در تصاویر
با استفاده از خاصیت float میتوانید تصویر مورد نظر را نسبت به متن به چپ یا راست انتقال دهید :
<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> برای تعریف یک image-map استفاده کنید.
یک image-map تصویری است که ناحیه ی مختلف آن قابل کلیک است و میتوان برای هر ناحیه آدرسی مشخص کرد که کاربر با کلیک روی آن به صفحه ی خاصی منتقل شود.
با استفاده از صفت name در عنصر <map> میتوان رابطه ی بین تصویر و نقشه را برقرار کرد.
تگ <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> برای تعریف یک تصویر استفاده کنید
- از صفت src برای مشخص کردن آدرس تصویر استفاده کنید
- از صفت alt به عنوان متنی جایگزین برای زمانی که تصویر قابل نمایش نیست استفاده کنید
- از صفت های width و height برای مشخص کردن طول و عرض تصویر استفاده کنید.
- از خاصیت های width و height زبان css که در صفت style تعریف میشوند برای طول و عرض تصویر استفاده کنید
- از خاصیت float برای به چپ و یا راست بردن تصویر نسبت به عناصر دیگر html استفاده کنید
- از عنصر <map> برای تعریف یک image-map استفاده کنید