HTML - عنصر Head
عنصر HTML <head> یک نگهدارنده برای عناصر زیر است : <title> ، <style> ، <meta> ، <link> ، <script> و <base> .
عنصر <head>
عنصر <head> یک نگهدارنده برای متا داده ها (اطلاعات مربوط به داده ها) است و بین تگ <html> و تگ <body> قرار گرفته است .
متا داده های HTML اطلاعات مربوط به سند HTML است . متا داده ها نمایش داده نمی شوند .
متا داده ها معمولا عنوان سند ، مجموعه کارکتری ، سبک ها ، اسکریپت ها ، و سایر اطلاعات متا را مشخص میکنند .
عنصر <title>
عنصر <title> عنوان سند را مشخص میکند . عنوان باید فقط متن باشد ، و در نوار عنوان مرورگر یا در تب صفحه نمایش داده میشود .
تگ <title> در اسناد HTML لازم است !
محتوای عنوان یک صفحه برای بهینه سازی موتور جستجو (SEO) بسیار مهم است ! عنوان صفحه توسط الگوریتم های موتور جستجو برای تعیین ترتیب هنگام لیست کردن صفحات در نتایج جستجو استفاده میشود .
عنصر <title> :
- یک عنوان در نوار ابزار مرورگر مشخص میکند
- یک عنوان برای صفحه هنگام افزوده شدن آن به علاقه مندی ها فراهم میکند
- یک عنوان برای صفحه در نتایج موتور جستجو نمایش میدهد
بنابراین ، تلاش کنید عنوان را تا حد امکان دقیق و معنی دار بسازید !
یک سند ساده HTML :
مثال
<html>
<head>
<title>یک عنوان صفحه معنی دار </title>
</head>
<body>
محتوای سند ......
</body>
</html>
عنصر <style>
عنصر <style> برای مشخص کردن اطلاعات سبک برای یک تک صفحه HTML استفاده میشود :
مثال
body {background-color : powerblue;}
h1 {color : red;}
p {color : blue;}
</style>
عنصر <link>
عنصر <link> رابطه بین سند کنونی و یک منبع خارجی مشخص میکند .
تگ <link> اغلب برای لینک شدن به شیوه نامه های (CSS) خارجی استفاده میشود :
عنصر <meta>
عنصر <meta> معمولا برای مشخص کردن مجموعه کارکتری ، توضیحات صفحه ، کلید واژه ها ، نویسنده سند ، و تنظیمات viewport استفاده میشود .
متا داده ها در صفحه نمایش داده نخواهند شد ، اما توسط مرورگرها (چطور محتوا را نمایش دهد یا صفحه را بارگیری کند) ، توسط موتورهای جستجو (کلیدواژه ها) ، و دیگر سرویس های وب استفاده میشوند .
مثال ها
مشخص کردن مجموعه کارکتری (character set) مورد استفاده :
مشخص کردن یک توضیح (description) در مورد صفحه وب :
مشخص کردن کلید واژه ها (keywords) برای موتورهای جستجو :
مشخص کردن نویسنده (author) یک صفحه :
تازه کردن (Refresh) سند در هر 30 ثانیه :
تنظیم viewport برای خوب به نظر آمدن در همه دستگاه ها :
مثالی از تگ های <meta> :
مثال
<meta name="description" content="آموزش رایگان HTML">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="ساسان لطفی">
تنظیم Viewport
viewport ناحیه قابل مشاهده کاربر در یک صفحه وب است . با دستگاه متفاوت است - در یک گوشی همراه از یک صفحه نمایش کامپیوتر کوچکتر خواهد بود .
شما باید عنصر <meta> زیر را در همه صفحات وب خود بگنجانید :
این دستور دستورالعمل هایی را در مورد نحوه کنترل ابعاد صفحه و مقیاس بندی به مرورگر میدهد .
بخش width=device-width پهنای صفحه را تنظیم میکند تا از پهنای صفحه نمایش دستگاه (که بسته به دستگاه متفاوت خواهد بود) پیروی کند .
بخش initial-scale=1.0 سطح بزرگنمایی اولیه را هنگامیکه اولین بار صفحه توسط مرورگر بارگذاری میشود تنظیم میکند .
اینجا یک مثال از یک صفحه وب بدون تگ متا viewport و همان صفحه با تگ متا viewport آمده است :
نکته: اگر شما این صفحه را با گوشی یا تبلت باز کنید ، میتوانید روی دو لینک زیر کلیک کنید و تفاوت را ببینید .
عنصر <script>
عنصر <script> برای مشخص کردن جاوا اسکریپت های سمت مشتری مورد استفاده قرار میگیرد .
جاوا اسکریپت زیر متن "سلام جاوا اسکریپت" را داخل یک عنصر HTML با id="demo" مینویسد :
مثال
function myFunction {
document.getElementById("demo").innerHTML = "سلام جاوا اسکریپت";
}
</script>
عنصر <base>
عنصر <base> آدرس URL پایه و/یا target برای همه URL های نسبی در یک صفحه را مشخص میکند .
تگ <base> باید یکی از دو صفت href یا target یا هر دو را داشته باشد .
فقط یک تک عنصر <base> در یک سند میتواند وجود داشته باشد!
مثال
یک URL پیشفرض و یک target پیشفرض برای همه لینک ها در یک صفحه مشخص کنید :
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
</body>
چکیده فصل
- عنصر <head> یک نگهدارنده برای متاداده ها (اطلاعات مربوط به داده ها) است
- عنصر <head> بین تگ <html> و تگ <body>قرار گرفته است .
- عنصر <title> لازم است و عنوان سند را مشخص میکند
- عنصر <style> برای مشخص کردن اطلاعات سبک برای یک تک سند استفاده میشود
- تگ <link> اغلب برای لینک شدن به شیوه نامه های خارجی استفاده میشود
- عنصر <meta> معمولا برای مشخص کردن مجموعه کارکتری ، توضیحات صفحه ، کلیدواژه ها ، نویسنده سند ، و تنظیمات viewport استفاده میشود
- عنصر <script> برای مشخص کردن جاوا اسکریپت های سمت مشتری استفاده میشود
- عنصر <base> آدرس URL پایه و/یا هدف برای همه URL های نسبی در یک صفحه را مشخص میکند
عناصر head در HTML
| تگ | توضیح |
|---|---|
| <head> | اطلاعات مربوط به سند را مشخص میکند |
| <title> | عنوان یک سند را مشخص میکند |
| <base> | یک آدرس پیشفرض یا یک هدف پیشفرض برای همه لینک های یک صفحه مشخص میکند |
| <link> | رابطه بین یک سند و یک منبع خارجی مشخص میکند |
| <meta> | متا داده های مربوط به یک سند را مشخص میکند |
| <script> | یک اسکریپت سمت مشتری مشخص میکند |
| <style> | اطلاعات سبک برای یک سند مشخص میکند |