اولین صفحهٔ وب تو — ترم ۱ آیرو

در این فصل چه می‌سازی#

آخر این فصل یک فایل داری که وقتی بازش می‌کنی، مرورگر یک صفحهٔ واقعی نشانت می‌دهد — با یک عنوان روی tab مرورگر، یک تیتر بزرگ، و چند خط متن. همان چیزی که هر سایتی روی زمین از آن ساخته شده.

صفحهٔ ساده‌ای که در این فصل می‌سازیم، باز شده در مرورگر

آخر این فصل می‌توانی:

بگویی وقتی یک آدرس را باز می‌کنی، مرورگر دقیقاً چه کاری انجام می‌دهد
یک فایل .html بسازی و در مرورگر بازش کنی
اسکلت پایهٔ هر صفحهٔ HTML را از حفظ بنویسی
بگویی فرق <head> و <body> چیست و چرا این فرق مهم است

قبل از شروع#

هیچ چیزی لازم نیست جز یک مرورگر. همهٔ تمرین‌های این خودآموز در آزمایشگاه داخل همین سایت اجرا می‌شوند، پس می‌توانی از همین حالا شروع کنی بدون اینکه چیزی نصب کنی.

ولی وقتی خواستی روی کامپیوتر خودت کار کنی و پروژهٔ واقعی بسازی، بهترین ابزار VS Code است — یک ویرایشگر کد رایگان از مایکروسافت که تقریباً همهٔ برنامه‌نویس‌های وب از آن استفاده می‌کنند. رنگ‌بندی کد، تشخیص خطا و هزار امکان دیگر دارد. از code.visualstudio.com می‌گیری‌اش. یک ویرایشگر متن خیلی ساده مثل Notepad هم کار می‌کند، ولی VS Code کار را خیلی راحت‌تر می‌کند.

💡 نکته: فعلاً لازم نیست چیزی نصب کنی. آزمایشگاهِ همین صفحه برای کل این خودآموز کافی است. VS Code را هر وقت خواستی جدی‌تر کار کنی نصب کن.

۱. وقتی یک صفحه باز می‌شود، چه اتفاقی می‌افتد؟#

فرض کن آدرس یک سایت را می‌زنی و Enter. در آن یک لحظه سه چیز اتفاق می‌افتد:

مرورگر می‌رود سراغ کامپیوتری که آن سایت روی آن است و می‌گوید «فایلت را بده».
آن کامپیوتر یک فایل متنی پس می‌فرستد. فقط متن. نه عکس، نه صفحه، نه چیز جادویی — متن.
مرورگر آن متن را می‌خواند و از رویش صفحه را می‌سازد.

قدم سوم مهم‌ترین چیزی است که در این خودآموز یاد می‌گیری. صفحه‌ای که می‌بینی از قبل وجود نداشته؛ مرورگر همان لحظه از روی یک متن ساختش.

آن متن به یک زبان نوشته شده که اسمش HTML است. HTML به مرورگر نمی‌گوید «این را آبی کن» یا «این را وسط بگذار». HTML یک کار می‌کند و فقط همان یک کار: می‌گوید هر تکه از این متن چه چیزی هست. این تیتر است. این پاراگراف است. این لینک است.

💡 نکته: همین حالا روی هر سایتی راست‌کلیک کن و View Page Source را بزن. آن متنی که می‌بینی دقیقاً همان چیزی است که مرورگر گرفته. هر سایتی که تا حالا دیده‌ای، از چنین متنی ساخته شده.

مرورگر چطور می‌فهمد کدام تکه چیست؟ با علامت‌هایی که دورشان می‌گذاریم. به این علامت‌ها tag می‌گویند و شکلشان این است:

<p>این یک پاراگراف است.</p>

یک tag باز (<p>)، محتوا، و یک tag بسته (</p>) که فقط یک / اضافه دارد. به مجموعهٔ این سه‌تا با هم یک element می‌گویند.

۲. اولین صفحهٔ واقعی#

بیا همین حالا یکی بسازیم. در آزمایشگاه این را بنویس:

<h1>سلام!</h1>
<p>این اولین صفحهٔ من است.</p>

<h1> یعنی «مهم‌ترین تیتر این صفحه». <p> یعنی «یک پاراگراف».

✅ چک کن: باید دو خط ببینی — یکی بزرگ و ضخیم، یکی معمولی. اگر tag ها را به‌جای متن می‌بینی (یعنی خودِ <h1> روی صفحه نوشته شده)، احتمالاً < را جا انداخته‌ای.

حالا دقت کن به چیزی که نگفتیم: هیچ‌جا ننوشتیم تیتر بزرگ باشد یا ضخیم. فقط گفتیم «این تیتر است». بزرگ و ضخیم بودنش تصمیم پیش‌فرض مرورگر بود.

این نکته را نگه دار، چون کل فلسفهٔ این خودآموز است: HTML می‌گوید چیزی چه هست، نه اینکه چه شکلی باشد. شکل کار CSS است که از ترم ۲ شروع می‌شود.

⚠️ مواظب باش: هیچ‌وقت <h1> را برای «بزرگ کردن متن» انتخاب نکن. اگر متنی تیتر نیست ولی می‌خواهی بزرگ باشد، جوابش CSS است نه tag اشتباه. مرورگرها، موتورهای جست‌وجو و screen reader ها همه به این معنا تکیه می‌کنند.

چالش: اگر یک tag را نبندی چه می‌شود؟

