یکی از پرکاربردترین تگ ها در صفحات وب، تگ نمایش تصاویر یا img است که امکان نمایش یک تصویر در صفحات سایت را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی در اختیارمان قرار می دهند .
قصد دارم در ادامه شما را با تگ img و ویژگیهایی که در بین این تگ استفاده می شود ، بیشتر آشنا کنم .
استفاده از تگ img در HTML
شکل کلی تگ به شکل زیر می باشد
<imgsrc="لینک عکس"alt='some_text'/>
SRC آدرس محل قرار گرفتن فایل عکس است و alt در واقع متنی است که اگر تصویر به هر دلیل نشان داده نشود، داخل کادر خالی آن، به نمایش در می آید و به نوعی راهنمای کاربران است تا از محتوای آن تصویر، با خبر شوند. این ویژگی در سئو نیز کاربرد ویژه ای دارد که در این بخش توضیح داده نمی شود .
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<imgsrc='http://www.learning.asarayan.com/boat.gif'alt='Big Boat'/>
</body>
</html>
دقت داشته باشید که اسم تصویر در بین تگ src و یک نام برای تصویر بین تگ alt قرار گرفته است .
به جز ویژگی Alt شما می توانید از ویژگیهای دیگری نیز استفاده کنید که در ادامه به آنها اشاره میکنم
ویژگی title در تگ img
title هنگامی استفاده می شود که کاربر ماوس خود را بر روی تصویر چند ثانیه ای نگه دارد تا متن مورد نظر نمایش داده شود.
<head>
<title>عنوان صفحه</title>
</head>
<body>
<imgsrc='link'alt='Big Boat' title='تصویر یک قایق بزرگ '/>
</body>
</html>
ویژگی height و width در تگ img
یکی دیگر از ویژگیهایی که می توانید در بین تگ img استفاده کنید height و width می باشد که با استفاده از این دو ویژگی می توانید عرض و ارتفاع تصویر را مشخص کنید .
<title>عنوان صفحه</title>
</head>
<body>
<imgsrc='link'alt='Big Boat' title='تصویر یک قایق بزرگ ' width='304' height='228'/>
</body>
</html>
ویژگی border در تگ img
از border مخصوصا در مواقعی که به تصویر خود لینک می دهید، می توان برای حذف حاشیه ها استفاده کرد، در برخی مرورگر ها وقتی یک تصویر را به صورت لینک شده درمی آورید، به صورت پیش فرض نواری آب رنگ به عنوان حاشیه تصویر در نظر گرفته می شود، برای حذف این حالت می توانید مقدار صفر را برای border در نظر بگیرید، به مثال زیر توجه کنید.
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<imgsrc='link'alt='Big Boat' title='تصویر یک قایق بزرگ ' width='304' height='228'border='1px'/>
<body/>
<html/>