بنام خدا

عنصر heading

در دروس قبلی در مورد عناوین یا سرفصل ها (heading) مطالبی گفته شد. اکنون به بررسی بیشتر آن می پردازیم.
به مثال زیر توجه کنید:

 <!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>

<h1>بزرگترین سرفصل</h1>

<h2>سرفصل</h2>

<h3>سرفصل</h3>

<h4>سرفصل</h4>

<h5>سرفصل</h5>

<h6>کوچکترین سرفصل</h6>

</body>
</html>
تمرین کنید

 

نکات!
🔸مرورگرها معمولا یک فاصله خالی قبل و بعد عنوان ها قرار می دهند.
🔹سرفصل ها برای موتورهای جستجو مثل گوگل اهمیت دارند. چون ساختار موضوعی صفحه را که موتورهای جستجو فهرست بندی می کنند نشان می دهد. همچنین کاربرها از عناوین برای مرور سریع مطالب سایت استفاده می کنند.
🔸سرفصل های مهم از h1 شروع می شوند و به ترتیب اهمیت تا h6 ادامه پیدا می کنند.
🔹سر فصل ها اندازه ی پیشفرض دارند. اما می توان با style اندازه قلم آن را به اندازه دلخواه تغییر داد.
به مثال زیر توجه کنید. 
<h1 style="font-size:60px;">سرفصل ۱</h1>

در مثال بالا اندازه قلم (فونت) با ویژگی style، شصت پیکسل مشخص شده است.
 

خط افقی

از تگ hr که مخفف horizontal rule به معنی «خط افقی» است، معمولا برای نشان دادن فاصله ای بین دو محتوای مختلف یک صفحه سایت بکار می رود.
تگ hr یک تگ بسته است. به مثال زیر توجه کنید:


 <h1>سرفصل اول</h1>
<p>سطر مربوط به سرفصل اول اینجاست.</p>
<hr>
<h2>سرفصل دوم</h2>
<p>سطر مربوط به سرفصل دوم اینجاست.</p>

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

عنصر head

شاید برخی این عنصر را با heading که برای سرفصل بکار می رود اشتباه بگیرند. اما در واقع ربطی به هم ندارند.
عنصر head بالای کدهای html و قبل body یا بدنه سایت و بعد از تگ شروع شونده html قرار می گیرد.
این تگ در واقع در مرورگر و صفحه ی سایت نمایش داده نمی شود و محتوای meta و عنوان سایت در آن قرار می گیرد.

 <!DOCTYPE html>
<html>

<head>
<title>عنوان صفحه</title>
<meta charset="UTF-8">
<meta name='keywords' content='آموزش ، مجله، زبان ، طراحی سایت'>
</head>

<body>

<h1>سرفصل</h1>
<p>سطر مربوط به سرفصل اینجاست.</p>

</body>
</html>
نکات کدها
🔸در تگ head عنوان صفحه در تگ title قرار می گیرد و بالای مرورگر نمایش داده می شود.
🔹تگ های متا (meta tags) اطلاعات یک سایت که مخصوصا برای موتورهای جستجو مانند گوگل برای بررسی محتوای سایت مهم هستند، قرار می گیرد.
🔸اطلاعات متا شامل توضیح سایت، کلیدواژه ها، لینک ها، نویسنده سایت و … می شوند که در دروس آینده مفصل تر توضیح داده خواهند شد.

مشاهده کدهای منبع یک سایت

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

0
آموزش HTML ؛ درس پنجم: heading , rule , head

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *