برای نمایش عکس در صفحات وب از تگ <img> استفاده می‌کنیم.

این تگ self-closing است (تگ بسته ندارد).

📌 ساختار کلی

<img src="آدرس_عکس" alt="توضیحات" width="عرض" height="ارتفاع">

📝 توضیحات ویژگی‌ها (Attributes)

• src → آدرس یا مسیر عکس (اجباری).

• alt → متن جایگزین (وقتی عکس لود نشود یا برای نابینایان).

• width و height → تنظیم ابعاد تصویر.

• title → نمایش متن هنگام قرار گرفتن ماوس روی تصویر.

📍 مثال‌ها

1. نمایش عکس ساده

<img src="images/photo.jpg" alt="یک تصویر نمونه">

2. تغییر اندازه عکس

<img src="images/logo.png" alt="لوگو سایت" width="200" height="150">

3. تصویر با متن راهنما

<img src="pic.jpg" alt="غروب زیبا" title="این یک غروب زیبا است">

4. عکس به عنوان لینک

<a href="https://www.example.com">
  <img src="banner.jpg" alt="بنر تبلیغاتی" width="300">
</a>

5. عکس از اینترنت (URL)

<img src="https://example.com/image.png" alt="تصویر از اینترنت">

🎨 استایل‌دهی عکس با CSS

img {
  border-radius: 10px;  /* گوشه‌های گرد */
  box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* سایه */
  max-width: 100%;  /* واکنش‌گرا */
  height: auto;
}

🚀 نکته مهم

• همیشه از ویژگی alt استفاده کن (برای سئو و دسترس‌پذیری).

• برای واکنش‌گرا (Responsive) بودن بهتره اندازه‌ها رو با CSS کنترل کنی نه مستقیماً در HTML.