تگ img در HTML

با تگ img در HTML در این مقاله آشنا می شویم.

نکات اصلی تگ img

• تگ <img> تصویری را در صفحه HTML تعریف می کند.
• برای پیوند دادن یک تصویر به سند دیگری ، از تگ های <img> داخل <a> استفاده کنید.

استفاده و هدف تگ img در HTML

تگ <img> منطقه ای را برای یک تصویر تعیین می کند. ویژگی img scr لازم است (معمولاً یک پیوند).

نکته: عنصر img فقط به یک تگ باز نیاز دارد.

<img src="image.png" alt="Space Doggo" width="50" height="50">

این تصویر بالا با کد زیر ، از جمله تگ تصویر HTML اضافه شده است.

<img src="image.png" alt="Doggo" width="205" >

توجه: تصاویر در یک صفحه HTML وارد نمی شوند ، اما به صفحه HTML پیوند داده می شوند.

ویژگی های استفاده  از img

alt

این یک متن جایگزین برای یک تصویر را نشان می دهد درصورتی که امکان نمایش آن وجود ندارد.

<img src="image.png" alt="Space Doggo" width="50" height="50">

crossorigin

این مشخص می کند که تصاویر مربوط به وب سایت های شخص ثالث است و به آن ها امکان دسترسی متقابل را می دهد.

<img src="image.png" alt="Lemon" crossorigin="anonymous">

height

ارتفاع تصویر را بر حسب پیکسل تعریف می کند.

<img src="image.png" alt="Doggo" height="60">

longdesc

این یک URL به شرح دقیق یک تصویر اضافه می کند.

<img src="image.png" alt="Doggo" width="205" height="205" longdesc="#description">

src

img src URL یک تصویر را تنظیم می کند.

<img src="image.png" alt="Doggo" width="205">

width در تگ img

عرض تصویر را بر حسب پیکسل تعریف می کند.

<img src="image.png" alt="Doggo" width="100">

ویژگی های منسوخ شده تگ img

align

این تراز بندی یک تصویر را با توجه به عناصر اطراف تعریف می کند. در HTML5 پشتیبانی نمی شود.

در عوض باید از CSS استفاده کنید. بیاموزید که چگونه عناصر را در آموزش تراز کردن افقی و عمودی قرار دهید.

<img src="image.png" alt="Doggo" align="middle">

border

عرض حاشیه را در اطراف تصویر تعریف می کند. در HTML5 پشتیبانی نمی شود.

در عوض ، از ویژگی حاشیه CSS استفاده کنید. بیاموزید که چگونه در TUT Borders CSS بروید.

<img src="image.png" alt="Doggo with a 5 pixels border" border="5">

hspace

این یک فضای سفید در سمت چپ و سمت راست یک تصویر ایجاد می کند. در HTML5 پشتیبانی نمی شود.

در عوض ، از ویژگی حاشیه CSS استفاده کنید. چگونه در آموزش حاشیه های CSS بیاموزید.

<img src="image.png" alt="Doggo" hspace="20">

vspace در تگ img

این یک فضای سفید در بالا و پایین تصویر ایجاد می کند. در HTML5 پشتیبانی نمی شود.

در عوض ، از ویژگی حاشیه CSS استفاده کنید. چگونگی انجام کار را در آموزش حاشیه های CSS بیاموزید.

<img src="image.png" alt="Doggo" vspace="50">

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.