عنصر <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 :
عنصر <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 >
حذف تگ های فوق از صفحه ممکن است باعث برور خطا در نسخه های قدیمی تر اینترنت اکسپلورر شود پس پیشنهاد میشود تا آنجای ممکن از حذف آنها اجتناب کنید.
منبع:learnsource