آشنایی با پارگراف ها در HTML

مقالات و نوشته ای ما در وب از پارگراف ها تشکیل شده اند. در این فصل قصد داریم شما را با عنصر Paragraphs (پاراگراف ها) در زبان HTML آشنا کنیم.


پاراگراف ها در 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>
خودتان امتحان کنید
منتشر شده در ۲۹ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۸۶۱ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده