اولین صفحه: متن، فهرست، لینک و تصویر

۱. اسکلت سند و اولین صفحه

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

<!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>

    سلام دنیا

</body>
</html>

اولین صفحه: نمونه 01-hello-world

شرح مثال

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

توجه داشته باشید که متن «سلام دنیا» را بدون هیچ تگی نوشتیم و بار دیگر نمایش داده می‌شود. HTML سخت‌گیر نیست، اما این روش درست نیست. متن بدون تگ یعنی مرورگر نمی‌داند این متن چه نقشی دارد و همین باعث می‌شود بعداً نتوانیم به آن استایل بدهیم. از بخش بعدی، هر محتوا را داخل تگ مناسب خودش قرار می‌دهیم.

۲. عنوان‌ها و پاراگراف

عنوان و پاراگراف از پرکاربردترین تگ‌های HTML هستند. HTML شش سطح عنوان دارد، از h1 تا h6.

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

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

<h2>جلسه دوم</h2>
<p>در جلسه دوم سراغ جدول‌ها می‌رویم.</p>

عنوان‌ها و پاراگراف‌ها: نمونه‌های 02 و 03

شرح مثال

• h1 بزرگ‌ترین و مهم‌ترین عنوان است. در هر صفحه تنها یک بار از آن استفاده کنید، برای عنوان اصلی صفحه.
• h2 برای عنوان بخش‌های اصلی است، h3 برای زیربخش‌ها و همین‌طور تا شش.
• p مخفف paragraph است. هر پاراگراف خودش را در یک p بگذارید.

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

۳. قالب‌بندی متن

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

<h1>قالب‌بندی متن</h1>

<p>
    این یک متن <strong>بسیار مهم</strong> است که باید به آن دقت کنید.
</p>

<hr>

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

قالب‌بندی متن: نمونه 04-text-formatting

شرح مثال

• strong متن را پررنگ نشان می‌دهد و به مرورگر می‌گوید این قسمت اهمیت زیادی دارد.
• em متن را کج می‌کند و یعنی روی این کلمه تأکید داریم. em مخفف emphasis است.
• hr یک خط افقی جداکننده می‌کشد. مانند تگ تصویر، تگ بسته ندارد چون محتوایی برای در بر گرفتن ندارد.

۴. فهرست نامرتب

وقتی ترتیب چند مورد اهمیتی ندارد، از فهرست نامرتب استفاده می‌کنیم. مرورگر جلوی هر مورد یک نقطه توپر می‌گذارد.

<h1>وسایل مورد نیاز</h1>

<ul>
    <li>کامپیوتر یا لپ‌تاپ</li>
    <li>مرورگر</li>
    <li>ویرایشگر متن</li>
    <li>کمی حوصله</li>
</ul>

فهرست نامرتب: نمونه 05-unordered-list

شرح مثال

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

• ul مخفف unordered list است و کل فهرست را در بر می‌گیرد.
• li مخفف list item است و هر مورد فهرست را در بر می‌گیرد.

قاعده مهم این است که li تنها و تنها می‌تواند مستقیماً داخل ul یا ol باشد و بیرون از آنها معنی ندارد. به قرار گرفتن یک تگ درون تگ دیگر، تودرتویی می‌گوییم و در HTML بسیار با آن سر و کار داریم.

۵. فهرست مرتب و لینک

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

<h1>مراحل ساخت اولین صفحه</h1>

<ol>
    <li>یک پوشه بساز</li>
    <li>فایل index.html را ایجاد کن</li>
    <li>کد را بنویس</li>
    <li>فایل را در مرورگر باز کن</li>
</ol>

<p>
    برای اطلاعات بیشتر به
    <a href="https://kadoosedu.ir" target="_blank">سایت کادوس</a>
    مراجعه کنید.
</p>

فهرست مرتب و لینک: نمونه 06-ordered-list-link

شرح مثال

بخش مربوط به فهرست دقیقاً مانند نمونه قبل است، تنها ul را با ol عوض کرده‌ایم. ol مخفف ordered list است. نکته اینکه شماره‌ها را ما نمی‌نویسیم؛ مرورگر خودش می‌گذارد. اگر بعداً یک مورد وسط فهرست اضافه کنید، بقیه خودشان بار دیگر شماره‌گذاری می‌شوند.

بخش مهم‌تر این نمونه، تگ لینک است:

• a مخفف anchor است و متنی که داخلش می‌گذارید، متن قابل کلیک می‌شود.
• ویژگی href مقصد لینک را مشخص می‌کند؛ یعنی با کلیک کجا برویم.
• ویژگی target="_blank" باعث می‌شود مقصد در یک سربرگ تازه باز شود و صفحه فعلی بسته نشود. برای لینک به سایت‌های دیگر معمولاً همین را می‌خواهیم.

۶. تصویر

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

<h1>تصویر در صفحه</h1>

<img src="images/classroom.jpg" alt="کلاس درس" width="400">

<p>تصویر بالا از کلاس درس ما گرفته شده است.</p>

تصویر: نمونه 07-image

شرح مثال

• src مسیر فایل تصویر است. اینجا یعنی «داخل پوشه images دنبال فایل classroom.jpg بگرد». اگر مسیر را اشتباه وارد کنید، به جای تصویر یک آیکون شکسته می‌بینید.
• alt متن جایگزین است. اگر تصویر پیدا نشود همین متن دیده می‌شود، و صفحه‌خوان‌ها هم همین را برای نابینایان می‌خوانند. نوشتن alt اختیاری نیست؛ عادت خوبی است که از همین حالا شروع کنید.
• width عرض تصویر را بر حسب پیکسل تعیین می‌کند و ارتفاع خودش متناسب تنظیم می‌شود.

۷. مثال نهایی: صفحه معرفی

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

<!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/me.jpg" alt="عکس من" width="200">

    <p>
        دانش‌آموز سال دهم و علاقه‌مند به <strong>طراحی سایت</strong> هستم.
    </p>

    <h2>چیزهایی که دوست دارم</h2>
    <ul>
        <li>برنامه‌نویسی</li>
        <li>کتاب خواندن</li>
        <li>والیبال</li>
    </ul>

    <h2>هدف‌های امسال من</h2>
    <ol>
        <li>یادگیری HTML و CSS</li>
        <li>ساختن یک سایت شخصی</li>
        <li>شرکت در مسابقه وب مدرسه</li>
    </ol>

    <p>
        صفحه من در
        <a href="https://kadoosedu.ir" target="_blank">کادوس</a>
    </p>

</body>
</html>

نمونه نهایی فصل: نمونه 08-final-example

شرح مثال

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

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

خلاصه فصل