آموزش زبان HTML - جلسه ششم - پاراگراف ها

آموزش HTML | اچ تی ام ال فارسی

در جلسه قبل از دوره آموزشی HTML، درمورد هدینگ ها توضیحاتی دادیم و حال می خواهیم مباحث پاراگراف ها را در این جلسه آغاز کنیم.

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

با استفاده از تگ می توان یک پاراگراف در HTML توصیف کرد.

مثال:

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

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

نکته: طبق گفته های قبلی، مرورگر ها به صورت اتوماتیک، یک فضای خالی قبل و بعد از پاراگراف ها ایجاد می کنند.

نمایش HTML

درواقع ما نمی توانیم از این مطمئن باشیم که HTML ما به چه صورت نمایش داده می شود.

کوچک یا بزرگ بودن صفحه نمایش، تغییرات اندازه ویندوز و… نیز می تواند در نمایش نتایج مؤثر باشند.

با HTML، ما نمی توانیم خروجی نمایش را با افزودن فاصله خالی (Space) یا خطوط اضافی تغییر دهیم.

مرورگر به صورت خودکار تمامی فضا های خالی و خطوط اضافی را در HTML حذف می کند.

مثال:

<!DOCTYPE html>
<html>
<body>

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

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

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.

The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines in this paragraph will change.

</body>

</html>

همانطور که در مثال بالا مشاهده می کنید، ما در کد های HTML خطوط و فاصله های بسیاری را ایجاد کرده ایم ولی همانطور که در تصویر خروجی مشاهده می کنید، مرروگر تمامی آن ها را حذف کرده است.

تگ پایانی را فراموش نکنید

اکثر مرورگر ها، کد های HTML را به درستی نشان می دهند حتی اگر تگ های پایانی را قرار ندهیم.

مثال:

<!DOCTYPE html>
<html>
<body>

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

<p>Don't forget to close your HTML tags!</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This is a paragraph.

Don't forget to close your HTML tags!

</body>

</html>

در مثال بالا، ما تگ پایان را قرار نداده ایم اما همانطور که در تصویر بالا مشاهده می کنید، مرورگر آن ها را به درستی نمایش داده است.

اما شما حتماً باید تگ های پایانی را قرار دهید، زیرا نباید به این مسئله اکتفا کنید .

نکته: جا انداختن تگ های پایانی ممکن است در خروجی، ارور ها و مشکلات غیرمنتظره‌ای را همراه داشته باشد.

رفتن به خط بعد در HTML

در HTML، تگ یک Line Break یا همان عنصر رفتن به خط بعدی را تفسیر می کند.

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

مثال:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

<!DOCTYPE html>

<html>

<body>

This is a paragraph with line breaks

</body>

</html>

مشکل شعر ها در HTML

زمانی که ما بخواهیم بیت های شعر را در HTML بنویسیم، با مشکلی مانند مشکل زیر مواجه می شویم.

<!DOCTYPE html>
<html>
<body>

<p>In HTML, spaces and new lines are ignored:</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>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

In HTML, spaces and new lines are ignored:

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.

</body>

</html>

همانطور که مشاهده می کنید، هر بیت در پشت سر هم قرار گرفته شده است. برای حل این مشکل، توضیح تگ بعدی را مطالعه کنید.

تگ <pre> در HTML

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

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

مثال:

<!DOCTYPE html>
<html>
<body>

<p>The pre tag preserves both spaces and line breaks:</p>

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

</body>
</html>