HTML، CSS و جاوااسکریپت؛ هرکدام چه کاری می‌کنند؟

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

HTML؛ ساختار و معنا#

HTML مشخص می‌کند در صفحه چه چیزهایی هست: عنوان، پاراگراف، لینک، دکمه، تصویر و فرم. نکتهٔ مهم این است که تگ درست انتخاب کنی. برای دکمه از <button> استفاده کن، نه از <div> که شبیه دکمه استایل شده؛ چون button خودبه‌خود با صفحه‌کلید و صفحه‌خوان‌ها کار می‌کند.

<button id="hello">سلام!</button>

CSS؛ ظاهر#

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

button {
  background: #0e8f86;
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  font-size: 1rem;
}

button:hover {
  background: #0a766e;
}

جاوااسکریپت؛ رفتار#

جاوااسکریپت به صفحه جان می‌دهد؛ مثلاً وقتی کاربر روی دکمه کلیک کرد کاری انجام دهد:

const button = document.querySelector('#hello');

button.addEventListener('click', () => {
  alert('سلام! به سایت من خوش آمدی');
});

هر سه با هم#

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

چند توصیه برای شروع#

• از تگ‌های معنادار مثل header، main، nav و footer استفاده کن.
• طراحی را اول برای موبایل شروع کن و بعد برای صفحهٔ بزرگ‌تر گسترش بده.
• کدت را با گیت نگه‌داری کن تا بتوانی هر تغییر را برگردانی.
• بعد از ساختن سایت، سرعت سایت را روی موبایل بررسی کن.

اگر بخواهی از ابتدا مسیر یادگیری را ببینی، مقالهٔ از کجا برنامه‌نویسی را شروع کنم؟ کمکت می‌کند.