آموزش تگ Header در HTML

4 سال پیش

امتیاز دهید post

آموزش تگ Header در HTML

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

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

Document declaration tag 
&lt;html&gt;
   
   &lt;head&gt;
      Document header related tags
   &lt;/head&gt;

   &lt;body&gt;
      Document body related tags
   &lt;/body&gt;
   
&lt;/html&gt;

Document declaration tag

<html>

<head>

Document header related tags

</head>

<body>

Document body related tags

</body>

</html>

در این درس جزئیات بیشتری در مورد قسمت هدر ارائه می شود که با تگ <HTML <head نشان داده می شود. تگ <head> ظرفی از تگ های مهم مختلف مانند <title> ، <meta> ، <link> ، <base> ، <style> ، <script> و <noscript> است.

تگ <HTML <title

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

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

   &lt;head&gt;
      &lt;title&gt;HTML Title Tag Example&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Hello, World!&lt;/p&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Title Tag Example</title>

</head>

<body>

<p>Hello, World!</p>

</body>

</html>

خروجی

Hello, World!

1	Hello, World!

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

در زیر چند کاربرد مهم تگ <meta> در داخل یک سند HTML آورده شده است –

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

   &lt;head&gt;
      &lt;title&gt;HTML Meta Tag Example&lt;/title&gt;

      &lt;!-- Provide list of keywords --&gt;
      &lt;meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python"&gt;

      &lt;!-- Provide description of the page --&gt;
      &lt;meta name = "description" content = "Simply Easy Learning by Tutorials Point"&gt;

      &lt;!-- Author information --&gt;
      &lt;meta name = "author" content = "Tutorials Point"&gt;

      &lt;!-- Page content type --&gt;
      &lt;meta http-equiv = "content-type" content = "text/html; charset = UTF-8"&gt;

      &lt;!-- Page refreshing delay --&gt;
      &lt;meta http-equiv = "refresh" content = "30"&gt;

      &lt;!-- Page expiry --&gt;
      &lt;meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT"&gt;

      &lt;!-- Tag to tell robots not to index the content of a page --&gt;
      &lt;meta name = "robots" content = "noindex, nofollow"&gt;

   &lt;/head&gt;

   &lt;body&gt;
      &lt;p&gt;Hello, World!&lt;/p&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Meta Tag Example</title>

</head>

<body>

<p>Hello, World!</p>

</body>

</html>

خروجی

Hello, World!

1	Hello, World!

تگ <HTML <base

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

به عنوان مثال، تمام صفحات و تصاویر داده شده پس از پیشوند دادن URL های داده شده با دایرکتوری URL پایه http://www.tutorialspoint.com/ جستجو می شوند –

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

   &lt;head&gt;
      &lt;title&gt;HTML Base Tag Example&lt;/title&gt;
      &lt;base href = "https://www.tutorialspoint.com/" /&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;img src = "/images/logo.png" alt = "Logo Image"/&gt;
      &lt;a href = "/html/index.htm" title = "HTML Tutorial"/&gt;HTML Tutorial&lt;/a&gt; 
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Base Tag Example</title>

</head>

<body>

<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>

</body>

</html>

خروجی

اما اگر URL پایه را به چیز دیگری تغییر دهید ، به عنوان مثال ، اگر URL پایه http://www.tutorialspoint.com/home باشد، تصویر و سایر پیوندهای داده شده مانند http://www.tutorialspoint.com/home/images تبدیل می شوند /logo.png و http://www.tutorialspoint.com/html/index.htm

تگ <HTML <link

از تگ <HTML <link برای تعیین روابط بین سند فعلی و منبع خارجی استفاده می شود. در زیر مثالی برای پیوند دادن یک فایل خارجی موجود در زیر دایرکتوری css درون ریشه وب آمده است:

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

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

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML link Tag Example</title>

</head>

<body>

<p>Hello, World!</p>

</body>

</html>

خروجی

Hello, World!

1	Hello, World!

تگ <HTML <style

از تگ <HTML <style برای تعیین استایل برای سند HTML فعلی استفاده می شود. در زیر مثالی برای تعریف چند قانون شیت استایل در داخل تگ <style> آورده شده است –

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

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

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML style Tag Example</title>

.myclass {

background-color: #aaa;

padding: 10px;

}

</style>

</head>

<body>

<p class = "myclass">Hello, World!</p>

</body>

</html>

خروجی

Hello, World!

1	Hello, World!

تگ <HTML <script

تگ <HTML <script برای شامل کردن فایل اسکریپت خارجی یا تعریف اسکریپت داخلی برای سند HTML استفاده می شود. در زیر مثالی آورده شده است که در آن ما از JavaScript برای تعریف یک تابع JavaScript ساده استفاده می کنیم –

&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML script Tag Example&lt;/title&gt;
      &lt;base href = "http://www.tutorialspoint.com/" /&gt;
      
      &lt;script type = "text/JavaScript"&gt;
         function Hello() {
            alert("Hello, World");
         }
      &lt;/script&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;input type = "button" onclick = "Hello();" name = "ok" value = "OK"  /&gt;
   &lt;/body&gt;

&lt;/html&gt;

<html>

<head>

<title>HTML script Tag Example</title>

function Hello() {

alert("Hello, World");

}

</script>

</head>

<body>

</body>

</html>

خروجی

منبع.

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

امتیاز دهید post

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

آموزش تگ Header در HTML

آموزش تگ Header در HTML

تگ <HTML <title

تگ <HTML <base

تگ <HTML <link

تگ <HTML <style

تگ <HTML <script

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

دیدگاه شما

بدون دیدگاه

آموزش تگ Header در HTML

تگ <HTML <title

تگ <HTML <base

تگ <HTML <link

تگ <HTML <style

تگ <HTML <script

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

دیدگاه شما

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

بدون دیدگاه