web development-وب-برنامه نویسی وب-فرانت اند-front endدوره رایگان-الگوریتم اول-free-آموزش کامل

لطفا صبر کنید...

تصاویر و ویژگی‌های آن در HTML

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

ساختار کلی تگ img

<img src="image.jpg" alt="توضیح تصویر" width="300" height="200">

ویژگی‌های تگ img

  1. src (Source)
    ویژگی src آدرس یا مسیر تصویر را مشخص می‌کند. این آدرس می‌تواند یک مسیر محلی به فایل تصویری باشد یا یک URL به یک تصویر در وب.

    <img src="https://www.example.com/image.jpg" alt="توضیح تصویر">

  2. alt (Alternative Text)
    ویژگی alt برای نمایش متنی جایگزین در صورت عدم بارگذاری تصویر یا برای کاربران با ناتوانی در بینایی (از طریق صفحه‌خوان‌ها) استفاده می‌شود.

    <img src="image.jpg" alt="تصویری از یک گربه">

  3. width و height
    این ویژگی‌ها برای تنظیم ابعاد تصویر استفاده می‌شوند. مقدار آن‌ها می‌تواند به پیکسل یا درصد باشد.

    <img src="image.jpg" alt="تصویر با اندازه تنظیم شده" width="500" height="300">
    • اگر فقط یکی از این ویژگی‌ها مشخص شود، مرورگر نسبت تصویر را حفظ خواهد کرد.

  4. title
    ویژگی title اطلاعات اضافی را نمایش می‌دهد زمانی که موس روی تصویر قرار می‌گیرد.

    <img src="image.jpg" alt="تصویر زیبای غروب" title="غروب خورشید در ساحل">

  5. loading
    ویژگی loading برای کنترل نحوه بارگذاری تصویر استفاده می‌شود. می‌توان از آن برای بارگذاری تنبل (lazy loading) استفاده کرد، به این معنی که تصویر تنها زمانی بارگذاری می‌شود که به سمت آن اسکرول کنیم.

    <img src="image.jpg" srcset="image-small.jpg 600w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 1500px" alt="تصویر ریسپانسیو">
    • مقادیر قابل استفاده: lazy (بارگذاری تنبل) و eager (بارگذاری فوری).

  6. srcset و sizes
    این ویژگی‌ها به ما این امکان را می‌دهند که تصاویر مختلف را برای وضوح‌های صفحه و اندازه‌های مختلف دستگاه بارگذاری کنیم (تصویر ریسپانسیو).

    <img src="image.jpg" srcset="image-small.jpg 600w, image-medium.jpg 1000w, image-large.jpg 1500w" sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 1500px" alt="تصویر ریسپانسیو">
    • srcset: مجموعه‌ای از تصاویر با اندازه‌های مختلف.
    • sizes: شرایطی که هر تصویر باید برای آن بارگذاری شود.

استفاده از تصاویر در HTML

تصاویر معمولاً برای نمایش محتوای بصری در وب‌سایت‌ها به کار می‌روند. برخی از کاربردهای رایج تصاویر عبارتند از:

  • لوگوهای سایت
  • تصاویر محصولات
  • تصاویری که محتوای متنی را تکمیل می‌کنند (مانند تصاویر توضیحی یا تزئینی)

نمونه کد تصویری ساده

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمونه تصویر</title>
</head>
<body>
    <h1>به سایت ما خوش آمدید</h1>
    <img src="logo.png" alt="لوگوی سایت" width="200">
    <p>این تصویری از لوگوی سایت است.</p>
</body>
</html>

نتیجه‌گیری

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