آموزش HTML و CSS؛ شروع وب برای مبتدی‌ها

دانیال مرادی·۹ مهر ۱۴۰۵·6 دقیقه مطالعه

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

۱. اسکلت یک صفحه HTML

یک فایل به نام index.html بسازید و با ویرایشگری مثل VS Code باز کنید. برای فارسی، حتماً جهت راست‌به‌چپ را مشخص کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>اولین صفحه من</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>سلام دنیا</h1>
  <p>این اولین صفحه‌ی وب من است.</p>
  <a href="https://danyalcode.ir">یک لینک</a>
</body>
</html>

۲. تگ‌های معنایی

به‌جای استفاده از div برای همه چیز، از تگ‌هایی مثل header، nav، main، article و footer استفاده کنید. هم برای دسترس‌پذیری بهتر است و هم موتورهای جستجو ساختار صفحه را راحت‌تر می‌فهمند.

۳. اولین CSS

body {
  font-family: Tahoma, sans-serif;
  background: #0b1120;
  color: #f5f7fb;
  margin: 0;
  padding: 2rem;
}
h1 { color: #7c5cfc; }
a  { color: #4c8dff; }

۴. چیدمان با Flexbox

برای کنار هم قرار دادن عناصر، Flexbox ساده‌ترین ابزار است:

.cards {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.card { flex: 1 1 220px; padding: 1rem; border-radius: 12px; }

۵. ریسپانسیو بودن

سایت شما باید روی موبایل هم درست دیده شود. تگ viewport در head و استفاده از واحدهای نسبی (rem، %) و @media کار را پیش می‌برد.

قدم بعد: با جاوااسکریپت به صفحه‌تان تعامل اضافه کنید.