در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.
تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.
برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.
<img src="آدرس عکس" alt="متن آلترنیتیو">
توجه کنید هنگامی که عکس لود نشود متن آلترنیتیو به جای آن نمایش داده خواهد شد.
تنظیم طول و عرض یک عکس
خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.
مقدار این خصوصیت ها به طور پیش فرض بر اساس پیکسل مشخص می شوند.
<!DOCTYPE html> <html> <body> <img src="http://blog.tehrancode.com/wp-content/uploads/طراحی-سایت-تهرانکد-Copy.jpg" alt="لوگوی تهران کد" width="228" height="228"> </body> </html>
نکته: این کار خوبی است که خصوصیت عرض و طول یک عکس را مشخص کنید. اگر این خصوصیت ها تنظیم شوند، زمانی که صفحه در حال لود شدن است، مکان مورد نیاز برای عکس در بین دیگر عناصر صفحه رزرو شده است. بنابراین طرح صفحه در حال لود با طرح کاملاً لود شده ی صفحه، تفاوتی نخواهد داشت. اما اگر این خصوصیات را تنظیم نکنید، مرورگر نمی تواند اندازه عکس را تشخیص دهد و اگر تصویری در بین متن باشد. جای آن تا لود کامل تصویر خالی خواهد ماند.
تراز بندی عکس ها
تصاویر به کمک اتریبیوت align میتوانند ۳ تراز بندی عمودی bottom , middle و top داشته باشند قطعه کد زیر نحوه استفاده از این اتریبیوت را نشان می دهد:
<!DOCTYPE html> <html> <body> <p>An image <img src="example.jpg" alt="bottom alignment image" align="bottom" width="32" height="32" /> with align="bottom".</p> <p>An image <img src="example.jpg" alt="middle alignment image" align="middle" width="32" height="32" /> with align="middle".</p> <p>An image <img src="example.jpg" alt="top alignment image" align="top" width="32" height="32" /> with align="top".</p> <p><b>Tip:</b> align="bottom" is default!</p> </body> </html>
شناور نمودن تصاویر در سمت چپ یا راست المان های inline دیگر:
<!DOCTYPE html> <html> <body> <p> <img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html>
ایجاد image map
میتوان در هر عکس ناحیه ای را مشخص نمود تا آن ناحیه در عکس به حالت لینک در آید
<!DOCTYPE html> <html> <body> <p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> </body> </html>
قرار دادن تصویر پس زمینه:
<!DOCTYPE html>
<html>
<body style="background-image:url('skies.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>