تگ img در HTML
تصاویر برای زیبایی و درک بهتر مطالب سایت شما بسیار کاربردی هستند.
شما برای اینکه تصویری را در سایت خود قرار دهید باید از تگ img استفاده کنید.
این المان تگ بسته ندارد.
نکته: "تگ بسته ندارد" به این معنا است که <img></img> نوشته نمی شود.
ساختار تگ img به صورت زیر است:
تگ img به این صورت نوشته می شود :
<img src="" alt="">ویژگی src در تگ img
برای اینکه بتوانیم تصویری را نمایش دهیم باید از ویژگی src استفاده کنیم. با ویژگی src، آدرس تصویر را مشخص می کنیم.
<img src="https://pnldev.com/pic.jpg">نکته: برای اطلاعات بیشتر درباره ی آدرس دهی به صفحه آدرس دهی HTML مراجعه کنید.
ویژگی alt در تگ img
تگ img علاوه بر ویژگی src، ویژگی دیگری به نام alt یا متن جایگزین تصویر دارد.
ویژگی alt این امکان را می دهد تا در صورت لود نشدن تصویر، متن جایگزین را چاپ کند.
<img src="https://pnldev.com/picccc.jpg" alt="image">ویژگی width و height در HTML
برای مشخص کردن عرض و ارتفاع تصویر، از دو ویژگی width و height استفاده می کنیم.
با ویژگی width، عرض و با ویژگی height، ارتفاع تصویر را بر اساس پیکسل مشخص می کنیم.
<img src="https://pnldev.com/pic.jpg" alt="image html" width="500" height="300"><img src="https://pnldev.com/pic.jpg" alt="image" width="200">نکته: همان طور که در نمونه کد بالا دیدید، در صورت تنظیم کردن ویژگی width، ویژگی height هم به صورت خودکار تغییر می کند.
اگر طول و عرض (width و height) تصویر با یکدیگر متناسب نباشد (مانند نمونه کد زیر) عکس خراب و اصطلاحا hard crop می شود.
<img src="https://pnldev.com/pic.jpg" alt="image" width="400" height="700">خلاصه درس
- برای عکس گذاشتن در صفحات وب باید از تگ <img> استفاده کنید.
- برای دادن آدرس به عکس باید از ویژگی src استفاده کنیم.
- همچنین برای تعیین اندازه عکس باید از ویژگی های width و height استفاده کنیم.
تمرین
در تمرین زیر یک عکس را با استفاده از لینک زیر نمایش دهید :
برای اینکار باید از ویژگی src استفاده کنید.
از این آدرس برای اگسمپل استفاده کنید
https://pnldev.com/pic.jpg
احسان اسلامی
