آموزش برنامه‌نویسی و فناوری | رسول دانش مدرس و برنامه نویس

تاریخچه و سیر تکاملی HTML

مخفف کلمه HyperText Markup Language (زبان نشانه‌گذاری فرامتن) است. دقت کنید که HTML یک زبان برنامه‌نویسی نیست (چون ساختار شرط، حلقه و منطق محاسباتی ندارد)، بلکه یک زبان نشانه‌گذاری (Markup) برای تعریف ساختار و معنای محتوا است.

۱۹۹۱ (HTML 1.0): توسط تیم برنرز-لی (Tim Berners-Lee) در سازمان CERN طراحی شد؛ تنها دارای تگ‌های ابتدایی متنی و پیوندها بود.

۱۹۹۵ (HTML 2.0): استانداردسازی اولیه شامل فرم‌ها و جدول‌ها.

۱۹۹۷ (HTML 3.2 و 4.01): توسعه توسط کنسرسیوم وب جهانی (W3C)، پشتیبانی از جدول‌های پیچیده، فریم‌ها و جداسازی مقدماتی استایل‌ها.

۲۰۰۰ (XHTML 1.0): ترکیب HTML با قواعد سخت‌گیرانه XML (نیاز اجباری به بستن همه تگ‌ها، حروف کوچک، ساختار کامپایلری سخت‌گیرانه).

۲۰۱۴ (HTML5): انقلاب مدرن وب توسط کارگروه WHATWG و سپس W3C؛ معرفی ساختارهای معنایی (Semantic)، چندرسانه‌ای بومی (<audio> و <video>)، گرافیک (<canvas> و <svg>) و APIهای مدرن تحت وب بدون وابستگی به افزونه‌های ثالث (مثل Flash).

وب و مرورگر چگونه کار می‌کنند؟

ساختار وب بر پایه‌ی معماری کلاینت-سرور (Client-Server) استوار است:

مرورگر (کلاینت): درخواستی (HTTP/HTTPS Request) برای یک آدرس مشخص (URL) ارسال می‌کند.
وب‌سرور: فایل‌های مربوطه شامل کد‌های HTML، استایل‌ها (CSS)، اسکریپت‌ها (JS) و مدیا را در قالب پاسخ (HTTP Response) ارسال می‌کند.
موتور رندرینگ مرورگر (Rendering Engine): کدهای HTML را پردازش کرده و درخت مدل شیءگرای سند (DOM - Document Object Model) را تشکیل می‌دهد و در نهایت صفحه را ترسیم (Render) می‌کند.

سینتکس، تگ‌ها، عناصر و صفت‌ها (Tags, Elements & Attributes)

عنصر (Element): از تگ آغازین، محتوا، و تگ پایانی تشکیل می‌شود:

تگ‌های خودبسته (Self-closing / Void Elements): عناصری که محتوای درونی ندارند و تگ پایانی مستقل ندارند؛ مانند <img>, <br>, <hr>, <input>, <meta>.

صفت‌ها (Attributes): ویژگی‌هایی که اطلاعات اضافی به عنصر می‌دهند و همواره در تگ آغازین قرار می‌گیرند (مثل class, id, src, href, style).

اسکلت‌بندی استاندارد صفحه

هر سند معتبر HTML5 باید دارای ساختار حداقل زیر باشد:


<!DOCTYPE html>

<html lang="fa" dir="rtl">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="جزوه دانشگاهی طراحی صفحات وب">

    <title>آموزش جامع HTML5</title>

</head>

<body>

    <!-- تمام محتوای بصری صفحه در این بخش قرار می‌گیرد -->

    <h1>به دوره طراحی صفحات وب خوش آمدید</h1>

</body>
</html>

۱. تگ <p> (Paragraph)

کاربرد: برای تعریف پاراگراف‌های متنی. مرورگرها به طور خودکار قبل و بعد از هر تگ <p> یک فاصله عمودی (Margin) ایجاد می‌کنند.

<p>درس طراحی صفحات وب یکی از پایه‌ای‌ترین دروس رشته کامپیوتر است.</p>

<p>در این درس با اسکلت‌بندی و ساختار صفحات وب آشنا می‌شوید.</p>

