آموزش رایگان html
جلسه هفتم

پاراگراف ها در HTML

پاراگراف ها در یک سند Html همانطور که گفته شد در یک سند HTML ، تگ <p> ، یک پاراگراف را تعریف میکند.

معمولا مرورگرها ،بصورت خودکار یک فاصله کوچک سفید رنگ (margin) ، قبل و بعد از پاراگراف ها قرار میدهند.   نمایش اسناد HTML در مرورگرها شما نمیتوانید مطمئن باشید که سند […]

پاراگراف ها در یک سند Html

همانطور که گفته شد در یک سند HTML ، تگ <p> ، یک پاراگراف را تعریف میکند.

معمولا مرورگرها ،بصورت خودکار یک فاصله کوچک سفید رنگ (margin) ، قبل و بعد از پاراگراف ها قرار میدهند.

 

نمایش اسناد HTML در مرورگرها

شما نمیتوانید مطمئن باشید که سند HTML شما ، در مرورگر ، چگونه نمایش داده خواهد شد ، زیرا اندازه های مختلف صفحه نمایش ها نتایج مختلفی از یک سند HTML را به نمایش می گذارند.(برای آزمایش این موضوع کافی است شما صفحه مرورگرتان را کوچک و بزرگ کنید).

بنابراین هنگامیکه سند HTML خود را با یک گوشی موبایل و یا تبلت که عرض صفحه نمایش کوچک تری دارند ، باز میکنید ، با ظاهر متفاوتی از آنچه در سیستم کامپیوترتان مشاهده کرده اید روبرو میشوید!

در یک سند HTML ، فاصله ها ( Space ها) ی اضافه نمایش داده نمیشوند.به این صورت که اگر شما در یک متن پاراگراف خود از چندین space پشت سر هم استفاده کنید ، فقط یکی از آنها در مرورگر نمایش داده میشود.

همچنین هنگامیکه در یک عنصر پاراگراف از دکمه Inter ، برای رفتن به خط بعدی ، استفاده میکنید ، این کاراکتر ها در مرورگر نمایش داده نمیشود و همه ی متن موجود در یک پاراگراف ، در یک خط قرار می گیرد!

مثال:

در مثال بالا همانگونه که مشاهده میشود در پاراگراف دوم از فاصله های متعددی بین کلمات استفاده شده است در صورتیکه اگر کد بالا را به وسیله ی مرورگر اجرا کنید ، هر دو پاراگراف به یک صورت نمایش داده میشوند و فواصل (space) های اضافی که در پاراگراف دوّم وجود دارد در مرورگر اعمال نمی شود.هم چنین کلیه ی inter هایی که در متن استفاده شده است در مرورگر قابل مشاهده نخواهد بود و همه ی محتوای یک پاراگراف در یک خط قرار می گیرد.(در زیر اجرای دو پاراگراف بالا در مرورگر ، قابل مشاهده است)

 

نمایش فاصله ها و space ها در زبان html

 

تگ پایان پاراگراف ها را فراموش نکنید!

اگر شما فراموش کنید که تگ پایان عناصر پاراگراف را بنویسید ، باز هم مرورگر ها سند HTML شما را به خوبی نمایش خواهند داد (بنابراین شما متوجه اشتباه خود نخواهید شد)

در نمونه کد بالا تگ های پایان نوشته نشده است امّا به درستی و بدون اشکال در مرورگر اجرا میشود ، امّا این مورد با استاندارد های زبان HTML همخوانی ندارد و فراموش نکنید که همیشه باید تگ پایان را بنویسید ، زیرا ننوشتن تگ پایان ممکن است در بعضی موارد (مانند مفسر های سخت گیر XHTML ) باعث بروز مشکلات و خطاهایی شود!

 

قابلیت پرش به خط بعدی با تگ <br>

هر گاه در یک سند HTML ، بخواهیم بدون عوض کردن پاراگراف و تعریف پاراگراف جدید به خط بعدی برویم ، میتوانیم از تگ <br> استفاده کنیم.

مثال

نمایش کد بالا در مرورگر

 

ایجاد line break و رفتن به خط بعدی در html

همانطور که در مثال بالا دیدیم با استفاده از تگ <br> میتوانیم ادامه متن را به خط بعدی ببریم.

 

آشنایی با تگ <pre> در HTML

به کمک تگ <pre> میتوان یک متن پیش فرمت بندی شده (preformatted) را در سند HTML تعریف کرد.یعنی هر متنی که بین دو تگ <pre> و </pre> قرار بگیرد بصورت کامل ، و همراه با تمامی فاصله ها و inter ها در مرورگر نمایش داده میشود.

معمولاً متنی که بین دو تگ <pre> و </pre> قرار بگیرد ، در مرورگر یا فونت courier نمایش داده میشود.

در مراحل بعدی آموزش یاد میگیریم که چگونه فونت متن را تغییر دهیم ، پس لطفا صبور باشید!

 

حالا شما فرض کنید که قصد نوشتن یک شعر را در صفحه HTML دارید.اگر از تگ <pre> استفاده نکنید :

نمایش کد شما در مرورگر بصورت زیر خواهد بود

مشکل نمایش متون چند خطی و شعر در html

یعنی هیچکدام از inter های متن در مرورگر اعمال نخواهد شد که باعث نمایش نادرست شعر ما در صفحه می شود.

اما اگر همان شعر بالا را با استفاده از تگ <pre> بنویسیم :

نمایش کد بالا در مرورگر بصورت زیر خواهد بود

استفاده از تگ <pre> در html

 

یعنی با استفاده از تگ <pre> ، تمامی فاصله ها و inter های متن در مرورگر اعمال شده و شعر ما بصورت کاملاً صحیح و زیبا به نمایش در می آید.

 

کلیه حقوق مدرسه مجازی وب متعلق به گروه طراحی وب نگار میباشد.کپی برداری تنها با ذکر منبع مجاز میباشد.