[{"data":1,"prerenderedAt":253},["ShallowReactive",2],{"lesson:t1-s04-images":3,"course:taropood":57},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,4,"t1-s04-images","book",1,"فصل ۰۴ — تصویر",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},5,"t1-s05-lists","فصل ۰۵ — فهرست",[20,24,27,32,35,38,41,44,48,51,54],{"kind":21,"heading":22,"html":23},"normal","در این فصل چه می‌سازی","\u003Ch2 id=\"در-این-فصل-چه-می‌سازی\">در این فصل چه می‌سازی\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84-%DA%86%D9%87-%D9%85%DB%8C%E2%80%8C%D8%B3%D8%A7%D8%B2%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>تا اینجا هر چیزی که روی صفحه آوردی متن بود: تیتر، پاراگراف، لینک. ولی وب فقط متن نیست. آخر این فصل یک صفحه داری که یک عکس واقعی نشان می‌دهد، با یک خط توضیح زیرش — درست مثل کارت‌های معرفی که در سایت‌های واقعی می‌بینی. و مهم‌تر از خودِ عکس، یاد می‌گیری وقتی عکس \u003Cstrong>نیامد\u003C\u002Fstrong> چه اتفاقی می‌افتد و چطور کاری کنی که صفحه‌ات باز هم فهمیده شود.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-figure-page.06dad8319d.160.webp 160w, \u002F_img\u002F01-image-figure-page.06dad8319d.320.webp 320w, \u002F_img\u002F01-image-figure-page.06dad8319d.640.webp 640w, \u002F_img\u002F01-image-figure-page.06dad8319d.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-figure-page.06dad8319d.1280.jpg\" srcset=\"\u002F_img\u002F01-image-figure-page.06dad8319d.160.jpg 160w, \u002F_img\u002F01-image-figure-page.06dad8319d.320.jpg 320w, \u002F_img\u002F01-image-figure-page.06dad8319d.640.jpg 640w, \u002F_img\u002F01-image-figure-page.06dad8319d.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"صفحهٔ نهایی این فصل: یک تیتر، یک پاراگراف، و یک عکس با توضیح زیرش، باز شده در مرورگر\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک تصویر را با \u003Ccode>&lt;img&gt;\u003C\u002Fcode> و \u003Ccode>src\u003C\u002Fcode> روی صفحه بیاوری\u003C\u002Fli>\n\u003Cli>برای هر تصویر یک \u003Ccode>alt\u003C\u002Fcode> درست بنویسی و بگویی چرا اجباری است\u003C\u002Fli>\n\u003Cli>با \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> جلوی پریدنِ صفحه هنگام آمدنِ تصویر را بگیری\u003C\u002Fli>\n\u003Cli>یک تصویر را با \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> و \u003Ccode>&lt;figcaption&gt;\u003C\u002Fcode> به یک توضیح گره بزنی\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":21,"heading":25,"html":26},"قبل از شروع","\u003Ch2 id=\"قبل-از-شروع\">قبل از شروع\u003Ca class=\"head-anchor\" href=\"#%D9%82%D8%A8%D9%84-%D8%A7%D8%B2-%D8%B4%D8%B1%D9%88%D8%B9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۱:\u003C\u002Fstrong> اسکلت کامل صفحه — \u003Ccode>&lt;!DOCTYPE html&gt;\u003C\u002Fcode>، \u003Ccode>&lt;head&gt;\u003C\u002Fcode>، \u003Ccode>&lt;title&gt;\u003C\u002Fcode>، \u003Ccode>&lt;body&gt;\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲:\u003C\u002Fstrong> \u003Ccode>&lt;h1&gt;\u003C\u002Fcode> برای تیتر و \u003Ccode>&lt;p&gt;\u003C\u002Fcode> برای پاراگراف.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> یادت هست که \u003Ccode>href\u003C\u002Fcode> آدرسِ مقصدِ یک لینک بود؟ اینجا با یک attribute خیلی شبیهش آشنا می‌شوی.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","و بگذار باز بماند. این فصل بیش از هر فصلِ قبلی «دیدنی» است — هر تغییری که در src و alt بدهی، بلافاصله نتیجه‌اش را کنار دستت می‌بینی","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-04-images",{"kind":21,"heading":33,"html":34},"۱. اولین تصویر: &lt;img&gt; و src","\u003Ch2 id=\"۱-اولین-تصویر-img-و-src\">۱. اولین تصویر: \u003Ccode>&lt;img&gt;\u003C\u002Fcode> و \u003Ccode>src\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-img-%D9%88-src\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>هر tag ای که تا حالا دیدی چیزی را در آغوش می‌گرفت: \u003Ccode>&lt;p&gt;یک متن&lt;\u002Fp&gt;\u003C\u002Fcode>، متن می‌رفت وسطِ tag باز و بسته. ولی یک تصویر متن نیست که بشود لای دو tag گذاشتش. خودِ عکس یک \u003Cstrong>فایل\u003C\u002Fstrong> جداست که یک جای دیگر نشسته. پس tag تصویر فرق دارد: محتوایی برای در بر گرفتن ندارد، فقط به آن فایل \u003Cstrong>اشاره\u003C\u002Fstrong> می‌کند.\u003C\u002Fp>\n\u003Cp>این tag اسمش \u003Ccode>&lt;img&gt;\u003C\u002Fcode> است (کوتاه‌شدهٔ image). چون چیزی برای در بر گرفتن ندارد، \u003Cstrong>tag بسته هم ندارد\u003C\u002Fstrong> — نه \u003Ccode>&lt;\u002Fimg&gt;\u003C\u002Fcode> ای در کار است نه چیزی. یک tag تنها که کارش این است: «اینجا یک تصویر بگذار». ولی کدام تصویر؟ این را با یک attribute به‌نام \u003Ccode>src\u003C\u002Fcode> می‌گویی. \u003Ccode>src\u003C\u002Fcode> (کوتاهِ source، یعنی «منبع») \u003Cstrong>آدرسِ فایلِ تصویر\u003C\u002Fstrong> است — دقیقاً همان‌طور که \u003Ccode>href\u003C\u002Fcode> در فصل قبل آدرسِ مقصدِ لینک بود.\u003C\u002Fp>\n\u003Cp>در آزمایشگاه، داخل \u003Ccode>&lt;body&gt;\u003C\u002Fcode> این را بنویس. کنارِ \u003Ccode>src\u003C\u002Fcode> یک attribute دیگر هم گذاشته‌ام به‌نام \u003Ccode>alt\u003C\u002Fcode> — فعلاً فقط رونویسی‌اش کن؛ در بخشِ بعد کاملاً می‌فهمی چرا آنجاست و چرا اجباری است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;img src=&quot;https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F600\u002F400&quot; alt=&quot;توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید یک عکس واقعی روی صفحه ببینی. اگر به‌جای عکس یک کادر خالی یا یک علامتِ شکسته می‌بینی، احتمالاً آدرس را اشتباه تایپ کرده‌ای — \u003Ccode>src\u003C\u002Fcode> مثل href سخت‌گیر است، یک حرفِ جا‌افتاده کافی است که فایل پیدا نشود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>src\u003C\u002Fcode> می‌تواند دو شکل باشد، درست مثل مسیرهای لینک در فصل ۳. یا یک آدرس کاملِ روی اینترنت که با \u003Ccode>https:\u002F\u002F\u003C\u002Fcode> شروع می‌شود (مثل بالا)، یا نامِ فایلی که کنار صفحه‌ات نشسته، مثل \u003Ccode>puppy.jpg\u003C\u002Fcode>. آزمایشگاه ما فقط تصویرهایی را نشان می‌دهد که آدرسشان با \u003Ccode>https:\u003C\u002Fcode> (یا \u003Ccode>data:\u003C\u002Fcode>) شروع می‌شود، پس برای تمرین همیشه از یک آدرسِ کاملِ اینترنتی استفاده کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. alt: متنی که جای تصویر می‌نشیند","\u003Ch2 id=\"۲-alt-متنی-که-جای-تصویر-می‌نشیند\">۲. \u003Ccode>alt\u003C\u002Fcode>: متنی که جای تصویر می‌نشیند\u003Ca class=\"head-anchor\" href=\"#%DB%B2-alt-%D9%85%D8%AA%D9%86%DB%8C-%DA%A9%D9%87-%D8%AC%D8%A7%DB%8C-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D9%85%DB%8C%E2%80%8C%D9%86%D8%B4%DB%8C%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>صفحه‌ای که فقط وقتی کار می‌کند که عکسش بیاید، صفحهٔ شکننده‌ای است. عکس ممکن است \u003Cstrong>نیاید\u003C\u002Fstrong>: اینترنت کند باشد، آدرس عوض شده باشد، یا آن کامپیوتری که عکس روی آن است همان لحظه خواب باشد. آن‌وقت کاربر به‌جای عکس چه می‌بیند؟ هیچ‌چیزِ به‌دردبخوری.\u003C\u002Fp>\n\u003Cp>یک نفرِ دیگر هم هست که \u003Cstrong>اصلاً\u003C\u002Fstrong> عکس را نمی‌بیند: کسی که نابیناست و صفحه را با یک screen reader می‌خواند — برنامه‌ای که متنِ صفحه را با صدا برایش می‌خواند. screen reader نمی‌تواند به یک عکس نگاه کند؛ فقط می‌تواند چیزی را که تو دربارهٔ عکس \u003Cstrong>نوشته‌ای\u003C\u002Fstrong> بخواند.\u003C\u002Fp>\n\u003Cp>اینجاست که همان \u003Ccode>alt\u003C\u002Fcode> که در بخشِ قبل کنارِ \u003Ccode>src\u003C\u002Fcode> نوشتی معنا پیدا می‌کند. \u003Ccode>alt\u003C\u002Fcode> یک attribute است که یک \u003Cstrong>متن جایگزین\u003C\u002Fstrong> برای تصویر می‌گذاری (اسمش هم از alternative می‌آید) و دو کارِ حیاتی می‌کند: وقتی عکس نیاید، مرورگر همین متن را به‌جایش نشان می‌دهد؛ و screen reader همین متن را با صدا می‌خواند. برای همین از همان اولین \u003Ccode>&lt;img&gt;\u003C\u002Fcode> نوشتیمش، نه به‌عنوان چیزی اضافه.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> به عکسِ سالمَت نگاه کن — \u003Ccode>alt\u003C\u002Fcode> هیچ اثری روی ظاهرش نگذاشته. \u003Ccode>alt\u003C\u002Fcode> قهرمانِ بی‌سروصداست: تا وقتی همه‌چیز خوب است خودش را نشان نمی‌دهد. حالا کاری می‌کنیم که خودش را نشان بدهد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-alt-broken.31ad5326f1.160.webp 160w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.320.webp 320w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.640.webp 640w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-alt-broken.31ad5326f1.1280.jpg\" srcset=\"\u002F_img\u002F02-image-alt-broken.31ad5326f1.160.jpg 160w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.320.jpg 320w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.640.jpg 640w, \u002F_img\u002F02-image-alt-broken.31ad5326f1.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"مقایسهٔ یک کادرِ تصویرِ شکسته که کنارش متنِ alt خوانده می‌شود، در برابر یک کادرِ خالیِ بی‌متن\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Ch3 id=\"حالا-عمداً-خرابش-کن\">حالا عمداً خرابش کن\u003Ca class=\"head-anchor\" href=\"#%D8%AD%D8%A7%D9%84%D8%A7-%D8%B9%D9%85%D8%AF%D8%A7%D9%8B-%D8%AE%D8%B1%D8%A7%D8%A8%D8%B4-%DA%A9%D9%86\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cp>این بهترین لحظهٔ کلِ فصل است. در آزمایشگاه، \u003Ccode>src\u003C\u002Fcode> را عوض کن و به‌جای آدرسِ درست بنویس \u003Ccode>puppy.jpg\u003C\u002Fcode> — فایلی که وجود ندارد:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;img src=&quot;puppy.jpg&quot; alt=&quot;توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا نگاه کن: مرورگر عکس را پیدا نمی‌کند، پس یک علامتِ «تصویرِ شکسته» می‌گذارد و \u003Cstrong>کنارش متنِ \u003Ccode>alt\u003C\u002Fcode> را می‌نویسد\u003C\u002Fstrong>. کاربر هنوز می‌داند اینجا قرار بوده عکسِ یک توله‌سگِ سیاه باشد. اطلاعات از بین نرفت.\u003C\u002Fp>\n\u003Cp>حالا قدمِ دوم را بردار: کلِ \u003Ccode>alt\u003C\u002Fcode> را پاک کن، جوری که فقط \u003Ccode>&lt;img src=&quot;puppy.jpg&quot;&gt;\u003C\u002Fcode> بماند. دوباره نگاه کن.\u003C\u002Fp>\n\u003Cp>این‌بار فقط یک کادرِ خالیِ شکسته می‌بینی و \u003Cstrong>هیچ چیزِ دیگری\u003C\u002Fstrong>. کاربر هیچ راهی ندارد بفهمد اینجا قرار بوده چه باشد. و کاربرِ نابینا؟ screen reader یا سکوت می‌کند یا فقط اسمِ فایل را می‌خواند — که یعنی آن تکه از صفحه برایش کاملاً گم شده.\u003C\u002Fp>\n\u003Cp>همین را با چشمِ خودت دیدی: \u003Cstrong>با \u003Ccode>alt\u003C\u002Fcode>، معنا زنده می‌ماند؛ بی \u003Ccode>alt\u003C\u002Fcode>، تصویر که برود، اطلاعاتش هم می‌رود.\u003C\u002Fstrong> به همین سادگی \u003Ccode>alt\u003C\u002Fcode> از «خوب است بنویسی» تبدیل می‌شود به «هر تصویر باید داشته باشد». حالا \u003Ccode>src\u003C\u002Fcode> را به آدرسِ درست برگردان و \u003Ccode>alt\u003C\u002Fcode> را هم بنویس.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode>alt\u003C\u002Fcode> باید \u003Cstrong>خودِ تصویر\u003C\u002Fstrong> را توصیف کند، نه اسمِ فایل باشد نه کلمهٔ «عکس». \u003Ccode>alt=&quot;image&quot;\u003C\u002Fcode> یا \u003Ccode>alt=&quot;عکس ۱&quot;\u003C\u002Fcode> مثلِ نداشتنش بی‌فایده است. از خودت بپرس: «اگر این عکس نبود و کسی فقط این جمله را می‌خواند، همان چیزی را می‌فهمید که عکس می‌خواست بگوید؟» تصویرهای صرفاً تزئینی یک حالتِ خاص دارند که در فصلِ دسترس‌پذیری کامل می‌بینیم؛ فعلاً هر تصویری که معنایی دارد، یک \u003Ccode>alt\u003C\u002Fcode> معنادار می‌خواهد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> یک عکس را در ذهنت انتخاب کن — مثلاً «نمودارِ فروشِ یک فروشگاه که در سه ماهِ آخر بالا رفته». حالا آن را فقط با کلمات برای دستیار AI ات توصیف کن و بخواه برایش یک \u003Ccode>alt\u003C\u002Fcode> بنویسد. بعد \u003Cstrong>قضاوت کن\u003C\u002Fstrong>: آیا \u003Ccode>alt\u003C\u002Fcode> ای که داد، هدفِ تصویر را می‌گوید (که فروش \u003Cstrong>بالا رفته\u003C\u002Fstrong>)، یا فقط ظاهرش را («یک نمودار با چند خط رنگی»)؟ خیلی وقت‌ها AI ظاهر را توصیف می‌کند نه پیام را — و تازه اینجا می‌فهمی چرا \u003Ccode>alt\u003C\u002Fcode> را فقط تو، که می‌دانی عکس \u003Cstrong>برای چه\u003C\u002Fstrong> آنجاست، می‌توانی درست بنویسی. جوابش را با همان معیارِ ساده بسنج: اگر تصویر نبود، آیا این جمله جایش را پر می‌کرد؟\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. width و height: صفحه دیگر نپرد","\u003Ch2 id=\"۳-width-و-height-صفحه-دیگر-نپرد\">۳. \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode>: صفحه دیگر نپرد\u003Ca class=\"head-anchor\" href=\"#%DB%B3-width-%D9%88-height-%D8%B5%D9%81%D8%AD%D9%87-%D8%AF%DB%8C%DA%AF%D8%B1-%D9%86%D9%BE%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک مشکلِ ظریف ولی آزاردهنده وجود دارد. عکس‌ها فایل‌های سنگینی‌اند و کمی دیرتر از متن می‌رسند. تا وقتی عکس نرسیده، \u003Ccode>&lt;img&gt;\u003C\u002Fcode> هیچ جایی روی صفحه اشغال نمی‌کند — انگار اصلاً آنجا نیست. بعد که عکس می‌رسد، ناگهان جا باز می‌کند و \u003Cstrong>هر چیزی که زیرش بود به پایین می‌پرد\u003C\u002Fstrong>. تا حالا شده وسطِ خواندن یک صفحه، خطی که می‌خواندی یک‌دفعه بپرد پایین؟ همین است.\u003C\u002Fp>\n\u003Cp>راهِ حل این است که \u003Cstrong>از قبل\u003C\u002Fstrong> به مرورگر بگویی عکس چقدر جا می‌خواهد، با دو attribute دیگر: \u003Ccode>width\u003C\u002Fcode> (پهنا) و \u003Ccode>height\u003C\u002Fcode> (بلندی)، هر دو برحسب pixel و بدونِ واحد. آن‌وقت مرورگر همان لحظه دقیقاً به همان اندازه جا نگه می‌دارد، و وقتی عکس می‌رسد توی جای آماده‌ای می‌نشیند که منتظرش بوده. هیچ‌چیز نمی‌پرد. این عکس ما ۶۰۰ در ۴۰۰ است، پس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;img src=&quot;https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F600\u002F400&quot; alt=&quot;توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>برای اینکه پرش را با چشمِ خودت ببینی، یک \u003Ccode>&lt;p&gt;\u003C\u002Fcode> بعد از عکس بگذار (مثلاً \u003Ccode>&lt;p&gt;زیرِ عکس نوشته می‌شود.&lt;\u002Fp&gt;\u003C\u002Fcode>). حالا \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> را بردار و صفحه را دوباره باز کن: لحظهٔ آمدنِ عکس، آن پاراگراف یک تکان به پایین می‌خورد. حالا دو attribute را برگردان و دوباره باز کن: پاراگراف سرِ جایش می‌ماند و اصلاً تکان نمی‌خورد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> با \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode>، محتوایی که زیرِ عکس است هنگامِ لود شدنِ عکس تکان نمی‌خورد. روی اینترنتِ کند این فرق خیلی واضح‌تر است، ولی حتی وقتی سریع لود می‌شود، مرورگر جا را از پیش نگه می‌دارد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> این دو عدد فقط برای «نگه‌داشتنِ جا» هستند و نسبتِ اصلی تصویر را به مرورگر می‌گویند. بعداً در ترمِ CSS یاد می‌گیری اندازهٔ \u003Cstrong>نمایشِ\u003C\u002Fstrong> عکس را جدا کنترل کنی؛ ولی همین دو عدد را همیشه بنویس، چون کارِ جلوگیری از پرش را می‌کنند نه اندازهٔ نهایی را.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> عکس کش‌آمده یا پهن‌وکوتاه یا کج شد؟ یعنی نسبتِ \u003Ccode>width\u003C\u002Fcode> به \u003Ccode>height\u003C\u002Fcode> با نسبتِ واقعیِ خودِ عکس نمی‌خواند. عددها را با ابعادِ واقعیِ تصویر یکی کن (اینجا ۶۰۰ و ۴۰۰)؛ عددهای بی‌ربط تصویر را بدشکل می‌کنند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. figure و figcaption: تصویر با توضیح","\u003Ch2 id=\"۴-figure-و-figcaption-تصویر-با-توضیح\">۴. \u003Ccode>figure\u003C\u002Fcode> و \u003Ccode>figcaption\u003C\u002Fcode>: تصویر با توضیح\u003Ca class=\"head-anchor\" href=\"#%DB%B4-figure-%D9%88-figcaption-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%A8%D8%A7-%D8%AA%D9%88%D8%B6%DB%8C%D8%AD\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>خیلی وقت‌ها یک تصویر به یک \u003Cstrong>توضیح\u003C\u002Fstrong> احتیاج دارد — یک خط زیرش که می‌گوید این چیست، کجاست، یا کارِ کیست. می‌توانی همین‌طوری یک \u003Ccode>&lt;p&gt;\u003C\u002Fcode> زیرِ \u003Ccode>&lt;img&gt;\u003C\u002Fcode> بگذاری، ولی آن‌وقت هیچ‌چیز به مرورگر نمی‌گوید که این عکس و آن توضیح \u003Cstrong>به هم مربوط‌اند\u003C\u002Fstrong>؛ فقط دو چیزِ همسایه‌اند.\u003C\u002Fp>\n\u003Cp>برای همین دو tag داریم که این پیوند را می‌سازند. \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> یک تصویر (یا یک تکه کد، یک نمودار، یک نقلِ‌قول) را به‌عنوان یک \u003Cstrong>واحدِ مستقل\u003C\u002Fstrong> دور خودش می‌پیچد. \u003Ccode>&lt;figcaption&gt;\u003C\u002Fcode> که داخلِ همان \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> می‌نشیند، \u003Cstrong>توضیحِ\u003C\u002Fstrong> آن واحد است — و مرورگر می‌داند این دو یکی‌اند. عکس را داخلِ \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> بگذار و زیرش یک \u003Ccode>&lt;figcaption&gt;\u003C\u002Fcode> اضافه کن:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;figure&gt;\n  &lt;img src=&quot;https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F600\u002F400&quot; alt=&quot;توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;\n  &lt;figcaption&gt;راکی، سه‌ماهه، آمادهٔ بازی.&lt;\u002Ffigcaption&gt;\n&lt;\u002Ffigure&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> حالا عکس را می‌بینی و درست زیرش یک خطِ توضیح. این توضیح جزئی از خودِ تصویر شده، نه یک پاراگرافِ سرگردان.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> \u003Ccode>alt\u003C\u002Fcode> و \u003Ccode>figcaption\u003C\u002Fcode> یکی نیستند و نباید تکراری باشند. \u003Ccode>alt\u003C\u002Fcode> جای تصویر را برای کسی که آن را \u003Cstrong>نمی‌بیند\u003C\u002Fstrong> پر می‌کند؛ \u003Ccode>figcaption\u003C\u002Fcode> توضیحی است که \u003Cstrong>همه\u003C\u002Fstrong> می‌خوانند، چه عکس را ببینند چه نبینند. پس \u003Ccode>alt\u003C\u002Fcode> می‌گوید «توله‌سگِ سیاه دراز کشیده»، و \u003Ccode>figcaption\u003C\u002Fcode> چیزِ تازه‌ای اضافه می‌کند: «راکی، سه‌ماهه». دو کارِ متفاوت.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>حالا همه‌چیز را کنار هم بگذار. صفحهٔ کاملِ این فصل این است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;!-- index.html --&gt;\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;fa&quot; dir=&quot;rtl&quot;&gt;\n  &lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;title&gt;یک دوست تازه&lt;\u002Ftitle&gt;\n  &lt;\u002Fhead&gt;\n  &lt;body&gt;\n    &lt;h1&gt;یک دوست تازه پیدا کن&lt;\u002Fh1&gt;\n    &lt;p&gt;این توله‌سگ دنبال یک خانهٔ گرم می‌گردد. اگر جا داری، به او فکر کن.&lt;\u002Fp&gt;\n    &lt;figure&gt;\n      &lt;img src=&quot;https:\u002F\u002Fpicsum.photos\u002Fid\u002F237\u002F600\u002F400&quot; alt=&quot;توله‌سگ سیاه که روی زمین دراز کشیده و به دوربین نگاه می‌کند&quot; width=&quot;600&quot; height=&quot;400&quot;&gt;\n      &lt;figcaption&gt;راکی، سه‌ماهه، آمادهٔ بازی.&lt;\u002Ffigcaption&gt;\n    &lt;\u002Ffigure&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک تیتر، یک پاراگراف، و زیرِ آن یک عکس با توضیح. روی tab مرورگر هم باید بنویسد «یک دوست تازه». همین حالا یک صفحهٔ واقعی با تصویر ساختی.\u003C\u002Fp>\n",{"kind":45,"heading":46,"html":47},"checkpoint","چالش: اگر تصویر سالم بیاید، باز هم alt لازم است؟","\u003Ch2 id=\"چالش-اگر-تصویر-سالم-بیاید-باز-هم-alt-لازم-است\">چالش: اگر تصویر سالم بیاید، باز هم \u003Ccode>alt\u003C\u002Fcode> لازم است؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%D8%A7%DA%AF%D8%B1-%D8%AA%D8%B5%D9%88%DB%8C%D8%B1-%D8%B3%D8%A7%D9%84%D9%85-%D8%A8%DB%8C%D8%A7%DB%8C%D8%AF-%D8%A8%D8%A7%D8%B2-%D9%87%D9%85-alt-%D9%84%D8%A7%D8%B2%D9%85-%D8%A7%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از ادامه جواب بده: فرض کن یک \u003Ccode>&lt;img&gt;\u003C\u002Fcode> نوشته‌ای که \u003Ccode>src\u003C\u002Fcode> اش درست است و تصویر هم بی‌مشکل می‌آید، ولی \u003Ccode>alt\u003C\u002Fcode> را جا انداخته‌ای. کاربری که چشمش عکس را می‌بیند اصلاً متوجهِ نبودِ \u003Ccode>alt\u003C\u002Fcode> می‌شود؟ پس چرا باز هم اجباری است؟\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> نه، کاربرِ بینا هیچ‌چیزِ عجیبی نمی‌بیند — عکس سرِ جایش است و صفحه سالم به‌نظر می‌رسد. و دقیقاً همین چیزی است که \u003Ccode>alt\u003C\u002Fcode> را خطرناک می‌کند وقتی جا می‌افتد: \u003Cstrong>خرابی‌اش دیده نمی‌شود.\u003C\u002Fstrong> ولی دو نفر همچنان گیر می‌کنند. اول، کاربرِ نابینا که با screen reader می‌خواند؛ برای او آن تصویر یک سکوت یا یک اسمِ فایلِ بی‌معنی است و آن تکه از پیامِ صفحه را کامل از دست می‌دهد. دوم، هر کاربری، در روزی که آن تصویر \u003Cstrong>نیاید\u003C\u002Fstrong> — آدرس عوض شود یا سرور بخوابد. \u003Ccode>alt\u003C\u002Fcode> برای «وقتی همه‌چیز خوب است» نوشته نمی‌شود؛ برای وقتی‌ای نوشته می‌شود که خوب \u003Cstrong>نیست\u003C\u002Fstrong>، و برای کسی که هیچ‌وقت عکس را نمی‌بیند. برای همین اجباری است، نه اختیاری.\u003C\u002Fp>\n",{"kind":21,"heading":49,"html":50},"واژه‌های تازهٔ این فصل","\u003Ch2 id=\"واژه‌های-تازهٔ-این-فصل\">واژه‌های تازهٔ این فصل\u003Ca class=\"head-anchor\" href=\"#%D9%88%D8%A7%DA%98%D9%87%E2%80%8C%D9%87%D8%A7%DB%8C-%D8%AA%D8%A7%D8%B2%D9%87%D9%94-%D8%A7%DB%8C%D9%86-%D9%81%D8%B5%D9%84\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>کلمه\u003C\u002Fth>\n\u003Cth>تلفظ به حروف فارسی\u003C\u002Fth>\n\u003Cth>یعنی چه\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\n\u003Ctr>\n\u003Ctd>\u003Ccode>&lt;img&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ایمِیج\u003C\u002Ftd>\n\u003Ctd>tag تنها (بدون tag بسته) که یک تصویر روی صفحه می‌آورد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>src\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>سُورس\u003C\u002Ftd>\n\u003Ctd>attribute که آدرسِ فایلِ تصویر را می‌گوید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>alt\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اَلت\u003C\u002Ftd>\n\u003Ctd>متنِ جایگزینِ تصویر؛ وقتی عکس نیاید نشان داده می‌شود و screen reader آن را می‌خواند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>width\u003C\u002Fcode> \u002F \u003Ccode>height\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ویدث \u002F هایت\u003C\u002Ftd>\n\u003Ctd>attribute های پهنا و بلندیِ تصویر برحسب pixel، برای نگه‌داشتنِ جا و جلوگیری از پرش\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>&lt;figure&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فیگِر\u003C\u002Ftd>\n\u003Ctd>یک واحدِ مستقل (تصویر و مانندِ آن) که دورِ محتوا پیچیده می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>&lt;figcaption&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>فیگ‌کَپشِن\u003C\u002Ftd>\n\u003Ctd>توضیحِ همان \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> که داخلش می‌نشیند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":45,"heading":52,"html":53},"تمرین‌ها","\u003Ch2 id=\"تمرین‌ها\">تمرین‌ها\u003Ca class=\"head-anchor\" href=\"#%D8%AA%D9%85%D8%B1%DB%8C%D9%86%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از تمرین، بدون نگاه‌کردن به بالا جواب بده: یک \u003Ccode>&lt;img&gt;\u003C\u002Fcode> حداقل به چند attribute احتیاج دارد که هم درست کار کند و هم دسترس‌پذیر باشد، و اسمشان چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> یک صفحه دربارهٔ مکانی که دوستش داری بساز (یک شهر، یک پارک، یک کافه). باید داشته باشد: اسکلتِ کامل، یک \u003Ccode>&lt;h1&gt;\u003C\u002Fcode>، یک \u003Ccode>&lt;p&gt;\u003C\u002Fcode>، و یک \u003Ccode>&lt;figure&gt;\u003C\u002Fcode> که داخلش یک تصویرِ واقعیِ \u003Ccode>https:\u003C\u002Fcode> باشد با \u003Ccode>alt\u003C\u002Fcode> معنادار، \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode>، و یک \u003Ccode>&lt;figcaption&gt;\u003C\u002Fcode> که چیزی \u003Cstrong>تازه\u003C\u002Fstrong> بگوید (نه تکرارِ \u003Ccode>alt\u003C\u002Fcode>).\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> \u003Ccode>src\u003C\u002Fcode> تصویرت را عمداً خراب کن و صفحه را به یک نفرِ دیگر نشان بده که عکس را قبلاً ندیده. فقط از روی متنِ \u003Ccode>alt\u003C\u002Fcode> که حالا دیده می‌شود، از او بخواه حدس بزند تصویر چه بوده. اگر توانست درست حدس بزند، \u003Ccode>alt\u003C\u002Fcode> تو خوب است؛ اگر نه، بازنویسش کن تا هدفِ تصویر را برساند. این بهترین آزمونِ یک \u003Ccode>alt\u003C\u002Fcode> خوب است.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"در فصل بعد","\u003Ch2 id=\"در-فصل-بعد\">در فصل بعد\u003Ca class=\"head-anchor\" href=\"#%D8%AF%D8%B1-%D9%81%D8%B5%D9%84-%D8%A8%D8%B9%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>الان می‌توانی متن، لینک و تصویر را روی صفحه بیاوری. ولی خیلی از محتواها یک \u003Cstrong>فهرست\u003C\u002Fstrong>اند: مراحلِ یک دستور غذا، فهرستِ خریدها، منوی یک سایت. فصل بعد سراغ فهرست‌ها می‌رویم: \u003Ccode>&lt;ul&gt;\u003C\u002Fcode> برای فهرستِ بدونِ ترتیب، \u003Ccode>&lt;ol&gt;\u003C\u002Fcode> برای فهرستِ شماره‌دار، \u003Ccode>&lt;li&gt;\u003C\u002Fcode> برای هر مورد، و اینکه چطور یک فهرست را داخلِ فهرستی دیگر جا بدهی.\u003C\u002Fp>\n",{"course":58,"entitled":66,"lessons":67,"payments_enabled":66,"terms":252,"live":5},{"active_window":59,"effective_price_toman":60,"free":5,"lesson_count":61,"price_toman":62,"slug":63,"summary_fa":64,"title_fa":65},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[68,71,75,76,77,78,82,86,90,94,98,101,104,107,110,113,116,119,122,125,128,132,135,138,141,144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249],{"free_preview":5,"order":9,"slug":69,"source":8,"term":9,"title_fa":70},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":72,"slug":73,"source":8,"term":9,"title_fa":74},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},{"free_preview":5,"order":79,"slug":80,"source":8,"term":9,"title_fa":81},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":83,"slug":84,"source":8,"term":9,"title_fa":85},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":87,"slug":88,"source":8,"term":9,"title_fa":89},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":91,"slug":92,"source":8,"term":9,"title_fa":93},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":95,"slug":96,"source":8,"term":9,"title_fa":97},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":9,"slug":99,"source":8,"term":72,"title_fa":100},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":72,"slug":102,"source":8,"term":72,"title_fa":103},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":12,"slug":105,"source":8,"term":72,"title_fa":106},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":6,"slug":108,"source":8,"term":72,"title_fa":109},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":16,"slug":111,"source":8,"term":72,"title_fa":112},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":79,"slug":114,"source":8,"term":72,"title_fa":115},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":83,"slug":117,"source":8,"term":72,"title_fa":118},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":87,"slug":120,"source":8,"term":72,"title_fa":121},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":91,"slug":123,"source":8,"term":72,"title_fa":124},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":95,"slug":126,"source":8,"term":72,"title_fa":127},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":129,"slug":130,"source":8,"term":72,"title_fa":131},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":133,"source":8,"term":12,"title_fa":134},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":72,"slug":136,"source":8,"term":12,"title_fa":137},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":12,"slug":139,"source":8,"term":12,"title_fa":140},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":6,"slug":142,"source":8,"term":12,"title_fa":143},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":16,"slug":145,"source":8,"term":12,"title_fa":146},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":79,"slug":148,"source":8,"term":12,"title_fa":149},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":83,"slug":151,"source":8,"term":12,"title_fa":152},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":87,"slug":154,"source":8,"term":12,"title_fa":155},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":91,"slug":157,"source":8,"term":12,"title_fa":158},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":95,"slug":160,"source":8,"term":12,"title_fa":161},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":129,"slug":163,"source":8,"term":12,"title_fa":164},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":166,"source":8,"term":6,"title_fa":167},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":72,"slug":169,"source":8,"term":6,"title_fa":170},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":12,"slug":172,"source":8,"term":6,"title_fa":173},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":6,"slug":175,"source":8,"term":6,"title_fa":176},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":16,"slug":178,"source":8,"term":6,"title_fa":179},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":79,"slug":181,"source":8,"term":6,"title_fa":182},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":83,"slug":184,"source":8,"term":6,"title_fa":185},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":87,"slug":187,"source":8,"term":6,"title_fa":188},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":190,"source":8,"term":16,"title_fa":191},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":72,"slug":193,"source":8,"term":16,"title_fa":194},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":12,"slug":196,"source":8,"term":16,"title_fa":197},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":6,"slug":199,"source":8,"term":16,"title_fa":200},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":16,"slug":202,"source":8,"term":16,"title_fa":203},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":79,"slug":205,"source":8,"term":16,"title_fa":206},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":83,"slug":208,"source":8,"term":16,"title_fa":209},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":87,"slug":211,"source":8,"term":16,"title_fa":212},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":91,"slug":214,"source":8,"term":16,"title_fa":215},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":95,"slug":217,"source":8,"term":16,"title_fa":218},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":220,"source":8,"term":79,"title_fa":221},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":72,"slug":223,"source":8,"term":79,"title_fa":224},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":12,"slug":226,"source":8,"term":79,"title_fa":227},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":6,"slug":229,"source":8,"term":79,"title_fa":230},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":16,"slug":232,"source":8,"term":79,"title_fa":233},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":79,"slug":235,"source":8,"term":79,"title_fa":236},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":83,"slug":238,"source":8,"term":79,"title_fa":239},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":87,"slug":241,"source":8,"term":79,"title_fa":242},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":91,"slug":244,"source":8,"term":79,"title_fa":245},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":95,"slug":247,"source":8,"term":79,"title_fa":248},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":129,"slug":250,"source":8,"term":79,"title_fa":251},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104695]