آشنایی با نحوه ی بکارگیری تصاویر در HTML

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


 

 نمونه مثال زیر نحوه ی استفاده از عنصر 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 استفاده کنید
منتشر شده در ۵ خرداد ۱۳۹۶ حمید رضا ملکی ۱۶۵۸ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

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