قرار دادن تصاوير در يک فايل HTML
براي قرار دادن تصاير در صفحه وب خود، مي بايست از تگ img به روش زير استفاده کنيد:
<img
src="The address of Graphic File">
همان طور که درسهاي پيشين ياد گرفتيد، src يکي از خاصيتهاي تگ img مي باشد. اين
خاصيت اصلي ترين خاصيت براي تگ img محسوب مي شود. چرا که آدرس تصويري را که مي
خواهيد درون صفحه وب خود قرار دهيد به ما مي دهد. اگر اين خاصيت نبود، فايلهاي
گرافيکي هيچ موقع در وب نمايش داده نمي شدند! البته تگ img داراي خاصيتهاي ديگري مي
باشد که در طي اين درس به بررسي آنها مي پردازم...
با استفاده از خاصيت border، مي توانيد دور عکس خود يه کادر مربعي شکل رسم کنيد. از
اين خاصيت بايد به صورت border="n" استفاده کنيد که در آن n يک عدد بر حسب پيکسل
است. مثال:
<img
src="http://www.persianlearn.com/images/welcome.jpg" border="0">
خاصيت alt
به هزار و يک دليل ممکن است که فايل تصويري شما لود نشود... شما مي توانيد متني را
انتخاب کنيد که اگر احيانا فايل شما نمايش داده نشد، آن متن نمايش داده شود. اين
عمل سبب مي شود که فرد بازديد کننده متوجه شود که آن عکس مربوط به چه چيزي مي باشد.
مثال:
<img
src="http://www.persianlearn.com/images/welcome.jpg" border="0" alt="Persian
Learn Welcome Logo">
بعضي از مرورگرها (Browser) مثلا IE 5 به بالا، مقدار خاصيت alt را به عنوان
Tooltip نيز نشان مي دهند.
اندازه تصوير
دو مثال بالا را در نظر بگيريد. در آن دو مثال، صحبتي از اندازه تصوير نشد. در
حقيقت هنگامي که مرورگر سعي در نمايش آن فايل مي کند، ابعاد آن را تا هنگامي که آن
را شناسايي نکند نمي داند. به همين دليل نمي تواند فضاي مورد نياز براي نمايش آن در
صفحه وب را نمايش دهد. پس بهتر است که خودتان اندازه تصوير را به تگ img اضافه کنيد
تا فضاي آن از همان اول نمايان شود. براي اين کار شما بايد از دو خاصيت width و
height استفاده کنيد. تگ width نشان دهنده پهنا و تگ height نشان دهنده درازاي فايل
تصويري مي باشد. اين دو خاصيت را بايد به صورت width="x" و height="y" به کار ببريد
که در آن x و y يک عدد بر حسب پيکسل (pixel) مي باشد. مثال:
<img
src="http://www.persianlearn.com/images/welcome.jpg" border="0" alt="Persian
Learn Welcome Logo" width="230" height="210">
ساختن يک تصوير Link دار
ساختن يک تصوير لينک دار بسيار ساده مي باشد. براي اين کار شما مي بايست تگ img را
در ميان تگ a قرار دهيد! البته در مورد لينکها در درسهاي بعدي به طور کامل توضيح
خواهم داد. مثال:
<a
href="http://www.persianlearn.com"><img
src="http://www.persianlearn.com/images/smalllogo.jpg"border="0" alt="Persian
Learn"></a>
در مثال بالا، فايل گرافيکي که در قسمت src آدرس آن را مشاهده مي کنيد، نمايش داده
مي شود. چنان چه کاربر بر روي اين فايل کليک کند، به سايت پرشين لرن که آدرس آن را
در قسمت href مي بينيد، خواهد رفت. حتما تا به حال هم ديده ايد که در زير بيشتر
لوگوها در سايتها و يا وبلاگها، کدهايي نوشته شده اند. اين کدها در حقيقت يک فايل
گرافيکي و يا در اصل لوگو مي باشند که به جايي لينک داده شده اند. اين کدها در
حقيقت کار شما را راحت کرده اند و چنان چه شما خواستيد به وبلاگ و يا سايتي لينک
دهيد، (بدين معنا که لوگوي آن سايت يا وبلاگ را درون سايت و يا وبلاگ خود قرار
دهيد)، تنها کافيست اين کدها را کپي کرده و در جاي مورد نظر خود درون صفحه وب قرار
دهيد.
موقعيت تصوير
مي توانيد تصوير مورد نظر خود را در سمت چپ و يا راست متن خود قرار دهيد. براي
اينکار مي بايست از خاصيت align استفاده کنيد. مقادير left و right را مي توانيد
براي اين خاصيت به کار ببريد.
<img
src="logo.jpg" alt="Persian Learn" border="0" align="right">
هنگامي که مقدار align برابر right شود، عکس در سمت راست و نوشته ها در سمت چپ آن
قرار مي گيرند و بالعکس...
