تصاوير در HTML

13 مهر 1396
تصاوير در فايلهاي HTMLتوسط برچسب قرار داده مي شوند. اين برچسب، يك برچسب خالي مي باشد يعني نيازي به برچسب انتهـايي نـدارد و فقـط شـامل مشخصه هاي مربوط به خود مي باشد.
تصاوير در HTML

برچسب  <img> و مشخصه src
تصاوير در فايلهاي  HTMLتوسط برچسب <img> قرار داده مي شوند. اين برچسب، يك برچسب خالي مي باشد يعني نيازي به برچسب انتهـايي نـدارد و فقـط شـامل
مشخصه هاي مربوط به خود مي باشد. براي مشخص كردن تصويري كه بايد در صفحه قرار بگيرد نياز به استفاده از مشخصه  (src (sourceداريم كه به وسيله آن آدرس و
نام فايل معرفي مي شود.

<img src="http://www.you.com/product.gif">

اگر فايل  HTML و تصوير در كنار هم قرار داشته باشند مي توانيم از "<img src="product.gif> استفاده كنيم و نيازي به ذكر كامل آدرس نيست. مرورگر تصوير را
در هرجايي كه از برچسب  img استفاده كرده ايد قرار خواهد داد. مثلا اگر از اين برچسب بين دو پاراگراف استفاده كرده ايد مرورگر ابتدا پاراگراف اول را نمايش مـي دهـد
سپس تصوير و در نهايت پاراگراف ديگر را نشان خواهد داد. به عنوان مثال ديگر اگر عبارت <td><img src="product.gif"></td> را در جدول به كار ببريد يكي از
خانه هاي جدول شامل تصوير  product.gifخواهد بود.


مشخصه alt
اين مشخصه براي ايجاد يك متن توصيفي بر روي تصوير به كار مي رود؛ و وقتي كاربر ماوس را روي تصوير مي برد و براي چند لحظه نگاه مي دارد، اين متن در يك كـادر
كوچك ديده خواهد شد مانند :
<img src="boat.gif" alt="Big Boat">
كه باعث ديده شدن عبارت  Big Boatدر يك كادر كوچك مي شود وكاربرد اين مشخصه بيشتر وقتي است كه اگر تصوير به دليل هر مشكلي در صفحه ديده نـشد كـاربر
بداند كه چه تصويري را نديده است كه در اين صورت عبارت مشخصه  altبه جاي تصوير ديده خواهد شد.

نكته
سعي كنيد در صفحات وبي كه مي سازد فقط در صورت نياز از تصوير وعكس استفاده كنيد و از زياد كردن حجم صفحه خود بپرهيزيد چون هنگامي كه كـاربر در اينترنـت
صفحه شما را مي بيند بايد مدت زيادتري براي تكميل شدن نمايش صفحه شما صبر كند و ممكن است اين موضوع كاربر را از ديدن صفحه پشيمان كند !


تصوير پس زمينه
براي اضافه كردن تصويري به پس زمينه صفحه مي توانيد از ساختار :


<body background="background.jpg">


استفاده كنيد كه به جاي  background.jpg مي توانيد نام هر فايل تصويري ديگري را قرار دهيد. اگر ابعاد تصوير شما از صفحه كوچكتر باشد تـصوير تـا پـر كـردن كـل
صفحه تكرار خواهد شد. پس اگر تصميم داريد كه تصويري به پس زمينه خود اضافه كنيد توصيه مي شود كه از فايلهاي كوچكي كه مي توانند مانند موزائيك در كنـار هـم
قرار گيرند، استفاده كنيد. ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت كنيد تا متن شما خوانايي خود را از دست ندهد. مثال زير در همين رابطه است.

مشخصه  alignدر تصاوير


اين مشخصه طريقه تراز شدن تصاوير و متن را تعيين مي كند. مثال زير در همين رابطه است.

توجه داشته باشيد كه تصاوير به طور پيش فرض به صورت " align="bottom قرار خواهند گرفت.

همچنين مشخصه  alignمي تواند طرز قرار گرفتن يك تصوير در كنار يك پاراگراف را تعيين كند كه مثلا تصوير در سمت راست پاراگراف قرار گيرد يا در سمت چـپ. بـه
مثال زير توجه كنيد.

تغيير ابعاد تصاوير
توسط مشخصه  widthو  heightمي توانيد ابعاد تصوير را تغيير داده و آن را بزرگتر و يا كوچكتر كنيد. فقط دقت كنيد كه ابعاد را متناسب تغيير دهيد چون در غير ايـن
صورت تصوير وضوح و زيبايي خود را از دست خواهد داد.

ساخت لينك بر روي قسمتي از تصوير


براي اين كار بايد از دو برچسب <map >  و <area > استفاده كنيد. روش كار بدين صورت است كه ناحيه هايي را مي خواهيد كاربر با كليك بر روي آن به صفحه ديگـري
متصل شود را توسط اشكالي مشخص مي كنيد. اين اشكال دايره، مستطيل و چند ضلعي خواهند بود كه توسط مشخصه  shapeتعيين مي شوند.
*دايره به صورت" shape="circleمعرفي مي شود و مختصات آن توسط مشخصه  coordsتعيين مي شود. مـثلا در "coords="39, 41, 32دو عـدد اول مختـصات
مركز دايره و عدد سمت راست اندازه شعاع دايره مي باشد. مشخصه آشناي  hrefكه در برچسب > <aاز آن استفاده كـرديم، صـفحه اي را كـه كـابر بـا كليـك بـر ناحيـه
مشخص شده توسط شكل به آن منتقل خواهد شد را تعيين مي كند.
*مستطيل توسط " shape="rectو مختصات قطر آن مثلا توسط " coords="77, 12, 112, 72تعيين مي شود كه دو عدد سمت چپ مختصات گوشه بالاي سـمت
چپ و دو عدد سمت راست مختصات گوشه پايين سمت راست مي باشند.
*براي استفاده از چند ضلعي بايد از " shape="polygonاستفاده كنيد و اعداد دوبه دو مختصات گوشه هاي آن را تعيين مـي كنـد : ,coords="146, 7, 124, 68
.193, 64, 183, 53, 184, 20"
همانطور كه در مثال زير مي بينيد برچسب <map> مشخصه اي به نام  nameدارد كه توسط آن برچسب <img>با برچسب <map>ارتبـاط برقـرار مـي كنـد بـراي
ايجاد اين ارتباط بايد در برچسب <img>از مشخصه  usemapاستفاده كنيم كه مقدار اين مشخصه نام برچسب <map>مي باشد. ضمنا نـام برچـسب <map>بايـد
همراه با علامت # به كار برده شود. مانند:
usemap="#picture"
مثال زير روش استفاده از برچسب ها و مشخصه هاي ذكر شده را مشخص خواهد كرد.

ساخت لينك براي تصوير
شما مي توانيد با كليك بر روي هر جاي تصوير به آدرس مورد نظر متصل شويد براي اينكار بايد از روش زير استفاده كنيـد، كـه در اينجـا مـثلا بـا كليـك بـر روي تـصويرbuttonnext.gif به صفحه nextpage.htm خواهيد رفت
<a href="nextpage.htm"><img src="buttonnext.gif" ></a>