در این جلسه از دوره آموزش html وب سایت همراه آی سی تی به بررسی تگ h در html خواهیم پرداخت.
تگ h در html :
- تگ h در html یکی از مهمترین تگ های ساختار صفحه html به شمار می آید.
- عنوان در html با تگ <h> تعریف می شوند.
- تگ h در html سایز بندی متفاوتی دارد بزرگترین عنوان را در html با تگ <h1> و کوچکترین عنوان را در html با تگ <h6> نمایش می دهند.
- تگ h در html با start tag عنوان(<h>) شروع می شوند و با end tag عنوان (<h/>) بسته می شوند و محتوایی که در بین این تگ ها قرار می گیرد. درخروجی با سایز پیش فرض html برای آن عنوان نمایش داده می شود.
- عنوان ها جزء عناصر Block هستند و اجازه نمی دهند هیچ عنصر دیگری در کنار آنها قرار بگیرد در جلسه مربوط به این عناصر به صورت کامل توضیح داده خواهند شد.
- مرورگرها به طور خودکاریک فضایی را قبل و بعد از عنوان ایجاد می کنند.
اهمیت تگ h1 :
- عنوانهای html در طراحی سایت مهم هستند.موتورهای جستجو از عنوانها استفاده می کنند تا فهرست ساختار و محتوای صفحات وب را نمایش دهند.
- کاربران صفحات وب را با عنوان های آن می خوانند. مهم است که عنوان در سرفصل ها برای نشان دادن ساختار سند html استفاده شود.
- <h1> باید برای عنوان اصلی صفحه استفاده شود، به ترتیب <h2>، سپس کمتر <h3> و غیره ..
- ازنظربهینه سازی صفحات وب برای موتورهای جستجو(سئو) نمی توان بیش از یک عنوان h1 به کاربرد.
- سایر عنوان ها (h2 , h3 , h4 , h5 , 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>
- از عنوانها هیچ وقت نباید برای bold کردن متن صفحه استفاده کنید.وفقط تگ های عنوان را باید به سرتیتر ها اعمال کنید.
عنوان بزرگتر :
همانطور که در بالا گفته شداندازه عنوان ها به طور پیش فرض در html تعریف شده است.
با استفاده از css داخلی یا خارجی می توان اندازه عنوانها را به اندازه دلخواه تغییر داد.در موردcss ها به طور مفصل توضیح داده خواهد شد.
<!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>تگ hr در html :
- تگ hr در html یک خط افقی را تعریف می کند.وبرای جداکردن محتوا در یک صفحه html کاربرد دارد.
- تگ hr یک سینگل تگ است یعنی تگ انتها ندارد و محتوایی داخل آن قرار نمی گیرد.
- تگ <hr> رابهتر است به صورت </hr> بنویسیم که در xhtml هم قالب دچار مشکل نشود و از دید w3cبه صورت استاندارد باشد.
تگ عنوان <head> در html :
یک صفحه html به ۳ قسمت تقسیم می شود.
- قسمت هدر یا سر صفحه وب
- قسمت بدنه یاbody یک صفحه html
- قسمت پایین یا footer یک صفحه html
- تگ <head> تگی شامل ابتدا و انتها می باشدکه با عنوانهای html کاملا تفاوت دارد و نباید اشتباه گرفته شود.
- تگ <head> قسمت سر یک صفحه html را می سازد.
- تگ <head> بین تگ <html> و تگ <body> قرار دارد.
- درون تگ <head> تگ های متا قرار می گیردکه در مورد آنها توضیح خواهیم داد.
- تگ های متا معمولا عنوان سند، مجموعه کاراکترها، استایل ها، لینک ها، اسکریپت ها و سایر اطلاعات را تعریف می کنند.
بیشتر بخوانید :معرفی دیزاین و اسپلیت دردریم ویور – جلسه سیزدهم (ویدیو)
چگونه می توان منبع کد های یک صفحه html را دید؟
- برای مشاهده کد منبع html برروی یک نقطه خالی کلیک راست کنید.
- روی گزینه view page source کلیک کنید.کدهای منبع صفحه وب را خواهید دید.
- می توانید از کلید های ctrl+u هم استفاده کنید.پنجره ای باز می شود که کدهای منبع html را نمایش می دهد.
چگونه می توان عناصر یک صفحه وب را بررسی کرد؟
- بر روی یک عنصر (یا یک منطقه خالی) کلیک راست کرده و گزینه “Inspect” یا “Inspect Element” را انتخاب کنید.
- تگ های html صفحه به شما نمایش داده خواهد شدو می توانیدببینید که صفحه از چه عناصری ساخته شده است .
- هم تگ های html و هم سلکتور های css را خواهید دید.
- در پنلی که باز می شود می توانید تگ ها را ویرایش کنید.و تاثیر را زنده ببینید البته بعد از ریفرش کردن اثر آن از بین می رود.