اول خودت فکر کن یا امتحان کن — بعد اینجا را باز کن.

۳. اسکلت کامل یک صفحه#

آن دو خطی که نوشتیم کار کرد، ولی یک صفحهٔ واقعی و کامل نبود. یک صفحهٔ درست این اسکلت را دارد:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>اولین صفحهٔ من</title>
  </head>
  <body>
    <h1>سلام!</h1>
    <p>این اولین صفحهٔ من است.</p>
  </body>
</html>

خط به خط:

<!DOCTYPE html> — به مرورگر می‌گوید «این یک صفحهٔ HTML امروزی است». همیشه اولین خط. هیچ‌وقت عوضش نکن.
<html> — همهٔ صفحه داخل این می‌رود.
lang="fa" — می‌گوید زبان این صفحه فارسی است. dir="rtl" می‌گوید از راست به چپ خوانده می‌شود.
<head> — اطلاعاتی دربارهٔ صفحه. روی صفحه دیده نمی‌شود.
<meta charset="UTF-8"> — بدون این، حروف فارسی به هم می‌ریزند.
<title> — چیزی که روی tab مرورگر می‌نویسد.
<body> — هر چیزی که واقعاً روی صفحه دیده می‌شود.

✅ چک کن: روی tab مرورگر باید بنویسد «اولین صفحهٔ من». اگر هنوز اسم فایل یا Untitled می‌نویسد، <title> را جا انداخته‌ای یا اشتباه داخل <body> گذاشته‌ای.

🤖 با AI: از دستیار AI ات بپرس «<!DOCTYPE html> دقیقاً چه کار می‌کند؟». جوابش را بخوان، ولی همین‌جا اولین عادت این خودآموز را تمرین کن: جواب AI را با چیزی که خودت می‌بینی چک کن. در آزمایشگاه این خط را یک بار پاک کن و نتیجه را نگاه کن، بعد برش گردان. آنچه با چشم خودت دیدی از هر توضیحی معتبرتر است. یادت باشد: AI هم اشتباه می‌کند — مخصوصاً بعداً سرِ CSS، که این را با هم خواهیم دید.

💡 نکته: تورفتگی (فاصله‌های اول خط) برای مرورگر هیچ معنایی ندارد. برای تو است. وقتی کد تودرتو می‌شود، تورفتگی تنها چیزی است که نشان می‌دهد چه چیزی داخل چه چیزی است. از همین اولین روز مرتب بنویس.

۴. چرا `<head>` مهم است وقتی دیده نمی‌شود#

<head> عجیب‌ترین بخش برای تازه‌کارهاست: چیزی داخلش می‌گذاری و هیچ اتفاقی روی صفحه نمی‌افتد. پس چرا هست؟

چون همه‌چیز فقط برای چشم آدم نیست. <title> روی tab می‌نشیند، در نتایج جست‌وجو به‌عنوان عنوان لینک استفاده می‌شود، و وقتی کسی صفحه‌ات را bookmark کند همان اسم ذخیره می‌شود. lang="fa" به screen reader می‌گوید متن را با لهجهٔ فارسی بخواند، نه انگلیسی.

پس <head> جایی است که به ماشین‌ها حرف می‌زنی: مرورگر، موتور جست‌وجو، screen reader.

🔧 اگر کار نکرد: حروف فارسی به شکل علامت‌های عجیب مثل Ø³Ù„Ø§Ù… دیده می‌شوند؟ یعنی <meta charset="UTF-8"> یا نیست یا داخل <head> نیست. اگر هست و باز هم به‌هم‌ریخته است، فایل را با encoding به‌نام UTF-8 دوباره ذخیره کن — بعضی ویرایشگرهای قدیمی پیش‌فرضشان چیز دیگری است.

۵. حالا عمداً خرابش کن#

یاد گرفتن اینکه چیزی چطور خراب می‌شود، به اندازهٔ یاد گرفتن اینکه چطور کار می‌کند مهم است. در آزمایشگاه این تغییر را بده: <title> را از داخل <head> بردار و بگذار داخل <body>، درست قبل از <h1>.

نتیجه را نگاه کن. دو چیز اتفاق می‌افتد:

روی tab مرورگر دیگر عنوان درست نوشته نشده
ولی متن عنوان روی خود صفحه هم ظاهر نشد

یعنی نه اینجا کار کرد، نه آنجا. مرورگر خطا نداد، فقط بی‌سروصدا کار نکرد.

این رفتار را به خاطر بسپار: HTML خراب معمولاً فریاد نمی‌زند. بیشتر وقت‌ها فقط ساکت می‌شود. برای همین در همین فصل اول عادت می‌کنیم که بعد از هر ساخت، خودمان چک کنیم.

حالا <title> را برگردان سرِ جایش داخل <head> و ببین دوباره روی tab ظاهر شد.

✅ چک کن: عنوان دوباره روی tab هست و روی صفحه نیست. حالا دقیقاً می‌دانی هر کدام کجا زندگی می‌کنند.

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
HTML	اِچ‌تی‌اِم‌اِل	زبانی که ساختار و معنای صفحه را می‌نویسد
tag	تَگ	علامتی مثل `<p>` که دور محتوا می‌گذاریم
element	اِلِمِنت	tag باز + محتوا + tag بسته، با هم
attribute	اَتریبیوت	اطلاعات اضافه داخل tag باز، مثل `lang="fa"`
browser	براوزِر	برنامه‌ای که متن HTML را می‌خواند و صفحه می‌سازد

تمرین‌ها