عکس در HTML
تصویر در HTML
یکی از پرکاربردترین تگ ها در صفحات وب، تگ نمایش تصاویر یا img است که امکان نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و… استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند. برای آوردن عکس در سند HTML از تگ <img> استفاده می کنیم.
این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است.
مثال:
<!DOCTYPE html>
<html>
<body>
<h2>نمایش عکس</h2>
<img src="/favicon.ico" alt="لوگوی سایت شاه کد">
</body>
</html>
ویژگی alt در تگ img
برای اینکه مرورگر به نحو درستی تصاویر را نشان دهد، باید در کنار تگ img از خاصیت های جانبی آن استفاده کنیم، اولین خاصیت، ویژگی alt یا متن جایگزین تصویر است، alt در واقع متنی است که اگر تصویر به هر دلیل نشان داده نشود، داخل کادر خالی آن، به نمایش در می آید و به نوعی راهنمای کاربران است تا از محتوای آن تصویر، با خبر شوند.
<img src="example-image.jpg" alt="example-image" />
ویژگی title در تگ img
علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، از این ویژگی برای تعریف ماهیت تصویر استفاده می شود.
<img src="example-image.jpg" alt="example-image" title="نمایش متن برای تصویر" />
ویژگی height و width در تگ img
برای اینکه ارتفاع و عرض یا اندازه تصویر خود را تعریف کنیم، از دو ویژگی width و height در کنار سایر ویژگی تگ img استفاده می کنیم، این کار کمکی به سئو و موتورهای جستجو میکنند و اهمیت زیادی دارد.
<img src="example-image.jpg" alt="example-image" title="نمایش متن برای تصویر" height="100" width="200" />
مطالب زیر را حتما مطالعه کنید
طراحی جدول ها در بوت استرپ
سیستم Grid در بوت استرپ 4
آشنایی با Bootstrap 4
تایپوگرافی در بوت استرپ 4
آموزش قدم به قدم Bootstrap
دیدگاهتان را بنویسید