بنام خدا

سطرها (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> به مرورگر می فهماند که باید تمام فاصله ها و شکستگی های ایجاد شده در کدها، در صفحه نمایش محتوا هم خوانده شود.

 

اینفوگرافی

دستور انگلیسی

آیا می دانید؟

لغات 504

مکالمات انگلیسی

اصطلاحات انگلیسی





عضویت در خبرنامه

با عضویت در خبرنامه، از آخرین آموزش ها، محصولات و تخفیف های بابا آب داد مطلع شوید.

یا برای اطلاع می توانید در هر یک از کانال های زیر در تلگرام، گپ و ایتا به آی دی babaabdadchannel@ عضو شوید:

گپ تلگرام ایتا

آموزش HTML ؛ درس ششم: سطرها (Paragraphs)

پاسخ دهید

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