آموزش استفاده از تگ Head در HTML بصورت جامع
تگ Head چیست؟
هد یا head در زبان انگلیسی به معنی سر و قسمت بالایی وب سایت است. با توجه به همین معنی می توان به اهمیت تگ هد پی برد.
تگ head، یکی از مهمترین تگ های html است که می توان به آن، مغز اصلی صفحه وب نیز گفت.
تگ head برای نشان دادن بخش هد سند HTML و اطلاعات عمومی (metadata) در مورد سند استفاده می شود
و باید شامل یک عنوان برای سند باشد و همچنین میتواند اسکریپت ها، استایل ها، اطلاعات متا و … را نیز در بربگیرد.
تگ Head در Html
بین دو تگ <html> و <html/> تگ‌های جدیدی با اسم تگ باز <head> و تگ بسته <head/> قرار میگیرند.
تگ <head> و <head/> در برگیرنده اطلاعات ابتدایی را در رابطه با صفحه html است.
مثلا می‌گوید نویسنده این صفحه چه کسی است یا توضیحاتی در رابطه با خود سایت ارائه میکند.
تگ <head> در یک صفحه ی وب بعد از تگ <html> و قبل از تگ <body> قرار میگیرد.
تگ های زیر می توانند داخل تگ head قرار گیرند:
- تگ title:این تگ برای مشخص کردن عنوان یک صفحه ی وب بوده، و برای ربات های جتسجوگر بسیار مهم است.
- تگ style:برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.
- تگ base:برای مشخص کردن یک لینک پایه برای تمامی لینک های موجود در یک صفحه ی وب.
- تگ link:برای فراخوانی فایل های خارجی مثل css در یک صفحه ی وب به کار می رود.
- تگ meta:برای اضافه کردن یکسری اطلاعات اضافی در مورد یک صفحه وب بوده و برای مرورگرها و موتورهای جستجوگر مهم است.
- تگ script:برای اضافه کردن دستورات جاوا اسکریپت به صفحه ی وب استفاده می شود.
توجه داشته باشید اگر میخواید یک محتوا ، متن ، تصویر و… در مرورگرها نمایش داده شود باید آن را در قسمت body قرار داد نه قسمت هِد یا Head.
آموزش کار با تگ Head در Html
عنصر head در یک سند HTML بعد از تگ HTML و قبل از تگ body قرار می گیرد. این تگ با کمک دو تگ باز و بسته <head></head> بین دو تگ اصلی <html> و <html/> میگیرد. به این عمل, یعنی قرار دادن یک تگ در دل تگ دیگر ، nest می‌گویند.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> این قسمت می شود هد یک صفحه وب </head> <body> <p>www.upweb.ir</p> </body> </html> |
تگ title در Html
این تگ برای نمایش عنوان سایت در مرورگر ها استفاده می شود. برخی دیگر از کاربردهای این تگ به شرح زیر است:
- زمنایکه صفحه وب به بخش علاقه مندی ها ، اضافه شود عنوان آن را در آن بخش مشخص می کند.
- عنوان وب سایت را در لیست نتایج جستجوهای موتورهای جستجوگر مشخص می کند.
- در tab هر مرورگز عنوان سایت را قرار می دهد.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>A Meaningful Page Title</title> </head> <body> <p>The content of the body element is displayed in the browser window.</p> <p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p> </body> </html> |
تگ <style> در Html
این عنصر برای تعریف کردن style های عناصر یک صفحه وب مورد استفاده قرار می گیرد.
به عبارتی دیگر، زمانی که شما می خواهید فقط برای یک صفحه یکسری css خاص تعریف کنید می توانید از تگ استایل برای سی اس اس نویسی استفاده کنید.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>The content of the body element is displayed in the browser window.</p> <p>The content of the title element is displayed in the browser tab, in favorites and in search-engine results.</p> </body> </html> |
استفاده از تگ link موجود در عنصر head در HTML
با استفاده از تگ link ما می توانیم به راحتی فایل سی اس اس خارجی یا External خود را که بصورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه ی وب خود متصل کنیم.
مثال
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> |
نتیجه
metadata در HTML
متاداده ها یا به انگلیسی metadata نیز در همین قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.
عنصر <meta> معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات viewport استفاده می شود.
متاداده های مختلفی وجود داره ولی خب خیلی هاشون اصلا نیاز نیستن یا ضروری نیستن یاهم خیلی کاربردی نیستن، ولی بعضی هاشونم خیلی مهم و پراستفاده هستند که در ادامه باهاشون آشنا خواهید شد.
مثال
1.تعریف مجموعه کاراکتر مورد استفاده :
|
1 |
<meta charset="UTF-8"> |
2.تعریف کلمات کلیدی برای موتورهای جستجو:
|
1 |
<meta name="keywords" content="HTML, CSS, JavaScript"> |
3.تعریف توضیحی برای صفحه وب:
|
1 |
<meta name="description" content="Free Web tutorials"> |
4.تعریف نویسنده صفحه:
|
1 |
<meta name="author" content="John Doe"> |
5.بازخوانی سند هر 30 ثانیه:
|
1 |
<meta http-equiv="refresh" content="30"> |
6.تنظیم Viewport برای زیبا جلوه دادن وب سایت شما در همه دستگاه ها:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
تنظیم viewport با تگ <meta>
Viewport ناحیه قابل مشاهده کاربر از یک صفحه وب است. با دستگاه متفاوت است – در تلفن همراه کوچکتر از صفحه رایانه خواهد بود.
شما باید عنصر <meta> زیر را در تمام صفحات وب خود بگنجانید:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
این به مرورگر دستورالعمل هایی در مورد نحوه کنترل ابعاد و مقیاس صفحه می دهد.
قسمت width=device-width عرض صفحه را طوری تنظیم می کند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت است).
زمانی که صفحه برای اولین بار توسط مرورگر بارگیری می شود، قسمت initial-scale=1.0 سطح بزرگنمایی اولیه را تعیین می کند.
در اینجا یک مثال از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آورده شده است.
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
تگ <script> در HTML
از عنصر <script> برای تعریف کدهای جاوا اسکریپت استفاده می شود.
مثال-نمایش عبارت “Hello JavaScript!” در عنصری با “id=”demo:
|
1 2 3 4 5 |
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> |
عنصر <base> در html
عنصر <base> آدرس URL پایه را برای تمام URL های مرتبط در یک صفحه مشخص می کند:
مثال:
|
1 2 3 4 5 6 7 8 |
<head> <base href="https://www.upweb.ir/" target="_blank"> </head> <body> <img src="images/stickman.gif" width="24" height="39" alt="Stickman"> <a href="tags/tag_base.asp">HTML base Tag</a> </body> |
