درس سوم: نوشتن متن و پاراگراف (تگ‌های متنی در HTML)

اموزش رایگان HTML

تا الان با ساختار کلی یک صفحه HTML و تگ‌های اصلی آشنا شدی. حالا وقتشه که اولین محتوای واقعی رو داخل تگ <body> بنویسیم: متن!

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

بخش‌های این درس:

  1. تگ پاراگراف <p>
  2. تگ عنوان یا تیتر <h1> تا <h6>
  3. تگ خط جدید <br>
  4. تند و مورب کردن متن با <strong> و <em>
  5. مثال عملی و تمرین

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

یکی از پرکاربردترین تگ‌ها در HTML تگ <p> هست که برای نوشتن یک پاراگراف یا بند جدید استفاده میشه.

مثال:

<p>این یک پاراگراف نمونه است.</p>

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

2. تگ‌های عنوان <h1> تا <h6>

برای نوشتن تیترها (همون سرفصل‌های برجسته) از تگ‌های عنوان استفاده می‌کنیم. این تگ‌ها از <h1> (بزرگ‌ترین تیتر) تا <h6> (کوچک‌ترین تیتر) تقسیم‌بندی شدن.

  • <h1>عنوان اصلی صفحه</h1>
  • <h2>عنوان فرعی ۱</h2>
  • …
  • <h6>عنوان کوچک</h6>

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

3. تگ خط جدید <br>

این تگ باعث میشه که متن به خط بعدی بره، بدون اینکه پاراگراف جدیدی ساخته بشه. این تگ بسته نمی‌خواد و تنها به صورت <br> نوشته میشه.

مثال:

متن اول<br>متن در خط بعدی

4. تگ‌های تاکید (تند و مورب) <strong> و <em>

  • تگ <strong>: متن رو ضخیم و پررنگ نشون میده (در HTML نشونه اهمیت متن).
    مثال: <strong>متن مهم</strong>
  • تگ <em>: متن رو به صورت ایتالیک (مورب) درمیاره (نشون‌دهنده تاکید).
    مثال: <em>متن با تاکید</em>

5. مثال عملی و تمرین

یک مثال ساده با همه تگ‌هایی که یاد گرفتی:

<!DOCTYPE html>
<html>
  <head>
    <title>نمونه نوشتن متن در HTML</title>
  </head>
  <body>
    <h1>خوش آمدید به آموزش HTML!</h1>
    <h2>اولین عنوان فرعی</h2>
    <p>متن پاراگراف اول.</p>
    <p>این یک <strong>متن مهم</strong> است و این هم <em>متنی مورب</em> می‌باشد.<br>متن بعد از رفتن به خط جدید.</p>
    <h3>یک تیتر کوچک‌تر</h3>
    <p>تمرین: خودتان این کد را در ویرایشگر بنویسید و نتیجه را در مرورگر ببینید!</p>
  </body>
</html>

نکات سریع برای یادگیری این درس:

  • هر پاراگراف جدید را با <p> بنویس.
  • تیتر اصلی هر صفحه را با <h1> شروع کن؛ بقیه تیترها را با <h2> تا <h6> ادامه بده.
  • برای ایجاد خط جدید از <br> استفاده کن.
  • برای تاکید بیشتر از <strong> و برای تاکید متفاوت (مورب) از <em> کمک بگیر.

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *