آموزش زبان HTML - جلسه پنجم - هدینگ ها

آموزش HTML | اچ تی ام ال فارسی

در جلسه قبلی، صفت ها (Attributes) را توضیح دادیم و حال در این جلسه، می خواهیم درمورد هدینگ ها (Headings) یا همان عنوان های HTML صحبت کنیم.

به طور کلی HTML از 6 هدینگ به شکل زیر تشکیل شده است:

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

هدینگ های HTML

هدینگ ها در HTML با استفاده از تگ <h1> تا <h6> توصیف می شوند.

طبق گفته های جلسات قبلی، تگ <h1> مهم ترین هدینگ و همچنین <h6> کم اهمیت ترین عناوین را در HTML توصیف می کنند .

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

نکته: مرورگر ها به طور اتوماتیک، یک فاصله (لبه) به اول و آخر هدینگ ها اضافه می کنند.

هدینگ ها مهم هستند

معمولاً موتور های جستجوگر از هدینگ های وب سایت برای ایندکس بهتر ساختار و محتوای وب سایت استفاده می کنند.

به طور معمول، اکثر کاربران با استفاده از خواندن هدینگ ها، تصمیم به ادامه خواندن محتوا می گیرند و همین موضوع باعث می شود که ما در هدینگ ها باید بهترین جملات و کلمات را وارد کنیم.

تگ <h1> باید به عنوان هدینگ (عنوان) اصلی استفاده شود. هرچه شماره هدینگ ها بیشتر شود، ارزش آن ها کمتر می شود. به طور مثال، هدینگ <h3> از هدینگ <h2> ارزش کمتری دارد و کمتر به آن توجه می شود.

نکته: باید دقت داشته باشید که از هدینگ ها تنها و تنها باید برای وارد کردن هدینگ استفاده شود و نباید از آن برای Bold کردن و بزرگ کردن جملات استفاده شود.

هدینگ های بزرگ‌تر

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

مثال:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:60px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-size property.</p>

</body>

</html>

همانطور که در مثال بالا مشاهده می کنید، ما با استفاده از یک صفت، توانستیم سایز فونت هدینگ 1 را به 60 پیکسل تغییر دهیم.

قوانین افقی HTML

تگ <hr> یک خط برای ایجاد وقفه موضوعی (thematic break) را توصیف می کند و بیشتر اوقات به عنوان قوانین افقی (Horizontal Rules) نمایش داده می شود.

تگ <hr> به طور معمول برای جدا کردن محتویات و موضوعات استفاده می شود. برای درک بهتر این تگ، به مثال زیر دقت کنید.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<p>This is some text.</p>

<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>
<p>This is some other text.</p>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>

</html>

همانطور که در تصویر بالا مشاهده می کنید، در بین هر هدینگ، یک خط افقی ایجاد شده است. با استفاده از همین خط در HTML، ما می توانیم موضوعات و محتویات را از یکدیگر جدا کنیم.

تگ <head> در HTML

تگ <head> در HTML برای قرار دادن متادیتا ها (Metadatas) استفاده می شود. متادیتا های HTML اطلاعاتی درمورد فایل HTML را توصیف می کنند و در مرورگر ها غیرقابل مشاهده هستند.

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

مثال:

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

نکته: متادیتا ها معمولاً اطلاعاتی درمورد تیتر صفحه HTML، کاراکتر ست (character set)، استایل ها، اسکریپت ها و دیگر اطلاعات متا ارائه می کند.

چگونه می توان منبع یک صفحه HTML را مشاهده کرد؟

آیا تابحال برای شما هم پیش آمده باشد که یک صفحه HTML را مشاهده کرده باشید و با خود بگویید که چگونه آن ها، این صفحه را ایجاد کرده اند؟

مشاهده سورس یا همان منبع یک فایل HTML

در صفحه HTML که قرار دارید، راست کلیک کرده و بر روی گزینه “View Page Source” در مرورگر کروم، “View Source” در مرورگر Edge و… در مرورگر های دیگر کلیک کنید. سپس پنجره ای جدید که حاوی کد های HTML آن صفحه می باشد، باز می شود.

بازرسی (Inspect) کردن تگ های HTML

برای مشاهده یک تگ خاص در صفحه HTML می توان از ابزار Inspect مرورگر ها استفاده کرد. برای اینکار به راحتی می توان با راست کلیک کردن بر روی یک عنصر یا همان تگ (یا حتی مکان های خالی) در صفحه HTML، بر روی گزینه “Inspect” یا “Inspect Element” کلیک کنید. سپس می توانید کد هایی که با استفاده از آن ها، برای ایجاد آن عناصر و تگ ها استفاده شده است را مشاهده کنید. همچنین می توانید همان کد ها را به طور دلخواه ویرایش کنید و تغییرات خود را بر روی آن ها اعمال کنید.

بررسی تگ های HTML

در کانی تمز، ما توضیحات اضافی و کاربردی درمورد تگ ها و صفت های آن در جلسات این دوره می دهیم تا بتوانید درک بهتر و کامل تری نسبت به این تگ ها و صفت ها داشته باشید.

در جلسات بعدی، ما تگ های HTML بیشتری را آموزش خواهیم داد.

تگ <html>: ریشه (Root) یک صفحه HTML را توصیف می کند.

تگ <body>: بدنه صفحه HTML را توصیف می کند.

تگ <head>: محلی برای قرار دادن تگ های head (مانند تیتر، اسکریپت ها، استایل ها، اطلاعات متا و…).

تگ های <h1> تا <h6>: هدینگ ها (عنوان ها) صفحه HTML را توصیف می کنند.

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

آموزش زبان HTML – جلسه چهارم – صفت هاآموزش زبان HTML – جلسه ششم – پاراگراف ها