تگ‌های سرتیتر که با حرف h (مخفف Heading) شناخته می‌شوند، از "h1" شروع شده و تا "h6" ادامه دارند. این تگ‌ها نقشی حیاتی در ساختاردهی به محتوا و بهبود سئو (بهینه‌سازی برای موتورهای جستجو) دارند.

قوانین استفاده و محدودیت‌ها

• تگ h1: در هر صفحه وب فقط یکبار مجاز به استفاده هستید. این تگ بیانگر موضوع کلیدی صفحه است.
• تگ h2: برای بخش‌های اصلی محتوا استفاده می‌شود. پیشنهاد می‌شود بین ۲ تا ۳ بار استفاده شود.
• تگ h3: برای زیرمجموعه‌های تگ h2به کار می‌رود. معمولاً بین ۳ تا ۵ بار استفاده می‌شود.
• تگ‌های h4, h5, h6: برای جزئیات کمتر و زیرمجموعه‌های عمیق‌تر استفاده می‌شوند و محدودیت خاصی ندارند.

آنالوژی کتاب (مثال درک بهتر)

برای اینکه سلسله مراتب را بهتر درک کنید، یک کتاب را تصور کنید:

مثال عملی (کد و خروجی)

در اینجا نحوه نوشتن کد و نمایش آن در مرورگر را مشاهده می‌کنید:

<h1>آکادمی محمد حسین سلیمانی</h1>
<h2>آموزش طراحی وب</h2>
<h3>مبحث تگ‌های تیتر</h3>
<h4>آشنایی با تگ‌ها</h4>
<h5>اهمیت برای سئو</h5>
<h6>مثال عملی</h6>

در این درس با دو عنصر بسیار مهم آشنا می‌شویم: تگ پاراگراف برای ساختاربندی متن و تگ کامنت برای یادداشت‌گذاری در کد.

تگ پاراگراف <p>

تگ <p> (مخفف Paragraph) یکی از پرکاربردترین تگ‌ها در HTML است. هر متنی که بخواهید به عنوان یک پاراگراف مجزا نمایش داده شود، باید درون این تگ قرار گیرد. مرورگرها به طور خودکار، مقداری فاصله (margin) قبل و بعد از هر پاراگراف ایجاد می‌کنند تا خوانایی متن افزایش یابد.

مثال عملی:

<p>این پاراگراف اول است. با استفاده از این تگ، می‌توانیم متون طولانی را به بخش‌های خوانا و مرتب تقسیم کنیم.</p>
<p>این پاراگراف دوم است. توجه کنید که مرورگر چگونه به صورت خودکار بین این دو پاراگراف فاصله ایجاد می‌کند.</p>

تگ کامنت <!-- -->

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

کاربردهای اصلی کامنت:

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

مثال عملی:

<h2>گالری تصاویر</h2>

<!-- این بخش گالری تصاویر است که بعداً تکمیل می‌شود -->
<p>در اینجا تصاویر محصولات قرار خواهد گرفت.</p>

<!-- <p>این پاراگراف به صورت موقت نمایش داده نمی‌شود.</p> -->

این تگ‌ها به ما اجازه می‌دهند تا ظاهر و معنای بخش‌های خاصی از متن را تغییر دهیم. برخی از این تگ‌ها صرفاً ظاهری هستند، اما برخی دیگر دارای بار معنایی برای موتورهای جستجو و نرم‌افزارهای صفحه‌خوان می‌باشند.

جدول خلاصه تگ‌ها

pre formatted

بررسی دقیق و مثال‌های کاربردی

تفاوت <b> و <strong>

هر دو تگ متن را بولد می‌کنند، اما <strong> به موتور جستجو می‌گوید که این بخش از متن دارای "اهمیت زیادی" است.

<p>این یک متن <b>عادی بولد شده</b> است.</p>
<p><strong>هشدار:</strong> این بخش بسیار مهم است!</p>

تفاوت <i> و <em>

هر دو تگ متن را کج می‌کنند. از <i> برای اسامی خاص یا اصطلاحات فنی و از <em> برای "تاکید" روی یک کلمه استفاده کنید.

<p>کلمه <i>HTML</i> مخفف HyperText Markup Language است.</p>
<p>شما <em>باید</em> این تمرین را انجام دهید.</p>

تگ‌های ویرایشی: <del>, <ins> و <mark>

این تگ‌ها برای نمایش تغییرات یا هایلایت کردن متن به کار می‌روند.

<p>تخفیف ویژه: <del>$100</del> <ins>$75</ins></p>
<p>نکته کلیدی در متن <mark>اینجاست</mark>.</p>

تگ‌های اندازه‌بندی: <sup>, <sub> و <small>

برای کاربردهای ریاضی، شیمیایی یا نمایش متون جانبی استفاده می‌شوند.

<p>فرمول معروف اینشتین: E = mc<sup>2</sup></p>
<p>فرمول شیمیایی آب: H<sub>2</sub>O</p>
<footer><small>© 1405 کلیه حقوق محفوظ است.</small></footer>

تگ‌های فنی: <code>, <kbd> و <pre>

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

<p>برای کپی کردن متن، کلیدهای <kbd>Ctrl</kbd> + <kbd>C</kbd> را فشار دهید.</p>
<p>با استفاده از تگ <code>&lt;p&gt;</code> یک پاراگراف بسازید.</p>
<pre>
  function sayHello() {
    console.log("Hello, World!");
  }
</pre>

  function sayHello() {
    console.log("Hello, World!");
  }

نقل قول: <blockquote>

برای نمایش نقل قول‌های طولانی که از منبع دیگری گرفته شده‌اند استفاده می‌شود. مرورگرها معمولاً آن را با یک تورفتگی نمایش می‌دهند.

<blockquote cite="http://www.worldwildlife.org/who/index.html">
برای شصت سال، WWF به عنوان صدای پیشرو برای طبیعت کار کرده است. ما با جوامع محلی برای حفظ منابع طبیعی که به آنها وابسته هستند، همکاری می‌کنیم.
</blockquote>

قبل از اینکه به سراغ تگ بسیار مهم لینک (<a>) برویم، لازم است با ساختار اصلی و مشترک همه تگ‌ها در HTML آشنا شویم. درک این ساختار به شما کمک می‌کند تا عملکرد تمام تگ‌های آینده را به سادگی متوجه شوید.

ساختار یک عنصر (Element) در HTML

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

ویژگی‌ها (Attributes)

ویژگی‌ها اطلاعات تکمیلی را در مورد یک عنصر ارائه می‌دهند و همیشه در تگ باز (Start Tag) قرار می‌گیرند. هر ویژگی از یک نام و یک مقدار تشکیل شده است که به صورت name="value" نوشته می‌شود.

مثال با تگ <div> و ویژگی class

تگ <div> یک ظرف یا نگهدارنده (container) عمومی است و ویژگی class یک نام دسته‌بندی برای استایل‌دهی به آن اختصاص می‌دهد.

<div class="container">این محتوای داخل div است.</div>

• تگ باز: <div class="container">
• نام ویژگی (Attribute Name): class
• مقدار ویژگی (Attribute Value): "container"
• محتوا (Content): "این محتوای داخل div است."
• تگ بسته: </div>

مثال با تگ <a> و ویژگی href

تگ <a> (مخفف Anchor) برای ایجاد لینک استفاده می‌شود و ویژگی href (مخفف Hypertext Reference) آدرس مقصد لینک را مشخص می‌کند.

<a href="https://mhsoleymani.ir/">وبسایت شخصی من</a>

• تگ باز: <a href="https://mhsoleymani.ir/">
• نام ویژگی: href
• مقدار ویژگی: "https://mhsoleymani.ir/"
• محتوا (متن لینک): "وبسایت شخصی من"
• تگ بسته: </a>

کاربردهای مختلف تگ لینک <a>

مقدار ویژگی href می‌تواند انواع مختلفی از آدرس‌ها را بپذیرد و در نتیجه عملکردهای متفاوتی را ایجاد کند. در جدول زیر انواع لینک‌های پرکاربرد را مشاهده می‌کنید.

هر صفحه وب از بخش‌های مختلفی مانند سربرگ (header)، منوی ناوبری (navigation)، محتوای اصلی (main content) و پاورقی (footer) تشکیل شده است. در گذشته و حال، روش‌های متفاوتی برای جداسازی و تعریف این بخش‌ها وجود داشته است.

روش قدیمی: استفاده از <div> (Non-Semantic)

تا قبل از معرفی HTML5، توسعه‌دهندگان برای ساختاربندی تمام بخش‌های یک صفحه، از تگ <div> استفاده می‌کردند. تگ <div> (مخفف Division) یک نگهدارنده عمومی است و به خودی خود هیچ معنا و مفهومی ندارد. به این نوع تگ‌ها، "غیرمعنایی" یا Non-Semantic می‌گویند.

ما با استفاده از ویژگی‌های id یا class به این div ها هویت می‌دادیم تا برای مرورگر و خودمان قابل تشخیص باشند.

مثال ساختار غیرمعنایی

<!-- روش قدیمی و غیرمعنایی -->
<div id="header">
    <h1>عنوان اصلی سایت</h1>
    <div id="nav">
        <ul>
            <li><a href="#">خانه</a></li>
            <li><a href="#">درباره ما</a></li>
        </ul>
    </div>
</div>

<div id="main-content">
    <p>این محتوای اصلی صفحه است...</p>
</div>

<div id="footer">
    <p>کپی رایت © 1405</p>
</div>

روش مدرن: HTML معنایی (Semantic HTML)

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

عناصر اصلی ساختاری در HTML5

مثال ساختار معنایی

<!-- روش مدرن و معنایی -->
<header>
    <h1>عنوان اصلی سایت</h1>
    <nav>
        <ul>
            <li><a href="#">خانه</a></li>
            <li><a href="#">درباره ما</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <p>این محتوای اصلی صفحه است...</p>
    <article>
</main>

<footer>
    <p>کپی رایت © 1405</p>
</footer>

سایر تگ‌های ساختاری و متنی

علاوه بر تگ‌های بالا، چند تگ دیگر نیز در ساختاربندی و جداسازی محتوا نقش دارند:

• <span>: مانند <div> یک نگهدارنده بدون معناست، اما برای بخش‌های کوچکی از متن در یک خط (inline) به کار می‌رود. مثلا برای رنگی کردن یک کلمه خاص.
• <p>: تگ معنایی برای تعریف یک پاراگراف از متن.
• <br>: برای ایجاد یک شکست خط (line break). از این تگ برای ایجاد فاصله عمودی استفاده نکنید.
• <hr>: نشان‌دهنده یک جدایی موضوعی در متن است و به صورت یک خط افقی نمایش داده می‌شود.

لیست‌ها یکی از پرکاربردترین عناصر در HTML برای گروه‌بندی و نمایش مجموعه‌ای از آیتم‌های مرتبط هستند. از آن‌ها برای نمایش فهرست ویژگی‌های یک محصول، مراحل یک دستورالعمل یا حتی منوهای ناوبری وب‌سایت استفاده می‌شود. در HTML سه نوع لیست اصلی وجود دارد.

۱. لیست نامرتب (Unordered List)

زمانی که ترتیب آیتم‌ها اهمیتی ندارد، از لیست نامرتب استفاده می‌کنیم. هر آیتم در این لیست با یک علامت (معمولاً دایره توپر یا bullet) نمایش داده می‌شود. این لیست با تگ <ul> (مخفف Unordered List) ساخته می‌شود و هر آیتم آن درون تگ <li> (مخفف List Item) قرار می‌گیرد.

مثال لیست نامرتب

<p>لیست خرید هفتگی:</p>
<ul>
  <li>شیر</li>
  <li>نان</li>
  <li>تخم مرغ</li>
</ul>

خروجی:

۲. لیست مرتب (Ordered List)

وقتی ترتیب آیتم‌ها مهم باشد (مانند مراحل انجام یک کار یا رتبه‌بندی)، از لیست مرتب استفاده می‌کنیم. آیتم‌های این لیست به صورت پیش‌فرض با اعداد شماره‌گذاری می‌شوند. این لیست با تگ <ol> (مخفف Ordered List) ساخته می‌شود و هر آیتم آن نیز درون تگ <li> قرار می‌گیرد.

مثال لیست مرتب

<p>مراحل آماده کردن چای:</p>
<ol>
  <li>آب را بجوشانید.</li>
  <li>چای خشک را در قوری بریزید.</li>
  <li>آب جوش را به قوری اضافه کنید.</li>
  <li>۵ دقیقه صبر کنید تا دم بکشد.</li>
</ol>

خروجی:

۳. لیست توضیحات (Description List)

این نوع لیست برای نمایش لیستی از اصطلاحات و توضیحات مربوط به آن‌ها به کار می‌رود. این لیست از سه تگ تشکیل شده است:

• <dl> (Description List): تگ اصلی که کل لیست را در بر می‌گیرد.
• <dt> (Description Term): تگ مربوط به نام اصطلاح.
• <dd> (Description Details): تگ مربوط به توضیح آن اصطلاح.

مثال لیست توضیحات

<dl>
  <dt>HTML</dt>
  <dd>زبان نشانه‌گذاری فرامتن برای ساخت صفحات وب.</dd>
  <dt>CSS</dt>
  <dd>زبان استایل‌دهی برای طراحی ظاهر صفحات وب.</dd>
</dl>

خروجی:

مثال کاربردی: ساخت منوی ناوبری

یکی از رایج‌ترین کاربردهای لیست نامرتب (<ul>)، ساخت منوی ناوبری سایت است. از نظر معنایی، منو مجموعه‌ای از لینک‌های مرتبط است که ترتیب آن‌ها معمولاً اهمیتی ندارد. قرار دادن این لیست درون تگ معنایی <nav> بهترین روش استاندارد برای این کار است.

کد ساخت منو

<nav>
  <ul>
    <li><a href="/home">صفحه اصلی</a></li>
    <li><a href="/about">درباره ما</a></li>
    <li><a href="/products">محصولات</a></li>
    <li><a href="/contact">تماس با ما</a></li>
  </ul>
</nav>

خروجی ساختار منو (بدون استایل CSS):

تصاویر، فایل‌های صوتی و ویدیوها بخش جدایی‌ناپذیر وب مدرن هستند. HTML تگ‌های مشخصی برای قرار دادن این نوع محتوا در صفحات وب فراهم می‌کند.

۱. تگ تصویر (Image)

برای نمایش تصاویر در صفحه، از تگ <img> استفاده می‌کنیم. این تگ یک تگ "خالی" (empty) است، یعنی تگ بسته‌شدن ندارد و تمام اطلاعات آن از طریق ویژگی‌ها (attributes) تعریف می‌شود.

ویژگی‌های اصلی تگ <img>

مثال کامل تگ تصویر

<img 
    src="https://mhsoleymani.ir/mhs.jpg" 
    alt="عکس پروفایل محمدحسین سلیمانی" 
    width="200" 
    height="200"
    loading="lazy">

خروجی:

۲. تگ صدا (Audio)

در HTML5، با استفاده از تگ <audio> می‌توان فایل‌های صوتی را مستقیماً در صفحه وب پخش کرد.

مهم‌ترین ویژگی برای این تگ، controls است. با افزودن این ویژگی، مرورگر کنترل‌های پیش‌فرض مانند دکمه پخش/توقف، نوار پیشرفت و کنترل صدا را نمایش می‌دهد.

مثال تگ صدا

<audio controls src="./media/music.mp3">
  مرورگر شما از تگ صوتی پشتیبانی نمی‌کند.
</audio>

خروجی:

۳. تگ ویدیو (Video)

مشابه تگ صدا، تگ <video> برای نمایش فایل‌های ویدیویی در صفحه استفاده می‌شود. این تگ نیز ویژگی controls را برای نمایش کنترل‌های پخش دارد.

یک ویژگی بسیار کاربردی برای ویدیو، poster است. این ویژگی آدرس یک تصویر را می‌گیرد تا قبل از شروع پخش ویدیو یا در حین بارگذاری، آن تصویر به عنوان کاور نمایش داده شود.

مثال تگ ویدیو

<video 
    controls 
    width="400"
    poster="./media/thumbnail.jpg"
    src="https://dl19.mp4.ir/video/2026/2/324647-1728761/324647-1728761.mp4">
    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
</video>

خروجی:

جداول برای نمایش داده‌های جدولی (Tabular Data) مانند صورت‌حساب‌ها، لیست کارمندان، اطلاعات آماری و... به کار می‌روند. یک جدول از سطرها و ستون‌ها تشکیل شده است.

ساختار پایه یک جدول

ساده‌ترین جدول از سه تگ اصلی تشکیل می‌شود:

• <table>: تگ اصلی که کل جدول را در بر می‌گیرد.
• <tr> (Table Row): برای تعریف یک سطر در جدول.
• <td> (Table Data): برای تعریف یک سلول (داده) در یک سطر.

تگ‌های ساختاری و معنایی جدول

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

مثال کامل یک جدول ساختاریافته

در مثال زیر از تمام تگ‌های معرفی‌شده برای ساخت یک جدول کامل استفاده کرده‌ایم.

<table class="table table-bordered table-striped">
  <caption>لیست فروش محصولات - بهار 1405</caption>
  
  <colgroup>
    <col span="1">
    <col span="1" style="background-color: #f2f2f2;"> <!-- استایل‌دهی به ستون دوم -->
    <col span="1">
  </colgroup>

  <thead>
    <tr>
      <th>نام محصول</th>
      <th>تعداد فروش</th>
      <th>قیمت واحد (تومان)</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>لپ تاپ مدل A</td>
      <td>50</td>
      <td>35,000,000</td>
    </tr>
    <tr>
      <td>موس بی‌سیم</td>
      <td>250</td>
      <td>800,000</td>
    </tr>
    <tr>
      <td>مانیتور 24 اینچ</td>
      <td>120</td>
      <td>7,500,000</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">جمع کل فروش (تقریبی)</td>
      <td>~2.8 میلیارد تومان</td>
    </tr>
  </tfoot>
</table>

خروجی:

فرم‌ها قلب تعامل کاربر با یک وب‌سایت هستند. از فرم‌ها برای جمع‌آوری اطلاعات از کاربر، مانند ثبت‌نام، ورود، ارسال نظر، جستجو و پرداخت آنلاین استفاده می‌شود.

تگ اصلی <form> و ویژگی‌های کلیدی آن

تمام عناصر یک فرم باید درون تگ <form> قرار گیرند. این تگ به عنوان یک محفظه (container) عمل می‌کند و دو ویژگی بسیار مهم دارد:

• action: این ویژگی آدرس (URL) صفحه‌ای را مشخص می‌کند که اطلاعات فرم پس از ارسال، به آنجا فرستاده می‌شود تا پردازش شود. این پردازش معمولاً توسط یک زبان سمت سرور مانند PHP, Python یا Node.js انجام می‌شود.
• method: این ویژگی روش ارسال داده‌ها به سرور را تعیین می‌کند. دو مقدار اصلی برای این ویژگی وجود دارد:
  • GET: داده‌های فرم را به صورت رشته‌ای از پارامترها به انتهای URL مشخص‌شده در action اضافه می‌کند (مانند: /search?q=html). این روش برای داده‌های غیرحساس و کوتاه مانند عبارات جستجو مناسب است. داده‌ها در تاریخچه مرورگر قابل مشاهده هستند.
  • POST: داده‌های فرم را در بدنه درخواست HTTP به سرور ارسال می‌کند. این روش امن‌تر است و برای ارسال اطلاعات حساس (مانند رمز عبور) یا حجم زیادی از داده‌ها (مانند آپلود فایل) استفاده می‌شود. داده‌ها در URL قابل مشاهده نیستند.
• method="dialog": این یک مقدار خاص است که وقتی فرم شما درون یک تگ <dialog> قرار دارد، استفاده می‌شود. با ارسال چنین فرمی، دیالوگ بسته می‌شود بدون اینکه داده‌ها به سرور ارسال شوند.

عناصر و تگ‌های مختلف فرم (Form Controls)

در ادامه، با مهم‌ترین تگ‌هایی که درون یک فرم قرار می‌گیرند، آشنا می‌شویم.

۱. تگ <label>

برای ایجاد برچسب یا عنوان برای یک عنصر ورودی استفاده می‌شود. کلیک کردن روی برچسب، عنصر ورودی مرتبط با آن را فعال (focus) می‌کند که این امر به بهبود تجربه کاربری و دسترسی‌پذیری (Accessibility) کمک شایانی می‌کند. ارتباط بین label و input از طریق ویژگی for در لیبل و id در اینپوت برقرار می‌شود.

<label for="username">نام کاربری:</label>
<input type="text" id="username" name="username">

خروجی:

۲. تگ <input>

پرکاربردترین تگ در فرم‌هاست. نوع این تگ با ویژگی type مشخص می‌شود که می‌تواند مقادیر بسیار متنوعی داشته باشد:

۳. تگ <textarea>

برای دریافت ورودی متنی چندخطی (مانند بخش توضیحات یا آدرس) استفاده می‌شود. می‌توان با ویژگی‌های rows و cols ابعاد اولیه آن را مشخص کرد.

<label for="bio">بیوگرافی:</label>
<textarea id="bio" name="bio" rows="4"></textarea>

خروجی:

۴. تگ <select> و <option>

برای ایجاد لیست کشویی (Dropdown) استفاده می‌شود. هر آیتم لیست با یک تگ <option> درون <select> تعریف می‌شود.

<label for="city">شهر خود را انتخاب کنید:</label>
<select name="city" id="city">
  <option value="tehran">تهران</option>
  <option value="shiraz" selected>شیراز</option>
  <option value="isfahan">اصفهان</option>
</select>

خروجی:

۵. تگ <fieldset> و <legend>

برای گروه‌بندی عناصر مرتبط در یک فرم استفاده می‌شود. <fieldset> یک کادر دور گروه ایجاد می‌کند و <legend> عنوانی برای آن گروه تعیین می‌کند.

<fieldset>
  <legend>اطلاعات شخصی</legend>
  <label for="fname">نام:</label>
  <input type="text" id="fname" name="fname">
</fieldset>

خروجی:

مثال ترکیبی: فرم ثبت‌نام کامل

در مثال زیر، از اکثر تگ‌های معرفی‌شده برای ساخت یک فرم ثبت‌نام کامل استفاده کرده‌ایم.

<form action="/register" method="post">
    <fieldset class="border p-3 rounded">
        <legend class="float-none w-auto px-2 fs-6">اطلاعات حساب کاربری</legend>
        <div class="mb-3">
            <label for="email" class="form-label">ایمیل:</label>
            <input type="email" id="email" name="email" class="form-control" required>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">رمز عبور:</label>
            <input type="password" id="password" name="password" class="form-control" required>
        </div>
    </fieldset>

    <fieldset class="border p-3 rounded mt-4">
        <legend class="float-none w-auto px-2 fs-6">اطلاعات شخصی</legend>
        <div class="mb-3">
            <label for="fullname" class="form-label">نام و نام خانوادگی:</label>
            <input type="text" id="fullname" name="fullname" class="form-control">
        </div>
        <div class="mb-3">
            <label for="birthdate" class="form-label">تاریخ تولد:</label>
            <input type="date" id="birthdate" name="birthdate" class="form-control">
        </div>
        <div class="mb-3">
            <label for="country" class="form-label">کشور:</label>
            <select id="country" name="country" class="form-select">
                <option value="iran">ایران</option>
                <option value="germany">آلمان</option>
                <option value="canada">کانادا</option>
            </select>
        </div>
        <div class="mb-3">
            <label class="form-label">جنسیت:</label>

            <div class="form-check form-check-inline">
                <input type="radio" id="male" name="gender" value="male" class="form-check-input">
                <label for="male" class="form-check-label">مرد</label>
            </div>
            <div class="form-check form-check-inline">
                <input type="radio" id="female" name="gender" value="female" class="form-check-input">
                <label for="female" class="form-check-label">زن</label>
            </div>
        </div>
        <div class="mb-3">
            <label for="bio" class="form-label">درباره خودتان:</label>
            <textarea id="bio" name="bio" rows="3" class="form-control"></textarea>
        </div>
        <div class="form-check mb-3">
            <input type="checkbox" id="terms" name="terms" class="form-check-input">
            <label for="terms" class="form-check-label">قوانین و مقررات را می‌پذیرم.</label>
        </div>
    </fieldset>
    
    <div class="mt-4">
        <button type="submit" class="btn btn-primary">ثبت نام</button>
        <button type="reset" class="btn btn-secondary">پاک کردن فرم</button>
    </div>
</form>

خروجی فرم ترکیبی:

تگ <iframe> (کوتاه‌شده‌ی Inline Frame) برای جاسازی (embed) یک سند HTML دیگر در صفحه وب فعلی استفاده می‌شود. به زبان ساده، این تگ به شما اجازه می‌دهد تا یک "پنجره" به یک وب‌سایت دیگر در صفحه خود باز کنید.

این قابلیت برای نمایش محتوای خارجی مانند نقشه‌ها، ویدیوها، پست‌های شبکه‌های اجتماعی یا حتی بخش‌هایی از وب‌اپلیکیشن‌های دیگر بسیار پرکاربرد است.

ویژگی‌های (Attributes) کلیدی تگ <iframe>

رفتار و ظاهر یک `iframe` توسط ویژگی‌های مختلفی کنترل می‌شود:

• src: مهم‌ترین ویژگی است که آدرس (URL) صفحه‌ای که می‌خواهید درون قاب نمایش داده شود را مشخص می‌کند.
• width و height: عرض و ارتفاع قاب را به پیکسل یا درصد تعیین می‌کنند. برای طراحی واکنش‌گرا (Responsive)، معمولاً عرض را `100%` و ارتفاع را یک عدد ثابت پیکسلی در نظر می‌گیرند.
• style="border:0;": با استفاده از CSS، می‌توان کادر یا حاشیه پیش‌فرض `iframe` را حذف کرد تا به صورت یکپارچه با صفحه شما به نظر برسد. (در گذشته از ویژگی `frameborder="0"` استفاده می‌شد که اکنون منسوخ شده است).
• title: قرار دادن یک عنوان توصیفی برای `iframe` از نظر دسترسی‌پذیری (Accessibility) بسیار مهم است. این عنوان به کاربران صفحه‌خوان (Screen Reader) کمک می‌کند تا محتوای قاب را درک کنند.
• loading="lazy": یک ویژگی مدرن و بسیار مفید برای بهینه‌سازی سرعت سایت است. با این ویژگی، محتوای `iframe` تنها زمانی بارگذاری می‌شود که کاربر به نزدیکی آن اسکرول کند. این کار از بارگذاری غیرضروری محتوای سنگین (مانند نقشه یا ویدیو) در ابتدای باز شدن صفحه جلوگیری می‌کند.
• allowfullscreen: به محتوای داخل `iframe` (مانند یک ویدیو) اجازه می‌دهد تا به حالت تمام‌صفحه درآید.

مثال کاربردی: نمایش نقشه از سایت Map.ir

در کد زیر، یک نقشه از وب‌سایت `map.ir` را درون صفحه خودمان نمایش می‌دهیم.

<!-- جاسازی نقشه با استفاده از iFrame -->
<iframe 
    src="https://map.ir/beta/lat/32.21965/lng/55.86486/z/5" 
    width="100%" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy" 
    title="نقشه آنلاین از وب‌سایت Map.ir">
</iframe>

خروجی:

متا تگ‌ها، قطعه کدهایی هستند که اطلاعات و داده‌های تکمیلی (Metadata) را در مورد یک صفحه وب ارائه می‌دهند. این تگ‌ها برای کاربران قابل مشاهده نیستند و همیشه درون تگ <head> قرار می‌گیرند. وظیفه اصلی آن‌ها، برقراری ارتباط با مرورگرها و موتورهای جستجو (مانند گوگل) و ارائه اطلاعات کلیدی درباره محتوای صفحه است.

به متا تگ‌ها می‌توان به چشم شناسنامه یا کارت شناسایی یک صفحه وب نگاه کرد.

۱. تگ <title> - عنوان صفحه

اگرچه <title> یک متا تگ نیست، اما مهم‌ترین تگ در بخش <head> برای سئو و تجربه کاربری است.

• در تب مرورگر: متنی که در بالای مرورگر نمایش داده می‌شود.
• در نتایج جستجو: عنوان اصلی و قابل کلیک صفحه شما در گوگل است.
• در بوکمارک‌ها: وقتی کاربر صفحه شما را ذخیره می‌کند، این عنوان استفاده می‌شود.

<title>دوره جامع آموزش HTML و CSS | آکادمی محمد حسین سلیمانی</title>

۲. متا تگ description - توضیحات صفحه

این تگ یک خلاصه کوتاه و جذاب (حدود ۱۵۰ تا ۱۶۰ کاراکتر) از محتوای صفحه ارائه می‌دهد. موتورهای جستجو اغلب از این توضیحات در زیر عنوان صفحه در نتایج جستجو استفاده می‌کنند. نوشتن یک `description` خوب می‌تواند نرخ کلیک (CTR) را به شدت افزایش دهد.

<meta name="description" content="در این دوره جامع، HTML و CSS را از مقدماتی تا پیشرفته به صورت کاملا عملی و پروژه محور یاد خواهید گرفت.">

۳. متا تگ keywords - کلمات کلیدی

در گذشته، این تگ برای لیست کردن کلمات کلیدی مرتبط با صفحه استفاده می‌شد تا به موتورهای جستجو کمک کند. اما به دلیل سوءاستفاده‌های فراوان (Keyword Stuffing)، امروزه تقریباً تمام موتورهای جستجوی بزرگ مانند گوگل، هیچ ارزشی برای این تگ قائل نیستند و آن را در رتبه‌بندی دخالت نمی‌دهند.

<!-- استفاده از این تگ دیگر توصیه نمی‌شود -->
<meta name="keywords" content="آموزش HTML, آموزش CSS, طراحی وب, دوره آنلاین, برنامه نویسی وب">

۴. متا تگ robots - دستور به ربات‌های جستجو

این تگ بسیار قدرتمند به شما اجازه می‌دهد تا به ربات‌های موتورهای جستجو (Crawlers) بگویید که با صفحه شما چگونه رفتار کنند.

• index, follow: (مقدار پیش‌فرض) به ربات اجازه می‌دهد صفحه را ایندکس (ثبت در نتایج) کرده و لینک‌های داخل آن را دنبال کند.
• noindex, nofollow: به ربات می‌گوید نه صفحه را ایندکس کند و نه لینک‌های آن را دنبال کند. (مناسب برای صفحات ادمین یا خصوصی).
• noindex: صفحه را ایندکس نکن، اما لینک‌هایش را دنبال کن.
• nofollow: صفحه را ایندکس کن، اما لینک‌هایش را دنبال نکن.

<!-- برای صفحات عمومی -->
<meta name="robots" content="index, follow">

<!-- برای صفحات خصوصی که نباید در گوگل دیده شوند -->
<meta name="robots" content="noindex, nofollow">

۵. متا تگ author - نام نویسنده

برای مشخص کردن نام نویسنده یا صاحب محتوای صفحه استفاده می‌شود.

<meta name="author" content="محمد حسین سلیمانی">

۶. مشخص کردن زبان صفحه (Language)

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

<!-- روش صحیح و استاندارد -->
<html lang="fa-IR">

مثال کامل از بخش <head>

در کد زیر، یک نمونه کامل از بخش <head> با استفاده از متا تگ‌های ضروری و استاندارد را مشاهده می‌کنید.

<!DOCTYPE html>
<html lang="fa-IR" dir="rtl">
<head>
    <!-- (1) تعریف انکودینگ کاراکتر - همیشه اولین تگ باشد -->
    <meta charset="UTF-8">
    
    <!-- (2) تنظیمات Viewport برای طراحی واکنش‌گرا -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- (3) عنوان صفحه (بسیار مهم برای سئو) -->
    <title>دوره جامع آموزش HTML و CSS | آکادمی محمد حسین سلیمانی</title>
    
    <!-- (4) توضیحات صفحه (مهم برای سئو) -->
    <meta name="description" content="آموزش کامل و پروژه محور HTML و CSS از صفر تا صد برای ورود به دنیای طراحی وب.">
    
    <!-- (5) دستور به ربات‌های جستجو -->
    <meta name="robots" content="index, follow">
    
    <!-- (6) نام نویسنده -->
    <meta name="author" content="محمد حسین سلیمانی">

    <!-- لینک به فایل CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- محتوای صفحه در اینجا قرار می‌گیرد... -->
</body>
</html>

CSS (Cascading Style Sheets) زبان استاندارد برای طراحی و استایل‌دهی به صفحات وب است. بدون CSS، صفحات وب تنها ساختاری از متن و عناصر خام خواهند بود. برای اینکه بتوانیم ظاهر، رنگ، چیدمان و فونت عناصر HTML را کنترل کنیم، باید کدهای CSS را به سند خود اضافه کنیم.

سه روش اصلی برای انجام این کار وجود دارد که هر کدام مزایا، معایب و کاربردهای خاص خود را دارند.

۱. استایل درون‌خطی (Inline CSS)

در این روش، استایل‌ها مستقیماً به یک تگ HTML خاص با استفاده از ویژگی (attribute) style اعمال می‌شوند. این روش بالاترین اولویت را در اعمال استایل دارد و هر استایل دیگری را لغو (override) می‌کند.

• مزایا: برای تست‌های سریع یا اعمال یک استایل بسیار خاص به یک المنت خاص، مفید است.
• معایب: مدیریت و بروزرسانی آن بسیار دشوار است. ساختار (HTML) و ظاهر (CSS) را با هم ترکیب می‌کند که یک عمل غیراستاندارد محسوب می‌شود. برای استایل‌دهی به کل سایت اصلاً توصیه نمی‌شود.

مثال:

<h1 style="color: blue; text-align: center;">این یک تیتر آبی و وسط‌چین است</h1>
<p style="font-size: 18px; color: green;">این یک پاراگراف با فونت بزرگتر و رنگ سبز است.</p>

خروجی:

۲. استایل داخلی (Internal/Embedded CSS)

در این روش، کدهای CSS درون تگ <style> و این تگ نیز درون بخش <head> سند HTML قرار می‌گیرد. استایل‌های تعریف شده در این بخش، بر روی تمام عناصر منطبق در همان صفحه اعمال می‌شوند.

• مزایا: برای استایل‌دهی به یک صفحه خاص و منحصر به فرد (Single Page) کاربرد دارد و از ترکیب کد در بدنه اصلی HTML جلوگیری می‌کند.
• معایب: این استایل‌ها فقط برای همان یک صفحه قابل استفاده هستند و برای اعمال به صفحات دیگر، باید کدها را کپی کرد که منجر به تکرار و دشواری در مدیریت می‌شود.

مثال:

<!DOCTYPE html>
<html lang="fa">
<head>
    <title>مثال استایل داخلی</title>
    <style>
        body {
            background-color: #f0f0f0; /* رنگ پس‌زمینه خاکستری روشن */
        }
        h2 {
            color: purple;
            border-bottom: 2px solid purple;
        }
        p {
            font-family: 'Vazirmatn', sans-serif;
            color: #333;
        }
    </style>
</head>
<body>
    <h2>این یک تیتر بنفش است</h2>
    <p>این پاراگراف تحت تاثیر استایل‌های تعریف شده در تگ style قرار گرفته است.</p>
</body>
</html>

خروجی:

۳. استایل خارجی (External CSS)

این روش، استانداردترین و پرکاربردترین راه برای استایل‌دهی به وب‌سایت‌ها است. در این حالت، تمام کدهای CSS در یک فایل جداگانه با پسوند .css (مثلاً styles.css) ذخیره می‌شوند. سپس این فایل با استفاده از تگ <link> از داخل بخش <head> به سند یا سندهای HTML متصل می‌شود.

• مزایا:
  • جداسازی کامل ساختار و ظاهر: فایل‌های HTML و CSS کاملا مجزا و تمیز هستند.
  • قابلیت استفاده مجدد: یک فایل CSS می‌تواند به تعداد نامحدودی از صفحات HTML لینک شود.
  • مدیریت آسان: برای تغییر ظاهر کل وب‌سایت، کافیست فقط یک فایل را ویرایش کنید.
  • افزایش سرعت: مرورگر فایل CSS را یک بار دانلود و ذخیره (Cache) می‌کند و برای صفحات بعدی از همان فایل استفاده می‌کند که باعث بارگذاری سریع‌تر صفحات می‌شود.

مثال:

ابتدا فایل HTML که به فایل CSS لینک می‌دهد:

<!-- File: index.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <title>مثال استایل خارجی</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h3>این یک تیتر است</h3>
    <p>این پاراگراف از فایل styles.css استایل می‌گیرد.</p>
</body>
</html>

و سپس محتوای فایل styles.css:

/* File: styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #e6f7ff; /* آبی بسیار روشن */
}
h3 {
    color: #0056b3; /* آبی تیره */
}
p {
    color: #555;
    line-height: 1.6; /* فاصله بین خطوط */
}

خروجی:

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

همانند CSS، دو روش اصلی برای افزودن کدهای جاوا اسکریپت به یک سند HTML وجود دارد.

۱. جاوا اسکریپت داخلی (Internal JavaScript)

در این روش، کدهای جاوا اسکریپت مستقیماً درون تگ <script> در سند HTML نوشته می‌شوند. این روش برای نوشتن اسکریپت‌های کوچک و مختص به همان صفحه مناسب است.

مثال:

در مثال زیر، با کلیک بر روی یک دکمه، محتوای یک پاراگراف تغییر می‌کند.

<!DOCTYPE html>
<html lang="fa">
<head>
    <title>مثال جاوا اسکریپت داخلی</title>
</head>
<body>

    <h2>تعامل با جاوا اسکریپت</h2>
    <p id="demo">این متن به زودی تغییر خواهد کرد!</p>
    <button type="button" onclick="changeText()">متن را تغییر بده</button>

    <script>
        function changeText() {
            // پیدا کردن المنت با آی‌دی demo
            var paragraph = document.getElementById("demo");
            // تغییر محتوای آن
            paragraph.innerHTML = "تبریک! شما با جاوا اسکریپت محتوا را تغییر دادید.";
            paragraph.style.color = "darkred";
            paragraph.style.fontWeight = "bold";
        }
    </script>

</body>
</html>

خروجی:

۲. جاوا اسکریپت خارجی (External JavaScript)

این روش، حالت استاندارد و بهینه برای پروژه‌های واقعی است. تمام کدهای جاوا اسکریپت در یک فایل جداگانه با پسوند .js (مثلاً main.js) نوشته شده و سپس با استفاده از ویژگی src در تگ <script> به صفحه متصل می‌شود.

• جداسازی کدها: فایل‌های HTML و JS کاملاً مجزا و تمیز باقی می‌مانند.
• قابلیت استفاده مجدد: یک فایل .js می‌تواند در چندین صفحه مختلف استفاده شود.
• مدیریت آسان‌تر: ویرایش و خطایابی (Debug) کدها در یک فایل مجزا بسیار ساده‌تر است.
• افزایش سرعت (Caching): مرورگر فایل .js را یک بار دانلود کرده و در حافظه پنهان خود ذخیره می‌کند که باعث بارگذاری سریع‌تر در بازدیدهای بعدی می‌شود.

مثال:

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

<!-- File: index.html -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <title>مثال جاوا اسکریپت خارجی</title>
</head>
<body>

    <h2>فراخوانی از فایل خارجی</h2>
    <p id="external-demo">این متن توسط یک فایل خارجی کنترل می‌شود.</p>
    <button type="button" onclick="showAlert()">نمایش پیام</button>
    
    <!-- اتصال به فایل جاوا اسکریپت خارجی -->
    <script src="main.js"></script>
    
</body>
</html>

و سپس محتوای فایل main.js:

/* File: main.js */
function showAlert() {
    // نمایش یک پیام هشدار ساده
    alert("این پیام از فایل main.js آمده است!");
    
    // تغییر متن پاراگراف
    document.getElementById("external-demo").innerHTML = "محتوا با موفقیت تغییر کرد.";
}

خروجی:

ویژگی‌های پیشرفته: async و defer

هنگام استفاده از اسکریپت‌های خارجی، می‌توانید با افزودن ویژگی‌های async یا defer به تگ <script>، نحوه بارگذاری و اجرای آن‌ها را کنترل کنید. این دو ویژگی فقط برای اسکریپت‌های خارجی (دارای `src`) کاربرد دارند.

• <script defer src="main.js"></script>: به مرورگر می‌گوید اسکریپت را همزمان با پردازش HTML دانلود کن، اما اجرای آن را تا پایان پردازش کامل HTML به تعویق بینداز. این روش استاندارد مدرن است زیرا ترتیب اجرای اسکریپت‌ها را حفظ می‌کند و صفحه را مسدود نمی‌کند.
• <script async src="main.js"></script>: اسکریپت را همزمان دانلود کرده و به محض اتمام دانلود، آن را اجرا می‌کند (حتی اگر پردازش HTML تمام نشده باشد). این روش می‌تواند پردازش HTML را متوقف کند و ترتیب اجرای اسکریپت‌ها را تضمین نمی‌کند. مناسب برای اسکریپت‌های مستقلی است که به ترتیب اجرا یا DOM وابسته نیستند (مانند اسکریپت‌های آمار و تحلیل).

تا اینجا، شما یاد گرفته‌اید که چگونه با HTML ساختار و محتوای یک صفحه وب را ایجاد کنید. اما وب‌سایت‌های مدرن فقط ساختار نیستند؛ آن‌ها زیبا، خوانا و واکنش‌گرا (Responsive) هستند. اینجاست که CSS وارد میدان می‌شود.

۱. CSS چیست و پیش‌نیازهای آن چیست؟

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

HTML اسکلت و ساختار یک ساختمان را مشخص می‌کند، در حالی که CSS رنگ دیوارها، نوع پنجره‌ها، دکوراسیون داخلی و نمای بیرونی آن را تعیین می‌کند.

CSS به شما اجازه می‌دهد تا رنگ‌ها، فونت‌ها، فاصله‌ها، ابعاد، پس‌زمینه‌ها، چیدمان و حتی انیمیشن‌ها را کنترل کنید.

پیش‌نیاز یادگیری CSS

۲. تاریخچه مختصر CSS

در روزهای اولیه وب، استایل‌دهی مستقیماً درون تگ‌های HTML با استفاده از ویژگی‌هایی مانند <font> و bgcolor انجام می‌شد. این روش مشکلات زیادی داشت:

• کدنویسی تکراری: برای تغییر رنگ یک عنوان در ۱۰ صفحه، باید ۱۰ فایل را ویرایش می‌کردید.
• ترکیب ساختار و ظاهر: فایل‌های HTML بسیار شلوغ و مدیریت آن‌ها دشوار می‌شد.

برای حل این مشکل، CSS متولد شد:

• CSS1 (1996): اولین نسخه رسمی که مفاهیم پایه‌ای مانند انتخاب‌گرها (Selectors)، ویژگی‌های فونت، رنگ و فاصله‌گذاری را معرفی کرد.
• CSS2 (1998): قابلیت‌های قدرتمندتری مانند تعیین موقعیت عناصر (Positioning)، مفهوم z-index و Media Types (برای استایل‌دهی جهت پرینت) را اضافه کرد.
• CSS3 (از 1999 تا کنون): CSS3 یک نسخه واحد نیست، بلکه مجموعه‌ای از ماژول‌های مستقل است که به صورت جداگانه توسعه داده می‌شوند. این رویکرد باعث پیشرفت سریع‌تر تکنولوژی شد و ویژگی‌های انقلابی مانند Flexbox، Grid، انیمیشن‌ها، سایه‌ها، گرادیان‌ها و مهم‌تر از همه، Media Queries (برای طراحی واکنش‌گرا) را به دنیای وب آورد.

۳. تفاوت بنیادین HTML و CSS

درک تفاوت نقش این دو زبان، کلیدی‌ترین مفهوم در توسعه فرانت-اند است.

یک مثال تصویری

در زیر یک قطعه کد HTML ساده را بدون هیچ‌گونه استایلی مشاهده می‌کنید و سپس همان قطعه کد پس از اعمال کمی CSS.

برای اینکه بتوانیم به یک عنصر HTML استایل بدهیم، ابتدا باید به مرورگر بگوییم که دقیقاً کدام عنصر یا عناصر را هدف قرار داده‌ایم. این کار از طریق "انتخابگرها" (Selectors) و مجموعه‌ای از قوانین (Rules) انجام می‌شود.

۱. ساختمان کد در CSS (آناتومی یک قانون CSS)

یک قانون (Rule) در CSS از دو بخش اصلی تشکیل شده است: یک انتخابگر (Selector) و یک بلوک اعلان (Declaration Block).

• Selector: الگویی است که عنصر یا عناصر HTML مورد نظر ما را در صفحه پیدا می‌کند.
• Declaration Block: این بلوک که داخل آکولاد { } قرار می‌گیرد، شامل یک یا چند "اعلان" (Declaration) است که با نقطه-ویرگول (;) از هم جدا می‌شوند.
• Declaration: هر اعلان خود از دو بخش تشکیل شده است: یک ویژگی (Property) و یک مقدار (Value) که با دو نقطه (:) از هم جدا می‌شوند.

۲. کلاس‌ها (Classes) و آیدی‌ها (IDs) در CSS

دو نوع از پرکاربردترین انتخابگرها، انتخابگر کلاس (Class Selector) و انتخابگر آیدی (ID Selector) هستند. این دو به ما اجازه می‌دهند تا استایل‌های خاصی را به عناصر دلخواه اعمال کنیم.

