[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"lesson:t1-s03-links":3,"course:taropood":60},{"meta":4,"prev":11,"next":15,"sections":19},{"free_preview":5,"order":6,"slug":7,"source":8,"term":9,"title_fa":10},true,3,"t1-s03-links","book",1,"فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":12,"slug":13,"source":8,"term":9,"title_fa":14},2,"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":16,"slug":17,"source":8,"term":9,"title_fa":18},4,"t1-s04-images","فصل ۰۴ — تصویر",[20,24,27,32,35,38,41,45,48,51,54,57],{"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-links-web.ab4850f44e.160.webp 160w, \u002F_img\u002F01-image-links-web.ab4850f44e.320.webp 320w, \u002F_img\u002F01-image-links-web.ab4850f44e.640.webp 640w, \u002F_img\u002F01-image-links-web.ab4850f44e.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-links-web.ab4850f44e.1280.jpg\" srcset=\"\u002F_img\u002F01-image-links-web.ab4850f44e.160.jpg 160w, \u002F_img\u002F01-image-links-web.ab4850f44e.320.jpg 320w, \u002F_img\u002F01-image-links-web.ab4850f44e.640.jpg 640w, \u002F_img\u002F01-image-links-web.ab4850f44e.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>یک لینک بسازی که به یک سایت دیگر برود\u003C\u002Fli>\n\u003Cli>فرق مسیر نسبی و مطلق را بگویی و بدانی هرکدام کجا به‌کار می‌آید\u003C\u002Fli>\n\u003Cli>با \u003Ccode>#id\u003C\u002Fcode> از یک نقطهٔ صفحه به نقطهٔ دیگرِ همان صفحه بپری\u003C\u002Fli>\n\u003Cli>یک لینک را در tab جدید باز کنی و بگویی چرا کنارش \u003Ccode>rel=&quot;noopener&quot;\u003C\u002Fcode> لازم است\u003C\u002Fli>\n\u003Cli>متن لینکی بنویسی که بیرون از جمله هم معلوم باشد کجا می‌رود — و بدانی چرا «اینجا کلیک کن» بد است\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;h2&gt;\u003C\u002Fcode>، پاراگراف \u003Ccode>&lt;p&gt;\u003C\u002Fcode>، و اینکه فضای خالی در HTML جمع می‌شود — به این آخری در همین فصل تکیه می‌کنیم.\u003C\u002Fli>\n\u003Cli>یک مرورگر. همین.\u003C\u002Fli>\n\u003C\u002Ful>\n",{"kind":28,"heading":29,"html":30,"embed":31},"lab","","و بگذار باز بماند. هر لینکی که در این فصل می‌سازیم همان‌جا کلیک می‌کنی و با چشم خودت می‌بینی کجا می‌رود","\u002Flab\u002Fembed\u002Ftaropood\u002Fterm-1-html-structure\u002Fsession-03-links",{"kind":21,"heading":33,"html":34},"۱. اولین لینک","\u003Ch2 id=\"۱-اولین-لینک\">۱. اولین لینک\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D9%88%D9%84%DB%8C%D9%86-%D9%84%DB%8C%D9%86%DA%A9\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>یک لینک دو چیز دارد: متنی که می‌بینی و رویش کلیک می‌کنی، و یک \u003Cstrong>آدرس مقصد\u003C\u002Fstrong> که پشتِ آن متن پنهان است. element ای که این دو را کنار هم می‌گذارد \u003Ccode>&lt;a&gt;\u003C\u002Fcode> است (کوتاه‌شدهٔ anchor)، و آدرس مقصد داخل یک attribute به‌اسم \u003Ccode>href\u003C\u002Fcode> می‌رود.\u003C\u002Fp>\n\u003Cp>در آزمایشگاه، داخل \u003Ccode>&lt;body&gt;\u003C\u002Fcode> این را بنویس:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;p&gt;\n  هر چیزی که یاد می‌گیرم را از\n  &lt;a href=&quot;https:\u002F\u002Fdeveloper.mozilla.org\u002F&quot;&gt;مستندات MDN&lt;\u002Fa&gt;\n  می‌خوانم.\n&lt;\u002Fp&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>سه تکه را ببین: \u003Ccode>&lt;a href=&quot;...&quot;&gt;\u003C\u002Fcode> که مقصد را نگه می‌دارد، بعد متنی که کاربر می‌بیند (\u003Ccode>مستندات MDN\u003C\u002Fcode>)، بعد \u003Ccode>&lt;\u002Fa&gt;\u003C\u002Fcode> که لینک را می‌بندد. یادت هست فصل ۲ گفتیم فضای خالی در HTML جمع می‌شود؟ برای همین توانستیم لینک را برای خوانایی به خط بعد ببریم؛ مرورگر همه را یک جمله می‌بیند.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید یک تکه‌متنِ رنگی و زیرخط‌دار ببینی. رویش کلیک کن — مرورگر باید صفحهٔ MDN را باز کند. رنگ و زیرخط را ما نگفتیم؛ مثل فصل‌های قبل، پیش‌فرضِ خودِ مرورگر برای «این یک لینک است».\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> یک \u003Ccode>&lt;a&gt;\u003C\u002Fcode> بدون \u003Ccode>href\u003C\u002Fcode> هم نوشته می‌شود، ولی لینک واقعی نیست — نه رنگ لینک می‌گیرد، نه کلیک می‌شود، نه با صفحه‌کلید می‌شود به آن رسید. قلبِ لینک \u003Ccode>href\u003C\u002Fcode> است؛ هیچ‌وقت جا نینداز.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":36,"html":37},"۲. مسیر: مطلق و نسبی","\u003Ch2 id=\"۲-مسیر-مطلق-و-نسبی\">۲. مسیر: مطلق و نسبی\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D9%85%D8%B3%DB%8C%D8%B1-%D9%85%D8%B7%D9%84%D9%82-%D9%88-%D9%86%D8%B3%D8%A8%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>آدرسی که نوشتیم با \u003Ccode>https:\u002F\u002F\u003C\u002Fcode> شروع می‌شد و کل نشانیِ یک سایت را داشت. به این می‌گویند مسیر \u003Cstrong>مطلق\u003C\u002Fstrong>: از هر کجای اینترنت که بازش کنی، دقیقاً به همان‌جا می‌رسی. مسیر مطلق برای رفتن به سایت‌های \u003Cstrong>دیگر\u003C\u002Fstrong> است.\u003C\u002Fp>\n\u003Cp>ولی وقتی می‌خواهی به صفحهٔ دیگری از \u003Cstrong>سایتِ خودت\u003C\u002Fstrong> لینک بدهی، معمولاً مسیر \u003Cstrong>نسبی\u003C\u002Fstrong> می‌نویسی: آدرسی که نسبت به جای فایلِ فعلی معنا پیدا می‌کند، نه کل نشانی اینترنت. سه نمونه:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;a href=&quot;about.html&quot;&gt;دربارهٔ من&lt;\u002Fa&gt;          &lt;!-- hamin poushe --&gt;\n&lt;a href=&quot;pages\u002Fcontact.html&quot;&gt;تماس&lt;\u002Fa&gt;          &lt;!-- yek poushe paayin-tar --&gt;\n&lt;a href=&quot;..\u002Findex.html&quot;&gt;صفحهٔ اول&lt;\u002Fa&gt;          &lt;!-- .. yani yek pele baalaa --&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>about.html\u003C\u002Fcode> یعنی «فایلی به این اسم، کنارِ همین فایل». \u003Ccode>pages\u002Fcontact.html\u003C\u002Fcode> یعنی «برو داخل پوشهٔ \u003Ccode>pages\u003C\u002Fcode>، آنجا این فایل هست». و \u003Ccode>..\u003C\u002Fcode> یعنی «یک پله برو بالا». چرا نسبی؟ چون اگر روزی کل سایتت را جابه‌جا کنی، لینک‌های نسبی هنوز درست کار می‌کنند؛ فقط برای سایت‌های دیگر مطلق می‌نویسی.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> مسیر نسبی فقط وقتی کار می‌کند که فایلِ مقصد \u003Cstrong>واقعاً همان‌جا باشد\u003C\u002Fstrong>. اگر آدرس را اشتباه بنویسی یا فایل هنوز ساخته نشده باشد، مرورگر صفحه را پیدا نمی‌کند و پیام «صفحه پیدا نشد» می‌دهد. مسیر یک نشانی است، نه یک آرزو.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":39,"html":40},"۳. پرش داخل همین صفحه با #id","\u003Ch2 id=\"۳-پرش-داخل-همین-صفحه-با-#id\">۳. پرش داخل همین صفحه با \u003Ccode>#id\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%BE%D8%B1%D8%B4-%D8%AF%D8%A7%D8%AE%D9%84-%D9%87%D9%85%DB%8C%D9%86-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%A7-%23id\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>گاهی نمی‌خواهی از صفحه بیرون بروی — می‌خواهی داخل \u003Cstrong>همین\u003C\u002Fstrong> صفحهٔ بلند، از بالا مستقیم بپری به یک بخش پایین‌تر. این کار دو قدم دارد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F02-image-jump-anchor.f0b4f5f403.160.webp 160w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.320.webp 320w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.640.webp 640w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F02-image-jump-anchor.f0b4f5f403.1280.jpg\" srcset=\"\u002F_img\u002F02-image-jump-anchor.f0b4f5f403.160.jpg 160w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.320.jpg 320w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.640.jpg 640w, \u002F_img\u002F02-image-jump-anchor.f0b4f5f403.1280.jpg 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\" alt=\"یک لینک در بالای صفحه با یک فلش خمیده که مستقیم به بخشی در پایینِ همان صفحه می‌پرد\" width=\"1376\" height=\"768\" loading=\"lazy\" decoding=\"async\">\u003C\u002Fpicture>\u003C\u002Fp>\n\u003Cp>قدم اول: به عنصری که می‌خواهی مقصدِ پرش باشد یک \u003Ccode>id\u003C\u002Fcode> بده. \u003Ccode>id\u003C\u002Fcode> یک attribute است که به آن element یک اسمِ یکتا می‌دهد — مثل یک برچسبِ نشانی روی آن نقطهٔ صفحه:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;h2 id=&quot;projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fh2&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>قدم دوم: یک لینک بساز که \u003Ccode>href\u003C\u002Fcode> اش با \u003Ccode>#\u003C\u002Fcode> شروع شود و بعدش همان اسم بیاید. آن \u003Ccode>#\u003C\u002Fcode> به مرورگر می‌گوید «از صفحه بیرون نرو؛ داخل همین صفحه بپر به عنصری که \u003Ccode>id\u003C\u002Fcode> اش این است»:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;a href=&quot;#projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fa&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>حالا کل ساختار را بساز. یک پاراگرافِ «پرش سریع» بالای صفحه، دو تیترِ \u003Ccode>id\u003C\u002Fcode>دار، و یک لینکِ «بازگشت به بالا». برای لینکِ بازگشت، به‌جای ساختن یک عنصر جدید، به خودِ \u003Ccode>&lt;body&gt;\u003C\u002Fcode> یک \u003Ccode>id\u003C\u002Fcode> می‌دهیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;body id=&quot;top&quot;&gt;\n  &lt;p&gt;\n    از این دو لینک به هر بخش بپر:\n    &lt;a href=&quot;#projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fa&gt; و\n    &lt;a href=&quot;#about&quot;&gt;دربارهٔ من&lt;\u002Fa&gt;.\n  &lt;\u002Fp&gt;\n\n  &lt;h2 id=&quot;projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fh2&gt;\n  &lt;p&gt;اینجا از کارهایم می‌نویسم.&lt;\u002Fp&gt;\n\n  &lt;h2 id=&quot;about&quot;&gt;دربارهٔ من&lt;\u002Fh2&gt;\n  &lt;p&gt;و اینجا از خودم.&lt;\u002Fp&gt;\n\n  &lt;p&gt;&lt;a href=&quot;#top&quot;&gt;بازگشت به بالای صفحه&lt;\u002Fa&gt;&lt;\u002Fp&gt;\n&lt;\u002Fbody&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی «کارهایی که ساخته‌ام» کلیک کن؛ صفحه باید بپرد پایین سرِ همان تیتر. بعد «بازگشت به بالا» را بزن؛ باید برگردی سرِ صفحه.\u003C\u002Fp>\n\u003Cp>حالا عمداً خرابش کنیم تا ببینی چقدر این پیوند شکننده است. در همان لینکِ اول، اسم را غلط بنویس — یک حرف جابه‌جا:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;a href=&quot;#projcets&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fa&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>رویش کلیک کن. \u003Cstrong>هیچ اتفاقی نمی‌افتد.\u003C\u002Fstrong> صفحه تکان نمی‌خورد، نه خطایی، نه پرشی — انگار اصلاً لینک نیست. چون مرورگر دنبال عنصری با \u003Ccode>id=&quot;projcets&quot;\u003C\u002Fcode> می‌گردد و چنین چیزی وجود ندارد (تیترِ تو \u003Ccode>projects\u003C\u002Fcode> است، نه \u003Ccode>projcets\u003C\u002Fcode>). لینکِ داخل صفحه دقیقاً به همان اسم گره خورده؛ یک حرفِ اشتباه، و پرش به ناکجا می‌رود.\u003C\u002Fp>\n\u003Cp>حالا درستش کن: \u003Ccode>#projcets\u003C\u002Fcode> را برگردان به \u003Ccode>#projects\u003C\u002Fcode> و دوباره کلیک کن. باید سرِ جایش بپرد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> پرش انجام نشد؟ متنِ داخل \u003Ccode>href=&quot;#...&quot;\u003C\u002Fcode> و متنِ داخل \u003Ccode>id=&quot;...&quot;\u003C\u002Fcode> را کنار هم بگذار و \u003Cstrong>حرف‌به‌حرف\u003C\u002Fstrong> مقایسه کن. این‌ها به بزرگی و کوچکی حروف هم حساس‌اند: \u003Ccode>#About\u003C\u002Fcode> با \u003Ccode>id=&quot;about&quot;\u003C\u002Fcode> یکی نیست.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":42,"heading":43,"html":44},"checkpoint","چالش: این دو لینک چه فرقی دارند؟","\u003Ch2 id=\"چالش-این-دو-لینک-چه-فرقی-دارند\">چالش: این دو لینک چه فرقی دارند؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%D8%A7%DB%8C%D9%86-%D8%AF%D9%88-%D9%84%DB%8C%D9%86%DA%A9-%DA%86%D9%87-%D9%81%D8%B1%D9%82%DB%8C-%D8%AF%D8%A7%D8%B1%D9%86%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از ادامه جواب بده: این دو لینک، فقط سرِ یک \u003Ccode>#\u003C\u002Fcode>، چه‌کار متفاوتی می‌کنند؟\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;a href=&quot;#about&quot;&gt;دربارهٔ من&lt;\u002Fa&gt;\n&lt;a href=&quot;about&quot;&gt;دربارهٔ من&lt;\u002Fa&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> زمین تا آسمان فرق دارند.\u003C\u002Fp>\n\u003Cp>اولی با \u003Ccode>#\u003C\u002Fcode> است: مرورگر \u003Cstrong>از صفحه بیرون نمی‌رود\u003C\u002Fstrong>؛ داخل همین صفحه می‌پرد به عنصری که \u003Ccode>id=&quot;about&quot;\u003C\u002Fcode> دارد.\u003C\u002Fp>\n\u003Cp>دومی \u003Ccode>#\u003C\u002Fcode> ندارد: مرورگر آن را یک \u003Cstrong>مسیر نسبی\u003C\u002Fstrong> می‌بیند — یعنی «فایلی به‌اسم \u003Ccode>about\u003C\u002Fcode> کنارِ همین فایل هست، آن را باز کن». پس صفحهٔ فعلی را ترک می‌کند و می‌رود سراغ یک فایل دیگر (و اگر نباشد، «صفحه پیدا نشد»).\u003C\u002Fp>\n\u003Cp>یک کاراکتر، دو دنیای متفاوت. برای همین وقتی می‌خواهی داخل صفحه بپری، فراموش‌نکردنِ \u003Ccode>#\u003C\u002Fcode> مهم‌ترین جزء است.\u003C\u002Fp>\n",{"kind":21,"heading":46,"html":47},"۴. باز کردن در tab جدید: target=&quot;_blank&quot; و rel=&quot;noopener&quot;","\u003Ch2 id=\"۴-باز-کردن-در-tab-جدید-target=blank-و-rel=noopener\">۴. باز کردن در tab جدید: \u003Ccode>target=&quot;_blank&quot;\u003C\u002Fcode> و \u003Ccode>rel=&quot;noopener&quot;\u003C\u002Fcode>\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D8%A8%D8%A7%D8%B2-%DA%A9%D8%B1%D8%AF%D9%86-%D8%AF%D8%B1-tab-%D8%AC%D8%AF%DB%8C%D8%AF-target%3Dblank-%D9%88-rel%3Dnoopener\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>به‌طور پیش‌فرض وقتی روی لینک کلیک می‌کنی، مقصد در \u003Cstrong>همان\u003C\u002Fstrong> tab باز می‌شود و صفحهٔ تو کنار می‌رود. برای لینک‌های داخل سایتِ خودت این درست است. ولی گاهی به یک سایتِ بیرونی لینک می‌دهی و نمی‌خواهی خواننده صفحهٔ تو را از دست بدهد. آنجا می‌گویی در tab جدید باز شود، با attribute ای به‌اسم \u003Ccode>target\u003C\u002Fcode>:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;a href=&quot;https:\u002F\u002Fdeveloper.mozilla.org\u002F&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;مستندات MDN دربارهٔ وب&lt;\u002Fa&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>target=&quot;_blank&quot;\u003C\u002Fcode> یعنی «این را در یک tab تازه باز کن». ولی کنارش یک چیز دیگر هم هست: \u003Ccode>rel=&quot;noopener&quot;\u003C\u002Fcode>. چرا؟\u003C\u002Fp>\n\u003Cp>وقتی یک صفحه را با \u003Ccode>_blank\u003C\u002Fcode> باز می‌کنی، آن صفحهٔ تازه یک دستگیرهٔ کوچک به صفحهٔ \u003Cstrong>تو\u003C\u002Fstrong> پیدا می‌کند. یک سایتِ بدخواه می‌تواند از همین دستگیره استفاده کند و tab اصلیِ تو را — همان که فکر می‌کردی امن است — بی‌آنکه بفهمی به یک صفحهٔ جعلی هدایت کند. \u003Ccode>rel=&quot;noopener&quot;\u003C\u002Fcode> آن دستگیره را قطع می‌کند: صفحهٔ تازه دیگر هیچ راهی به صفحهٔ تو ندارد.\u003C\u002Fp>\n\u003Cp>مرورگرهای امروزی این محافظت را خودشان هم برای \u003Ccode>_blank\u003C\u002Fcode> اضافه می‌کنند، ولی تو خودت هم می‌نویسی‌اش — هم تا روی هر مرورگری امن باشی، هم تا کدت گویا باشد و بگوید «می‌دانم دارم چه‌کار می‌کنم».\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی این لینک کلیک کن. باید در یک tab \u003Cstrong>جدید\u003C\u002Fstrong> باز شود و صفحهٔ خودت سرِ جایش بماند. حالا \u003Ccode>target=&quot;_blank&quot;\u003C\u002Fcode> را بردار و دوباره کلیک کن؛ این بار در همان tab باز می‌شود و صفحه‌ات کنار می‌رود. فرق را با چشم ببین، بعد \u003Ccode>target=&quot;_blank&quot;\u003C\u002Fcode> را برگردان.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> \u003Ccode>target=&quot;_blank&quot;\u003C\u002Fcode> را روی هر لینکی نگذار. برای پرش‌های \u003Ccode>#\u003C\u002Fcode> داخل صفحه و برای لینک‌های سایتِ خودت، باز شدن در tab جدید فقط آزاردهنده است و tab های کاربر را پر می‌کند. tab جدید را برای لینک‌های بیرونی نگه دار.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":49,"html":50},"۵. متن لینک باید معنا بدهد","\u003Ch2 id=\"۵-متن-لینک-باید-معنا-بدهد\">۵. متن لینک باید معنا بدهد\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D9%85%D8%AA%D9%86-%D9%84%DB%8C%D9%86%DA%A9-%D8%A8%D8%A7%DB%8C%D8%AF-%D9%85%D8%B9%D9%86%D8%A7-%D8%A8%D8%AF%D9%87%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بدترین متن لینکِ دنیا این است: «اینجا کلیک کن». نه چون زشت است — چون \u003Cstrong>بی‌فایده\u003C\u002Fstrong> است. سه دلیل:\u003C\u002Fp>\n\u003Col>\n\u003Cli>خیلی‌ها با صفحه‌کلید یا با screen reader صفحه را می‌گردند و ابزارشان \u003Cstrong>فهرستِ همهٔ لینک‌های صفحه\u003C\u002Fstrong> را جدا نشانشان می‌دهد، بیرون از جمله. اگر ده لینک همه بگویند «اینجا کلیک کن»، این فهرست یعنی هیچ.\u003C\u002Fli>\n\u003Cli>کسی که با چشم می‌خواند هم صفحه را \u003Cstrong>اسکن\u003C\u002Fstrong> می‌کند؛ چشمش روی متنِ رنگیِ لینک‌ها می‌پرد، نه جملهٔ دور و برشان. لینک باید خودش بگوید ته‌اش کجاست.\u003C\u002Fli>\n\u003Cli>موتورهای جست‌وجو از متنِ لینک می‌فهمند مقصد دربارهٔ چیست. «اینجا» چیزی به آن‌ها نمی‌گوید.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>قانون ساده است: \u003Cstrong>متنِ لینک باید مقصد را توصیف کند و بیرون از جمله هم معنا بدهد.\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>&lt;!-- bad --&gt;\n&lt;p&gt;برای دیدن مستندات &lt;a href=&quot;https:\u002F\u002Fdeveloper.mozilla.org\u002F&quot;&gt;اینجا کلیک کن&lt;\u002Fa&gt;.&lt;\u002Fp&gt;\n\n&lt;!-- good --&gt;\n&lt;p&gt;&lt;a href=&quot;https:\u002F\u002Fdeveloper.mozilla.org\u002F&quot;&gt;مستندات MDN دربارهٔ وب&lt;\u002Fa&gt; را ببین.&lt;\u002Fp&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>هر دو به یک‌جا می‌روند، ولی دومی را می‌شود بیرون از جمله هم فهمید. همین یک عادت، صفحه‌ات را برای همه قابل‌استفاده‌تر می‌کند.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> متنِ لینک‌هایت را — فقط خودِ متن‌ها را، بدون جمله‌های دورشان — کنار هم بگذار و از دستیار AI ات بپرس: «اگر این‌ها را بیرون از متن ببینی، معلوم است هرکدام کجا می‌رود؟» جوابش نقطهٔ شروع خوبی است، ولی داورِ نهایی خودت هستی: \u003Cstrong>با چیزی که می‌بینی چک کن\u003C\u002Fstrong> — فهرست لینک‌های خودت را بلند بخوان؛ اگر جمله‌ای مثل «اینجا کلیک کن» بیرون از متن گنگ بود، همان را عوض کن. یادت باشد \u003Cstrong>AI هم اشتباه می‌کند\u003C\u002Fstrong>؛ گاهی متنی را «واضح» می‌گوید که برای خوانندهٔ واقعی گنگ است.\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 id=&quot;top&quot;&gt;\n    &lt;h1&gt;سلام! این صفحهٔ من است&lt;\u002Fh1&gt;\n    &lt;p&gt;\n      تازه ساختن صفحهٔ وب را شروع کرده‌ام. این صفحه دو بخش دارد؛\n      از این دو لینک می‌توانی مستقیم به هرکدام بپری:\n      &lt;a href=&quot;#projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fa&gt; و\n      &lt;a href=&quot;#about&quot;&gt;دربارهٔ من&lt;\u002Fa&gt;.\n    &lt;\u002Fp&gt;\n\n    &lt;h2 id=&quot;projects&quot;&gt;کارهایی که ساخته‌ام&lt;\u002Fh2&gt;\n    &lt;p&gt;\n      اولین صفحه‌ام را فقط با HTML نوشتم، بدون هیچ ابزار آماده‌ای. هر چیزی\n      که یاد می‌گیرم را از\n      &lt;a href=&quot;https:\u002F\u002Fdeveloper.mozilla.org\u002F&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;مستندات MDN دربارهٔ وب&lt;\u002Fa&gt;\n      می‌خوانم.\n    &lt;\u002Fp&gt;\n\n    &lt;h2 id=&quot;about&quot;&gt;دربارهٔ من&lt;\u002Fh2&gt;\n    &lt;p&gt;\n      دوست دارم چیزهایی بسازم که آدم‌ها واقعاً از آن‌ها استفاده کنند. کم‌کم\n      این صفحه را کامل‌تر می‌کنم.\n    &lt;\u002Fp&gt;\n\n    &lt;p&gt;&lt;a href=&quot;#top&quot;&gt;بازگشت به بالای صفحه&lt;\u002Fa&gt;&lt;\u002Fp&gt;\n  &lt;\u002Fbody&gt;\n&lt;\u002Fhtml&gt;\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> دو لینکِ بالای صفحه باید به دو بخش بپرند، لینکِ MDN باید در tab جدید باز شود، و «بازگشت به بالا» باید تو را برگرداند سرِ صفحه. هر چهار لینک، هر کدام یک کار.\u003C\u002Fp>\n",{"kind":21,"heading":52,"html":53},"واژه‌های تازهٔ این فصل","\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>link\u003C\u002Ftd>\n\u003Ctd>لینک\u003C\u002Ftd>\n\u003Ctd>متنی که کلیک می‌شود و تو را جای دیگری می‌برد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>&lt;a&gt;\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اِی (anchor)\u003C\u002Ftd>\n\u003Ctd>element ای که یک لینک می‌سازد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>href\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>اِچ‌رِف\u003C\u002Ftd>\n\u003Ctd>attribute ای که آدرس مقصدِ لینک را نگه می‌دارد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>absolute path\u003C\u002Ftd>\n\u003Ctd>اَبسولوت پَث\u003C\u002Ftd>\n\u003Ctd>آدرس کاملِ یک سایت، از هر کجا یکسان (\u003Ccode>https:\u002F\u002F...\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>relative path\u003C\u002Ftd>\n\u003Ctd>رِلِتیو پَث\u003C\u002Ftd>\n\u003Ctd>آدرسی نسبت به جای فایلِ فعلی، برای صفحه‌های سایتِ خودت\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>id\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>آی‌دی\u003C\u002Ftd>\n\u003Ctd>نامی یکتا روی یک element تا بشود با \u003Ccode>#\u003C\u002Fcode> به آن پرید\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":42,"heading":55,"html":56},"تمرین‌ها","\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>قبل از تمرین، بدون نگاه کردن به بالا جواب بده: برای اینکه یک لینک داخلِ همین صفحه به یک تیتر بپرد، دو چیز باید سرِ جایشان باشند. آن دو چیست؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> صفحهٔ «دربارهٔ من» فصل قبل را بردار و سه لینک به آن اضافه کن: یک لینک به یک سایتِ واقعی که دوستش داری (مسیر مطلق، در tab جدید با \u003Ccode>rel=&quot;noopener&quot;\u003C\u002Fcode>)، یک پاراگرافِ «فهرست» بالای صفحه با لینک‌های \u003Ccode>#\u003C\u002Fcode> که به دو تیترِ صفحه می‌پرند، و یک «بازگشت به بالا» در انتها. شرط: هیچ متنِ لینکی نباید «اینجا کلیک کن» باشد.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> یک صفحهٔ واقعی و شلوغ را باز کن و فقط به لینک‌هایش نگاه کن. پنج لینک پیدا کن که متنشان بیرون از جمله معنا می‌دهد و دو تا که نمی‌دهد. برای آن دوتای بد، متنِ بهتری بنویس که خودش بگوید کجا می‌رود.\u003C\u002Fp>\n",{"kind":21,"heading":58,"html":59},"در فصل بعد","\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;img&gt;\u003C\u002Fcode> عکس را روی صفحه بیاوری، چرا \u003Ccode>alt\u003C\u002Fcode> اجباری است و بدون آن چه چیزی خراب می‌شود، و چطور با \u003Ccode>width\u003C\u002Fcode> و \u003Ccode>height\u003C\u002Fcode> نگذاری صفحه موقع بارگذاری بپرد و جابه‌جا شود.\u003C\u002Fp>\n",{"course":61,"entitled":69,"lessons":70,"payments_enabled":69,"terms":255,"live":5},{"active_window":62,"effective_price_toman":63,"free":5,"lesson_count":64,"price_toman":65,"slug":66,"summary_fa":67,"title_fa":68},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[71,74,75,76,77,81,85,89,93,97,101,104,107,110,113,116,119,122,125,128,131,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],{"free_preview":5,"order":9,"slug":72,"source":8,"term":9,"title_fa":73},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"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":78,"slug":79,"source":8,"term":9,"title_fa":80},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":82,"slug":83,"source":8,"term":9,"title_fa":84},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":86,"slug":87,"source":8,"term":9,"title_fa":88},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":90,"slug":91,"source":8,"term":9,"title_fa":92},8,"t1-s08-forms","فصل ۰۸ — فرم: گرفتن ورودی",{"free_preview":5,"order":94,"slug":95,"source":8,"term":9,"title_fa":96},9,"t1-s09-accessibility","فصل ۰۹ — دسترس‌پذیری از همان HTML",{"free_preview":5,"order":98,"slug":99,"source":8,"term":9,"title_fa":100},10,"t1-s10-first-project","فصل ۱۰ — پروژه: صفحهٔ معرفی خودت",{"free_preview":5,"order":9,"slug":102,"source":8,"term":12,"title_fa":103},"t2-s01-first-css","فصل ۰۱ — اولین CSS",{"free_preview":5,"order":12,"slug":105,"source":8,"term":12,"title_fa":106},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":6,"slug":108,"source":8,"term":12,"title_fa":109},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":16,"slug":111,"source":8,"term":12,"title_fa":112},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":78,"slug":114,"source":8,"term":12,"title_fa":115},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":82,"slug":117,"source":8,"term":12,"title_fa":118},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":86,"slug":120,"source":8,"term":12,"title_fa":121},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":90,"slug":123,"source":8,"term":12,"title_fa":124},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":94,"slug":126,"source":8,"term":12,"title_fa":127},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":98,"slug":129,"source":8,"term":12,"title_fa":130},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":132,"slug":133,"source":8,"term":12,"title_fa":134},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":136,"source":8,"term":6,"title_fa":137},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":12,"slug":139,"source":8,"term":6,"title_fa":140},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":6,"slug":142,"source":8,"term":6,"title_fa":143},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":16,"slug":145,"source":8,"term":6,"title_fa":146},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":78,"slug":148,"source":8,"term":6,"title_fa":149},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":82,"slug":151,"source":8,"term":6,"title_fa":152},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":86,"slug":154,"source":8,"term":6,"title_fa":155},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":90,"slug":157,"source":8,"term":6,"title_fa":158},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":94,"slug":160,"source":8,"term":6,"title_fa":161},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":98,"slug":163,"source":8,"term":6,"title_fa":164},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":132,"slug":166,"source":8,"term":6,"title_fa":167},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":169,"source":8,"term":16,"title_fa":170},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":12,"slug":172,"source":8,"term":16,"title_fa":173},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":6,"slug":175,"source":8,"term":16,"title_fa":176},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":16,"slug":178,"source":8,"term":16,"title_fa":179},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":78,"slug":181,"source":8,"term":16,"title_fa":182},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":82,"slug":184,"source":8,"term":16,"title_fa":185},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":86,"slug":187,"source":8,"term":16,"title_fa":188},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":90,"slug":190,"source":8,"term":16,"title_fa":191},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":193,"source":8,"term":78,"title_fa":194},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":12,"slug":196,"source":8,"term":78,"title_fa":197},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":6,"slug":199,"source":8,"term":78,"title_fa":200},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":16,"slug":202,"source":8,"term":78,"title_fa":203},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":78,"slug":205,"source":8,"term":78,"title_fa":206},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":82,"slug":208,"source":8,"term":78,"title_fa":209},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":86,"slug":211,"source":8,"term":78,"title_fa":212},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":90,"slug":214,"source":8,"term":78,"title_fa":215},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":94,"slug":217,"source":8,"term":78,"title_fa":218},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":98,"slug":220,"source":8,"term":78,"title_fa":221},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":223,"source":8,"term":82,"title_fa":224},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":12,"slug":226,"source":8,"term":82,"title_fa":227},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":6,"slug":229,"source":8,"term":82,"title_fa":230},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":16,"slug":232,"source":8,"term":82,"title_fa":233},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":78,"slug":235,"source":8,"term":82,"title_fa":236},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":82,"slug":238,"source":8,"term":82,"title_fa":239},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":86,"slug":241,"source":8,"term":82,"title_fa":242},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":90,"slug":244,"source":8,"term":82,"title_fa":245},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":94,"slug":247,"source":8,"term":82,"title_fa":248},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":98,"slug":250,"source":8,"term":82,"title_fa":251},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":132,"slug":253,"source":8,"term":82,"title_fa":254},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104683]