عنصر head
چهارشنبه, ۳۱ خرداد ۱۳۹۶، ۱۲:۵۳ ق.ظ
همانطور که قبلا هم اشاره شد تگ <head> نگهدارنده فراداده (داده در مورد داده - metadata) است که بین تگ های <html> و <body> قرار می گیرد. فراداده ها اطلاعات تکمیلی در مورد فایل اچ تی ام ال هستند و در صفحه مرورگر کاربر نمایش داده نمی شوند. در فراداده مواردی مانند عنوان سند (title)، کاراکتر ست(character set)، شیوه نامه ها(styles)، لینک ها(links)، کدهای جاوااسکریپت(scripts) و سایر اطلاعات را قرار می دهیم.
عنصر <title>
عنصر <title>همانطور که از نامش پیداست عنوان صفحه را مشخص می کند. و در اسناد HTML/XHTML یک عنصر ضروری است. با استفاده از عنصر <title>یک عنوان برای صفحه در تب مربوط به مرورگر وب ایجاد می کنیم. همچنین هنگامی که کاربر این صفحه را در لیست صفحات مورد علاقه خود ذخیره می کند، صفحه با این عنوانی که ما مشخص کرده ایم ذخیره می شود. همین عنوان، در صفحات موتور جستجو برای عنوان صفحه نمایش داده می شود.
تگ <style> نیز در داخل تگ <head> قرار می گیرد و کدهای مربوط به css در داخل این تگ نوشته می شود.
با استفاده از تگ <link> یک فایل خارجی css را فراخوانی می کنیم:
همانطور که از نام این عنصر مشخص است، از این عنصر برای مشخص کردن کاراکتر ست (Character set)، توضیحات مربوط به صفحه (Description)، کلید واژه ها (Keywords)، مولف (ایجاد کننده صفحه - Author)، و سایر فراداده ها (Metadata) استفاده می کنیم. فراداده ها توسط مرورگرها، موتورهای جستجو و سایر سرویس های وب استفاده می شوند.
در مثال زیر کاراکتر ست مربوط به صفحه را مشخص می کنیم:
در نسخه 5 اچ تی ام ال یک امکان در اختیار طراحان وب قرار داده شده که می توانند بر روی محدوده دید کنترل داشته باشند. و این کار را با استفاده از تگ <meta> انجام می دهند. منظور از محدوده دید، منطقه قابل دیده توسط کاربر است. این محدوده به نوع وسیله ای بستگی دارد که کاربر صفحه وب را با آن مشاهده می کند؛ این محدوده در یک موبایل نسبت به یک کامپیوتر رومیزی کوچک تر است. شما می توانید قطعه کد زیر را در تمام صفحه های وبی که طراحی می کنید در تگ <meta> قرار دهید:
مقدار width=device-width مشخص می کند که عرض صفحه به اندازه عرض صفحه نمایش تعریف شود (این مقدار بر اساس نوع ابزاری که کاربر صفحه را مشاهده می کند متفاوت است).
مقدار initial-scale=1.0 سطح زوم شدن محتوای صفحه را، برای اولین باری که صفحه بارگذاری می شود مشخص می کند. که در این حالت ما این مقدار را 1.0 در نظر گرفته ایم، یعنی محتوای صفحه با اندازه طبیعی (بدون زوم) نمایش داده شود.
عنصر <script>
با استفاده از عنصر <script>کدهای جاوا اسکریپت سمت کاربر (client-side) را تعریف می کنیم.
در زیر یک مثال جاوااسکریپت را مشاهده می کنید که متن داخلی یک عنصر با آی دی id="sample" با مقدار "Hello JavaScript!" تنظیم می شود.
با استفاده از عنصر <base> URL پایه برای تمام URLهای موجود در صفحه که به صورت نسبی تعریف شده اند را مشخص می کنیم:
بر اساس استانداردهای نسخه 5 اچ تی ام ال، می توانیم تگ های <html>, <body> و <head> را در داخل فایل اچ تی ام ال نیاوریم. قطعه کد زیر از نظر استانداردهای اچ تی ام ال 5 معتبر است:
عنصر <title>
عنصر <title>همانطور که از نامش پیداست عنوان صفحه را مشخص می کند. و در اسناد HTML/XHTML یک عنصر ضروری است. با استفاده از عنصر <title>یک عنوان برای صفحه در تب مربوط به مرورگر وب ایجاد می کنیم. همچنین هنگامی که کاربر این صفحه را در لیست صفحات مورد علاقه خود ذخیره می کند، صفحه با این عنوانی که ما مشخص کرده ایم ذخیره می شود. همین عنوان، در صفحات موتور جستجو برای عنوان صفحه نمایش داده می شود.
<!DOCTYPE html> <html> <head> <title>عنوان صفحه</title> </head> <body> محتوا در این قسمت نوشته می شود... </body> </html>عنصر <style>
تگ <style> نیز در داخل تگ <head> قرار می گیرد و کدهای مربوط به css در داخل این تگ نوشته می شود.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>یک صفحه نمونه</title>
<style type="text/css">
body {
font-family: "B Yekan";
font-size: 12px;
}
.msg {
font-family: "B Yekan";
font-size: 12px;
color: #F00;
text-align: center;
}
</style>
</head>
عنصر <link>با استفاده از تگ <link> یک فایل خارجی css را فراخوانی می کنیم:
<link rel="stylesheet" href="sample_style.css">عنصر <meta>
همانطور که از نام این عنصر مشخص است، از این عنصر برای مشخص کردن کاراکتر ست (Character set)، توضیحات مربوط به صفحه (Description)، کلید واژه ها (Keywords)، مولف (ایجاد کننده صفحه - Author)، و سایر فراداده ها (Metadata) استفاده می کنیم. فراداده ها توسط مرورگرها، موتورهای جستجو و سایر سرویس های وب استفاده می شوند.
در مثال زیر کاراکتر ست مربوط به صفحه را مشخص می کنیم:
<meta charset="UTF-8">در مثال زیر یک توضیح در مورد صفحه در تگ <meta> می نویسیم:
<meta name="description" content="آموزش طراحی وب">در مثال زیر کلیدواژه ها را مشخص می کنیم که موتورهای جستجو از آنها استفاده می کنند:
<meta name="keywords" content="HTML, CSS, XML, JavaScript, Joomla">مشخص کردن محدوده دید (viewport)
در نسخه 5 اچ تی ام ال یک امکان در اختیار طراحان وب قرار داده شده که می توانند بر روی محدوده دید کنترل داشته باشند. و این کار را با استفاده از تگ <meta> انجام می دهند. منظور از محدوده دید، منطقه قابل دیده توسط کاربر است. این محدوده به نوع وسیله ای بستگی دارد که کاربر صفحه وب را با آن مشاهده می کند؛ این محدوده در یک موبایل نسبت به یک کامپیوتر رومیزی کوچک تر است. شما می توانید قطعه کد زیر را در تمام صفحه های وبی که طراحی می کنید در تگ <meta> قرار دهید:
<meta name="viewport" content="width=device-width, initial-scale=1.0">خصیصه viewport در تگ <meta> به مرورگر می گوید که با ابعاد و مقیاس های مربوط به هر صفحه چگونه رفتار کند و آنها را چگونه کنترل نماید.
مقدار width=device-width مشخص می کند که عرض صفحه به اندازه عرض صفحه نمایش تعریف شود (این مقدار بر اساس نوع ابزاری که کاربر صفحه را مشاهده می کند متفاوت است).
مقدار initial-scale=1.0 سطح زوم شدن محتوای صفحه را، برای اولین باری که صفحه بارگذاری می شود مشخص می کند. که در این حالت ما این مقدار را 1.0 در نظر گرفته ایم، یعنی محتوای صفحه با اندازه طبیعی (بدون زوم) نمایش داده شود.
عنصر <script>
با استفاده از عنصر <script>کدهای جاوا اسکریپت سمت کاربر (client-side) را تعریف می کنیم.
در زیر یک مثال جاوااسکریپت را مشاهده می کنید که متن داخلی یک عنصر با آی دی id="sample" با مقدار "Hello JavaScript!" تنظیم می شود.
<script>
function myFunction {
document.getElementById("sample").innerHTML = "Hello JavaScript!";
}
</script>
عنصر <base>با استفاده از عنصر <base> URL پایه برای تمام URLهای موجود در صفحه که به صورت نسبی تعریف شده اند را مشخص می کنیم:
<base href="http://www.samplesite.com/images/" target="_blank">نکته:
بر اساس استانداردهای نسخه 5 اچ تی ام ال، می توانیم تگ های <html>, <body> و <head> را در داخل فایل اچ تی ام ال نیاوریم. قطعه کد زیر از نظر استانداردهای اچ تی ام ال 5 معتبر است:
<!DOCTYPE html> <title>عنوان صفحه</title> <h1>یک سرتیتر (عنوان)</h1> <p>یک پاراگراف.</p>البته مثل قبل، پیشنهاد می کنیم این کار را انجام ندهید! ننوشتن این تگ ها باعث می شود ساختار DOM در صفحه بهم بخورد و نرم افزارهای XML هم نمی توانند ساختار صفحه را به درستی تشخیص دهند. همچنین این صفحه در مرورگرهای قدیمی دچار مشکل خواهد شد. این شیوه با استانداردهای xhtml نیز همخوانی ندارد.
