متن و قالب‌بندی
کار با متن و قالب‌بندی محتوا در HTML
قالب‌بندی متن در HTML
هنر زیبا کردن و سازماندهی محتوا
در این درس یاد می‌گیریم چطور متن‌هایمان را زیبا و منظم کنیم. مثل این که یک نویسنده باشید و بخواهید کتابتان را با عناوین، پاراگراف‌ها و تأکیدات مختلف تنظیم کنید! ✍️
HTML ابزارهای قدرتمندی برای قالب‌بندی متن در اختیار ما قرار می‌دهد که باعث می‌شود محتوای ما خواناتر و جذاب‌تر شود.
نکته جالب:
اولین روزنامه آنلاین دنیا در سال ۱۹۹۲ منتشر شد و فقط با HTML ساده قالب‌بندی شده بود!
عناوین (Headings)
عناوین مثل سلسله مراتب یک شرکت هستند! h1 مدیرعامل است، h2 مدیران، h3 سرپرستان و... 👔
<h1>عنوان اصلی - مثل نام فیلم</h1>
<h2>عنوان فرعی - مثل نام فصل</h2>
<h3>عنوان کوچک - مثل نام قسمت</h3>
<h4>عنوان کوچک‌تر</h4>
<h5>عنوان خیلی کوچک</h5>
<h6>کوچک‌ترین عنوان</h6>نمایش در مرورگر:
عنوان اصلی - مثل نام فیلم
عنوان فرعی - مثل نام فصل
عنوان کوچک - مثل نام قسمت
عنوان کوچک‌تر
عنوان خیلی کوچک
کوچک‌ترین عنوان
نکته مهم:
همیشه از h1 شروع کنید و به ترتیب پیش بروید. مثل شماره‌گذاری فصل‌های کتاب!
پاراگراف‌ها و شکست خط
پاراگراف‌ها مثل جمله‌های یک مکالمه هستند. هر پاراگراف یک ایده کامل را بیان می‌کند! 💬
<p>این پاراگراف اول است. در اینجا درباره موضوع اصلی صحبت می‌کنیم.</p>
<p>این پاراگراف دوم است.<br>
این خط بعد از شکست خط قرار دارد.</p>
<p>پاراگراف سوم با <br> فاصله بین کلمات.</p>
<hr> <!-- خط افقی برای جدا کردن بخش‌ها -->
<p>این پاراگراف بعد از خط افقی قرار دارد.</p>نمایش در مرورگر:
این پاراگراف اول است. در اینجا درباره موضوع اصلی صحبت می‌کنیم.
این پاراگراف دوم است.
این خط بعد از شکست خط قرار دارد.
پاراگراف سوم با فاصله بین کلمات.
این پاراگراف بعد از خط افقی قرار دارد.
قالب‌بندی متن
حالا وقت آن است که متن‌هایمان را مثل یک طراح حرفه‌ای تزئین کنیم! 🎨
<p>این متن <strong>پررنگ</strong> است.</p>
<p>این متن <em>مورب</em> است.</p>
<p>این متن <u>زیرخط‌دار</u> است.</p>
<p>این متن <mark>هایلایت شده</mark> است.</p>
<p>این متن <small>کوچک</small> است.</p>
<p>این متن <del>حذف شده</del> است.</p>
<p>این متن <ins>اضافه شده</ins> است.</p>
<p>فرمول: H<sub>2</sub>O و E=mc<sup>2</sup></p>نمایش در مرورگر:
این متن پررنگ است.
این متن مورب است.
این متن زیرخط‌دار است.
این متن هایلایت شده است.
این متن کوچک است.
این متن حذف شده است.
این متن اضافه شده است.
فرمول: H2O و E=mc2
لیست‌ها
لیست‌ها مثل فهرست خرید یا برنامه روزانه هستند. به ما کمک می‌کنند چیزها را منظم کنیم! 📝
لیست نامرتب (Unordered List)
<h3>فهرست خرید:</h3>
<ul>
<li>نان</li>
<li>شیر</li>
<li>تخم مرغ</li>
<li>سیب</li>
</ul>نمایش:
فهرست خرید:
- نان
- شیر
- تخم مرغ
- سیب
لیست مرتب (Ordered List)
<h3>مراحل پخت کیک:</h3>
<ol>
<li>فر را روشن کنید</li>
<li>مواد را مخلوط کنید</li>
<li>در فر قرار دهید</li>
<li>۳۰ دقیقه صبر کنید</li>
</ol>نمایش:
مراحل پخت کیک:
- فر را روشن کنید
- مواد را مخلوط کنید
- در فر قرار دهید
- ۳۰ دقیقه صبر کنید
تمرین عملی
حالا وقت تمرین است! یک صفحه وبلاگ بسازید:
📝 تمرین:
یک صفحه وبلاگ بسازید که شامل موارد زیر باشد:
- • عنوان اصلی: "سفرنامه من به شمال"
- • عنوان فرعی: "روز اول: ورود به جنگل"
- • یک پاراگراف درباره سفر (با کلمات پررنگ و مورب)
- • عنوان فرعی: "چیزهایی که دیدم"
- • لیست نامرتب از چیزهایی که دیدید
- • عنوان فرعی: "برنامه فردا"
- • لیست مرتب از کارهایی که می‌خواهید انجام دهید
جواب تمرین
این یکی از راه‌های حل این تمرین است:
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<title>سفرنامه من به شمال</title>
</head>
<body>
<h1>سفرنامه من به شمال</h1>
<h2>روز اول: ورود به جنگل</h2>
<p>امروز <strong>بالاخره</strong> به جنگل‌های شمال رسیدم! هوا <em>فوق‌العاده</em> خنک بود و صدای پرندگان واقعاً <mark>دل‌نشین</mark> بود. این سفر یکی از <strong>بهترین تصمیمات</strong> زندگی‌ام بوده.</p>
<h2>چیزهایی که دیدم</h2>
<ul>
<li>درختان کاج غول‌پیکر</li>
<li>آبشار زیبا</li>
<li>خرس کوچولو (از دور!)</li>
<li>پروانه‌های رنگارنگ</li>
<li>غروب خیره‌کننده</li>
</ul>
<h2>برنامه فردا</h2>
<ol>
<li>صبح زود بیدار شدن</li>
<li>صبحانه در طبیعت</li>
<li>پیاده‌روی تا قله کوه</li>
<li>عکس‌برداری از منظره</li>
<li>بازگشت به کمپ</li>
</ol>
<hr>
<p><small>نوشته شده در ۱۵ اردیبهشت ۱۴۰۴</small></p>
</body>
</html>نکته:
توجه کنید که از تگ‌های مختلف قالب‌بندی استفاده کرده‌ایم تا متن جذاب‌تر شود. همچنین از hr برای جدا کردن بخش‌ها استفاده شده است.