-
Notifications
You must be signed in to change notification settings - Fork 0
/
estruturacao_de_pagina.html
executable file
·356 lines (334 loc) · 14.4 KB
/
estruturacao_de_pagina.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML,CSS" />
<meta name="author" content="Alexandre Gomes de Lima" />
<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: Elementos para estruturação de página</title>
</head>
<body>
<div id="tudo">
<header id="cabecalho">
<img src="imagens/logo_ifrn.png"
alt="IFRN"
id="logoifrn" />
<h3 class="cabecalho">
Diretoria Acadêmica de Gestão e Tecnologia da Informação
</h3>
<h3 class="cabecalho">
Disciplina de Design Web e Arquitetura da Informação
</h3>
</header>
<article id="conteudo">
<h1>Elementos para estruturação de página</h1>
<p>
Nesta aula serão apresentados elementos capazes de dar mais semântica (significado) ao
conteúdo de uma página web. A maioria destes elementos surgiu com o HTML 5 e seu uso
é altamente recomendado visto que eles tornam uma página web mais inteligível tanto para
seres humanos como para programas de computador.
</p>
<h2>Elementos para estruturação de página</h2>
<p>
Sabemos que os elementos <span class="html">div</span> e <span class="html">span</span>
podem ser utilizados para criação de áreas ou trechos com significado específico
ou que receberão formatação específica. Por exemplo, considere a imagem a seguir
que ilustra as áreas de conteúdo de uma página.
</p>
<figure>
<img src="estruturacao_de_pagina/exemplo_areas.png"
alt="Figura com exemplo de áreas de uma página">
</figure>
<p>
Estas áreas poderiam ser definidas com elementos <span class="html">div</span>
como no trecho de HTML abaixo:
</p>
<pre class="html">
<div id="topo"> ... </div>
<div id="navegacao"> ... </div>
<div id="conteúdo"> ... </div>
</pre>
<p>
Para um humano que leia o código HTML acima, os atributos <span class="html">id</span>
deixam claro qual o significado da área representada por cada <span class="html">div</span>.
No entanto, este mesmo significado não fica claro para um programa de computador destinado
à interpretação de código HTML como um navegador, um leitor de tela ou um
mecanismo de busca. Para tal fim, a HTML prevê diversos elementos semânticos, ou seja,
elementos com significados específicos que permitem a um programa de computador
interpretar corretamente o conteúdo presente em uma página web. Assim, sempre que
possível devemos dar preferência ao uso de tais elementos em substituição aos
genéricos <span class="html">div</span> e <span class="html">span</span>.
</p>
<p>
A seguir, são apresentados alguns elementos HTML que proporcionam uma melhor estruturação
do conteúdo de uma página em termos de semântica.
</p>
<h3>article</h3>
<p>
Elemento de bloco destinado a marcar conteúdo auto-suficiente, ou seja, independente
de outros conteúdos como uma postagem de blog ou uma matéria de revista. Assim,
utilize este elemento para definir o conteúdo principal de uma página.
</p>
<p>
É permitido o aninhamento de elementos <span class="html">article</span>, mas neste
caso o conteúdo dos elementos aninhados deve estar relacionado ao conteúdo do
<span class="html">article</span> que aninha os demais. Um exemplo prático seria a postagem
de um blog seguido dos comentários dos leitores.
</p>
<pre class="html">
<body>
<strong><article></strong>
<h2>
<a href="jerns034.html">
Equipe de futebol do IFRN obtém o terceiro lugar
na regional dos JERNS.
</a>
</h2>
<p>
A equipe se classificou para a fase final que será
disputada no próximo mês em Santa Cruz.
</p>
<strong></article></strong>
</body>
</pre>
<h3>section</h3>
<p>
Elemento de bloco destinado a marcar uma seção na página. São exemplos de seções: os capítulos
de um livro, as seções de um texto ou as seções em um página web tais como introdução e informações
de contato. É totalmente adequado usar este elemento para definir as seções do conteúdo
presente em um elemento <span class="html">article</span>, como no exemplo a seguir:
</p>
<pre class="html">
<article>
<p>
Fundo de Manutenção e Desenvolvimento da Educação Básica (FUNDEB)
é um conjunto de fundos contábeis formado por recursos dos três
níveis da administração pública do Brasil para promover o financiamento
da educação básica pública em substituição ao FUNDEF.
</p>
<b><section></b>
<h2>Destinação</h2>
<p>
O FUNDEB atende a educação infantil, os ensinos médio e fundamental e
a educação de jovens e adultos. O seu antecessor, o FUNDEF, atendia
apenas o ensino fundamental.
</p>
<b></section>
<section></b>
<h2>Regulamentação</h2>
<p>
Foi criado pela Emenda Constitucional nº 53/2006 e regulamentado
pela Lei nº 11.494/2007 e pelo Decreto nº 6.253/2007.
</p>
<b></section></b>
</article>
</pre>
<h3>aside</h3>
<p>
Elemento de bloco utilizado para definir conteúdo complementar relacionado
a algum outro conteúdo de maior importância presente na página. Em tipografia,
é o conteúdo presente nas colunas laterais do texto. Usos típicos deste elemento
em uma página web: agrupamento de publicidade, barras laterais e links secundários.
</p>
<pre class="html">
<body>
<article>
<p>
Fundo de Manutenção e Desenvolvimento da Educação Básica (FUNDEB)
é um conjunto de fundos contábeis formado por recursos dos três
níveis da administração pública do Brasil para promover o financiamento
da educação básica pública em substituição ao FUNDEF.
</p>
</article>
<b><aside></b>
<p>
O FUNDEB foi criado pela Emenda Constitucional nº 53/2006
e regulamentado pela Lei nº 11.494/2007 e pelo Decreto nº
6.253/2007.
</p>
<b></aside></b>
</body>
</pre>
<h3>nav</h3>
<p>
Elemento de bloco destinado a agrupar o(s) menu(s) de navegação da página,
ou seja, a(s) área(s) que contém os principais links de acesso às diversas
partes de um site.
</p>
<pre class="html">
<body>
<b><nav></b>
<a href="legislacao.html">Legislação</a>
<a href="estatisticas.html">Dados estatísticos</a>
<a href="faq.html">Perguntas frequentes</a>
<b></nav></b>
<article>
<p>
Fundo de Manutenção e Desenvolvimento da Educação Básica (FUNDEB)
é um conjunto de fundos contábeis formado por recursos dos três
níveis da administração pública do Brasil para promover o financiamento
da educação básica pública em substituição ao FUNDEF.
</p>
</article>
</body>
</pre>
<h3>header</h3>
<p>
Elemento de bloco para a criação de cabeçalhos de páginas ou cabeçalhos
de seções do conteúdo.
</p>
<pre class="html">
<body>
<b><header></b>
<img src="logoifrn.png">
<h1>Instituto Federal do Rio Grande do Norte</h1>
<b></header></b>
<article>
<b><header></b>
<h2>PROEX divulga lista de projetos selecionados</h2>
<h3>Foram selecionados 20 trabalhos de um total de 48</h3>
<b></header></b>
<p>
A PROEX divulgou nesta última sexta-feira a relação de
trabalhos aprovados na seleção referente ao edital nº ...
</p>
</article>
</body>
</pre>
<h3>footer</h3>
<p>
Elemento de bloco destinado a criação de rodapés de páginas ou
rodapés de seções do conteúdo. Um rodapé geralmente contém informações
sobre o autor da página, direitos de uso, informações de contato,
entre outras.
</p>
<pre class="html">
<body>
<header>
...
<header>
<article>
...
</article>
<b><footer></b>
<p>
Instituto Federal do Rio Grande do Norte<br>
Av. Sen. Salgado Filho, 1559, Tirol. Natal-RN<br>
Telefones: 84-4005 9843 / 9842
</p>
<b></footer></b>
</body>
</pre>
<p>
Vimos que estes elementos recém-apresentados são capazes de definir
áreas com significado específico. No entanto, repare que o navegador
lhes aplica a mesma lógica de posicionamento que é utilizada
com outros elementos de bloco. Assim, qualquer posicionamento diferente do padrão deve ser
obtido através da aplicação de regras CSS de posicionamento.
</p>
<h2>Elementos de conteúdo</h2>
<p>
Esta seção apresenta alguns elementos capazes de dar mais semântica ao conteúdo presente
nas áreas de uma página web.
</p>
<h3>figure e figcaption</h3>
<p>
<span class="html">figure</span> é um elemento de bloco para definição de
conteúdos tais como ilustrações, diagramas, listagens de código, imagens,
entre outros.
</p>
<p>
<span class="html">figcaption</span> é um elemento que define uma legenda
para o conteúdo de um elemento <span class="html">figure</span>, portanto
sempre é inserido como filho deste último.
</p>
<pre class="html">
<b><figure></b>
<img src="monumento-zumbi.jpg">
<b><figcaption></b>
Estátua localizada no bairro do Pelourinho
em homenagem a Zumbi dos Palmares.
<b></figcaption>
</figure></b>
</pre>
<h3>hgroup</h3>
<p>
Elemento para agrupar elementos <span class="html">h1-h6</span> utilizados como
cabeçalho de uma seção, artigo ou página. Um exemplo de uso rotineiro
é no agrupamento de título e subtítulo de um texto.
</p>
<pre class="html">
<article>
<header>
<b><hgroup></b>
<h2>PROEX divulga lista de projetos selecionados</h2>
<h3>Foram selecionados 20 trabalhos de um total de 48</h3>
<b></hgroup></b>
</header>
<p>
A PROEX divulgou nesta última sexta-feira a relação de
trabalhos aprovados na seleção referente ao edital nº ...
</p>
</article>
</pre>
<h3>mark</h3>
<p>
Elemento de linha para destacar partes do texto. Seu uso é recomendado
em palavras ou frases que servirão de referência durante o restante da
leitura. A maioria dos navegadores formata esse elemento com um fundo
na cor amarela, simulando a aplicação de uma caneta marcadora de texto.
</p>
<h3>abbr</h3>
<p>
Elemento de linha para marcar uma abreviação ou acrônimo. Pode ser acompanhada
do atributo <span class="html">title</span> para informar o
o termo abreviado por extenso.
</p>
<pre class="html">
<p>
O <b><abbr title="Fundo de Manutenção e Desenvolvimento da Educação Básica">FUNDEB</abbr></b>
é um conjunto de fundos contábeis formado por recursos dos três níveis da administração
pública do Brasil para promover o financiamento da educação básica pública.
</p>
</pre>
<h3>address</h3>
<p>
Elemento para definir informações de contato do autor da página ou artigo.
Não deve ser utilizado para descrever endereços postais que não sejam
do autor do texto/página. É comum o seu uso junto com o elemento
<span class="html">footer</span>.
</p>
<pre class="html">
<footer>
<b><address></b>
Instituto Federal do Rio Grande do Norte<br>
Av. Sen. Salgado Filho, 1559, Tirol. Natal-RN<br>
Telefones: 84-4005 9843 / 9842
<b></adrress></b>
</footer>
</pre>
<h2>Exercícios</h2>
<div class="exercicios">
<p>
1) Utilize os elementos apresentados nesta aula para criar a página exibida no
PDF presente nos <a href="estruturacao_de_pagina/exercicio01.zip">arquivos deste exercício</a>.
</p>
</div>
<h2 class="referencias">Referências</h2>
<ul>
<li class="referencia">
W3Schools.com. <em class="referencia">HTML5 Semantic Elements</em>. Disponível em <http://www.w3schools.com/html/html5_semantic_elements.asp>.
</li>
<li class="referencia">
SILVA, Maurício Samy. <em class="referencia">HTML 5</em>. São Paulo: Novatec, 2011.
</li>
<li class="referencia">
Wikipédia. <em class="referencia">Fundo de Manutenção e Desenvolvimento da Educação Básica</em>. Disponível em <http://pt.wikipedia.org/wiki/Fundo_de_Manuten%C3%A7%C3%A3o_e_Desenvolvimento_da_Educa%C3%A7%C3%A3o_B%C3%A1sica>.
</li>
</ul>
</article>
</div>
</body>
</html>