جدول، مسیر فایل و تگ‌های تکمیلی متن

۱. تگ‌های تکمیلی متن

در فصل قبل strong و em را دیدیم. چند تگ کوچک دیگر هم وجود دارد که هرکدام کاربرد مشخصی دارند.

<h1>تگ‌های متنی</h1>

<p>این کلمه <strong>مهم</strong> است.</p>

<p>این کلمه <em>تأکید</em> دارد.</p>

<p>این قسمت <mark>هایلایت</mark> شده است.</p>

<p>فرمول آب: H<sub>2</sub>O</p>

<p>مساحت مربع: a<sup>2</sup></p>

تگ‌های متنی: نمونه 01-text-tags

شرح مثال

• mark متن را با پس‌زمینه زرد نشان می‌دهد، دقیقاً مانند وقتی که با ماژیک هایلایت روی کتاب خط می‌کشید.
• sub مخفف subscript است و متن را کوچک و پایین خط می‌برد. برای فرمول‌های شیمی مانند عدد ۲ در آب استفاده می‌شود.
• sup مخفف superscript است و متن را کوچک و بالای خط می‌برد. برای توان‌های ریاضی کاربرد دارد.

هر سه این تگ‌ها درون‌خطی هستند، یعنی تنها همان چند حرف را در بر می‌گیرند و باعث نمی‌شوند بقیه متن به خط بعد برود. در بخش ششم همین فصل به این موضوع برمی‌گردیم.

۲. فهرست تودرتو

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

<h1>رشته‌های دبیرستان</h1>

<ul>
    <li>ریاضی و فیزیک
        <ul>
            <li>حسابان</li>
            <li>هندسه</li>
            <li>فیزیک</li>
        </ul>
    </li>

    <li>علوم تجربی
        <ul>
            <li>زیست‌شناسی</li>
            <li>شیمی</li>
        </ul>
    </li>

    <li>علوم انسانی</li>
</ul>

فهرست تودرتو: نمونه 02-nested-lists

شرح مثال

نکته اصلی این مثال جای درست ul دوم است. فهرست داخلی باید داخل li والد خودش باشد، نه بعد از آن. اگر آن را بیرون بگذارید، مرورگر تودرتویی را نمی‌فهمد و فهرست به هم می‌ریزد.

دقت کنید که li مربوط به «ریاضی و فیزیک» تا بعد از بسته شدن فهرست داخلی، بسته نشده است. برای اینکه در چنین ساختارهایی سردرگم نشوید، از تورفتگی استفاده کنید: هر سطح تودرتویی را چهار فاصله جلوتر بنویسید. این کار روی خروجی هیچ تأثیری ندارد، اما خواندن کد را برای شما و بقیه آسان می‌کند.

۳. مسیر فایل‌ها

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

<h1>انواع مسیر</h1>

<!-- تصویر در همان پوشه فایل HTML -->
<img src="logo.png" alt="لوگو">

<!-- تصویر داخل پوشه images -->
<img src="images/school.jpg" alt="مدرسه">

<!-- یک پوشه به عقب، بعد داخل پوشه images -->
<img src="../images/shared.jpg" alt="تصویر مشترک">

<!-- مسیر کامل یک تصویر روی اینترنت -->
<img src="https://example.com/pic.jpg" alt="تصویر بیرونی">

مسیر فایل‌ها: نمونه 03-paths-and-images

شرح مثال

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

۴. جدول

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

<h1>برنامه هفتگی</h1>

<table border="1">
    <tr>
        <th>روز</th>
        <th>زنگ اول</th>
        <th>زنگ دوم</th>
    </tr>
    <tr>
        <td>شنبه</td>
        <td>ریاضی</td>
        <td>فیزیک</td>
    </tr>
    <tr>
        <td>یکشنبه</td>
        <td>ادبیات</td>
        <td>شیمی</td>
    </tr>
</table>

جدول: نمونه 04-tables

شرح مثال

• table کل جدول را در بر می‌گیرد.
• tr مخفف table row است و یک سطر می‌سازد.
• th مخفف table header است و خانه‌های عنوان را می‌سازد. متنش خودکار پررنگ و وسط‌چین می‌شود.
• td مخفف table data است و خانه‌های معمولی را می‌سازد.

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

۵. توضیحات در کد

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

<h1>توضیحات</h1>

<!-- این یک توضیح است و در صفحه دیده نمی‌شود -->

<p>این پاراگراف دیده می‌شود.</p>

<!--
    توضیح می‌تواند چند خط هم باشد.
    مثلاً یادداشت کنیم که این قسمت بعداً باید کامل شود.
-->

<!-- <p>این پاراگراف موقتاً غیرفعال شده است.</p> -->

توضیحات: نمونه 05-comments

شرح مثال

توضیح با <!-- شروع می‌شود و با --> تمام می‌شود. هر چیزی بین این دو قرار بگیرد، مرورگر آن را نادیده می‌گیرد.

کامنت‌ها معمولاً دو کاربرد اصلی دارند:

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

۶. عنصر بلوکی و درون‌خطی

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

<h1>بلوکی و درون‌خطی</h1>

<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>

<p>
    این یک متن است با
    <a href="#">یک لینک</a>
    و یک <strong>کلمه پررنگ</strong>
    که همه در یک خط قرار می‌گیرند.
</p>

بلوکی و درون‌خطی: نمونه 06-block-inline

شرح مثال

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

یک قانون ساده هم از این موضوع بیرون می‌آید: عنصر بلوکی می‌تواند درون‌خطی را در بر بگیرد، اما برعکسش درست نیست. یعنی strong داخل p کاملاً درست است، اما گذاشتن یک p داخل strong اشتباه است.

۷. پروژه کوچک فصل

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

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>هنرستان کامپیوتر</title>
</head>
<body>

    <!-- بخش معرفی -->
    <h1>هنرستان کامپیوتر کادوس</h1>
    <img src="images/school.jpg" alt="ساختمان هنرستان" width="500">

    <p>
        ما در رشته <strong>شبکه و نرم‌افزار</strong> دانش‌آموز می‌پذیریم.
    </p>

    <!-- بخش درس‌ها -->
    <h2>درس‌های تخصصی</h2>
    <ul>
        <li>برنامه‌نویسی
            <ul>
                <li>طراحی صفحات وب</li>
                <li>پایگاه داده</li>
            </ul>
        </li>
        <li>شبکه</li>
    </ul>

    <!-- بخش برنامه هفتگی -->
    <h2>برنامه هفتگی</h2>
    <table border="1">
        <tr>
            <th>روز</th>
            <th>درس</th>
            <th>ساعت</th>
        </tr>
        <tr>
            <td>شنبه</td>
            <td>طراحی وب</td>
            <td>۸ تا ۱۰</td>
        </tr>
        <tr>
            <td>دوشنبه</td>
            <td>شبکه</td>
            <td>۱۰ تا ۱۲</td>
        </tr>
    </table>

    <!-- بخش تماس -->
    <h2>تماس با ما</h2>
    <p>
        وب‌سایت:
        <a href="https://kadoosedu.ir/computer" target="_blank">kadoosedu.ir</a>
    </p>

</body>
</html>

پروژه کوچک فصل: نمونه 07-mini-project

شرح مثال

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

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

این صفحه هنوز ظاهر ساده و بدون استایلی دارد. از فصل بعد ظاهر آن را مرحله‌به‌مرحله بهتر می‌کنیم.

خلاصه فصل