بنام خدا

سطرها (Paragraphs)

در درس های قبلی اندکی با شیوه ی استفاده از تگ های سطر <p> آشنا شدید. در این درس منحصرا به بیان ویژگی های این عنصر می پردازیم.
به مثال زیر توجه کنید و به صفحه تمرین عملی بروید.

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

 <p>
این یک سطر
است که در کدها
به این صورت در خط
جدید اضافه می شود اما

مرورگر آنها را نادیده می گیرد.
</p>

<p>
این یک سطر
است که در کدها

به این صورت در خط
جدید اضافه می شود اما
مرورگر آنها را نادیده می گیرد.
</p>

</body>
</html> 

 

نکات!
🔸در مثال بالا یک جمله را در خط های مختلف تقسیم کردیم اما در نهایت مرورگر جمله را به صورت پیوسته نشان می دهد.
🔹در واقع مرورگر فاصله ایجاد شده در کد نویسی را در نظر نمی گیرد.
🔸هر چقدر هم فضا بوسیله ی دکمه space صفحه کلید بین خط ها ایجاد شود، مرورگر آن را تنها به اندازه یک فاصله در نظر می گیرد.
🔹توجه داشته باشید که حتما تگ پایانی <p/> را در انتها قرار دهید. اگرچه برخی مرورگرها محتوا را بدون تگ بسته به درستی نشان می دهند، اما ممکن است برخی اوقات مشکلات غیرمنتظره بوجود آورد.
🔸مرورگر به طور پیشفرض یک فاصله قبل و بعد سطر قرار می دهد تا محدوده آن را جدا از محتوای قبل و بعد نشان دهد.
<p>این یک سطر بدون تگ بسته است
<p>این یک سطر دیگر بدون تگ بسته است که ممکن است در برخی مرورگرها مشکلاتی بوجود بیاورد.

فاصله بین خطوط با تگ <br>

تگ <br> که مخفف break به معنی «شکستگی» است، در خط ها شکستگی ایجاد می کند. در مثال بالا دیدیم که گذاشتن هرچقدر فاصله بین جملات در سطر فایده ای نداشته و مرورگر در نتیجه صفحه محتوا را بدون شکستگی بین جملات نشان می دهد.
به مثال زیر توجه کنید و به صفحه ی تمرین عملی بروید:


<p>این یک<br>سطر است<br>که در آن شکستگی ایجاد شده است.</p> 

 

نکات!
🔸در مثال بالا با استفاده از تگ <br> در یک سطر بین خط ها فاصله ایجاد کردیم و هر قسمت در خط جدید آغاز شده است.
🔹تگ <br> تنها بین خطوط شکستگی ایجاد می کند و یک تگ بسته است و تگ پایانی ندارد.

عنصر <pre>

آیا این امکان وجود دارد که بدون استفاده از تگ <br> و با قرار دادن هر چقدر فاصله با دکمه space، فاصله ها توسط مرورگر خوانده شود؟
به مثال زیر توجه کنید و در صورت تمایل به صفحه تمرین عملی بروید:

 <!DOCTYPE html>
<html>

<head>
<title>عنوان صفحه</title>
</head>

<body>

 <pre>
 آسایش دو گیتی

تفسیر این        دو حرف    است

 با دوستان    مروت



با دشمنان
مدارا
</pre> 

</body>
</html>

 

نکات!
🔸اگر دقت کرده باشید با استفاده از تگ <pre> توانستیم آزادانه هر فاصله و شکستگی ای ایجاد کنیم.
🔹تگ <pre> به مرورگر می فهماند که باید تمام فاصله ها و شکستگی های ایجاد شده در کدها، در صفحه نمایش محتوا هم خوانده شود.
0
آموزش HTML ؛ درس ششم: سطرها (Paragraphs)

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *