تگ img از کلمه Image گرفته شده که به معنی تصویر می باشد. همان طور که از نام تگ img پیداست، این تگ برای قرار دادن تصویر در صفحات وب به کار می رود. در ادامه این مقاله برای آشنایی بیشتر با تگ عکس در اچ تی ام ال همراه داتیس نتورک باشید.
تگ img در HTML چیست؟
تگ <img> از کلمه Image گرفته شده که به معنی تصویر می باشد. همان طور که از نام تگ عکس پیداست، این تگ برای قرار دادن تصویر در صفحات وب به کار می رود.
تگ <img> در HTML نیازی به بسته شدن ندارد و از <img/> در آن استفاده نمی شود.
تگ img در تمام مرورگر های معتبر مانند Safari و Firefox و Google Chrome و… پشتیبانی می شود.
مثال تگ عکس
همان طور که مشاهده می کنید این تگ میان تگ Body قرار می گیرد.
تگ p برای افزودن متن به صفحات وب می باشد و ما در این مثال از تگ p برای توضیح در مورد تگ ایمیج استفاده کردیم.
<!DOCTYPE html> <html> <body> <h2>HTML Images</h2> <p>برای قرار دادن عکس در صفحات وب به صورت زیر عمل می کنیم</p> <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> </body> </html>
در ادامه این مقاله برای آشنایی با خصوصیت های این تگ همراه ما باشید.
خصوصیت های تگ img
در این بخش از مقاله می خواهیم به صفت ها و خصوصیت های تگ عکس بپردازیم.
صفت src و alt
این تگ دارای دو صفت مهم src و alt می باشد که باید در تگ عکس از آن استفاده کنید.
خصوصیت Src برای مشخص کردن آدرس تصویر در تگ می باشد. این خاصیت به مرورگر اعلام می‌کند که آدرس فایل تصویر در کجا قرار دارد.
معمولا برای آدرس دهی به صفحات داخل وبسایت از آدرس دهی وابسته استفاده می‌شود.
خصوصیت Alt برای تعیین یک متن جایگزین برای تصویر استفاده می باشد، این خاصیت یک توضیح از تصویر ارائه می‌دهد که تصویر معین شده را توصیف می‌کند.
صفت height و width
برای تغییر عرض تصویر باید روبروی width عدد مورد نظر خود را بنویسید.
و برای تغییر ارتفاع تصویر شما باید روبروی height عدد مورد نظر خود را بنویسید.
صفت align
این خاصیت معمولا برای تعیین نحوه رفتار سایر بخش های صفحه وب نسبت به موقعیت تصویر است.
خاصیت align در HTML 5 به بالا حذف شده است که وبسایت‌های جدید باید از کد‌های CSS برای کنترل این خاصیت استفاده کنند.
لینک دادان در تگ img
برای مشخص کردن آدرس تصویر در سند HTML شما باید از تگ a استفاده کنید، به مثال زیر توجه کنید.
<a href="https://datisnetwork.com"> <img src="img-tag-html.jpg" alt="Example for img tag" width="42" height="42"> </a>
امیدواریم مقاله آشنایی با تگ عکس در اچ تی ام ال برای شما مفید بوده باشد.
داتیس نتورک را در شبکه های اجتماعی دنبال کنید.