قرار دادن تصویر در داخل فایل اچ تی ام ال
جمعه, ۱۹ خرداد ۱۳۹۶، ۱۰:۳۳ ب.ظ
برای اینکه بتوانیم یک تصویر را در داخل فایل اچ تی ام ال قرار دهیم از تگ <img> استفاده می کنیم. در زیر یک مثال ساده از نحوه وارد کردن یک تصویر در فایل اچ تی ام ال را می بینید:
با استفاده از تگ <img> تصویر را در داخل فایل اچ تی ام ال قرار می دهیم. تگ <img> یک تگ خالی است؛ یعنی تگ انتهایی ندارد، البته همانطور که در مثال بالا می بینید می توانیم در این تگ از تعدادی خصیصه استفاده کرد.
مهمترین خصیصه، خصیصه src است که با استفاده از آن آدرس فایل تصویر را مشخص می کنیم (که این آدرس می تواند آدرس یک فایل بر روی اینترنت یا آدرس یک فایل محلی باشد). خصیصه بعدی alt است که همانطور که قبلا گفتم این خصیصه، متن جایگزین را مشخص می کند؛ این متن زمانی که به هر دلیل تصویر نمایش داده نشود به جای تصویر قرار می گیرد.
در مثال بالا خصیصه title را هم اضافه کرده ام. مقدار مربوط به این خصیصه مثل یک tooltip عمل می کند و وقتی که کاربر نشانگر موس را بر روی تصویر قرار می دهد این متن نمایش داده می شود. می توانیم با استفاده از خصیصه style مقادیر و ویژگی های css را نیز به این تگ اعمال کنیم:
مشخص کردن اندازه یک تصویر
پیشنهاد می شود که همیشه عرض و طول یک تصویر را مشخص کنیم. برای این کار دو روش وجود دارد. در روش اول می توانیم با استفاده از خصیصه style از ویژگی های width و height استفاده کنیم. در روش دوم می توانیم از دو خصیصه width و height که در تگ img وجود دارد استفاده کنیم. اما این نکته را در نظر داشته باشید که بارها گفته ام در طراحی وب باید بحث کدنویسی را از قالب بندی ظاهری جدا کنیم. استفاده از دو خصیصه width و height به معنی نادیده گرفتن این اصل است.
در زیر یک مثال را مشاهده می کنید که از خصیصه style استفاده شده است:
نقشه ها (maps) در تصاویر
با استفاده از تگ <map> می توانیم یک image-map تعریف کنیم. منظور از image-map یک تصویر است که قسمت های خاصی از آن قابل کلیک کردن هستند.
تگ <map> دارای خصیصه ای به نام name است که این خصیصه با یک خصیصه با نام usemap در تگ <map> ارتباط مستقیم دارد. با استفاده از این دو خصیصه بین این دو تگ ارتباط برقرار می شود.
تگ <map> دارای چند تگ <area> است. با استفاده از این تگهای <area> محدوده های قابل کلیک را در image-map مشخص می کنیم. مثال زیر را ببینید:
<!DOCTYPE html> <html> <body> <h2>یک تصویر نمونه</h2> <img src="picture.jpg" alt="متن جایگزین" title="توضیح راهنما"> </body> </html>دستور زبان مربوط به تگ img
با استفاده از تگ <img> تصویر را در داخل فایل اچ تی ام ال قرار می دهیم. تگ <img> یک تگ خالی است؛ یعنی تگ انتهایی ندارد، البته همانطور که در مثال بالا می بینید می توانیم در این تگ از تعدادی خصیصه استفاده کرد.
مهمترین خصیصه، خصیصه src است که با استفاده از آن آدرس فایل تصویر را مشخص می کنیم (که این آدرس می تواند آدرس یک فایل بر روی اینترنت یا آدرس یک فایل محلی باشد). خصیصه بعدی alt است که همانطور که قبلا گفتم این خصیصه، متن جایگزین را مشخص می کند؛ این متن زمانی که به هر دلیل تصویر نمایش داده نشود به جای تصویر قرار می گیرد.
در مثال بالا خصیصه title را هم اضافه کرده ام. مقدار مربوط به این خصیصه مثل یک tooltip عمل می کند و وقتی که کاربر نشانگر موس را بر روی تصویر قرار می دهد این متن نمایش داده می شود. می توانیم با استفاده از خصیصه style مقادیر و ویژگی های css را نیز به این تگ اعمال کنیم:
<img src="url" alt="متن جایگزین" style="width:width;height:height;">توجه داشته باشید که باید حتما خصیصه alt را مقدار دهی کنیم. اگر برای این خصیصه مقداری را مشخص نکنیم، صفحه از نظر اعتبارسنجی دارای مشکل خواهد بود.
مشخص کردن اندازه یک تصویر
پیشنهاد می شود که همیشه عرض و طول یک تصویر را مشخص کنیم. برای این کار دو روش وجود دارد. در روش اول می توانیم با استفاده از خصیصه style از ویژگی های width و height استفاده کنیم. در روش دوم می توانیم از دو خصیصه width و height که در تگ img وجود دارد استفاده کنیم. اما این نکته را در نظر داشته باشید که بارها گفته ام در طراحی وب باید بحث کدنویسی را از قالب بندی ظاهری جدا کنیم. استفاده از دو خصیصه width و height به معنی نادیده گرفتن این اصل است.
در زیر یک مثال را مشاهده می کنید که از خصیصه style استفاده شده است:
<img src="picture.jpg" alt="متن جایگزین تصویر" style="width:100px; height:150px;">در مثال زیر با استفاده از خصیصه های width و height عرض و ارتفاع تصویر را مشخص می کنیم:
<img src="html5.gif" alt="HTML5 Icon" width="100" height="150">در حالتی که از خصیصه های width و height استفاده می کنیم، واحد اندازه گیری pixel به صورت پیش فرض در نظر گرفته می شود.
نقشه ها (maps) در تصاویر
با استفاده از تگ <map> می توانیم یک image-map تعریف کنیم. منظور از image-map یک تصویر است که قسمت های خاصی از آن قابل کلیک کردن هستند.
تگ <map> دارای خصیصه ای به نام name است که این خصیصه با یک خصیصه با نام usemap در تگ <map> ارتباط مستقیم دارد. با استفاده از این دو خصیصه بین این دو تگ ارتباط برقرار می شود.
تگ <map> دارای چند تگ <area> است. با استفاده از این تگهای <area> محدوده های قابل کلیک را در image-map مشخص می کنیم. مثال زیر را ببینید:
<img src="picture.jpg" alt="متن جایگزین" usemap="#imagemap" style="width:145px; height:126px;"> <map name=" imagemap "> <area shape="rect" coords="0,0,82,126" alt="قسمت اول" href="01.htm"> <area shape="circle" coords="90,58,3" alt="قسمت دوم" href="02.htm"> <area shape="circle" coords="124,58,8" alt="قسمت سوم" href="03.htm"> </map>