انتخابگر ID (با استفاده از #)

از ویژگی id برای انتخاب یک عنصر منحصر به فرد استفاده می‌شود. مقدار id باید در کل صفحه یکتا باشد. در CSS، برای انتخاب یک عنصر با ID مشخص، از علامت هشتگ (#) و سپس نام آن ID استفاده می‌کنیم.

<!-- HTML -->
<h1 id="main-title">این عنوان اصلی سایت است</h1>

<!-- CSS -->
<style>
    #main-title {
        background-color: #f0f0f0;
        color: #333;
        text-align: center;
        padding: 15px;
        border-bottom: 3px solid #0d6efd;
    }
</style>

خروجی:

انتخابگر Class (با استفاده از .)

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

<!-- HTML -->
<p class="highlight">این پاراگراف برای جلب توجه استایل‌دهی شده است.</p>
<div class="highlight">این یک متن در یک div است که همان استایل را دارد.</div>
<span>این یک متن عادی است.</span>

<!-- CSS -->
<style>
    .highlight {
        background-color: #fff3cd;
        color: #664d03;
        padding: 10px;
        border-left: 5px solid #ffc107;
        margin-bottom: 10px;
    }
</style>

خروجی:

۳. انتخابگرهای گروهی (Grouping Selectors)

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

<!-- HTML -->
<h1>عنوان اصلی</h1>
<h2>یک زیرعنوان</h2>
<p>یک پاراگراف متن.</p>
<h3>عنوان دیگر که استایل متفاوتی دارد</h3>

<!-- CSS -->
<style>
    /* اعمال استایل به h1, h2 و p به صورت همزمان */
    h1, h2, p {
        font-family: 'Tahoma', sans-serif;
        color: darkcyan;
        text-align: right;
    }

    h3 {
        color: firebrick;
    }
</style>

خروجی:

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

از این درس به بعد، برای تمرین بهتر و رعایت استانداردهای توسعه وب، کدهای HTML و CSS را در دو فایل جداگانه قرار می‌دهیم. فایل HTML از طریق تگ <link> به فایل CSS متصل می‌شود.

۱. نام‌های رنگ پیش‌فرض و مقادیر HEX

ساده‌ترین راه‌ها برای تعیین رنگ، استفاده از نام‌های کلیدی تعریف‌شده (مانند red, blue, tomato) و کدهای هگزادسیمال (Hexadecimal) است.

• نام‌های رنگ (Keywords): حدود ۱۴۰ نام رنگ استاندارد وجود دارد که توسط تمام مرورگرها پشتیبانی می‌شوند. این روش برای تست سریع و رنگ‌های اصلی بسیار مناسب است.
• مقادیر HEX: این فرمت با یک # شروع شده و شامل سه جفت کاراکتر هگزادسیمال (اعداد ۰-۹ و حروف a-f) است. این جفت‌ها به ترتیب شدت رنگ‌های قرمز (Red)، سبز (Green) و آبی (Blue) را از 00 (کمترین شدت) تا ff (بیشترین شدت) نشان می‌دهند. فرمت کوتاه سه کاراکتری (#rgb) نیز برای رنگ‌هایی که مقادیر هر جفت یکسان است (مثلا #ff00cc به صورت #f0c) قابل استفاده است.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Colors Example</title>
    <!-- اتصال فایل CSS خارجی -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="title-keyword">رنگ با نام کلیدی</h1>
    <p class="text-hex">رنگ این متن با کد HEX تعریف شده است.</p>
</body>
</html>

فایل styles.css

/* استایل برای رنگ با نام کلیدی */
.title-keyword {
    background-color: steelblue;
    color: white;
    padding: 10px;
}

/* استایل برای رنگ با کد هگزادسیمال */
.text-hex {
    color: #b33939; /* یک نوع قرمز تیره */
    font-size: 18px;
}

خروجی:

۲. توابع ()rgb و ()hsl

این توابع کنترل دقیق‌تری بر روی رنگ‌ها به ما می‌دهند.

• تابع ()rgb: این تابع سه مقدار برای شدت رنگ‌های قرمز (Red)، سبز (Green) و آبی (Blue) می‌گیرد که هر کدام عددی بین ۰ تا ۲۵۵ هستند. برای مثال rgb(255, 0, 0) رنگ قرمز خالص است.
• تابع ()hsl: این تابع رنگ را بر اساس مشخصه‌های انسانی‌تر تعریف می‌کند: فام (Hue)، اشباع (Saturation) و روشنایی (Lightness).
  • Hue: یک درجه روی چرخه رنگ از ۰ تا ۳۶۰ است (۰=قرمز, ۱۲۰=سبز, ۲۴۰=آبی).
  • Saturation: درصد خلوص رنگ است (۰% خاکستری و ۱۰۰% رنگ کامل).
  • Lightness: درصد روشنایی است (۰% سیاه و ۱۰۰% سفید).
  این مدل برای ساخت پالت‌های رنگی (مثلا نسخه‌های تیره‌تر یا روشن‌تر از یک رنگ) بسیار کارآمد است.

فایل styles.css (ادامه فایل قبلی)

/* ... کدهای قبلی ... */

/* اضافه کردن استایل‌های جدید */
body {
    background-color: rgb(245, 245, 245); /* یک خاکستری بسیار روشن */
}

.box-hsl {
    background-color: hsl(205, 78%, 60%); /* یک آبی آسمانی */
    color: hsl(0, 0%, 10%); /* یک خاکستری بسیار تیره نزدیک به مشکی */
    padding: 20px;
    margin-top: 20px;
    text-align: center;
    border: 2px solid hsl(205, 78%, 40%); /* نسخه تیره‌تر همان آبی */
}

فایل index.html (عناصر جدید را به تگ body اضافه کنید)

<!-- ... کدهای قبلی ... -->
<div class="box-hsl">این باکس با HSL استایل‌دهی شده است.</div>
<!-- ... بقیه کدهای body ... -->

خروجی (با احتساب کدهای قبلی):

۳. شفافیت (Opacity) با ()rgba و ()hsla

هر دو تابع rgb و hsl یک نسخه با کانال آلفا (Alpha) دارند که به ما اجازه می‌دهد میزان شفافیت رنگ را تعیین کنیم. این مقدار یک عدد بین ۰.۰ (کاملاً شفاف) تا ۱.۰ (کاملاً مات) است.

فایل styles.css (ادامه)

/* ... کدهای قبلی ... */

.overlay-box {
    /* یک پس‌زمینه با شفافیت ۵۰ درصد */
    background-color: rgba(44, 62, 80, 0.5); 
    color: white;
    padding: 30px;
    margin-top: 20px;
    text-align: center;
}

.button-hsla {
    background-color: hsla(160, 100%, 36%, 0.8); /* سبز با ۸۰٪ شفافیت */
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

فایل index.html (عناصر جدید را به تگ body اضافه کنید)

<!-- ... کدهای قبلی ... -->
<div class="overlay-box">
    این متن روی یک پس‌زمینه نیمه‌شفاف قرار دارد.
</div>
<button class="button-hsla">دکمه HSLA</button>

خروجی نهایی:

ویژگی‌های background در CSS به ما این امکان را می‌دهند که رنگ، تصویر، و سایر مشخصات پس‌زمینه یک عنصر را کنترل کنیم. این مجموعه از ویژگی‌ها برای طراحی ظاهر صفحات وب ضروری هستند.

در این درس، ما از یک فایل index.html برای ساختار و یک فایل styles.css برای استایل‌دهی استفاده می‌کنیم.

۱. ویژگی‌های اصلی Background

CSS چندین ویژگی مجزا برای کنترل پس‌زمینه ارائه می‌دهد. در ابتدا با مهم‌ترین آن‌ها آشنا می‌شویم:

• background-color: رنگ پس‌زمینه یک عنصر را تعیین می‌کند.
• background-image: یک یا چند تصویر را به عنوان پس‌زمینه عنصر قرار می‌دهد.
• background-repeat: نحوه تکرار تصویر پس‌زمینه را مشخص می‌کند.
• background-position: موقعیت اولیه تصویر پس‌زمینه را تعیین می‌کند.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Background Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="box box-color">این باکس فقط رنگ پس‌زمینه دارد.</div>
    <div class="box box-image">
        <h3>تصویر پس‌زمینه (تکرارشونده)</h3>
    </div>
    <div class="box box-no-repeat">
        <h3>تصویر بدون تکرار و در مرکز</h3>
    </div>
</body>
</html>

فایل styles.css

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f4f7f6;
    color: #333;
}

.box {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
    min-height: 150px;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.box-color {
    background-color: #4a69bd;
}

.box-image {
    /* تصویر پس‌زمینه به صورت پیش‌فرض تکرار می‌شود (repeat) */
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
    background-color: #6a89cc; /* رنگ پس‌زمینه در صورت عدم بارگذاری تصویر */
}

.box-no-repeat {
    background-image: url('https://via.placeholder.com/150/ffffff/000000?text=Logo');
    background-color: #be2edd;
    /* جلوگیری از تکرار تصویر */
    background-repeat: no-repeat;
    /* قرار دادن تصویر در مرکز */
    background-position: center;
}

خروجی:

۲. مثال‌های بیشتر و ویژگی‌های پیشرفته

حال به بررسی ویژگی‌های تکمیلی مانند background-size، background-attachment و فرم کوتاه background می‌پردازیم.

• background-size: اندازه تصویر پس‌زمینه را تعیین می‌کند. مقادیر کلیدی آن cover (پوشش کامل باکس با برش احتمالی تصویر) و contain (نمایش کامل تصویر درون باکس با فضای خالی احتمالی) هستند.
• background-attachment: مشخص می‌کند که آیا تصویر پس‌زمینه هنگام اسکرول صفحه ثابت بماند (fixed) یا با محتوا حرکت کند (scroll).
• background: یک ویژگی خلاصه‌نویسی (Shorthand) برای تنظیم تمام ویژگی‌های پس‌زمینه در یک اعلان واحد است.

فایل index.html (عناصر جدید را به تگ body اضافه کنید)

<!-- ... کدهای قبلی ... -->
<div class="box hero-section">
    <h1>بخش Hero با Background Cover</h1>
</div>
<div class="box parallax-section">
    <h2>اثر Parallax با Attachment Fixed</h2>
</div>
<div class="box shorthand-box">
    <h3>استفاده از خاصیت Shorthand</h3>
</div>

فایل styles.css (ادامه)

/* ... کدهای قبلی ... */

.hero-section {
    min-height: 300px;
    background-image: url('https://via.placeholder.com/1200x400.png/5352ed/ffffff?text=Landscape');
    background-repeat: no-repeat;
    background-position: center;
    /* تصویر تمام عرض و ارتفاع باکس را پوشش می‌دهد */
    background-size: cover; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-section {
    min-height: 400px;
    background-image: url('https://via.placeholder.com/1200x800.png/20bf6b/ffffff?text=Nature');
    /* تصویر هنگام اسکرول ثابت می‌ماند */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shorthand-box {
    min-height: 200px;
    /* color image repeat position/size attachment */
    background: #ff793f 
                url('https://www.transparenttextures.com/patterns/diagmonds.png') 
                repeat 
                center/auto;
}

خروجی نهایی:

در CSS، هر عنصر HTML به عنوان یک جعبه مستطیلی در نظر گرفته می‌شود. "مدل جعبه‌ای" (Box Model) مفهومی است که این جعبه را توصیف می‌کند. هر جعبه از چهار بخش اصلی تشکیل شده است: محتوا (Content)، لایه‌گذاری داخلی (Padding)، حاشیه (Border) و حاشیه خارجی (Margin).

علاوه بر این، یک ویژگی به نام outline نیز وجود دارد که شباهت‌هایی به border دارد اما بخشی از ابعاد اصلی عنصر محسوب نمی‌شود. در این درس تمام این مفاهیم را بررسی می‌کنیم.

دیاگرام مدل جعبه‌ای CSS

۱. ساختار فایل‌ها

طبق روال، ما از یک فایل index.html برای ساختار و یک فایل styles.css برای استایل‌دهی استفاده می‌کنیم.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>آموزش مدل جعبه‌ای CSS</h1>

    <div class="box padding-example">
        این باکس Padding دارد. به فاصله داخلی بین محتوا و حاشیه دقت کنید.
    </div>

    <div class="box border-example">
        این باکس Border دارد. استایل، ضخامت و رنگ حاشیه قابل تنظیم است. همچنین گوشه‌های آن گرد شده (border-radius).
    </div>

    <div class="box margin-example">این باکس Margin دارد.</div>
    <div class="box margin-example">این باکس هم Margin دارد. به فاصله بین این دو باکس دقت کنید.</div>
    
    <div class="box outline-example">
        این باکس Outline دارد. Outline فضایی اشغال نمی‌کند و روی Margin قرار می‌گیرد.
    </div>

    <div class="box-container">
        <div class="box all-in-one">
            <p>محتوای اصلی</p>
        </div>
    </div>

</body>
</html>

فایل styles.css

body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f0f4f8;
    color: #333;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #2c3e50;
}

.box {
    background-color: #ffffff;
    color: #2c3e50;
    width: 80%;
    margin: 20px auto; /* مارجین بالا و پایین 20 و چپ و راست خودکار (برای وسط‌چین شدن) */
    padding: 20px;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
}

/* 1. Padding: فاصله داخلی */
.padding-example {
    background-color: #e8f6f3;
    border-color: #16a085;
    /* Shorthand: top, right, bottom, left */
    padding: 40px 30px 20px 10px; 
}

/* 2. Border: حاشیه دور عنصر */
.border-example {
    background-color: #fef9e7;
    /* Shorthand: width style color */
    border: 4px dashed #f1c40f; 
    border-radius: 15px; /* گرد کردن گوشه‌ها */
}

/* 3. Margin: فاصله خارجی */
.margin-example {
    background-color: #f4ecf7;
    border-color: #8e44ad;
    /* Shorthand: 50px for top/bottom, auto for right/left */
    margin: 50px auto;
}

/* 4. Outline: یک خط خارجی که فضا اشغال نمی‌کند */
.outline-example {
    background-color: #eaf2f8;
    border: 2px solid #3498db;
    /* Shorthand: width style color */
    outline: 3px solid #e74c3c;
    outline-offset: 10px; /* فاصله بین outline و border */
}
.outline-example:focus {
    /* outline اغلب برای نشان دادن فوکوس استفاده می‌شود */
    outline-color: #2980b9;
}


/* 5. جمع‌بندی و تفاوت‌ها */
.box-container {
    background-color: #e1e7ec;
    padding: 50px; /* پدینگ کانتینر برای نمایش بهتر مارجین آیتم داخلی */
    border: 2px dotted #95a5a6;
    margin-top: 50px;
}

.all-in-one {
    background-color: #f9e79f; /* زرد */
    width: 60%;
    
    /* ۱. فضای شفاف خارجی، برای فاصله از بقیه */
    margin: 30px; 

    /* ۲. خط دور عنصر که فضا اشغال می‌کند */
    border: 10px solid #27ae60; /* سبز */
    
    /* ۳. خطی که روی مارجین می‌افتد و فضا اشغال نمی‌کند */
    outline: 5px dashed #c0392b; /* قرمز */

    /* ۴. فاصله شفاف داخلی، بین محتوا و حاشیه */
    padding: 25px; /* آبی */
    
    /* این بخش محتوا است */
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.all-in-one p {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #7f8c8d;
}

۲. خروجی و تشریح مفاهیم

تفاوت‌های کلیدی

پس از آشنایی با مدل جعبه‌ای، نوبت به کنترل ابعاد این جعبه‌ها می‌رسد. در این درس، با ویژگی‌های width, height, min-width, max-width, min-height, و max-height آشنا می‌شویم. سپس به سراغ مهم‌ترین بخش یعنی واحدهای اندازه‌گیری (Units) در CSS می‌رویم که به ما قدرت طراحی‌های انعطاف‌پذیر و واکنش‌گرا را می‌دهند.

۱. ساختار فایل‌ها

طبق روال، یک فایل HTML برای محتوا و یک فایل CSS جداگانه برای استایل‌ها خواهیم داشت.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>CSS Dimensions and Units</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>آموزش ابعاد و واحدها در CSS</h1>

    <!-- بخش اول: ابعاد ثابت و حداکثری -->
    <h2>بخش اول: Width / Height / Max-Width</h2>
    
    <div class="box fixed-width">
        <code>width: 300px;</code><br>
        این باکس عرض ثابتی دارد و در صفحه‌های کوچک‌تر ممکن است اسکرول ایجاد کند.
    </div>
    
    <div class="box responsive-width">
        <code>width: 80%; max-width: 600px;</code><br>
        این باکس عرض ۸۰٪ از والد خود را دارد اما عرض آن هیچ‌گاه از ۶۰۰ پیکسل بیشتر نمی‌شود. این یک تکنیک رایج در طراحی واکنش‌گرا است.
    </div>

    <!-- بخش دوم: واحدهای مختلف -->
    <h2>بخش دوم: واحدهای اندازه‌گیری (Units)</h2>

    <div class="unit-container">
        <p><strong>Pixel (px):</strong> یک واحد مطلق و ثابت.</p>
        <div class="unit-box px-box">150px</div>
    </div>

    <div class="unit-container">
        <p><strong>Percentage (%):</strong> یک واحد نسبی به عنصر والد.</p>
        <div class="parent-box">
            <div class="unit-box percent-box">50%</div>
            <small>عرض این باکس، ۵۰٪ عرض والد خاکستری‌رنگ است.</small>
        </div>
    </div>

    <div class="unit-container font-size-container">
        <p><strong>EM & REM:</strong> واحدهای نسبی به اندازه فونت.</p>
        <div class="rem-box">
            <code>padding: 1rem;</code><br>
            Padding این باکس به اندازه فونت ریشه (html) است. (معمولا 16px)
            <div class="em-box">
                <code>padding: 1em;</code><br>
                اندازه فونت اینجا دو برابر شده، پس padding که 1em است نیز دو برابر می‌شود.
            </div>
        </div>
    </div>

    <!-- بخش سوم: واحدهای Viewport -->
    <h2>بخش سوم: واحدهای Viewport</h2>

    <div class="viewport-section vh-box">
        <div class="content">
            <p><strong>Viewport Height (vh)</strong></p>
            <code>height: 50vh;</code><br>
            ارتفاع این بخش، ۵۰٪ ارتفاع قابل مشاهده مرورگر است.
        </div>
    </div>

    <div class="viewport-section vw-box">
        <div class="content">
            <p><strong>Viewport Width (vw)</strong></p>
            <code>width: 100vw;</code><br>
            این بخش ۱۰۰٪ عرض مرورگر را اشغال می‌کند و باعث ایجاد اسکرول افقی می‌شود. (چون body هم padding دارد)
        </div>
    </div>
</body>
</html>

فайл styles.css

/* --- General Styles --- */
body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #fdfefe;
    color: #424242;
    padding: 20px;
    line-height: 1.6;
}

h1, h2 {
    color: #00796b;
    border-bottom: 2px solid #b2dfdb;
    padding-bottom: 10px;
    margin-top: 40px;
}

.box, .unit-container, .viewport-section {
    background-color: #e0f2f1;
    border: 1px solid #4db6ac;
    border-radius: 8px;
    padding: 20px;
    margin: 20px auto;
}

code {
    background-color: #d1c4e9;
    padding: 2px 6px;
    border-radius: 4px;
    color: #311b92;
}

/* --- Lesson 20: Dimensions and Units --- */

/* 1. Width / Height / Max-Width */
.fixed-width {
    width: 300px; /* عرض ثابت */
    background-color: #ffcdd2;
    border-color: #ef5350;
}

.responsive-width {
    width: 80%; /* عرض نسبی به والد (در اینجا body) */
    max-width: 600px; /* اما حداکثر عرض 600 پیکسل خواهد بود */
    min-width: 300px; /* و حداقل عرض 300 پیکسل */
    background-color: #c5cae9;
    border-color: #5c6bc0;
}

/* 2. Units */
.unit-box {
    background-color: #bbdefb;
    border: 1px solid #42a5f5;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}

.px-box {
    width: 150px;
}

.parent-box {
    background-color: #f1f1f1;
    border: 1px dashed #9e9e9e;
    padding: 20px;
    width: 100%; /* عرض والد ۱۰۰٪ کانتینر خودش است */
}
.percent-box {
    width: 50%; /* 50% از عرض .parent-box */
}

.font-size-container {
    font-size: 16px; /* اندازه فونت پایه برای این بخش */
}
.rem-box {
    background-color: #dcedc8;
    border: 1px solid #8bc34a;
    padding: 1rem; /* 1 * 16px = 16px */
}
.em-box {
    font-size: 2em; /* 2 * 16px = 32px (اندازه فونت والد خودش یعنی .rem-box) */
    background-color: #fff9c4;
    border: 1px solid #fdd835;
    margin-top: 10px;
    padding: 1em; /* 1 * 32px = 32px (چون font-size خودش 32px است) */
}


/* 3. Viewport Units */
.viewport-section {
    color: white;
    text-align: center;
    box-sizing: border-box; /* برای محاسبه صحیح ابعاد */
}
.viewport-section .content {
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px;
    border-radius: 8px;
}
.vh-box {
    background: #4a90e2;
    height: 50vh; /* 50% ارتفاع پنجره مرورگر */
    display: flex;
    justify-content: center;
    align-items: center;
}
.vw-box {
    background: #b865e0;
    width: 100vw; /* 100% عرض پنجره مرورگر */
    
    /* برای جبران padding بدنه و وسط‌چین کردن */
    position: relative;
    right: calc(50% - 50vw);
    margin-right: -40px; /* جبران پدینگ body */
}

۲. خروجی و تشریح مفاهیم

جمع‌بندی واحدها

متن، قلب تپنده اکثر وب‌سایت‌هاست. در این درس جامع، سه جنبه اصلی کار با متن در CSS را یاد می‌گیریم: چگونه به متن استایل بدهیم (رنگ، دکوراسیون، سایه و فاصله‌گذاری)، چگونه آن را تراز کنیم (چپ، راست، وسط) و چگونه حالت حروف آن را تغییر دهیم (بزرگ، کوچک، شروع بزرگ).

۱. ساختار فایل‌ها

مثل همیشه، برای بهترین تمرین، محتوای HTML و استایل‌های CSS را در فایل‌های جداگانه قرار می‌دهیم.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>CSS Text Styling</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>کار با متن در CSS</h1>

    <!-- بخش اول: استایل‌دهی به متن -->
    <div class="container">
        <h2>بخش اول: استایل دهی به متن (Text Styling)</h2>
        <p class="text-color">این متن با ویژگی <code>color</code> رنگی شده است.</p>
        <p class="text-decoration">این متن با <code>text-decoration</code> یک خط موج‌دار زیر آن دارد.</p>
        <p class="text-shadow">این متن با <code>text-shadow</code> دارای سایه است.</p>
        <p class="letter-spacing">فاصله بین حروف در این متن با <code>letter-spacing</code> افزایش یافته.</p>
        <p class="word-spacing">فاصله بین کلمات در این متن با <code>word-spacing</code> زیاد شده است.</p>
        <p class="line-height">ویژگی <code>line-height</code> ارتفاع خط را برای این پاراگراف بلندتر تنظیم می‌کند تا خوانایی آن بیشتر شود. وقتی متن چند خطی می‌شود، این ویژگی اهمیت خود را نشان می‌دهد و فضای تنفس بیشتری بین خطوط ایجاد می‌کند.</p>
    </div>

    <!-- بخش دوم: ترازبندی متن -->
    <div class="container">
        <h2>بخش دوم: ترازبندی متن (Text Alignment)</h2>
        <p class="align-right"><strong>ترازبندی راست (Right):</strong> این حالت پیش‌فرض برای زبان فارسی است. متن به لبه راست چسبیده است.</p>
        <p class="align-center"><strong>ترازبندی وسط (Center):</strong> این متن در مرکز والد خود قرار گرفته است. معمولا برای عناوین استفاده می‌شود.</p>
        <p class="align-left"><strong>ترازبندی چپ (Left):</strong> این متن به لبه چپ چسبیده است. مناسب برای متون انگلیسی در کنار متون فارسی.</p>
        <p class="align-justify"><strong>ترازبندی دوطرفه (Justify):</strong> در این حالت، متن از هر دو طرف تراز می‌شود. این کار با افزایش فاصله بین کلمات انجام می‌شود و ممکن است باعث ایجاد فضاهای خالی ناخواسته (رودخانه) در متن شود. باید با احتیاط استفاده شود.</p>
    </div>

    <!-- بخش سوم: تبدیلات متن -->
    <div class="container">
        <h2>بخش سوم: تبدیلات متن (Text Transformation)</h2>
        <p class="transform-uppercase">این متن با <code>text-transform: uppercase</code> به حروف بزرگ تبدیل شده است.</p>
        <p class="transform-lowercase">این متن با <code>text-transform: lowercase</code> به حروف کوچک تبدیل شده است.</p>
        <p class="transform-capitalize">این متن با <code>text-transform: capitalize</code> حرف اول هر کلمه را بزرگ می‌کند.</p>
    </div>
</body>
</html>

فایل styles.css

/* --- General Styles --- */
body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    padding: 25px;
    line-height: 1.7; /* A good default line-height for readability */
}

.container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

h1, h2 {
    color: #495057;
    border-bottom: 2px solid #ced4da;
    padding-bottom: 10px;
    margin-top: 0;
}

h1 {
    color: #005f73;
    border-color: #0a9396;
}

code {
    background-color: #e9ecef;
    padding: 3px 7px;
    border-radius: 4px;
    color: #c03221;
    font-weight: bold;
}

/* --- Lesson 21: Text Properties --- */

/* Part 1: Text Styling */
.text-color {
    color: #d62828; /* A strong red color */
}
.text-decoration {
    text-decoration: underline wavy #003049 2px;
}
.text-shadow {
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.letter-spacing {
    letter-spacing: 3px;
}
.word-spacing {
    word-spacing: 15px;
}
.line-height {
    line-height: 2.5; /* 2.5 times the font size */
    background-color: #fff3e0;
}

/* Part 2: Text Alignment */
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-justify {
    text-align: justify;
    border: 1px dashed #fca311;
    padding: 10px;
}

/* Part 3: Text Transformation */
.transform-uppercase {
    text-transform: uppercase;
}
.transform-lowercase {
    text-transform: lowercase;
}
.transform-capitalize {
    text-transform: capitalize;
}

۲. خروجی و تشریح مفاهیم

جمع‌بندی ویژگی‌های متن

تایپوگرافی یکی از مهم‌ترین جنبه‌های طراحی وب است. انتخاب فونت مناسب و استفاده صحیح از وزن‌ها و استایل‌های آن، تأثیر مستقیمی بر خوانایی، زیبایی و تجربه کاربری سایت شما دارد. در این درس، سه مبحث کلیدی را پوشش می‌دهیم: نحوه فراخوانی فونت‌های سفارشی، استفاده از ویژگی‌های استایل فونت، و کنترل وزن و استایل متن.

۱. ساختار فایل‌ها

برای این درس، یک فایل HTML برای محتوا و یک فایل CSS برای تعریف فونت‌ها و استایل‌ها خواهیم داشت. ما از فونت محبوب فارسی "وزیرمتن" که توسط گوگل فونت ارائه شده، استفاده خواهیم کرد.

فایل index.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Fonts in CSS</title>
    
    <!-- روش اول (پیشنهادی): فراخوانی فونت از Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap" rel="stylesheet">

    <!-- لینک به فایل استایل اصلی -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>کار با فونت‌ها در CSS</h1>

    <div class="container">
        <h2>بخش اول: فراخوانی و اعمال فونت</h2>
        <p class="font-vazir">این پاراگراف از فونت سفارشی 'Vazirmatn' استفاده می‌کند که از طریق اینترنت فراخوانی شده است. این بهترین روش برای اطمینان از نمایش صحیح فونت در تمام دستگاه‌هاست.</p>
        <p>این پاراگراف از فونت پیش‌فرض مرورگر (معمولاً Times New Roman یا Arial) استفاده می‌کند تا تفاوت را احساس کنید.</p>
    </div>

    <div class="container">
        <h2>بخش دوم: وزن فونت (Font Weight)</h2>
        <p class="weight-light">این متن دارای وزن سبک (Light) با مقدار عددی <code>300</code> است.</p>
        <p class="weight-normal">این متن دارای وزن معمولی (Normal) با مقدار عددی <code>400</code> یا کلمه کلیدی <code>normal</code> است.</p>
        <p class="weight-bold">این متن دارای وزن ضخیم (Bold) با مقدار عددی <code>700</code> یا کلمه کلیدی <code>bold</code> است.</p>
        <p class="weight-black">این متن دارای سنگین‌ترین وزن (Black) با مقدار عددی <code>900</code> است.</p>
    </div>

    <div class="container">
        <h2>بخش سوم: استایل فونت (Font Style)</h2>
        <p class="style-normal">این متن استایل معمولی (Normal) دارد.</p>
        <p class="style-italic">این متن استایل کج (Italic) دارد. اگر فونت نسخه ایتالیک نداشته باشد، مرورگر آن را به صورت مصنوعی کج می‌کند.</p>
    </div>

    <div class="container">
        <h2>بخش چهارم: ویژگی خلاصه نویسی <code>font</code></h2>
        <p class="font-shorthand">این پاراگراف با استفاده از ویژگی خلاصه نویسی <code>font</code> استایل‌دهی شده است. تمام مقادیر (استایل، وزن، اندازه، ارتفاع خط و خانواده فونت) در یک خط تعریف شده‌اند که باعث تمیزتر شدن کد می‌شود.</p>
    </div>

</body>
</html>

فایل styles.css

/* --- روش دوم: فراخوانی فونت به صورت محلی با @font-face --- */
/*
نکته: برای استفاده از این روش، باید فایل‌های فونت را دانلود کرده 
و در پوشه پروژه خود (مثلا پوشه fonts) قرار دهید.
سپس با کد زیر آن را تعریف می‌کنید. ما در این مثال از روش
گوگل فونت استفاده کرده‌ایم که ساده‌تر است.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyFont.woff2') format('woff2'),
       url('fonts/MyFont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/

/* --- General Styles --- */
body {
    /*
     اینجا یک "پشته فونت" (Font Stack) تعریف می‌کنیم.
     مرورگر ابتدا 'Vazirmatn' را امتحان می‌کند. اگر در دسترس نبود
     سراغ فونت‌های عمومی sans-serif می‌رود.
    */
    font-family: 'Vazirmatn', sans-serif;
    background-color: #f8f9fa;
    color: #212529;
    padding: 25px;
    font-size: 16px; /* اندازه پایه فونت */
}

.container {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

h1, h2 {
    color: #495057;
    border-bottom: 2px solid #ced4da;
    padding-bottom: 10px;
}

code {
    background-color: #e9ecef;
    padding: 3px 7px;
    border-radius: 4px;
    color: #c03221;
    font-family: monospace; /* برای کدها از فونت مونواسپیس استفاده می‌شود */
}

/* --- Lesson 22: Font Properties --- */

/* Part 1: Applying a Font Family */
.font-vazir {
    /* این کلاس صرفا برای تاکید است، چون فونت را روی body اعمال کردیم */
    font-family: 'Vazirmatn', sans-serif;
}

/* Part 2: Font Weight */
.weight-light {
    font-weight: 300;
}
.weight-normal {
    font-weight: 400; /* or 'normal' */
}
.weight-bold {
    font-weight: 700; /* or 'bold' */
}
.weight-black {
    font-weight: 900;
}

/* Part 3: Font Style */
.style-normal {
    font-style: normal;
}
.style-italic {
    font-style: italic;
}

/* Part 4: The 'font' Shorthand Property */
/* 
  ترتیب نوشتن مقادیر در خلاصه نویسی font:
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
  * font-size و font-family الزامی هستند.
*/
.font-shorthand {
    font: italic bold 18px/1.8 'Vazirmatn', sans-serif;
    background-color: #eef7ff;
    padding: 15px;
}

۲. خروجی و تشریح مفاهیم

جمع‌بندی ویژگی‌های فونت

لینک‌ها (``) دروازه‌های اصلی وب هستند و به کاربران اجازه می‌دهند بین صفحات جابجا شوند. ظاهر پیش‌فرض لینک‌ها (آبی و زیرخط‌دار) برای همه آشناست، اما برای ایجاد یک طراحی منسجم و زیبا، باید آن‌ها را متناسب با ظاهر وب‌سایت خود استایل‌دهی کنیم. در این درس، با "کلاس‌های کاذب" (Pseudo-classes) آشنا می‌شویم که به ما امکان می‌دهند حالت‌های مختلف یک لینک (عادی، بازدید شده، هاور و فعال) را استایل‌دهی کنیم و در نهایت، یک لینک را به شکل یک دکمه زیبا درمی‌آوریم.

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>Styling Links in CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>استایل‌دهی به لینک‌ها و دکمه‌ها</h1>

    <div class="container">
        <h2>بخش اول: استایل‌دهی پایه‌ای لینک</h2>
        <p>
            در این بخش، حالت‌های مختلف یک لینک را با استفاده از کلاس‌های کاذب استایل می‌دهیم. موس را روی لینک زیر ببرید و کلیک کنید تا تغییرات را ببینید.
            <br>
            <a class="basic-link" href="#">این یک لینک استایل‌دهی شده است</a>
        </p>
    </div>

    <div class="container">
        <h2>بخش دوم: تبدیل لینک به دکمه</h2>
        <p>
            یکی از رایج‌ترین کارها در طراحی وب، نمایش لینک‌ها به شکل دکمه‌های قابل کلیک است. این کار تجربه کاربری بهتری ایجاد می‌کند.
            <br>
            <a class="button-link" href="#">ثبت نام کنید</a>
            <a class="button-link-secondary" href="#">ورود کاربران</a>
        </p>
    </div>

</body>
</html>

/* --- General Styles --- */
body {
    font-family: sans-serif; /* Using a generic font for simplicity */
    background-color: #f4f7f6;
    color: #333;
    padding: 25px;
    font-size: 16px;
    direction: rtl;
}

.container {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px 30px;
    margin-bottom: 30px;
}

h1, h2 {
    color: #444;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 10px;
}

p {
    line-height: 1.7;
}

a {
    /* افزودن انیمیشن نرم برای تمام تغییرات استایل */
    transition: all 0.3s ease;
}

/* --- Lesson 23: Link Styling --- */

/* Part 1: Basic Link Pseudo-classes */
/* 
  قانون LVHA: برای جلوگیری از تداخل استایل‌ها، همیشه کلاس‌های کاذب را 
  به ترتیب Link, Visited, Hover, Active بنویسید.
*/

/* 1. a:link - حالت عادی لینک (بازدید نشده) */
a.basic-link:link {
    color: #007bff;
    text-decoration: none; /* حذف زیرخط */
}

/* 2. a:visited - لینکی که قبلا بازدید شده */
a.basic-link:visited {
    color: #6f42c1; /* رنگ بنفش برای لینک بازدید شده */
}

/* 3. a:hover - زمانی که موس روی لینک قرار می‌گیرد */
a.basic-link:hover {
    color: #dc3545; /* رنگ قرمز در حالت هاور */
    text-decoration: underline; /* نمایش زیرخط در حالت هاور */
}

/* 4. a:active - زمانی که روی لینک کلیک (و نگه داشته) می‌شود */
a.basic-link:active {
    color: #fd7e14; /* رنگ نارنجی در لحظه کلیک */
}


/* Part 2: Styling a Link as a Button */
.button-link, .button-link-secondary {
    display: inline-block; /* اجازه می‌دهد padding و margin اعمال شود */
    text-decoration: none; /* حذف زیرخط */
    padding: 12px 24px;
    margin-top: 15px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* استایل دکمه اصلی */
.button-link {
    background-color: #28a745; /* سبز */
    color: #ffffff;
    border: 1px solid #28a745;
}

.button-link:hover {
    background-color: #218838; /* سبز تیره‌تر */
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px); /* کمی به بالا حرکت می‌کند */
}

.button-link:active {
    transform: translateY(0); /* به جای اصلی برمی‌گردد */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* استایل دکمه فرعی (outline) */
.button-link-secondary {
    background-color: #ffffff;
    color: #007bff; /* آبی */
    border: 1px solid #007bff;
}

.button-link-secondary:hover {
    background-color: #007bff;
    color: #ffffff;
}

جمع‌بندی و نکات کلیدی