-
Notifications
You must be signed in to change notification settings - Fork 0
/
introducao.html
executable file
·362 lines (344 loc) · 16.8 KB
/
introducao.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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Alexandre Gomes de Lima">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="estilos/aulas.css">
<title>IFRN/DIATINF/Design Web: Introdução a HTML</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png" alt="IFRN" id="logoifrn">
<h1 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h1>
<h2 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h2>
</header>
<article id="conteudo">
<h1>Introdução à HTML</h1>
<section>
<p>
A <strong>World Wide Web</strong>, ou simplesmente <strong>Web</strong>, é um serviço da
internet que disponibiliza conteúdo e serviços através de páginas web. Estas páginas são
normalmente acessadas com um software chamado de navegador, ou browser, tais como Microsoft Edge,
Mozilla Firefox e Google Chrome.
</p>
<p>
Falando de forma mais precisa, uma página web
é na verdade um documento <strong>HTML</strong> (Hyper Text Markup Language), o qual não passa de um documento
de texto cujo conteúdo está
estruturado em tags (marcações). O navegador utiliza estas tags para reconhecer o tipo
de cada conteúdo (e.g., parágrafo, tabela, imagem, etc) e então gerar uma visualização
adequada para o usuário. Assim, para que possamos criar páginas web é preciso conhecer
as tags definidas pela HTML.
</p>
<p>
Uma tag é definida em conjunto com os caracteres <span class="html"><</span> (menor) e
<span class="html">></span> (maior) e normalmente possui
uma abertura (e.g., <span class="html"><p></span>) e um fechamento (e.g., <span class="html"></p></span>).
No exemplo a seguir estão presentes duas tags (<span class="html">h1</span> e
<span class="html">p</span>). A primeira define um texto de cabeçalho, enquanto que a segunda define um
texto de parágrafo.
</p>
<pre class="html">
<h1>O IFRN</h1>
<p>
O IFRN oferece cursos de nível técnico, tecnológico e pós-graduação em diversas áreas do conhecimento e
está presente em todas as regiões do Rio Grande do Norte através dos seus 21 campi.
</p>
</pre>
<p>
Na maioria dos navegadores, é possível ver o código HTML de uma página web clicando com o botão
direito do mouse sobre a página e selecionando a opção <strong>Ver código-fonte</strong>.
</p>
</section>
<section>
<h2 class="referencias">Estrutura básica de um documento HTML</h2>
<p>
O trecho a seguir exibe a estrutura básica de um documento HTML.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
</pre>
<p>
A tag <span class="html">html</span> define um documento HTML. A tag <span class="html">head</span>
define a área de cabeçalho da página, a qual é utilizada para definir informações a respeito da
página como seu autor, título e sistema de codificação de caracteres.
A tag <span class="html">body</span> é utilizada para
definir o conteúdo da página, ou seja, o que deve ser exibido na área principal do navegador.
</p>
<p>
Para entender melhor, vamos começar a por a mão na massa. Usando um editor simples de texto, como o bloco de
notas, crie um arquivo e salve-o com a extensão <strong>html</strong>. Em seguida, digite ou copie e cole a
estrutura básica apresentada anteriormente e salve o arquivo. Depois, abra o arquivo em um navegador e
observe o resultado.
</p>
<p>
Para deixar página mais interessante, vamos acrescentar um título à página como indicado a seguir.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<strong><title>Minha Primeira Página</title></strong>
</head>
<body>
</body>
</html>
</pre>
<p>
Após inserir a tag <span class="html">title</span>, recarregue a página no navegador (use o botão recarregar,
ou tecle F5). Repare que o título é exibido na aba do navegador (veja a imagem a seguir).
</p>
<figure>
<img src="introducao/figura01.png"
alt="Imagem exibindo a barra de título do navegador">
</figure>
<p>
Vamos agora inserir algum conteúdo na página. Atualize o seu arquivo com as novas tags indicadas
a seguir, salve o arquivo e recarregue a página no navegador. Repare que o navegador utiliza difetentes
formatações para o texto de cada uma das tags utilizadas.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<strong><h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p></strong>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura02.png"
alt="Imagem exibindo a página com título e parágrafo">
</figure>
</section>
<section>
<h2 class="referencias">Codificação de caracteres</h2>
<p>
Repare que nas imagens apresentadas, os caracteres acentuados não foram exibidos
corretamente pelo navegador e que talvez esse mesmo problema tenha ocorrido no
seu computador. Este problema ocorre quando o arquivo HTML usa uma codificação de
caracteres e o navegador assume um esquema de codificação diferente. Para evitar
este problema, podemos usar a tag <span class="html">meta</span> para dizer ao navegador
qual é o esquema codificação do arquivo HTML (geralmente você pode utilizar seu editor
de textos para descobrir o esquema de codificação). Os esquemas de codificação mais comuns
são <strong>UTF-8</strong> e <strong>iso-8859-1</strong>. Veja a seguir a utilização da
tag <span class="html">meta</span> e o respectivo resultado.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
<strong><meta charset="UTF-8"></strong>
</head>
<body>
<h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura03.png"
alt="Exibição correta dos caracteres acentuados">
</figure>
</section>
<section>
<h2 class="referencias">Cabeçalhos</h2>
<p>
Já vimos que a tag <span class="html">h1</span> representa um cabeçalho e que o
navegador formata o seu texto em uma fonte de tamanho maior do que a utilizada
no texto do parágrafo. Além de <span class="html">h1</span>, existem outras tags
de cabeçalho: <span class="html">h2</span>, <span class="html">h3</span>,
<span class="html">h4</span>, <span class="html">h5</span> e <span class="html">h6</span>.
<span class="html">h1</span> representa o cabeçalho de nível mais alto, ou cabeçalho principal,
<span class="html">h2</span> representa o cabaçalho de segundo nível e assim por diante.
Por padrão, os navegadores aplicam uma formatação de forma a dar maior destaque aos cabeçalhos
de nível mais alto e menor destaque para os níveis mais baixos. Veja, a seguir, o nosso
exemplo com a adição de cabeçalhos de diferentes níveis.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p>
<strong><h2>Campus Natal Central</h2>
<h3>DIATINF</h3>
<h4>Cursos Técnicos</h4>
<h5>Informática para Internet</h5></strong>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura04.png"
alt="Exibição de cabeçalhos h1, h2, h3, h4 e h5">
</figure>
</section>
<section>
<h2 class="referencias">Tags órfãs e comentários</h2>
<p>
Agora, vamos acrescentar o parágrafo indicado a seguir.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p>
<h2>Campus Natal Central</h2>
<h3>DIATINF</h3>
<h4>Cursos Técnicos</h4>
<h5>Informática para Internet</h5>
<strong><p>
O Curso Técnico Integrado em Informática para Internet, presencial, tem
como objetivo geral capacitar profissionais no desenvolvimento de programas
de computador para Internet, seguindo as especificações e paradigmas da lógica
de programação e das linguagens de programação.
O profissional concluinte do Curso Técnico Integrado em Informática para Internet
oferecido pelo IFRN apresenta um perfil que o habilita a desempenhar atividades
voltadas para design de websites, análise e desenvolvimento de sistemas para Internet,
projeto de banco de dados, instalação e configuração de servidores de Internet.
</p></strong>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura05.png"
alt="Página com novo parágrafo mas sem seguir as quebras de linhas presentes no código HTML">
</figure>
<p>
Após atualizar o navegador, repare que o texto do novo parágrafo não segue
as quebras de linha presentes no código HTML. Redimensione a janela do navegador e
veja que a largura do parágrafo é ajustada de acordo a largura da janela.
Assim, podemos perceber que as quebras de linha inseridas no código HTML são
ignoradas pelo navegador. No entanto, há situações em que realmente desejamos inserir
uma quebra de linha e para isso devemos utilizar a tag <span class="html">br</span>.
Veja, no próximo exemplo, que uma quebra de linha é inserida pelo navegador exatamente no
ponto do texto correspondente à tag <span class="html">br</span>.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p>
<h2>Campus Natal Central</h2>
<h3>DIATINF</h3>
<h4>Cursos Técnicos</h4>
<h5>Informática para Internet</h5>
<p>
O Curso Técnico Integrado em Informática para Internet, presencial, tem
como objetivo geral capacitar profissionais no desenvolvimento de programas
de computador para Internet, seguindo as especificações e paradigmas da lógica
de programação e das linguagens de programação.
<strong><br></strong>
O profissional concluinte do Curso Técnico Integrado em Informática para Internet
oferecido pelo IFRN apresenta um perfil que o habilita a desempenhar atividades
voltadas para design de websites, análise e desenvolvimento de sistemas para Internet,
projeto de banco de dados, instalação e configuração de servidores de Internet.
</p>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura06.png"
alt="Página com novo parágrafo e uma quebra de linha de acordo com a tag br">
</figure>
<p>
Repare que a tag <span class="html">br</span> não necessitou de um fechamento (i.e., <span class="html"></br></span>).
Isto acontece porque <span class="html">br</span> é uma tag órfã, ou seja, é uma tag sem conteúdo e portanto não
necessita de fechamento. Além de <span class="html">br</span>, existem outras tags órfãs como <span class="html">hr</span>,
a qual define uma linha horizontal na página.
</p>
<p>
Assim como nas linguagens de programação, o HTML também suporta a utilização de comentários, os quais
são ignorados pelo navegador e não são exibidos na visualização da página. Para inserir
comentários, devemos utilizar as marcações <span class="html"><!--</span> e <span class="html">--></span>.
Veja no próximo exemplo que o texto definido como comentário não é exibido na visualização da página.
</p>
<pre class="html">
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>IFRN</h1>
<p>O IFRN está presente no RN através dos seus 21 campi.</p>
<h2>Campus Natal Central</h2>
<h3>DIATINF</h3>
<h4>Cursos Técnicos</h4>
<h5>Informática para Internet</h5>
<strong><!-- Este é um comentário --></strong>
<p>
O Curso Técnico Integrado em Informática para Internet, presencial, tem
como objetivo geral capacitar profissionais no desenvolvimento de programas
de computador para Internet, seguindo as especificações e paradigmas da lógica
de programação e das linguagens de programação.
<br>
O profissional concluinte do Curso Técnico Integrado em Informática para Internet
oferecido pelo IFRN apresenta um perfil que o habilita a desempenhar atividades
voltadas para design de websites, análise e desenvolvimento de sistemas para Internet,
projeto de banco de dados, instalação e configuração de servidores de Internet.
</p>
</body>
</html>
</pre>
<figure>
<img src="introducao/figura06.png"
alt="Visualização da página na qual é possível ver que os comentários não são renderizados pelo navegador">
</figure>
</section>
<section>
<h2 class="referencias">Exercícios</h2>
<p>
1) Com as tags aprendidas hoje, escreva uma página HTML sobre seu bairro com as seguintes informações:
</p>
<ul class="opcoes_exercicio">
<li>O nome do bairro e suas informações básicas (localização, como chegar, quantidade de habitantes, etc).</li>
<li>Coisas boas e coisas ruins do bairro.</li>
<li>Atrações do bairro.</li>
</ul>
</section>
<section>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
BEZERRA, Weskley. <em class="referencia">Primeiros comandos HTML</em>.
</li>
</ul>
</section>
</article>
</div>
</body>
</html>