پاراگراف ها (Paragraphs)
«پاراگراف HTML» یک تکه متن منظم است. هر پاراگراف در خط جدید شروع می شود. مرورگر قبل و بعدش فاصله خودکار می گذارد.
پاراگراف چیست؟
تگ <p> پاراگراف را می سازد. هر پاراگراف در خط تازه می آید. فاصله ها را مرورگر خودش می گذارد.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
نمایش در مرورگر
نمایش در دستگاه ها فرق دارد. فاصله های اضافی و خطوط اضافی نادیده گرفته می شوند.
<p>
This paragraph<br>contains a lot of lines<br>in the source code,<br>but
the browser <br>ignores it.
</p>
<p>
This paragraph<br>contains a lot of spaces<br>in the source code,<br>but the browser <br>ignores it.
</p>
خط افقی (hr)
تگ <hr> یک جداساز موضوعی است. معمولاً خط افقی دیده می شود. این تگ پایانی ندارد.
<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>
شکستن خط با br
تگ <br> یک شکست خط می گذارد. پاراگراف جدید نمی سازد.
<p>This is<br>a paragraph<br>with line breaks.</p>
شعر و مشکل پاراگراف
اگر شعر را داخل <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> متن را با فاصله ها و خطوط همان طور نشان می دهد. فونت ثابت دارد.
<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>
گام های عملی
- یک پاراگراف ساده با <p> بساز.
- با <br> یک خط را بشکن.
- بین بخش ها <hr> قرار بده.
- برای شعر از <pre> استفاده کن.
ادامه مسیر
برای تیترها به سرفصل ها برو. سپس رنگ و اندازه را در استایل ها یاد بگیر. همچنین ویژگی ها را در ویژگی ها ببین. نیاز داری؟ این صفحه پاراگراف HTML را نشانه گذاری کن.
جمع بندی سریع
- <p> پاراگراف می سازد و خط تازه می آورد.
- فاصله های اضافی نادیده گرفته می شوند.
- <br> خط را می شکند؛ پاراگراف جدید نه.
- <hr> بخش ها را جدا می کند.
- <pre> فاصله ها و خطوط را حفظ می کند.