با سلام و عرض ادب خدمت شما خوانندگان گرامی، امروز در رابطه با تگ <p>
و مشکلات مربوط به آن مانند white space و یا line break ها صحبت خواهیم کرد.
المان یا تگ <p>
عنصر <p>
در زبان HTML یک پاراگراف را تعریف می کند:
اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.
مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد!
به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):
اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.
در قسمت آخر این مثال گفته ام که با تغییر سایز مرورگر و صفحه ی کاربر (لپتاپ، تبلت، تلفن هوشمند و …)، تعداد خطوط یک پاراگراف تغییر می کند. برای مشاهده ی این مسئله با چشم های خودتان می توانید در JSBin خط وسط صفحه را بگیرید و فضای سمت راست را کوچکتر کنید. می بینید که تعداد خطوط بیشتر می شوند. همچنین می توانید به جای این کار، پنجره ی مرورگر خود را کوچک و بزرگ کنید تا شاهد این مسئله باشید.
توجه داشته باشید که اگر تگ پایانی <p>
را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:
اما در قسمت قبل نیز به شما توصیه ی اکید کردیم که به هیچ عنوان چنین کاری نکنید.
'dir = 'rtl
). اگر متوجه آن نمی شوید نگران نباشید در آینده با آن آشنا می شویم.المان یا تگ <br>
حتما با خود می گویید اگر مرورگرها فضای خالی در زبان HTML را نادیده می گیرند، پس چطور این فضا را در متون خود ایجاد کنیم؟ اگر بخواهم به خط بعد بروم باید چکار کنم؟ نگران نباشید این کار بسیار ساده است؛ از عنصر <br>
استفاده می کنیم! در برنامه نویسی به مفهوم اینتر زدن و به خط بعد رفتن line break می گوییم که یعنی شکستن خط. بنابراین در طول این دوره نیز از همین مفهوم به جای اینتر استفاده می کنیم.
حتما خودتان متوجه شده اید که استفاده از <br>
بسیار آسان است:
حالا می بینید با اینکه تمام این متن در سورس کد (HTML) در یک خط نوشته شده است اما به خاطر استفاده از <br>
در حالت خروجی خود دارای چندین خط می باشد.
<br>
تگ پوچ یا تگ خالی می گفتیم؛ این تگ ها، تگ پایانی ندارند.سوال: اما اگر من بخواهم مطلبی بنویسم که line break های زیادی داشته باشد چطور؟ به عنوان مثال اگر بخواهم یک شعر بنویسم (که دارای فضاهای خالی زیادی است) نمی توانم از <br>
استفاده کنم چرا که باید صد ها مورد تگ <br>
بنویسم!
پاسخ: برای چنین حالت هایی باید از <pre>
که مخفف preformatted (به معنی «از پیش قالب بندی شده») است، استفاده کنید. در واقع هر متنی که داخل <pre>
قرار بگیرد دقیقا به شکلی نمایش داده می شود که در سورس کد نوشته شده باشد.
استفاده از این تگ، فونتِ متن داخلش را تغییر می دهد که می توانید آن را بعدا با کمک CSS تغییر دهید. مثال:
هنوز دوره ی CSS را برگزار نکرده ایم اما اگر از قبل با CSS آشنایی دارید می توانم به شما کد های پیش فرض تگ pre را معرفی کنم:
دلیل عجیب بودن شکل متن داخل این تگ همین کد CSS است. واضح است که شما می توانید این کد را تغییر دهید تا شکل متن تان نیز تغییر کند.
به طور مثال شعر بالا را می توان اینگونه نمایش داد:
حالا با مراجعه به خروجی این کد متوجه می شوید که شکل متن به حالت عادی خود برگشته است.
خلاصه ی مقاله
در این قسمت با پاراگراف ها و رفتار پیش فرضشان در زبان HTML و نحوه ی نمایششان در مرورگرهای مدرن صحبت کردیم. همچنین به برخی از مشکلات و راه حل های آن در رابطه با white space و line break پرداختیم. امیدوارم این قسمت مورد پسند شما واقع شده باشد.
منبع: روکسو