آموزش پاراگراف در HTML (تگهای <p> ، <br> و <pre>)
در HTML برای نمایش متنها از تگهای مختلفی استفاده میشود. مهمترین تگ برای نوشتن متنهای معمولی، تگ <p> است. علاوه بر آن، تگ <br> برای رفتن به خط بعدی و تگ <pre> برای نمایش متن با حفظ فاصلهها و قالببندی کاربرد دارد.
---
1. تگ <p> (پاراگراف)
تگ <p> مخفف Paragraph به معنی «پاراگراف» است و برای نوشتن متنهای معمولی در صفحه وب استفاده میشود.
هر پاراگراف با تگ <p> شروع و با تگ </p> بسته میشود.
مرورگرها بهصورت خودکار قبل و بعد از هر پاراگراف کمی فاصله (margin) ایجاد میکنند.
نکات مهم درباره <p>
1. اگر داخل یک پاراگراف چندین فاصله پشت سر هم بگذارید، مرورگر آنها را به یک فاصله تبدیل میکند.
2. اگر در کد به خط بعد بروید، مرورگر آن را به عنوان خط جدید در نظر نمیگیرد.
مثال تگ <p>
عامرتجارت خلیج فارس
2. تگ <br> (رفتن به خط بعد)
تگ <br> مخفف Break است و باعث میشود متن به خط بعدی برود، بدون اینکه پاراگراف جدید ایجاد شود.
برخلاف <p>، تگ <br> یک تگ خودبسته (self-closing) است و تگ پایانی ندارد.
کاربرد <br>
زمانی از <br> استفاده میکنیم که بخواهیم فقط یک شکست خط ساده ایجاد کنیم؛ مثلاً در نوشتن آدرس، شعر یا متنهایی که نیاز به رفتن به خط بعد دارند اما هنوز در یک پاراگراف هستند.
مثال استفاده از <br>
عامرتجارت خلیج فارس
3. تگ <pre> (متن قالببندیشده)
تگ <pre> مخفف Preformatted Text است و برای نمایش متنی استفاده میشود که فاصلهها، تبها و رفتن به خط بعد در آن مهم هستند.
برخلاف <p>، مرورگر داخل <pre> فاصلههای اضافی و خطهای جدید را دقیقاً همانطور که در کد نوشته شدهاند نمایش میدهد.
معمولاً متن داخل <pre> با فونت monospace نمایش داده میشود و برای نمایش کد بسیار مناسب است.
مثال استفاده از <pre>
عامرتجارت خلیج فارس
مقایسه تفاوت <p> و <pre>
عامرتجارت خلیج فارس
در پاراگراف معمولی (<p>) فاصلههای اضافی حذف میشوند، اما در <pre> همه فاصلهها حفظ میشوند.
چه زمانی از هر کدام استفاده کنیم؟
<p> ➜ برای نوشتن متنهای عادی و توضیحی
<br> ➜ برای رفتن به خط بعد داخل یک متن بدون ایجاد پاراگراف جدید
<pre> ➜ برای نمایش کد، شعر، متنهای دارای فاصلهبندی خاص یا خروجی برنامهها
---
تمرینها
تمرین 1
یک پاراگراف درباره «علت یادگیری HTML» بنویسید و در وسط متن با استفاده از <br> یک شکست خط ایجاد کنید.
تمرین 2
یک متن شامل چند فاصله پشت سر هم بنویسید و آن را یکبار داخل <p> و یکبار داخل <pre> قرار دهید. تفاوت نمایش را بررسی کنید.
تمرین 3
یک نمونه آدرس کامل (نام، خیابان، شهر، کدپستی) بنویسید که همه در یک پاراگراف باشند ولی هر کدام در یک خط جدا نمایش داده شوند.