تصاویر (Images) در HTML
تصاویر (Images) در HTML برای بهبود طراحی و جذابیت بصری صفحات وب استفاده می شوند. با استفاده از تگ <img> می توانید تصاویر را در صفحه وب قرار دهید.
نحوه استفاده از تگ img
تگ <img> خالی است و فقط شامل ویژگی ها می باشد. این تگ دو ویژگی ضروری دارد:
src: مسیر تصویرalt: متن جایگزین در صورت بارگذاری نشدن تصویر
<img src="img_girl.jpg" alt="دختری با کت">ویژگی src
ویژگی src مسیر تصویر را مشخص می کند. اگر تصویر پیدا نشود، مرورگر متن جایگزین را نشان می دهد.
<img src="flowers.jpg" alt="تصویر گل">ویژگی alt
ویژگی alt برای توضیح تصویر استفاده می شود و در دسترس پذیری (Accessibility) بسیار اهمیت دارد.
<img src="wrongname.jpg" alt="گل ها در چانیا">نکته: استفاده از متن جایگزین برای کاربران نابینا و نرم افزارهای صفحه خوان ضروری است.
اندازه تصاویر
می توانید با ویژگی های width و height یا با استفاده از CSS اندازه تصویر را مشخص کنید.
<img src="img_girl.jpg" alt="دختر" style="width:500px;height:600px;">تصاویر در پوشه دیگر یا وب سایت دیگر
اگر تصویر در پوشه یا سرور دیگری باشد، باید مسیر کامل را مشخص کنید:
<img src="/images/html5.png" alt="HTML5 Icon">
<img src="https://www.example.com/logo.jpg" alt="لوگو">هشدار: تصاویر خارجی ممکن است کپی رایت داشته باشند و در هر زمانی حذف شوند.
تصویر متحرک و تصویر به عنوان لینک
می توانید تصاویر متحرک GIF استفاده کنید یا تصویر را به عنوان پیوند قرار دهید:
<a href="index.html">
<img src="smiley.gif" alt="آموزش HTML" style="width:42px;height:42px;">
</a>شناوری تصویر با float
می توانید با خاصیت CSS float تصویر را در سمت راست یا چپ متن قرار دهید:
<p>
<img src="smiley.gif" alt="لبخند" style="float:right;width:42px;height:42px;">
متن کنار تصویر
</p>فرمت های رایج تصاویر
- JPEG - مناسب برای عکس ها
- PNG - پشتیبانی از شفافیت
- GIF - تصاویر متحرک
- SVG - تصاویر برداری
خلاصه فصل
- از تگ
<img>برای نمایش تصویر استفاده کنید. - ویژگی
srcمسیر تصویر را مشخص می کند. - ویژگی
altمتن جایگزین تصویر است. - با
widthوheightیا CSS اندازه را تغییر دهید. - با خاصیت
floatتصویر را کنار متن قرار دهید.
برای ادامه مطالعه به بخش ایجاد نشانک ها در HTML و نقشه تصاویر در HTML مراجعه کنید.