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

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

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

🔹 تعریف پاراگراف در HTML

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

مرورگرها به‌صورت خودکار کمی فضای خالی (margin) قبل و بعد از یک پاراگراف اضافه می‌کنند.

مثال (کد):

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

 نمایش در 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>

 خط افقی در 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>

نکته:
تگ <hr> یک تگ خالی است، به این معنی که پایان یا تگ بسته‌شونده ندارد.

 شکست خط (Line Break) در HTML

عنصر <br> در HTML برای ایجاد شکست خط (یعنی رفتن به خط بعدی) به کار می‌رود.

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

مثال (کد):

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

نکته:
تگ <br> هم یک تگ خالی است و پایان ندارد.

 مشکل شعر (Poem Problem)

اگر یک شعر را داخل یک تگ <p> قرار دهید، ممکن است همه‌ی خطوط آن در یک خط نمایش داده شود.

مثال (کد):

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

 راه‌حل: استفاده از تگ <pre>

عنصر <pre> در HTML برای نمایش متن از پیش فرمت‌شده به‌کار می‌رود.

متنی که داخل <pre> قرار می‌گیرد:

• با فونت ثابت (معمولاً Courier) نمایش داده می‌شود

• و فاصله‌ها و شکست‌های خط (line breaks) در آن حفظ می‌شوند

مثال (کد):

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

 مرجع تگ‌های HTML