-
Notifications
You must be signed in to change notification settings - Fork 0
/
aula3.html
301 lines (203 loc) · 15.7 KB
/
aula3.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!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 3 - HTML</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 3 - HTML</h2>
<h3>O que é HTML?</h3>
<p><strong>H</strong>yper<strong>t</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage (Linguagem de Marcação de Hipertexto) é a linguagem mais usada para se criar Websites.</p>
<p>Hipertexto refere-se a maneira que as páginas web ligam-se entre si, por isso as ligações (links) entre elas são chamados de Hyperlinks.</p>
<p>HTML é usado para marcar um documento com <strong>tags</strong> que os Navegadores (Chrome, Firefox, Safari, Internet Explore, etc) usam para determinar como as páginas web são estruturadas.</p>
<h3>Tags</h3>
<p>Como foi dito as tags são utilizadas para marcar o conteúdo das páginas, determinar o que é um título, um cabeçalho, um parágrafo, etc. Além disso os navegadores utilizam algumas tags para formatar o texto, deixar a fonte maior ou menor, o texto em negrito ou itálico, etc. Porém não é recomendado usar tags como o meio principal de formatação. Para isso é recomendado utilizar CSS, que estudaremos mais a fundo nas próximas aulas.</p>
<p>Vejamos um exemplo da estrutura básica de um documento HTML:</p>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
<h1>Um cabeçalho</h1>
<p>Um parágrafo.</p>
<p>Outro parágrafo.</p>
</body>
</html>
</code>
</pre>
<p>A maioria das tags têm uma tag de fechamento correspondente. Como por exemplo a tag <strong><h1></strong> tem a tag de fechamento <strong></h1></strong>. Porém algumas tags não precisam ser fechadas, como por exemplo a tag <strong><!DOCTYPE html></strong>, chamamos essas tags de tags auto-fecháveis.</p>
<p>Para aprender HTML é preciso estudar várias tags e entender como elas se comportam. Por isso veremos algumas tags mais usadas em HTML. No final dessa aula você encontra uma lista de sites que contém mais tags, que podem não ser usadas com tanta frequência mas podem ser úteis em algumas situações.</p>
<h3>Elementos HTML</h3>
<p>Um elemento HTML é definido por uma tag de abertura. Se o elemento tem um conteúdo ele termina com uma tag de fechamento, semelhante a tag de abertura mas com uma barra "/" na frente do nome do elemento.</p>
<p>No exemplo anterior temos o elemento <!DOCTYPE html> que não possui conteúdo nem tag de fechamento, a tag de abertura é um elemento por si só.</p>
<p>Temos também o elemento: <p>Um parágrafo.</p>. Que é composto por uma tag de abertura <p>, o conteúdo "Um parágrafo" e a tag de fechamneto </p>.</p>
<p>É importante notar que o conteúdo não precisa ser necessariamente apenas texto, pode conter outros elementos, como por exemplo o elemento head, que contém o elemento title.</p>
<h3>Parentesco</h3>
<p>Existe um conceito de parentesco entre os elementos html. Se um elemento encontra-se "dentro" de outro, ele é chamada de filho (child). Já o elemento de "fora" é chamado de mãe ou pai (parent) do elemento de "dentro". No nosso exemplo o elemento <strong>body</strong> é pai dos elementos <strong>h1</strong> e <strong>p</strong>, que por sua vez são filhos de <strong>body</strong>.</p>
<p>Repare que tanto a tag de abertura <h1> quanto a tag de fechamento </h1> de <strong>h1</strong> estão dentro de <strong>body</strong>, algo como o código a seguir não é válido:</p>
<pre>
<code>
<body>
<h1>Um cabeçalho
</body>
</h1>
</code>
</pre>
<p>A maioria dos navegadores não interpeta o código acima como válido, podendo gerar resultados indesejáveis.</p>
<h3>Atributos</h3>
<p>As tags de abertura podem ter atributos, que são informações extra que definem caracteristicas dos elementos.</p>
<p>Um atributo é composto de duas partes, o nome e o valor. O nome identifica a propriedade do elemento, e o valor determina como essa propriedade será usada. Vejamos o exemplo abaixo.</p>
<pre>
<code>
<p id="meu-parágrafo" title="um parágrafo escrito por mim">
Olá Mundo!
</p>
</code>
</pre>
<p>No exemplo acima o atributo <strong>id</strong> tem o valor "meu-paragrafo". Esse atributo é usado para identificar um único elemento. Serve para criar links internos na página e é usado em CSS e JavaScript.</p>
<p>Conforme aprendemos outros elementos HTML veremos mais atributos.</p>
<h3>!DOCTYPE</h3>
<p>No exemplo visto, a primeira tag que aparece é <strong><!DOCTYPE html></strong>. Essa é uma tag usada pelos Navegadores para determinar o tipo do documento, que no nosso cado é do tipo <strong>html</strong>, isso ajuda os navegadores a mostrarem o documento corretamente.</p>
<h3>hmtl</h3>
<p>A tag <strong><html></strong> engloba todo o documento html. E contém duas tags filhas principais: head e body.</p>
<h3>head</h3>
<p><strong><head></strong> é a tag que representa o cabeçalho do documento, ela contém outras tags que geralmente possuem metadados (dados sobre o próprio documento html) e não o conteúdo (visto pelo usuário) em si.</p>
<h3>body</h3>
<p><strong><body></strong> é o corpo do documento html. É nele que se encontra todo conteúdo da página visível pelo usuário.</p>
<h3>title</h3>
<p><strong><title></strong> é a tag que contém o título da página. É uma tag filha da tag <strong>head</strong>. Geralmente esse título é mostrado no topo da janela ou de uma aba do Navegador.</p>
<h3>Tags de Heading</h3>
<p>As tags <strong><h1></strong> <strong><h2></strong> <strong><h3></strong> <strong><h4></strong> <strong><h5></strong> e <strong><h6></strong> são usadas para criar cabeçalhos no texto da página. A diferença entre os 6 é a importância ou destaque, sendo <strong><h1></strong> o cabeçalho com maior destaque e <strong><h6></strong> o com menor destaque. Importante não confundir com a tag <strong><head></strong> que é o cabeçalho do docomento em si, e não do texto/conteúdo da página.</p>
<h3>Parágrafo</h3>
<p>A tag <strong><p></strong> é usada para representar um parágrafo. Um texto sempre deve estar entre tags, seja de parágrafo, headings ou outra. Deixar um texto "solto", sem tags em volta, apesar de não causar um erro, é uma má prática, e pode deixar seu documento menos legível para outros desenvolvedores.</p>
<h3>pre</h3>
Tudo texto que estiver entre as tags <strong><pre></strong> <strong></pre></strong> será mostrado como está escrito, ou seja, respeitando a formatação, espaços, quebra de lnhas, etc.
<h3>Tags de Frase</h3>
<p>Algumas tags são usadas para das destaque à palavras ou partes de uma frase. Apesar de a maioria deles mudar visualmente o texto entre as tags, não devem ser usados para essa finalidade. A função desses elementos é ajudar os Navegadores e moteres de busca (Google) a entenderem melhor o conteúdo da página. A tabela abaixo mostra algumas dessas tags e suas finalidades.</p>
<table>
<tr>
<th>Tag</th>
<th>Finalidade</th>
</tr>
<tr>
<td><em></td>
<td>A palavra é mostrada com ênfase, geralmente em itálico.</td>
</tr>
<tr>
<td><mark></td>
<td>A palavra é marcada com um fundo amarelo.</td>
</tr>
<tr>
<td><strong></td>
<td>A palavra é mostrada como um texto importante, geralmente em negrito.</td>
</tr>
<tr>
<td><abbr></td>
<td>A palavra é uma abreviação, deve conter o atributo title com o texto não abreviado.</td>
</tr>
</table>
<p><strong>Cuidado:</strong> existem várias tags e atributos que mudam visualmente os elementos html, porém não é recomendado usá-los com finalidade. O Recomendado é usar CSS que aprenderemos na próxima aula.</p>
<h3>Comentários</h3>
<p>Comentários são partes do documento que são ignoradas pelo Navegador, são uasados pelos desenvolvedores para escrever lembretes ou explicar o código. Os comentários devem estar entre <strong><!--</strong> e <strong>--></strong> vejamos um exemplo:</p>
<pre>
<code>
<p>
Olá Mundo!
<!-- Esta parte não será exibida! -->
</p>
</code>
</pre>
<h3>Imagens</h3>
<p>Para exibir uma imagem utilizamos a tag auto-fechável <img />. Existem dois atributos importante para essa tag: <strong>src</strong> e <strong>alt</strong>. O atributo src determina o caminho (link) para a imagem, que pode ser um endereço na web ou um caminho relativo ao documento HTML. O atributo alt é um texto alternativo que é exibido caso a imagem não carregue, e também é usado para acessibilidade de pessoas com algum tipo de deficiência visual.</p>
<pre>
<code>
<img src="https://i.imgur.com/CVarvWs.jpg" alt="Um gato">
</code>
</pre>
<h3>Links</h3>
<p>A tag <a> é usada para criar um link. Existem dois atributos importante para essa tag: href e taget. O atributo href recebe o link, já target especifica onde o link será aberto, "_self" é usado para abrir o link na própria página, "_blank" é usado para abrir o link em uma nova aba.</p>
<pre>
<code>
<a href="https://www.google.com" target="_blank">
Clique para abrir o Google!
</a>
</code>
</pre>
<h3>Listas</h3>
<p>As tags <ol> e <ul> são usadas para criar listas ordenadas e não ordenadas respectivamente, a diferença é que as listas ordenadas são numeradas. As listas não ordenadas <ul> são mais usadas.</p>
<p>Para criar items em uma lista usamos a tag <li> veja no exemplo a seguir.</p>
<pre>
<code>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</code>
</pre>
<h3>Tabelas</h3>
<p>É possível criar tabelas entre as tags <table> </table>. Para definir uma linha na tabela usamos a tag <tr>. Para definir uma célula usamos a tag <td>, ou <th> para uma célula de cabeçalho. As células podem recer os atributos rowspan e colspan que determinam o espaço de quantas céluals ela ocupa na linha e na coluna respectivamente. Veja o exemplo abaixo:</p>
<pre>
<code>
<table>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
</tr>
<tr>
<td rowspan = "2">Linha 1 Célula 1</td>
<td>Linha 1 Célula 2</td><td>Linha 1 Célula 3</td>
</tr>
<tr>
<td>Linha 2 Célula 2</td>
<td>Linha 2 Célula 3</td>
</tr>
<tr>
<td colspan = "3">Linha 3 Célula 1</td>
</tr>
</table>
</code>
</pre>
<h3>Formulários</h3>
<p>Formulários são muito úteis em websites para que o usuário possa enviar informações. Porém a parte de receber e tratar essas informações é do backend. Com HTML apenas cuidamos da apresentação deste formulário ao usuário.</p>
<p>As tags <form> </form> delimitam um formulário. Entra essas tags podemos colocar várias outras tags que correspondem aos elementos do formulário. Temos por exemplo entrada de texto, caixas de seleção, seleção de arquivos, botões, etc. Estudaremos como enviar os dados de um formulário em outra aula, quando já soubermos um pouco mais sobre backend. Por enquanto vejamos o exemplo abaixo:</p>
<pre>
<code>
<form>
Nome : <input type = "text" name = "nome_usuario" >
E-mail: <input type = "email" name = "e-mail" >
Senha: <input type = "password" name = "senha" >
</form>
</code>
</pre>
<h3>Sites para aprender mais</h3>
<p>Vamos listar aqui alguns sites que possuem muito mais informações sobre HTML. Não se assuste com a quantidade de informações, lembre-se que não é preciso decorar tudo, afinal esses sites e o nosso velho amigo Google sempre estarão lá para nos ajudar.</p>
<ul>
<li><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML">Mozilla Developers Network</a></li>
<li><a href="https://codecommit.com.br/html-referencia-de-elementos-cheatsheet">Code Commit</a></li>
<li><a href="https://learn.freecodecamp.org/">Free Code Camp</a></li>
<li><a href="https://www.w3schools.com/">W3 Schools</a></li>
<li><a href="https://www.tutorialspoint.com/html/index.htm">Tutorials Point</a></li>
<li><a href="https://www.codecademy.com/catalog/language/html-css">Codecademy</a></li>
</ul>
</article>
</main>
<!--XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX-->
<script src="./src/js/menu.js"></script>
</body>
</html>