آموزش استفاده از تگ 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 می‌گویند.

مثال

<!DOCTYPE html>
<html>
<head>
  این قسمت می شود هد یک صفحه وب
</head>
<body>
 
<p>www.upweb.ir</p>
 
</body>
</html>

<!DOCTYPE html>

<html>

<head>

این قسمت می شود هد یک صفحه وب

</head>

<body>

<p>www.upweb.ir</p>

</body>

</html>

تگ title در Html

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

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

مثال

<!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>

<!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 خاص تعریف کنید می توانید از تگ استایل برای سی اس اس نویسی استفاده کنید.

مثال

<!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>

<!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 خود را که بصورت مجزا ایجاد شده است را فراخوانی یا اصطلاحا به صفحه ی وب خود متصل کنیم.

مثال

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

نتیجه

metadata در HTML

متاداده ها یا به انگلیسی metadata نیز در همین قسمت Head یک صفحه ی وب قرار میگیرند، متاداده ها در HTML در واقع اطلاعاتی را در مورد یک صفحه وب به مرورگرها و موتورهای جستجوگر ارائه می دهند.

عنصر <meta> معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات viewport استفاده می شود.

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

مثال

1.تعریف مجموعه کاراکتر مورد استفاده :

<meta charset="UTF-8">

1	<meta charset="UTF-8">

2.تعریف کلمات کلیدی برای موتورهای جستجو:

<meta name="keywords" content="HTML, CSS, JavaScript">

1	<meta name="keywords" content="HTML, CSS, JavaScript">

3.تعریف توضیحی برای صفحه وب:

<meta name="description" content="Free Web tutorials">

1	<meta name="description" content="Free Web tutorials">

4.تعریف نویسنده صفحه:

<meta name="author" content="John Doe">

1	<meta name="author" content="John Doe">

5.بازخوانی سند هر 30 ثانیه:

<meta http-equiv="refresh" content="30">

1	<meta http-equiv="refresh" content="30">

6.تنظیم Viewport برای زیبا جلوه دادن وب سایت شما در همه دستگاه ها:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

تنظیم viewport با تگ <meta>

Viewport ناحیه قابل مشاهده کاربر از یک صفحه وب است. با دستگاه متفاوت است – در تلفن همراه کوچکتر از صفحه رایانه خواهد بود.

شما باید عنصر <meta> زیر را در تمام صفحات وب خود بگنجانید:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

این به مرورگر دستورالعمل هایی در مورد نحوه کنترل ابعاد و مقیاس صفحه می دهد.

قسمت width=device-width عرض صفحه را طوری تنظیم می کند که از عرض صفحه دستگاه پیروی کند (که بسته به دستگاه متفاوت است).

زمانی که صفحه برای اولین بار توسط مرورگر بارگیری می شود، قسمت initial-scale=1.0 سطح بزرگنمایی اولیه را تعیین می کند.

در اینجا یک مثال از یک صفحه وب بدون متا تگ viewport و همان صفحه وب با متا تگ viewport آورده شده است.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

تگ <script> در HTML

از عنصر <script> برای تعریف کدهای جاوا اسکریپت استفاده می شود.

مثال-نمایش عبارت “Hello JavaScript!” در عنصری با “id=”demo:

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>

function myFunction() {

document.getElementById("demo").innerHTML = "Hello JavaScript!";

}

</script>

عنصر <base> در html

عنصر <base> آدرس URL پایه را برای تمام URL های مرتبط در یک صفحه مشخص می کند:

مثال:

<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>

<head>

</head>

<body>

</body>

تگ Head چیست؟

تگ Head در Html

تگ های زیر می توانند داخل تگ head قرار گیرند:

آموزش کار با تگ Head در Html

تگ title در Html

تگ <style> در Html

استفاده از تگ link موجود در عنصر head در HTML

metadata در HTML

تنظیم viewport با تگ <meta>

تگ <script> در HTML

عنصر <base> در html

امیدواریم این آموزش مورد توجه شما واقع شده باشد

مطالب مرتبط

آموزش متصل کردن دامنه به کلودفلر (CloudFlare) بصورت جامع

آموزش احراز هویت دامنه ir در ایرنیک بصورت جامع

مقایسه وردپرس و بلاگر بصورت جامع

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده