تصویر — ترم ۱ آیرو

در این فصل چه می‌سازی#

تا اینجا هر چیزی که روی صفحه آوردی متن بود: تیتر، پاراگراف، لینک. ولی وب فقط متن نیست. آخر این فصل یک صفحه داری که یک عکس واقعی نشان می‌دهد، با یک خط توضیح زیرش — درست مثل کارت‌های معرفی که در سایت‌های واقعی می‌بینی. و مهم‌تر از خودِ عکس، یاد می‌گیری وقتی عکس نیامد چه اتفاقی می‌افتد و چطور کاری کنی که صفحه‌ات باز هم فهمیده شود.

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

آخر این فصل می‌توانی:

یک تصویر را با <img> و src روی صفحه بیاوری
برای هر تصویر یک alt درست بنویسی و بگویی چرا اجباری است
با width و height جلوی پریدنِ صفحه هنگام آمدنِ تصویر را بگیری
یک تصویر را با <figure> و <figcaption> به یک توضیح گره بزنی

قبل از شروع#

از فصل ۱: اسکلت کامل صفحه — <!DOCTYPE html>، <head>، <title>، <body>.
از فصل ۲: <h1> برای تیتر و  برای پاراگراف.
از فصل ۳: یادت هست که href آدرسِ مقصدِ یک لینک بود؟ اینجا با یک attribute خیلی شبیهش آشنا می‌شوی.

مثل همیشه فقط یک مرورگر لازم داری، یا همین آزمایشگاه.

۱. اولین تصویر: `<img>` و `src`#

هر tag ای که تا حالا دیدی چیزی را در آغوش می‌گرفت: یک متن، متن می‌رفت وسطِ tag باز و بسته. ولی یک تصویر متن نیست که بشود لای دو tag گذاشتش. خودِ عکس یک فایل جداست که یک جای دیگر نشسته. پس tag تصویر فرق دارد: محتوایی برای در بر گرفتن ندارد، فقط به آن فایل اشاره می‌کند.

این tag اسمش <img> است (کوتاه‌شدهٔ image). چون چیزی برای در بر گرفتن ندارد، tag بسته هم ندارد — نه </img> ای در کار است نه چیزی. یک tag تنها که کارش این است: «اینجا یک تصویر بگذار». ولی کدام تصویر؟ این را با یک attribute به‌نام src می‌گویی. src (کوتاهِ source، یعنی «منبع») آدرسِ فایلِ تصویر است — دقیقاً همان‌طور که href در فصل قبل آدرسِ مقصدِ لینک بود.

در آزمایشگاه، داخل <body> این را بنویس. کنارِ src یک attribute دیگر هم گذاشته‌ام به‌نام alt — فعلاً فقط رونویسی‌اش کن؛ در بخشِ بعد کاملاً می‌فهمی چرا آنجاست و چرا اجباری است:

<img src="https://picsum.photos/id/237/600/400" alt="توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند">

✅ چک کن: باید یک عکس واقعی روی صفحه ببینی. اگر به‌جای عکس یک کادر خالی یا یک علامتِ شکسته می‌بینی، احتمالاً آدرس را اشتباه تایپ کرده‌ای — src مثل href سخت‌گیر است، یک حرفِ جا‌افتاده کافی است که فایل پیدا نشود.

💡 نکته: src می‌تواند دو شکل باشد، درست مثل مسیرهای لینک در فصل ۳. یا یک آدرس کاملِ روی اینترنت که با https:// شروع می‌شود (مثل بالا)، یا نامِ فایلی که کنار صفحه‌ات نشسته، مثل puppy.jpg. آزمایشگاه ما فقط تصویرهایی را نشان می‌دهد که آدرسشان با https: (یا data:) شروع می‌شود، پس برای تمرین همیشه از یک آدرسِ کاملِ اینترنتی استفاده کن.

۲. `alt`: متنی که جای تصویر می‌نشیند#

صفحه‌ای که فقط وقتی کار می‌کند که عکسش بیاید، صفحهٔ شکننده‌ای است. عکس ممکن است نیاید: اینترنت کند باشد، آدرس عوض شده باشد، یا آن کامپیوتری که عکس روی آن است همان لحظه خواب باشد. آن‌وقت کاربر به‌جای عکس چه می‌بیند؟ هیچ‌چیزِ به‌دردبخوری.

یک نفرِ دیگر هم هست که اصلاً عکس را نمی‌بیند: کسی که نابیناست و صفحه را با یک screen reader می‌خواند — برنامه‌ای که متنِ صفحه را با صدا برایش می‌خواند. screen reader نمی‌تواند به یک عکس نگاه کند؛ فقط می‌تواند چیزی را که تو دربارهٔ عکس نوشته‌ای بخواند.

اینجاست که همان alt که در بخشِ قبل کنارِ src نوشتی معنا پیدا می‌کند. alt یک attribute است که یک متن جایگزین برای تصویر می‌گذاری (اسمش هم از alternative می‌آید) و دو کارِ حیاتی می‌کند: وقتی عکس نیاید، مرورگر همین متن را به‌جایش نشان می‌دهد؛ و screen reader همین متن را با صدا می‌خواند. برای همین از همان اولین <img> نوشتیمش، نه به‌عنوان چیزی اضافه.

✅ چک کن: به عکسِ سالمَت نگاه کن — alt هیچ اثری روی ظاهرش نگذاشته. alt قهرمانِ بی‌سروصداست: تا وقتی همه‌چیز خوب است خودش را نشان نمی‌دهد. حالا کاری می‌کنیم که خودش را نشان بدهد.

مقایسهٔ یک کادرِ تصویرِ شکسته که کنارش متنِ alt خوانده می‌شود، در برابر یک کادرِ خالیِ بی‌متن

حالا عمداً خرابش کن#

این بهترین لحظهٔ کلِ فصل است. در آزمایشگاه، src را عوض کن و به‌جای آدرسِ درست بنویس puppy.jpg — فایلی که وجود ندارد:

<img src="puppy.jpg" alt="توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند">

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

حالا قدمِ دوم را بردار: کلِ alt را پاک کن، جوری که فقط <img src="puppy.jpg"> بماند. دوباره نگاه کن.

این‌بار فقط یک کادرِ خالیِ شکسته می‌بینی و هیچ چیزِ دیگری. کاربر هیچ راهی ندارد بفهمد اینجا قرار بوده چه باشد. و کاربرِ نابینا؟ screen reader یا سکوت می‌کند یا فقط اسمِ فایل را می‌خواند — که یعنی آن تکه از صفحه برایش کاملاً گم شده.

همین را با چشمِ خودت دیدی: با alt، معنا زنده می‌ماند؛ بی alt، تصویر که برود، اطلاعاتش هم می‌رود. به همین سادگی alt از «خوب است بنویسی» تبدیل می‌شود به «هر تصویر باید داشته باشد». حالا src را به آدرسِ درست برگردان و alt را هم بنویس.

⚠️ مواظب باش: alt باید خودِ تصویر را توصیف کند، نه اسمِ فایل باشد نه کلمهٔ «عکس». alt="image" یا alt="عکس ۱" مثلِ نداشتنش بی‌فایده است. از خودت بپرس: «اگر این عکس نبود و کسی فقط این جمله را می‌خواند، همان چیزی را می‌فهمید که عکس می‌خواست بگوید؟» تصویرهای صرفاً تزئینی یک حالتِ خاص دارند که در فصلِ دسترس‌پذیری کامل می‌بینیم؛ فعلاً هر تصویری که معنایی دارد، یک alt معنادار می‌خواهد.

🤖 با AI: یک عکس را در ذهنت انتخاب کن — مثلاً «نمودارِ فروشِ یک فروشگاه که در سه ماهِ آخر بالا رفته». حالا آن را فقط با کلمات برای دستیار AI ات توصیف کن و بخواه برایش یک alt بنویسد. بعد قضاوت کن: آیا alt ای که داد، هدفِ تصویر را می‌گوید (که فروش بالا رفته)، یا فقط ظاهرش را («یک نمودار با چند خط رنگی»)؟ خیلی وقت‌ها AI ظاهر را توصیف می‌کند نه پیام را — و تازه اینجا می‌فهمی چرا alt را فقط تو، که می‌دانی عکس برای چه آنجاست، می‌توانی درست بنویسی. جوابش را با همان معیارِ ساده بسنج: اگر تصویر نبود، آیا این جمله جایش را پر می‌کرد؟

۳. `width` و `height`: صفحه دیگر نپرد#

یک مشکلِ ظریف ولی آزاردهنده وجود دارد. عکس‌ها فایل‌های سنگینی‌اند و کمی دیرتر از متن می‌رسند. تا وقتی عکس نرسیده، <img> هیچ جایی روی صفحه اشغال نمی‌کند — انگار اصلاً آنجا نیست. بعد که عکس می‌رسد، ناگهان جا باز می‌کند و هر چیزی که زیرش بود به پایین می‌پرد. تا حالا شده وسطِ خواندن یک صفحه، خطی که می‌خواندی یک‌دفعه بپرد پایین؟ همین است.

راهِ حل این است که از قبل به مرورگر بگویی عکس چقدر جا می‌خواهد، با دو attribute دیگر: width (پهنا) و height (بلندی)، هر دو برحسب pixel و بدونِ واحد. آن‌وقت مرورگر همان لحظه دقیقاً به همان اندازه جا نگه می‌دارد، و وقتی عکس می‌رسد توی جای آماده‌ای می‌نشیند که منتظرش بوده. هیچ‌چیز نمی‌پرد. این عکس ما ۶۰۰ در ۴۰۰ است، پس:

<img src="https://picsum.photos/id/237/600/400" alt="توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند" width="600" height="400">

برای اینکه پرش را با چشمِ خودت ببینی، یک  بعد از عکس بگذار (مثلاً زیرِ عکس نوشته می‌شود.). حالا width و height را بردار و صفحه را دوباره باز کن: لحظهٔ آمدنِ عکس، آن پاراگراف یک تکان به پایین می‌خورد. حالا دو attribute را برگردان و دوباره باز کن: پاراگراف سرِ جایش می‌ماند و اصلاً تکان نمی‌خورد.

✅ چک کن: با width و height، محتوایی که زیرِ عکس است هنگامِ لود شدنِ عکس تکان نمی‌خورد. روی اینترنتِ کند این فرق خیلی واضح‌تر است، ولی حتی وقتی سریع لود می‌شود، مرورگر جا را از پیش نگه می‌دارد.

💡 نکته: این دو عدد فقط برای «نگه‌داشتنِ جا» هستند و نسبتِ اصلی تصویر را به مرورگر می‌گویند. بعداً در ترمِ CSS یاد می‌گیری اندازهٔ نمایشِ عکس را جدا کنترل کنی؛ ولی همین دو عدد را همیشه بنویس، چون کارِ جلوگیری از پرش را می‌کنند نه اندازهٔ نهایی را.

🔧 اگر کار نکرد: عکس کش‌آمده یا پهن‌وکوتاه یا کج شد؟ یعنی نسبتِ width به height با نسبتِ واقعیِ خودِ عکس نمی‌خواند. عددها را با ابعادِ واقعیِ تصویر یکی کن (اینجا ۶۰۰ و ۴۰۰)؛ عددهای بی‌ربط تصویر را بدشکل می‌کنند.

۴. `figure` و `figcaption`: تصویر با توضیح#

خیلی وقت‌ها یک تصویر به یک توضیح احتیاج دارد — یک خط زیرش که می‌گوید این چیست، کجاست، یا کارِ کیست. می‌توانی همین‌طوری یک  زیرِ <img> بگذاری، ولی آن‌وقت هیچ‌چیز به مرورگر نمی‌گوید که این عکس و آن توضیح به هم مربوط‌اند؛ فقط دو چیزِ همسایه‌اند.

برای همین دو tag داریم که این پیوند را می‌سازند. <figure> یک تصویر (یا یک تکه کد، یک نمودار، یک نقلِ‌قول) را به‌عنوان یک واحدِ مستقل دور خودش می‌پیچد. <figcaption> که داخلِ همان <figure> می‌نشیند، توضیحِ آن واحد است — و مرورگر می‌داند این دو یکی‌اند. عکس را داخلِ <figure> بگذار و زیرش یک <figcaption> اضافه کن:

<figure>
  <img src="https://picsum.photos/id/237/600/400" alt="توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند" width="600" height="400">
  <figcaption>راکی، سه‌ماهه، آمادهٔ بازی.</figcaption>
</figure>

✅ چک کن: حالا عکس را می‌بینی و درست زیرش یک خطِ توضیح. این توضیح جزئی از خودِ تصویر شده، نه یک پاراگرافِ سرگردان.

💡 نکته: alt و figcaption یکی نیستند و نباید تکراری باشند. alt جای تصویر را برای کسی که آن را نمی‌بیند پر می‌کند؛ figcaption توضیحی است که همه می‌خوانند، چه عکس را ببینند چه نبینند. پس alt می‌گوید «توله‌سگِ سیاه دراز کشیده»، و figcaption چیزِ تازه‌ای اضافه می‌کند: «راکی، سه‌ماهه». دو کارِ متفاوت.

حالا همه‌چیز را کنار هم بگذار. صفحهٔ کاملِ این فصل این است:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>یک دوست تازه</title>
  </head>
  <body>
    <h1>یک دوست تازه پیدا کن</h1>
    <p>این توله‌سگ دنبال یک خانهٔ گرم می‌گردد. اگر جا داری، به او فکر کن.</p>
    <figure>
      <img src="https://picsum.photos/id/237/600/400" alt="توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند" width="600" height="400">
      <figcaption>راکی، سه‌ماهه، آمادهٔ بازی.</figcaption>
    </figure>
  </body>
</html>

✅ چک کن: یک تیتر، یک پاراگراف، و زیرِ آن یک عکس با توضیح. روی tab مرورگر هم باید بنویسد «یک دوست تازه». همین حالا یک صفحهٔ واقعی با تصویر ساختی.

چالش: اگر تصویر سالم بیاید، باز هم alt لازم است؟

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
`<img>`	ایمِیج	tag تنها (بدون tag بسته) که یک تصویر روی صفحه می‌آورد
`src`	سُورس	attribute که آدرسِ فایلِ تصویر را می‌گوید
`alt`	اَلت	متنِ جایگزینِ تصویر؛ وقتی عکس نیاید نشان داده می‌شود و screen reader آن را می‌خواند
`width` / `height`	ویدث / هایت	attribute های پهنا و بلندیِ تصویر برحسب pixel، برای نگه‌داشتنِ جا و جلوگیری از پرش
`<figure>`	فیگِر	یک واحدِ مستقل (تصویر و مانندِ آن) که دورِ محتوا پیچیده می‌شود
`<figcaption>`	فیگ‌کَپشِن	توضیحِ همان `<figure>` که داخلش می‌نشیند

تمرین‌ها

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

در فصل بعد#

الان می‌توانی متن، لینک و تصویر را روی صفحه بیاوری. ولی خیلی از محتواها یک فهرستاند: مراحلِ یک دستور غذا، فهرستِ خریدها، منوی یک سایت. فصل بعد سراغ فهرست‌ها می‌رویم: <ul> برای فهرستِ بدونِ ترتیب، <ol> برای فهرستِ شماره‌دار، <li> برای هر مورد، و اینکه چطور یک فهرست را داخلِ فهرستی دیگر جا بدهی.

به آخر این فصل رسیدی!

اگر ساختی و جواب داد، این دکمه مال توست.