تاریخ انتشار:۱۰:۰ ۱۳۹۸/۸/۴

پاراگراف ها در HTML

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

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

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

---

چگونگی نمایش صفحات 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

عنصر <br> در HTML باعث ایجاد یک خط جدید در صفحه میشود.

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

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

نکته : عنصر <br> از نوع عناصر empty بوده و فاقد تگ پایانی است.

---

مشکل نمایش چندین بیت شعر در HTML

با مشاهده ی خروجی کد زیر خواهید دید که بیت های شعر پشت سر هم نمایش میابند :

   <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> در HTML استفاده کنیم.

---

عنصر <pre> در HTML

عنصر <pre> متنی که از قبل دارای فرمت هست را در خود جای میدهد و شکل آن را حفظ میکند. 

 متون داخل تگ <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/ >

منبع:learnsource