آموزش رایگان HTML: قسمت پنجم: تگ head چیست؟ و چرا برای مرورگرها مهم است؟

۰۶ اردیبهشت ۱۳۹۹
زهرا فتوحی نیا
یک نظر

در قسمت‌های قبلی به طور مقدماتی با «ساختار یک صفحه وب» آشنا شدید. از این به بعد شما را با جزئیات دستورات «HTML» آشنا می‌کنیم. شما به راحتی می‌توانید این تگ‌ها را در Notepad یا ++Notepad امتحان کنید و خروجی آن‌ها را در مرورگر ببینید. یکی از تگ‌هایی که در این قسمت شما قرار است با آن آشنا شوید، تگ head می‌باشد.

تگ head اطلاعات اضافی درباره صفحات وب را دربرمی‌گیرد. این اطلاعات به عنوان خروجی در مرورگر نشان داده نمی‌شود. اطلاعات اضافی در تگ head شامل عنوان صفحه، استایل‌ها، اسکریپت‌ها و متاداده‌ها یا Metadata می‌باشد.

از آنجایی که این اطلاعات برای موتورهای جستجو خیلی مهم هستند، ما سعی می‌کنیم در این قسمت جزئیات بیش‌تری از این تگ را در اختیار شما قرار بدهیم و پشتیبانی مرورگرها از هر کدام از تگ‌ها رو مورد بررسی قرار دادیم.. با ما همراه باشید تا با مغز HTML آشنا شوید.

بیشتر بدانید: «HTML چیست؟»

تگ head در HTML چیست؟

اگر ساختار ساده‌ای از HTML که در «قسمت قبل» مثال زدیم را مورد بررسی قرار دهیم به صورت زیر است.

<html>
  <head>
    <title> Bamadoon.com</title>
  <head/>
  <body>
      <h1> Heading </h1>
       <p> paragraph </p>
  </body>
</html>

همان‌طور که از مثال بالا مشخص است، تگ head در تگ <html> قرار دارد. اطلاعاتی که در تگ head قرار می‌گیرند، در خروجی نمایش داده نمی‌شوند. شما اگر بخواهید اطلاعاتی را در خروجی یا مرورگر نمایش بدهید باید آن‌ها را در تگ <body> قرار بدهید. در این مثال عنوان صفحه وب را در تگ <title> قرار دادیم.

قرار دادن عنوان برای یک صفحه وب بسیار ضروری و مهم می‌باشد. در ادامه با تگ <title> و سایر تگ‌هایی که در تگ head قرار می‌گیرند، آشنا می‌شویم.

تگ `<title>`

یکی از موارد ضروری و مهم برای صفحات وب، قرار دادن عنوان برای آن‌هاست. این عنوان در تگ <title> در تگ head قرار می‌گیرد. عنوان صفحات وب در تب مرورگرها به صورت زیر نشان داده می‌شود.

تگ title برای موتورهای جستجو نیز خیلی مهم هستند. تگ عنوان ممکن است شما را با تگ‌های Heading<h> یا تیترها به اشتباه بیندازد. اما این دو با یکدیگر متفاوت هستند. تگ‌های Heading در واقع عنوانی را برای محتوا و متن‌های موجود در صفحه در تگ <body> مشخص می‌کنند در حالی که تگ title، برای صفحه وب در تب مرورگر عنوانی را مشخص می‌کند و در تگ head قرار دارد.

پشتیبانی مرورگرها از تگ head — پشتیبانی مرورگرها از تگ `<title>`

تگ `<base>`

اگر بخواهید یک لینک یا آدرس پایه برای کل آدرس‌های موجود در صفحه وب استفاده کنید، باید از تگ <base> در تگ head استفاده کنید. در واقع اگر در صفحه وب آدرس پایه داشته باشید، در هر جای صفحه وب که آدرسی را بخواهید بنویسید، آن آدرس را در ادامه آدرس پایه قرار می‌دهد. این تگ یک تگ تنهاست یعنی تگ پایانی ندارد.

بیشتر بدانید: «چطوری یک فایل HTML ایجاد کنیم؟»

به طور مثال زمانی که تمامی تصاویر یا فایل‌های استفاده شده در سایت در یک فولدر قرار دارند کافی است آدرس فولدر را به عنوان آدرس پایه در تگ <base> قرار دهید. در صفحات وب در هر جایی که خواستید آدرس یک تصویر یا فایل را تنظیم کنید، دیگر لازم نیست کل آدرس را بنویسید و کافی است که نام تصویر یا فایل را فقط ذکر کنید. مرورگر با توجه به آدرس پایه، آدرس تصویر را متوجه می‌شود. به مثال زیر توجه کنید.

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.bamadoon.com/" target="_blank" >
</head>
<body>
<p><img src="images/img1.png">Bamadoon.com</p>
<p><a href="tags/tag_base.asp">HTML base tag</a>Bamadoon.com</p>
</body>
</html>

اگر از آدرس پایه استفاده نکنید مرورگر به طور پیش‌فرض آدرس حاوی فایل HTML را به عنوان آدرس پایه در نظر می‌گیرد. همچنین اگر در جایی از صفحه بنا به هر دلیلی نخواستید از آدرس پایه استفاده کنید، می‌توانید آدرس مورد نظر خود را به طور کامل بنویسید.

پشتیبانی مرورگرها از تگ base — پشتیبانی مرورگرها از تگ `<base>`

تگ `<style>` در تگ head

همان‌طور که در قبلا نیز به آن اشاره کردیم، بعد از ایجاد صفحات وب برای رنگ و لعاب دادن به آن‌ها یا به عبارتی اختصاصی کردن صفحات وب باید از دستورات CSS استفاده کنیم. این دستورات در تگ <style> در تگ head قرار می‌گیرند. می‌توان تنظیمات مربوط به CSS را در این تگ قرار داد. با دستورات CSS در دوره‌های بعدی به طور مفصل آشنا خواهید شد.

در صفحات وب از دستورات CSS به دو صورت می‌توان استفاده کرد: حالت اول: درون همان کد HTML در قسمت <head> با استفاده از تگ <style> می‌توان دستورات را اضافه نمود. حالت دوم: فایل جداگانه در Notepad با پسوند css. ایجاد نموده و دستورات را در آن ذخیره نمایید. سپس در کد HTML با دستور <link> که در ادامه توضیح می‌دهیم، دستورات CSS را اضافه نماییم.

پشتیبانی مرورگرها از تگ style — پشتیبانی مرورگرها از تگ `<style>`

تگ `<link>`

هنگامی که دستورات HTML را می‌نویسید، برای ارتباط برقرار کردن بین یک فایل جداگانه و صفحه دیگر، از تگ <link> استفاده می‌کنیم. همان‌طور که اشاره کردیم به طور مثال برای لود کردن یک فایل CSS جداگانه در صفحات وب از این تگ به صورت زیر استفاده می‌کنیم.

<"link rel="stylesheet" type="text/css" href="layout.css>

بیشتر بدانید: «Attribute در HTML به چه معناست؟»

همان‌طور که در «قسمت قبل» به طور مختصر توضیح دادیم، attributeها در واقع ویژگی‌های خاصی از یگ تگ را نشان می‌دهند. در جدول زیر تمامی attributeهایی که برای تگ <link> وجود دارد، نشان داده شده است.

پشتیبانی مرورگرها از تگ <link> در تگ head به صورت زیر می‌باشد.

تگ `<meta>`

تگ‌ <meta> در تگ head اطلاعات اضافی درباره صفحات وب را فراهم می‌کنند. در واقع این اطلاعات برای کاربر قابل مشاهده نیست و برای مرورگرها، موتورهای جستجوگر و دیگر سرویس‌های وب به‌کار می‌روند. اطلاعاتی که در تگ‌ <meta> مورد استفاده قرار می‌گیرند شامل مجموعه‌ای از کاراکترهای موجود، توضیحات درباره صفحه وب، کلمات کلیدی، نام نویسندگان و دیگر اطلاعات اضافی می‌باشد.

تگ‌ <meta> با attributeهای خاصی که دارد می‌تواند اطلاعاتی را درباره صفحه وب برای مرورگرها و موتورهای جستجو فراهم سازد. در مثال زیر نمونه‌ای از این تگ به همراه attributeهای آن آورده شده است.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTML Learning by bamadoon.com">
  < meta name="keywords" content="HTML, tag, head">
  <meta name="author" content="Zahra Fotoohiniya">
  <meta http-equiv="refresh" content="40">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

در مثال بالا یک attribute با نام charset جهت کدگذاری به صورت کاراکتری استفاده می‌شود که این کدگذاری نوع زبان استفاده شده برای صفحات وب را نشان می‌دهد. برای نمایش متن‌ها و محتواهای سایت به زبان فارسی باید حتما مقدار این attribute را برابر UTF-8 قرار دهید.

attributeای که نام description دارد، برای توضیحی مختصر درباره صفحات وب برای موتورهای جستجو داده می‌شود، استفاده می‌شود. متای keyword جهت مشخص کردن کلمات کلیدی استفاده شده در صفحات وب به‌کار می‌رود. این کلمات کلیدی در موتورهای جستجوگر مورد استفاده قرار می‌گیرند.

متایی که دارای attributeای با نام author است، برای مشخص کردن نام نویسندگانی که محتوای صفحه وب فعلی را نوشته‌اند، بکار می‌رود. متای http-equiv برای به‌روزرسانی صفحه وب هر ۴۰ ثانیه یکبار استفاه می‌شود.در HTML5 از طریق متای viewport امکانی فراهم شده است که طراحان وب می‌توانند نحوه نمایش وب در دستگاه‌های مختلف را کنترل کنند.

کنترل اندازه یک صفحه وب در تگ head

این متا ناحیه قابل مشاهده کاربران وب را نشان می‌دهد. با استفاده از آن می‌توان به مرورگرها دستورالعمل‌هایی درباره نحوه کنترل ابعاد و مقیاس صفحات ارائه کرد. برای طراحی وب جهت سئوی بهتر حتما باید این گزینه را استفاده کرد.بخش width=device-width برای یکسان کردن عرض دستگاه و عرض نمایش بکار می‌رود.

چون اگر این بخش استفاده نشود، مرورگر به طور پیش‌فرض عرض ۹۸۰ پیکسل را در نظر می‌گیرند. وقتی که صفحه وب با دستگاهی مختلف مانند گوشی موبایل باز شود، مرورگر عرض نمایش را در موبایل نیز ۹۸۰ پیکسل در نظر می‌گیرد. ما برای دیدن محتوای سایت باید در صفحه گوشی Zoom Out کنیم تا همه محتوا نمایش داده شود.

بیشتر بدانید: «ساختار HTML چگونه است؟»

برای جلوگیری از این اتفاق قسمت width=device-width استفاده می‌شود. با یکسان کردن عرض وب‌سایت با عرض دستگاهی که آن را نشان می‌دهد باعث می‌شود تا بتوان بدون احتیاج به زوم کردن محتوای سایت را به درستی نمایش داد.

بخش initial-scale=1.0 در متای viewport برای تعیین میزان زوم اولیه به‌کار می‌رود. مقدار آن بین ۰ تا ۱۰ می‌باشد. مقدار ۱ نشان‌دهنده این است که صفحه وب به صورت استاندارد بدون نیاز به زوم نمایش داده شود.

پشتیبانی مرورگرها از تگ meta — پشتیبانی مرورگرها از تگ `<meta>`

تگ `<script>`

تگ <script> در تگ head برای ایجاد یا لود کردن دستورات زبان JavaScript به‌کار می‌رود. در واقع یعنی تگ <script> یا حاوی دستورات JavaScript است یا به یک فایل خارجی که شامل دستورات JavaScript است، اشاره می‌کند. دستورات JavaScript برای ایجاد تغییرات پویا و بهبود صفحات وب استفاده می‌شود.

تگ <script> می‌تواند به طور مکرر در قسمت <body> یا <head> مورد استفاده قرار بگیرد. در مثال زیر از تگ<script> در بخش <body> برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>script tag</title> 
    </head> 
    <body> 
        <h1 id="bamadoon">Bamadoon</h1> 
        <script> 
             document.getElementById("bamadoon").innerHTML = "Hello Bamadoon.com!";
        </script>  
    </body> 
</html>

در مثال زیر از تگ <script> در بخش <head> برای ایجاد دستورات JavaScript درون صفحه وب استفاده شده است.

<!DOCTYPE html> 
<html> 
    <head> 
        <title>script tag</title> 
        <script> 
            ";document.getElementById("bamadoon").innerHTML = "Hello Bamadoon.com! 
        </script> 
    </head> 
    <body> 
        <h1 id="bamadoon">Bamadoon</h1>  
    </body> 
</html>

در مثال زیر از تگ <script> برای وارد نمودن یا لود یک فایل حاوی دستورات JavaScript در صفحه وب استفاده شده است.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/js/ExternalFileJavaScript.js"></script>
<title>script tag</title>
</head>
<body>
<h1>Hello Bamadoon</h1>
</body>
</html>

تگ <script> شامل attributeهای زیادی می‌باشد که در زیر چند نمونه از مهم‌ترین آن‌ها را بیان می‌کنیم.

پشتیبانی مرورگرها از تگ <script> در تگ head به صورت زیر می‌باشد.

تگ `<noscript>` در تگ head

هنگامی که به هر نحوی تگ <script> توسط کاربر غیرفعال شده یا مرورگری که صفحه وب با آن نمایش داده شود، از اسکریپت‌ها پشتیبانی نکند، می‌توان توسط تگ <noscript> در تگ head پیغامی به کاربر نشان داده شود که این دستورات توسط مرورگر پشتیبانی نمی‌شود. در مثال زیر نحوه استفاده از این تگ نشان داده شده است.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML noscript Tag</title>
   </head>
   <body>
      <script type = "text/JavaScript">
       ...JavaScript statement
      </script>
      <noscript>
         !browser does not support JavaScript
      </noscript>
   </body>
</html>

تگ <noscript> در هر دو بخش <body>و <head> می‌تواند نوشته شود. محتوای درون تگ <noscript> در صورتی که اسکریپت‌ها توسط مرروگر پشتیبانی نشوند، نشان داده می‌شود.

پشتیبانی مرورگرها از تگ noscript — پشتیبانی مرورگرها از تگ `<noscript>`

سخن پایانی

در این قسمت از آموزش رایگان HTML بامادون سعی کردیم تا شما را با تگ <head> در زبان HTML آشنا کنیم. به طور کلی اگر بخواهید اطلاعات اضافی درباره صفحه وب برای مرورگرها و موتورهای جستجوگر ارائه بدهید باید از تگ <head> استفاده کنید. در تگ <head> نیز از تعدادی تگ دیگر استفاده می‌شود که هر کدام برای کاربرد خاصی استفاده می‌شوند.

تگ <title> برای تعیین عنوان برای یک صفحه وب در تب مرورگر، تگ <base> برای تعیین آدرس پایه برای صفحه وب، تگ <link> برای لینک کردن یک فایل خارجی به صفحه وب فعلی، تگ <style> برای استفاده از دستورات css در صفحه HTML، تگ <meta> برای تنظیم اطلاعاتی مانند توضیحات اضافی درباره سایت-کلمات کلیدی- نام نویسنده محتوای صفحه وب فعلی و دیگر اطلاعات اضافی، تگ <script> برای واردکردن یا تولید دستورات JavaScript و تگ <noscript> جهت نمایش پیغام عدم پشتیبانی مرورگرها از اسکریپت‌ها استفاده می‌شوند.

منبع: بامادون

نشر و کپی مطالب با ذکر منبع و نام نویسنده بلامانع می‌باشد.