آموزش قرار دادن تصویر در HTML

آموزش قرار دادن تصویر در HTML یکی از آموزش‌های کاربردی است، برای قرار دادن تصویر در صفحه HTML از تگ img استفاده می‌شود. این تگ یک تگ تهی است، یعنی نیازی به تگ پایانی ندارد.

نحوه قرار دادن عکس در HTML

همانطور که در پاراگراف بالا توضیح دادیم برای قرار دادن تصویر در صفحه HTML از تگ img استفاده می‌شود. این تگ یک تگ تهی است، یعنی نیازی به تگ پایانی ندارد. اکنون به شما آموزش می‌دهیم که بتوانید با استفاده از این تگ عکس دلخواه خود را فراخوانی کنید.

در اینجا ساختار کلی تگ img آمده است:

HTML

<img src="مسیر_تصویر" alt="متن_جایگزین">

مهمترین صفات تگ img

• src: این صفت آدرس (URL) تصویر را مشخص می کند.
• alt: این صفت یک متن جایگزین برای تصویر تعریف می کند که در صورت عدم نمایش تصویر به کاربر نشان داده می شود. این متن برای موتورهای جستجو و خوانندگان صفحه نمایش نیز مفید است.

مثال:

فرض کنید می خواهید تصویری با نام image.jpg را در پوشه images در ریشه وب سایت خود نمایش دهید. کد HTML به صورت زیر خواهد بود:

HTML

<img src="images/image.jpg" alt="عنوان تصویر">

نکات:

• می توانید از مسیرهای مطلق یا نسبی برای آدرس تصویر استفاده کنید.
• اگر از مسیر نسبی استفاده می کنید، مسیر باید از محل فایل HTML شروع شود.
• صفت alt را همیشه پر کنید، حتی اگر تصویر به وضوح قابل مشاهده باشد.
• می توانید از صفات دیگری مانند width و height برای تنظیم اندازه تصویر استفاده کنید.
• همچنین می توانید از CSS برای تنظیم ظاهر تصویر مانند حاشیه، فاصله و سبک نمایش استفاده کنید.

منابع مفید:

• آموزش جامع استفاده از تصاویر درHTML-تگ img،اندازه،فرمت.
• آموزش کار با تصاویر یا Images در HTML | سایت آموزشی فری لرن
• آموزش کار با عکس در html – مجموعه آموزشی پژوهشی فرکیان تک.

اگر می‌خواهید با تمامی تگ‌های HTML آشنا شوید و به یادگیری HTML علاقه‌مند هستید به شما پیشنهاد می‌کنیم آموزش‌های رایگان سایت آکادمی دویکس را ببینید و مقالات مربوط به این دسته را مطالعه کنید.

نکته تکمیلی درباره تگ img

در اینجا چند نکته تکمیلی درباره تگ img و قرار دادن تصویر در HTML آورده شده است:

1. استفاده از مسیرهای مطلق و نسبی:

• مسیر مطلق: آدرس کامل تصویر را از جمله نام دامنه، پروتکل (http یا https) و آدرس پوشه و فایل تصویر را مشخص می کند. به عنوان مثال:

HTML

<img src="https://www.example.com/images/image.jpg" alt="عنوان تصویر">

• مسیر نسبی: آدرس تصویر را نسبت به محل فایل HTML شما مشخص می کند. به عنوان مثال، اگر فایل HTML شما در پوشه root و تصویر در پوشه images باشد، می توانید از مسیر نسبی زیر استفاده کنید:

HTML

<img src="images/image.jpg" alt="عنوان تصویر">

2. صفات دیگر تگ img:

علاوه بر صفات src و alt، می توانید از صفات دیگری نیز برای تنظیم ظاهر و عملکرد تصویر استفاده کنید. برخی از صفات مفید عبارتند از:

• width: عرض تصویر را به پیکسل مشخص می کند.
• height: ارتفاع تصویر را به پیکسل مشخص می کند.
• border: ضخامت و رنگ حاشیه تصویر را تعیین می کند.
• margin: فاصله بین تصویر و عناصر اطراف آن را تنظیم می کند.
• padding: فاصله بین لبه تصویر و محتوای آن را تعیین می کند.
• class: به شما امکان می دهد تا یک کلاس CSS به تصویر اختصاص دهید و استایل های سفارشی را با استفاده از CSS اعمال کنید.
• id: به شما امکان می دهد تا یک شناسه منحصر به فرد به تصویر اختصاص دهید و آن را با استفاده از JavaScript دستکاری کنید.

3. استفاده از CSS برای استایل دهی به تصاویر:

می توانید از CSS برای تنظیم ظاهر تصاویر خود به طور دقیق‌تر استفاده کنید. به عنوان مثال، می‌توانید رنگ، شفافیت، موقعیت، و افکت‌های تصویری مانند سایه یا گرد کردن گوشه‌ها را با استفاده از CSS کنترل کنید.

4. مثال های کاربردی:

• قرار دادن تصویر به عنوان لینک:

HTML

<a href="https://www.example.com">
  <img src="images/link-image.jpg" alt="لینک به وب سایت">
</a>

• ایجاد یک گالری تصاویر:

HTML

<div class="gallery">
  <img src="images/image1.jpg" alt="عنوان تصویر 1">
  <img src="images/image2.jpg" alt="عنوان تصویر 2">
  <img src="images/image3.jpg" alt="عنوان تصویر 3">
</div>

• استفاده از تصاویر به عنوان پس زمینه:

CSS

body {
  background-image: url('images/background.jpg');
  background-repeat: repeat;
}

نکته: در نظر داشته باشید که بهینه سازی تصاویر برای وب از نظر حجم و سرعت بارگذاری نیز بسیار مهم است.