تصاویر در HTML

مثال :

تصاویر
<!DOCTYPE html>
<html>
<body>

<h2> مداد رنگی ها </h2>
<img src="pic_mountain.jpg" alt="چینش دایره ای مداد رنگی ها" 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  را نمایش می دهند.

مثال :

متن جایگزین تصاویر
<img src="wrongname.gif" alt="لوگوی وب مهراز" style="width:128px;height:128px;">
مشاهده مثال


صفت alt مورد نیاز است و یك صفحه وب بدون وجود آن ، تایید اعتبار نخواهد شد.



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

برای تعیین عرض و ارتفاع تصاویر از صفت style در عنصر img استفاده می شود. مقادیر هنگام نوشتن با px تركیب شده و بر روی پیكسل تنظیم می شوند.

مثال :

عرض و ارتفاع تصاویر
<img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش دایره ای مداد رنگی ها" style="width:300px;height:230px;">
مشاهده مثال


همچنین می توان به صورت جایگزین ،‌ با استفاده از صفات height و width در CSS نیز عرض و ارتفاع تصویر را تعیین كرد.

مثال :
جایگزین های عرض و ارتفاع تصاویر
<img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش دایره ای مداد رنگی ها" width="180" height="130">
مشاهده مثال


نكته ! همیشه عرض و ارتفاع تصویر را تعیین كنید. در صورت عدم تعیین آنها ،‌ تا زمان لود شدن تصویر صفحه به درستی نمایش داده نخواهد شد.


استفاده از width و height یا style؟

هر دو روش در HTML5 مورد تایید است. با این حال ما استفاده از صفت style را پیشنهاد میكنیم ، زیرا از تغییر اندازه اصلی تصویر توسط استایل شیت های اینترنال یا اكسترنال جلوگیری می كند.

مثال :

استفاده از استایل های عرض و ارتفاع
<!DOCTYPE html>
<html>
<head>
<style>
p {
	direction:rtl;
}
img {
    width:100%;
}
</style>
</head>
<body>

<img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="HTML5 Icon" width="128" height="128">

</body>
</html>
مشاهده مثال


تصاویر در فولدری دیگر

اگر تصاویر را در فولدر ویژه خود قرار ندهیم ،‌ مرورگر همان فولدری را برای پیدا كردن و نمایش تصویر جستجو می كند كه صفحه وب در آن قرار دارد.ذخیره تصاویر در یك فولدر داخلی متداول است و در این صورت باید به ابتدای آدرس تصاویر در صفت src نام فولدر تصاویر را نیز اضافه كنید.

مثال :

تصاویر در فولدر دیگر
<img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش مداد رنگی ها" style="width:128px;height:128px;">
مشاهده مثال



تصاویر بر روی سرور دیگر

برخی وب سایت ها تصاویر خود را بر روی سرور های تصویر و آپلود سنترها ذخیره می كنند. در اصل می توان از هر آدرس وبی در جهان به تصاویر دسترسی داشت.

مثال :

تصاویر بر روی سرور دیگر
<img src="http://blogs.webmd.com/webmd-interviews/files/2016/12/650x350_guide_to_constipation_reliefxml_video.jpg" alt="پر کردن لیوان از شیر آب" style="width:220px;height:145px;">
مشاهده مثال


تصاویر متحرك در HTML

در HTML استفاده از تصاویر متحرك با توجه به استاندارد های GIF ،‌مجاز است.

مثال :

تصاویر متحرک
<img src="http://tuts.webmehraz.com/Resource/Tutorial/splash/preloader.gif" alt="webmehraz loading" style="width:120px;height:80px;">
مشاهده مثال


تركیب ورود تصویر در HTML برای تصاویر محترك با سایر تصاویر فرقی ندارد.

استفاده از تصاویر به عنوان لینك در HTML

با قرار دادن <img> درون تگ <a> به سادگی می توان تصاویر را به عنوان لینك تعیین كرد.

مثال :‌

استفاده از تصویر به عنوان لینک
<a href="http://blogs.webmd.com/webmd-interviews/2016/12/how-to-keep-your-water-safe.html" target="_blank">
<img src="http://blogs.webmd.com/webmd-interviews/files/2016/12/650x350_guide_to_constipation_reliefxml_video.jpg" alt="پر کردن لیوان از شیر آب" style="width:220px;height:145px;">
</a>
مشاهده مثال


شناور بودن تصاویر ( floating ) در HTML

از صفت float برای قرار دادن تصویر در سمت چپ یا راست متن استفاده می شود. بدون استفاده از این صفت ، تصویر در سطر قبل یا بعد متن نمایش داده خواهد شد.

مثال :

تصاویر شناور
<p> <img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش مداد رنگی ها"  style="float:right;width:42px;height:42px;">
 تصویر به سمت راست پاراگراف شناور می شود.</p>
<p><img src="http://manage.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش مداد رنگی ها"  style="float:left;width:42px;height:42px;">
تصویر به سمت چپ پاراگراف شناور می شود. </p>  
مشاهده مثال


نقشه تصویری ( image maps ) در HTML

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

 

مثال :

نقشه تصویری
<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 برای تعیین آدرس تصویر
صفت alt در HTML برای تعیین متن جایگزین برای تصویر ، اگر تصویر نمایش داده نشود
صفات width و height از HTML برای تعیین اندازه تصویر
صفات width و height از CSS برای تعیین اندازه

( جایگزین برای گزینه بالا)
صفت float از CSS برای تعیین جهت شناور بودن تصویر کنار متن
عنصر <map> در HTML برای تعیین یک نقشه تصویری
عنصر <area> در HTML برای تعیین نواحی قابل کلیک بر روی نقشه تصویری
صفت usemap از عنصر <img> در HTML برای اشاره به یک نقشه تصویری

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب بپیوندید

   
   
عضویت
پیام تستی برای وبساز