آشنایی با عنصر head در HTML

در فصول قبل درباره ی تگ <head> توضیحات مختصری داده شد در این فصل به طور کامل به این عنصر خواهیم پرداخت.


 عنصر <head> در HTML

عنصر <head> ظرفی برای متا دیتا ها (داده هایی درباره ی داده ها) است که بین تگ های <html> و <body> قرار گرفته است.

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

متا دیتا ها معمولا عنوان سند ، کارکترست، استایل ها، لینک ها، اسکریپت ها و دیگر اطلاعات را برای اسناد HTML تعریف میکنند.

متا دیتا ها با استفاده از این تگ ها تعریف میشوند : <title> ، <style> ، <meta> ، <link> ، <script> و <base> .


عنصر <title> در HTML

عنصر <title> عنوان سند HTML را مشخص میکند و در تمام اسناد HTML و XHTML اجباری است.

عنصر <title> :

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

 یک سند ساده ی HTML :

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document......
</body>

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

عنصر <style> در HTML

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

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

عنصر <link> در HTML

از عنصر <link> برای ارجاع به صفحات استایل خارجی استفاده میشود :

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

عنصر <meta> در HTML

عنصر <meta> برای مشخص کردن نوع کارکترست، توضیح صفحه، کلمات کلیدی، نویسنده، و دیگر اطلاعات استفاده میشود.

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

تعریف کارکترستی که مورد استفاده قرار میگیرد :

<meta charset="UTF-8">

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

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

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

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

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

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

بارگذاری دوباره ی سند در هر 30 ثانیه :

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

مثالی از تگ های متا :

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
خودتان امتحان کنید

تنظیم Viewport برای صفحه

HTML5 روشی را معرفی کرده است که به طراحان وب اجازه میدهد روی نحوه ی نمایش صفحه از طریق تگ <meta> در دستگاه های مختلف کنترل داشته باشند.

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

شما باید تگ <meta> زیر را در تمام صفحاتتان قرار دهید :

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

یک تگ <meta> برای viewport ،دستورالعمل هایی را برای چگونگی نمایش صفحه، ابعاد و بزرگ و کوچک شدن آن در اختیار مرورگر قرار میدهد.

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

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

به دو نمونه مثال زیر که یکی داری تگ متای Viewport بوده و دیگری فاقد آن است دقت کنید و نحوه ی نمایش آنها را در دستگاه موبایل مشاهده کنید :

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

 

بدون استفاده از تگ متای viewport :

بدون تگ متای viewport 

خودتان امتحان کنید

با استفاده از تگ متای viewport :

با تگ متای viewport

خودتان امتحان کنید

 

عنصر <script> در HTML 

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

کد جاوا اسکریپت زیر عبارت "Hello JavaScript!" در عنصری با شناسه ی "id="demo قرار میدهد :

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

عنصر <base> در HTML

عنصر <base> ، URL  و target  پایه را برای تمام آدرس های نسبی در صفحات مشخص میکند(دقت کنید در صورتی که از base استفاده نکنیم URL پایه همان نام دامنه ما خواهد بود که در اینجا : www.learnsource.net) : 

<base href="http://www.learnsource.net/images/" target="_blank">

در مثال بالامرورگر  تصویر html5.gif در آدرس https://www.w3schools.com/images/ جستجو خواهد کرد.


حذف تگ های <html> ، <head> و <body> از صفحه ی HTML

براساس استاندارد های HTML5 میتواتیم تگ های  <html> ، <head> و <body> را از صفحه حذف کنیم.

نمونه مثال زیر در HTML5  بدون مشکل اجرا میشود :

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
خودتان امتحان کنید

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

منتشر شده در ۱۴ خرداد ۱۳۹۶ حمید رضا ملکی ۱۴۱۰ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید