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

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

هدینگ های html

هدینگ های HTML

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

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

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

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

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

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

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

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

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

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

مثال:

تغییر سایت هدینگ

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

قوانین افقی HTML

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

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

Horizontal Rules در html

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

تگ <head> در HTML

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

تگ <head> در بین تگ <html> و تگ <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 – جلسه ششم – پاراگراف ها
پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .