تصاویر در HTML؛ تگ img و متن جایگزین | درس 9

درس 9 از دوره 60 قسمتی آموزش HTML و CSS ارومیا دیزاین

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

در درس 8: لینک ها و مسیرهای نسبی و مطلق آدرس دهی را تمرین کردیم. همان منطق برای پیدا کردن فایل تصویر هم کاربرد دارد؛ تفاوت این است که مقصد را در ویژگی src می نویسیم. برای اجرای مثال ها، یک عکس دلخواه در اختیار داشته باشید و از آن نسخه ای با نام ساده مانند mountain.jpg تهیه کنید.

در پایان این درس چه چیزی یاد می گیرید؟

• افزودن تصویر با img و تعیین مسیر با src.
• نوشتن alt مناسب برای تصویر محتوایی و تزئینی.
• تعیین عرض و ارتفاع بدون کشیدگی عکس.
• ساخت توضیح قابل مشاهده با figure و figcaption.
• ساخت تصویر قابل کلیک و رفع خطاهای رایج مسیر فایل.

ساختار تگ img در HTML

برای شروع، فایل HTML و عکس را در یک پوشه بگذارید. سپس کد زیر را داخل body بنویسید:

<img src="mountain.jpg" alt="قله برفی کوه در کنار دریاچه">

ویژگی src محل فایل را مشخص می کند. ویژگی alt متنی است که مفهوم یا کارکرد تصویر را در زمینه صفحه منتقل می کند. در HTML، عنصر img تگ پایانی ندارد؛ بنابراین نباید برای آن </img> بنویسید. اگر با قرار گرفتن ویژگی ها داخل تگ آشنا نیستید، درس 5: تگ ها و ویژگی ها را مرور کنید.

این کد تصویر را از اینترنت جستجو نمی کند و فایل جدیدی نمی سازد. عکس باید واقعا در مسیر نوشته شده وجود داشته باشد. اگر عکس شما موضوع دیگری دارد، نام فایل و متن alt را متناسب با همان عکس تغییر دهید.

قرار دادن تصاویر در پوشه images

برای مرتب ماندن پروژه، کنار index.html یک پوشه به نام images بسازید و عکس را داخل آن قرار دهید. اکنون مسیر تصویر یک مرحله طولانی تر می شود:

<img src="images/mountain.jpg" alt="قله برفی کوه در کنار دریاچه">

اگر فایل HTML داخل پوشه pages باشد و images در ریشه پروژه قرار داشته باشد، مسیر از داخل آن صفحه چنین خواهد بود:

<img src="../images/mountain.jpg" alt="قله برفی کوه در کنار دریاچه">

ابتدا با ../ از pages خارج می شویم و سپس وارد images می شویم. برای مرور محل فایل ها، درس 3: ساختار پوشه های پروژه را ببینید. نام فایل ها را کوتاه و منظم انتخاب کنید؛ مثلا team-photo.webp از نام هایی مانند final-new-2.jpg قابل فهم تر است.

متن جایگزین alt را چگونه بنویسیم؟

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

برای نمونه، اگر عکس یک کوله پشتی آبی از نمای روبه رو را نشان می دهد، این کد توصیف مشخصی دارد:

<img src="images/blue-backpack.jpg" alt="کوله پشتی آبی با دو جیب جلویی">

عبارت هایی مانند «عکس زیبا» یا تکرار پشت سر هم کلمات کلیدی، اطلاعات مفیدی به مخاطب نمی دهند. لازم نیست alt را همیشه با «تصویرِ» شروع کنید. همچنین alt را با زیرنویس اشتباه نگیرید: زیرنویس را همه می بینند، اما alt متن جایگزین تصویر است و معمولا هنگام نمایش عادی عکس دیده نمی شود.

تصویر تزئینی چه alt داشته باشد؟

اگر تصویر فقط تزئینی است و اطلاعات تازه ای به صفحه اضافه نمی کند، می توانید alt خالی قرار دهید. خالی بودن با حذف کامل ویژگی فرق دارد:

<img src="images/decoration.png" alt="">

این تصمیم را بر اساس نقش تصویر بگیرید. عکسی که جزئیات محصول را نشان می دهد یا تنها محتوای یک لینک است، صرفا به دلیل زیبا بودن تزئینی محسوب نمی شود.

عرض و ارتفاع تصویر در HTML

عرض و ارتفاع را با عدد انگلیسی و بدون واحد در ویژگی های width و height بنویسید. اگر فایل شما 1200 در 800 پیکسل است، نسبت آن 3 به 2 خواهد بود. اعداد نمونه را با ابعاد واقعی فایل خود هماهنگ کنید:

<img
  src="images/mountain.jpg"
  alt="قله برفی کوه در کنار دریاچه"
  width="1200"
  height="800"
>

در نمونه زیر یک قانون ساده CSS اضافه می کنیم تا عکس از عرض فضای در دسترس بزرگ تر نشود و ارتفاع آن متناسب بماند. فعلا کافی است کاربرد این دو دستور را بدانید؛ جزئیات CSS را در بخش مربوط به آن تمرین می کنیم.

<img
  src="images/mountain.jpg"
  alt="قله برفی کوه در کنار دریاچه"
  width="1200"
  height="800"
  style="max-width:100%;height:auto"
>

تعیین ابعاد متناسب به مرورگر کمک می کند پیش از بارگذاری عکس برای آن فضا در نظر بگیرد. با این حال، کوچک کردن نمایش عکس حجم فایل دانلودی را کم نمی کند. اگر عکسی چند مگابایت حجم دارد، باید خود فایل را پیش از انتشار به اندازه و کیفیت مناسب تبدیل کنید.

توضیح زیر تصویر با figure و figcaption

گاهی می خواهید کنار عکس، توضیحی قابل مشاهده ارائه کنید. عنصر figure محتوای مستقل مانند یک تصویر آموزشی را گروه بندی می کند و figcaption توضیح همان مجموعه را مشخص می کند. هر تصویر ساده ای الزاما به این ساختار نیاز ندارد.

<figure>
  <img
    src="images/mountain.jpg"
    alt="قله برفی کوه و انعکاس آن در دریاچه"
    width="1200"
    height="800"
    style="max-width:100%;height:auto"
  >
  <figcaption>نمونه تصویر افقی برای تمرین نمایش عکس در صفحه وب.</figcaption>
</figure>

زیرنویس می تواند درباره هدف یا زمینه عکس توضیح بدهد؛ لازم نیست متن alt را عینا تکرار کند. این انتخاب بخشی از ساختار معنایی صفحه است، همان رویکردی که در درس 7: قالب بندی معنایی متن دنبال کردیم.

تبدیل تصویر به لینک

برای قابل کلیک شدن عکس، img را داخل یک عنصر a قرار دهید. در اینجا href مقصد کلیک است و src فایل تصویری را مشخص می کند. این دو ویژگی نقش یکسان ندارند:

<a href="gallery.html">
  <img
    src="images/mountain.jpg"
    alt="مشاهده گالری تصاویر طبیعت"
    width="600"
    height="400"
    style="max-width:100%;height:auto"
  >
</a>

چون تصویر در این مثال تنها محتوای لینک است، alt هدف لینک را بیان می کند. فایل gallery.html باید وجود داشته باشد؛ وگرنه عکس دیده می شود اما کلیک روی آن به مقصد قابل استفاده نمی رسد.

بارگذاری تنبل تصاویر پایین صفحه

برای عکسی که پایین صفحه و خارج از نمای اولیه است، ویژگی loading="lazy" می تواند دریافت فایل را تا نزدیک شدن به محدوده نمایش به تعویق بیندازد. آن را بی هدف به عکس اصلی بالای صفحه اضافه نکنید:

<img
  src="images/workshop.jpg"
  alt="میز کار با لپ تاپ و دفتر یادداشت"
  width="900"
  height="600"
  loading="lazy"
  style="max-width:100%;height:auto"
>

این ویژگی جای فشرده سازی فایل را نمی گیرد. حتی عکس هایی که دیرتر بارگذاری می شوند باید حجم مناسبی داشته باشند. زمان دقیق شروع دریافت را مرورگر تعیین می کند.

کدام فرمت تصویر را انتخاب کنیم؟

فقط عوض کردن پسوند، فرمت فایل را تبدیل نمی کند. برای تبدیل JPG به WebP باید تصویر را با ابزار مناسب در فرمت جدید ذخیره کنید. حجم نهایی نیز به محتوای تصویر و تنظیم کیفیت وابسته است.

پروژه عملی: صفحه معرفی یک منظره

کنار index.html پوشه images را بسازید. یک عکس منظره با نام mountain.jpg داخل آن بگذارید. در این نمونه ابعاد 1200 در 800 فرض شده است؛ اگر عکس شما ابعاد دیگری دارد، اعداد و توضیح را اصلاح کنید. سپس کد کامل زیر را در index.html ذخیره کنید:

<!doctype html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>گالری کوچک من</title>
</head>
<body>
  <h1>گالری کوچک من</h1>
  <p>در این صفحه اولین تصویر پروژه را نمایش می دهم.</p>
  <figure>
    <img
      src="images/mountain.jpg"
      alt="قله برفی کوه در کنار دریاچه"
      width="1200"
      height="800"
      style="max-width:100%;height:auto"
    >
    <figcaption>عکس انتخابی من برای تمرین درس 9.</figcaption>
  </figure>
</body>
</html>

ساختار اصلی سند مطابق درس 4: ساختار سند HTML است. عنوان و پاراگراف نیز بر اساس درس 6: عنوان ها و پاراگراف ها نوشته شده اند. پس از باز کردن فایل، باید عنوان، عکس و زیرنویس را ببینید. عرض پنجره را کم کنید؛ عکس باید داخل صفحه بماند و کشیده یا فشرده نشود.

چرا تصویر در HTML نمایش داده نمی شود؟

• مسیر نادرست: مسیر را از محل فایل HTML محاسبه کنید؛ پوشه images ممکن است در سطح دیگری باشد.
• نام متفاوت: نام mountain.jpg را با Mountain.jpg یکسان فرض نکنید؛ روی بسیاری از سرورها تفاوت دارند.
• پسوند اشتباه: فایل mountain.png را با مسیر mountain.jpg فراخوانی نکنید.
• بارگذاری ناقص: هنگام انتقال پروژه، عکس ها را همراه فایل HTML روی هاست قرار دهید.
• آدرس صفحه به جای عکس: src باید به منبع تصویر اشاره کند، نه صفحه ای که عکس را نمایش می دهد.
• فایل خراب: خود عکس را جداگانه باز کنید تا از سالم بودن آن مطمئن شوید.

برای آزمایش ساده، مسیر نوشته شده در src را بررسی کنید و فایل را در همان پوشه پیدا کنید. اگر فایل HTML را جابه جا کرده اید، مسیر قبلی ممکن است دیگر درست نباشد. از مسیر شخصی کامپیوتر مانند درایو C برای سایت عمومی استفاده نکنید.

تمرین درس 9

فایل index.html را به پوشه pages منتقل کنید، اما images را در ریشه پروژه نگه دارید. مسیر تصویر را اصلاح کنید. سپس یک زیرنویس جدید بنویسید و alt را با موضوع عکس خود هماهنگ کنید. در پایان، نام فایل تصویر را موقتا تغییر دهید تا رفتار صفحه هنگام پیدا نشدن عکس را ببینید؛ بعد نام درست را برگردانید.

<figure>
  <img
    src="../images/mountain.jpg"
    alt="قله برفی کوه در کنار دریاچه"
    width="1200"
    height="800"
    style="max-width:100%;height:auto"
  >
  <figcaption>نمایی از طبیعت در گالری تمرینی من.</figcaption>
</figure>

پرسش های متداول

آیا alt همان title است؟

خیر. title می تواند اطلاعات تکمیلی ارائه کند، اما جای متن جایگزین تصویر را نمی گیرد. برای توضیحی که همه باید بخوانند، متن قابل مشاهده یا figcaption مناسب تر است.

آیا برای افزودن تصویر به JavaScript نیاز داریم؟

خیر. برای نمایش عادی تصویر، HTML کافی است. تغییر ظاهر و اندازه انعطاف پذیر را می توان با CSS انجام داد.

آیا عرض کم، عکس را سبک می کند؟

خیر. تغییر عرض نمایش به تنهایی اندازه فایل اصلی را کاهش نمی دهد. فایل را پیش از بارگذاری بهینه کنید.

چک لیست پایان درس

• تصویر در مسیر درست قرار دارد و باز می شود.
• alt با نقش واقعی تصویر هماهنگ است.
• عرض و ارتفاع نسبت عکس را حفظ می کنند.
• عکس در صفحه باریک از کادر بیرون نمی زند.
• تفاوت src، href، alt و figcaption را می دانم.
• بعد از جابه جایی فایل HTML، مسیر تصویر را اصلاح کرده ام.

مرجع فنی برای مطالعه بیشتر: مستندات عنصر img در MDN.

درس قبلی: لینک ها و مسیرهای نسبی و مطلق در HTML | درس 8