-
Notifications
You must be signed in to change notification settings - Fork 0
/
aula24.html
90 lines (49 loc) · 3.51 KB
/
aula24.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Aula 24 - Meta tags</title>
<link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
<button id="menu-btn">X</button>
<nav id="menu">
<ul id="menu-ul">
</ul>
</nav>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<main>
<article>
<h2>Aula 24 - Meta tags</h2>
<p>As meta tags são tags HTML que tem informações sobre o próprio documento HTML. Já vimos algumas delas, agora vamos revê-las e aprender algumas bovas.</p>
<h3><!DOCTYPE html></h3>
<p>Essa tag, que geralmente está na primeira linha do documento HTML, serve para o navegador entender que este é um documento HTML.</p>
<h3><meta charset="utf-8"></h3>
<p>Essa tag serve para determinar o tipo de caracteres da página. No nosso caso sempre será UTF-8. Existem outros tipos de caracteres, por exemplo para letras/símbolos chinesas ou árabes. É muito importante usar essa tag, caso contrário o seu site pode não funcionar direito para pessoas que usam outros tipos de caracteres como padrão.</p>
<h3><meta http-equiv="x-ua-compatible" content="ie=edge"></h3>
<p>Essa tag também é muito importante pois faz o navegador Internet Explorar usar o mecanismo de renderização mais novo. Caso contrário seu site pode ter problemas de renderização no IE.</p>
<h3><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"></h3>
<p>Essa meta tag é muito importante para que os navegadores determinem o campo de visão da tela do dispositivo. Caso contrário seu site pode ter problemas principalmente em smartphones.</p>
<h3><meta name="description" content="Descrição da página com menos de 150 caracteres"></h3>
<p>Essa meta tag define uma descrição para o site e não pode ter mais de 150 caracteres.</p>
<h3><meta name="keywords" content="Palavras Chave"></h3>
<p>Essa meta tag serve para determinar algumas palavras chave. Útil para mecanismos de busca.</p>
<h3><meta name="author" content="John Doe"></h3>
<p>Essa meta tag serve para determinar o autor da página.</p>
<h3><meta http-equiv="refresh" content="10"></h3>
<p>Essa meta tag serve para atualizar a página automaticamente. O valor em content é o número de segundos entre cada atualização automática.</p>
<h3><title>Título da página</title></h3>
<p>A tag title é importante para mecanismos de busca (Google). É recomendado que o título tenha menos de 55 caracteres, mais do que isso pode ser cortado.</p>
<h3><link rel="icon" type="image/png" href="https://github.githubassets.com/favicon.ico"></h3>
<p>Essa tag define um ícone (imagem) que aparece na aba do navegador.</p>
<h3><html lang="pt-br"></h3>
<p>Outra coisa importante é usar o atributo lang na tag html. No nosso caso usamos lang="pt-br" pois o conteúdo do nosso site é em português.</p>
<h3></h3>
</article>
</main>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<script src="./src/js/menu.js"></script>
</body>
</html>