تصاویر یکی از مهمترین اجزای صفحات وب هستند و یادگیری نحوهی درج و مدیریت آنها در HTML برای هر طراح وب ضروری است.
✅ افزودن تصویر به صفحه
برای نمایش تصویر در HTML از عنصر <img> استفاده میکنیم. این عنصر نیازی به تگ پایانی ندارد.
مثال ساده:
<img src="life-on-the-tracks.jpg" alt="Squirrel on train tracks">
⚙️ توضیح ویژگیها (Attributes)
- src (Source): مسیر فایل تصویری را مشخص میکند.
- اگر تصویر در همان پوشهی فایل HTML باشد، فقط نام فایل کافی است.
- alt (Alternative text): متن جایگزین برای تصویر.
- نمایش داده میشود اگر تصویر بارگذاری نشود.
- توسط نرمافزارهای صفحهخوان برای دسترسیپذیری استفاده میشود.
📁 سازماندهی بهتر فایلها
برای نظم بیشتر پروژهها، بهتر است تصاویر را در پوشهای جداگانه مثل images قرار دهید:
<img src="images/life-on-the-tracks.jpg" alt="Squirrel on train tracks">
📂 پوشههای تو در تو (Nested folders)
اگر پوشهی images شامل پوشهی فرعی animals باشد:
<img src="images/animals/life-on-the-tracks.jpg" alt="Squirrel on train tracks">
/یعنی وارد پوشهی بعدی شو.
🔙 رفتن به پوشه بالاتر
اگر تصویر خارج از پوشهی فایل HTML باشد:
<img src="../cat.jpg" alt="Cat">
..یعنی برو یک سطح بالاتر.- برای دو سطح بالاتر:
<img src="../../some-image.jpg" alt="Example">
🎯 جمعبندی
- از
<img>برای درج تصویر استفاده کنید. - ویژگی src مسیر تصویر را مشخص میکند.
- ویژگی alt متن جایگزین برای دسترسپذیری و مواقعی که تصویر بارگذاری نمیشود.
- مسیرها میتوانند نسبی باشند:
/برای ورود به پوشه../برای خروج به پوشهی بالاتر
- برای نظم بهتر پروژه، تصاویر را در پوشههایی مثل
imagesقرار دهید.