آموزش HTML و CSS از صفر؛ اولین صفحه وب خود را قدم‌به‌قدم بسازید

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

HTML و CSS چیست و چه فرقی با هم دارند؟

یک ساختمان را تصور کنید. HTML (مخفف HyperText Markup Language) اسکلت آن است: کجا عنوان باشد، کجا پاراگراف، کجا فهرست و کجا لینک. HTML زبان برنامه‌نویسی نیست، بلکه زبان «نشانه‌گذاری» (Markup) است؛ با تگ‌ها به مرورگر می‌گوییم هر تکه از محتوا چیست.

CSS (مخفف Cascading Style Sheets) نما و دکوراسیون همان ساختمان است: رنگ‌ها، قلم‌ها، فاصله‌ها، گوشه‌های گرد و اینکه بخش‌ها کنار هم بنشینند یا زیر هم. سومین زبان وب یعنی جاوااسکریپت (JavaScript) هم رفتار صفحه را می‌سازد، مثل باز و بسته شدن منو؛ اما بدون HTML و CSS، جاوااسکریپت چیزی برای کار کردن ندارد. به همین دلیل همه مسیرهای آموزش طراحی سایت از همین دو زبان شروع می‌شوند.

برای شروع چه چیزی لازم دارید؟

• یک مرورگر مثل کروم یا فایرفاکس که همین حالا دارید.
• یک ویرایشگر کد؛ پیشنهاد ما VS Code است که رایگان است و فارسی را هم خوب نشان می‌دهد. حتی Notepad ویندوز هم برای شروع کافی است.
• یک پوشه خالی روی دسکتاپ، مثلاً با نام cafe، تا فایل‌ها را آنجا بسازیم.

نه اینترنت لازم است، نه سرور و نه نصب برنامه خاصی. فایل را ذخیره می‌کنید، دوبار رویش کلیک می‌کنید و مرورگر نتیجه را نشان می‌دهد.

قدم اول: اسکلت صفحه با HTML

در پوشه یک فایل به نام index.html بسازید و این کد را داخلش بنویسید. صفحه ما معرفی یک کافه خیالی در رشت به نام «کافه‌کتاب باران» است:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>کافه‌کتاب باران</title>
</head>
<body>
  <h1>کافه‌کتاب باران</h1>
  <p>یک کافه کوچک در رشت، برای روزهای بارانی و کتاب‌های خوب.</p>
  <h2>منوی امروز</h2>
  <ul>
    <li>چای لاهیجان</li>
    <li>کلوچه فومن</li>
    <li>قهوه دمی</li>
  </ul>
  <a href="https://kadoosedu.ir">ساخته‌شده در کلاس آموزشگاه کادوس</a>
</body>
</html>

بیایید خط‌به‌خط ببینیم چه نوشتیم:

• <!DOCTYPE html> به مرورگر می‌گوید این یک سند HTML5 است.
• lang="fa" و dir="rtl" زبان صفحه را فارسی و جهت آن را راست‌به‌چپ می‌کنند؛ مهم‌ترین نکته برای سایت فارسی.
• بخش head اطلاعاتی درباره صفحه دارد که مستقیم دیده نمی‌شود: کدگذاری حروف (UTF-8 تا فارسی درست نمایش داده شود)، تنظیم نمایش در موبایل و عنوانی که روی زبانه مرورگر می‌آید.
• بخش body همان چیزی است که کاربر می‌بیند: عنوان اصلی h1، پاراگراف p، عنوان فرعی h2، فهرست ul با آیتم‌های li و لینک a.

بیشتر تگ‌ها یک تگ باز و یک تگ بسته دارند، مثل <p> و </p>، و محتوا بین آن‌ها قرار می‌گیرد. فایل را ذخیره و در مرورگر باز کنید. نتیجه کار می‌کند، اما ساده و بی‌رنگ است؛ مرورگر فقط ظاهر پیش‌فرض خودش را نشان می‌دهد.

قدم دوم: ظاهر صفحه با CSS

حالا کنار index.html یک فایل دیگر به نام style.css بسازید و این کد را در آن بنویسید:

body {
  font-family: Vazirmatn, Tahoma, sans-serif;
  background-color: #fff7ed;
  color: #1f2937;
  max-width: 720px;
  margin: 40px auto;
  padding: 0 16px;
  line-height: 1.9;
}

h1 {
  color: #f97207;
}

ul {
  background-color: white;
  border-radius: 12px;
  padding: 16px 40px;
}

a {
  color: #f97207;
  font-weight: bold;
}

هر قانون CSS از یک انتخابگر (Selector) مثل body یا h1 و چند جفت «ویژگی: مقدار» داخل آکولاد ساخته می‌شود. برای اینکه HTML از این فایل خبردار شود، یک خط به داخل head اضافه کنید:

<link rel="stylesheet" href="style.css">

صفحه را دوباره باز کنید. بدون اینکه حتی یک کلمه از محتوا عوض شود، رنگ پس‌زمینه کرم، عنوان نارنجی، متن وسط‌چین با عرض مناسب و فهرست داخل یک کادر سفید با گوشه‌های گرد قرار می‌گیرد. max-width و margin: auto باعث می‌شوند متن در صفحه‌های عریض بیش از حد پهن نشود و line-height فاصله خطوط فارسی را خواناتر می‌کند.

قدم سوم: کارت‌های واکنش‌گرا با Flexbox

فهرست ساده کار می‌کند، اما سایت‌های امروزی محتوا را در «کارت» نشان می‌دهند. در index.html به‌جای ul این بخش را بگذارید:

