برنامه نویسی

HTML، CSS و JavaScript چیست؟ راهنمای کامل شروع برنامه نویسی وب

HTML، CSS و JavaScript سه تکنولوژی اصلی طراحی سایت هستند. در این آموزش به زبان ساده یاد می‌گیرید هر کدام چه کاری انجام می‌دهند و تفاوت آن‌ها چیست.

۱۴۰۵/۰۴/۳۱۱۵ دقیقه مطالعه

متن مقاله

HTML، CSS و JavaScript چیست؟ آشنایی با پایه‌های اصلی طراحی سایت

اگر قصد دارید وارد دنیای طراحی سایت یا برنامه‌نویسی وب شوید، اولین نام‌هایی که با آن‌ها روبه‌رو می‌شوید HTML، CSS و JavaScript هستند. تقریباً تمام وب‌سایت‌هایی که روزانه از آن‌ها استفاده می‌کنید، از ترکیب این سه تکنولوژی ساخته شده‌اند.

در این آموزش به زبان ساده یاد می‌گیرید HTML چیست، CSS چیست، JavaScript چیست و هر کدام چه نقشی در ساخت یک وب‌سایت دارند.

HTML چیست؟

HTML (HyperText Markup Language) زبان نشانه‌گذاری صفحات وب است و وظیفه‌ی ساختاردهی به محتوای سایت را بر عهده دارد.

به کمک HTML مشخص می‌کنیم که چه بخش‌هایی در صفحه وجود داشته باشند؛ مانند:

عنوان‌ها
متن‌ها
تصاویر
دکمه‌ها
فرم‌ها
لینک‌ها
جدول‌ها
ویدئوها

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

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>نمونه HTML</title>
</head>
<body>

  <h1>آموزش طراحی سایت</h1>

  <p>
    به اولین صفحه HTML خود خوش آمدید.
  </p>

  <img
    src="https://via.placeholder.com/300x180"
    alt="نمونه تصویر">

  <br><br>

  <a href="https://example.com">
    مشاهده آموزش‌های بیشتر
  </a>

  <br><br>

  <button>ثبت‌نام</button>

  <hr>

  <h2>فرم تماس</h2>

  <form>
    <input
      type="text"
      placeholder="نام شما">

    <br><br>

    <input
      type="email"
      placeholder="ایمیل">

    <br><br>

    <button type="submit">
      ارسال
    </button>
  </form>

</body>
</html>

CSS چیست؟

CSS (Cascading Style Sheets) مسئول ظاهر و طراحی صفحات وب است.

بعد از اینکه با HTML ساختار سایت را ایجاد کردیم، با CSS ظاهر آن را زیباتر می‌کنیم. برای مثال با CSS می‌توانیم:

رنگ‌ها را تغییر دهیم.
اندازه متن‌ها را تنظیم کنیم.
فاصله بین بخش‌های مختلف را مشخص کنیم.
فونت مناسب انتخاب کنیم.
صفحات را برای موبایل و تبلت واکنش‌گرا (Responsive) کنیم.
انیمیشن و افکت‌های ظاهری ایجاد کنیم.

اگر HTML اسکلت ساختمان باشد، CSS همان رنگ، دکوراسیون و طراحی داخلی آن است.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>

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

<body>

    <div class="card">
        <h1>CSS چیست؟</h1>

        <p>
            با CSS می‌توان ظاهر صفحات وب را طراحی و زیباتر کرد.
        </p>

        <button>
            شروع یادگیری
        </button>
    </div>

</body>
</html>

/* تنظیمات کلی صفحه */
* {
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;
}


/* طراحی کارت */
.card {
    width: 300px;
    padding: 25px;

    background-color: white;

    border-radius: 12px;

    text-align: center;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* عنوان */
h1 {
    color: #2563eb;
    font-size: 28px;
}


/* متن */
p {
    color: #555;
    line-height: 1.8;
}


/* دکمه */
button {
    background-color: #2563eb;

    color: white;

    padding: 12px 24px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: 0.3s;
}


/* افکت هنگام رفتن موس روی دکمه */
button:hover {
    background-color: #1d4ed8;
}

JavaScript چیست؟

JavaScript زبان برنامه‌نویسی صفحات وب است و باعث می‌شود سایت از حالت ثابت خارج شده و تعاملی شود.

بسیاری از قابلیت‌هایی که هنگام کار با وب‌سایت‌ها مشاهده می‌کنید، توسط JavaScript پیاده‌سازی می‌شوند؛ مانند:

باز و بسته شدن منوها
نمایش پیام‌ها
اعتبارسنجی فرم‌ها
اسلایدر تصاویر
جستجوی لحظه‌ای
دریافت اطلاعات از سرور
ساخت پنل‌های مدیریتی و وب‌اپلیکیشن‌ها

به زبان ساده، JavaScript مغز یک وب‌سایت است و رفتار بخش‌های مختلف را کنترل می‌کند.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>

    <h1>JavaScript چیست؟</h1>

    <p>برای دیدن پیام روی دکمه کلیک کنید.</p>

    <button>نمایش پیام</button>

    <script src="script.js"></script>

</body>
</html>

const button = document.querySelector("button");
const message = document.querySelector("p");

button.addEventListener("click", function () {
    message.textContent = "به دنیای JavaScript خوش آمدید!";
});

تفاوت HTML، CSS و JavaScript

هر کدام از این سه تکنولوژی وظیفه متفاوتی دارند و در کنار یکدیگر صفحات وب را می‌سازند.

HTML ساختار و محتوای صفحه را ایجاد می‌کند.
CSS ظاهر و طراحی صفحه را مشخص می‌کند.
JavaScript امکانات و تعاملات سایت را پیاده‌سازی می‌کند.

به همین دلیل تقریباً تمام وب‌سایت‌های مدرن از ترکیب این سه تکنولوژی استفاده می‌کنند.

برای یادگیری طراحی سایت از کجا شروع کنیم؟

اگر تازه وارد دنیای برنامه‌نویسی وب شده‌اید، بهترین مسیر یادگیری به این صورت است:

یادگیری HTML
یادگیری CSS
یادگیری JavaScript
آشنایی با Git و GitHub
یادگیری یکی از کتابخانه‌های محبوب مانند React

با یادگیری این مسیر، می‌توانید وارد حوزه توسعه فرانت‌اند (Front-End Development) شوید و پروژه‌های واقعی طراحی سایت را پیاده‌سازی کنید.

جمع‌بندی

HTML، CSS و JavaScript سه پایه اصلی طراحی سایت هستند.

HTML ساختار صفحات وب را ایجاد می‌کند.
CSS ظاهر و زیبایی صفحات را طراحی می‌کند.
JavaScript قابلیت‌های تعاملی و منطق سایت را پیاده‌سازی می‌کند.

اگر قصد دارید برنامه‌نویسی وب را شروع کنید، پیشنهاد می‌شود ابتدا HTML را یاد بگیرید، سپس CSS و در نهایت JavaScript. این سه مهارت پایه، مسیر ورود شما به دنیای توسعه وب را هموار می‌کنند.

نظرات

در حال بارگذاری…

بازگشت به آموزش

نیاز به مشاوره تخصصی دارید؟

تیم One in آماده است تا در حوزه برنامه نویسی همراه شما باشد.

ثبت درخواست رایگان