آشنایی با هیدینگ ها در HTML

در این فصل قصد داریم شما را با تگ های Headings (عناوین) در زبان HTML آشنا کنیم. هیدینگ ها در اسناد HTML مهم بوده و عناوین محتوای ما را مشخص میکنند.


هیدینگ ها در HTML

در اسناد HTML عناوین برای ما از اهمیت زیادی برخوردار است.

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

کاربران سایت شما در قدم اول برای بررسی اجمالی مطالب سایتتان از Heading استفاده میکنند. 

این خیلی مهمه که شما برای نشان دادن ساختار صفحه ی خود از Heading ها استفاده کنید.

Heading ها از تگ <h1> تا تگ <h6> تعریف میشوند.

<h1> بیانگر پر اهمیت ترین عنوان و <h6> بیانگر کم اهمیت ترین عنوان هست :

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
خودتان امتحان کنید

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


خط افقی در HTML 

تگ <hr> باعث ایجاد یک خط افقی در صفحه ی HTML میشود. 

از این عنصر برای جدا کردن محتوای صفحات سایت استفاده میشود. در نمونه کد زیر از این عنصر استفاده شده است :

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
خودتان امتحان کنید

عنصر head در HTML

تگ <head> فضایی برای قرار گرفتن metadata های سایت ماست.

منظور از metadata ها اطلاعاتی هستند که در صفحات HTML قابل مشاهده نیستند اما صفحات ما برای اجرای درست و نمایش صحیح محتوا از اطلاعات آنها استفاده میکنند.

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

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

<!DOCTYPE html>
<html>

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

<body>
.
.
.
خودتان امتحان کنید

نکته: متا دیتا ها معمولا شامل عنوان سند، کارکتر ست، استایل ها، لینک ها، اسکریپت ها و دیگر اطلاعات متا هستند.


چطور سورس یک صفحه ی HTML را مشاهده کنیم؟

آیا تاکنون صفحه ی سایتی را دیده اید که شگفت زده بشوید و از خود بپرسید "چطور آنها این صفحه را درست کرده اند؟"

دو روش برای مشاهده ی سورس یک صفحه ی وب وجود دارد :

مشاهده ی سورس کد صفحه ی HTML :

برای این کار بر روی صفحه ی مورد نظر راست کلیک کرده و گزینه ی "View Page Source" (در کروم) و یا "View Source" (در اینترنت اکسپلورر) و یا چیزی شبیه به اینها در دیگر مرورگر ها را انتخاب کنید. در این صورت صفحه ی باز خواهد شد که سورس صفحه ی HTML در آن قرار دارد.

اینسپکت کردن بر روی یک عنصر HTML :

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

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

منتشر شده در ۲۷ اردیبهشت ۱۳۹۶ حمید رضا ملکی ۲۰۹۸ بازدید
دیدگاه ها
meysam دوشنبه ۲۳ مهر ۱۳۹۷

سلام و درود خدمت استاد حمیدرضاملکی عزیز من مدتی هست از فیلم ها ی زیادی استفاده میکنم برای اموزشم ولی همیشه ی سری سردرگمی داشتم که ناخوداگاه با سایت شما آشنا شدم و واقعا بسیااااااااااااااااار عالیه دقیق و کامل بخش bootstrap رو تموم کردم و بخش های بعدی و دارم کار میکنم.خیلی استفاده میبرم تشکر بسیار فراوان فقط اگه امکانش هست در مورد اینسپکت و تنظیمات اون بیشتر توضیح بدین...

حمید رضا ملکی دوشنبه ۲۳ مهر ۱۳۹۷

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

احمد ایرانپور دوشنبه ۲۲ مرداد ۱۳۹۷

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

حمید رضا ملکی سه شنبه ۲۳ مرداد ۱۳۹۷

سلام. ممنون از شما. بله حرف شما کاملا صحیح است. در حال نوشتن نسخه ای از وبسایت هستم که شامل ویدئو هم باشه. منتظر این نسخه باشید.

حسین سه شنبه ۲ خرداد ۱۳۹۶

سلام. ممنون از مطالب خوبتون. من سوالی برام پیش اومده. آیا استفاده از هیدینگ ها در مقاله اجباریست؟ ما میتونیم تیتر خودمون رو داخل یه پاراگراف بنویسیم و از طریق کدهای CSS اندازه و نوع فونت و ... رو روی آن اعمال کنیم و این طوری کنترل بیشتری روی تیتر های خودمون داریم تا اینکه از هدینگ های تعریف شده استفاده کنیم.

حمید رضا ملکی سه شنبه ۲ خرداد ۱۳۹۶

سلام. همون طور که در این نوشته اشاره کردم موتور های جستجوی مختلف از Heading ها برای ایندکس کردن ساختار  و محتوای صفحات وب استفاده میکنند پس حتما از اونا استفاده کنید ضمن اینکه شما میتونید از طریق زبان CSS تغییرات ظاهری خودتون را روی هیدینگ ها اعمال کنید و مقادیر از پیش تعریف شده ای مثل اندازه فونت و غیره را برای آنها تغییر دهید.

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید