همیشه برای شروع کردن یک پاراگرفا توی کدنویسی HTML از تگ p باید استفاده کرد . این تگ داره میگه که یک خط جدید داریم مینویسیم که یک سری مطالب متن داخلش هست . اگر هم یک تگ جدید p تعریف کنیم یعنی داریم به HTML میگیم نقطه سرخط! پاراگرافمون رو تموم میکنه و خط جدیدی برامون باز میکنه.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
نحوه نمایش تگ پاراگرفا یا همون تگ p
ظاهر نحوه نمایش تگ پاراگرفا خیلی داستان داره ! یعنی چی !؟ یک مبحثی وجود داره توی کدنویسی وب که بهش میگن طراحی واکنش گرا یا همون طراحی responsive . که میاد میگه بر اساس سایز صفحه نمایش کاربر باید همه چی عوض بشه . مثلا اگر سایز پاراگراف شما 18 ویکسل باشه و سایز صفحه نمایش کاربر 1440 عرضش باشه تعداد کلمات در یک خط با صفحه نمایشی که عرض 1920 داره فرق داره ! منطقی هم هست که فرق داشته باشه چون صفحه نمایش کاربران بزرگ و کوچیک میتونه باشه و تمام کاربران از یک سایز صفحه نمایش خاصی استفاده نمیکنن. این مشکل یا چالش بعدا خیلی باید صحبت کنیم راجع بهش .
خب یک مشکل دیگه وجود داره توی تگ های p . اون هم اینه که شما هر جوری که توی ورد مثلا مینوشتین نمیتونین توی HTML هم همونجوری پاراگراف رو بنویسین. به زیان ساده تر مثال زیر رو ببینین :
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
تگ p میاد جفت این کدهای بالا رو به یک شکل یکسان چاپ میکنه و اون هم اینه که تمام فاصله ها و به قول خودمون اینترهایی که خورده رو حذف میکنه. و همه رو میچسبونه بهمدیگه. اشتباه نکنیم که فاصله های رو که از اسپیس استفاده کردیم یک دونه رو واسمون نگه میداره ولی بقیه رو پاک میکنه ! خط ها هم به همدیگه وصل میکنه و هیچکدوم از اون چیزی که ما توی این کد نوشتیم رو رعایت نمیکنه . حالا باید برای حل مشکل اینتر چیکار کرد؟! از تگ <br> برای درج اینتر یا خط بعدی توی تگ p باید استفاده کنیم . اینجوری به HTML و مرورگیر داریم میگیم که یه خط رو برو پایین و دوباره شروع کن .
تگ hr یا خط افقی
خیلی ساده اگر تگ hr رو توی کدمون استفاده کنیم مرورگر میاد یه خط افقی برامون میکشه و همه چی رو از اون خط افقی سوا میکنه . میشه ازش توی کدی های تگ p استفاده کرد تا یه خط بندازه بین خط های موجود در تگ p .
<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>
تگ br یا سرخط
این تگ رو هم بالا صحبت کردیم راجع بهش . هر جا از این تگ br استفاده کنیم داریم میگیم برو سر خط بعدی . فرقش با تگ hr اینه که اون یک خط م=چاپ میکنه روی صفحه و بعد میره خط بعدی ولی این هیچ کاری نمیکنه و همینجوری میره خط بعدی .
تگ pre
خب حالا که از بیشعوری تگ p توضیح دادیم بهتون! میخوایم یک تگ دیکه بگیم . تگ p در بالا گفتیم که هیچ اهمیتی به نحوه نوشتار ما نمیده و هر فاصله اضافی و یا اینتر رو حذف میکنه. ولی HTML یک تگ باشعور دیگه داره که معمولا برای شعر و کد هایی که بخواین بنویسیم استفاده میشه . مثلا کد زیر دقیقا همونطوری که مینویسیم نمایش داده میشه به کاربر :
<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>
در حالیکه اگه ما بیایم مثل کد زیر بنویسیم همه فاصله های اضافی رو حذف میکنه و اینترها هم اهمیت نمیده بهش :
<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>
