آموزش HTML - عناصر هدر

عناصر head در HTML فراداده‌هایی مانند عنوان، مجموعه نویسه‌ها، پیوندهای مربوط به شیوه‌نامه‌های خارجی و سایر جزئیات را تعریف می‌کنند. این اطلاعات در صفحه وب نمایش داده نمی‌شوند، اما برای موتورهای جست‌وجو و مرورگرها مفید هستند. عناصر head درون تگ <head> قرار می‌گیرند.

عناصر زیر از عناصر پرکاربرد head هستند:

• عنصر <title>
• عنصر <meta>
• عنصر <base>
• عنصر <link>
• عنصر <style>
• عنصر <script>

بیایید با کمک مثال‌ها، هر عنصر را به‌طور دقیق بررسی کنیم.

عنصر <title> در HTML

از تگ <title> در HTML برای تعیین عنوان سند HTML استفاده می‌شود. عنوان باید محتوای صفحه وب را توصیف کند و فقط از متن تشکیل شده باشد. این عنوان در نوار عنوان زبانه مرورگر نمایش داده می‌شود.

مثال

مثال زیر نشان می‌دهد که چگونه با استفاده از تگ <title> برای یک سند HTML عنوان تعیین کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Title Tag Example</title>
</head>
<body>
   <p>Describing the use of title tag</p>
</body>
</html>

عنصر <meta> در HTML

از تگ <meta> در HTML برای ارائه فراداده درباره یک سند HTML استفاده می‌شود. فراداده در واقع اطلاعات تکمیلی درباره صفحه وب است که می‌تواند شامل تاریخ انقضای صفحه، نویسنده صفحه، فهرست کلمات کلیدی، توضیحات صفحه و موارد دیگر باشد. این اطلاعات همچنین برای بهینه‌سازی موتورهای جست‌وجو استفاده می‌شوند. به خاطر داشته باشید که فراداده‌ای که با تگ <meta> مشخص می‌شود، در صفحه وب نمایش داده نمی‌شود، اما ماشین‌ها می‌توانند آن را بخوانند. ویژگی‌های پرکاربرد این تگ عبارت‌اند از name، content، charset و http-equiv.

بیشتر بخوانید: تگ‌های متا در HTML

مثال

مثال زیر چند مورد از کاربردهای مهم تگ <meta> را درون یک سند HTML شرح می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Meta Tag Example</title>
   <!-- Provide list of keywords -->
   <meta name="keywords" content="C, C++, Java, PHP, Perl, Python">
   <!-- Provide description of the page -->
   <meta name="description" content="Simply Easy Learning by Tutorials Point">
   <!-- Author information -->
   <meta name="author" content="Tutorials Point">
   <!-- Page content type -->
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <!-- Page refreshing delay -->
   <meta http-equiv="refresh" content="30">
   <!-- Page expiry -->
   <meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">
   <!-- Tag to tell robots not to index the content of a page -->
   <meta name="robots" content="noindex, nofollow">
</head>
<body>
   <p>Describing the use of HTML meta tag</p>
</body>
</html>

عنصر <base> در HTML

از تگ <base> در HTML برای تعیین نشانی اینترنتی پایه (URL) برای تمام نشانی‌های نسبی موجود در یک صفحه استفاده می‌شود. این یعنی هنگام پیدا کردن مورد موردنظر، نشانی‌های اینترنتی دیگر به نشانی پایه اضافه می‌شوند. در هر سند HTML فقط مجاز به استفاده از یک عنصر base هستیم. ویژگی‌های پرکاربرد این تگ عبارت‌اند از href و target.

مثال

در این مثال، برای جست‌وجوی تمام صفحات و تصاویر مشخص‌شده، نشانی‌های اینترنتی داده‌شده با نشانی پایه http://www.tutorialspoint.com/ ترکیب می‌شوند:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Base Tag Example</title>
   <base href = "index.htm/" />
</head>
<body>
   <img src="/images/logo.png" alt="Logo Image"/>
   <a href="/html/index.htm" title="HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>

با اجرای کد بالا، لوگوی سایت tutorialspoint به همراه یک پیوند نمایش داده می‌شود. اگر روی آن پیوند کلیک کنیم، به صفحه فهرست آموزش HTML هدایت خواهیم شد.

عنصر <link> در HTML

در HTML، از تگ <link> برای مشخص کردن ارتباط میان صفحه وب فعلی و یک منبع خارجی دیگر استفاده می‌شود. نشانی منبع خارجی در ویژگی href قرار می‌گیرد. سایر ویژگی‌های این تگ عبارت‌اند از rel، type و media. رایج‌ترین کاربرد آن، افزودن شیوه‌نامه‌ها به سند HTML است.

مثال

مثال زیر نحوه پیوند دادن یک فایل شیوه‌نامه خارجی را نشان می‌دهد که در زیرپوشه «css» در ریشه وب قرار دارد:

<!DOCTYPE html>
<html>
<head>
   <title>HTML link Tag Example</title>
   <link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
  <p>It is an example of linking stysheet to the current HTML document.</p>
</body>
</html>

عنصر <style> در HTML

از تگ <style> در HTML برای تعیین سبک‌ها و استایل‌ها، چه برای کل سند HTML و چه برای یک عنصر خاص، استفاده می‌شود. رایج‌ترین ویژگی‌های آن title و media هستند.

مثال

در مثال زیر، با استفاده از تگ <style>، یک سبک برای تگ <p> تعریف می‌کنیم.

<!DOCTYPE html>
<html>
<head>
   <title>HTML style Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <style>
      .myclass{
        background-color: #aaa;
        padding: 10px;
      }
   </style>
</head>
<body>
   <p class="myclass">Hello, World!</p>
</body>
</html>

نکته - برای یادگیری نحوه عملکرد شیوه‌نامه‌های آبشاری، لطفاً آموزش جداگانه موجود در آموزش CSS را بررسی کنید.

عنصر <script> در HTML

از تگ <script> در HTML برای افزودن یک فایل اسکریپت خارجی یا تعریف یک اسکریپت داخلی برای سند HTML استفاده می‌شود. اسکریپت، کدی اجرایی است که عملی را انجام می‌دهد.

مثال

مثال زیر نشان می‌دهد که چگونه از تگ script برای تعریف یک تابع ساده جاوااسکریپت استفاده کنیم. هنگامی که کاربر روی دکمه تأیید کلیک می‌کند، یک کادر هشدار حاوی پیام سلام، دنیا ظاهر می‌شود.

<!DOCTYPE html>
<html>
<head>
   <title>HTML script Tag Example</title>
   <base href="http://www.tutorialspoint.com/" />
   <script type="text/JavaScript">
      function Hello(){
         alert("Hello, World");
      }
   </script>
</head>
<body>
   <input type="button" onclick="Hello();" name="ok" value="OK"  />
</body>
</html>