یک صفحه وب از چه چیزهایی ساخته می‌شود؟
برای ساخت اولین صفحه، سه نقش را جدا ببینید: HTML محتوا و ساختار را مشخص می‌کند، CSS ظاهر و چیدمان را می‌سازد و JavaScript رفتار را اضافه می‌کند. در این درس یک صفحه فارسی می‌سازید، شکل آن را تغییر می‌دهید و یک چیدمان کارت را آزمایش می‌کنید. لازم نیست از قبل فریم‌ورک یا ترمینال بلد باشید.
مرورگر فایل را می‌خواند و آن را به صفحه قابل استفاده تبدیل می‌کند. چیزی که در پیش‌نمایش می‌بینید نتیجه تفسیر کد است؛ اگر یک ویژگی را تغییر دهید، می‌توانید اثرش را ببینید. برای یادگیری، هر بار فقط یک تغییر انجام دهید تا رابطه علت و نتیجه روشن بماند.
اولین HTML فارسی
با دکمه «امتحان کنید» محیط ویرایش باز می‌شود. فایل index.html شامل زبان، جهت، عنوان مرورگر و محتوای اصلی است. lang="fa" زبان را به مرورگر و ابزارهای کمکی معرفی می‌کند و dir="rtl" جهت پایه را تعیین می‌کند. این دو ویژگی نقش متفاوت دارند.
عنوان اصلی را با h1 بنویسید، نه با یک div که فقط فونت بزرگی دارد. برای پاراگراف از p و برای یک عمل داخل صفحه از button استفاده کنید. اگر قرار است کاربر به آدرس دیگری برود، لینک a مناسب‌تر است. معنا را با HTML بیان کنید و اندازه را به CSS بسپارید.
اولین صفحه فارسی
عنوان و پاراگراف را تغییر دهید و نتیجه را همین‌جا ببینید.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اولین صفحه من</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<h1>سلام، وب!</h1>
<p>اولین صفحه‌ام را خودم می‌سازم.</p>
<button type="button">شروع کنیم</button>
</main>
</body>
</html>یک راهنمایی می‌خواهم
عنوان اصلی را با h1 بنویسید؛ اندازه آن را با CSS تغییر دهید.
راهنمایی بیشتر
ویژگی dir="rtl" را روی html قرار دهید.
تمرین: متن عنوان را به نام پروژه خود تغییر دهید. یک پاراگراف دوم اضافه کنید. سپس آزمون‌ها را اجرا کنید و بررسی کنید صفحه هنوز یک عنوان اصلی دارد. عبور از آزمون‌ها فقط چند شرط این درس را بررسی می‌کند، نه کیفیت کامل صفحه را.
CSS را از محتوا جدا کنیم
در درخت فایل‌ها، style.css را باز کنید. font-family قلم را انتخاب می‌کند و line-height فاصله خط‌ها را کنترل می‌کند. padding فضای داخل عنصر است. margin:auto روی یک عنصر با عرض محدود می‌تواند آن را در محور افقی وسط قرار دهد. نتیجه به شیوه چیدمان والد هم وابسته است.
حالا padding بدنه را تغییر دهید و دوباره اجرا کنید. سپس max-width را کمتر کنید. نباید برای جاگرفتن متن در یک کادر، معنا و ترتیب عنوان‌ها را عوض کنید. یک h2 می‌تواند با CSS کوچک‌تر از متن برجسته دیگری باشد؛ نقش آن در ساختار سند را اندازه ظاهری تعیین نمی‌کند.
از یک ستون تا چند ستون
عرض ثابت برای همه دستگاه‌ها مناسب نیست. در مثال بعد، Grid با توجه به فضای موجود تعداد ستون‌ها را تنظیم می‌کند. auto-fit و minmax به کارت‌ها اجازه می‌دهند بدون شکستن عرض صفحه کنار هم قرار بگیرند. min(100%, 160px) هم از حداقل عرض بزرگ‌تر از والد جلوگیری می‌کند.
چیدمان واکنش‌گرا با Grid
تعداد ستون‌ها و فاصله را تغییر دهید؛ پیش‌نمایش در همین صفحه به‌روز می‌شود.
<!doctype html>
<html lang="fa" dir="rtl">
<head><meta charset="utf-8"><link rel="stylesheet" href="layout.css"></head>
<body>
<main class="cards">
<article><h2>HTML</h2><p>ساختار صفحه</p></article>
<article><h2>CSS</h2><p>ظاهر و چیدمان</p></article>
<article><h2>JavaScript</h2><p>رفتار صفحه</p></article>
</main>
</body>
</html>یک راهنمایی می‌خواهم
display: grid را روی والد کارت‌ها قرار دهید.
راهنمایی بیشتر
برای حفظ خوانایی در موبایل، از auto-fit و minmax استفاده کنید.
تمرین: gap را از ۱۶ به ۲۴ پیکسل تغییر دهید. اندازه پیش‌نمایش یا پنجره را کم کنید. به جای نگاه‌کردن فقط به تعداد ستون‌ها، خوانایی عنوان، فاصله دکمه و وجود اسکرول افقی را هم بررسی کنید. طراحی واکنش‌گرا صرفاً کوچک‌کردن فونت نیست.
پیش از انتشار چه چیزی را بررسی کنیم؟
- متن فارسی و عبارت انگلیسی با هم درست نمایش داده شوند.
- عنوان‌ها ترتیب منطقی داشته باشند و فرم بدون برچسب نباشد.
- با Tab به کنترل‌ها برسید و جای فوکوس را ببینید.
- تصویر، عرض و ارتفاع مشخص داشته باشد تا بارگذاری آن صفحه را جابه‌جا نکند.
- در عرض کم، جدول یا کد داخل محدوده خودش اسکرول شود.
این پیش‌نمایش برای تمرین HTML و CSS محدود شده است؛ فرم و اسکریپت دلخواه در آن اجرا نمی‌شود. برای تمرین منطق JavaScript، محیط جداگانه Worker داریم. در یک پروژه واقعی، فایل‌ها، سرور، مسیرها و امنیت هم باید با ابزار مناسب بررسی شوند.
قدم بعدی را از روی نیاز انتخاب کنید
اول ساختار صفحه را بدون نگاه به نمونه دوباره بسازید. بعد به درس چیدمان CSS بروید و همان صفحه را برای موبایل اصلاح کنید. وقتی تابع، شرط و رویداد را شناختید، افزودن رفتار با JavaScript معنی پیدا می‌کند. React و Tailwind بعد از این پایه‌ها راحت‌تر فهمیده می‌شوند.