HTML، CSS و JavaScript سه فناوری اصلی در طراحی وب هستند، که هرکدام نقش خاص خود را دارند. در اینجا تفاوت‌ها و وظایف هرکدام را توضیح می‌دهیم:

1. HTML (HyperText Markup Language):

• وظیفه: HTML ساختار و محتوای صفحات وب را مشخص می‌کند. HTML برای تعیین ساختار کلی صفحات وب از تگ‌ها و عناصر مختلف استفاده می‌کند.
• نقش: HTML به نوعی اسکلت یا ساختار صفحه است. مثلاً با استفاده از تگ‌هایی مانند h1, p, div, a, و img می‌توان محتوا را در صفحه قرار داد.
• مثال:
  undefined

  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
  <a href="https://example.com">Click here</a>

2. CSS (Cascading Style Sheets):

• وظیفه: CSS وظیفه استایل‌دهی و زیباسازی صفحه را بر عهده دارد. CSS به HTML اجازه می‌دهد که رنگ‌ها، فونت‌ها، فاصله‌ها، چیدمان‌ها و بسیاری از ویژگی‌های ظاهری را تنظیم کند.
• نقش: CSS به HTML ظاهری زیبا و جذاب می‌دهد و باعث می‌شود که صفحات وب جذاب و قابل استفاده باشند. بدون CSS، صفحات وب فقط شامل محتوای خام خواهند بود.
• مثال:
  undefined

  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
  
  h1 {
    color: #333;
    text-align: center;
  }
  
  p {
    font-size: 16px;
  }

3. JavaScript (JS):

• وظیفه: JavaScript زبان برنامه‌نویسی است که برای ایجاد تعاملات داینامیک در صفحات وب استفاده می‌شود. با استفاده از JavaScript می‌توان به رویدادهای مختلف (مثل کلیک کردن، وارد کردن اطلاعات، ارسال فرم‌ها و ...) واکنش نشان داد و رفتارهای تعاملی را ایجاد کرد.
• نقش: JavaScript به صفحه‌های وب زندگی می‌بخشد و تعاملات کاربر را کنترل می‌کند. این زبان برای ایجاد ویژگی‌های داینامیک مانند اعتبارسنجی فرم‌ها، انیمیشن‌ها، بارگذاری محتوای جدید بدون نیاز به بارگذاری مجدد صفحه و موارد دیگر استفاده می‌شود.
• مثال:
  undefined

  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
  });

تفاوت‌ها:

1. HTML: ساختار صفحه را تعیین می‌کند (محتوا و ترتیب عناصر).
2. CSS: ظاهر صفحه را تنظیم می‌کند (رنگ‌ها، چیدمان، فونت‌ها، اندازه‌ها).
3. JavaScript: رفتار و تعاملات صفحه را تعریف می‌کند (واکنش به رویدادها، تغییرات داینامیک).

خلاصه:

• HTML به صفحه محتوا می‌دهد.
• CSS به صفحه شکل و ظاهر می‌دهد.
• JavaScript به صفحه زندگی و تعاملات داینامیک می‌بخشد.

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