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