در این فصل چه می‌سازی#
این فصل هیچ tag تازه‌ای ندارد. کارِ امروز این است که هر چیزی که در نُه فصل گذشته یاد گرفتی را کنار هم بگذاری و یک صفحهٔ واقعی و کامل بسازی: صفحهٔ معرفی خودت. یک صفحه که اسمت بالای آن است، یک منو دارد، یک بخش «دربارهٔ من» با یک عکس، فهرستی از مهارت‌هایت، یک جدول کوچک، یک فرم تماس، و چند لینک به بیرون. صفحه‌ای که می‌شود واقعاً به کسی نشانش داد.
و چون این صفحه واقعی است، سه ابزار واقعی را هم همین‌جا یاد می‌گیری: View Source که کدِ پشتِ هر صفحه را نشانت می‌دهد، یک validator که به تو می‌گوید HTML ات کجا قانون را شکسته، و DevTools که با آن صفحهٔ خودت را از تو بازرسی می‌کنی.
آخر این فصل می‌توانی:
- یک صفحهٔ چندبخشیِ کامل بسازی که فقط از HTML ترم ۱ ساخته شده و معتبر است
- صفحه‌ات را با یک
validatorچک کنی و به صفر خطا برسانی - با پنل
ElementsدرDevToolsدرختِ صفحهٔ خودت را ببینی و بازرسی کنی - بگویی چرا این صفحه بدونِ یک خط CSS هم درست و دسترس‌پذیر است
قبل از شروع#
این فصل از همه‌جا استفاده می‌کند:
- از فصل ۱ و ۶: اسکلت صفحه و اسکلتِ semantic —
<header>،<nav>،<main>،<footer>. - از فصل ۲، ۳، ۴، ۵: تیتر و پاراگراف و
<strong>/<em>، لینک، تصویر با<figure>، و فهرست. - از فصل ۷ و ۸: جدولِ داده، و فرم با
<label>درست. - از فصل ۹: ترتیب heading، landmark ها، پیمایش با Tab، و
altدرست.
فقط یک مرورگر لازم داری، یا همین آزمایشگاه.
یک انتظارِ درست هم پیش از شروع لازم داری:
⚠️ مواظب باش: این صفحه قرار است ساده و بی‌رنگ به‌نظر برسد — متنِ سیاه روی زمینهٔ سفید، بدون فاصله‌بندیِ قشنگ. این نقصِ کارِ تو نیست؛ دقیقاً هدفِ ترم ۱ است. اول ساختار، بعد زیبایی. وسوسه نشو همین حالا سراغ رنگ و فاصله بروی؛ آن کلِ ترم ۲ است.
۱. اول نقشه: صفحه‌ات چه بخش‌هایی دارد؟#
قبل از نوشتنِ حتی یک tag، روی کاغذ (یا در ذهنت) نقشهٔ صفحه را بکش. یک برنامه‌نویسِ خوب اول تصمیم می‌گیرد صفحه از چه ناحیه‌هایی ساخته می‌شود، بعد کد می‌زند. برای صفحهٔ معرفی، ناحیه‌ها اینها هستند:
- سرصفحه (
<header>): اسمت به‌عنوان<h1>، و یک<nav>با چند لینک به بخش‌های پایین‌ترِ همین صفحه. - محتوای اصلی (
<main>): سه بخش (<section>) — «دربارهٔ من» با یک عکس، «چیزهایی که بلدم» با فهرست و یک جدول، و «تماس با من» با یک فرم. - حاشیه (
<aside>): چند لینک به سایت‌های بیرونی. - پاصفحه (
<footer>): یک خط امضا و یک «بازگشت به بالا».
هر کدام از این ناحیه‌ها را در یکی از فصل‌های قبل ساخته‌ای؛ حالا فقط کنار هم می‌چینی‌شان.
💡 نکته: چرا
<section>و نه<article>برای این سه بخش؟ چون معیارِ فصل ۶ همین را می‌گوید: «دربارهٔ من» به‌تنهایی یک واحدِ مستقل نیست؛ فقط بخشی از همین صفحهٔ توست. اگر بِکَنی‌اش، جای دیگری بی‌معنا می‌شود. پس<section>.<article>را برای چیزی نگه دار که هرجا بگذاری‌اش کامل بماند، مثل یک پستِ وبلاگ.
✅ چک کن: باید بتوانی بدونِ نوشتنِ کد بگویی صفحه‌ات چند ناحیهٔ اصلی دارد و هر کدام کدام tag است. اگر این را داری، سختِ کار تمام شده.
۲. اسکلت و landmark ها#
با اسکلت شروع کن — همان اسکلتی که از فصل ۱ از حفظی — و بعد ناحیه‌های بزرگ را بگذار. اول سرصفحه با نام، منو، و یک <main> و <footer> خالی که بعداً پرشان می‌کنیم:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>سارا رضایی — صفحهٔ معرفی</title>
</head>
<body id="top">
<header>
<h1>سارا رضایی</h1>
<p>تازه دارم ساختن سایت را یاد می‌گیرم.</p>
<nav>
<ul>
<li><a href="#about">دربارهٔ من</a></li>
<li><a href="#skills">چیزهایی که بلدم</a></li>
<li><a href="#contact">تماس با من</a></li>
</ul>
</nav>
</header>
<main></main>
<footer>
<p>ساختهٔ سارا رضایی — ۱۴۰۵</p>
</footer>
</body>
</html>
سه تصمیم را ببین که همه‌شان از فصل‌های قبل می‌آیند: <h1> فقط یکی است و اسمِ صفحه را می‌گوید (فصل ۲)؛ منو یک <ul> از لینک‌هاست چون یک فهرست از لینک است (فصل ۵ و ۶)؛ و هر لینک با # شروع می‌شود، یعنی «داخلِ همین صفحه بپر» به بخشی که آن id را دارد (فصل ۳). آن id="top" روی <body> هم برای «بازگشت به بالا» است، دقیقاً مثل فصل ۳.
✅ چک کن: اسمت را بالای صفحه می‌بینی و زیرش سه لینک. رویشان کلیک کن — فعلاً هیچ‌جا نمی‌پرند، چون هنوز بخشی با آن id نساخته‌ایم. اینها را در قدم بعد می‌سازیم و آن‌وقت لینک‌ها زنده می‌شوند.
۳. محتوای اصلی: معرفی، عکس، و مهارت‌ها#
حالا <main> را پر کن. اولین <section> بخش «دربارهٔ من» است: یک <h2>، یک پاراگراف که تویش یک تکه را با <strong> مهم و یک تکه را با <em> تأکید می‌کنی (معنا، نه ظاهر — فصل ۲)، و یک عکس داخل <figure> با alt معنادار و width/height که نگذارد صفحه هنگام آمدنِ عکس بپرد (فصل ۴):
<section id="about">
<h2>دربارهٔ من</h2>
<p>
سلام! من سارا هستم. <strong>عاشق ساختن چیزهای تازه‌ام</strong> و
این روزها یاد می‌گیرم یک صفحهٔ وب را <em>از صفر</em> بنویسم.
</p>
<figure>
<img src="https://picsum.photos/id/1005/600/400"
alt="سارا پشت میز نشسته و روی لپ‌تاپ کار می‌کند"
width="600" height="400">
<figcaption>پشت میزِ همیشگی‌ام، وسط یادگیری HTML.</figcaption>
</figure>
</section>
💡 نکته: این عکس فقط یک عکسِ نمونه است تا جایش را نگه دارد. وقتی عکسِ خودت را گذاشتی،
altرا هم مطابقش عوض کن تا واقعاً همان چیزی را بگوید که در عکس هست — چون تنها تو می‌دانی عکسِ خودت چه نشان می‌دهد.
بخش دوم، «چیزهایی که بلدم»: یک <ul> از مهارت‌ها (ترتیب مهم نیست)، یک <ol> از مسیر یادگیری‌ات (اینجا ترتیب مهم است، فصل ۵)، و یک جدولِ کوچکِ داده — چون سطحِ هر زبان یک تقاطعِ معنادار است (فصل ۷):
<section id="skills">
<h2>چیزهایی که بلدم</h2>
<ul>
<li>نوشتن HTML معتبر و semantic</li>
<li>ساختن فهرست و جدول و فرم</li>
<li>نوشتن متن جایگزین (alt) درست برای تصویر</li>
</ul>
<h3>مسیر یادگیری‌ام تا اینجا</h3>
<ol>
<li>اسکلت صفحه و متن</li>
<li>پیوند و تصویر</li>
<li>فهرست، جدول و فرم</li>
<li>دسترس‌پذیری و همین پروژه</li>
</ol>
<table>
<caption>زبان‌هایی که یاد گرفته‌ام</caption>
<thead>
<tr>
<th scope="col">زبان</th>
<th scope="col">سطح</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>خوب</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>تازه شروع کرده‌ام</td>
</tr>
</tbody>
</table>
</section>
به ترتیبِ heading دقت کن: زیرِ <h2>ی این بخش، «مسیر یادگیری» یک <h3> است، چون زیرمجموعهٔ همین بخش است — نه یک <h2> تازه. این همان ترتیبِ درستِ heading است که در فصل ۹ دیدی: هیچ سطحی را نپر.
✅ چک کن: بخش «دربارهٔ من» با عکس و توضیح، و بخش «مهارت‌ها» با یک فهرست نقطه‌ای، یک فهرست شماره‌دار، و یک جدولِ دوستونی را می‌بینی. حالا برگرد بالا و روی «دربارهٔ من» در منو کلیک کن — این‌بار صفحه می‌پرد پایین سرِ همان بخش. لینک‌های منو زنده شدند.
۴. فرم تماس، و یک چالش سرِ راه
اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.
چالش: اطلاعات تماس، جدول یا فهرست؟
اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.
۵. صفحهٔ کامل، و اعتبارسنجی با validator#
حالا همه‌چیز کنار هم است. ولی «روی صفحه درست به‌نظر می‌رسد» کافی نیست — از فصل ۱ می‌دانی HTML خراب معمولاً فریاد نمی‌زند، فقط بی‌سروصدا کار نمی‌کند. پس قبل از اینکه به صفحه‌ات اعتماد کنی، بگذار یک ماشین چکش کند.
اول ابزارِ همیشگی: روی صفحه راست‌کلیک کن و View Source را بزن. این همان کاری است که در فصل ۱ کردی — کلِ HTML ای که مرورگر گرفته را خام نشانت می‌دهد. حالا ابزارِ تازه: یک validator. validator برنامه‌ای است که HTML تو را می‌خواند و می‌گوید کجا قانونِ HTML را شکسته‌ای — تگِ بسته‌نشده، id تکراری، alt جاافتاده. رسمی‌ترینش روی نشانیِ validator.w3.org است؛ آنجا گزینه‌ای برای چسباندنِ کد (Validate by Input) دارد، پس حتی بدونِ اینکه صفحه‌ات روی اینترنت باشد می‌توانی کلِ کد را کپی کنی و بچسبانی.
بیا فرض کنیم موقعِ ساختنِ بخشِ تماس، آن را با کپی‌کردنِ بخشِ «دربارهٔ من» ساخته‌ای و یادت رفته id را عوض کنی. یعنی حالا دو جای صفحه id="about" دارند:
<section id="about">
<h2>دربارهٔ من</h2>
...
</section>
...
<section id="about"> <!-- eshtebah: bayad "contact" bashad -->
<h2>تماس با من</h2>
...
</section>
روی صفحه هیچ‌چیز عجیبی نمی‌بینی — دو بخش سرِ جایشان‌اند. ولی دو چیز پنهانی خراب است. اول، در منو روی «تماس با من» کلیک کن (که href="#contact" است): هیچ اتفاقی نمی‌افتد، چون هیچ عنصری id="contact" ندارد؛ هر دو about شده‌اند. این همان پرشِ به‌ناکجای فصل ۳ است. دوم، کد را در validator بچسبان. یک خطای روشن می‌گیری:
Error: Duplicate ID "about".
Error: The first occurrence of ID "about" was here.
validator دقیقاً همان چیزی را گفت که چشم ندید: یک id نباید در صفحه دوبار بیاید، چون id قرار است یکتا باشد (فصل ۳ و ۸). درستش کن: id بخشِ دوم را از about به contact عوض کن. حالا هم لینکِ «تماس با من» درست می‌پرد، هم دوباره که کد را بچسبانی، پیام سبز می‌بینی: صفر خطا.
🔧 اگر کار نکرد:
validatorخطای دیگری داد؟ رایج‌ترین‌ها را بشناس —Unclosed elementیعنی یک تگ را نبسته‌ای (مثلاً</section>جا افتاده)؛An img element must have an alt attributeیعنی یک عکسaltندارد؛Stray end tagیعنی یک تگِ بسته‌ی اضافه داری. هر خطا شمارهٔ خط را هم می‌دهد؛ برو سرِ همان خط و با متنِ خطا مقایسه کن.
این نسخهٔ نهایی و معتبرِ صفحه است — با id های یکتا و صفر خطا:
<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>سارا رضایی — صفحهٔ معرفی</title>
</head>
<body id="top">
<header>
<h1>سارا رضایی</h1>
<p>تازه دارم ساختن سایت را یاد می‌گیرم.</p>
<nav>
<ul>
<li><a href="#about">دربارهٔ من</a></li>
<li><a href="#skills">چیزهایی که بلدم</a></li>
<li><a href="#contact">تماس با من</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>دربارهٔ من</h2>
<p>
سلام! من سارا هستم. <strong>عاشق ساختن چیزهای تازه‌ام</strong> و
این روزها یاد می‌گیرم یک صفحهٔ وب را <em>از صفر</em> بنویسم.
</p>
<figure>
<img src="https://picsum.photos/id/1005/600/400"
alt="سارا پشت میز نشسته و روی لپ‌تاپ کار می‌کند"
width="600" height="400">
<figcaption>پشت میزِ همیشگی‌ام، وسط یادگیری HTML.</figcaption>
</figure>
</section>
<section id="skills">
<h2>چیزهایی که بلدم</h2>
<ul>
<li>نوشتن HTML معتبر و semantic</li>
<li>ساختن فهرست و جدول و فرم</li>
<li>نوشتن متن جایگزین (alt) درست برای تصویر</li>
</ul>
<h3>مسیر یادگیری‌ام تا اینجا</h3>
<ol>
<li>اسکلت صفحه و متن</li>
<li>پیوند و تصویر</li>
<li>فهرست، جدول و فرم</li>
<li>دسترس‌پذیری و همین پروژه</li>
</ol>
<table>
<caption>زبان‌هایی که یاد گرفته‌ام</caption>
<thead>
<tr>
<th scope="col">زبان</th>
<th scope="col">سطح</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">HTML</th>
<td>خوب</td>
</tr>
<tr>
<th scope="row">CSS</th>
<td>تازه شروع کرده‌ام</td>
</tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>تماس با من</h2>
<p>اگر خواستی چیزی بپرسی، این فرم را پر کن:</p>
<form>
<p>
<label for="name">نام تو</label>
<input type="text" id="name" name="name">
</p>
<p>
<label for="email">ایمیل</label>
<input type="email" id="email" name="email">
</p>
<p>
<label for="message">پیامت</label>
<textarea id="message" name="message"></textarea>
</p>
<p>
<button type="submit">بفرست</button>
</p>
</form>
<ul>
<li>ایمیل: [email protected]</li>
<li>شهر: تهران</li>
</ul>
</section>
</main>
<aside>
<h2>جاهای دیگری که هستم</h2>
<ul>
<li><a href="https://developer.mozilla.org/" target="_blank" rel="noopener">مستندات MDN که از آن یاد می‌گیرم</a></li>
<li><a href="https://www.w3.org/" target="_blank" rel="noopener">سایت W3C، خانهٔ استانداردهای وب</a></li>
</ul>
</aside>
<footer>
<p>ساختهٔ سارا رضایی — ۱۴۰۵</p>
<p><a href="#top">بازگشت به بالای صفحه</a></p>
</footer>
</body>
</html>
✅ چک کن: کلِ صفحه را می‌بینی — سرصفحه، سه بخش، حاشیه، پاصفحه — و validator صفر خطا می‌دهد. همین حالا یک صفحهٔ واقعی و معتبر ساختی، فقط با HTML.
۶. بازرسی با DevTools و چکِ دسترس‌پذیری#
validator گفت کدت قانونی است. حالا با ابزارِ آخر، خودت صفحه را از تو بازرسی کن. DevTools مجموعه‌ابزاری است که داخلِ خودِ مرورگر پنهان است و با آن می‌توانی صفحه را از پشتِ پرده ببینی. بازش کن: روی هر چیزی راست‌کلیک کن و Inspect را بزن (یا کلید F12). پنلی که باز می‌شود و درختِ عناصرِ صفحه را نشان می‌دهد، پنلِ Elements است — یعنی نمایشِ زندهٔ همان HTML، همان‌طور که مرورگر الان می‌بیندش.
حالا سه چکِ دسترس‌پذیری فصل ۹ را با Elements انجام بده:
- landmark ها: در درخت،
<main>را پیدا کن و بازش کن. باید سه<section>تویش باشد.<header>،<nav>،<aside>و<footer>هم باید هرکدام سرِ جای خودشان باشند. اینها همان ناحیه‌هایی‌اند که کاربرِ screen reader بینشان می‌پرد. - ترتیب heading: در درخت از بالا به پایین heading ها را دنبال کن. باید ببینی: یک
<h1>، بعد چند<h2>، و زیرِ بخشِ مهارت‌ها یک<h3>. هیچ‌جا از<h2>مستقیم به<h4>نپریده‌ای. ترتیب سالم است. - پیمایش با Tab: پنل را ببند، یک بار روی صفحه کلیک کن، بعد پشتِ‌سرِ هم
Tabبزن. تمرکز باید مرتب از لینک به لینک، بعد به کادرهای فرم و آخر به دکمه برود — و هر جا هست، حلقه‌ای دورش ببینی. اگر با Tab به همه‌جا می‌رسی، صفحه‌ات با صفحه‌کلید قابل استفاده است.
نکتهٔ بزرگِ فصل ۹ اینجا خودش را نشان می‌دهد: تو هیچ کارِ اضافه‌ای برای دسترس‌پذیری نکردی. همین‌که هر ناحیه را با tag درستش ساختی، هر <img> را alt دادی و هر <input> را <label>، نصفِ بیشترِ کارِ دسترس‌پذیری همان‌جا انجام شد. semantic HTML این را مجانی به تو داد.
💡 نکته: در
Elementsمی‌توانی روی متن‌ها دوبار کلیک کنی و زنده عوضشان کنی — ولی این تغییرها فقط در همین نمایش‌اند و با یک refresh می‌پرند.DevToolsبرای دیدن و آزمایش‌کردن است، نه برای ذخیرهٔ تغییر؛ تغییرِ واقعی باید در خودِ فایل باشد.
و حالا آخرین ابزارِ این فصل — خودِ AI، این‌بار در نقشِ بازبین:
🤖 با AI: حالا که صفحه را خودت ساختی و می‌فهمی، AI یک جفت‌چشمِ دومِ عالی است. کلِ HTML ات را به دستیار AI ات بده و بپرس: «این صفحه را از نظر semantic و accessibility نگاه کن — جایی مانده که tag بهترش هست؟ عکسی بدونِ
altیا ورودی‌ای بدونِ<label>جا مانده؟». بعد هر پیشنهادش را خودت درDevToolsچک کن؛ اگر گفت یکaltجا افتاده، درElementsبرو ببین راست می‌گوید یا نه. این کاربردِ درستِ AI است، چون کدی را بازبینی می‌کند که خودت نوشتی و می‌فهمی. کاربردِ غلط این بود که از همان اول بگویی «یک صفحهٔ معرفی برایم بساز» — قبل از اینکه بتوانی خروجی را بخوانی، که همان تله‌ای است که فصل‌های قبل ازش حرف زدیم. یادت باشد: اول خودت، بعد AI؛ خط به خط؛ و AI هم اشتباه می‌کند — پس هر چیزی که گفت را با چیزی که درDevToolsمی‌بینی چک کن.
واژه‌های تازهٔ این فصل#
این فصل tag تازه ندارد؛ فقط سه ابزار تازه:
| کلمه | تلفظ به حروف فارسی | یعنی چه |
|---|---|---|
| View Source | ویو سورس | گزینهٔ مرورگر که کلِ کدِ HTML خامِ یک صفحه را نشان می‌دهد |
| validator | ولیدِیتور | ابزاری که HTML را می‌خواند و می‌گوید کجا قانون را شکسته‌ای (روی validator.w3.org) |
| DevTools | دِوتولز | ابزارهای داخلِ مرورگر برای دیدن و آزمایشِ زندهٔ صفحه (با Inspect یا F12) |
| Elements | اِلِمِنتس | پنلی در DevTools که درختِ زندهٔ عناصرِ صفحه را نشان می‌دهد |
تمرین‌ها
اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.
در فصل بعد#
اینجا ترم ۱ تمام می‌شود. یک صفحهٔ کامل، معتبر، semantic و دسترس‌پذیر داری — و به‌عمد بی‌رنگ و ساده. این تارِ پارچه است: ساختار و معنا. ترم ۲ پودِ آن را می‌بافد: CSS. یاد می‌گیری همین صفحه را رنگ بدهی، فاصله‌بندی کنی، فونتش را عوض کنی و از این تودهٔ سیاه‌وسفید یک چیزِ واقعاً زیبا بسازی — بدونِ اینکه حتی یک tag از این ساختارِ درست را دست بزنی. تارت محکم است؛ حالا وقتِ پود است.
به آخر این فصل رسیدی!
اگر ساختی و جواب داد، این دکمه مال توست.