نمایش مبدأ برای 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، مثل <code style="direction:ltr;">&lt;div&gt;</code> یا <code style="direction:ltr;">&lt;p&gt;</code>
* '''Element (عنصر)''': یک تگ کامل همراه با محتوای داخل آن
* '''Attribute (ویژگی)''': اطلاعات اضافه روی یک تگ، مثل <code style="direction:ltr;">class</code> یا <code style="direction:ltr;">id</code>
* '''Selector (انتخابگر)''': در CSS، روشی برای مشخص کردن این‌که کدام عنصر HTML استایل‌دهی شود
* '''Responsive Design''': طراحی‌ای که با اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) سازگار می‌شود
* '''Event (رویداد)''': اتفاقی که در صفحه رخ می‌دهد (کلیک، اسکرول، تایپ) و JavaScript می‌تواند به آن واکنش نشان دهد

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

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

== تگ‌های پرکاربرد HTML ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! توضیح !! تگ
|-
| تیتر (۶ سطح، از بزرگ به کوچک) || <code style="direction:ltr; display:inline-block;">&lt;h1&gt; تا &lt;h6&gt;</code>
|-
| پاراگراف || <code style="direction:ltr; display:inline-block;">&lt;p&gt;</code>
|-
| لینک || <code style="direction:ltr; display:inline-block;">&lt;a href="آدرس"&gt;متن&lt;/a&gt;</code>
|-
| تصویر || <code style="direction:ltr; display:inline-block;">&lt;img src="آدرس" alt="توضیح"&gt;</code>
|-
| بخش‌بندی عمومی (بدون معنای خاص) || <code style="direction:ltr; display:inline-block;">&lt;div&gt;</code>
|-
| بخش‌بندی درون‌خطی (بدون معنای خاص) || <code style="direction:ltr; display:inline-block;">&lt;span&gt;</code>
|-
| لیست مرتب‌نشده (نقطه‌ای) || <code style="direction:ltr; display:inline-block;">&lt;ul&gt;&lt;li&gt;</code>
|-
| لیست مرتب (شماره‌دار) || <code style="direction:ltr; display:inline-block;">&lt;ol&gt;&lt;li&gt;</code>
|-
| جدول || <code style="direction:ltr; display:inline-block;">&lt;table&gt;&lt;tr&gt;&lt;td&gt;</code>
|-
| فرم || <code style="direction:ltr; display:inline-block;">&lt;form&gt;&lt;input&gt;&lt;button&gt;</code>
|-
| ناحیهٔ هدر معنایی صفحه || <code style="direction:ltr; display:inline-block;">&lt;header&gt;</code>
|-
| ناحیهٔ فوتر معنایی صفحه || <code style="direction:ltr; display:inline-block;">&lt;footer&gt;</code>
|-
| بخش ناوبری (منو) || <code style="direction:ltr; display:inline-block;">&lt;nav&gt;</code>
|}

== نحوهٔ اتصال CSS به HTML ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! روش !! نحوه
|-
| فایل خارجی (بهترین روش) || <code style="direction:ltr; display:inline-block;">&lt;link rel="stylesheet" href="style.css"&gt;</code> در head
|-
| داخل همان صفحه (Internal) || <code style="direction:ltr; display:inline-block;">&lt;style&gt;...&lt;/style&gt;</code> در head
|-
| درون یک تگ خاص (Inline) || <code style="direction:ltr; display:inline-block;">&lt;p style="color:red;"&gt;</code>
|}

== انتخابگرهای پرکاربرد CSS ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! توضیح !! نحوهٔ نوشتن
|-
| انتخاب بر اساس نام تگ || <code style="direction:ltr; display:inline-block;">p { }</code>
|-
| انتخاب بر اساس کلاس || <code style="direction:ltr; display:inline-block;">.className { }</code>
|-
| انتخاب بر اساس شناسه (id) || <code style="direction:ltr; display:inline-block;">#idName { }</code>
|-
| انتخاب همهٔ عناصر || <code style="direction:ltr; display:inline-block;">* { }</code>
|-
| انتخاب عنصر فرزند مستقیم || <code style="direction:ltr; display:inline-block;">.parent > .child { }</code>
|-
| انتخاب هنگام هاور (نگه‌داشتن ماوس) || <code style="direction:ltr; display:inline-block;">.className:hover { }</code>
|}

