آموزش گام به گام HTML : قسمت چهارم
تصاوير در HTML
تصاوير در فايلهای 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 می توانيد نام هر فايل تصويری ديگری را قرار دهيد. اگر ابعاد تصوير شما از صفحه کوچکتر باشد تصوير تا پر کردن کل صفحه تکرار خواهد شد. پس اگر تصميم داريد که تصويری به پس زمينه خود اضافه کنيد توصيه می شود که از فايلهای کوچکی که می توانند مانند موزائيک در کنار هم قرار گيرند، استفاده کنيد. ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت کنيد تا متن شما خوانايی خود را از دست ندهد. مثال زير در همين رابطه است.
.jpg "آموزش گام به گام HTML : قسمت چهارم")
مشخصه align در تصاوير
.jpg "آموزش گام به گام HTML : قسمت چهارم")
همچنين مشخصه align می تواند طرز قرار گرفتن يک تصوير در کنار يک پاراگراف را تعيين کند که مثلا تصوير در سمت راست پاراگراف قرار گيرد يا در سمت چپ. به مثال زير توجه کنيد.
.jpg "آموزش گام به گام HTML : قسمت چهارم")
تغيير ابعاد تصاوير
.jpg "آموزش گام به گام HTML : قسمت چهارم")
ساخت لينک بر روی قسمتی از تصوير
*دايره به صورت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"
مثال زير روش استفاده از برچسب ها و مشخصه های ذکر شده را مشخص خواهد کرد.
.jpg "آموزش گام به گام HTML : قسمت چهارم")
ساخت لينک برای تصوير
<a href="nextpage.htm"><img src="buttonnext.gif" ></a>
ادامه دارد ......
ارسال مقاله توسط عضو محترم سایت با نام کاربری : davidfattahi
/س
