عنوان ها (Headings)
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
عنوان ها (Headings) در HTML
عنوان ها با تگ های <h1> تا <h6> تعریف می شوند.
<h1> مهمترین عنوان و <h6> کم اهمیت ترین عنوان را تعریف میکند.
مثال
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
نکته: مرورگر به طور خودکار یک فضای سفید(حاشیه) را قبل و بعد از یک عنوان اضافه می کند.
عنوان ها (Headings) با اهمیت هستند
موتورهای جستجو از عنوان ها برای ایندکس کردن ساختار و محتوای صفحات وب استفاده می کنند.
کاربران اغلب از عنوان ها برای انتخاب صفخات وب استفاده می کنند، برای همین استفاده از عنوان ها برای نشان دادن ساختار سند بسیار مهم است.
از تگ <h1> برای نشان دادن مهم ترین عنوان ها استفاده میشود، به دنبال آن از تگ <h2>، و بعد از آن از <h3> و غیره برای نشان دادن عنوان های کم اهمیت تر استفاده میشود.
نکته:از عنوان ها در HTML فقط برای سر تیتر مطالب خود استفاده کنید. از عنوان ها برای بزرگ یا بولد کردن متن استفاده نکنید.
عنوان های بزرگتر
هر عنوان در HTML دارای اندازه پیش فرض است. با این حال، شما می توانید برای هر عنوان با صفت style با استفاده از ویژگی font-size در CSS اندازه مورد نظر خود را مشخص کنید.
مثال
خط افقی در HTML
تگ <hr> یک تغییر موضوع (thematic break) را در صفحه HTML نشان می دهد و اغلب به عنوان یک خط افقی نمایش داده می شود.
عنصر <hr> برای جدا کردن محتوا (یا تعریف یک تغییر) در یک صفحه HTML استفاده می شود:
مثال
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
عنصر head در HTML
عنصر <head> در HTML فضایی برای قرارگیری metadata ها است. metadata ها حاوی داده هایی درباره سند HTML ما هستند که نمایش داده نمی شوند، اما برای نمایش درست صفحات وبسایت لازم هستند.
عنصر <head> بین تگ <html> و <body> قرار می گیرد:
مثال
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
.
.
نکته: metadata ها معمولا عنوان سند، کاراکتر ست ، استایل ها، اسکریپت ها و دیگر متا اطلاعات تعریف می کنند.
چطور کدهای منبع (source) یک صفحه HTML را مشاهده کنیم؟
آیا تا به حال یک صفحه وب را مشاهده کرده اید و از خود بپرسید که "این صفحه چطور درست شده است؟"
مشاهده کد منبع (source code) صفحه HTML:
برای مشاهده کد منبع (source code) صفحه HTML روی صفحه مورد نظر کلیک راست کرده و گزینه ی "view page source" (در Chrome) یا "view sorce" (در Edge) و یا شبیه به اینها را در دیگر مرورگرها انتخاب کنید. پنجره ای که باز خواهد شد حاوی کدهای منبع HTML آن صفحه است.
بازبینی (inspect) کردن بر روی یک عنصر HTML:
برای انجام این کار بر روی یک عنصر (یا یک فضای خالی) راست کلیک کرده و گزینه "Inspect" یا "Inspect Element" را انتخاب کنید تا چگونه ساخته شدن آن عنصر را مشاهده کنید (شما با انجام این کار هم کدهای HTML و هم کدهای CSS را مشاهده خواهید کرد). همچنین شما میتوانید کدهای CSS و HTML در پنل باز شده تغییر دهید و نتیجه را به صورت آنی مشاهده کنید، البته توجه داشته باشید که این تغییرات فقط برای شما قابل مشاهده هستند و در صورت رفرش کردن صفحه از بین می روند.
