مبحث اول

انواع لیست‌ها (ol, ul, dl) و لینک پرش درون‌صفحه‌ای

در پنجره سفید زیر، متن داخل هر تگ دقیقاً توضیح می‌دهد چه تگی است و چه کاری انجام داده است.

خروجی واقعی در صفحه وب (Browser Preview)

۱. لیست شماره‌دار با تگ والد <ol>:

این خط داخل تگ <li> است و چون پدرش <ol> است، مرورگر جلویش عدد ۱ گذاشته.
این هم تگ <li> دوم است که خودکار عدد ۲ گرفته.

۲. لیست نقطه‌ای (گلوله‌ای) با تگ والد <ul>:

این خط داخل تگ <li> است و چون پدرش <ul> است، مرورگر دایره مشکی گذاشته.
این هم تگ <li> بعدی داخل همان <ul> است.

۳. لیست تعاریف (واژه‌نامه) با <dl> و <dt> و <dd>:

تگ <dt> (عنوان اصلی واژه که سر خط قرار می‌گیرد): HTML: تگ <dd> (توضیح واژه بالا که مرورگر خودش زیر آن تورفتگی ایجاد می‌کند): زبان ساختار صفحات وب

۴. فرمول لینک پرشی (<a href="#id">) و دکمه بازگشت به بالا:

وقتی می‌نویسی <a href="#p-2">، با کلیک روی آن صفحه می‌پرد روی تگی که id="p-2" دارد. و وقتی می‌نویسی <a href="#">، صفحه مستقیم می‌پرد به بالای سایت.

📄 index.html

<!-- ۱. لیست شماره‌دار -->
<ol>
    <li>مورد اول</li>
    <li>مورد دوم</li>
</ol>

<!-- ۲. لیست نقطه‌ای -->
<ul>
    <li>مورد اول</li>
</ul>

<!-- ۳. لیست تعاریف -->
<dl>
    <dt>HTML</dt>
    <dd>زبان ساختار وب</dd>
</dl>

<!-- ۴. پرش درون‌صفحه‌ای -->
<a href="#p-2">برو به بخش دو</a>
<p id="p-2">متن مقصد...</p>
<a href="#"><button>Up</button></a>

🎨 style.css

/* حذف دایره‌های سیاه پیش‌فرض لیست */
ul {
    list-style: none;
}

/* حذف خط زیر لینک‌ها */
a {
    text-decoration: none;
}

مبحث دوم

ساختار جدول (<table>, <tr>, <th>, <td>)

تگ <tr> سطر افقی می‌سازد، <th> خانه سرستون پررنگ است و <td> خانه داده معمولی.

شبیه‌ساز زنده جدول در مرورگر

کل جدول زیر داخل <table border="1"> قرار دارد:

ردیف ۱ (<tr>) \| خانه اول با <th> (خودکار ضخیم و وسط‌چین)	ردیف ۱ (<tr>) \| خانه دوم با <th>
ردیف ۲ (<tr>) \| خانه اول با <td> (متن ساده)	ردیف ۲ (<tr>) \| خانه دوم با <td> (متن ساده)

📄 index.html

<table border="1">
    <tr>
        <th>نام درس</th>
        <th>نمره</th>
    </tr>
    <tr>
        <td>طراحی وب</td>
        <td>20</td>
    </tr>
</table>

📌 خلاصه ۳ ثانیه‌ای برای امتحان:

<table border="1">: کادر اصلی جدول به همراه خطوط دور.
<tr>: شروع یک خط افقی جدید.
<th>: سلول تیتر (ضخیم و وسط‌چین خودکار).
<td>: سلول اطلاعات معمولی.

مبحث سوم

فرم‌ها (<form>) و ۶ مدل <input> امتحانی

تست زنده انواع ورودی‌ها + آزمایش صفت name در دکمه‌های رادیویی.

خروجی زنده فرم در مرورگر

۱. <input type="text"> (متن ساده):

۲. <input type="password"> (مخفی‌ساز رمز):

۳. <input type="color"> (پالت رنگ):

کلیک کن تا پنجره انتخاب رنگ باز شود

۴. <input type="checkbox"> (چندانتخابی):

گزینه اول گزینه دوم

۵. نکته قطعی امتحان در `type="radio"` (تک‌انتخابی):

گزینه الف گزینه ب

✅ وضعیت فعلی: چون هر دو name="exam_group" دارند، با انتخاب یکی، قبلی خاموش می‌شود.

📄 index.html

<form>
    <label>نام:</label>
    <input type="text" placeholder="...">
    <input type="password">
    <input type="color">
    <input type="checkbox">
    <input type="radio" name="same_name">
    <input type="radio" name="same_name">
    <input type="submit" value="ارسال">
</form>

مبحث چهارم