تگ‌های تیتر: <h1> تا <h6> (Headings)

کاربرد: برای ساختاردهی سلسله‌مراتبی و تیتربندی محتوا. تگ <h1> مهم‌ترین و بزرگ‌ترین تیتر صفحه است (معمولاً یک‌بار در صفحه برای عنوان اصلی استفاده می‌شود) و <h6> کم‌اهمیت‌ترین و کوچک‌ترین تیتر است. موتورهای جستجو (SEO) از این تگ‌ها برای فهم موضوع صفحه استفاده می‌کنند.


<h1>دانشکده فنی و حرفه‌ای دختران</h1>

 <h2>گروه مهندسی کامپیوتر</h2>

 <h3>سرفصل‌های درس برنامه‌نویسی وب</h3>

 <h4>فصل اول: مفاهیم وب</h4>

 <h5>بخش ۱-۱: پروتکل HTTP</h5>

 <h6>نکته فنی درباره پورت ۸۰</h6>

تگ <a> (Anchor)

کاربرد: برای ایجاد پیوند (Hyperlink) به صفحات دیگر، فایل‌ها، بخش‌های داخلی همان صفحه، ایمیل یا شماره تماس. صفت اصلی آن href است که آدرس مقصد را مشخص می‌کند.

<p>برای مطالعه مستندات به <a href="https://developer.mozilla.org" target="_blank">سایت MDN</a> مراجعه کنید.</p>



<p><a href="mailto:teacher@university.ac.ir">ارسال پروژه به ایمیل استاد</a></p>

صفت target تعیین می‌کند که صفحه یا منبعِ لینک‌شده، در کجا و درون چه کانتینری (تب جدید، همان پنجره، فریم و…) باز شود.

_self (پیش‌فرض) صفحه مقصد را در همان تب/پنجره فعلی باز می‌کند (جایگزین صفحه کنونی می‌شود).

_blank باز شدن در تب جدید صفحه مقصد را در یک تب جدید (یا پنجره جدید) باز می‌کند.

_parent باز شدن در فریم والد صفحه مقصد را در فریم والد (یک سطح بالاتر) بارگذاری می‌کند.

_top خروج از تمام فریم‌ها کل ساختار فریم‌ها (<iframe>) را کنار می‌زند و صفحه را در کل بدنه اصلی پنجره مرورگر باز می‌کند.

تگ‌های <ul> و <ol> (Unordered & Ordered Lists)

کاربرد:
- <ul>: برای ایجاد لیست‌های نامرتب (علامت‌دار یا گلوله‌ای / Bulleted) که ترتیب آیتم‌ها اهمیتی ندارد.
- <ol>: برای ایجاد لیست‌های مرتب (شماره‌دار / عددی یا حروفی) که ترتیب مراحل مهم است.
- هر دو تگ برای آیتم‌های داخلی خود از تگ <li> (List Item) استفاده می‌کنند.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

تگ <b> در مقابل <strong>

کاربرد:

- <b> (Bold): فقط جنبه بصری و ظاهری دارد و متن را ضخیم می‌کند، بدون اینکه ارزش معنایی یا تاکیدی به آن بدهد.
- <strong>: جنبه معنایی (Semantic) دارد؛ علاوه بر ضخیم کردن متن، به موتورهای جستجو و صفحه‌خوان‌ها اعلام می‌کند که این عبارت بسیار مهم یا حیاتی است.

<p>کتاب <b>طراحی وب مدرن</b> در کتابخانه موجود است.</p>

تگ <em>

کاربرد: برای ایجاد تاکید کلامی یا استرس صوتی بر روی یک واژه در جمله به کار می‌رود

<p>شما باید پروژه را <em>حتماً</em> تا امشب ارسال کنید.</p>

تگ <span>

کاربرد: یک کانتینر خنثی و درون‌خطی است که به خودی خود هیچ تاثیر معنایی یا ظاهری روی متن ندارد؛

<p>دانشجوی برتر این ترم <span style="color: green; font-weight: bold;">مریم احمدی</span> می‌باشد.</p>

تگ <del> (Deleted Text)

کاربرد: برای نشان دادن متنی که حذف شده، نامعتبر گشته یا تغییر کرده است (مرورگر به طور خودکار روی آن خط افقی می‌کشد / Strikethrough). در فروشگاه‌ها یا اصلاحیه‌ها بسیار پرکاربرد است.

<p>هزینه کارگاه آموزشی: <del>۵۰۰,۰۰۰ تومان</del> رایگان برای دانشجویان دانشکده.</p> <p>جلسه آینده روز <del>دوشنبه</del> سه‌شنبه برگزار می‌شود.</p>

تگ <small>

کاربرد: برای متن‌های کم‌اهمیت‌تر، پاورقی‌ها، سلب مسئولیت‌ها، قوانین حقوقی و کپی‌رایت به کار می‌رود و متن را یک سایز کوچک‌تر از اندازه معمولی نمایش می‌دهد.

<p>تمامی حقوق این سایت متعلق به دانشگاه می‌باشد. <small>© ۱۴۰۵ تمامی حقوق محفوظ است.</small></p>

تگ <br>

کاربرد: برای شکستن خط و رفتن به سر خط جدید درون یک پاراگراف بدون ایجاد پاراگراف جدید. این تگ خودبسته (Void / Self-closing) است و محتوایی درونی ندارد.

<p> آدرس دانشکده:<br> تهران، خیابان آزادی، بالاتر از دانشگاه،<br> ساختمان فنی و مهندسی دختران، طبقه سوم. </p>

تگ <hr>

کاربرد: برای ایجاد یک خط افقی جداکننده و نشان دادن یک تغییر موضوعی (Thematic Break) بین دو بخش در صفحه. این تگ نیز خودبسته (Void) است.


<section>

 <h2>معرفی درس</h2>

<p>در این بخش سرفصل‌ها توضیح داده می‌شوند.</p>

</section>

 <hr>

<section>

 <h2>مراجع و منابع</h2>

<p>کتاب مرجع HTML5 تالیف انتشارات W3C.</p>

</section>

فرم‌ها و عناصر دریافت ورودی در HTML5

فرم‌ها (Forms) پل ارتباطی میان کاربر و سرور هستند که امکان دریافت، اعتبارسنجی و ارسال داده‌ها را فراهم می‌کنند.

تگ کانتینر فرم: <form>

کاربرد: ظرف اصلی که تمام فیلدهای ورودی، دکمه‌ها و گزینه‌ها را در بر می‌گیرد و مشخص می‌کند داده‌ها چگونه و به کجا ارسال شوند.
صفت‌های اصلی (Attributes):
- action: آدرس URL مقصدی که داده‌ها برای پردازش به آن فرستاده می‌شوند (مثلاً فایل PHP یا کنترلر سرور).
- method: متد پروتکل HTTP برای ارسال داده‌ها:
GET: داده‌ها را در انتهای URL ضمیمه می‌کند (مناسب برای جستجوها، نامناسب برای داده‌های حساس/رمز عبور).
POST: داده‌ها را در بدنه (Body) درخواست ارسال می‌کند (امن‌تر، مناسب برای ثبت‌نام، ورود و ارسال فایل).

<form action="/login" method="POST >

<!-- فیلدهای ورودی در این قسمت قرار می‌گیرند -->

</form>

تگ ورودی همه‌منظوره: <input>

کاربرد: انعطاف‌پذیرترین تگ HTML برای دریافت انواع داده از کاربر. این تگ خودبسته (Void) است.
صفت‌های اصلی:
- type: نوع ورودی را مشخص می‌کند (مثل text, password, email, number, hidden).
- name: حیاتی‌ترین صفت برای بک‌اند؛ نام کلیدی که مقدار ورودی با آن به سرور ارسال می‌شود (Key/Value).
- value: مقدار پیش‌فرض یا فعلی داخل فیلد.
- placeholder: متن راهنمای خاکستری داخل فیلد پیش از نوشتن کاربر.


<label for="username">نام کاربری:</label>

 <input type="text" id="username" name="username" placeholder="مثلاً: s_ahmadi" >

<label for="pass">رمز عبور:</label>

<input type="password" id="pass" name="password" required>

<label for="grade">نمره پایانی:</label>

<input type="number" id="grade" name="grade" >

تک‌گزینه‌ای: type="radio"

کاربرد: زمانی استفاده می‌شود که کاربر باید از بین چند گزینه، دقیقاً یک گزینه را انتخاب کند (مانند جنسیت، مقطع تحصیلی یا وضعیت تاهل).

صفت‌های اصلی:

name: بسیار مهم؛ تمام گزینه‌هایی که به یک گروه تعلق دارند باید دقیقاً یک name یکسان داشته باشند تا انتخاب یکی باعث لغو انتخاب بقیه شود.
value: مقداری که در صورت انتخاب شدن این گزینه، به سمت سرور فرستاده می‌شود.
checked: گزینه‌ای که به طور پیش‌فرض انتخاب شده است.

چندگزینه‌ای / انتخابی: type="checkbox"

کاربرد: برای انتخاب‌های صفر، یک یا چند موردی (مثل انتخاب مهارت‌ها، علایق یا تایید قوانین سایت).

صفت‌های اصلی:

name: نام کلید برای ارسال به سرور.
value: مقداری که در صورت تیک خوردن فرستاده می‌شود (اگر مشخص نشود، پیش‌فرض "on" ارسال می‌شود).
checked: تعیین تیک‌خوردن پیش‌فرض هنگام لود صفحه.
required: برای مواردی مانند «پذیرش قوانین» کاربرد دارد که تا تیک نخورد فرم ارسال نمی‌شود.

منوی کشویی: <select> به همراه <option>

کاربرد: ساخت منوی آبشاری (Dropdown) برای فشرده‌سازی فرم و انتخاب یک یا چند گزینه از یک لیست طولانی (مانند لیست استان‌ها یا سال‌های تولد).


<label for="majorSelect">رشته تحصیلی:</label>

<select id="majorSelect" name="major" required>

<option value="software">مهندسی نرم‌افزار</option>

 <option value="it">مهندسی فناوری اطلاعات</option>

<option value="network">شبکه‌های کامپیوتری</option>

</select>

ورودی متنی چندخطی: <textarea>

کاربرد: برای دریافت متن‌های طولانی و چندخطی مانند نظرات، پیام‌ها، آدرس پستی یا توضیحات پروژه‌ها (برخلاف <input type="text"> که تک‌خطی است).

<label for="projectDesc">شرح مختصر پروژه پایانی:</label>

<br>

<textarea id="projectDesc" name="project_description ></textarea>

تگ دکمه: <button>

کاربرد: ایجاد دکمه‌های قابل کلیک برای ارسال فرم، ریست کردن داده‌ها یا فراخوانی اسکریپت‌های جاوااسکریپت. نسبت به <input type="submit"> انعطاف بیشتری دارد چون می‌تواند داخل خود آیکون، تصویر یا تگ‌های دیگر را جای دهد.
صفت‌های اصلی:
- type: عملکرد کلیک روی دکمه را مشخص می‌کند:
submit: (رفتار پیش‌فرض) فرم را ارسال می‌کند.
reset: تمام فیلدهای داخل فرم را به مقادیر اولیه و پیش‌فرض برمی‌گرداند.
button: هیچ رفتار پیش‌فرض فرمی ندارد و صرفاً منتظر رویداد کلیک در JavaScript می‌ماند.


<button type="submit">

<span>ثبت و ذخیره اطلاعات</span>

</button>

 <button type="reset">پاک کردن فرم</button>

<button type="button" onclick="alert('کد رهگیری صادر شد')">محاسبه شهریه</button>

HTML 5

تگ <header>

مفهوم: سربرگ صفحه یا سربرگ یک بخش مجزا (<article> یا <section>). معمولاً شامل لوگو، تیتر اصلی و منو است.

<header>

<h1>پرتال دانشجویی دانشگاه دختران</h1>

 <p>سامانه خدمات الکترونیک آموزشی</p>

 </header>

تگ <nav> (Navigation)

مفهوم: مختص بلوک پیوندهای هدایت‌کننده و ناوبری اصلی سایت (منوها، فهرست‌ها، صفحه‌بندی‌ها). نباید تمام لینک‌های متفرقه صفحه داخل nav قرار گیرند.

<nav>

 <ul>

 <li><a href="#home">صفحه اصلی</a></li>

