HTML - Cabeçalho

Aprendemos que um documento HTML típico terá a seguinte estrutura -

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

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

Este capítulo dará mais detalhes sobre a parte do cabeçalho que é representada pela tag HTML <head>. A tag <head> é um contêiner de várias tags importantes, como tags <title>, <meta>, <link>, <base>, <style>, <script> e <noscript>.

A tag HTML <title>

A tag HTML <title> é usada para especificar o título do documento HTML. A seguir está um exemplo para dar um título a um documento HTML -

<!DOCTYPE html>
<html>

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

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

</html>

Isso produzirá o seguinte resultado -

A tag HTML <meta>

A tag HTML <meta> é usada para fornecer metadados sobre o documento HTML que inclui informações sobre a expiração da página, autor da página, lista de palavras-chave, descrição da página etc.

A seguir estão alguns dos usos importantes da tag <meta> dentro de um documento 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>

Isso produzirá o seguinte resultado -

A tag HTML <base>

A tag HTML <base> é usada para especificar a URL base para todas as URLs relativas em uma página, o que significa que todas as outras URLs serão concatenadas na URL base durante a localização do item fornecido.

Por exemplo, todas as páginas e imagens fornecidas serão pesquisadas após prefixar os URLs fornecidos com o URL base http://www.tutorialspoint.com/ diretório -

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

Isso produzirá o seguinte resultado -

Mas se você alterar a URL base para outra coisa, por exemplo, se a URL base for http://www.tutorialspoint.com/home, a imagem e outros links fornecidos se tornarão como http://www.tutorialspoint.com/home/images /logo.png e http://www.tutorialspoint.com/html/index.htm

A tag HTML <link>

A tag HTML <link> é usada para especificar relacionamentos entre o documento atual e o recurso externo. A seguir está um exemplo para vincular um arquivo de folha de estilo externo disponível emcss subdiretório dentro da raiz da web -

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

Isso produzirá o seguinte resultado -

A tag HTML <style>

A tag HTML <style> é usada para especificar a folha de estilo do documento HTML atual. A seguir está um exemplo para definir algumas regras de folha de estilo dentro da tag <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>

Isso produzirá o seguinte resultado -

Note- Para saber como funciona a Folha de Estilos em Cascata, por favor, verifique um tutorial separado disponível em css

A tag HTML <script>

A tag HTML <script> é usada para incluir um arquivo de script externo ou para definir um script interno para o documento HTML. A seguir está um exemplo em que estamos usando JavaScript para definir uma função JavaScript simples -

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

Isso produzirá o seguinte resultado, onde você pode tentar clicar no botão fornecido -

Note- Para saber como funciona o JavaScript, verifique um tutorial separado disponível em javascript

↰ Previous page Next page ↱