<head>
در یک سند HTML وظیفه ی نگه داری از metadata را دارد و بین <html>
و <body>
قرار می گیرد. metadata یعنی «داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم «metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:
- character set (مواردی مثل UTF-8)
- document title (عنوان سند)
- styles (استایل های CSS)
- محل قرار گیری تگ های link و script
- و دیگر اطلاعاتی که راجع به خودِ سند HTML باشد
بیایید تک تک این موارد را بررسی کنیم!
تگ <title>
<title>
عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.به عبارت دیگر 3 کار اصلی <title>
از این قرار است:
- موضوع صفحه ی HTML را در تب مرورگر کاربر نمایش می دهد
- اگر صفحه ای به favorites اضافه شود، عنوان آن همان محتوای
<title>
خواهد بود - تگ
<title>
همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید
به این مثال ساده نگاه کنید:
همانطور که می بینید این موضوع بسیار ساده بود.
تگ <style>
<style>
استایل های CSS را مشخص می کند.ما در دوره ی CSS توضیح دادیم که کدهای CSS به سه روش اصلی نوشته می شوند:
- به صورت inline (به صورت attribute)
- به صورت internal (در قسمت <head> از سند HTML)
- به صورت external (در یک فایل جداگانه)
در واقع تگ <style>
مورد دوم یا internal است. به مثال زیر توجه کنید:
استفاده از کدهای CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.
تگ <link>
<link>
برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.مثال:
همانطور که میبینید از یک فایل CSS خارجی و متعلق به سایت دیگری استفاده کرده ایم.
عنصر <meta>
<meta>
کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر …مرورگرها به طور عمده از <meta>
برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.
– برای تعیین character set از این کد استفاده می کنیم:
– برای تعیین description (توضیحات در مورد صفحه ی وب خود) از این قالب استفاده کنید:
به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:
این توضیح علاوه بر خلاصه و کوتاه بودن، جامع است و محتوای سایت را به خوبی توضیح میدهد. شما نیز باید به همین شکل توضیحاتی در رابطه با سایت خود ارائه کنید.
– برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:
– همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:
– شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:
بیایید این موارد را در یک مثال استفاده کنیم:
مبحث viewport
مشخص است که viewport در تلفن های همراه (مانند دستگاه های اندرویدی) کوچکتر است بنابراین باید مراقب این نوع کاربران نیز باشیم.
نکته: کد زیر باید برای تمام صفحات وب شما تعیین شده باشد:
این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.
قسمت width=device-width
می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و …) هماهنگ باشد. از طرفی قسمت initial-scale=1.0
می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.
بگذارید تفاوت استفاده از این دستور را در صفحات وب به شما نشان دهم!
ابتدا به کد زیر نگاه کنید:
در این کد از width=device-width
و … استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!
حالا به این کد نگاه کنید:
در این صفحه از دستور زیر استفاده کرده ایم:
اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است!
تگ <script>
<script>
برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:
در دوره ی جاوا اسکریپت ما می توانید بیشتر در رابطه با این مورد مطالعه کنید.
تگ <base>
<base>
در عمل URL یا آدرس اینترنتی پایه ی وب سایت شما را مشخص می کند تا تمام آدرس های اینترنتی دیگری که در صفحه ی ما موجود هستند با آن شروع شوند.به مثال زیر توجه کنید:
در کد بالا می بینیم که من به href مربوط به لینک، مقدار react-loops/ را داده ام! این مقدار به خودی خود اشتباه است اما از آنجا که base یا پایه ی URL خود را www.roxo.ir/plus تعریف کرده ام، این Base به مقدار href میچسبد و در نهایت لینک زیر را می سازد:
https://www.roxo.ir/react-loops/
هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html>
و <body>
و <head>
را حذف کنید. یعنی کد شما به این شکل باشد:
اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های <html>
و <body>
می تواند DOM یا نرم افزار XML را به طور کامل از کار بیندازد و در مرورگرهای قدیمی مانند IE9 نیز باعث خطاهای فراوان می شود. این مسئله که شما اجازه به پاک کردن برخی از تگ ها دارید، به شرایط و حالت خاصی مربوط است، نه اینکه چون می توانیم باید تمام این تگ ها را در شرایط عادی حذف کنیم.
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو