Cabeçalhos HTML - Mr Exemplos

<!–

main_leaderboard, all: [728,90][970,90][320,50][468,60]

–>

HTML – O Elemento Head

Cabeçalhos HTML são o tópico do artigo. Os elementos abaixo estão contidos no elemento HTML <head> :

<title> , <style> , <meta> , <link> , <script> e <base> .

Índice-

HTML – O Elemento Head:
O elemento HTML <head>:
O elemento HTML <title>:
O elemento HTML <estilo>:
O elemento HTML <link>:
O elemento HTML <meta>:
Configurando a janela de visualização:
O elemento <script>:
O elemento HTML <base>:
Cabeçalho HTML Elementos:
Benefícios do Elemento Cabeçalho HTML:

O elemento HTML <head>

O elemento <head> , localizado entre as tags <html> e <body> , é um contêiner para metadados.

Metadados são informações sobre documentos HTML . Esta página não exibe metadados.

Os metadados de um documento são determinados por seu título, conjunto de caracteres, estilos, scripts e outros elementos.

O elemento HTML <title>

O elemento <title> representa o título do documento. Ele aparece na barra de título do navegador ou na guia da página e deve ser somente texto.

Os documentos HTML devem conter um elemento de título!

A otimização do mecanismo de pesquisa ( SEO ) depende muito do conteúdo do título de uma página! Os algoritmos do mecanismo de pesquisa usam títulos de página para determinar a ordem em que as páginas aparecem nos resultados da pesquisa.

A <title>etiqueta:

Cria um título de barra de ferramentas para o navegador
Define um título para uma página favorita
Mostra o título da página nos resultados do mecanismo de pesquisa

É por isso que é crucial fornecer ao seu cabeçalho HTML um título que seja o mais descritivo e informativo possível.

Aqui está um documento HTML simples:

Example

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head><title>A Meaningful Page
Title</title>
</head>
<body>The content of the document can be written here </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento HTML <estilo>

A tag <style> é utilizada para especificar o estilo no exemplo abaixo:

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head><style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head><body><h1>This is a Heading</h1>
<p>This is a Paragraph</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento HTML <link>

A tag <link> indica o link entre um recurso html externo e o documento atual.

Normalmente, um elemento <link> é vinculado a uma folha de estilo externa:

Example

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="mystyle.css">
</head><body><h1>Mr Examples</h1>
<p> Welcome to Mr Examples </p>
</body></html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Dica: Visite nosso Tutorial de CSS para aprender tudo sobre CSS.

O elemento HTML <meta>

Meta tags <meta> geralmente são usadas em cabeçalhos HTML para especificar conjuntos de caracteres, descrições de página, palavras-chave, autores e configurações de viewport.

Os metadados não aparecem na página , mas são utilizados por navegadores da web para mostrar conteúdo ou recarregar a página, mecanismos de pesquisa (palavras-chave) e outros serviços da web.

Codificação de caracteres

A codificação de caracteres é determinada pelo atributo charset. Com “UTF-8” definido, qualquer idioma pode ser exibido neste exemplo:

<meta charset=”UTF-8″>

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>This is German language<span style="color: redorange"> Hallo, willkommen bei Herrn Beispiele</span></p>
<p>This is Russian language <span style="color: rebeccapurple">привет добро пожаловать к мистеру примерам privet dobro pozhalovat' k misteru primeram</span></p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Definindo palavras-chave para mecanismos de pesquisa:

<meta name=”keywords” content=”HTML Heads, CSS Styling, JS”>

Crie uma descrição para sua página da web:

<meta name=”description” content=”Mr Examples Web tutorials”>

Identifique o autor de uma página por:

<meta name=”author” content=”Colin Smith”>

Atualização de 25 segundos do documento:

<meta http-equiv=”refresh” content=”25″>

Example:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="refresh" content="10; url=https://mrexamples.com/html/">
 </head>
 <body>
 <h2>Example Meta element</h2>
 <p style="color: blue;">Kindly wait for 10 seconds and after 10 seconds it will redirected automatically to URL described in meta tag</p>
 </body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Torne seu site compatível com dispositivos móveis definindo a janela de visualização da seguinte maneira:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

A seguir estão exemplos de tags <meta> :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mr Examples Web tutorials">
<meta name="keywords" content="HTML Heads, CSS Styling, JS">
<meta name="author" content="Colin Smith">
</head>
<body>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo de metainformação completa:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="description" content="Mr Examples Web tutorials">
 <meta name="keywords" content="HTML Heads, CSS Styling, JS">
 <meta name="author" content="Colin Smith">
 <style>
  p{
   color:red;
  }
 </style>
</head>
<body>
<p>welcome to Mr Examples</p>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Configurando a Janela de Visualização

