html head

html head  چیست ؟

آموزش  html  درس بیست و سوم

عنصر <head>

HTML Head مکانی برای اطلاعات متا می باشد. و بین تگ <html>  و <body> قرار می گیرد. metadata   شامل اطلاعاتی در مورد سند  html  است و نمایش داده نمی شود.

Metadata  معمولا عنوان سند، مجموعه کاراکترها،ظاهر  یا استایل، لینک ها، اسکریپت ها و دیگر اطلاعات متا  را تعریف می کند.

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

<title>، <style>، <meta>، <link>، <script>، و <base>.

عنصر<title>   در  html

عنصر <title> عنوان سند را تعریف می کند و در تمام اسناد HTML / XHTML مورد نیاز است.

عنصر <title>

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

یک سند HTML ساده:

 <!DOCTYPE html>
<html>

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

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

</html> 

عنصر<style> در  HTML Head

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

مثال:

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

عنصر <link> در  HTML Head

عنصر <link> برای لینک دادن  به style sheets خارجی مورد استفاده قرار می گیرد:
مثال:
 <link rel="stylesheet" href="mystyle.css"> 

عنصر <meta> در  HTML Head

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

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

 

حتما بخوانید:  چیدمان HTML

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


<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">

مثال برای تگ های متا:

 تنظیم Viewport

 

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

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

شما باید عنصر Viewport را در تمام صفحات وب خود در تگ متا وارد کنید:

 

*۱۰

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

بخش width = device-width عرض صفحه را تعیین می کند تا  عرض صفحه نمایش دستگاه (که بسته به دستگاه متفاوت باشد) را دنبال کند.

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

 

حتما بخوانید:  لیست html

عنصر <script> در  html

 

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

این جاوا اسکریپت می نویسد “سلام جاوا اسکریپت! به یک عنصر HTML با id = “demo”:

مثال:

*۱۱

عنصر <base> در  html

عنصر <base>  پایه نشانی اینترنتی  و پایه مقصد  را برای تمام URL های مرتبط در یک صفحه مشخص می کند:
مثال:
*۱۲

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

 

بر طبق  HTML5 استاندارد ؛  برچسب های <html>،  <body> و <head> را می توان حذف کرد.

کد زیر به عنوان HTML5 معتبر خواهد شد:

مثال:
*۱۳

نکته : هر چند ما توصیه نمی کنیم که تگ  <html>  و <body>  را حذف کنید. حذف این برچسب ها می تواند نرم افزار DOM یا XML را نابود کند و در مرورگرهای قدیمی (IE9) خطاهایی تولید کند.

با این حال، حذف برچسب <head> در مدت زمان زیادی  در حال حاضر معمول است.

امتیاز کاربران به این مطلب
۱ نفر - میانگین: ۵
تلگرام

دیدگاه‌تان را ثبت کنید:

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهار × 4 =

PHN0eWxlPi5oX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWV7cG9zaXRpb246cmVsYXRpdmU7fSAuaF9pZnJhbWUtYXBhcmF0X2VtYmVkX2ZyYW1lIC5yYXRpbyB7ZGlzcGxheTpibG9jazt3aWR0aDoxMDAlO2hlaWdodDphdXRvO30gLmhfaWZyYW1lLWFwYXJhdF9lbWJlZF9mcmFtZSBpZnJhbWUge3Bvc2l0aW9uOmFic29sdXRlO3RvcDowO2xlZnQ6MDt3aWR0aDoxMDAlOyBoZWlnaHQ6MTAwJTt9PC9zdHlsZT48ZGl2IGNsYXNzPSJoX2lmcmFtZS1hcGFyYXRfZW1iZWRfZnJhbWUiPiA8c3BhbiBzdHlsZT0iZGlzcGxheTogYmxvY2s7cGFkZGluZy10b3A6IDU3JSI+PC9zcGFuPjxpZnJhbWUgc3JjPSJodHRwczovL3d3dy5hcGFyYXQuY29tL3ZpZGVvL3ZpZGVvL2VtYmVkL3ZpZGVvaGFzaC85dHk0VS92dC9mcmFtZSIgYWxsb3dGdWxsU2NyZWVuPSJ0cnVlIiB3ZWJraXRhbGxvd2Z1bGxzY3JlZW49InRydWUiIG1vemFsbG93ZnVsbHNjcmVlbj0idHJ1ZSIgPjwvaWZyYW1lPjwvZGl2Pg==
با سپاس از ثبت دیدگاه شما دوست عزیز
از تماشای این ویدیو لذت ببرید ...
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود فایل سخنرانی استیو جابز ...
ایبوک هدف‌گذاری موثر
زودتر از آنچه فکرش را می‌کنید به خواسته‌هایتان دست پیدا کنید!
* لینک دانلود بلافاصله ایمیل می‌شود.
چهار عامل شگفت انگیز کسب درآمد چیست؟
فقط چند ثانیه تا دانلود فاصله دارید!
* سه ایده کسب و کار خانگی پولساز
فقط چند ثانیه تا دانلود فاصله دارید!
* ایبوک: ده مکان عالی برای پیدا کردن یک ایده جدید
فقط چند ثانیه تا دانلود فاصله دارید!
* دانلود ویدیوی جذاب و با کیفیت مصاحبه جک ما
از همین امروز شروع کنید
بدون تجربه و دانش فنی وارد دنیای درآمدهای اینترنتی شوید!
فایل‌های آموزشی برای شما ایمیل می‌شود.
فقط چند ثانیه تا دریافت این فایل آموزشی فاصله دارید!
فایل‌های آموزشی ویژه اعضای سایت
* اگر عضو نیستید با وارد کردن ایمیل‌تان به این فایل دسترسی پیدا می‌کنید
دسترسی مخصوص اعضای سایت
عضو سایت نیستید؟
فقط کافیه نام و ایمیل‌تان را وارد کنید و ...
* دسترسی سریع به تمام فایل‌های آموزشی
هدیه ما به شما
با سپاس از اینکه دیدگاه تان را در سایت ما ثبت کردید.


یک کوپن تخفیف 30%
  • مشاوره حضوری
  • دوره های آنلاین
  • بسته های آموزشی
  • محصولات دانلودی
  • وبینارهای آموزشی
  این کد فقط یکبار به شما نمایش داده می‌شود.
کد: qwert
ورود کاربران
* دسترسی رایگان به بخش آکادمی