تگ head در زبان نشانه گذاری HTML

تگ head در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

82

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

تگ head در زبان نشانه گذاری HTML

تگ head در زبان نشانه گذاری HTML

زمان مطالعه

5 دقیقه

تعداد بازدید

82

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

عنصر head در زبان نشانه گذاری HTML، محفظه ای برای عناصر زیر است:

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

عنصر head زبان نشانه گذاری HTML

 

عنصر head زبان نشانه گذاری HTML

 

عنصر head محفظه ای برای metadata ها است و بین تگ html و تگ body قرار دارد.

HTML metadata داده های مربوط به سند HTML است، metadata ها نمایش داده نمی شوند.

فراداده ها معمولا عنوان سند (title)، مجموعه کاراکترها (character set)، سبک ها (styles)، اسکریپت ها (scripts) و سایر اطلاعات متا را تعریف می کنند.

 عنصر title زبان نشانه گذاری HTML

 

 عنصر title زبان نشانه گذاری HTML

 

عنصر title عنوان سند را مشخص می کند. عنوان فقط باید متنی باشد و در نوار عنوان مرورگر (title bar) و یا در برگه صفحه (page tab) نمایش داده می شود.

مشخص کردن عنوان سند HTML از الزامات است.

محتوای عنوان صفحه برای بهینه سازی موتورهای جستجو (SEO - سئو) بسیار حائز اهمیت است. عنوان صفحه توسط الگوریتم های موتور جستجو برای تعیین ترتیب هنگام فهرست بندی صفحات در نتایج جستجو استفاده می شود.

وظایف عنصر title :

  • عنوان را در نوار ابزار مرورگر تعریف می کند
  • هنگامی که صفحه به موارد دلخواه (favorites) اضافه می شود، از عنوان صفحه برای ذخیره سازی استفاده می شود
  • عنوان صفحه را در نتایج موتورهای جستجو نشان می دهد

توصیه: با توجه به وظایف بالا، تا حد امکان عنوان صفحه را دقیق و معنی دار تعریف کنید.

مثال: در زیر یک سند ساده HTML برای شما آورده ایم.

 

<!DOCTYPE html>
<html>
<head>
  <title>عنوان صفحه معنی دار</title>
</head>
<body>
محتویات سند HTML …
</body>
</html>

 

 عنصر title زبان نشانه گذاری HTML

 

عنصر style زبان نشانه گذاری HTML

 

عنصر style زبان نشانه گذاری HTML

 

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

مثال: در زیر اطلاعات مربوط به استایل دهی به یک صفحه HTML در عنصر style تعریف شده است

 

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

 

عنصر style زبان نشانه گذاری HTML

 

همانطور که در بالا میبینید استایل های تعریف شده در عنصر style برای صفحه HTML اعمال شده است.

شما راه های دیگری برای استایل دهی دارید که در آموزش CSS جاب تیم به آن ها پرداخته شده است.

عنصر link زبان نشانه گذاری HTML

 

عنصر link زبان نشانه گذاری HTML

 

عنصر link ارتباط سند فعلی و یک سند خارجی را تعریف می کند.

عنصر link بیشتر برای پیوند دادن به شیوه نامه های خارجی (External Style Sheets) استفاده می شود.

مثال: در مثال زیر از عنصر link برای پیوند دادن به یک سند CSS استفاده شده است.

 

<link rel="stylesheet" href="mystyle.css">

 

عنصر link زبان نشانه گذاری HTML

 

نکته: برای کسب اطلاعات در مورد CSS به مقالات آموزشی CSS سایت جاب تیم مراجعه کنید.

عنصر meta زبان نشانه گذاری HTML

 

عنصر meta زبان نشانه گذاری HTML

 

عنصر meta معمولا برای تعیین Character set، توضیحات صفحه (page discription)، تعیین کلمات کلیدی (keywords)، نویسنده سند (author) و تنظیمات viewport استفاده می شود.

Metadata ها در صفحه نمایش داده نمی شوند اما توسط مرورگرها (نحوه نمایش محتوا و یا بارگذاری مجددا صفحه)، موتورهای جستجو (کلمات کلیدی) و سایر خدمات وب استفاده می شوند.

مثال ها:

  • 1-در این مثال، Character set های مورد استفاده در صفحه را معرفی کرده ایم.

 

<meta charset="UTF-8"> 

 

  • 2-در این مثال کلمات کلیدی برای موتورهای جستجو را تعریف کرده ایم.

 

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

 

  • 3-در این مثال توضیحات را برای صفحه وب خود تعریف کرده ایم.

 

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

 

  • 4-در این مثال نویسنده صفحه وب را مشخص کرده ایم.

 

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

 

  • 5-در این مثال مشخص کرده ایم که سند هر 30 ثانیه مجددا refresh شود.

 

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

 

  • 6-در این مثال با تنظیم viewport مشخص کرده ایم که محتوای صفحه ما در همه دستگاه ها به خوبی نمایش داده شود.

 

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

 

یک مثال کلی از عنصر meta:

 

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">

 

عنصر meta زبان نشانه گذاری HTML

 

تنظیمات viewport

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

شما باید عنصر meta زیر را در همه صفحات وب خود قرار دهید.

 

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

 

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

قسمت width = device – width عرض صفحه را مطابق با عرض صفحه دستگاه تنظیم می کند (در دستگاه های مختلف متفاوت است)

Initial = 1.0 بخش سطح بزرگ نمایی اولیه را هنگام بارگذاری صفحه توسط مرورگر تعیین می کند.

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

 

تنظیمات viewport در زبان نشانه گذاری HTML

 

عنصر script زبان نشانه گذاری HTML

 

عنصر script زبان نشانه گذاری HTML

 

عنصر script برای تعریف کدهای جاوااسکریپت (JavaScript) سمت client مورد استفاده قرار می گیرد.

مثال: کد جاوااسکریپت زیر که درون عنصر script نوشته شده است، با کلیک بر روی دکمه Try it، درون یک عنصر HTML با id = “demo” متن Hello JavaScript! را می نویسد.

 

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

 

عنصر script زبان نشانه گذاری HTML

 

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

عنصر base زبان نشانه گذاری HTML

 

عنصر base زبان نشانه گذاری HTML

 

عنصر base نشانی وب اصلی و یا target را برای همه URL های نسبی در یک صفحه وب مشخص می کند.

عنصر base باید دارای یک ویژگی href و یا ویژگی target و یا هر دو باشد.

در هر سند HTML فقط یک عنصر base وجود دارد.

مثال: در زیر یک نشانی اینترنتی پیش فرض و یک target پیش فرض برای همه پیوندهای یک صفحه مشخص کرده ایم.

 

<head>
<base href="https://www.w3schools.com/" 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>

 

عنصر base زبان نشانه گذاری HTML

 

تگ های زبان نشانه گذاری HTML

 

تگ های زبان نشانه گذاری HTML
تگ توضیحات
Head اطلاعات مربوط به سند را مشخص می کند
Title عنوان سند را مشخص می کند
Base آدرس پیش فرض یا هدف پیش فرض را برای همه پیوندهای یک سند مشخص می کند
Link رابطه بین سند و یک منبع خارجی را مشخص می کند
Meta فراداده در مورد یک سند را تعریف می کند
Script اسکریپت های سمت مشتری را تعریف می کند
Style استایل هایی را برای سند مشخص می کند

 

خلاصه مقاله

عنصر head محفظه ای برای ابر داده ها است.

عنصر head بین دو عنصر html و body قرار می گیرد.

مشخص کردن عنصر title از الزامات است و عنوان یک سند را مشخص می کند.

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

عنصر link بیشتر برای پیوند به استایل های خارجی استفاده می شود.

عنصر meta معمولا برای تعیین Character set، توضیحات صفحه (page discription)، تعیین کلمات کلیدی (keywords)، نویسنده سند (author) و تنظیمات viewport استفاده می شود.

عنصر script برای تعریف کدهای جاوااسکریپت (JavaScript) سمت client مورد استفاده قرار می گیرد.

عنصر base نشانی وب اصلی و یا target را برای همه URL های نسبی در یک صفحه وب مشخص می کند.

 

خب به پایان یکی دیگر از مباحث مهم در زبان نشانه گذاری HTML رسیدیم و با تگ head و تگ های درون آن آشنا شدیم.

در مقاله بعدی مربوط به HTML به مبحث مهم و کاربردی Layout می پردازیم.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی