سرصفحه
عنصر <head> در HTML، یک ظرف برای همه عناصر سرصفحه (به انگلیسی: head) است: <title> ,<style> ,<meta> ,<link> ,<script> و <base>.
عنصر <head> در HTML
عنصر <head> یک ظرف (به انگلیسی: Container) برای فراداده است (داده‌هایی در مورد داده‌ها) و بین تگ <html> و تگ <body> قرار دارد.[۱]
فراداده HTML در مورد سند HTML است. فراداده نمایش داده نمی‌شود.
فراداده معمولاً عنوان سند، مجموعه کاراکتر، استایل‌ها، اسکریپت‌ها و سایر فرا اطلاعات را مشخص می‌کند.
عنصر <title> در HTML
عنصر <title> عنوان سند را مشخص می‌کند و در همهٔ سندهای HTML لازم است.
عنصر <title>:
- عنوان را در تب مرورگر تعریف می‌کند
- وقتی که صفحه به موردعلاقه‌ها اضافه شود، یک عنوان برای صفحه فراهم می‌کند
- در موتورهای جستجو برای صفحه یک عنوان نمایش می‌دهد
یک سند ساده HTML:
مثال
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <title>Page Title</title>
6 </head>
7
8 <body>
9 The content of the document......
10 </body>
11
12 </html>
عنصر <style> در HTML
عنصر <style> برای تعریف اطلاعات استایل برای یک صفحه HTML به کار می‌رود:
مثال
1 <style>
2 body {background-color: powderblue;}
3 h1 {color: red;}
4 p {color: blue;}
5 </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 ثانیه تازه‌سازی (به انگلیسی: Refresh) می‌کند:
<meta http-equiv="refresh" content="30">
مثال از تگ <meta>:
مثال
1 <meta charset="UTF-8">
2 <meta name="description" content="Free Web tutorials">
3 <meta name="keywords" content="HTML,CSS,XML,JavaScript">
4 <meta name="author" content="John Doe">
تنظیم Viewport
HTML5 یک متد برای دادن کنترل Viewport به طراحان وب از طریق تگ <meta> معرفی کرده‌است.
Viewport ناحیه قابل رویت کاربر از یک صفحه وب است. در دستگاه‌های مختلف متفاوت است و در موبایل‌ها کوچکتر از صفحه نمایش رایانه هاست.
باید عنصر <meta> برای Viewport را در همهٔ صفحات وب خود اضافه کنید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
عنصر <meta> در viewport دستوراتی در مورد نحوه کنترل ابعاد صفحه و مقیاس بندی‌ها به مرورگر می‌دهد.
قسمت width=device-width عرض صفحه را به گونه ای تنظیم می‌کند که متناسب با عرض صفحه نمایش دستگاه باشد (که بسته به نوع دستگاه متفاوت خواهد بود).
قسمت (به انگلیسی: initial-scale=1.0) سطح بزرگ‌نمایی اولیه را زمانی که صفحه در ابتدا در مرورگر بارگذاری می‌شود، تنظیم می‌کند.
در اینجا یک مثال از صفحه وب بدون تگ viewport meta، و همان صفحه وب با تگ viewport <meta> وجود دارد:
40px ساخت نمونه مثال این بخش در دست اقدام است.
عنصر <script> در HTML
عنصر <script> برای تعریف جاوااسکریپت سمت کاربر استفاده می‌شود.
این جاوا اسکریپت داخل یک عنصر HTML با id="demo" می‌نویسد "Hello JavaScript!":
مثال
1 <script>
2 function myFunction {
3 document.getElementById("demo").innerHTML = "Hello JavaScript!";
4 }
5 </script>
عنصر <base> در HTML
عنصر <base> آدرس‌وب پایه و target پایه برای همهٔ URLهای نسبی در این صفحه را مشخص می‌کند:
مثال
<base href="https://www.w3schools.com/images/" target="_blank">
عنصرهای head در HTML
| تگ | تعریف |
|---|---|
| <head> | اطلاعاتی در مورد سند مشخص می‌کند |
| <title> | عنوان سند را مشخص می‌کند |
| <base> | یک آدرس پیش فرض یا یک target پیش فرض برای همهٔ لینک‌های صفحه مشخص می‌کند |
| <link> | رابطهٔ بین یک سند و یک منبع خارجی را مشخص می‌کند |
| <meta> | فرادادهٔ مربوط به یک سند HTML را مشخص می‌کند |
| <script> | یک اسکریپت سمت کاربر تعریف می‌کند |
| <style> | اطلاعات استایل مربوط به یک سند را تعریف می‌کند |
منابع آموزشی