HTML - nagłówek

Dowiedzieliśmy się, że typowy dokument HTML będzie miał następującą strukturę -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

Ten rozdział poda trochę więcej szczegółów na temat części nagłówka, która jest reprezentowana przez znacznik HTML <head>. Tag <head> jest kontenerem różnych ważnych tagów, takich jak <title>, <meta>, <link>, <base>, <style>, <script> i <noscript>.

Tag HTML <title>

Znacznik HTML <title> służy do określenia tytułu dokumentu HTML. Poniżej znajduje się przykład nadania tytułu dokumentowi HTML -

<!DOCTYPE html>
<html>

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

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

</html>

To da następujący wynik -

Tag HTML <meta>

Tag HTML <meta> służy do dostarczania metadanych o dokumencie HTML, które zawierają informacje o wygaśnięciu strony, autorze strony, liście słów kluczowych, opisie strony itp.

Oto kilka ważnych zastosowań tagu <meta> w dokumencie 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>

To da następujący wynik -

Tag HTML <base>

Znacznik HTML <base> służy do określania podstawowego adresu URL dla wszystkich względnych adresów URL na stronie, co oznacza, że wszystkie inne adresy URL zostaną połączone w podstawowy adres URL podczas lokalizowania dla danego elementu.

Na przykład wszystkie podane strony i obrazy zostaną przeszukane po poprzedzeniu podanych adresów URL bazowym adresem URL http://www.tutorialspoint.com/ katalog -

<!DOCTYPE html>
<html>

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

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

</html>

To da następujący wynik -

Ale jeśli zmienisz podstawowy adres URL na inny, na przykład, jeśli podstawowy adres URL to http://www.tutorialspoint.com/home, obraz i inne podane łącza staną się takie jak http://www.tutorialspoint.com/home/images /logo.png i http://www.tutorialspoint.com/html/index.htm

Tag HTML <link>

Znacznik HTML <link> służy do określania relacji między bieżącym dokumentem a zasobem zewnętrznym. Poniżej znajduje się przykład połączenia zewnętrznego pliku arkusza stylów dostępnego w programiecss podkatalog w katalogu głównym sieci -

<!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>

To da następujący wynik -

Tag HTML <style>

Znacznik HTML <style> służy do określenia arkusza stylów dla bieżącego dokumentu HTML. Poniżej znajduje się przykład definiowania kilku reguł arkusza stylów wewnątrz znacznika <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>

To da następujący wynik -

Note- Aby dowiedzieć się, jak działa kaskadowy arkusz stylów, zapoznaj się z osobnym samouczkiem dostępnym pod adresem css

Tag HTML <script>

Znacznik HTML <script> służy do dołączania zewnętrznego pliku skryptu lub do definiowania wewnętrznego skryptu dla dokumentu HTML. Poniżej znajduje się przykład, w którym używamy JavaScript do zdefiniowania prostej funkcji JavaScript -

<!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>

To da następujący wynik, w którym możesz spróbować kliknąć dany przycisk -

Note- Aby dowiedzieć się, jak działa JavaScript, zapoznaj się z osobnym samouczkiem dostępnym pod adresem javascript