آموزش متا تگ ها در HTML

4 سال پیش

امتیاز دهید post

آموزش متا تگ ها در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش متا تگ ها در HTML خواهیم پرداخت.

HTML به شما امکان می دهد متاداده یا فراداده را تعیین کنید. اطلاعات مهم دیگر در مورد یک سند از طرق مختلف. از عناصر META می توان شامل جفت نام / مقدار (name/value) بود که خصوصیات سند HTML را توصیف می کند، مانند نویسنده، تاریخ انقضا، لیستی از کلمات کلیدی، نویسنده سند و غیره.

از تگ <meta> برای ارائه چنین اطلاعات اضافی استفاده می شود. این تگ یک عنصر خالی است و بنابراین نگ بسته ندارد اما اطلاعات را در ویژگی های خود حمل می کند.

شما می توانید یک یا چند متا تگ در HTML را بر اساس اطلاعاتی که می خواهید در سند خود نگه دارید، در سند خود قرار دهید اما به طور کلی، متا تگ ها بر ظاهر فیزیکی سند تأثیر نمی گذارد بنابراین از نظر ظاهری، مهم نیست که درج کنید آنها یا نه

افزودن متا تگ های در HTML به اسناد

با قرار دادن تگ <meta> در داخل سرآیند سند که با تگ <head> و </head> نشان داده می شود ، می توانید متادیتا را به صفحات وب خود اضافه کنید. یک متا تگ علاوه بر ویژگی های اصلی می تواند ویژگی های زیر را نیز داشته باشد –

Name

می تواند هر چیزی باشد. مثالها عبارتند از ، کلمات کلید ، توضیحات، نویسنده، تولید کننده و غیره

content

مقدار ویژگی را مشخص می کند.

scheme

طرحی را برای تفسیر مقدار ویژگی مشخص می کند (همانطور که در ویژگی محتوا اعلام شده است).

http-equiv

برای سرصفحه های پیام پاسخ http استفاده می شود. به عنوان مثال، می توان از http-Equiv برای تازه کردن صفحه یا تنظیم کوکی استفاده کرد. مقادیر شامل نوع محتوا، منقضی شده، تازه سازی و تنظیم کوکی هستند.

مشخص کردن کلمات کلیدی

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

مثال

در زیر مثالی آورده شده است ، جایی که ما HTML ، Meta Tags ، Metadata را به عنوان کلمات کلیدی مهم در مورد سند اضافه می کنیم.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
   &lt;/head&gt;
   
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

خروجی

Hello HTML5!

1	Hello HTML5!

شرح سند

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

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

بازبینی تاریخ سند

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

مثال

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "revised" content = "Tutorialspoint, 3/7/2014" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

تازه سازی سند

با استفاده از تگ <meta> می توانید مدت زمانی را تعیین کنید که بعد از آن وب سایت شما به طور خودکار تازه شود.

مثال

اگر می خواهید بعد از هر 5 ثانیه صفحه شما تازه شود، از نحو زیر استفاده کنید.

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "revised" content = "Tutorialspoint, 3/7/2014" /&gt;
      &lt;meta http-equiv = "refresh" content = "5" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

تغییر مسیر صفحه

برای هدایت صفحه خود به هر صفحه وب دیگر می توانید از تگ <meta> استفاده کنید. اگر می خواهید بعد از یک ثانیه مشخص صفحه را تغییر مسیر دهید، می توانید مدت زمانی را نیز تعیین کنید.

مثال

در زیر مثالی از هدایت صفحه فعلی به صفحه دیگر بعد از 5 ثانیه آمده است. اگر می خواهید بلافاصله صفحه را ریدایرکت کنید، ویژگی محتوایی را مشخص نکنید.

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "revised" content = "Tutorialspoint, 3/7/2014" /&gt;
      &lt;meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

تنظیم کوکی ها

کوکی ها داده هایی هستند که در فایل های متنی کوچک بر روی رایانه شما ذخیره می شوند و بین مرورگر وب و سرور وب رد و بدل می شوند تا اطلاعات مختلف را بر اساس نیاز برنامه وب خود ردیابی کنند.

برای ذخیره کوکی ها در سمت سرویس گیرنده می توانید از تگ <meta> استفاده کنید و بعداً این وب سایت می تواند از این اطلاعات برای ردیابی بازدید کننده سایت استفاده کند.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" /&gt;
         
   &lt;/head&gt;
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

اگر تاریخ و زمان انقضا را وارد نکنید، کوکی یک session cookie محسوب می شود و با خارج شدن کاربر از مرورگر، حذف می شود.

تنظیم نام نویسنده

با استفاده از متا تگ می توانید نام نویسنده را در یک صفحه وب تنظیم کنید.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "author" content = "Mahnaz Mohtashim" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

تعیین تنظیم کاراکتر

برای تعیین مجموعه کاراکترهای استفاده شده در صفحه وب می توانید از تگ <meta> استفاده کنید.

مثال

به طور پیش فرض، سرورهای وب و مرورگرهای وب از کدگذاری (ISO-8859-1 (Latin1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی برای تنظیم رمزگذاری UTF-8 آورده شده است

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "author" content = "Mahnaz Mohtashim" /&gt;
      &lt;meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

برای ارائه صفحه ثابت با کاراکتر های سنتی چینی، صفحه وب باید حاوی تگ <meta> باشد تا رمزگذاری Big5 تنظیم شود

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;Meta Tags Example&lt;/title&gt;
      &lt;meta name = "keywords" content = "HTML, Meta Tags, Metadata" /&gt;
      &lt;meta name = "description" content = "Learning about Meta Tags." /&gt;
      &lt;meta name = "author" content = "Mahnaz Mohtashim" /&gt;
      &lt;meta http-equiv = "Content-Type" content = "text/html; charset = Big5" /&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;p&gt;Hello HTML5!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>Meta Tags Example</title>

</head>

<body>

Hello HTML5!

</body>

</html>

منبع.

لیست جلسات قبل آموزش برنامه نویسی HTML

امتیاز دهید post

نویسنده مطلب saber

آموزش متا تگ ها در HTML

آموزش متا تگ ها در HTML

افزودن متا تگ های در HTML به اسناد

مشخص کردن کلمات کلیدی

مثال

شرح سند

مثال

بازبینی تاریخ سند

مثال

تازه سازی سند

مثال

تغییر مسیر صفحه

مثال

تنظیم کوکی ها

مثال

تنظیم نام نویسنده

مثال

تعیین تنظیم کاراکتر

مثال

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

بدون دیدگاه

آموزش متا تگ ها در HTML

افزودن متا تگ های در HTML به اسناد

مشخص کردن کلمات کلیدی

مثال

شرح سند

مثال

بازبینی تاریخ سند

مثال

تازه سازی سند

مثال

تغییر مسیر صفحه

مثال

تنظیم کوکی ها

مثال

تنظیم نام نویسنده

مثال

تعیین تنظیم کاراکتر

مثال

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه