این وب سایت با تمامی محتویات و دامین به فروش می رسد. لطفا جهت خریداری از طریق بخش ارتباط با ما در تماس باشید

جستجو ...


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

ثبت نام کنید

درسنامه یازدهم از سری مقالات آموزش HTML مقدماتی به معرفی و آموزش عنصر Head در HTML اختصاص دارد.


طراحی سایت اصولی، هزاران نکته و ترفند دارد که با یادگیری هر چه بیشتر این نکات می‌توانید به مرحله طراحی سایت حرفه ای‌ برسید. زبان نشانه گذاری HTML دارای بخش‌ها و عناصر مختلفی است که یادگیری دقیق آن برای هر طراح سایتی الزامی است، از همین رو آموزش HTML اولین گام در هر کلاس آموزش طراحی سایت است. طبق روال مقاله‌های گذشته، در این مقاله هم قصد داریم به معرفی عنصر Head در HTML بپردازیم.

عنصر Head در HTML

عنصر <head> در واقع محفظه‌ای برای متا دیتا (metadata) است و بین تگ <html> و تگ <body> قرار می‌گیرد. متا دیتا در HTML داده‌ای در مورد سند HTML است اما نمایش داده نمی‌شود. معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات متا را تعریف می‌کند. تگ‌های <title>، <style>، <meta>، <link>، <script> و <base> اجزایی هستند که متا دیتا را توصیف می‌کنند.

عنصر <title> در HTML

عنصر <title> عنوان سند را تعریف کرده و باید در تمام سند‌های HTML/XHTML وجود داشته باشد. این عنصر یک عنوان را در سربرگ مرورگر تعریف می‌کند؛ وقتی صفحه‌ای را به صفحات دلخواه اضافه می‌کنید، برای آن صفحه یک عنوان ایجاد می‌کند؛ برای صفحه‌ای که در نتایج جستجو آمده است یک عنوان نمایش می‌دهد.

یک سند ساده 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">

هر ۳۰ ثانیه یک بار صفحه را تازه‌سازی کنید:

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

نمونه‌ای از تگ‌های <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">

مشخص کردن Viewport در HTML

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

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

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

Head در HTML

عنصر <script> در HTML

عنصر <script> برای تعریف جاوا اسکریپت به کار رفته در سمت کار مورد استفاده قرار می‌گیرد. کد جاوا اسکریپت زیر عبارت “Hello World” را با در یک عنصر HTML با id=”demo” می‌نویسد:

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

عنصر <base> در  HTML

عنصر <base> آدرس اینترنتی (URL) اصلی و هدف اصلی را برای تمام url های نسبی در یک صفحه مشخص می‌کند:

<base href="https://www.lydaweb.com/images/" target="_blank">

حذف <html>، <head> و <body>؟

طبق استاندارد html5، تگ‌های <html>، <body> و <head> می‌توانند حذف شوند. کد زیر طبق استاندار html5 معتبر است:

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

ما در این دوره آموزش HTML حذف این تگ‌ها را توصیه نمی‌کنیم. چون حذف آن‌ها می‌تواند باعث تخریب DOM یا نرم‌افزار XML شده و ایجاد خطا در مرورگرهای قدیمی کند. البته مدتی است که حذف تگ <head> بین برنامه نویسان و طراحان رایج شده است.

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

منبع :

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های