Viewports são áreas de páginas da web que podem ser vistas pelos leitores. O tamanho da viewport muda dependendo do dispositivo – por exemplo, será menor em um celular do que na tela do computador.

Certifique-se de que todas as suas páginas da web contenham as seguintes tags <meta> :

Os navegadores usam isso para controlar as dimensões e o dimensionamento das páginas.

A propriedade width=device-width define a largura da página para corresponder à largura da tela do dispositivo (que é variável).

Quando o navegador carrega a página pela primeira vez, a parte initial-scale=1.0 define o nível de zoom inicial.

Uma página da web sem a meta tag viewport e a mesma página web com a meta tag viewport são mostradas abaixo:

Você pode ver a diferença usando um telefone ou tablet clicando nos dois links abaixo.

Sem a
metatag da janela de visualização

Com a
metatag da janela de visualização

O elemento <script>

O elemento <script> é usado para especificar JavaScript.

Aqui está a aparência do JavaScript quando ele documenta “Aprenda JavaScript!” em um elemento HTML com id=”js exemplos”:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction() {document.getElementById("js examples").innerHTML = "Learn JavaScript!";
}
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Observação: visite as próximas aulas de JavaScript para saber mais.

Aqui está outro exemplo de Script no elemento head:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Mr Examples Web tutorials">
<meta name="keywords" content="HTML Heads, CSS Styling, JS">
<meta name="author" content="Colin Smith">
</head>
<body>
<p id="js_style">Html elemnent styles can be changed with javascript</p>
<script>
function myFunction() {
document.getElementById("js_style").style.fontSize = "15px";
document.getElementById("js_style").style.color = "brown";
document.getElementById("js_style").style.backgroundColor = "lightgreen";
document.getElementById("js_style").style.textDecoration = "underline";
}
</script>
<button type="button" onclick="myFunction()">Click Here</button>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

O elemento HTML <base>

Uma tag <base> define a URL base e/ou destino de todas as URLs relativas.

Pelo menos um atributo href ou ambos os atributos de destino devem aparecer na tag <base> .

Os documentos podem conter apenas uma tag <base> !

Para todos os links em uma página, defina um URL padrão e um alvo:

Example

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<base href="https://mrexamples.com/" target="_blank">
</head><body>
<img src="https://mrexamples.com/wp-content/uploads/html_images/images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cabeçalho HTML Elementos

Marcação	Visão geral
<estilo>	Informações de estilo de um documento.
<título>	Descreve o título de um documento.
<link>	Relação entre um documento e um recurso externo.
<cabeça>	Fornece informações sobre o documento.
<script>	Cria um script que é executado no cliente.
<meta>	Determinando os metadados do documento HTML.
<base>	Define o endereço ou destino padrão para todos os links em uma página.

Aqui está uma lista completa de todas as tags HTML .

Benefícios do elemento HTML Head

O elemento HTML <head> tem uma importância significativa no desenvolvimento da Web, pois fornece metadados e outras informações essenciais sobre a página da Web para o navegador da Web. Aqui estão alguns benefícios de usar o elemento <head> no desenvolvimento web:

Search Engine Optimization (SEO) aprimorado
O elemento <head> permite que os desenvolvedores da Web incluam metadados, como palavras-chave e descrições, que os mecanismos de pesquisa usam para classificar e exibir páginas da Web nos resultados da pesquisa, resultando em melhor otimização do mecanismo de pesquisa (SEO).

Melhores tempos de carregamento de páginas da Web
Os desenvolvedores da Web podem aprimorar os tempos de carregamento de páginas da Web definindo e carregando recursos externos como arquivos CSS e JavaScript por meio do elemento <head>.

Acessibilidade aprimorada
O elemento <head> permite que os desenvolvedores da Web especifiquem o idioma da página da Web e outros recursos de acessibilidade, que podem melhorar a experiência de usuários com deficiências.

Melhor marca do site
O elemento <head> pode ser utilizado para definir o favicon do site, o pequeno ícone que aparece ao lado do título da página na guia do navegador. Isso pode ajudar a melhorar a marca e o reconhecimento do site.

Experiência de usuário aprimorada
Os desenvolvedores da Web podem usar o elemento <head> para incluir outros elementos, como meta tags, que fornecem informações adicionais sobre a página da Web, resultando em uma experiência de usuário aprimorada.

Se este artigo satisfez seus desejos de aprendizado de alguma forma, compartilhe-o com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

HTML – O Elemento Head

O elemento HTML <head>

O elemento HTML <title>

Example

O elemento HTML <estilo>

Example

O elemento HTML <link>

Example

O elemento HTML <meta>

Codificação de caracteres

Example:

Example:

Example:

Example:

Configurando a Janela de Visualização

O elemento <script>

Example

Example:

O elemento HTML <base>

Example

Cabeçalho HTML Elementos

Benefícios do elemento HTML Head

Sentindo entediado?