🌐

آموزش مقدماتی طراحی سایت

در کمتر از ۲۰ دقیقه، مفاهیم پایه HTML، CSS و JavaScript را یاد بگیرید. و اولین صفحهٔ وب خود را بسازید!

۲۰ دقیقه مقدماتی رایگان
پیشرفت یادگیری: ۰ از ۶ مفهوم ۰٪

۱ طراحی سایت چیست؟

طراحی سایت یعنی ساخت صفحاتی که در مرورگر نمایش داده می‌شوند. هر صفحهٔ وب از سه لایهٔ اصلی تشکیل شده:

  • HTML — ساختار و محتوا (استخوان‌بندی صفحه)
  • CSS — ظاهر و طراحی (رنگ، فونت، چیدمان)
  • JavaScript — تعامل و رفتار (کلیک، انیمیشن، منطق)
تشبیه ساده: HTML = اسکلت خانه، CSS = رنگ و دکوراسیون، JavaScript = برق و لوله‌کشی که خانه را زنده می‌کند.

۲ HTML — ساختار صفحه

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

<!-- ساختار یک صفحه HTML -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <title>صفحه من</title>
</head>
<body>
    <h1>سلام دنیا!</h1>
    <p>این اولین صفحهٔ من است.</p>
</body>
</html>

تگ‌های پرکاربرد:

  • <h1> تا <h6> — عنوان‌ها
  • <p> — پاراگراف
  • <a> — لینک
  • <img> — تصویر
  • <div> — بخش‌بندی
  • <ul>, <ol> — لیست‌ها
نکته: هر تگ باز باید تگ بسته داشته باشد (مثل <p>...</p>). به‌جز تگ‌های خودبسته مثل <img> و <br>.

۳ CSS — ظاهر و طراحی

CSS (Cascading Style Sheets) زبان استایل‌دهی به صفحات وب است. با CSS رنگ، فونت، اندازه، فاصله و چیدمان را کنترل می‌کنیم.

/* انتخاب‌گر و ویژگی‌ها */
h1 {
    color: #16a34a;
    font-size: 2rem;
    text-align: center;
}

p {
    color: #475569;
    line-height: 1.8;
}

/* کلاس (class) */
.highlight {
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 8px;
}

سه روش اتصال CSS به HTML:

  • Inline: style="color: red" در خود تگ
  • Internal: <style> در <head>
  • External: فایل جدا (style.css) — بهترین روش
نکته: CSS با انتخاب‌گر (selector) کار می‌کند: h1 (تگ)، .class (کلاس)، #id (آی‌دی).

۴ JavaScript — تعامل و رفتار

JavaScript زبان برنامه‌نویسی مرورگر است که صفحات را زنده می‌کند: کلیک، انیمیشن، اعتبارسنجی فرم، دریافت داده از سرور و...

// تعریف متغیر
let name = "علی";
const age = 20;

// تابع
function greet(name) {
    return `سلام، ${name}!`;
}

// فراخوانی
console.log(greet("مریم"));
// خروجی: سلام، مریم!

// تعامل با صفحه
document.getElementById("myBtn").addEventListener("click", () => {
    alert("دکمه کلیک شد!");
});
نکته: JavaScript در مرورگر اجرا می‌شود، نه روی سرور. برای ارتباط با سرور از fetch() استفاده می‌شود.

۵ ساخت اولین صفحهٔ وب

حالا که سه زبان را شناختید، بیایید یک صفحهٔ کامل بسازیم. کافی است این کد را در یک فایل با پسوند .html ذخیره کنید و در مرورگر باز کنید.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>اولین صفحهٔ من</title>
    <style>
        body { font-family: Tahoma; background: #f0fdf4; padding: 40px; }
        h1 { color: #16a34a; text-align: center; }
        p { color: #475569; line-height: 1.8; text-align: center; }
    </style>
</head>
<body>
    <h1>سلام دنیا! 🌍</h1>
    <p>این اولین صفحهٔ وب من است.</p>
    <button onclick="alert('سلام!')">روی من کلیک کن</button>
</body>
</html>

این صفحه شامل ساختار (HTML)، استایل (CSS) و تعامل (JavaScript) است.

۶ ابزارها و مسیر بعدی

ابزارهای ضروری برای شروع:

  • VS Code — ویرایشگر کد (رایگان و قدرتمند)
  • مرورگر مدرن — Chrome / Firefox / Edge
  • DevTools — ابزار توسعه‌دهنده (F12 در مرورگر)
  • Git — کنترل نسخه (برای پروژه‌های بزرگ)

مسیر یادگیری پیشنهادی:

  1. HTML و CSS پایه
  2. JavaScript پایه
  3. طراحی واکنش‌گرا (Responsive)
  4. یک فریم‌ورک (React یا Vue)
  5. ارتباط با سرور (API)
نکته: بهترین راه یادگیری، پروژه ساختن است. از همان روز اول یک صفحهٔ ساده بسازید و کم‌کم گسترش دهید.

شبیه‌ساز کد — همین‌جا امتحان کنید!

کد HTML و CSS بنویسید و روی «اجرا» کلیک کنید. نتیجه در پایین نمایش داده می‌شود.

نتیجه اینجا نمایش داده می‌شود...

آزمون کوتاه

۳ سوال — دانش خود را بسنجید!

۱) کدام زبان برای «ساختار» صفحهٔ وب استفاده می‌شود؟
الف CSS
ب HTML
ج JavaScript
۲) برای استایل‌دهی به یک تگ در CSS از چه چیزی استفاده می‌کنیم؟
الف انتخاب‌گر (Selector)
ب تگ <style>
ج دستور if
۳) کدام زبان برای «تعامل» در صفحه وب استفاده می‌شود؟
الف HTML
ب CSS
ج JavaScript