https://wiki.shakibaabutalebi.ir/index.php?action=history&feed=atom&title=HTML_CSS_JavaScript
HTML CSS JavaScript - تاریخچهٔ نسخه‌ها
2026-10-30T15:34:08Z
تاریخچهٔ نسخه‌ها برای این صفحه در ویکی
MediaWiki 1.46.0
https://wiki.shakibaabutalebi.ir/index.php?title=HTML_CSS_JavaScript&diff=26&oldid=prev
Admin: صفحه‌ای تازه حاوی «== طراحی سایت با HTML، CSS و JavaScript == این سه تکنولوژی، ستون اصلی توسعهٔ وب هستند: '''HTML''' ساختار صفحه، '''CSS''' ظاهر و استایل، و '''JavaScript''' رفتار و تعامل صفحه را مشخص می‌کند. با ترکیب این سه می‌توان هر نوع صفحهٔ وب استاتیک یا پویا ساخت. == مفاهیم پایه == * '''HT...» ایجاد کرد
2026-09-06T07:34:55Z
<p>صفحه‌ای تازه حاوی «== طراحی سایت با HTML، CSS و JavaScript == این سه تکنولوژی، ستون اصلی توسعهٔ وب هستند: '''HTML''' ساختار صفحه، '''CSS''' ظاهر و استایل، و '''JavaScript''' رفتار و تعامل صفحه را مشخص می‌کند. با ترکیب این سه می‌توان هر نوع صفحهٔ وب استاتیک یا پویا ساخت. == مفاهیم پایه == * '''HT...» ایجاد کرد</p>
<p><b>صفحهٔ تازه</b></p><div>== طراحی سایت با HTML، CSS و JavaScript ==<br />
<br />
این سه تکنولوژی، ستون اصلی توسعهٔ وب هستند: '''HTML''' ساختار صفحه، '''CSS''' ظاهر و استایل، و '''JavaScript''' رفتار و تعامل صفحه را مشخص می‌کند. با ترکیب این سه می‌توان هر نوع صفحهٔ وب استاتیک یا پویا ساخت.<br />
<br />
== مفاهیم پایه ==<br />
<br />
* '''HTML (HyperText Markup Language)''': زبان نشانه‌گذاری برای تعریف ساختار و محتوای صفحه (عنوان، پاراگراف، تصویر، لینک و...)<br />
* '''CSS (Cascading Style Sheets)''': زبان استایل‌دهی برای تعیین ظاهر عناصر HTML (رنگ، فونت، چیدمان، فاصله‌ها و...)<br />
* '''JavaScript''': زبان برنامه‌نویسی برای افزودن تعامل و پویایی به صفحه (کلیک، انیمیشن، اعتبارسنجی فرم و...)<br />
* '''DOM (Document Object Model)''': نمایش ساختاری صفحهٔ HTML که JavaScript می‌تواند آن را بخواند و تغییر دهد<br />
* '''Tag (برچسب)''': واحد اصلی HTML، مثل <code style="direction:ltr;">&lt;div&gt;</code> یا <code style="direction:ltr;">&lt;p&gt;</code><br />
* '''Element (عنصر)''': یک تگ کامل همراه با محتوای داخل آن<br />
* '''Attribute (ویژگی)''': اطلاعات اضافه روی یک تگ، مثل <code style="direction:ltr;">class</code> یا <code style="direction:ltr;">id</code><br />
* '''Selector (انتخابگر)''': در CSS، روشی برای مشخص کردن این‌که کدام عنصر HTML استایل‌دهی شود<br />
* '''Responsive Design''': طراحی‌ای که با اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) سازگار می‌شود<br />
* '''Event (رویداد)''': اتفاقی که در صفحه رخ می‌دهد (کلیک، اسکرول، تایپ) و JavaScript می‌تواند به آن واکنش نشان دهد<br />
<br />
== ساختار پایهٔ یک صفحهٔ HTML ==<br />
<br />
<pre style="direction:ltr; text-align:left;"><br />
&lt;!DOCTYPE html&gt;<br />
&lt;html lang="fa"&gt;<br />
&lt;head&gt;<br />
&lt;meta charset="UTF-8"&gt;<br />
&lt;title&gt;عنوان صفحه&lt;/title&gt;<br />
&lt;link rel="stylesheet" href="style.css"&gt;<br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
&lt;h1&gt;سلام دنیا&lt;/h1&gt;<br />
&lt;p&gt;این یک پاراگراف است.&lt;/p&gt;<br />
&lt;script src="script.js"&gt;&lt;/script&gt;<br />
&lt;/body&gt;<br />
&lt;/html&gt;<br />
</pre><br />
<br />
== تگ‌های پرکاربرد HTML ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! توضیح !! تگ<br />
|-<br />
| تیتر (۶ سطح، از بزرگ به کوچک) || <code style="direction:ltr; display:inline-block;">&lt;h1&gt; تا &lt;h6&gt;</code><br />
|-<br />
| پاراگراف || <code style="direction:ltr; display:inline-block;">&lt;p&gt;</code><br />
|-<br />
| لینک || <code style="direction:ltr; display:inline-block;">&lt;a href="آدرس"&gt;متن&lt;/a&gt;</code><br />
|-<br />
| تصویر || <code style="direction:ltr; display:inline-block;">&lt;img src="آدرس" alt="توضیح"&gt;</code><br />
|-<br />
| بخش‌بندی عمومی (بدون معنای خاص) || <code style="direction:ltr; display:inline-block;">&lt;div&gt;</code><br />
|-<br />
| بخش‌بندی درون‌خطی (بدون معنای خاص) || <code style="direction:ltr; display:inline-block;">&lt;span&gt;</code><br />
|-<br />
| لیست مرتب‌نشده (نقطه‌ای) || <code style="direction:ltr; display:inline-block;">&lt;ul&gt;&lt;li&gt;</code><br />
|-<br />
| لیست مرتب (شماره‌دار) || <code style="direction:ltr; display:inline-block;">&lt;ol&gt;&lt;li&gt;</code><br />
|-<br />
| جدول || <code style="direction:ltr; display:inline-block;">&lt;table&gt;&lt;tr&gt;&lt;td&gt;</code><br />
|-<br />
| فرم || <code style="direction:ltr; display:inline-block;">&lt;form&gt;&lt;input&gt;&lt;button&gt;</code><br />
|-<br />
| ناحیهٔ هدر معنایی صفحه || <code style="direction:ltr; display:inline-block;">&lt;header&gt;</code><br />
|-<br />
| ناحیهٔ فوتر معنایی صفحه || <code style="direction:ltr; display:inline-block;">&lt;footer&gt;</code><br />
|-<br />
| بخش ناوبری (منو) || <code style="direction:ltr; display:inline-block;">&lt;nav&gt;</code><br />
|}<br />
<br />
== نحوهٔ اتصال CSS به HTML ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! روش !! نحوه<br />
|-<br />
| فایل خارجی (بهترین روش) || <code style="direction:ltr; display:inline-block;">&lt;link rel="stylesheet" href="style.css"&gt;</code> در head<br />
|-<br />
| داخل همان صفحه (Internal) || <code style="direction:ltr; display:inline-block;">&lt;style&gt;...&lt;/style&gt;</code> در head<br />
|-<br />
| درون یک تگ خاص (Inline) || <code style="direction:ltr; display:inline-block;">&lt;p style="color:red;"&gt;</code><br />
|}<br />
<br />
== انتخابگرهای پرکاربرد CSS ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! توضیح !! نحوهٔ نوشتن<br />
|-<br />
| انتخاب بر اساس نام تگ || <code style="direction:ltr; display:inline-block;">p { }</code><br />
|-<br />
| انتخاب بر اساس کلاس || <code style="direction:ltr; display:inline-block;">.className { }</code><br />
|-<br />
| انتخاب بر اساس شناسه (id) || <code style="direction:ltr; display:inline-block;">#idName { }</code><br />
|-<br />
| انتخاب همهٔ عناصر || <code style="direction:ltr; display:inline-block;">* { }</code><br />
|-<br />
| انتخاب عنصر فرزند مستقیم || <code style="direction:ltr; display:inline-block;">.parent > .child { }</code><br />
|-<br />
| انتخاب هنگام هاور (نگه‌داشتن ماوس) || <code style="direction:ltr; display:inline-block;">.className:hover { }</code><br />
|}<br />
<br />
== ویژگی‌های پرکاربرد CSS ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! توضیح !! ویژگی<br />
|-<br />
| رنگ متن || <code style="direction:ltr; display:inline-block;">color</code><br />
|-<br />
| رنگ پس‌زمینه || <code style="direction:ltr; display:inline-block;">background-color</code><br />
|-<br />
| اندازهٔ فونت || <code style="direction:ltr; display:inline-block;">font-size</code><br />
|-<br />
| عرض و ارتفاع || <code style="direction:ltr; display:inline-block;">width</code> و <code style="direction:ltr; display:inline-block;">height</code><br />
|-<br />
| فاصلهٔ داخلی (بین محتوا و مرز) || <code style="direction:ltr; display:inline-block;">padding</code><br />
|-<br />
| فاصلهٔ خارجی (بین عنصر و عناصر اطراف) || <code style="direction:ltr; display:inline-block;">margin</code><br />
|-<br />
| نوع نمایش عنصر || <code style="direction:ltr; display:inline-block;">display</code> (block, inline, flex, grid, none)<br />
|-<br />
| چیدمان انعطاف‌پذیر (تک‌بعدی) || <code style="direction:ltr; display:inline-block;">display: flex;</code><br />
|-<br />
| چیدمان شبکه‌ای (دوبعدی) || <code style="direction:ltr; display:inline-block;">display: grid;</code><br />
|-<br />
| موقعیت‌دهی عنصر || <code style="direction:ltr; display:inline-block;">position</code> (static, relative, absolute, fixed)<br />
|-<br />
| گرد کردن گوشه‌ها || <code style="direction:ltr; display:inline-block;">border-radius</code><br />
|-<br />
| سایه‌دار کردن جعبه || <code style="direction:ltr; display:inline-block;">box-shadow</code><br />
|}<br />
<br />
== ریسپانسیو کردن سایت (Media Query) ==<br />
<br />
برای این‌که سایت روی موبایل و دسکتاپ متفاوت نمایش داده شود:<br />
<br />
<pre style="direction:ltr; text-align:left;"><br />
/* برای صفحه‌نمایش‌های کوچک‌تر از 768px */<br />
@media (max-width: 768px) {<br />
.container {<br />
flex-direction: column;<br />
}<br />
}<br />
</pre><br />
<br />
== مفاهیم پایهٔ JavaScript ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! توضیح !! نمونه کد<br />
|-<br />
| تعریف متغیر (قابل تغییر) || <code style="direction:ltr; display:inline-block;">let x = 5;</code><br />
|-<br />
| تعریف متغیر ثابت (غیرقابل تغییر) || <code style="direction:ltr; display:inline-block;">const name = "علی";</code><br />
|-<br />
| تعریف تابع || <code style="direction:ltr; display:inline-block;">function sayHi() { }</code><br />
|-<br />
| تابع پیکانی (Arrow Function) || <code style="direction:ltr; display:inline-block;">const sayHi = () => { }</code><br />
|-<br />
| شرط || <code style="direction:ltr; display:inline-block;">if (x > 5) { } else { }</code><br />
|-<br />
| حلقه || <code style="direction:ltr; display:inline-block;">for (let i = 0; i < 10; i++) { }</code><br />
|-<br />
| آرایه || <code style="direction:ltr; display:inline-block;">let arr = [1, 2, 3];</code><br />
|-<br />
| شیء (Object) || <code style="direction:ltr; display:inline-block;">let obj = {name: "علی", age: 25};</code><br />
|}<br />
<br />
== دستکاری DOM با JavaScript ==<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! توضیح !! نمونه کد<br />
|-<br />
| انتخاب یک عنصر با id || <code style="direction:ltr; display:inline-block;">document.getElementById("myId")</code><br />
|-<br />
| انتخاب یک عنصر با selector (CSS-like) || <code style="direction:ltr; display:inline-block;">document.querySelector(".myClass")</code><br />
|-<br />
| انتخاب چند عنصر || <code style="direction:ltr; display:inline-block;">document.querySelectorAll("p")</code><br />
|-<br />
| تغییر محتوای متنی || <code style="direction:ltr; display:inline-block;">element.textContent = "متن جدید";</code><br />
|-<br />
| تغییر محتوای HTML || <code style="direction:ltr; display:inline-block;">element.innerHTML = "&lt;b&gt;متن&lt;/b&gt;";</code><br />
|-<br />
| تغییر استایل || <code style="direction:ltr; display:inline-block;">element.style.color = "red";</code><br />
|-<br />
| اضافه/حذف کلاس || <code style="direction:ltr; display:inline-block;">element.classList.add("active")</code><br />
|}<br />
<br />
== رویدادها (Events) ==<br />
<br />
<pre style="direction:ltr; text-align:left;"><br />
document.querySelector("button").addEventListener("click", function() {<br />
alert("دکمه کلیک شد!");<br />
});<br />
</pre><br />
<br />
{| class="wikitable" style="direction:rtl; width:100%;"<br />
|-<br />
! رویداد !! زمان وقوع<br />
|-<br />
| <code style="direction:ltr;">click</code> || هنگام کلیک روی عنصر<br />
|-<br />
| <code style="direction:ltr;">submit</code> || هنگام ارسال فرم<br />
|-<br />
| <code style="direction:ltr;">input</code> || هنگام تایپ در فیلد ورودی<br />
|-<br />
| <code style="direction:ltr;">load</code> || هنگام بارگذاری کامل صفحه<br />
|-<br />
| <code style="direction:ltr;">mouseover</code> || هنگام قرار گرفتن ماوس روی عنصر<br />
|}<br />
<br />
== ابزارهای مفید توسعه ==<br />
<br />
* '''DevTools مرورگر''' (کلید F12): بازرسی و دیباگ HTML/CSS/JS مستقیم در مرورگر<br />
* '''VS Code''': ویرایشگر کد محبوب با پشتیبانی قوی از این سه زبان<br />
* '''Live Server (افزونهٔ VS Code)''': نمایش زندهٔ تغییرات صفحه بدون نیاز به رفرش دستی<br />
* '''Flexbox Froggy / Grid Garden''': بازی‌های آموزشی برای یادگیری Flexbox و Grid در CSS<br />
* '''MDN Web Docs''': مرجع رسمی و کامل برای HTML، CSS و JavaScript<br />
<br />
== نکات و بهترین شیوه‌ها ==<br />
<br />
* از تگ‌های معنایی (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> برای همه‌چیز استفاده کنید؛ هم برای سئو بهتر است هم خوانایی کد.<br />
* کد CSS را در فایل جدا از HTML نگه دارید تا نگهداری و تغییر آن ساده‌تر باشد.<br />
* همیشه صفحه را روی اندازه‌های مختلف صفحه‌نمایش (موبایل، تبلت، دسکتاپ) تست کنید.<br />
* از نام‌گذاری واضح برای کلاس‌ها و idها استفاده کنید (مثلاً <code style="direction:ltr;">main-header</code> به‌جای <code style="direction:ltr;">div1</code>).<br />
* کد JavaScript را در انتهای body یا با ویژگی <code style="direction:ltr;">defer</code> بارگذاری کنید تا سرعت نمایش اولیهٔ صفحه بهتر شود.<br />
* از کنسول مرورگر (<code style="direction:ltr;">console.log()</code>) برای دیباگ و بررسی مقادیر متغیرها استفاده کنید.</div>
Admin