آموزش HTML - ايجاد عكس با تگ img

براي ايجاد عكس بايد از تگ img كه يك تگ فرد هست استفاده نمود . مهمترين خصيصه اين تگ ، خصيصه src مي باشد كه بايد آدرس عكس را به صورت نسبي (local) در آن تنظيم كرد .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2.png" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ][/color]
اگر بخواهيم يك متن توضيحي به شكل hint هنگامي كه ماوس بر روي عكس قرار مي گيرد ظاهر شود ، بايد از خصوصيت title استفاده كنيم . مانند زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2.png" title="توضيح عكس" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ][/color]
معمولاتگ img را جوري تنظيم مي كنند كه اگر عكس درست لود نشد به جاي آن يك جمله توضيحي نمايش يابد . دليل لود نشدن عكس هر چيزي مي تواند باشد مثلا گم شدن بسته هاي اطلاعاتي در شبكه ، اشتباه بودن نام و .... اين كار (يعني نمايش يك جمله توضيحي) توسط خصيصه alt انجام مي شود . كد زير نحوه كاربرد اين مطلب را نشان مي دهد .
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<img src="/images/preview_f2_invalid_picture.png" title="توضيح عكس" alt="متن جايگزين عكس" />
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ][/color]
البته اين خصيصه يعني alt فقط در مرورگر IE كار مي كند . جهت بهينه سازي وب سايت براي موتور هاي جستجو (سئو يا SEO) خصيصه هاي alt و title يكي از گزينه هاي مهم هستند كه بايد رعايت شوند و كمك زيادي براي افزايش رنك در موتورهاي جستجو مي كنند . لازم به ذكر است كه در مرورگر IE خصيصه alt مي تواند به جاي title هم استفاده شود (يعني alt كار title را انجام ميدهد ) اما title نمي تواند به جاي alt استفاده شود .
همچنين مي توانيم از خصيصه style براي تگ img استفاده كنيم . با اين خصيصه مي توانيم عرض و ارتفاع مناسب براي عكس را معين كنيم .
حتي مي توان عكس را به آدرس خاصي لينك داد . يعني كاري كرد كه نشانگر ماوس هنگامي كه بر روي عكس قرار مي گيرد به شكل دست شده و با كليك بر روي آن به صفحه خاصي هدايت شويم . براي اين منظور بايد عكس را به در داخل تگ a قرار داد ، همانند زير :

<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="/http://www.yahoo.com" >
<img src="/images/preview_f2_invalid_picture.png" title="توضيح عكس" alt="متن جايگزين عكس" />
</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ][/color]
در برخي نسخ مرورگر ها هنگامي كه عكس را داخل يك تگ a ميگذاريم يك كادر دور عكس قرار مي گيرد . براي برداشتن اين كادر مي توان خصيصه border در تگ img را برابر صفر قرار داد . عكس اين مطلب هم صادق است يعني مي توان براي گذاشتن يك قاب با پهناي دلخواه از اين خصيصه استفاده كرد . به شكل زير :
<p style="font-family : tahoma ; color:blue ; Background-Color : yellow" >
<a href="/http://www.yahoo.com" >
<img src="/images/preview_f2_invalid_picture.png" border="10" alt="متن جايگزين عكس" />
</a>
</p>
نتيجه اجراي كد به شكل زير است :
[COLOR=blue ][/color]