هیدینگ ها در 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 در سرور نخواهد داشت. با بارگذاری دوباره ی صفحه تغییرات اعمال شده از بین رفته و صفحه به حالت قبلی باز خواهد گشت.
منبع:learnsource