پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
استفاده از تصاویر در زبان html بسیار پرکاربرد و مهم است برای قرار دادن عکس در صفحات وبسایت از تگ img استفاده مینماییم.
تگ img تگ پایانی ندارد و تنها خصیصه های یک تگ را داراست ، تصاویر صفحات وبسایت را بسیار زیبا و جداب میکنند .
باسلام خدمت کاربران عزیز وبسایت پرنیان طرح
در این مطلب میخواهیم نحوه قرار دادن تصویر در html آموزش دهیم.
معرفی تگ img:
در آموزش های قبل با نحوه ی قرار دادن عنوان ها ، متن و همچنین لینک ها در وبسایت را آموختیم.
در این مطلب میخواهیم با گذاشتن عکس در کدهای html آشنا شویم.
تگ img تگی است که تگ پایانی ندارد و باید انتهای تگ علامت / را قرار دهیم.
از صفت src برای قرار دادن آدرس عکس در اینترنت استفاده مینماییم.
در مثال زیر آدرس تصویری که میخواهیم در src قرار دهیم را از پوشه ی image فراخوانی مینماییم:
[php]
< img src=”image/photo1.png” />
[/php]
صفت alt : متن جایگزین تصویر را مشخص میکند اگر عکس روی صفحه load نشود این متن بجای عکسی که قرار دادیم نشان داده می شود.
[php]
<img src=”image/photo1.png” alt=”متن جایگزین تصویر”>
[/php]
صفت align : این صفت چگونگی قرار گرفتن تصویر در متن را مشخص میکند.
میتوانیم مشخص کنیم که تصویر در بالای متن قرار گیرد یا در پایین متن در مثال زیر با این صفت آشنا شوید.
left و right : با این دو مقدار می توان تصویر را به سمت چپ یا راست متن انتقال داد.
[php]
<img src=”image/photo1.png” align=”top” />
[/php]
صفت title : عنصر title هنگامی که کاربر ماوس را روی تصویر می برد، متنی کوتاه در رابطه با تصویر به کاربر نشان میدهد.
[php]
<img src=”image/photo1.png” title=”نمایش تصویر در html”/>
[/php]
صفت height و width : برای مشخص کردن ارتفاع و عرض تصویر از دو ویژگی width و height در تگ img استفاده میکنیم، این کار برای سئو و موتورهای جستجو اهمیت زیادی دارد.
[php]
<img src=”image/photo1.png” height=”150″ width=”150″/>
[/php]
صفت area و map : هنگامی که میخواهیم بیش از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از تنظیمات با ویژگی map و area در تگ img بر روی تصاویر اعمال میکنیم.
[php]
<html>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<img src=”workplace.jpg” alt=”Workplace” usemap=”#workmap” width=”400″ height=”379″>
<map name=”workmap”>
<area shape=”rect” coords=”34,44,270,350″ alt=”Computer” href=”computer.htm”>
<area shape=”rect” coords=”290,172,333,250″ alt=”Phone” href=”phone.htm”>
<area shape=”circle” coords=”337,300,44″ alt=”Cup of coffee” href=”coffee.htm”>
</map>
</body>
</html>
[/php]
نحوه مقدار دادن عکس ها در صفت style :
[php]
<html>
<body style=”background-image:url(‘clouds.jpg’);”>
<h2>Background Image</h2>
<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>
</body>
</html>
[/php]