<div class="menu">
  <div class="card"><h3>چای لاهیجان</h3><p>دم‌کرده و تازه</p></div>
  <div class="card"><h3>کلوچه فومن</h3><p>گردویی و گرم</p></div>
  <div class="card"><h3>قهوه دمی</h3><p>با شیر یا بدون شیر</p></div>
</div>

و به انتهای style.css این قوانین را اضافه کنید (قانون ul را هم می‌توانید پاک کنید):

.menu {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.card {
  flex: 1;
  background-color: white;
  border-radius: 16px;
  padding: 8px 16px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-4px);
}

@media (max-width: 600px) {
  .menu {
    flex-direction: column;
  }
}

اینجا سه مفهوم مهم را یک‌جا دیدید. اول، کلاس: نقطه قبل از .card یعنی این قانون روی همه عنصرهایی اعمال می‌شود که class="card" دارند. دوم، Flexbox: با display: flex فرزندان یک عنصر کنار هم می‌نشینند، gap فاصله بینشان را تعیین می‌کند و flex: 1 عرض را بین کارت‌ها مساوی تقسیم می‌کند. سوم، media query: قانون داخل @media فقط وقتی اجرا می‌شود که عرض صفحه ۶۰۰ پیکسل یا کمتر باشد؛ یعنی در موبایل کارت‌ها زیر هم قرار می‌گیرند. به این ویژگی می‌گویند طراحی واکنش‌گرا (Responsive)، و امروز بیشتر بازدید سایت‌ها از گوشی است. با :hover هم وقتی ماوس روی کارت می‌رود، کارت کمی بالا می‌آید.

HTML و CSS یاد بگیرم یا وردپرس؟

این سؤال را زیاد می‌شنویم. جواب کوتاه این است که این دو رقیب هم نیستند. با وردپرس می‌توانید بدون کدنویسی و سریع یک سایت یا فروشگاه کامل راه بیندازید؛ مناسب صاحبان کسب‌وکار و کسانی که سایت را برای فروش می‌خواهند. HTML و CSS اما پایه کار طراح و برنامه‌نویس وب‌اند: کسی که آن‌ها را بلد است، قالب وردپرس را هم راحت‌تر شخصی‌سازی می‌کند، مشکل ظاهری سایت را خودش پیدا می‌کند و بعداً به جاوااسکریپت، PHP یا پایتون و جنگو می‌رسد. اگر هنوز مردد هستید، مقاله وردپرس یا برنامه‌نویسی اختصاصی؟ را بخوانید.

مسیر آموزش HTML و CSS در آموزشگاه کادوس

آنچه در این مقاله ساختیم، فقط چند صفحه اول از دوره «طراحی صفحات وب با HTML و CSS» در مؤسسه فنی و آموزشی کادوس است. این دوره ۱۵ جلسه دارد، از صفر شروع می‌شود و هیچ جلسه‌ای از چیزی استفاده نمی‌کند که قبلاً توضیح داده نشده باشد:

• جلسه‌های ۱ تا ۶: ساختار سند، فهرست، لینک، تصویر، جدول و مسیر فایل؛ سپس پایه‌های CSS، مدل جعبه (Box Model)، انتخابگرها، قلم و تگ‌های معنایی.
• جلسه‌های ۷ تا ۱۳: Flexbox مقدماتی و پیشرفته، position و z-index، فرم‌ها، Grid، طراحی واکنش‌گرا و CSS پیشرفته مثل متغیرها، سایه، گرادیانت و transform.
• جلسه ۱۴: پروژه نهایی؛ یک سایت هفت‌صفحه‌ای کامل و واکنش‌گرا به نام «دبیرستان دانش» که در ده گام ساخته می‌شود.
• جلسه ۱۵: آشنایی با بوت‌استرپ (Bootstrap)، اولین برنامه‌های جاوااسکریپت و نقشه راه بعد از دوره.

کتاب شانزده‌فصلی همین دوره، نوشته مدرس دوره، به‌صورت رایگان در kadoosonline.github.io/HTML-CSS/book در دسترس است و فصل‌هایش دقیقاً با جلسه‌های کلاس یکی است. نمونه سؤالات تستی HTML و CSS برای آمادگی آزمون فنی و حرفه‌ای هم در همان کتاب قرار دارد. اگر این مقاله را دنبال کردید و صفحه کافه را ساختید، فصل یک تا سه کتاب برایتان آشنا خواهد بود.

ثبت‌نام در دوره طراحی سایت در رشت

اگر می‌خواهید طراحی سایت را اصولی، پروژه‌محور و کنار مدرس یاد بگیرید، دپارتمان کامپیوتر آموزشگاه کادوس در رشت این دوره‌ها را برگزار می‌کند:

• طراحی سایت با HTML و CSS: از صفر تا سایت هفت‌صفحه‌ای واکنش‌گرا.
• جاوااسکریپت و Ajax: قدم بعدی برای ساخت صفحه‌های تعاملی.
• وردپرس مقدماتی: راه‌اندازی سایت و فروشگاه بدون کدنویسی.

همه دوره‌های این مسیر را در صفحه آموزش طراحی سایت در رشت ببینید. برای مشاوره رایگان و ثبت‌نام با یکی از شعبه‌ها تماس بگیرید: شعبه مرکزی (خیابان لاکانی) با شماره ۰۱۳۹۱۰۰۲۳۴۳ و شعبه مسکن مهر با شماره ۰۱۳۹۱۰۰۲۳۲۳، یا از صفحه تماس با ما پیام بدهید.