زمانی که بخواهیم مجموعه ای از متن ها را بنویسیم از تگ p استفاده میشود.
یک پاراگراف همیشه از یک خط جدید شروع شده و همیشه بلاکی از کاراکترها و نوشته است.
در html برای تعریف پاراگراف از تگ p استفاده می شود.
مرورگرها بصورت پیش فرض زمانی که از تگ p استفاده میشود، قبل و بعد آن یک فضای خالی (از بالا و پایین) ایجاد می کند.
مثال:
|
1 |
<p>dejavan.ir</p> |
نحوه نمایش html
شما هرگز مطمئن نخواهید بود از اینکه html نوشته شده توسط شما یا دیگران چطور نمایش داده می شود.
اندازه های بزرگ و کوچک نمایشگرها، همچنین تغییر اندازه سایز ویندوز باعث ایجاد نتایج متفاوت در نمایش محتوا میشود.
در html شما نمی توانید با اضافه کردن فاصله (space) و یا خط های جدید، نحوه نمایش خروجی در مرورگر را تغییر بدهید.
مرورگر بصورت پیش فرض در هنگام نمایش تگ ها در خروجی فاصله ها و فضاهای اضافی را پاک می کند.
مثال:
|
1 2 3 4 5 6 7 |
<p> This paragraph contains a lot of lines in the source code, but the browser ignores it. </p> |
|
1 2 3 4 5 6 7 |
<p> This paragraph contains a lot of spaces in the source code, but the browser ignores it. </p> |
ایجاد خط کش افقی با تگ hr
در html زمانی که بخواهید یک خط کش افقی که یک ردیف را در بربگیرد و یک لاین از سمت چپ به راست ترسیم کند، باید از تگ hr استفاده کنید.
از این تگ برای جداسازی محتوای سند html استفاده می شود.
این تگ دارای تگ پایانی نیست و میانش محتوای متنی قرار نمی گیرد.
مثال:
|
1 2 3 4 5 6 |
<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> |
شکستن خط در html
همانطور که در قسمت های بالا گفته شد روش های زیادی برای رفتن به خط بعد وجود دارد.اما یکی دیگر از روش ها در داخل متن استفاده از تگ br است.در این حالت برای ایجاد یک خط جدید نیازی نیست یک پاراگراف ایجاد کنید بلکه درون پاراگراف می توانید بقیه محتوای خود را در یک خط جدید نمایش دهید.
این تگ هم دارای تگ پایانی نیست.
مثال:
|
1 |
<p>This is<br>a paragraph<br>with line breaks.</p> |
مشکل نظم در متن های تک خطی
به مثال زیر در حالت عادی دقت کنید.این متن در حالت عادی در خروجی به همین شکلی که نوشته شده نمایش داده نمی شود.
مثال:
|
1 2 3 4 5 6 7 8 9 |
<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 استفاده کنیم.این تگ متن را همانطور که نوشته می شود نمایش می دهد.این تگ فاصله و رفتن به خط بعد را حفظ می کند.
مثال:
|
1 2 3 4 5 6 7 8 9 |
<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> |
