[{"data":1,"prerenderedAt":289},["ShallowReactive",2],{"lesson:t1-s10-media":3,"course:taropood":63},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,10,"t1-s10-media","book",1,"فصل ۱۰ — ویدیو و صدا",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},11,"t1-s11-first-project","فصل ۱۱ — پروژه: صفحهٔ معرفی خودت",[20,24,27,32,35,38,41,44,47,51,54,57,60],{"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>: ویدیوی شکفتنِ یک گل که چند روز را در چند ثانیه نشان می‌دهد، صدای بازسازی‌شدهٔ غرش یک تیرانوسور، و یک ویدیوی خوش‌آمدگویی که زیرنویس دارد — تا کسی که صدا را نمی‌شنود هم هیچ‌چیز را از دست ندهد. همه فقط با HTML.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-media-page.2ba8334055.160.webp 160w, \u002F_img\u002F01-image-media-page.2ba8334055.320.webp 320w, \u002F_img\u002F01-image-media-page.2ba8334055.640.webp 640w, \u002F_img\u002F01-image-media-page.2ba8334055.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-media-page.2ba8334055.1280.jpg\" srcset=\"\u002F_img\u002F01-image-media-page.2ba8334055.160.jpg 160w, \u002F_img\u002F01-image-media-page.2ba8334055.320.jpg 320w, \u002F_img\u002F01-image-media-page.2ba8334055.640.jpg 640w, \u002F_img\u002F01-image-media-page.2ba8334055.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><video>\u003C\u002Fcode> و \u003Ccode><audio>\u003C\u002Fcode> ویدیو و صدا در صفحه بگذاری و بگویی \u003Ccode>controls\u003C\u002Fcode> چه می‌کند و چرا بدونش کاربر گیر می‌افتد\u003C\u002Fli>\n\u003Cli>با \u003Ccode><source>\u003C\u002Fcode> بیش از یک فرمت به مرورگر پیشنهاد بدهی و بگویی چرا\u003C\u002Fli>\n\u003Cli>با \u003Ccode><track>\u003C\u002Fcode> برای ویدیو caption بگذاری و بگویی نبودنش چه کسانی را بیرون می‌گذارد\u003C\u002Fli>\n\u003Cli>یک ویدیوی پخش‌نشده را با پنل Network در DevTools عیب‌یابی کنی\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><img>\u003C\u002Fcode> و \u003Ccode>src\u003C\u002Fcode> و \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> — \u003Ccode><video>\u003C\u002Fcode> برادرِ بزرگ‌ترِ همان است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۳:\u003C\u002Fstrong> مسیر نسبی و مطلق — آدرسِ فایلِ ویدیو و صدا دقیقاً همان قاعده را دارد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۹:\u003C\u002Fstrong> عینکِ دسترس‌پذیری — این فصل همان درس را به صدا و تصویر می‌رساند.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>مثل همیشه فقط یک مرورگر لازم داری، یا همین آزمایشگاه.\u003C\u002Fp>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","— یک ویدیوی نمونهٔ واقعی آماده است که همین حالا پخش می‌شود، و آدرسِ یک صدای نمونه هم داخل کامنتِ کد منتظرت است. هر تکهٔ این فصل را همان‌جا امتحان کن","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-10-media",{"kind":21,"heading":33,"html":34},"۱. <video>: برادرِ بزرگ‌ترِ <img>","\u003Ch2 id=\"۱-video-برادرِ-بزرگ‌ترِ-img\">۱. \u003Ccode><video>\u003C\u002Fcode>: برادرِ بزرگ‌ترِ \u003Ccode><img>\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B1-video-%D8%A8%D8%B1%D8%A7%D8%AF%D8%B1%D9%90-%D8%A8%D8%B2%D8%B1%DA%AF%E2%80%8C%D8%AA%D8%B1%D9%90-img\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>عکس را با \u003Ccode><img src>\u003C\u002Fcode> آوردی؛ ویدیو هم همان‌قدر ساده شروع می‌شود. در آزمایشگاه این را داری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h2>شکفتن یک گل، تندشده<\u002Fh2>\n<video src="https:\u002F\u002Finteractive-examples.mdn.mozilla.net\u002Fmedia\u002Fcc0-videos\u002Fflower.mp4"\n       width="640" height="360" controls><\u002Fvideo>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>مثل عکس، ویدیو هم یک فایلِ جداست که مرورگر می‌رود و می‌آورد — فقط خیلی سنگین‌تر. و دو فرق با \u003Ccode><img>\u003C\u002Fcode> می‌بینی. اول، \u003Ccode><video>\u003C\u002Fcode> یک tag بسته دارد — داخلش بعداً چیزهای مهمی می‌گذاریم. دوم، یک attribute تازه: \u003Cstrong>\u003Ccode>controls\u003C\u002Fcode>\u003C\u002Fstrong>. این به مرورگر می‌گوید «دکمه‌های خودت را بگذار» — پخش، مکث، صدا، تمام‌صفحه. و \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> همان درسِ فصل ۴ است: جای ویدیو از اول رزرو می‌شود تا صفحه نپرد.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک پخش‌کننده با دکمهٔ پخش می‌بینی. پخشش کن — یک گل جلوی چشمت شکوفا می‌شود.\u003C\u002Fp>\n",{"kind":21,"heading":36,"html":37},"۲. حالا عمداً خرابش کن: controls را بردار","\u003Ch2 id=\"۲-حالا-عمداً-خرابش-کن-controls-را-بردار\">۲. حالا عمداً خرابش کن: \u003Ccode>controls\u003C\u002Fcode> را بردار\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%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-controls-%D8%B1%D8%A7-%D8%A8%D8%B1%D8%AF%D8%A7%D8%B1\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>controls\u003C\u002Fcode> را از tag حذف کن و به صفحه نگاه کن. ویدیو هنوز آن‌جاست — قابِ اولش را مثل یک عکسِ بی‌حرکت می‌بینی — ولی \u003Cstrong>هیچ دکمه‌ای نیست\u003C\u002Fstrong>. نه پخش، نه مکث، نه صدا. ویدیو هست، ولی هیچ‌کس نمی‌تواند پخشش کند. و مرورگر هم مثل همیشه فریاد نمی‌زند (فصل ۱ را یادت هست: HTML خراب معمولاً ساکت می‌شود).\u003C\u002Fp>\n\u003Cp>حالا \u003Ccode>controls\u003C\u002Fcode> را برگردان تا دکمه‌ها برگردند. این attribute مقدار هم نمی‌خواهد؛ خودِ بودنش یعنی «بله».\u003C\u002Fp>\n\u003Cp>این را یادداشت کن: اولین باری بود که جاافتادنِ یک attribute کاربر را نه با ظاهرِ زشت، بلکه با \u003Cstrong>قفل‌شدنِ کامل\u003C\u002Fstrong> تنبیه کرد. در بخش ۵ همین اتفاق برای گوش می‌افتد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> شاید جایی attribute ای به‌نام \u003Ccode>autoplay\u003C\u002Fcode> ببینی که ویدیو را خودکار پخش می‌کند. سراغش نرو: صفحه‌ای که سرخود صدا پخش می‌کند کاربر را فراری می‌دهد، و مرورگرها هم معمولاً جلوی پخشِ خودکارِ صدادار را می‌گیرند. بگذار کاربر خودش دکمه را بزند.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. <audio>، و فایلِ خودت با مسیر نسبی","\u003Ch2 id=\"۳-audio-و-فایلِ-خودت-با-مسیر-نسبی\">۳. \u003Ccode><audio>\u003C\u002Fcode>، و فایلِ خودت با مسیر نسبی\u003Ca class=\"head-anchor\" href=\"#%DB%B3-audio-%D9%88-%D9%81%D8%A7%DB%8C%D9%84%D9%90-%D8%AE%D9%88%D8%AF%D8%AA-%D8%A8%D8%A7-%D9%85%D8%B3%DB%8C%D8%B1-%D9%86%D8%B3%D8%A8%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>صدا هم دقیقاً همین الگوست، فقط قاب تصویری ندارد. آدرسِ صدای نمونه داخل کامنتِ آزمایشگاه است:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><h2>غرش تیرانوسور<\u002Fh2>\n<audio src="https:\u002F\u002Finteractive-examples.mdn.mozilla.net\u002Fmedia\u002Fcc0-audio\u002Ft-rex-roar.mp3" controls><\u002Faudio>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> یک نوار پخشِ باریک می‌بینی؛ پخشش کن و غرش را بشنو. حالا \u003Ccode>controls\u003C\u002Fcode> را از \u003Ccode><audio>\u003C\u002Fcode> بردار: این‌بار \u003Cstrong>هیچ‌چیز\u003C\u002Fstrong> روی صفحه نمی‌ماند — صدا قاب ندارد که حداقل دیده شود. برش گردان.\u003C\u002Fp>\n\u003Cp>این آدرس‌ها \u003Cstrong>مطلق\u003C\u002Fstrong> بودند — فایل‌های نمونه‌ای که روی سایتِ MDN زندگی می‌کنند. روی کامپیوتر خودت، فایل ویدیو یا صدا را کنار \u003Ccode>index.html\u003C\u002Fcode> می‌گذاری و مثل فصل ۳ مسیر \u003Cstrong>نسبی\u003C\u002Fstrong> می‌دهی: \u003Ccode>src="flower.mp4"\u003C\u002Fcode>. قاعده عیناً همان است: مسیر از جایی شروع می‌شود که خودِ صفحه هست؛ اگر فایل‌ها را در پوشه‌ای به‌نام \u003Ccode>media\u003C\u002Fcode> مرتب کردی، مسیر می‌شود \u003Ccode>media\u002Fflower.mp4\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> مسیر را اشتباه بنویسی — مثلاً \u003Ccode>src="video.mp4"\u003C\u002Fcode> وقتی اسم واقعی فایل \u003Ccode>flower.mp4\u003C\u002Fcode> است — فقط یک قابِ خالیِ پخش‌نشدنی می‌بینی و باز هم هیچ خطایی فریاد نمی‌زند. راهِ دیدنِ حقیقت، پنل \u003Cstrong>Network\u003C\u002Fstrong> در DevTools است: 1. با \u003Ccode>F12\u003C\u002Fcode> بازش کن و tab با نام Network را انتخاب کن. 2. صفحه را refresh کن. 3. در فهرست، فایلِ ویدیو را پیدا کن — قرمز است با وضعیت \u003Ccode>404\u003C\u002Fcode>، یعنی «مرورگر خواست، کسی جواب نداد». اسم یا مسیر فایل را درست کن تا سبز شود.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":42,"html":43},"۴. <source>: به‌جای یک فایل، چند پیشنهاد","\u003Ch2 id=\"۴-source-به‌جای-یک-فایل-چند-پیشنهاد\">۴. \u003Ccode><source>\u003C\u002Fcode>: به‌جای یک فایل، چند پیشنهاد\u003Ca class=\"head-anchor\" href=\"#%DB%B4-source-%D8%A8%D9%87%E2%80%8C%D8%AC%D8%A7%DB%8C-%DB%8C%DA%A9-%D9%81%D8%A7%DB%8C%D9%84-%DA%86%D9%86%D8%AF-%D9%BE%DB%8C%D8%B4%D9%86%D9%87%D8%A7%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فایل‌های ویدیو شکل‌های ذخیره‌سازی متفاوتی دارند که به هرکدام یک \u003Cstrong>فرمت\u003C\u002Fstrong> می‌گویند — مثل MP4 و WebM. هر مرورگری هر فرمتی را پخش نمی‌کند، و اینکه دقیقاً کدام را، چیزی است که با زمان عوض می‌شود. پس قاعدهٔ ما حفظ‌کردنِ جدول نیست؛ \u003Cstrong>پیشنهاد دادن\u003C\u002Fstrong> است: \u003Ccode>src\u003C\u002Fcode> را بردار و به‌جایش چند \u003Ccode><source>\u003C\u002Fcode> داخل خود \u003Ccode><video>\u003C\u002Fcode> بگذار:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><video width="640" height="360" controls>\n  <source src="flower.webm" type="video\u002Fwebm">\n  <source src="flower.mp4" type="video\u002Fmp4">\n  <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="flower.mp4">فایلش را دانلود کن<\u002Fa>.<\u002Fp>\n<\u002Fvideo>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>مرورگر از بالا می‌خواند و \u003Cstrong>اولین\u003C\u002Fstrong> فرمتی را که بلد است برمی‌دارد؛ \u003Ccode>type\u003C\u002Fcode> کمکش می‌کند بدون دانلودکردن تصمیم بگیرد. آن پاراگرافِ آخر هم فقط در مرورگرهای خیلی قدیمی دیده می‌شود که اصلاً \u003Ccode><video>\u003C\u002Fcode> را نمی‌شناسند — برای بقیه نامرئی است. (این نسخه با مسیرِ نسبی برای کامپیوترِ خودت است؛ وقتی در آزمایشگاه امتحانش می‌کنی، همان آدرسِ نمونهٔ MDN را داخل \u003Ccode>src\u003C\u002Fcode> یکی از \u003Ccode><source>\u003C\u002Fcode> ها بگذار تا واقعاً پخش شود.)\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> «کدام فرمت بهتر است؟» جوابش امروز و فردا فرق دارد، پس حفظش نکن. MP4 معمولاً امن‌ترین نقطهٔ شروع است؛ اگر نسخهٔ WebM هم داشتی، به‌عنوان پیشنهاد اول اضافه‌اش کن. همین.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>قبل از ادامه، جواب بده: اگر مرورگر \u003Cstrong>هر دو\u003C\u002Fstrong> فرمت را بلد باشد، کدام را پخش می‌کند؟ — اولی را از بالا. برای همین ترتیبِ \u003Ccode><source>\u003C\u002Fcode> ها دستِ توست، نه دستِ شانس.\u003C\u002Fp>\n",{"kind":21,"heading":45,"html":46},"۵. <track>: زیرنویس، همان alt برای صدا","\u003Ch2 id=\"۵-track-زیرنویس-همان-alt-برای-صدا\">۵. \u003Ccode><track>\u003C\u002Fcode>: زیرنویس، همان \u003Ccode>alt\u003C\u002Fcode> برای صدا\u003Ca class=\"head-anchor\" href=\"#%DB%B5-track-%D8%B2%DB%8C%D8%B1%D9%86%D9%88%DB%8C%D8%B3-%D9%87%D9%85%D8%A7%D9%86-alt-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B5%D8%AF%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>فصل ۴ گفتیم عکسِ بی‌\u003Ccode>alt\u003C\u002Fcode> برای کاربرِ screen reader یک سوراخِ سیاه است. ویدیویی که در آن حرف می‌زنی هم برای کسی که نمی‌شنود — یا در اتوبوس بی‌هندزفری نشسته — دقیقاً همان سوراخ است. جوابش \u003Cstrong>caption\u003C\u002Fstrong> است: متنِ گفته‌ها که همزمان روی ویدیو نشان داده می‌شود. و فقط برای ناشنوایان هم نیست: در جای شلوغ، در سکوتِ نیمه‌شب، و برای کسی که تازه دارد فارسی یاد می‌گیرد، همان متن نجات‌بخش است. دو تکه دارد. اول یک فایل متنی سادهٔ زمان‌بندی‌شده با نام‌هایی مثل \u003Ccode>captions.vtt\u003C\u002Fcode> (به این قالب \u003Cstrong>WebVTT\u003C\u002Fstrong> می‌گویند):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>WEBVTT\n\n00:00.000 --> 00:03.000\nسلام! به موزهٔ علوم خوش آمدی.\n\n00:03.000 --> 00:07.000\nاینجا هر چیزی یک داستان دارد.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>و دوم یک \u003Ccode><track>\u003C\u002Fcode> که آن فایل را به ویدیو وصل می‌کند. چهار attribute کارش را کامل می‌کنند:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>kind="captions"\u003C\u002Fcode> — نوعِ این متن: caption.\u003C\u002Fli>\n\u003Cli>\u003Ccode>srclang="fa"\u003C\u002Fcode> — زبانِ متن.\u003C\u002Fli>\n\u003Cli>\u003Ccode>label="فارسی"\u003C\u002Fcode> — اسمی که در منوی پخش‌کننده دیده می‌شود.\u003C\u002Fli>\n\u003Cli>\u003Ccode>default\u003C\u002Fcode> — خودکار روشن باشد.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><video width="640" height="360" controls>\n  <source src="welcome.mp4" type="video\u002Fmp4">\n  <track src="captions.vtt" kind="captions" srclang="fa" label="فارسی" default>\n<\u002Fvideo>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>یک نکتهٔ صادقانه: مرورگر فایلِ زیرنویسی را که از سایتِ دیگری می‌آید، بدون اجازهٔ صریحِ آن سایت بار نمی‌کند — یک قانونِ امنیتی است. پس \u003Ccode><track>\u003C\u002Fcode> را روی کامپیوتر خودت امتحان کن، جایی که \u003Ccode>captions.vtt\u003C\u002Fcode> کنار صفحه‌ات است؛ در آزمایشگاه نوشتنش اشکال ندارد، فقط زیرنویس ظاهر نمی‌شود.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> caption فقط گفته‌ها نیست؛ صداهای مهمِ غیرگفتاری را هم می‌نویسد — مثل «[صدای در]» یا «[موسیقی آرام]». معیارش این است: اگر کسی صدا را نشنود، چه چیزی از داستان را از دست می‌دهد؟ همان را بنویس.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-captions.25682d69a3.160.webp 160w, \u002F_img\u002F02-image-captions.25682d69a3.320.webp 320w, \u002F_img\u002F02-image-captions.25682d69a3.640.webp 640w, \u002F_img\u002F02-image-captions.25682d69a3.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-captions.25682d69a3.1280.jpg\" srcset=\"\u002F_img\u002F02-image-captions.25682d69a3.160.jpg 160w, \u002F_img\u002F02-image-captions.25682d69a3.320.jpg 320w, \u002F_img\u002F02-image-captions.25682d69a3.640.jpg 640w, \u002F_img\u002F02-image-captions.25682d69a3.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک پخش‌کنندهٔ ویدیو با نوار زیرنویس روشن در پایین تصویر، و کنارش همان ویدیو بدون زیرنویس با علامت صدای قطع\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n",{"kind":48,"heading":49,"html":50},"checkpoint","چالش: ویدیوی بی‌گفتار caption می‌خواهد؟","\u003Ch2 id=\"چالش-ویدیوی-بی‌گفتار-caption-می‌خواهد\">چالش: ویدیوی بی‌گفتار caption می‌خواهد؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%D9%88%DB%8C%D8%AF%DB%8C%D9%88%DB%8C-%D8%A8%DB%8C%E2%80%8C%DA%AF%D9%81%D8%AA%D8%A7%D8%B1-caption-%D9%85%DB%8C%E2%80%8C%D8%AE%D9%88%D8%A7%D9%87%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>ویدیوی شکفتنِ گل هیچ گفتاری ندارد. پس caption هم لازم ندارد؟ اول جواب بده.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> caption چیزی برای نوشتن ندارد — ولی سؤالِ اصلی از فصل ۴ هنوز سرِ جایش است: «کسی که این را نمی‌بیند یا نمی‌شنود، چه چیزی از دست می‌دهد؟» هر چه از دست می‌رود باید جایی متن باشد. برای گلِ بی‌صدا، آن متن همان تیتر و پاراگرافِ کنارِ ویدیوست («چند روز در چند ثانیه»). برای ویدیویی که حرف می‌زنی، caption. قاعده یکی است؛ شکلش فرق می‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> نوشتنِ زمان‌بندیِ WebVTT خسته‌کننده است. متنِ گفته‌های ویدیویت را به دستیار AI ات بده و بخواه به قالب WebVTT تبدیلش کند. بعد \u003Cstrong>خط به خط\u003C\u002Fstrong> چک کن و زمان‌ها را با خودِ ویدیو مقایسه کن — AI ویدیوی تو را ندیده و زمان‌ها را فقط حدس می‌زند. \u003Cstrong>AI هم اشتباه می‌کند.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":52,"html":53},"۶. صفحهٔ کاملِ موزه","\u003Ch2 id=\"۶-صفحهٔ-کاملِ-موزه\">۶. صفحهٔ کاملِ موزه\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84%D9%90-%D9%85%D9%88%D8%B2%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز را در یک صفحه برای کامپیوتر خودت کنار هم بگذار — ویدیوی خوش‌آمد با caption، گلِ تندشده با دو پیشنهادِ فرمت، و غرش تیرانوسور:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!-- index.html -->\n<!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>موزهٔ علوم<\u002Ftitle>\n  <\u002Fhead>\n  <body>\n    <header>\n      <h1>موزهٔ علوم<\u002Fh1>\n      <p>ببین، بشنو، بخوان — هر سه با هم.<\u002Fp>\n    <\u002Fheader>\n\n    <main>\n      <section>\n        <h2>خوش آمدی!<\u002Fh2>\n        <video width="640" height="360" controls>\n          <source src="welcome.mp4" type="video\u002Fmp4">\n          <track src="captions.vtt" kind="captions" srclang="fa" label="فارسی" default>\n          <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="welcome.mp4">فایلش را دانلود کن<\u002Fa>.<\u002Fp>\n        <\u002Fvideo>\n        <p>در این ویدیو می‌گویم این موزه چیست — و هر جمله‌اش caption دارد.<\u002Fp>\n      <\u002Fsection>\n\n      <section>\n        <h2>شکفتن یک گل، تندشده<\u002Fh2>\n        <video width="640" height="360" controls>\n          <source src="flower.webm" type="video\u002Fwebm">\n          <source src="flower.mp4" type="video\u002Fmp4">\n          <p>مرورگرت این ویدیو را نشان نمی‌دهد — <a href="flower.mp4">فایلش را دانلود کن<\u002Fa>.<\u002Fp>\n        <\u002Fvideo>\n        <p>چیزی که در دنیای واقعی چند روز طول می‌کشد، اینجا در چند ثانیه. این ویدیو گفتاری ندارد؛ متنِ جایگزینش همین جمله است.<\u002Fp>\n      <\u002Fsection>\n\n      <section>\n        <h2>غرش تیرانوسور<\u002Fh2>\n        <audio controls>\n          <source src="t-rex-roar.mp3" type="audio\u002Fmpeg">\n          <p>مرورگرت این صدا را پخش نمی‌کند — <a href="t-rex-roar.mp3">فایلش را دانلود کن<\u002Fa>.<\u002Fp>\n        <\u002Faudio>\n        <p>بازسازیِ صدای جانوری که هیچ انسانی هرگز نشنیده است.<\u002Fp>\n      <\u002Fsection>\n    <\u002Fmain>\n\n    <footer>\n      <p>موزهٔ علوم — ۱۴۰۵<\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> در آزمایشگاه، همین صفحه با آدرس‌های نمونهٔ MDN به‌جای مسیرهای نسبی کار می‌کند (زیرنویس، همان‌طور که گفتیم، فقط روی کامپیوتر خودت ظاهر می‌شود). سه بخش می‌بینی، هر سه با دکمه‌های پخش، و هر media یک متنِ همراه دارد که بدون دیدن و شنیدن هم داستان را می‌گوید.\u003C\u002Fp>\n\u003Cp>و یک نگاهِ آخر به اسکلت بینداز: هر media داخل یک \u003Ccode><section>\u003C\u002Fcode> با تیتر و متنِ خودش نشسته — همان الگویی که کل ترم تمرین کردی. ویدیو و صدا مهمان‌های تازه‌اند، ولی خانه همان خانهٔ semantic است.\u003C\u002Fp>\n",{"kind":21,"heading":55,"html":56},"واژه‌های تازهٔ این فصل","\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\u003Cdiv class=\"table-wrap\">\u003Ctable>\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>controls\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>کنترلز\u003C\u002Ftd>\n\u003Ctd>attribute ای که به مرورگر می‌گوید دکمه‌های پخش و مکث و صدا را خودش بگذارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>format\u003C\u002Ftd>\n\u003Ctd>فرمَت\u003C\u002Ftd>\n\u003Ctd>شکلِ ذخیره‌سازی فایل ویدیو یا صدا، مثل MP4 و WebM\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><source>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>سورس\u003C\u002Ftd>\n\u003Ctd>یک پیشنهادِ فایل داخل \u003Ccode><video>\u003C\u002Fcode> یا \u003Ccode><audio>\u003C\u002Fcode>؛ مرورگر اولین پیشنهادی را که بلد است برمی‌دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode><track>\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>ترَک\u003C\u002Ftd>\n\u003Ctd>tag ای که یک فایل caption را به \u003Ccode><video>\u003C\u002Fcode> وصل می‌کند\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>caption\u003C\u002Ftd>\n\u003Ctd>کَپشِن\u003C\u002Ftd>\n\u003Ctd>متنِ گفته‌ها و صداهای مهم که همزمان روی ویدیو نمایش داده می‌شود\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>WebVTT\u003C\u002Ftd>\n\u003Ctd>وب‌وی‌تی‌تی\u003C\u002Ftd>\n\u003Ctd>قالبِ فایلِ متنیِ زمان‌بندی‌شدهٔ caption ها (پسوند \u003Ccode>.vtt\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\u003C\u002Fdiv>",{"kind":48,"heading":58,"html":59},"تمرین‌ها","\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>controls\u003C\u002Fcode> چه می‌کند، و اگر نباشد کاربر با ویدیو و با صدا هرکدام به چه گیری می‌افتد؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> در آزمایشگاه صفحهٔ موزه را کامل کن: ویدیوی گل با \u003Ccode>controls\u003C\u002Fcode> و \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode>، صدای تیرانوسور با \u003Ccode>controls\u003C\u002Fcode>، و برای هرکدام یک تیتر و یک پاراگرافِ توضیح که بدون پخش‌کردن هم بگوید ماجرا چیست. بعد ویدیو را به شکل \u003Ccode><source>\u003C\u002Fcode>دار بازنویسی کن، و آخرش با پنل Network مطمئن شو هیچ درخواستِ قرمزی نمانده.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> روی کامپیوتر خودت (با همان VS Code فصل ۱): با موبایل یک ویدیوی کوتاه بگیر که در آن دو جمله می‌گویی. فایلش را کنار یک \u003Ccode>index.html\u003C\u002Fcode> بگذار، با مسیر نسبی نمایشش بده، یک \u003Ccode>captions.vtt\u003C\u002Fcode> برای همان دو جمله بنویس و با \u003Ccode><track>\u003C\u002Fcode> وصلش کن. بعد صدای کامپیوتر را کاملاً قطع کن و ویدیو را پخش کن — اگر همه‌چیز را فقط با خواندن فهمیدی، caption ات کارش را کرده.\u003C\u002Fp>\n",{"kind":21,"heading":61,"html":62},"در فصل بعد","\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> هیچ tag تازه‌ای نیست؛ همه‌چیزِ این ترم را در یک صفحهٔ واقعیِ چندبخشی کنار هم می‌گذاری، و دو ابزارِ حرفه‌ای را می‌بینی: \u003Cstrong>validator\u003C\u002Fstrong> که می‌گوید HTML ات معتبر است یا نه، و پنلِ \u003Cstrong>Elements\u003C\u002Fstrong> در DevTools که می‌گذارد اسکلتِ صفحه‌ات را همان‌طور که مرورگر می‌بیند تماشا کنی.\u003C\u002Fp>\n",{"course":64,"entitled":72,"lessons":73,"payments_enabled":72,"terms":288,"live":5},{"active_window":65,"effective_price_toman":66,"free":5,"lesson_count":67,"price_toman":68,"slug":69,"summary_fa":70,"title_fa":71},null,0,71,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[74,77,81,85,89,93,97,101,105,106,107,108,111,114,117,120,123,126,129,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,252,255,258,261,264,267,270,273,276,279,282,285],{"free_preview":5,"order":9,"slug":75,"source":8,"term":9,"title_fa":76},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":78,"slug":79,"source":8,"term":9,"title_fa":80},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":82,"slug":83,"source":8,"term":9,"title_fa":84},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":86,"slug":87,"source":8,"term":9,"title_fa":88},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":90,"slug":91,"source":8,"term":9,"title_fa":92},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":94,"slug":95,"source":8,"term":9,"title_fa":96},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":98,"slug":99,"source":8,"term":9,"title_fa":100},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":102,"slug":103,"source":8,"term":9,"title_fa":104},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"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":9,"slug":109,"source":8,"term":78,"title_fa":110},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":78,"slug":112,"source":8,"term":78,"title_fa":113},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":82,"slug":115,"source":8,"term":78,"title_fa":116},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":86,"slug":118,"source":8,"term":78,"title_fa":119},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":90,"slug":121,"source":8,"term":78,"title_fa":122},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":94,"slug":124,"source":8,"term":78,"title_fa":125},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":98,"slug":127,"source":8,"term":78,"title_fa":128},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":102,"slug":130,"source":8,"term":78,"title_fa":131},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":133,"source":8,"term":78,"title_fa":134},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":6,"slug":136,"source":8,"term":78,"title_fa":137},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":16,"slug":139,"source":8,"term":78,"title_fa":140},"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":142,"source":8,"term":82,"title_fa":143},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":78,"slug":145,"source":8,"term":82,"title_fa":146},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":82,"slug":148,"source":8,"term":82,"title_fa":149},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":86,"slug":151,"source":8,"term":82,"title_fa":152},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":90,"slug":154,"source":8,"term":82,"title_fa":155},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":94,"slug":157,"source":8,"term":82,"title_fa":158},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":98,"slug":160,"source":8,"term":82,"title_fa":161},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":102,"slug":163,"source":8,"term":82,"title_fa":164},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":12,"slug":166,"source":8,"term":82,"title_fa":167},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":6,"slug":169,"source":8,"term":82,"title_fa":170},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":16,"slug":172,"source":8,"term":82,"title_fa":173},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":175,"source":8,"term":86,"title_fa":176},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":78,"slug":178,"source":8,"term":86,"title_fa":179},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":82,"slug":181,"source":8,"term":86,"title_fa":182},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":86,"slug":184,"source":8,"term":86,"title_fa":185},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":90,"slug":187,"source":8,"term":86,"title_fa":188},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":94,"slug":190,"source":8,"term":86,"title_fa":191},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":98,"slug":193,"source":8,"term":86,"title_fa":194},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":102,"slug":196,"source":8,"term":86,"title_fa":197},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":199,"source":8,"term":90,"title_fa":200},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":78,"slug":202,"source":8,"term":90,"title_fa":203},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":82,"slug":205,"source":8,"term":90,"title_fa":206},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":86,"slug":208,"source":8,"term":90,"title_fa":209},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":90,"slug":211,"source":8,"term":90,"title_fa":212},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":94,"slug":214,"source":8,"term":90,"title_fa":215},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":98,"slug":217,"source":8,"term":90,"title_fa":218},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":102,"slug":220,"source":8,"term":90,"title_fa":221},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":12,"slug":223,"source":8,"term":90,"title_fa":224},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":6,"slug":226,"source":8,"term":90,"title_fa":227},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":229,"source":8,"term":94,"title_fa":230},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":78,"slug":232,"source":8,"term":94,"title_fa":233},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":82,"slug":235,"source":8,"term":94,"title_fa":236},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":86,"slug":238,"source":8,"term":94,"title_fa":239},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":90,"slug":241,"source":8,"term":94,"title_fa":242},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":94,"slug":244,"source":8,"term":94,"title_fa":245},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":98,"slug":247,"source":8,"term":94,"title_fa":248},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":102,"slug":250,"source":8,"term":94,"title_fa":251},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":12,"slug":253,"source":8,"term":94,"title_fa":254},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":6,"slug":256,"source":8,"term":94,"title_fa":257},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":16,"slug":259,"source":8,"term":94,"title_fa":260},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",{"free_preview":5,"order":9,"slug":262,"source":8,"term":98,"title_fa":263},"t7-s01-why-js","فصل ۰۱ — چرا JavaScript؟ اولین اسکریپت",{"free_preview":5,"order":78,"slug":265,"source":8,"term":98,"title_fa":266},"t7-s02-variables","فصل ۰۲ — متغیر و مقدار",{"free_preview":5,"order":82,"slug":268,"source":8,"term":98,"title_fa":269},"t7-s03-select-change","فصل ۰۳ — پیدا کردن و تغییرِ عنصر",{"free_preview":5,"order":86,"slug":271,"source":8,"term":98,"title_fa":272},"t7-s04-events","فصل ۰۴ — رویداد",{"free_preview":5,"order":90,"slug":274,"source":8,"term":98,"title_fa":275},"t7-s05-toggle-class","فصل ۰۵ — روشن\u002Fخاموش‌کردنِ یک class: پلِ CSS و JS",{"free_preview":5,"order":94,"slug":277,"source":8,"term":98,"title_fa":278},"t7-s06-forms-js","فصل ۰۶ — کار با فرم در JavaScript",{"free_preview":5,"order":98,"slug":280,"source":8,"term":98,"title_fa":281},"t7-s07-lists-loops","فصل ۰۷ — فهرست و حلقه",{"free_preview":5,"order":102,"slug":283,"source":8,"term":98,"title_fa":284},"t7-s08-fetch-data","فصل ۰۸ — گرفتن داده از اینترنت",{"free_preview":5,"order":12,"slug":286,"source":8,"term":98,"title_fa":287},"t7-s09-js-capstone","فصل ۰۹ — پروژهٔ نهایی: یک صفحهٔ قدیمی را تعاملی کن",[],1784860313382]