برای ساخت اولین صفحهٔ وب به هاست، دامنه یا یک چارچوب پیچیده نیاز ندارید. در این تمرین با دو فایل، یک صفحهٔ معرفی فارسی می‌سازید که سه کارت مهارت و یک منوی داخلی دارد. در پایان می‌توانید متن‌ها را تغییر دهید، چیدمان را توضیح دهید و صفحه را در موبایل بررسی کنید.
پیش‌نیاز: کار با پوشه‌ها، یک ویرایشگر متن ساده یا ویرایشگر کد و مرورگر. این آموزش از صفر شروع می‌شود؛ HTML ساختار محتوا را مشخص می‌کند و CSS ظاهر آن را.
مشاهدهٔ نتیجهٔ نهایی · دانلود فایل‌های پروژه
قدم اول: دو فایل کنار هم بسازید
پوشه‌ای با نام first-page بسازید و داخل آن دو فایل index.html و style.css ایجاد کنید. در ویندوز نمایش پسوند فایل‌ها را فعال کنید تا فایل به اشتباه با نام index.html.txt ذخیره نشود. نام‌ها و حروف کوچک را دقیقاً یکسان بنویسید؛ تفاوت حروف روی بعضی سرورها مهم است.
قدم دوم: ساختار صفحه را با HTML بنویسید
کد زیر را در فایل HTML ذخیره کنید و آن را با مرورگر باز کنید. فعلاً نداشتن ظاهر جذاب طبیعی است. باید تیتر معرفی، سه مهارت و لینک‌های منو را ببینید.
<!doctype html>
<html lang="fa" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, follow">
<title>اولین صفحهٔ وب من</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="container">
<p class="label">پروژهٔ تمرینی آکادمی گلجام</p>
<nav aria-label="منوی اصلی"><a href="#skills">مهارت‌ها</a> · <a href="#next">قدم بعدی</a></nav>
</header>
<main class="container">
<section class="hero">
<h1>سلام، من در حال یادگیری طراحی سایت هستم.</h1>
<p>این صفحهٔ آموزشی را با HTML و CSS ساخته‌ام.</p>
<a class="button" href="#skills">دیدن تمرین‌ها</a>
</section>
<section id="skills" aria-labelledby="skills-title">
<h2 id="skills-title">سه مهارتی که تمرین می‌کنم</h2>
<div class="cards">
<article><h3>ساختار</h3><p>محتوا را با HTML مرتب می‌کنم.</p></article>
<article><h3>ظاهر</h3><p>فاصله‌ها و رنگ‌ها را با CSS تنظیم می‌کنم.</p></article>
<article><h3>بررسی</h3><p>صفحه را در موبایل و با صفحه‌کلید امتحان می‌کنم.</p></article>
</div>
</section>
<section id="next"><h2>قدم بعدی من</h2><p>یک کارت تازه اضافه می‌کنم و دلیل انتخاب چیدمان را توضیح می‌دهم.</p></section>
</main>
<footer class="container"><a href="https://academy.goljaam.com/blog/html-css-first-web-page">بازگشت به آموزش</a></footer>
</body>
</html>چرا این بخش‌ها را نوشته‌ایم؟
- ویژگی‌های
lang="fa"وdir="rtl"زبان فارسی و جهت نمایش را مشخص می‌کنند. - کدگذاری
utf-8برای نمایش متن فارسی است. تنظیمviewportبه نمایش متناسب با عرض دستگاه کمک می‌کند. - در
headعنوان تب و مسیر فایل ظاهر قرار دارد؛ محتوای قابل مشاهده داخلbodyاست. - تیتر اصلی
h1موضوع صفحه و تیترهایh2بخش‌ها را معرفی می‌کنند. هر کارت یک تیترh3دارد. - مقصد
#skillsبه بخش دارایid="skills"می‌رود. چون عمل ما رفتن به یک بخش است، از لینک استفاده کرده‌ایم.
دستور noindex مخصوص همین نمونهٔ آموزشی است تا با مقاله رقابت نکند. هنگام ساخت صفحهٔ واقعی که می‌خواهید در گوگل دیده شود، آن را حذف کنید.
قدم سوم: ظاهر و چیدمان کارت‌ها را بسازید
کد زیر را در style.css قرار دهید. سپس فایل را ذخیره و صفحهٔ مرورگر را دوباره بارگذاری کنید.
* { box-sizing: border-box; }
body { margin: 0; background: #f4faf8; color: #193d48; font: 18px/1.9 Tahoma, sans-serif; }
.container { width: min(1100px, calc(100% - 32px)); margin-inline: auto; }
header, footer, section { padding-block: 24px; }
.hero { padding-block: 56px; }
h1 { font-size: clamp(28px, 4vw, 48px); line-height: 1.5; }
h2 { font-size: 26px; }
h3 { font-size: 21px; }
a, .label { color: #08786e; }
.button { display: inline-block; background: #08786e; color: white; padding: 10px 22px; border-radius: 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 20px; }
.cards article { background: white; border: 1px solid #cddfd9; border-radius: 16px; padding: 24px; }
a:focus-visible { outline: 3px solid #a34704; outline-offset: 5px; }با box-sizing فاصلهٔ داخلی و حاشیه در محاسبهٔ عرض جعبه در نظر گرفته می‌شوند. کلاس container حداکثر عرض محتوا را محدود می‌کند و در صفحهٔ کوچک از دو طرف فاصله می‌گذارد. به این ترتیب متن تا لبهٔ نمایشگر نمی‌چسبد.
در بخش کارت‌ها، grid ستون‌ها را می‌سازد. ترکیب auto-fit و minmax باعث می‌شود تعداد ستون‌ها با فضای موجود تغییر کند. عبارت min(100%, 16rem) نیز مانع می‌شود حداقل عرض کارت از ظرف کوچک‌تر صفحه بیشتر شود. ارتفاع ثابت تعیین نکرده‌ایم؛ محتوای بیشتر باید بتواند کارت را بلندتر کند.
قدم چهارم: صفحه را واقعاً بررسی کنید
- در عرض ۳۶۰ پیکسل کارت‌ها باید زیر هم باشند و کل صفحه اسکرول افقی نداشته باشد.
- در عرض ۱۲۸۰ پیکسل باید سه کارت کنار هم دیده شوند.
- کلید Tab را چند بار بزنید؛ لینک فعال باید کادر مشخص داشته باشد. با Enter آن را باز کنید.
- از منوی بالای صفحه روی «مهارت‌ها» بزنید؛ باید به بخش مربوط برسید.
- متن یکی از کارت‌ها را دو برابر کنید و مطمئن شوید بیرون نمی‌زند.
سه خطای رایج و راه پیدا کردن علت
ظاهر تغییر نمی‌کند: ابتدا ذخیره‌شدن CSS را بررسی کنید؛ سپس نام فایل و مقدار href را مقایسه کنید. ابزار توسعهٔ مرورگر در بخش Network نشان می‌دهد فایل ظاهر پیدا شده یا خطای 404 دارد.
فارسی به‌هم‌ریخته است: فایل را با کدگذاری UTF-8 ذخیره کنید و وجود متای charset را بررسی کنید. راست‌چین‌شدن به‌تنهایی مشکل کدگذاری را حل نمی‌کند.
لینک داخلی کار نمی‌کند: مقدار بعد از علامت # باید دقیقاً برابر شناسهٔ بخش مقصد باشد. شناسهٔ یکسان را برای دو بخش تکرار نکنید.
تمرین مستقل: صفحه را به نسخهٔ خودتان تبدیل کنید
متن معرفی را عوض کنید، کارت چهارم بسازید و بخشی با عنوان «برنامهٔ تمرین این هفته» اضافه کنید. لینک آن را در منو قرار دهید. سپس فایل CSS را موقتاً از صفحه جدا کنید و ببینید آیا ترتیب محتوا هنوز قابل فهم است. معیار موفقیت فقط شباهت ظاهری نیست؛ باید بتوانید علت انتخاب تگ‌ها و چیدمان را توضیح دهید.
بعد از HTML و CSS چه یاد بگیرم؟
این پروژه صفحه‌ای ثابت است و حساب کاربری، ارسال فرم یا ذخیرهٔ اطلاعات ندارد. برای مسیر بعدی، نقشه راه طراحی سایت را بخوانید. اگر به آموزش همراه با مدرس نیاز دارید، دسته‌بندی کلاس‌های حضوری شیراز یا دوره‌های آنلاین را با توجه به سرفصل و پیش‌نیاز انتخاب کنید.
منبع تکمیلی
برای مرور ساختار سند و کاربرد تگ‌ها، راهنمای رسمی آموزش HTML در MDN را ببینید. کد پروژه و تمرین‌های این مقاله برای آکادمی گلجام نوشته شده‌اند.