<li><a href="#courses">دروس ارائه‌شده</a></li>

<li><a href="#contact">تماس با گروه</a></li> </ul>

</nav>

تگ <main>

مفهوم: محتوای مرکزی، اصلی و منحصربه‌فرد صفحه. محتویاتی که در تمام صفحات تکرار می‌شوند (مانند هدر عمومی، لوگو، کپی‌رایت فوتر) نباید درون <main> باشند. در هر سند HTML5 تنها یک تگ <main> مجاز است.

<main>

<h2>برنامه امتحانات پایان‌ترم</h2>

 <p>امتحانات از تاریخ ۲۰ دی‌ماه آغاز خواهند شد...</p>

 </main>

تگ <section>

مفهوم: یک بخش موضوعی مستقل از سند که معمولاً تیتر اختصاصی خود را دارد (مثل بخش «درباره ما»، «اخبار دانشکده» یا «خدمات»).

<section>

<h2>اخبار دانشکده</h2>

<p>کارگاه آموزشی C# روز چهارشنبه در سایت ۲ برگزار می‌شود.</p>

</section>

تگ <article>

مفهوم: محتوایی کاملاً مستقل، خودکفا و قابل بازنشر در هر جای دیگر (مانند یک پست وبلاگی، یک خبر، یا دیدگاه کاربر).

<article>

 <h3>معرفی زبان جاوا در وب</h3>

 <p>زبان جاوا برای برنامه‌نویسی سمت سرور و اپلیکیشن‌ها کاربرد دارد...</p>

 </article>

تفاوت با section: اگر بتوان محتوا را از کل سایت جدا کرد و به صورت مستقل خواند یا در سایتی دیگر منتشر کرد، آن محتوا <article> است.

تگ <aside>

مفهوم: محتوایی که با محتوای اطراف ارتباط دارد اما فرعی و جانبی است؛ مانند نوار کناری (سایدبار)، نقل‌قول‌های کادربندی‌شده، تبلیغات یا لینک‌های مرتبط.

<aside>

<h4>تقویم آموزشی</h4>

<p>آخرین مهلت حذف و اضافه: پنج‌شنبه این هفته.</p>

 </aside>

تگ <footer>

مفهوم: پانویس صفحه، مقاله یا بخش؛ معمولاً شامل اطلاعات نویسنده، حق کپی‌رایت، شرایط استفاده و اطلاعات تماس.
```
<footer>

 <p>کلیه حقوق برای گروه کامپیوتر محفوظ است © ۱۴۰۵</p>

</footer>
```

HTML5 بدون نیاز به پلاگین‌ها، امکان پخش مستقیم ویدیو، صدا و ترسیم اشکال را آورد:

تگ <video>

مفهوم: درج و پخش فایل‌های تصویری با کنترل‌های کامل مرورگر.
اتریبیوت‌های مهم: controls (کنترل‌های پخش)، autoplay (پخش خودکار)، loop (تکرار)، muted (بی‌صدا)، poster (تصویر پیش‌نمایش).

<video width="600" controls poster="poster.jpg">

<source src="lecture1.mp4" type="video/mp4">

 <source src="lecture1.webm" type="video/webm"> مرورگر شما از پخش مستقیم ویدیو پشتیبانی نمی‌کند. </video>

تگ <audio>

مفهوم: پخش فایل‌های صوتی مانند پادکست‌ها، فایل‌های ضبط‌شده یا موسیقی.

<audio controls>

    <source src="session1-voice.mp3" type="audio/mpeg">

    مرورگر شما قادر به پخش فایل صوتی نیست.

</audio>

تگ <source>

مفهوم: عنصر خودبسته داخل تگ‌های <video>, <audio> و <picture> برای فراهم کردن فرمت‌های مختلف مدیا تا مرورگر بهترین فرمت سازگار را انتخاب کند.

<audio controls>

    <source src="session1-voice.mp3" type="audio/mpeg">

    مرورگر شما قادر به پخش فایل صوتی نیست.

</audio>

برای شناسایی، دسته‌بندی و استایل‌دهی (رنگ، اندازه، فاصله و…) به عناصر صفحه، از دو صفت عمومی id و class استفاده می‌کنیم. در تدریس این مبحث، درک تفاوت دقیق این دو از نظر منحصر‌به‌فرد بودن کلیدی‌ترین بخش است.

صفت id (شناسه)

تعریف: شناسه‌ای کاملاً یکتا و منحصربه‌فرد در کل سند HTML است. یعنی در یک صفحه، هیچ دو عنصری نباید id یکسانی داشته باشند.
علامت در CSS: با علامت هش یا پوند (#) انتخاب می‌شود.

صفت class (کلاس یا دسته‌بندی)

تعریف: برچسبی است که می‌توانید آن را به چندین عنصر مختلف در صفحه بدهید تا در یک دسته قرار گیرند.
علامت در CSS: با علامت نقطه (.) انتخاب می‌شود.

مبانی CSS و نحوه اتصال به HTML

۱. CSS چیست و چگونه کار می‌کند؟

تعریف: کلمه CSS مخفف Cascading Style Sheets (برگه‌های استایل آبشاری) است.
نقش: اگر کدهای HTML را اسکلت بتنی و دیوارهای یک ساختمان در نظر بگیریم، CSS نقاشی دیوارها، نورپردازی، دکوراسیون و زیبایی آن است.
نحوه کارکرد: وقتی مرورگر فایل HTML را می‌خواند و درخت ساختاری آن (DOM) را تشکیل می‌دهد، کدهای CSS را روی این المان‌ها اعمال کرده و صفحه را با رنگ و چیدمان مشخص به کاربر نمایش می‌دهد (عملیات Render).

روش‌های اضافه کردن CSS به HTML

ما سه روش برای اتصال استایل‌ها به صفحات وب داریم:

روش اول: درون‌خطی (Inline CSS)

استایل مستقیماً داخل صفت style تگ HTML نوشته می‌شود.

روش دوم: داخلی (Internal CSS)

استایل‌ها در بخش <head> صفحه و درون تگ <style> قرار می‌گیرند.

روش سوم: خارجی (External CSS) - بهترین روش استاندارد

کدها درون یک فایل جداگانه (مثلاً style.css) ذخیره شده و با تگ <link> در بخش <head> فراخوانی می‌شوند.

آناتومی و سینتکس CSS

یک قاعده استایل‌دهی (Rule-set) از اجزای زیر تشکیل شده است:

Selector

{

 Property: Value;

}

Selector انتخاب‌گر): مشخص می‌کند استایل روی کدام تگ/عنصر اعمال شود (مثلاً h1).

Property ویژگی): چه خصوصیتی قرار است تغییر کند (مثلاً color یا font-size).

Value مقدار): مقداری که برای آن ویژگی تعیین می‌کنیم (مثلاً red یا 20px).

کامنت‌گذاری (Comments): توضیحاتی که مرورگر آنها را اجرا نمی‌کند:

/* این یک کامنت تک‌خطی یا چندخطی است */

سلکتورهای ترکیبی (Combinators)

فرزند مستقیم (>): فقط فرزندان مستقیم:

div > p { color: orange; }

تمام نوادگان (فاصله ): تمام تگ‌های درون تگ مادر (فرزند، نوه و…):

div p { color: green; }

سلکتور کلاس (class) — مثل «یونیفرم مدرسه»

مفهوم: کلاس یعنی یک ویژگی مشترک که می‌تواند به چندین عنصر مختلف داده شود؛ درست مثل لباس فرم مدرسه که تنِ ده‌ها دانش‌آموز در یک کلاس است!
علامت در CSS: برای صدا زدن کلاس در CSS، قبل از نام آن یک نقطه (.) می‌گذاریم.
کاربرد: هر زمان که می‌خواهید چند عنصر (مثلاً چندین دکمه، چند کارت محصول، یا چند پاراگراف) ظاهر یکسانی داشته باشند، از class استفاده می‌کنید.
چند کلاسه بودن: یک عنصر در HTML می‌تواند هم‌زمان چند کلاس مختلف داشته باشد (با فاصله از هم جدا می‌شوند).

<!-- استفاده از یک کلاس مشترک روی چند دکمه -->

<button class="btn">ثبت نام</button> <button class="btn">ورود</button>

 <!-- یک عنصر با دو کلاس مختلف -->

 <button class="btn btn-danger">حذف حساب</button>

 <!-- اعمال کلاس روی کارت‌های محصول -->

<div class="card">محصول ۱</div>

 <div class="card">محصول ۲</div>

/* استایل مشترک تمام دکمه‌ها */

.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; }

/* استایل اختصاصی دکمه خطر (قرمز) */

 .btn-danger { background-color: red; color: white; }

 /* استایل کارت‌ها */

 .card { border: 1px solid #ccc; padding: 15px; margin-bottom: 10px; }

سلکتور شناسه (id) — مثل «کد ملی یا اثر انگشت»

مفهوم: شناسه یا id کاملاً منحصربه‌فرد (Unique) است. در کلِ یک صفحه HTML، فقط و فقط یک عنصر باید یک id مشخص را داشته باشد (مثل شماره ملی که به دو نفر داده نمی‌شود).
علامت در CSS: برای صدا زدن ID در CSS، قبل از نام آن یک هشتگ (#) می‌گذاریم.
کاربرد: برای بخش‌های اصلی و تکرارنشدنی صفحه وب (مثل هدر اصلی سایت، فرم جستجوی اصلی، فوتر، یا نوار ناوبری اصلی).
کاربرد در جاوااسکریپت و لینک‌های داخلی: علاوه‌بر CSS، از id برای لینک‌های جهشی در صفحه (Bookmark) و دسترسی سریع در JavaScript هم استفاده می‌شود.

<header id="main-header">

  <h1>وبلاگ دانش‌آموزی هنرستان</h1>

</header>

<!-- منوی اصلی -->

<nav id="navbar">

  <a href="#about-us">درباره ما</a>

</nav>



<!-- بخشی که لینک بالا به آن پرش می‌کند -->

<section id="about-us">

  <h2>درباره هنرستان ما</h2>

  <p>هنرستان فنی حرفه‌ای نمونه...</p>

</section>

CSS :

/* استایل هدر یکتا */
#main-header { background-color: #2c3e50; color: #ecf0f1; text-align: center; padding: 25px; }
/* استایل نوار ناوبری */
#navbar { background-color: #34495e; border-bottom: 3px solid #e74c3c; }

بخش اول: رنگ، فونت و ظاهر

color (رنگ متن)

برای تغییر رنگ نوشته‌ها استفاده می‌شود.

مقدارها: نام رنگ (red, blue)، کدهای هگز (#ff0000)، یا rgb

p { color: #ff5733; }

h1 { color: rgb(0, 128, 0); }

background (پس‌زمینه)

برای رنگ دادن به پشتِ عناصر یا گذاشتن عکس.

مقدارها: رنگ‌ها، یا url('image.jpg').
مثال:

div { background: lightblue; }

body { background: url('bg.jpg'); }

بخش دوم: باکس‌مدل (Box Model)

این مهم‌ترین بخش CSS است. هر عنصر در وب مثل یک جعبه است.

width و height (عرض و ارتفاع)

مقدارها: پیکسل (px) یا درصد (%).
مثال:

.box { width: 200px; height: 100px; }

min-width و min-height (حداقل‌ها)

مفید برای وقتی که نمی‌خواهیم باکس خیلی کوچک شود.

مثال:

.container { min-width: 300px; min-height: 500px; }

padding (فاصله داخلی)

فاصله بین “محتوا” و “دیوارِ دورِ محتوا”. مثل فاصله میوه‌ها تا دیواره سبد.

مثال:

div { padding: 20px; } /* از هر چهار طرف ۲۰ پیکسل فاصله */

margin (فاصله خارجی)

فاصله باکس از “بیرون” با بقیه عناصر. مثل فاصله دو تا سبد میوه از هم.

مثال:

div { margin: 10px; } /* از هر چهار طرف ۱۰ پیکسل فاصله */

border (دیواره باکس)خطی که دور باکس می‌کشیم.


.box { border: 2px solid black; }

 /* ضخامت ۲ پیکسل، نوع خط‌کشی معمولی، رنگ مشکی */

جزوه خلاصه شده درس طراحی وب (HTML - CSS - JavaScript)

رسول دانش

دیدگاه‌ها (75)

دیدگاه خود را بنویسید