== ویژگی‌های پرکاربرد CSS ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! توضیح !! ویژگی
|-
| رنگ متن || <code style="direction:ltr; display:inline-block;">color</code>
|-
| رنگ پس‌زمینه || <code style="direction:ltr; display:inline-block;">background-color</code>
|-
| اندازهٔ فونت || <code style="direction:ltr; display:inline-block;">font-size</code>
|-
| عرض و ارتفاع || <code style="direction:ltr; display:inline-block;">width</code> و <code style="direction:ltr; display:inline-block;">height</code>
|-
| فاصلهٔ داخلی (بین محتوا و مرز) || <code style="direction:ltr; display:inline-block;">padding</code>
|-
| فاصلهٔ خارجی (بین عنصر و عناصر اطراف) || <code style="direction:ltr; display:inline-block;">margin</code>
|-
| نوع نمایش عنصر || <code style="direction:ltr; display:inline-block;">display</code> (block, inline, flex, grid, none)
|-
| چیدمان انعطاف‌پذیر (تک‌بعدی) || <code style="direction:ltr; display:inline-block;">display: flex;</code>
|-
| چیدمان شبکه‌ای (دوبعدی) || <code style="direction:ltr; display:inline-block;">display: grid;</code>
|-
| موقعیت‌دهی عنصر || <code style="direction:ltr; display:inline-block;">position</code> (static, relative, absolute, fixed)
|-
| گرد کردن گوشه‌ها || <code style="direction:ltr; display:inline-block;">border-radius</code>
|-
| سایه‌دار کردن جعبه || <code style="direction:ltr; display:inline-block;">box-shadow</code>
|}

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

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

<pre style="direction:ltr; text-align:left;">
/* برای صفحه‌نمایش‌های کوچک‌تر از 768px */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}
</pre>

== مفاهیم پایهٔ JavaScript ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! توضیح !! نمونه کد
|-
| تعریف متغیر (قابل تغییر) || <code style="direction:ltr; display:inline-block;">let x = 5;</code>
|-
| تعریف متغیر ثابت (غیرقابل تغییر) || <code style="direction:ltr; display:inline-block;">const name = "علی";</code>
|-
| تعریف تابع || <code style="direction:ltr; display:inline-block;">function sayHi() { }</code>
|-
| تابع پیکانی (Arrow Function) || <code style="direction:ltr; display:inline-block;">const sayHi = () => { }</code>
|-
| شرط || <code style="direction:ltr; display:inline-block;">if (x > 5) { } else { }</code>
|-
| حلقه || <code style="direction:ltr; display:inline-block;">for (let i = 0; i < 10; i++) { }</code>
|-
| آرایه || <code style="direction:ltr; display:inline-block;">let arr = [1, 2, 3];</code>
|-
| شیء (Object) || <code style="direction:ltr; display:inline-block;">let obj = {name: "علی", age: 25};</code>
|}

== دستکاری DOM با JavaScript ==
{| class="wikitable" style="direction:rtl; width:100%;"
|-
! توضیح !! نمونه کد
|-
| انتخاب یک عنصر با id || <code style="direction:ltr; display:inline-block;">document.getElementById("myId")</code>
|-
| انتخاب یک عنصر با selector (CSS-like) || <code style="direction:ltr; display:inline-block;">document.querySelector(".myClass")</code>
|-
| انتخاب چند عنصر || <code style="direction:ltr; display:inline-block;">document.querySelectorAll("p")</code>
|-
| تغییر محتوای متنی || <code style="direction:ltr; display:inline-block;">element.textContent = "متن جدید";</code>
|-
| تغییر محتوای HTML || <code style="direction:ltr; display:inline-block;">element.innerHTML = "&lt;b&gt;متن&lt;/b&gt;";</code>
|-
| تغییر استایل || <code style="direction:ltr; display:inline-block;">element.style.color = "red";</code>
|-
| اضافه/حذف کلاس || <code style="direction:ltr; display:inline-block;">element.classList.add("active")</code>
|}

== رویدادها (Events) ==

<pre style="direction:ltr; text-align:left;">
document.querySelector("button").addEventListener("click", function() {
  alert("دکمه کلیک شد!");
});
</pre>

{| class="wikitable" style="direction:rtl; width:100%;"
|-
! رویداد !! زمان وقوع
|-
| <code style="direction:ltr;">click</code> || هنگام کلیک روی عنصر
|-
| <code style="direction:ltr;">submit</code> || هنگام ارسال فرم
|-
| <code style="direction:ltr;">input</code> || هنگام تایپ در فیلد ورودی
|-
| <code style="direction:ltr;">load</code> || هنگام بارگذاری کامل صفحه
|-
| <code style="direction:ltr;">mouseover</code> || هنگام قرار گرفتن ماوس روی عنصر
|}

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

* '''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) مثل <code style="direction:ltr;">header</code>، <code style="direction:ltr;">nav</code>، <code style="direction:ltr;">main</code>، <code style="direction:ltr;">footer</code> به‌جای <code style="direction:ltr;">div</code> برای همه‌چیز استفاده کنید؛ هم برای سئو بهتر است هم خوانایی کد.
* کد CSS را در فایل جدا از HTML نگه دارید تا نگهداری و تغییر آن ساده‌تر باشد.
* همیشه صفحه را روی اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) تست کنید.
* از نام‌گذاری واضح برای کلاس‌ها و idها استفاده کنید (مثلاً <code style="direction:ltr;">main-header</code> به‌جای <code style="direction:ltr;">div1</code>).
* کد JavaScript را در انتهای body یا با ویژگی <code style="direction:ltr;">defer</code> بارگذاری کنید تا سرعت نمایش اولیهٔ صفحه بهتر شود.
* از کنسول مرورگر (<code style="direction:ltr;">console.log()</code>) برای دیباگ و بررسی مقادیر متغیرها استفاده کنید.