-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (91 loc) · 7.24 KB
/
index.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aprenda a estrutura básica do HTML</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="./assets/icone.png">
<meta name="description" content="Aprenda sobre as principais tags do HTML e sua estrutura para o desenvolvimento do seu site.">
<meta name="author" content="Léo Vitor">
<meta name="keywords" content="estrutura básica do html, html, tags, principais tags html">
</head>
<body>
<div class="infoArticle">
<div class="contentCreatedArticle">
<img src="./assets/perfil.png" alt="">
<p>Léo Vitor</p>
</div>
<time>04/01/2025</time>
</div>
<header>
<h1>Estrutura básica do HTML</h1>
<h2>Você sabia que saber a estrutura básica do <abbr title="HyperText Markup Language (Linguagem de Marcação de Hipertexto)">HTML</abbr> é importante para o <abbr title="Search Engine Optimization (Otimização de Mecanismos de Pesquisa)">SEO</abbr> e a boa experiência do usuário que acessar nosso site?</h2>
<div class="redContent">
<div class="redImg">
<img src="assets/image.png" alt="">
</div>
<p>Oi pessoal, meu nome é Léo Vitor e nesse artigo vamos explorar para que serve cada linha e seus respectivos significados!</p>
<p>Se gostar desse artigo e quiser me dar uma ajudinha eu lhe recomendo ir a uma das minhas redes abaixo ;)</p>
</div>
<div class="boxSocial">
<a href="https://www.youtube.com/@euleovitor_dev"><img src="./assets/social/youtube.png" alt=""></a>
<a href="https://github.com/devleov"><img src="./assets/social/github.png" alt=""></a>
<a href="https://www.instagram.com/euleobusiness/"><img src="./assets/social/insta.png" alt=""></a>
</div>
</header>
<main>
<section class="tag-doctype">
<h3><span>DOCTYPE</span> o que é e para que serve?</h3>
<img src="./assets/img/doctype.png" alt="">
<p>A tag doctype como o próprio nome já diz é uma tag que <strong>define o tipo de conteúdo em que você está lidando</strong>.</p>
<p>Ou seja, quando definimos essa tag e usamos o parâmetro <b>html</b> estamos dizendo ao navegador que aquele tipo de documento é HTML para melhor interpretar quando for renderizado.</p>
</section>
<hr>
<section class="tag-html">
<h3><span>html</span> o que é e para que serve?</h3>
<img src="./assets/img/html.png" alt="">
<p>A tag html é uma introdutoria do conteúdo do documento, ela é necessária para definir que o conteúdo dentro dela vai ter tags html.</p>
<p>Este atributo <b>lang</b> é usado para definir o tipo de tradução em que a página HTML vai ter, se não definir o navegador não saberá qual é a tradução do conteúdo e vai ter esta base no conteúdo existente na página.</p>
<p>Vale lembrar que está tag possui fechamento, diferente da tag principal da estrutura básica do HTML, essa tag se prolonga até o fim do documento.</p>
</section>
<hr>
<section class="tag-head">
<h3><span>head</span> o que é e para que serve?</h3>
<img src="./assets/img/head.png" alt="">
<p>A tag head é como se fosse a cabeça do documento HTML, ela define a parte em como o navegador irá entender sua página.</p>
<p>É nela que ficará os metadados como o título da página, a descrição, a forma em que o navegador vai entender o conteúdo, quem fez o site, como funcionará o site em outros tamanhos, dentre outros, ela possuí fechamento.</p>
</section>
<hr>
<section class="tag-meta">
<h3><span>meta</span> o que é e para que serve?</h3>
<img src="./assets/img/metas.png" alt="">
<p>As tags meta ajudam a "falar" ao navegador que for renderizar o documento HTML entender o que tem no conteúdo da página, isso é, também ajuda os mecanismos de busca entender o que o site se refere.</p>
<p><span style="color: green; font-weight: bold;">Na primeira linha</span>, temos a definição do texto que vamos trabalhar que no caso é o <abbr title="8-bit Unicode Transformation Format (Formato de transformação Unicode de 8 bits)">UTF-8</abbr>, ele é uma padronização para melhor o navegador entender cada caracter e converter para linguagem binária. Resumindo, ela ajuda para não ter bugs de acentuação, e fazer o navegador entender o texto que foi inserido no documento.</p>
<p><span style="color: green; font-weight: bold;">Na segunda linha</span>, define que o documento HTML tenha compatibilidade com o Internet Explorer, antigo navegador muito utilizado, mas atualmente perdeu sua força, e a tag foi menos utilizada, tanto é que: <q>Eu mesmo não utilizo rsrs</q>.</p>
<p><span style="color: green; font-weight: bold;">Na terceira linha</span>, define que o site irá se adaptar conforme a largura da tela do dispositivo, como sua escala inicial. Sem ela, o site poderá ficar desproporcional em dispositivos menores, ou muito maiores. <q>Eu recomendo que você utilize sempre!</q>.</p>
</section>
<hr>
<section class="tag-title">
<h3><span>title</span> o que é e para que serve?</h3>
<img src="./assets/img/title.png" alt="">
<p>A tag title é basicamente o título do site, é ela que ficará vísivel na aba da página.</p>
</section>
<hr>
<section class="tag-body">
<h3><span>body</span> o que é e para que serve?</h3>
<img src="./assets/img/body.png" alt="">
<p>A tag body é onde define o corpo da página HTML, é nela onde você colocará outras tags como h1, h2.. p, a, img, audio, video, dentre outras.</p>
<p>Simples de entender né? É na tag body que você colocará todo o conteúdo da sua página.</p>
</section>
<hr>
<br><br>
<div class="thank-you">
<h4>Te ajudei? Se sim, vai em um das minhas redes sociais e me segue lá ou comenta algo legal! Valeu :)</h4>
<p>Só para lembrar que eu citei apenas a estrutura básica, é claro que tem muitas outras tags que ajuda nos mecanismos de busca, mas somente abordei as principais.</p>
<p>Se deseja um artigo que eu fale sobre outras meta tags que não citei, como a de descrição, palavras chaves, e do dono do site, vá em uma rede social e comenta lá. Nos vemos em um próximo artigo, até lá.</p>
</div>
</main>
</body>
</html>