آموزش عنصر head در HTML

Ratings
(0)

عنصر <head> یک ظرف(container) برای داد های متا است و بین تگ <html> و تگ <body> قرار می گیرد. داده های متا(metadata) در HTML به سند HTML مربوط می شوند و نمایش داده نمی شوند. داد های متا معمولاً موارد زیر را تعریف می کنند:

  1. عنوان سند
  2. مجموعه کاراکترها
  3. استایل ها
  4. اسکریپت ها
  5. و دیگر اطلاعات متا

تگ های زیر، داده های متا را تعریف می کنند:

  1. <title>
  2. <style>
  3. <meta>
  4. <link>
  5. <script>
  6. <base>

عنصر <title> در HTML

عنصر <title> یک عنوان را برای سند تعریف می کند و استفاده از آن در تمام سندهای HTML ضروی است. عنصر <title> موارد زیر را انجام می دهد:

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

در زیر، یک سند ساده HTML قرار دارد:

مثال شماره 1

<!DOCTYPE html>
<html>

<head>
  <title>عنوان صفحه</title>
</head>

<body>
محتوای سند
</body>

</html>
امتحان کنید

استفاده از عنصر <style> در HTML

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

مثال شماره 2

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
امتحان کنید

استفاده از عنصر <link> در HTML

از عنصر <link> برای لینک کردن(پیوند دادن) یک برگه استایل خارجی(external) استفاده می شود:

مثال شماره 3

<link rel="stylesheet" href="/other/mystyle.css">
امتحان کنید

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

استفاده از عنصر <meta> در HTML

از عنصر <meta> برای مشخص کردن موارد زیر استفاده می شود:

1. مشخص کردن مجموعه کاراکتر(character set) مورد استفاده.

2. توضیحات صفحه

3. کلمات کلیدی

4. مشخص کردن نویسنده

5. و دیگر داده های متا

از داده های متا توسط مرورگرها و موتورهای جستجو( با استفاده از کلمات کلیدی) و دیگر سرویس های وب استفاده می شود.

برای تعریف مجموعه کاراکترهای یک صفحه، از فرمان زیر استفاده می کنیم:

 

<meta charset="UTF-8">

برای تعریف یک توضیح در مورد صفحه وب، به صورت زیر عمل می کنیم:

 

<meta name="description" content="آموزش برنامه نویسی">

برای تعریف کلمات کلیدی برای موتورهای جستجو، به صورت زیر عمل می کنیم:

 

<meta name="keywords" content="آموزش,برنامه نویسی,یادگیری">

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

 

<meta name="author" content="احسان عباسی">

تازه کردن(Refresh) سند، هر 30 ثانیه:

 

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

یک مثال از تگ های <meta>:

مثال شماره 4

<meta charset="UTF-8">
<meta name="description" content="آموزش برنامه نویسی">
<meta name="keywords" content="اچ تی ام ال,سی اس اس,برنامه نویسی">
<meta name="author" content="احسان عباسی">
امتحان کنید

تنظیم Viewport در HTML

در HTML5، یک متد برای برنامه نویسان معرفی شد که به آنها امکان می دهد با استفاده از یک تگ متا، viewport را کنترل کنند. به بخش قابل مشاهده در یک صفحه وب، viewport گفته می شود. viewport بسته به نوع دستگاه، تغییر می کند و در موبایل ها کوچکتر است و در صفحه نمایش کامپیوتر بزرگ تر است. ما باید تگ متای زیر را برای تنظیم viewport در تمام صفحات وب خود تنظیم کنیم:

 

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

تگ متای viewport دستورالعمل هایی به مرورگر می دهد مبنی بر این که چگونه باید ابعاد و مقیاس صفحه کنترل شود. بخش width=device-width باعث می شود عرض صفحه به اندزه ی عرض صفحه نمایش دستگاه تنظیم شود( که بسته به نوع دستگاه متفاوت است). بخش initial-scale=1.0 باعث می شود وقتی که صفحه در ابتدا توسط مرورگر لود می شود، سطح زوم(zoom) اولیه تنظیم شود. در زیر، یک صفحه وب بدون استفاده از تگ متای viewport وجود دارد و یک صفحه ی وب نیز با استفاده از تگ متای viewport وجود داد:

(تصویر سمت راست، از viewrport استفاده کرده است و تصویر سمت چپ، از viewport استفاده نکرده است)

 

استفاده از عنصر <script>  در HTML

از عنصر <script> برای تعریف کدهای جاوا اسکریپت در سمتِ کاربر(کلاینت) استفاده می شود. کد زیر، عبارت "سلام بر شما" را در عنصر ی که آیدی آن demo  است می نویسد:

مثال شماره 5

<script>
function myFunction {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
امتحان کنید

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

آموزش عنصر <base> در HTML

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

مثال شماره 6

<base href="https://sina2.ir/" target="_blank">
امتحان کنید

 

از قلم انداختن تگ <html> و <head> و <body>

بر اساس استاندارد HTML5، ما می توانیم تگ های <html>  و <body>  و <head> را از قلم بیندازیم. بنابراین کد زیر، بر اساس HTML5 معتبر است:

مثال شماره 7

<!DOCTYPE html>
<title>عنوان صفحه</title>

<h1>این یک عنوان است</h1>
<p>این یک پاراگراف است</p>
امتحان کنید

نکته: سایت W3Schools توصیه نمی کند که تگ های <html> و <body> از قلم انداخته شوند. از قلم انداختن این تگ ها می تواند باعث شکست در نرم افزار DOM یا XML شود. و در مرورگرهای قدیمی(مثل اینترنت اکسپلورر 9) خطا ایجاد می کند. اما گاهی اوقات، از قلم انداختن تگ <head> متداول است.

  • بازدید: 314

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال