مشاوره رایگان
دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش تگ head در HTML به همراه تگ های داخلی تگ head


یاد گرفتیم که یک سند HTML معمولی دارای ساختار زیر است -

Document declaration tag

<html>

  

   <head>

      Document header related tags

   </head>



   <body>

      Document body related tags

   </body>

  

</html>

در این مقاله، قدری بیشتر به جزئیات بخش header در HTML می پردازیم. این بخش به وسیله ی برچسب< head> ساخته می شود. برچسب< head> حاوی برچسب های مهمی دیگری نیز می باشد که عبارتند از : <title>, <meta>, <link>, <base>, <style>, <script> و <noscript>.

تگtitle  در HTML

از تگ <title> برای مشخص کردن عنوان سند در HTML استفاده می شود. در زیر یک مثال در مورد نحوه ی عنوان دادن به یک سند در HTML آورده شده است -

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Title Tag Example</title>
   </head>

 
   <body>
      <p>Hello, World!</p>
   </body>

 
</html>

کد فوق نتیجه زیر را تولید می کند -

تگ meta در HTML

از برچسب <meta> برای ارائه اطلاعات بیشتر در مورد سند HTML که شامل اطلاعاتی مربوط به انقضای صفحه، نویسنده صفحه، لیست کلمات کلیدی، توضیحات صفحه و غیره است، استفاده می شود.

در مثال زیر چند مورد از کاربردهای مهم برچسب <meta> درون یک سند HTML بیان شده است -

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Meta Tag Example</title>

 
      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

 
      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

 
      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

 
      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

 
      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

 
      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

 
      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

 
   </head>

 
   <body>
      <p>Hello, World!</p>
   </body>
            
</html>

کد فوق نتیجه زیر را تولید می کند -

تگ base در HTML

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

به عنوان مثال، در ابتدای آدرس تمام صفحات و تصاویر ی که در سند HTML مان وجود دارند ، URL داده شده در آدرس پایه یعنی https://clicksite.org / قرار می گیرد.

<!DOCTYPE html>
<html>

 
   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.clicksite.org/" />
   </head>

 
   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

 
</html>

اما اگر شما URL اصلی را به چیز دیگری تغییر دهید، برای مثال، اگر آدرس پایه http://www.clicksite.org/home باشد، تصویر و سایر لینک های داده شده به صورت http://www.clicksite.org/home/logo.png و http://www.clicksite.org/home/html/index.htm  نمایش داده خواهند شد.

تگ link در HTML

از برچسب <link> برای مشخص کردن ارتباط بین سند فعلی و منابع خارجی استفاده می شود. در زیر مثالی است که یک فایل style sheet خارجی که در زیر شاخه css موجود است را به web root لینک می کند -

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
            
   <body>
      <p>Hello, World!</p>
   </body>
            
</html>

تگ style در HTML

از برچسب <style> برای مشخص کردن style sheet، برای سندِ HTML استفاده می شود. در زیر، مثالی را مشاهده می کنید که در آن چند قاعده style sheet در داخل تگ <style> تعریف شده است -

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
            
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>
 
</html>

کد فوق نتیجه زیر را تولید می کند -

تگ script در HTML

تگ script>> برای استفاده از فایل های اسکریپت خارجی یا برای تعریف یک اسکریپت داخلی در سند HTML استفاده می شود. در مثال زیر، در قسمتی از سند HTML مان ، برای استفاده از جاوا اسکریپت یک تابع جاوا اسکریپت تعریف نموده ایم.

<!DOCTYPE html>
<html>
 
   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>
 
   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>
 
</html>

 

فصلِ: 5 , تعداد قسمت ها: 177 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…

HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می‌…
فصلِ: 5 , تعداد قسمت ها: 77 , سطح: متوسط

این فصل در یک نگاه:

ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…

این مجموعه با تلفیقی از فریمورک bootstrap  و کد های html و css  ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ: 11 , تعداد قسمت ها: 162 , سطح: صفر تا صد

این فصل در یک نگاه:

در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…

در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap  و به صورت تضمینی  و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js  و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ: 1 , تعداد قسمت ها: 15 , سطح: متوسط

این فصل در یک نگاه:

رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…

 اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …

تولید شده توسط کلیک سایت

پشتیبانی آنلاین
آماده پاسخگویی هستیم
انتخاب تصویر جهت ارسال:
در حال ضبط صدا

(جهت توقف و یا لغو ضبط از دکمه های زیر استفاده کنید)

توقف و ارسال :
لغو ضبط
در حال حاضر تمامی کارشناسان آفلاین هستند. همواره می توانید با شماره تلگرام / واتساپ 09010005000 به صورت آنلاین با ما در ارتباط باشید. جهت ورود به واتساپ کلیک کنید
0 پیام جدید
پشتیبان در حال تایپ ...
ارسال تصویر ضبط صدا
0 کارشناسان آنلاین می باشند
این گفت و گو توسط پشتیبان به اتمام رسید