تگ <img> و فرمول دایره کردن عکس در CSS

هر خط CSS را خاموش و روشن کن تا تاثیر آن را روی تصویر ببینی.

کلیدهای تغییر زنده ویژگی‌های CSS:

شرط دایره شدن: width و height برابر باشند + border-radius: 50%

📄 index.html

<img class="circle-img" src="pic.jpg" alt="...">

🎨 style.css

.circle-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid green;
    padding: 8px;
}

مبحث پنجم

انتخابگرها (تگ، .کلاس، #آیدی) و حالت :hover

چه زمانی نقطه می‌گذاریم، چه زمانی هشتگ، و چطور فرزندِ داخل یک تگ را هاور می‌کنیم.

۱. بدون علامت (نام تگ)

وقتی در HTML فقط نام تگ است: <p>

p { color: red; }

۲. نقطه . (برای class)

وقتی در HTML داریم: class="box"

.box { color: blue; }

۳. هشتگ # (برای id)

وقتی در HTML داریم: id="p-2"

#p-2 { color: green; }

تست زنده تفاوت دو فرمول هاور برای تگ `<a>` داخل `<h1>`:

فرمول اول: h1 a:hover (نشانگر ماوس باید دقیقاً روی خودِ لینک برود)

اینجا متن ساده h1 است | ماوس را بیاور روی من (تگ a)

فرمول دوم: h1:hover a (نشانگر ماوس روی هر نقطه‌ای از کل h1 بیاید، تگ a سبز می‌شود)

ماوس را بیاور روی این متن عادی h1 ⬅️ اما من (تگ a) تغییر می‌کنم!

مبحث ششم

کنار هم چیدن کارت‌ها با Flexbox

با دادن display: flex به کادر والد، تمام کارت‌های داخلش در یک سطر افقی قرار می‌گیرند.

کارت ۱

به خاطر display: flex روی والد، کنار بقیه ایستادم.

کارت ۲

فاصله منظم بین ما اثر gap: 20px است.

کارت ۳

پخش مساوی در سطر اثر space-between است.

📄 index.html

<div class="parent-box">
    <div class="card">کارت ۱</div>
    <div class="card">کارت ۲</div>
    <div class="card">کارت ۳</div>
</div>

🎨 style.css

.parent-box {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}
.card {
    width: 30%;
}

مبحث هفتم

شبکه‌بندی سطری و ستونی با CSS Grid

تقسیم صفحه به ستون‌های دلخواه با واحد fr (سهم).

تغییر زنده grid-template-columns:

خانه ۱

خانه ۲ (ستون میانی)

خانه ۳

خانه ۴

خانه ۵

خانه ۶

📄 index.html

<div class="grid-box">
    <div class="item">۱</div>
    <div class="item">۲</div>
    <div class="item">۳</div>
</div>

🎨 style.css

.grid-box {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 15px;
}

مبحث هشتم

نوار منو (Navbar) و زیرمنوی کشویی (Dropdown)

فرمول دو مرحله‌ای: زیرمنو در حالت عادی display: none است و با هاور والد display: block می‌شود.

نشانگر ماوس را روی «گزینه ۲: محصولات» ببر تا زیرمنو باز شود:

📄 index.html

<ul class="main-menu">
    <li><a href="#">خانه</a></li>
    <li class="dropdown">
        <a href="#">محصولات</a>
        <ul class="sub-menu">
            <li><a href="#">مورد ۱</a></li>
        </ul>
    </li>
</ul>

🎨 style.css

.main-menu { display: flex; list-style: none; }
.dropdown { position: relative; }
.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
}
.dropdown:hover .sub-menu {
    display: block;
}

قابلیت جدید (مورد ۴)

🃏 فلش‌کارت‌های سه‌بعدی مرور سریع شب امتحان

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

کارت ۱ از ۱۴ وضعیت: مرور نشده

HTML کلیک کن تا جواب را ببینی 🔄

می‌توانی با کلید Space هم کارت را بچرخانی

جواب و کد امتحانی ✅ کلیک برای برگشت

قابلیت جدید (مورد ۵)

⚡ جستجوی زنده در تگ‌ها + برگه تقلب خام

هر کلمه‌ای (فارسی یا انگلیسی مثل table، جدول، گرد، radio، hover) تایپ کن تا در لحظه فقط همان تگ بماند.

📄 نسخه یکپارچه تگ‌های خام (بدون توضیح فارسی - اول HTML بعد خط جداکننده بعد CSS)

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>
    <p>...</p>
    <b>...</b>   <strong>...</strong>
    <br>
    <hr>

    <a href="https://..." target="_blank">...</a>
    <a href="#id-name">...</a>
    <a href="#"><button>Up</button></a>

    <img src="pic.jpg" alt="..." width="150" height="150">

    <div class="..." id="...">...</div>
    <nav>...</nav>

    <ol>
        <li>...</li>
    </ol>

    <ul>
        <li>...</li>
    </ul>

    <dl>
        <dt>...</dt>
        <dd>...</dd>
    </dl>

    <table border="1">
        <tr>
            <th>...</th>
            <th>...</th>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </table>

    <form>
        <label>...</label>
        <input type="text" placeholder="...">
        <input type="password">
        <input type="color">
        <input type="checkbox">
        <input type="radio" name="same_name">
        <input type="radio" name="same_name">
        <input type="submit" value="...">
    </form>

</body>
</html>

==================================================

tag { }
.class { }
#id { }
tag:hover { }
h1 a:hover { }
h1:hover a { }

color: red;
background-color: blue;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
list-style: none;

width: 150px;
height: 150px;
border: 4px solid green;
border-radius: 50%;
padding: 10px;
margin: 10px;
transition: 0.3s;

display: flex;
justify-content: space-between;
gap: 20px;

display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 15px;

.dropdown { position: relative; }
.sub-menu { display: none; position: absolute; top: 100%; right: 0; }
.dropdown:hover .sub-menu { display: block; }

پلتفرم مرور سریع HTML & CSS

انواع لیست‌ها (ol, ul, dl) و لینک پرش درون‌صفحه‌ای

۱. لیست شماره‌دار با تگ والد <ol>:

۲. لیست نقطه‌ای (گلوله‌ای) با تگ والد <ul>:

۳. لیست تعاریف (واژه‌نامه) با <dl> و <dt> و <dd>:

۴. فرمول لینک پرشی (<a href="#id">) و دکمه بازگشت به بالا:

ساختار جدول (<table>, <tr>, <th>, <td>)

📌 خلاصه ۳ ثانیه‌ای برای امتحان:

فرم‌ها (<form>) و ۶ مدل <input> امتحانی

۵. نکته قطعی امتحان در `type="radio"` (تک‌انتخابی):

تگ <img> و فرمول دایره کردن عکس در CSS

کلیدهای تغییر زنده ویژگی‌های CSS:

انتخابگرها (تگ، .کلاس، #آیدی) و حالت :hover

تست زنده تفاوت دو فرمول هاور برای تگ `<a>` داخل `<h1>`:

اینجا متن ساده h1 است | ماوس را بیاور روی من (تگ a)

ماوس را بیاور روی این متن عادی h1 ⬅️ اما من (تگ a) تغییر می‌کنم!

کنار هم چیدن کارت‌ها با Flexbox

شبکه‌بندی سطری و ستونی با CSS Grid

نوار منو (Navbar) و زیرمنوی کشویی (Dropdown)

🃏 فلش‌کارت‌های سه‌بعدی مرور سریع شب امتحان

⚡ جستجوی زنده در تگ‌ها + برگه تقلب خام

🧪 ادیتور زنده (تست هم‌زمان HTML و CSS)

انواع لیست‌ها (ol, ul, dl) و لینک پرش درون‌صفحه‌ای

۱. لیست شماره‌دار با تگ والد <ol>:

۲. لیست نقطه‌ای (گلوله‌ای) با تگ والد <ul>:

۳. لیست تعاریف (واژه‌نامه) با <dl> و <dt> و <dd>:

۴. فرمول لینک پرشی (<a href="#id">) و دکمه بازگشت به بالا:

ساختار جدول (<table>, <tr>, <th>, <td>)

📌 خلاصه ۳ ثانیه‌ای برای امتحان:

فرم‌ها (<form>) و ۶ مدل <input> امتحانی

۵. نکته قطعی امتحان در type="radio" (تک‌انتخابی):

تگ <img> و فرمول دایره کردن عکس در CSS

کلیدهای تغییر زنده ویژگی‌های CSS:

انتخابگرها (تگ، .کلاس، #آیدی) و حالت :hover

تست زنده تفاوت دو فرمول هاور برای تگ <a> داخل <h1>:

اینجا متن ساده h1 است | ماوس را بیاور روی من (تگ a)

ماوس را بیاور روی این متن عادی h1 ⬅️ اما من (تگ a) تغییر می‌کنم!

کنار هم چیدن کارت‌ها با Flexbox

شبکه‌بندی سطری و ستونی با CSS Grid

نوار منو (Navbar) و زیرمنوی کشویی (Dropdown)

🃏 فلش‌کارت‌های سه‌بعدی مرور سریع شب امتحان

⚡ جستجوی زنده در تگ‌ها + برگه تقلب خام

🧪 ادیتور زنده (تست هم‌زمان HTML و CSS)

۵. نکته قطعی امتحان در `type="radio"` (تک‌انتخابی):

تست زنده تفاوت دو فرمول هاور برای تگ `<a>` داخل `<h1>`: