درس هفتم : پاراگراف‌های HTML

پاراگراف‌های HTML

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

پاراگراف‌های HTML

عنصر <p> در HTML یک پاراگراف را تعریف می‌کند.

یک پاراگراف همیشه از یک خط جدید شروع می‌شود و مرورگرها به طور خودکار مقداری فضای خالی (یک حاشیه یا Margin) قبل و بعد از پاراگراف اضافه می‌کنند.

مثال:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

خروجی

This is a paragraph.

This is another paragraph.

نحوه نمایش HTML

شما نمی‌توانید مطمئن باشید که HTML چگونه نمایش داده خواهد شد.

صفحه نمایش‌های بزرگ یا کوچک و تغییر اندازه پنجره‌ها نتایج متفاوتی ایجاد می‌کنند.

در HTML، شما نمی‌توانید با اضافه کردن فضاهای خالی اضافی یا خطوط اضافی در کد خود، نحوه نمایش را تغییر دهید.

مرورگر هنگام نمایش صفحه، تمام فضاها و خطوط اضافی را به طور خودکار حذف می‌کند:

مثال:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

خروجی

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

خطوط افقی HTML

تگ <hr> یک شکست موضوعی را در صفحه HTML تعریف می‌کند و اغلب به صورت یک خط افقی نمایش داده می‌شود.

عنصر <hr> برای جدا کردن محتوا (یا تعریف یک تغییر) در یک صفحه HTML استفاده می‌شود:

مثال:

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

خروجی

This is heading 1

This is some text.

This is heading 2

This is some other text.

تگ <hr> یک تگ خالی (Empty tag) است، به این معنی که تگ پایان ندارد.

شکست خط در HTML

عنصر <br> در HTML یک شکست خط (Line Break) را تعریف می‌کند.

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

مثال:

<p>This is<br>a paragraph<br>with line breaks.</p>

خروجی

This is
a paragraph
with line breaks.

مشکل شعر

این شعر در یک خط نمایش داده خواهد شد:

مثال:

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>

خروجی (نامطلوب)

My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to me.

راه حل – عنصر <pre> در HTML

عنصر <pre> در HTML متن پیش‌فرمت شده (Preformatted text) را تعریف می‌کند.

متن داخل عنصر <pre> با یک فونت با عرض ثابت (معمولاً Courier) نمایش داده می‌شود و هم فضاها و هم شکست‌های خط را حفظ می‌کند:

مثال:

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

خروجی (مطلوب)

  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.

تمرین (Exercise):

درست یا غلط؟ پاراگراف‌های HTML همیشه از یک خط جدید شروع می‌شوند.

۱. درست (True) – پاسخ صحیح

۲. غلط (False)

مرجع تگ‌های HTML

تگتوضیحات
<p>یک پاراگراف را تعریف می‌کند.
<hr>یک تغییر موضوعی در محتوا تعریف می‌کند.
<br>یک شکست خط واحد ایجاد می‌کند.
<pre>متن پیش‌فرمت شده را تعریف می‌کند.
درس قبلی
بازگشت به دوره
درس بعدی