با قسمت پنجم از سری آموزش های HTML5 در خدمت شما هستیم. در این قسمت از آموزش قصد داریم به معرفی سرفصل ها و پاراگراف ها در html بپردازیم؛ پس با ما همراه باشید.

سرفصل ها

برای نمایش تیتر یا عنوان مطالب از سرفصل ها استفاده میکنیم.

در html ، سرفصل ها یا Heading به وسیله تگ های <h1> تا <h6> تعریف میشوند.

<h1> مهمترین سرفصل و <h6> کم اهمیت ترین سر فصل را تعریف میکند.

خروجی کد بالا به صورت زیر است :

سرفصل ها و پارگراف ها در html

* نکته : موتور های جستجو از سرفصل های شما برای شاخص گذاری محتوای صفحاتتان استفاده میکنند. همچنین استفاده از سرفصل ها برای نمایش ساختار صفحه بسیار مهم است.

از تگ <h1> برای عنوان های اصلی استفاده میکنیم و سرفصل ها از تگ <h2> به بعد کم اهمیت تر میشوند.

* نکته : از سرفصل ها فقط برای تعریف عنوان ها استفاده میکنیم. برای ضخیم کردن یا بزرگ کردن متن از سرفصل ها استفاده نکنید.

سرفصل های بزرگتر

هر سرفصل در html یک سایز پیش فرض دارد. اما اگر قصد دارید اندازه آن را تغیر دهید، میتوانید با استفاده از خصوصیت style و ویژگی font-size این کار را انجام دهید.

سرفصل ها و پاراگرف ها در html

خط افقی در html

با استفاده از تگ <hr> میتوانیم خطی افقی تعریف کنیم. از این تگ برای جدا کردن محتوا ها یا تغیر در محتوای صفحه استفاده میکنیم.

این تگ ، یک تگ خالی (empty tag) است و نیازی به تگ پایانی ندارد.

سرفصل ها و پاراگراف ها در html

عنصر <head> در html

عنصر <head> هیچ ارتباطی با سرفصل ها یا headings ندارد.

این عنصر ، داده های متا را درون خود جای می دهد که این داده ها متا دارای اطلاعات مهمی درباره صفحه html می باشند و در صفحه نمایش داده نمی شوند.

عنصر <head> بین تگ های <html> و <body> قرار میگیرد.

* نکته : داده های متا یا metadata ها معمولا عنوان سند ، استایل ها ، لینک ها ، اسکریپت ها و سایر اطلاعات را تعریف میکنند.

پاراگراف ها

عنصر <p> یک پاراگراف تعریف میکند.


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

* نکته ۲ : هنگامی که صفحه نمایش داده می شود، مرورگر تمامی فاصله ها و خطوط اضافی را حذف میکند. به کد زیر و خروجی آن توجه کنید:

سرفصل ها و پاراگراف ها در html همانطور که مشاهده میکنید مرورگر خطوط اضافی و فاصله ها را حذف کرده و متن را در یک سطر نمایش داده است.

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

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

شکستن خط در html

با استفاده از عنصر <br> میتوانیم خط جاری را بشکنیم و به خط بعدی برویم.

سرفصل ها و پاراگراف ها در html

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

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

شعر زیر در یک سطر نمایش داده میشود :

سرفصل ها و پاراگراف ها در html

همانطور مشاهده میکنید، مرورگر خطوط اضافی را حذف کرده و شعر را در یک سطر نمایش داده است.

برای حل این مشکل از عنصر <pre> استفاده میکنیم.

عنصر <pre> در html

برای قالب بندی متن از عنصر <pre> استفاده میکنیم. متنی که درون این عنصر قرار میگیرد، عیناً نمایش داده میشود و فاصله ها و خطوط اضافه متن توسط مرورگر حذف نمیشوند.

سرفصل ها و پاراگراف ها در html

چگونه منابع html را مشاهده کنیم؟

برای مشاهده ی کدهای html یک صفحه ، بر روی صفحه راست کلیک کرده و گزینه “View Page Source” (در مرورگر کروم) و یا “View Source” (در اینترنت اکسپلورر) را انتخاب نمایید. در سایر مرورگر ها هم میتوانید  به همین شکل عمل کنید.

خلاصه آموزش

عنصر تعریف
<h1> تا <h6> سرفصل ها را تعریف میکنند.
<hr> یک خط افقی را تعریف میکند.
<p> یک پاراگراف تعریف میکند.
<br> خط جدیدی را تعریف میکند.
<pre> فرمت متن را حفظ میکند.

منابع مورد استفاده در این آموزش

لینک منبع


دیگر قسمت ها

قسمت اول

قسمت دوم

قسمت سوم

قسمت چهارم


منبع : کدتاک


نویسنده : میثم شمس