ورود به کارتابل مشتریان وب مهراز
تصاویر در HTML
یادگیری HTMLتصاویر در 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://cp.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش دایره ای مداد رنگی ها" style="width:300px;height:230px;">همچنین می توان به صورت جایگزین ، با استفاده از صفات height و width در CSS نیز عرض و ارتفاع تصویر را تعیین كرد.
مثال :
<img src="http://cp.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://cp.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="http://cp.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
تصاویر در فولدری دیگر
اگر تصاویر را در فولدر ویژه خود قرار ندهیم ، مرورگر همان فولدری را برای پیدا كردن و نمایش تصویر جستجو می كند كه صفحه وب در آن قرار دارد.ذخیره تصاویر در یك فولدر داخلی متداول است و در این صورت باید به ابتدای آدرس تصاویر در صفت src نام فولدر تصاویر را نیز اضافه كنید.
مثال :
<img src="http://cp.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://cp.webmehraz.com/Files/Tutorial/65/photo-contrast2.jpg" alt="چینش مداد رنگی ها" style="float:right;width:42px;height:42px;">
تصویر به سمت راست پاراگراف شناور می شود.</p>
<p><img src="http://cp.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 برای اشاره به یک نقشه تصویری
نظر شما
>