[{"data":1,"prerenderedAt":261},["ShallowReactive",2],{"lesson:t1-s10-first-project":3,"course:taropood":65},{"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-first-project","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":9,"slug":16,"source":8,"term":17,"title_fa":18},"t2-s01-first-css",2,"فصل ۰۱ — اولین CSS",[20,24,27,32,34,37,40,43,47,50,53,56,59,62],{"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>این فصل هیچ tag تازه‌ای ندارد. کارِ امروز این است که هر چیزی که در نُه فصل گذشته یاد گرفتی را کنار هم بگذاری و یک صفحهٔ واقعی و کامل بسازی: \u003Cstrong>صفحهٔ معرفی خودت\u003C\u002Fstrong>. یک صفحه که اسمت بالای آن است، یک منو دارد، یک بخش «دربارهٔ من» با یک عکس، فهرستی از مهارت‌هایت، یک جدول کوچک، یک فرم تماس، و چند لینک به بیرون. صفحه‌ای که می‌شود واقعاً به کسی نشانش داد.\u003C\u002Fp>\n\u003Cp>\u003Cpicture>\u003Csource type=\"image\u002Fwebp\" srcset=\"\u002F_img\u002F01-image-profile-page.d6999e9db5.160.webp 160w, \u002F_img\u002F01-image-profile-page.d6999e9db5.320.webp 320w, \u002F_img\u002F01-image-profile-page.d6999e9db5.640.webp 640w, \u002F_img\u002F01-image-profile-page.d6999e9db5.1280.webp 1280w\" sizes=\"(max-width: 900px) 100vw, 800px\">\u003Cimg src=\"\u002F_img\u002F01-image-profile-page.d6999e9db5.1280.jpg\" srcset=\"\u002F_img\u002F01-image-profile-page.d6999e9db5.160.jpg 160w, \u002F_img\u002F01-image-profile-page.d6999e9db5.320.jpg 320w, \u002F_img\u002F01-image-profile-page.d6999e9db5.640.jpg 640w, \u002F_img\u002F01-image-profile-page.d6999e9db5.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>View Source\u003C\u002Fcode> که کدِ پشتِ هر صفحه را نشانت می‌دهد، یک \u003Ccode>validator\u003C\u002Fcode> که به تو می‌گوید HTML ات کجا قانون را شکسته، و \u003Ccode>DevTools\u003C\u002Fcode> که با آن صفحهٔ خودت را از تو بازرسی می‌کنی.\u003C\u002Fp>\n\u003Cp>آخر این فصل می‌توانی:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>یک صفحهٔ چندبخشیِ کامل بسازی که فقط از HTML ترم ۱ ساخته شده و معتبر است\u003C\u002Fli>\n\u003Cli>صفحه‌ات را با یک \u003Ccode>validator\u003C\u002Fcode> چک کنی و به صفر خطا برسانی\u003C\u002Fli>\n\u003Cli>با پنل \u003Ccode>Elements\u003C\u002Fcode> در \u003Ccode>DevTools\u003C\u002Fcode> درختِ صفحهٔ خودت را ببینی و بازرسی کنی\u003C\u002Fli>\n\u003Cli>بگویی چرا این صفحه بدونِ یک خط CSS هم درست و دسترس‌پذیر است\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\u003Cp>این فصل از \u003Cstrong>همه‌جا\u003C\u002Fstrong> استفاده می‌کند:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>از فصل ۱ و ۶:\u003C\u002Fstrong> اسکلت صفحه و اسکلتِ semantic — \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><main>\u003C\u002Fcode>، \u003Ccode><footer>\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۲، ۳، ۴، ۵:\u003C\u002Fstrong> تیتر و پاراگراف و \u003Ccode><strong>\u003C\u002Fcode>\u002F\u003Ccode><em>\u003C\u002Fcode>، لینک، تصویر با \u003Ccode><figure>\u003C\u002Fcode>، و فهرست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۷ و ۸:\u003C\u002Fstrong> جدولِ داده، و فرم با \u003Ccode><label>\u003C\u002Fcode> درست.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>از فصل ۹:\u003C\u002Fstrong> ترتیب heading، landmark ها، پیمایش با Tab، و \u003Ccode>alt\u003C\u002Fcode> درست.\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-first-project",{"kind":21,"heading":29,"html":33},"\n\u003Cp>یک انتظارِ درست هم پیش از شروع لازم داری:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>⚠️ \u003Cstrong>مواظب باش:\u003C\u002Fstrong> این صفحه قرار است \u003Cstrong>ساده و بی‌رنگ\u003C\u002Fstrong> به‌نظر برسد — متنِ سیاه روی زمینهٔ سفید، بدون فاصله‌بندیِ قشنگ. این نقصِ کارِ تو نیست؛ دقیقاً هدفِ ترم ۱ است. اول ساختار، بعد زیبایی. وسوسه نشو همین حالا سراغ رنگ و فاصله بروی؛ آن کلِ ترم ۲ است.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":35,"html":36},"۱. اول نقشه: صفحه‌ات چه بخش‌هایی دارد؟","\u003Ch2 id=\"۱-اول-نقشه-صفحه‌ات-چه-بخش‌هایی-دارد\">۱. اول نقشه: صفحه‌ات چه بخش‌هایی دارد؟\u003Ca class=\"head-anchor\" href=\"#%DB%B1-%D8%A7%D9%88%D9%84-%D9%86%D9%82%D8%B4%D9%87-%D8%B5%D9%81%D8%AD%D9%87%E2%80%8C%D8%A7%D8%AA-%DA%86%D9%87-%D8%A8%D8%AE%D8%B4%E2%80%8C%D9%87%D8%A7%DB%8C%DB%8C-%D8%AF%D8%A7%D8%B1%D8%AF\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>قبل از نوشتنِ حتی یک tag، روی کاغذ (یا در ذهنت) نقشهٔ صفحه را بکش. یک برنامه‌نویسِ خوب اول تصمیم می‌گیرد صفحه از چه \u003Cstrong>ناحیه‌هایی\u003C\u002Fstrong> ساخته می‌شود، بعد کد می‌زند. برای صفحهٔ معرفی، ناحیه‌ها این‌ها هستند:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>سرصفحه (\u003Ccode><header>\u003C\u002Fcode>):\u003C\u002Fstrong> اسمت به‌عنوان \u003Ccode><h1>\u003C\u002Fcode>، و یک \u003Ccode><nav>\u003C\u002Fcode> با چند لینک به بخش‌های پایین‌ترِ همین صفحه.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>محتوای اصلی (\u003Ccode><main>\u003C\u002Fcode>):\u003C\u002Fstrong> سه بخش (\u003Ccode><section>\u003C\u002Fcode>) — «دربارهٔ من» با یک عکس، «چیزهایی که بلدم» با فهرست و یک جدول، و «تماس با من» با یک فرم.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>حاشیه (\u003Ccode><aside>\u003C\u002Fcode>):\u003C\u002Fstrong> چند لینک به سایت‌های بیرونی.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>پاصفحه (\u003Ccode><footer>\u003C\u002Fcode>):\u003C\u002Fstrong> یک خط امضا و یک «بازگشت به بالا».\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>هر کدام از این ناحیه‌ها را در یکی از فصل‌های قبل ساخته‌ای؛ حالا فقط کنار هم می‌چینی‌شان.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> چرا \u003Ccode><section>\u003C\u002Fcode> و نه \u003Ccode><article>\u003C\u002Fcode> برای این سه بخش؟ چون معیارِ فصل ۶ همین را می‌گوید: «دربارهٔ من» به‌تنهایی یک واحدِ مستقل نیست؛ فقط بخشی از \u003Cstrong>همین\u003C\u002Fstrong> صفحهٔ توست. اگر بِکَنی‌اش، جای دیگری بی‌معنا می‌شود. پس \u003Ccode><section>\u003C\u002Fcode>. \u003Ccode><article>\u003C\u002Fcode> را برای چیزی نگه دار که هرجا بگذاری‌اش کامل بماند، مثل یک پستِ وبلاگ.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> باید بتوانی بدونِ نوشتنِ کد بگویی صفحه‌ات چند ناحیهٔ اصلی دارد و هر کدام کدام tag است. اگر این را داری، سختِ کار تمام شده.\u003C\u002Fp>\n",{"kind":21,"heading":38,"html":39},"۲. اسکلت و landmark ها","\u003Ch2 id=\"۲-اسکلت-و-landmark-ها\">۲. اسکلت و landmark ها\u003Ca class=\"head-anchor\" href=\"#%DB%B2-%D8%A7%D8%B3%DA%A9%D9%84%D8%AA-%D9%88-landmark-%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>با اسکلت شروع کن — همان اسکلتی که از فصل ۱ از حفظی — و بعد ناحیه‌های بزرگ را بگذار. اول سرصفحه با نام، منو، و یک \u003Ccode><main>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> خالی که بعداً پرشان می‌کنیم:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><!DOCTYPE html>\n<html lang="fa" dir="rtl">\n  <head>\n    <meta charset="UTF-8">\n    <title>سارا رضایی — صفحهٔ معرفی<\u002Ftitle>\n  <\u002Fhead>\n  <body id="top">\n    <header>\n      <h1>سارا رضایی<\u002Fh1>\n      <p>تازه دارم ساختن سایت را یاد می‌گیرم.<\u002Fp>\n      <nav>\n        <ul>\n          <li><a href="#about">دربارهٔ من<\u002Fa><\u002Fli>\n          <li><a href="#skills">چیزهایی که بلدم<\u002Fa><\u002Fli>\n          <li><a href="#contact">تماس با من<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main><\u002Fmain>\n\n    <footer>\n      <p>ساختهٔ سارا رضایی — ۱۴۰۵<\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>سه تصمیم را ببین که همه‌شان از فصل‌های قبل می‌آیند: \u003Ccode><h1>\u003C\u002Fcode> فقط \u003Cstrong>یکی\u003C\u002Fstrong> است و اسمِ صفحه را می‌گوید (فصل ۲)؛ منو یک \u003Ccode><ul>\u003C\u002Fcode> از لینک‌هاست چون یک فهرست از لینک است (فصل ۵ و ۶)؛ و هر لینک با \u003Ccode>#\u003C\u002Fcode> شروع می‌شود، یعنی «داخلِ همین صفحه بپر» به بخشی که آن \u003Ccode>id\u003C\u002Fcode> را دارد (فصل ۳). آن \u003Ccode>id="top"\u003C\u002Fcode> روی \u003Ccode><body>\u003C\u002Fcode> هم برای «بازگشت به بالا» است، دقیقاً مثل فصل ۳.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> اسمت را بالای صفحه می‌بینی و زیرش سه لینک. رویشان کلیک کن — فعلاً هیچ‌جا نمی‌پرند، چون هنوز بخشی با آن \u003Ccode>id\u003C\u002Fcode> نساخته‌ایم. این‌ها را در قدم بعد می‌سازیم و آن‌وقت لینک‌ها زنده می‌شوند.\u003C\u002Fp>\n",{"kind":21,"heading":41,"html":42},"۳. محتوای اصلی: معرفی، عکس، و مهارت‌ها","\u003Ch2 id=\"۳-محتوای-اصلی-معرفی-عکس-و-مهارت‌ها\">۳. محتوای اصلی: معرفی، عکس، و مهارت‌ها\u003Ca class=\"head-anchor\" href=\"#%DB%B3-%D9%85%D8%AD%D8%AA%D9%88%D8%A7%DB%8C-%D8%A7%D8%B5%D9%84%DB%8C-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%D8%B9%DA%A9%D8%B3-%D9%88-%D9%85%D9%87%D8%A7%D8%B1%D8%AA%E2%80%8C%D9%87%D8%A7\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا \u003Ccode><main>\u003C\u002Fcode> را پر کن. اولین \u003Ccode><section>\u003C\u002Fcode> بخش «دربارهٔ من» است: یک \u003Ccode><h2>\u003C\u002Fcode>، یک پاراگراف که تویش یک تکه را با \u003Ccode><strong>\u003C\u002Fcode> مهم و یک تکه را با \u003Ccode><em>\u003C\u002Fcode> تأکید می‌کنی (معنا، نه ظاهر — فصل ۲)، و یک عکس داخل \u003Ccode><figure>\u003C\u002Fcode> با \u003Ccode>alt\u003C\u002Fcode> معنادار و \u003Ccode>width\u003C\u002Fcode>\u002F\u003Ccode>height\u003C\u002Fcode> که نگذارد صفحه هنگام آمدنِ عکس بپرد (فصل ۴):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section id="about">\n  <h2>دربارهٔ من<\u002Fh2>\n  <p>\n    سلام! من سارا هستم. <strong>عاشق ساختن چیزهای تازه‌ام<\u002Fstrong> و\n    این روزها یاد می‌گیرم یک صفحهٔ وب را <em>از صفر<\u002Fem> بنویسم.\n  <\u002Fp>\n  <figure>\n    <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1005\u002F600\u002F400"\n         alt="سارا پشت میز نشسته و روی لپ‌تاپ کار می‌کند"\n         width="600" height="400">\n    <figcaption>پشت میزِ همیشگی‌ام، وسط یادگیری HTML.<\u002Ffigcaption>\n  <\u002Ffigure>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> این عکس فقط یک عکسِ نمونه است تا جایش را نگه دارد. وقتی عکسِ خودت را گذاشتی، \u003Ccode>alt\u003C\u002Fcode> را هم مطابقش عوض کن تا واقعاً همان چیزی را بگوید که در عکس هست — چون تنها تو می‌دانی عکسِ خودت چه نشان می‌دهد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>بخش دوم، «چیزهایی که بلدم»: یک \u003Ccode><ul>\u003C\u002Fcode> از مهارت‌ها (ترتیب مهم نیست)، یک \u003Ccode><ol>\u003C\u002Fcode> از مسیر یادگیری‌ات (اینجا ترتیب مهم است، فصل ۵)، و یک جدولِ کوچکِ داده — چون سطحِ هر زبان یک تقاطعِ معنادار است (فصل ۷):\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section id="skills">\n  <h2>چیزهایی که بلدم<\u002Fh2>\n  <ul>\n    <li>نوشتن HTML معتبر و semantic<\u002Fli>\n    <li>ساختن فهرست و جدول و فرم<\u002Fli>\n    <li>نوشتن متن جایگزین (alt) درست برای تصویر<\u002Fli>\n  <\u002Ful>\n\n  <h3>مسیر یادگیری‌ام تا اینجا<\u002Fh3>\n  <ol>\n    <li>اسکلت صفحه و متن<\u002Fli>\n    <li>پیوند و تصویر<\u002Fli>\n    <li>فهرست، جدول و فرم<\u002Fli>\n    <li>دسترس‌پذیری و همین پروژه<\u002Fli>\n  <\u002Fol>\n\n  <table>\n    <caption>زبان‌هایی که یاد گرفته‌ام<\u002Fcaption>\n    <thead>\n      <tr>\n        <th scope="col">زبان<\u002Fth>\n        <th scope="col">سطح<\u002Fth>\n      <\u002Ftr>\n    <\u002Fthead>\n    <tbody>\n      <tr>\n        <th scope="row">HTML<\u002Fth>\n        <td>خوب<\u002Ftd>\n      <\u002Ftr>\n      <tr>\n        <th scope="row">CSS<\u002Fth>\n        <td>تازه شروع کرده‌ام<\u002Ftd>\n      <\u002Ftr>\n    <\u002Ftbody>\n  <\u002Ftable>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>به ترتیبِ heading دقت کن: زیرِ \u003Ccode><h2>ی\u003C\u002Fcode> این بخش، «مسیر یادگیری» یک \u003Ccode><h3>\u003C\u002Fcode> است، چون زیرمجموعهٔ همین بخش است — نه یک \u003Ccode><h2>\u003C\u002Fcode> تازه. این همان ترتیبِ درستِ heading است که در فصل ۹ دیدی: هیچ سطحی را نپر.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> بخش «دربارهٔ من» با عکس و توضیح، و بخش «مهارت‌ها» با یک فهرست نقطه‌ای، یک فهرست شماره‌دار، و یک جدولِ دوستونی را می‌بینی. حالا برگرد بالا و روی «دربارهٔ من» در منو کلیک کن — این‌بار صفحه می‌پرد پایین سرِ همان بخش. لینک‌های منو زنده شدند.\u003C\u002Fp>\n",{"kind":44,"heading":45,"html":46},"checkpoint","۴. فرم تماس، و یک چالش سرِ راه","\u003Ch2 id=\"۴-فرم-تماس-و-یک-چالش-سرِ-راه\">۴. فرم تماس، و یک چالش سرِ راه\u003Ca class=\"head-anchor\" href=\"#%DB%B4-%D9%81%D8%B1%D9%85-%D8%AA%D9%85%D8%A7%D8%B3-%D9%88-%DB%8C%DA%A9-%DA%86%D8%A7%D9%84%D8%B4-%D8%B3%D8%B1%D9%90-%D8%B1%D8%A7%D9%87\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>بخش سومِ \u003Ccode><main>\u003C\u002Fcode> فرم تماس است: چند \u003Ccode><input>\u003C\u002Fcode> با \u003Ccode><label>\u003C\u002Fcode> درست، یک \u003Ccode><textarea>\u003C\u002Fcode> برای پیام، و یک \u003Ccode><button>\u003C\u002Fcode> (فصل ۸). زیرِ فرم هم چند خط اطلاعاتِ تماس می‌گذاریم.\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section id="contact">\n  <h2>تماس با من<\u002Fh2>\n  <p>اگر خواستی چیزی بپرسی، این فرم را پر کن:<\u002Fp>\n  <form>\n    <p>\n      <label for="name">نام تو<\u002Flabel>\n      <input type="text" id="name" name="name">\n    <\u002Fp>\n    <p>\n      <label for="email">ایمیل<\u002Flabel>\n      <input type="email" id="email" name="email">\n    <\u002Fp>\n    <p>\n      <label for="message">پیامت<\u002Flabel>\n      <textarea id="message" name="message"><\u002Ftextarea>\n    <\u002Fp>\n    <p>\n      <button type="submit">بفرست<\u002Fbutton>\n    <\u002Fp>\n  <\u002Fform>\n  <ul>\n    <li>ایمیل: sara@example.com<\u002Fli>\n    <li>شهر: تهران<\u002Fli>\n  <\u002Ful>\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>اطلاعاتِ تماس را یک \u003Ccode><ul>\u003C\u002Fcode> گذاشتم، نه یک جدول. چرا؟ همین‌جا یک چالش است.\u003C\u002Fp>\n",{"kind":44,"heading":48,"html":49},"چالش: اطلاعات تماس، جدول یا فهرست؟","\u003Ch2 id=\"چالش-اطلاعات-تماس-جدول-یا-فهرست\">چالش: اطلاعات تماس، جدول یا فهرست؟\u003Ca class=\"head-anchor\" href=\"#%DA%86%D8%A7%D9%84%D8%B4-%D8%A7%D8%B7%D9%84%D8%A7%D8%B9%D8%A7%D8%AA-%D8%AA%D9%85%D8%A7%D8%B3-%D8%AC%D8%AF%D9%88%D9%84-%DB%8C%D8%A7-%D9%81%D9%87%D8%B1%D8%B3%D8%AA\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>«ایمیل: …» و «شهر: …» دو خط اطلاعات‌اند. یکی می‌گوید «این هم اطلاعات است، جدولش کن». درست می‌گوید؟ اول جواب بده، بعد ادامه بده.\u003C\u002Fp>\n\u003Chr>\n\u003Cp>\u003Cstrong>جواب:\u003C\u002Fstrong> نه، این فهرست است نه جدول. معیارِ فصل ۷ همیشه یک سؤال بود: «اینجا یک تقاطعِ معنادارِ ردیف و ستون هست؟» اطلاعاتِ تماس این آزمون را رد می‌شود — فقط چند تکهٔ جداست، نه یک شبکه از ردیف و ستون. جدول را برای جایی نگه دار که واقعاً داده‌ی دوبعدی داری، مثل همان جدولِ «زبان و سطح» که تقاطعش معنا داشت. برای یک فهرستِ ساده، \u003Ccode><ul>\u003C\u002Fcode> درست است.\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> روی کلمهٔ هر \u003Ccode><label>\u003C\u002Fcode> کلیک کن و ببین نشانگر توی همان کادرِ درست می‌پرد — همان پیوندِ \u003Ccode>for\u003C\u002Fcode> و \u003Ccode>id\u003C\u002Fcode> از فصل ۸. دکمه را هم بزن؛ هیچ اتفاقی نمی‌افتد و این درست است، چون فعلاً فقط شکلِ فرم را می‌سازیم.\u003C\u002Fp>\n\u003Cp>بخش آخر، \u003Ccode><aside>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode>. حاشیه چند لینکِ بیرونی دارد که در tab جدید باز می‌شوند (\u003Ccode>rel="noopener"\u003C\u002Fcode>، فصل ۳)، و پاصفحه امضا و بازگشت به بالا:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><aside>\n  <h2>جاهای دیگری که هستم<\u002Fh2>\n  <ul>\n    <li><a href="https:\u002F\u002Fdeveloper.mozilla.org\u002F" target="_blank" rel="noopener">مستندات MDN که از آن یاد می‌گیرم<\u002Fa><\u002Fli>\n    <li><a href="https:\u002F\u002Fwww.w3.org\u002F" target="_blank" rel="noopener">سایت W3C، خانهٔ استانداردهای وب<\u002Fa><\u002Fli>\n  <\u002Ful>\n<\u002Faside>\n\n<footer>\n  <p>ساختهٔ سارا رضایی — ۱۴۰۵<\u002Fp>\n  <p><a href="#top">بازگشت به بالای صفحه<\u002Fa><\u002Fp>\n<\u002Ffooter>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>دقت کن متنِ لینک‌ها معنادار است، نه «اینجا کلیک کن» — بیرون از جمله هم معلوم است هرکدام کجا می‌رود (فصل ۳).\u003C\u002Fp>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> لینک‌های حاشیه باید در tab جدید باز شوند و «بازگشت به بالا» تو را به سرِ صفحه برگرداند.\u003C\u002Fp>\n",{"kind":21,"heading":51,"html":52},"۵. صفحهٔ کامل، و اعتبارسنجی با validator","\u003Ch2 id=\"۵-صفحهٔ-کامل-و-اعتبارسنجی-با-validator\">۵. صفحهٔ کامل، و اعتبارسنجی با validator\u003Ca class=\"head-anchor\" href=\"#%DB%B5-%D8%B5%D9%81%D8%AD%D9%87%D9%94-%DA%A9%D8%A7%D9%85%D9%84-%D9%88-%D8%A7%D8%B9%D8%AA%D8%A8%D8%A7%D8%B1%D8%B3%D9%86%D8%AC%DB%8C-%D8%A8%D8%A7-validator\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>حالا همه‌چیز کنار هم است. ولی «روی صفحه درست به‌نظر می‌رسد» کافی نیست — از فصل ۱ می‌دانی HTML خراب معمولاً فریاد نمی‌زند، فقط بی‌سروصدا کار نمی‌کند. پس قبل از اینکه به صفحه‌ات اعتماد کنی، بگذار یک \u003Cstrong>ماشین\u003C\u002Fstrong> چکش کند.\u003C\u002Fp>\n\u003Cp>اول ابزارِ همیشگی: روی صفحه راست‌کلیک کن و \u003Ccode>View Source\u003C\u002Fcode> را بزن. این همان کاری است که در فصل ۱ کردی — کلِ HTML ای که مرورگر گرفته را خام نشانت می‌دهد. حالا ابزارِ تازه: یک \u003Ccode>validator\u003C\u002Fcode>. \u003Ccode>validator\u003C\u002Fcode> برنامه‌ای است که HTML تو را می‌خواند و می‌گوید کجا قانونِ HTML را شکسته‌ای — تگِ بسته‌نشده، \u003Ccode>id\u003C\u002Fcode> تکراری، \u003Ccode>alt\u003C\u002Fcode> جاافتاده. رسمی‌ترینش روی نشانیِ \u003Ccode>validator.w3.org\u003C\u002Fcode> است؛ آنجا گزینه‌ای برای \u003Cstrong>چسباندنِ کد\u003C\u002Fstrong> (Validate by Input) دارد، پس حتی بدونِ اینکه صفحه‌ات روی اینترنت باشد می‌توانی کلِ کد را کپی کنی و بچسبانی.\u003C\u002Fp>\n\u003Cp>بیا فرض کنیم موقعِ ساختنِ بخشِ تماس، آن را با کپی‌کردنِ بخشِ «دربارهٔ من» ساخته‌ای و یادت رفته \u003Ccode>id\u003C\u002Fcode> را عوض کنی. یعنی حالا \u003Cstrong>دو\u003C\u002Fstrong> جای صفحه \u003Ccode>id="about"\u003C\u002Fcode> دارند:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode><section id="about">\n  <h2>دربارهٔ من<\u002Fh2>\n  ...\n<\u002Fsection>\n...\n<section id="about">   <!-- eshtebah: bayad "contact" bashad -->\n  <h2>تماس با من<\u002Fh2>\n  ...\n<\u002Fsection>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>روی صفحه هیچ‌چیز عجیبی نمی‌بینی — دو بخش سرِ جایشان‌اند. ولی دو چیز پنهانی خراب است. اول، در منو روی «تماس با من» کلیک کن (که \u003Ccode>href="#contact"\u003C\u002Fcode> است): \u003Cstrong>هیچ اتفاقی نمی‌افتد\u003C\u002Fstrong>، چون هیچ عنصری \u003Ccode>id="contact"\u003C\u002Fcode> ندارد؛ هر دو \u003Ccode>about\u003C\u002Fcode> شده‌اند. این همان پرشِ به‌ناکجای فصل ۳ است. دوم، کد را در \u003Ccode>validator\u003C\u002Fcode> بچسبان. یک خطای روشن می‌گیری:\u003C\u002Fp>\n\u003Cpre class=\"code-block\" dir=\"ltr\">\u003Ccode>Error: Duplicate ID "about".\nError: The first occurrence of ID "about" was here.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Ccode>validator\u003C\u002Fcode> دقیقاً همان چیزی را گفت که چشم ندید: یک \u003Ccode>id\u003C\u002Fcode> نباید در صفحه دوبار بیاید، چون \u003Ccode>id\u003C\u002Fcode> قرار است \u003Cstrong>یکتا\u003C\u002Fstrong> باشد (فصل ۳ و ۸). درستش کن: \u003Ccode>id\u003C\u002Fcode> بخشِ دوم را از \u003Ccode>about\u003C\u002Fcode> به \u003Ccode>contact\u003C\u002Fcode> عوض کن. حالا هم لینکِ «تماس با من» درست می‌پرد، هم دوباره که کد را بچسبانی، پیام سبز می‌بینی: صفر خطا.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🔧 \u003Cstrong>اگر کار نکرد:\u003C\u002Fstrong> \u003Ccode>validator\u003C\u002Fcode> خطای دیگری داد؟ رایج‌ترین‌ها را بشناس — \u003Ccode>Unclosed element\u003C\u002Fcode> یعنی یک تگ را نبسته‌ای (مثلاً \u003Ccode><\u002Fsection>\u003C\u002Fcode> جا افتاده)؛ \u003Ccode>An img element must have an alt attribute\u003C\u002Fcode> یعنی یک عکس \u003Ccode>alt\u003C\u002Fcode> ندارد؛ \u003Ccode>Stray end tag\u003C\u002Fcode> یعنی یک تگِ بسته‌ی اضافه داری. هر خطا شمارهٔ خط را هم می‌دهد؛ برو سرِ همان خط و با متنِ خطا مقایسه کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>این نسخهٔ نهایی و \u003Cstrong>معتبرِ\u003C\u002Fstrong> صفحه است — با \u003Ccode>id\u003C\u002Fcode> های یکتا و صفر خطا:\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 id="top">\n    <header>\n      <h1>سارا رضایی<\u002Fh1>\n      <p>تازه دارم ساختن سایت را یاد می‌گیرم.<\u002Fp>\n      <nav>\n        <ul>\n          <li><a href="#about">دربارهٔ من<\u002Fa><\u002Fli>\n          <li><a href="#skills">چیزهایی که بلدم<\u002Fa><\u002Fli>\n          <li><a href="#contact">تماس با من<\u002Fa><\u002Fli>\n        <\u002Ful>\n      <\u002Fnav>\n    <\u002Fheader>\n\n    <main>\n      <section id="about">\n        <h2>دربارهٔ من<\u002Fh2>\n        <p>\n          سلام! من سارا هستم. <strong>عاشق ساختن چیزهای تازه‌ام<\u002Fstrong> و\n          این روزها یاد می‌گیرم یک صفحهٔ وب را <em>از صفر<\u002Fem> بنویسم.\n        <\u002Fp>\n        <figure>\n          <img src="https:\u002F\u002Fpicsum.photos\u002Fid\u002F1005\u002F600\u002F400"\n               alt="سارا پشت میز نشسته و روی لپ‌تاپ کار می‌کند"\n               width="600" height="400">\n          <figcaption>پشت میزِ همیشگی‌ام، وسط یادگیری HTML.<\u002Ffigcaption>\n        <\u002Ffigure>\n      <\u002Fsection>\n\n      <section id="skills">\n        <h2>چیزهایی که بلدم<\u002Fh2>\n        <ul>\n          <li>نوشتن HTML معتبر و semantic<\u002Fli>\n          <li>ساختن فهرست و جدول و فرم<\u002Fli>\n          <li>نوشتن متن جایگزین (alt) درست برای تصویر<\u002Fli>\n        <\u002Ful>\n\n        <h3>مسیر یادگیری‌ام تا اینجا<\u002Fh3>\n        <ol>\n          <li>اسکلت صفحه و متن<\u002Fli>\n          <li>پیوند و تصویر<\u002Fli>\n          <li>فهرست، جدول و فرم<\u002Fli>\n          <li>دسترس‌پذیری و همین پروژه<\u002Fli>\n        <\u002Fol>\n\n        <table>\n          <caption>زبان‌هایی که یاد گرفته‌ام<\u002Fcaption>\n          <thead>\n            <tr>\n              <th scope="col">زبان<\u002Fth>\n              <th scope="col">سطح<\u002Fth>\n            <\u002Ftr>\n          <\u002Fthead>\n          <tbody>\n            <tr>\n              <th scope="row">HTML<\u002Fth>\n              <td>خوب<\u002Ftd>\n            <\u002Ftr>\n            <tr>\n              <th scope="row">CSS<\u002Fth>\n              <td>تازه شروع کرده‌ام<\u002Ftd>\n            <\u002Ftr>\n          <\u002Ftbody>\n        <\u002Ftable>\n      <\u002Fsection>\n\n      <section id="contact">\n        <h2>تماس با من<\u002Fh2>\n        <p>اگر خواستی چیزی بپرسی، این فرم را پر کن:<\u002Fp>\n        <form>\n          <p>\n            <label for="name">نام تو<\u002Flabel>\n            <input type="text" id="name" name="name">\n          <\u002Fp>\n          <p>\n            <label for="email">ایمیل<\u002Flabel>\n            <input type="email" id="email" name="email">\n          <\u002Fp>\n          <p>\n            <label for="message">پیامت<\u002Flabel>\n            <textarea id="message" name="message"><\u002Ftextarea>\n          <\u002Fp>\n          <p>\n            <button type="submit">بفرست<\u002Fbutton>\n          <\u002Fp>\n        <\u002Fform>\n        <ul>\n          <li>ایمیل: sara@example.com<\u002Fli>\n          <li>شهر: تهران<\u002Fli>\n        <\u002Ful>\n      <\u002Fsection>\n    <\u002Fmain>\n\n    <aside>\n      <h2>جاهای دیگری که هستم<\u002Fh2>\n      <ul>\n        <li><a href="https:\u002F\u002Fdeveloper.mozilla.org\u002F" target="_blank" rel="noopener">مستندات MDN که از آن یاد می‌گیرم<\u002Fa><\u002Fli>\n        <li><a href="https:\u002F\u002Fwww.w3.org\u002F" target="_blank" rel="noopener">سایت W3C، خانهٔ استانداردهای وب<\u002Fa><\u002Fli>\n      <\u002Ful>\n    <\u002Faside>\n\n    <footer>\n      <p>ساختهٔ سارا رضایی — ۱۴۰۵<\u002Fp>\n      <p><a href="#top">بازگشت به بالای صفحه<\u002Fa><\u002Fp>\n    <\u002Ffooter>\n  <\u002Fbody>\n<\u002Fhtml>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>✅ \u003Cstrong>چک کن:\u003C\u002Fstrong> کلِ صفحه را می‌بینی — سرصفحه، سه بخش، حاشیه، پاصفحه — و \u003Ccode>validator\u003C\u002Fcode> صفر خطا می‌دهد. همین حالا یک صفحهٔ واقعی و معتبر ساختی، فقط با HTML.\u003C\u002Fp>\n",{"kind":21,"heading":54,"html":55},"۶. بازرسی با DevTools و چکِ دسترس‌پذیری","\u003Ch2 id=\"۶-بازرسی-با-devtools-و-چکِ-دسترس‌پذیری\">۶. بازرسی با DevTools و چکِ دسترس‌پذیری\u003Ca class=\"head-anchor\" href=\"#%DB%B6-%D8%A8%D8%A7%D8%B2%D8%B1%D8%B3%DB%8C-%D8%A8%D8%A7-devtools-%D9%88-%DA%86%DA%A9%D9%90-%D8%AF%D8%B3%D8%AA%D8%B1%D8%B3%E2%80%8C%D9%BE%D8%B0%DB%8C%D8%B1%DB%8C\" aria-label=\"پیوند به این بخش\">#\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>\u003Ccode>validator\u003C\u002Fcode> گفت کدت قانونی است. حالا با ابزارِ آخر، خودت صفحه را از تو بازرسی کن. \u003Ccode>DevTools\u003C\u002Fcode> مجموعه‌ابزاری است که داخلِ خودِ مرورگر پنهان است و با آن می‌توانی صفحه را از پشتِ پرده ببینی. بازش کن: روی هر چیزی راست‌کلیک کن و \u003Ccode>Inspect\u003C\u002Fcode> را بزن (یا کلید \u003Ccode>F12\u003C\u002Fcode>). پنلی که باز می‌شود و درختِ عناصرِ صفحه را نشان می‌دهد، پنلِ \u003Ccode>Elements\u003C\u002Fcode> است — یعنی نمایشِ \u003Cstrong>زندهٔ\u003C\u002Fstrong> همان HTML، همان‌طور که مرورگر الان می‌بیندش.\u003C\u002Fp>\n\u003Cp>حالا سه چکِ دسترس‌پذیری فصل ۹ را با \u003Ccode>Elements\u003C\u002Fcode> انجام بده:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>landmark ها:\u003C\u002Fstrong> در درخت، \u003Ccode><main>\u003C\u002Fcode> را پیدا کن و بازش کن. باید سه \u003Ccode><section>\u003C\u002Fcode> تویش باشد. \u003Ccode><header>\u003C\u002Fcode>، \u003Ccode><nav>\u003C\u002Fcode>، \u003Ccode><aside>\u003C\u002Fcode> و \u003Ccode><footer>\u003C\u002Fcode> هم باید هرکدام سرِ جای خودشان باشند. اینها همان ناحیه‌هایی‌اند که کاربرِ screen reader بینشان می‌پرد.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>ترتیب heading:\u003C\u002Fstrong> در درخت از بالا به پایین heading ها را دنبال کن. باید ببینی: یک \u003Ccode><h1>\u003C\u002Fcode>، بعد چند \u003Ccode><h2>\u003C\u002Fcode>، و زیرِ بخشِ مهارت‌ها یک \u003Ccode><h3>\u003C\u002Fcode>. هیچ‌جا از \u003Ccode><h2>\u003C\u002Fcode> مستقیم به \u003Ccode><h4>\u003C\u002Fcode> نپریده‌ای. ترتیب سالم است.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>پیمایش با Tab:\u003C\u002Fstrong> پنل را ببند، یک بار روی صفحه کلیک کن، بعد پشتِ‌سرِ هم \u003Ccode>Tab\u003C\u002Fcode> بزن. تمرکز باید مرتب از لینک به لینک، بعد به کادرهای فرم و آخر به دکمه برود — و هر جا هست، حلقه‌ای دورش ببینی. اگر با Tab به همه‌جا می‌رسی، صفحه‌ات با صفحه‌کلید قابل استفاده است.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>نکتهٔ بزرگِ فصل ۹ اینجا خودش را نشان می‌دهد: تو \u003Cstrong>هیچ کارِ اضافه‌ای\u003C\u002Fstrong> برای دسترس‌پذیری نکردی. همین‌که هر ناحیه را با tag درستش ساختی، هر \u003Ccode><img>\u003C\u002Fcode> را \u003Ccode>alt\u003C\u002Fcode> دادی و هر \u003Ccode><input>\u003C\u002Fcode> را \u003Ccode><label>\u003C\u002Fcode>، نصفِ بیشترِ کارِ دسترس‌پذیری همان‌جا انجام شد. semantic HTML این را مجانی به تو داد.\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>💡 \u003Cstrong>نکته:\u003C\u002Fstrong> در \u003Ccode>Elements\u003C\u002Fcode> می‌توانی روی متن‌ها دوبار کلیک کنی و زنده عوضشان کنی — ولی این تغییرها فقط در همین نمایش‌اند و با یک refresh می‌پرند. \u003Ccode>DevTools\u003C\u002Fcode> برای \u003Cstrong>دیدن و آزمایش‌کردن\u003C\u002Fstrong> است، نه برای ذخیرهٔ تغییر؛ تغییرِ واقعی باید در خودِ فایل باشد.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>و حالا آخرین ابزارِ این فصل — خودِ AI، این‌بار در نقشِ بازبین:\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>🤖 \u003Cstrong>با AI:\u003C\u002Fstrong> حالا که صفحه را خودت ساختی و می‌فهمی، AI یک جفت‌چشمِ دومِ عالی است. کلِ HTML ات را به دستیار AI ات بده و بپرس: «این صفحه را از نظر semantic و accessibility نگاه کن — جایی مانده که tag بهترش هست؟ عکسی بدونِ \u003Ccode>alt\u003C\u002Fcode> یا ورودی‌ای بدونِ \u003Ccode><label>\u003C\u002Fcode> جا مانده؟». بعد \u003Cstrong>هر پیشنهادش را خودت در \u003Ccode>DevTools\u003C\u002Fcode> چک کن\u003C\u002Fstrong>؛ اگر گفت یک \u003Ccode>alt\u003C\u002Fcode> جا افتاده، در \u003Ccode>Elements\u003C\u002Fcode> برو ببین راست می‌گوید یا نه. این کاربردِ \u003Cstrong>درستِ\u003C\u002Fstrong> AI است، چون کدی را بازبینی می‌کند که خودت نوشتی و می‌فهمی. کاربردِ غلط این بود که از همان اول بگویی «یک صفحهٔ معرفی برایم بساز» — قبل از اینکه بتوانی خروجی را بخوانی، که همان تله‌ای است که فصل‌های قبل ازش حرف زدیم. یادت باشد: \u003Cstrong>اول خودت، بعد AI؛ خط به خط؛ و AI هم اشتباه می‌کند\u003C\u002Fstrong> — پس هر چیزی که گفت را با چیزی که در \u003Ccode>DevTools\u003C\u002Fcode> می‌بینی چک کن.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n",{"kind":21,"heading":57,"html":58},"واژه‌های تازهٔ این فصل","\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\u003Cp>این فصل tag تازه ندارد؛ فقط سه \u003Cstrong>ابزار\u003C\u002Fstrong> تازه:\u003C\u002Fp>\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>View Source\u003C\u002Ftd>\n\u003Ctd>ویو سورس\u003C\u002Ftd>\n\u003Ctd>گزینهٔ مرورگر که کلِ کدِ HTML خامِ یک صفحه را نشان می‌دهد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>validator\u003C\u002Ftd>\n\u003Ctd>ولیدِیتور\u003C\u002Ftd>\n\u003Ctd>ابزاری که HTML را می‌خواند و می‌گوید کجا قانون را شکسته‌ای (روی \u003Ccode>validator.w3.org\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>DevTools\u003C\u002Ftd>\n\u003Ctd>دِوتولز\u003C\u002Ftd>\n\u003Ctd>ابزارهای داخلِ مرورگر برای دیدن و آزمایشِ زندهٔ صفحه (با \u003Ccode>Inspect\u003C\u002Fcode> یا \u003Ccode>F12\u003C\u002Fcode>)\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Elements\u003C\u002Ftd>\n\u003Ctd>اِلِمِنتس\u003C\u002Ftd>\n\u003Ctd>پنلی در \u003Ccode>DevTools\u003C\u002Fcode> که درختِ زندهٔ عناصرِ صفحه را نشان می‌دهد\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\n\u003C\u002Ftable>\n",{"kind":44,"heading":60,"html":61},"تمرین‌ها","\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>قبل از تمرین، بدون نگاه کردن به بالا جواب بده: یک صفحهٔ معرفی حداقل کدام چهار landmark را دارد، و هرکدام کدام tag است؟\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین اجباری:\u003C\u002Fstrong> صفحهٔ معرفیِ \u003Cstrong>خودت\u003C\u002Fstrong> را بساز — نه سارا، خودت. باید داشته باشد: اسکلتِ کامل و یک \u003Ccode><title>\u003C\u002Fcode> معنادار، یک \u003Ccode><header>\u003C\u002Fcode> با \u003Ccode><h1>\u003C\u002Fcode> (اسمت) و یک \u003Ccode><nav>\u003C\u002Fcode>، یک \u003Ccode><main>\u003C\u002Fcode> با حداقل دو \u003Ccode><section>\u003C\u002Fcode> که تویشان یک عکس با \u003Ccode>alt\u003C\u002Fcode> درست، حداقل یک فهرست، و یک فرمِ کوچک با \u003Ccode><label>\u003C\u002Fcode> های سالم باشد، و یک \u003Ccode><footer>\u003C\u002Fcode>. یک \u003Ccode><div>\u003C\u002Fcode> هم به‌کار نبر — به هیچ‌کدام نیازی نداری.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>تمرین ستاره‌دار ⭐:\u003C\u002Fstrong> کدِ صفحه‌ات را در \u003Ccode>validator.w3.org\u003C\u002Fcode> بچسبان و به \u003Cstrong>صفر خطا\u003C\u002Fstrong> برسان. هر خطا را یکی‌یکی بخوان، برو سرِ همان خط، و درستش کن — همان‌طور که با \u003Ccode>id\u003C\u002Fcode> تکراری کردیم. بعد در \u003Ccode>DevTools\u003C\u002Fcode> باز کن و با \u003Ccode>Tab\u003C\u002Fcode> کلِ صفحه را پیمایش کن؛ مطمئن شو به هر لینک و هر کادرِ فرم می‌رسی. یک صفحهٔ معتبر که با صفحه‌کلید کامل قابل استفاده است — این خروجیِ کلِ ترم ۱ است.\u003C\u002Fp>\n",{"kind":21,"heading":63,"html":64},"در فصل بعد","\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>اینجا ترم ۱ تمام می‌شود. یک صفحهٔ کامل، معتبر، semantic و دسترس‌پذیر داری — و به‌عمد بی‌رنگ و ساده. این تارِ پارچه است: ساختار و معنا. ترم ۲ پودِ آن را می‌بافد: \u003Cstrong>CSS\u003C\u002Fstrong>. یاد می‌گیری همین صفحه را رنگ بدهی، فاصله‌بندی کنی، فونتش را عوض کنی و از این تودهٔ سیاه‌وسفید یک چیزِ واقعاً زیبا بسازی — بدونِ اینکه حتی یک tag از این ساختارِ درست را دست بزنی. تارت محکم است؛ حالا وقتِ پود است.\u003C\u002Fp>\n",{"course":66,"entitled":74,"lessons":75,"payments_enabled":74,"terms":260,"live":5},{"active_window":67,"effective_price_toman":68,"free":5,"lesson_count":69,"price_toman":70,"slug":71,"summary_fa":72,"title_fa":73},null,0,61,1500000,"taropood","از صفر تا ساختن سایت واقعی با HTML و CSS. متن‌محور، با آزمایشگاه زندهٔ داخل مرورگر و اصطلاح‌های اصیل.","تاروپود — خودآموز HTML و CSS",false,[76,79,82,86,90,94,98,102,106,107,108,109,112,115,118,121,124,127,130,133,136,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,254,257],{"free_preview":5,"order":9,"slug":77,"source":8,"term":9,"title_fa":78},"t1-s01-first-page","فصل ۰۱ — اولین صفحهٔ وب تو",{"free_preview":5,"order":17,"slug":80,"source":8,"term":9,"title_fa":81},"t1-s02-text","فصل ۰۲ — متن: عنوان و پاراگراف",{"free_preview":5,"order":83,"slug":84,"source":8,"term":9,"title_fa":85},3,"t1-s03-links","فصل ۰۳ — پیوند: چیزی که وب را وب کرد",{"free_preview":5,"order":87,"slug":88,"source":8,"term":9,"title_fa":89},4,"t1-s04-images","فصل ۰۴ — تصویر",{"free_preview":5,"order":91,"slug":92,"source":8,"term":9,"title_fa":93},5,"t1-s05-lists","فصل ۰۵ — فهرست",{"free_preview":5,"order":95,"slug":96,"source":8,"term":9,"title_fa":97},6,"t1-s06-semantic","فصل ۰۶ — اسکلت معنادار صفحه",{"free_preview":5,"order":99,"slug":100,"source":8,"term":9,"title_fa":101},7,"t1-s07-tables","فصل ۰۷ — جدول، فقط برای داده",{"free_preview":5,"order":103,"slug":104,"source":8,"term":9,"title_fa":105},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":9,"slug":16,"source":8,"term":17,"title_fa":18},{"free_preview":5,"order":17,"slug":110,"source":8,"term":17,"title_fa":111},"t2-s02-selectors","فصل ۰۲ — selector ها",{"free_preview":5,"order":83,"slug":113,"source":8,"term":17,"title_fa":114},"t2-s03-cascade","فصل ۰۳ — cascade، specificity و inheritance",{"free_preview":5,"order":87,"slug":116,"source":8,"term":17,"title_fa":117},"t2-s04-box-model","فصل ۰۴ — جعبه‌ها: box model",{"free_preview":5,"order":91,"slug":119,"source":8,"term":17,"title_fa":120},"t2-s05-units-colors","فصل ۰۵ — واحد و رنگ",{"free_preview":5,"order":95,"slug":122,"source":8,"term":17,"title_fa":123},"t2-s06-typography","فصل ۰۶ — تایپوگرافی و فونت فارسی",{"free_preview":5,"order":99,"slug":125,"source":8,"term":17,"title_fa":126},"t2-s07-flow","فصل ۰۷ — جریان عادی صفحه",{"free_preview":5,"order":103,"slug":128,"source":8,"term":17,"title_fa":129},"t2-s08-decoration","فصل ۰۸ — پس‌زمینه، حاشیه، سایه",{"free_preview":5,"order":12,"slug":131,"source":8,"term":17,"title_fa":132},"t2-s09-custom-props","فصل ۰۹ — متغیرهای خودت در CSS",{"free_preview":5,"order":6,"slug":134,"source":8,"term":17,"title_fa":135},"t2-s10-devtools","فصل ۱۰ — DevTools: ابزار واقعی",{"free_preview":5,"order":137,"slug":138,"source":8,"term":17,"title_fa":139},11,"t2-s11-styled-project","فصل ۱۱ — صفحهٔ ترم ۱ را زنده کن",{"free_preview":5,"order":9,"slug":141,"source":8,"term":83,"title_fa":142},"t3-s01-layout-intro","فصل ۰۱ — چیدمان: از جریان عادی شروع کن",{"free_preview":5,"order":17,"slug":144,"source":8,"term":83,"title_fa":145},"t3-s02-flex-basics","فصل ۰۲ — flexbox: یک محور",{"free_preview":5,"order":83,"slug":147,"source":8,"term":83,"title_fa":148},"t3-s03-flex-align","فصل ۰۳ — چیدن و وسط‌چین کردن",{"free_preview":5,"order":87,"slug":150,"source":8,"term":83,"title_fa":151},"t3-s04-flex-grow","فصل ۰۴ — انعطاف واقعی",{"free_preview":5,"order":91,"slug":153,"source":8,"term":83,"title_fa":154},"t3-s05-grid-basics","فصل ۰۵ — grid: دو محور",{"free_preview":5,"order":95,"slug":156,"source":8,"term":83,"title_fa":157},"t3-s06-grid-placement","فصل ۰۶ — جای‌گذاری در grid",{"free_preview":5,"order":99,"slug":159,"source":8,"term":83,"title_fa":160},"t3-s07-grid-areas","فصل ۰۷ — layout کامل صفحه با grid",{"free_preview":5,"order":103,"slug":162,"source":8,"term":83,"title_fa":163},"t3-s08-position","فصل ۰۸ — position",{"free_preview":5,"order":12,"slug":165,"source":8,"term":83,"title_fa":166},"t3-s09-stacking","فصل ۰۹ — z-index و stacking context",{"free_preview":5,"order":6,"slug":168,"source":8,"term":83,"title_fa":169},"t3-s10-logical","فصل ۱۰ — logical properties",{"free_preview":5,"order":137,"slug":171,"source":8,"term":83,"title_fa":172},"t3-s11-layout-project","فصل ۱۱ — پروژه: layout یک سایت کامل",{"free_preview":5,"order":9,"slug":174,"source":8,"term":87,"title_fa":175},"t4-s01-responsive-intro","فصل ۰۱ — responsive یعنی چه",{"free_preview":5,"order":17,"slug":177,"source":8,"term":87,"title_fa":178},"t4-s02-media-queries","فصل ۰۲ — media query",{"free_preview":5,"order":83,"slug":180,"source":8,"term":87,"title_fa":181},"t4-s03-responsive-images","فصل ۰۳ — تصویر responsive",{"free_preview":5,"order":87,"slug":183,"source":8,"term":87,"title_fa":184},"t4-s04-fluid-type","فصل ۰۴ — تایپوگرافی سیال و ریاضی در CSS",{"free_preview":5,"order":91,"slug":186,"source":8,"term":87,"title_fa":187},"t4-s05-container-queries","فصل ۰۵ — container query",{"free_preview":5,"order":95,"slug":189,"source":8,"term":87,"title_fa":190},"t4-s06-responsive-nav","فصل ۰۶ — ناوبری responsive",{"free_preview":5,"order":99,"slug":192,"source":8,"term":87,"title_fa":193},"t4-s07-dark-mode","فصل ۰۷ — dark mode",{"free_preview":5,"order":103,"slug":195,"source":8,"term":87,"title_fa":196},"t4-s08-responsive-project","فصل ۰۸ — پروژه: سایت کاملاً responsive",{"free_preview":5,"order":9,"slug":198,"source":8,"term":91,"title_fa":199},"t5-s01-states","فصل ۰۱ — حالت‌ها: pseudo-class تعاملی",{"free_preview":5,"order":17,"slug":201,"source":8,"term":91,"title_fa":202},"t5-s02-structural-selectors","فصل ۰۲ — selector های ساختاری و combinator ها",{"free_preview":5,"order":83,"slug":204,"source":8,"term":91,"title_fa":205},"t5-s03-pseudo-elements","فصل ۰۳ — pseudo-element ها",{"free_preview":5,"order":87,"slug":207,"source":8,"term":91,"title_fa":208},"t5-s04-forms-styling","فصل ۰۴ — استایل فرم",{"free_preview":5,"order":91,"slug":210,"source":8,"term":91,"title_fa":211},"t5-s05-forms-validation","فصل ۰۵ — اعتبارسنجی فرم",{"free_preview":5,"order":95,"slug":213,"source":8,"term":91,"title_fa":214},"t5-s06-transforms","فصل ۰۶ — transform",{"free_preview":5,"order":99,"slug":216,"source":8,"term":91,"title_fa":217},"t5-s07-transitions","فصل ۰۷ — transition",{"free_preview":5,"order":103,"slug":219,"source":8,"term":91,"title_fa":220},"t5-s08-animation","فصل ۰۸ — animation و احترام به کاربر",{"free_preview":5,"order":12,"slug":222,"source":8,"term":91,"title_fa":223},"t5-s09-has-selector","فصل ۰۹ — :has() و تعامل بدون JavaScript",{"free_preview":5,"order":6,"slug":225,"source":8,"term":91,"title_fa":226},"t5-s10-interaction-project","فصل ۱۰ — پروژه: یک component تعاملی بدون JS",{"free_preview":5,"order":9,"slug":228,"source":8,"term":95,"title_fa":229},"t6-s01-organizing","فصل ۰۱ — CSS را سازماندهی کن",{"free_preview":5,"order":17,"slug":231,"source":8,"term":95,"title_fa":232},"t6-s02-layers-nesting","فصل ۰۲ — `@layer` و nesting",{"free_preview":5,"order":83,"slug":234,"source":8,"term":95,"title_fa":235},"t6-s03-components","فصل ۰۳ — مثل component فکر کن",{"free_preview":5,"order":87,"slug":237,"source":8,"term":95,"title_fa":238},"t6-s04-design-system","فصل ۰۴ — design system کوچک خودت",{"free_preview":5,"order":91,"slug":240,"source":8,"term":95,"title_fa":241},"t6-s05-svg-icons","فصل ۰۵ — SVG و آیکون",{"free_preview":5,"order":95,"slug":243,"source":8,"term":95,"title_fa":244},"t6-s06-accessibility-deep","فصل ۰۶ — دسترس‌پذیری عمیق",{"free_preview":5,"order":99,"slug":246,"source":8,"term":95,"title_fa":247},"t6-s07-performance","فصل ۰۷ — سرعت",{"free_preview":5,"order":103,"slug":249,"source":8,"term":95,"title_fa":250},"t6-s08-architecture","فصل ۰۸ — معماری CSS در مقیاس بزرگ",{"free_preview":5,"order":12,"slug":252,"source":8,"term":95,"title_fa":253},"t6-s09-debugging","فصل ۰۹ — اشکال‌زدایی مثل حرفه‌ای‌ها",{"free_preview":5,"order":6,"slug":255,"source":8,"term":95,"title_fa":256},"t6-s10-capstone-build","فصل ۱۰ — پروژهٔ نهایی: ساخت سایت چندصفحه‌ای",{"free_preview":5,"order":137,"slug":258,"source":8,"term":95,"title_fa":259},"t6-s11-capstone-ship","فصل ۱۱ — پروژهٔ نهایی: انتشار زنده",[],1784827104857]