HTML CSS JavaScript

طراحی سایت با HTML، CSS و JavaScript

این سه تکنولوژی، ستون اصلی توسعهٔ وب هستند: HTML ساختار صفحه، CSS ظاهر و استایل، و JavaScript رفتار و تعامل صفحه را مشخص می‌کند. با ترکیب این سه می‌توان هر نوع صفحهٔ وب استاتیک یا پویا ساخت.

مفاهیم پایه

• HTML (HyperText Markup Language): زبان نشانه‌گذاری برای تعریف ساختار و محتوای صفحه (عنوان، پاراگراف، تصویر، لینک و...)
• CSS (Cascading Style Sheets): زبان استایل‌دهی برای تعیین ظاهر عناصر HTML (رنگ، فونت، چیدمان، فاصله‌ها و...)
• JavaScript: زبان برنامه‌نویسی برای افزودن تعامل و پویایی به صفحه (کلیک، انیمیشن، اعتبارسنجی فرم و...)
• DOM (Document Object Model): نمایش ساختاری صفحهٔ HTML که JavaScript می‌تواند آن را بخواند و تغییر دهد
• Tag (برچسب): واحد اصلی HTML، مثل <div> یا <p>
• Element (عنصر): یک تگ کامل همراه با محتوای داخل آن
• Attribute (ویژگی): اطلاعات اضافه روی یک تگ، مثل class یا id
• Selector (انتخابگر): در CSS، روشی برای مشخص کردن این‌که کدام عنصر HTML استایل‌دهی شود
• Responsive Design: طراحی‌ای که با اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) سازگار می‌شود
• Event (رویداد): اتفاقی که در صفحه رخ می‌دهد (کلیک، اسکرول، تایپ) و JavaScript می‌تواند به آن واکنش نشان دهد

ساختار پایهٔ یک صفحهٔ HTML

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>عنوان صفحه</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>سلام دنیا</h1>
    <p>این یک پاراگراف است.</p>
    <script src="script.js"></script>
</body>
</html>

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

توضیح	تگ
تیتر (۶ سطح، از بزرگ به کوچک)	<h1> تا <h6>
پاراگراف	<p>
لینک	<a href="آدرس">متن</a>
تصویر	<img src="آدرس" alt="توضیح">
بخش‌بندی عمومی (بدون معنای خاص)	<div>
بخش‌بندی درون‌خطی (بدون معنای خاص)	<span>
لیست مرتب‌نشده (نقطه‌ای)	<ul><li>
لیست مرتب (شماره‌دار)	<ol><li>
جدول	<table><tr><td>
فرم	<form><input><button>
ناحیهٔ هدر معنایی صفحه	<header>
ناحیهٔ فوتر معنایی صفحه	<footer>
بخش ناوبری (منو)	<nav>

نحوهٔ اتصال CSS به HTML

روش	نحوه
فایل خارجی (بهترین روش)	<link rel="stylesheet" href="style.css"> در head
داخل همان صفحه (Internal)	<style>...</style> در head
درون یک تگ خاص (Inline)	<p style="color:red;">

انتخابگرهای پرکاربرد CSS

توضیح	نحوهٔ نوشتن
انتخاب بر اساس نام تگ	p { }
انتخاب بر اساس کلاس	.className { }
انتخاب بر اساس شناسه (id)	#idName { }
انتخاب همهٔ عناصر	* { }
انتخاب عنصر فرزند مستقیم	.parent > .child { }
انتخاب هنگام هاور (نگه‌داشتن ماوس)	.className:hover { }

ویژگی‌های پرکاربرد CSS

توضیح	ویژگی
رنگ متن	color
رنگ پس‌زمینه	background-color
اندازهٔ فونت	font-size
عرض و ارتفاع	width و height
فاصلهٔ داخلی (بین محتوا و مرز)	padding
فاصلهٔ خارجی (بین عنصر و عناصر اطراف)	margin
نوع نمایش عنصر	display (block, inline, flex, grid, none)
چیدمان انعطاف‌پذیر (تک‌بعدی)	display: flex;
چیدمان شبکه‌ای (دوبعدی)	display: grid;
موقعیت‌دهی عنصر	position (static, relative, absolute, fixed)
گرد کردن گوشه‌ها	border-radius
سایه‌دار کردن جعبه	box-shadow

ریسپانسیو کردن سایت (Media Query)

برای این‌که سایت روی موبایل و دسکتاپ متفاوت نمایش داده شود:

/* برای صفحه‌نمایش‌های کوچک‌تر از 768px */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

مفاهیم پایهٔ JavaScript

توضیح	نمونه کد
تعریف متغیر (قابل تغییر)	let x = 5;
تعریف متغیر ثابت (غیرقابل تغییر)	const name = "علی";
تعریف تابع	function sayHi() { }
تابع پیکانی (Arrow Function)	const sayHi = () => { }
شرط	if (x > 5) { } else { }
حلقه	for (let i = 0; i < 10; i++) { }
آرایه	let arr = [1, 2, 3];
شیء (Object)	let obj = {name: "علی", age: 25};

دستکاری DOM با JavaScript

توضیح	نمونه کد
انتخاب یک عنصر با id	document.getElementById("myId")
انتخاب یک عنصر با selector (CSS-like)	document.querySelector(".myClass")
انتخاب چند عنصر	document.querySelectorAll("p")
تغییر محتوای متنی	element.textContent = "متن جدید";
تغییر محتوای HTML	element.innerHTML = "<b>متن</b>";
تغییر استایل	element.style.color = "red";
اضافه/حذف کلاس	element.classList.add("active")

رویدادها (Events)

document.querySelector("button").addEventListener("click", function() {
  alert("دکمه کلیک شد!");
});

رویداد	زمان وقوع
click	هنگام کلیک روی عنصر
submit	هنگام ارسال فرم
input	هنگام تایپ در فیلد ورودی
load	هنگام بارگذاری کامل صفحه
mouseover	هنگام قرار گرفتن ماوس روی عنصر

ابزارهای مفید توسعه

• DevTools مرورگر (کلید F12): بازرسی و دیباگ HTML/CSS/JS مستقیم در مرورگر
• VS Code: ویرایشگر کد محبوب با پشتیبانی قوی از این سه زبان
• Live Server (افزونهٔ VS Code): نمایش زندهٔ تغییرات صفحه بدون نیاز به رفرش دستی
• Flexbox Froggy / Grid Garden: بازی‌های آموزشی برای یادگیری Flexbox و Grid در CSS
• MDN Web Docs: مرجع رسمی و کامل برای HTML، CSS و JavaScript

نکات و بهترین شیوه‌ها

• از تگ‌های معنایی (Semantic) مثل header، nav، main، footer به‌جای div برای همه‌چیز استفاده کنید؛ هم برای سئو بهتر است هم خوانایی کد.
• کد CSS را در فایل جدا از HTML نگه دارید تا نگهداری و تغییر آن ساده‌تر باشد.
• همیشه صفحه را روی اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) تست کنید.
• از نام‌گذاری واضح برای کلاس‌ها و idها استفاده کنید (مثلاً main-header به‌جای div1).
• کد JavaScript را در انتهای body یا با ویژگی defer بارگذاری کنید تا سرعت نمایش اولیهٔ صفحه بهتر شود.
• از کنسول مرورگر (console.log()) برای دیباگ و بررسی مقادیر متغیرها استفاده کنید.