Aula3-HTML5estrutura

Prévia do material em texto

Aula 06
<nome> ... </nome> 
Ou <nome />
§ Seções HTML5
A estrutura de um site é dividida em
diversas seções. Cada seção representa
uma fatia do layout e também
representa um grupo de conteúdo. Cada
um destes grupos tem seu assunto
específico.
<div> bloco genérico </div>
§ Seções HTML5
HEADER: Define um grupo de títulos ou
o cabeçalho de uma determinada seção.
FOOTER: Define o rodapé das seções ou
da página.
NAV: Define um grupo ou bloco de links
de navegação.
ARTICLE: Define a área onde há um
artigo, texto, redação, conteúdo e etc…
Como cabeçalho do documento:
Como cabeçalho de um artigo ou seção:
Como cabeçalho principal do documento incluindo um 
<hgroup> com descrição do conteúdo:
§ header
Como rodapé do documento, contendo navegação:
Como cabeçalho de um artigo ou seção:
Como rodapé de artigo:
§ footer
Como rodapé de seção:
O elemento nav marca a seção do documento que agrupa links para 
outras partes do documento.
O grupo de links do elemento nav está relacionado à navegação 
primária ou global e pode estar no cabeçalho, no rodapé ou em outras 
seções do documento.
§ nav
O elemento article representa um conteúdo independente e altamente 
relevante, pode ser post, um artigo, um bloco de texto ou ainda um 
mini aplicativo embutido no conteúdo (widget)
§ article
Como elemento básico:
Como post de blog:
A tag <small> define textos menores (em tamanho)
§ Seções HTML5
ASIDE: Define um elemento lateral que
pode conter blocos de navegação
(NAVs), citações e outras informações
que costumamos colocar em uma
sidebar.
SECTION: Define um bloco ou um grupo
de um assunto específico. É importante
entender que a section agrupa diversos
elementos que tenham relação entre si.
§ aside
O elemento aside define um bloco de conteúdo que faz referência ao 
conteúdo principal que o cerca, pode estar ou não em uma barra lateral 
(sidebar) exibindo informações contextuais, assuntos relacionados, 
conteúdo publicitário ou um grupo de navegação secundária.
Especificação: O elemento dl destina-se 
a marcar uma lista associativa 
consistindo de zero ou mais grupos do 
par nome/valor (lista de definição). 
Cada grupo consiste de um ou mais 
nomes (elementos dt) seguido por um 
§ section
Entre todos os elementos que marcam e definem a estrutura do 
documento, o elemento section é o que possui menor especificidade em 
sua semântica.
Ele pode abrigar os elementos header, article e sua principal função é 
dividir o conteúdo em macro estruturas, em blocos.
§ Exemplo:
Baseado no arquivos index.html/estilo.css você deve colocar os elementos 
na página para que ela fique conforme o modelo abaixo:
index.html/estilo.css