Wrapper
Centralização da página na tela
HEADER

CABEÇALHO

Logo,nome de projeto,participe,busca,melhorias,documentação
MAIN
Nome do conjunto (tópico)
SECTION

Lead do Tópico

mini resumo, chamada da noticia
ARTICLE1

Elemento 1

Nome do elemento do conjunto (Id)
texto, dados tabulares, imagens, som, video
ARTICLE2

Elemento 2

Sintaxes
Html5 = {elemento}
elemento = <nomeelemento [atributo="valor" [/]] [areainfluencia] [/]> </nomeelemento>

css: seletor { propriedade: valor; }
seletor: elementoHtml propriedade: atributoHtml valor: caracteristicaPropriedade

jQuery: $("seletor").metodojQuery
seletor= tag|class|id
ARTICLE3

Elemento 3

Tecnologias
texto, dados tabulares, imagens, som, video
http://www.phillyfilemaker.org/wp-content/uploads/2012/01/120px-HTML5-logo.svg_.png
HTML5
jQuery
CSS
JS
Tecnologias
ARTICLE4

Elemento 4

Formulário para entrada do conteudo:
`
Html5` `
Conteudo` `
Article` `
Elemento`
` `
Elemento`
`
` `
` `
` `
`
ARTICLE5

Elemento 5

Comportamento (clicar para sumir / aparecer)
                                                           Html5Semantica.jpg
ARTICLE6

Elemento 6

Página dinamica

Problema resolvido

Visualização das tag's html5 com tamplate preenchido com dados, podendo ser usado como vários arcabouços correspondentes a diferente partes de uma pagina.
Ex: Header, Nav, Seção, Article ,Aside ,Figure ,Figcaption ,Footer ,detalhes ,Summary ,Marca ,Time
Cada elemento (Header,Nav,section,...) pode ser um conjunto com os mesmos elementos. É como cada elementos tivesse contido os outos elementos, inclusive êle mesmo. O relacionamento entre os elementos é de muitos(n) para muitos(n). Veja em W3C

Pagina - Estrutura semantica html5 (imagem)


Estruturação (Html sem CSS)          Apresentação (Html com CSS)                Comportamento (clique para apagar)                Conteudo ou dado
      Html5SemanticaSemCss.jpg                   Html5Semantica.jpg           Html5Semantica.jpg                 Html5SemanticaDado.jpg      

Estrutura semantica html5

Fontes de consulta html5-> -> -> -> -> ->

Contexto: Camadas de desenvolvimento documentos na Web

Estruturação - Html5 (.html) Apresentação - CSS (.css) Comportamento - javascript (.js)

Design:

Design Adaptavel-> Animações->

Critério para saber se o navegador esta interpretando Html5

Simbolos léxico (alfabeto, token) HTML5

a b c d e f g h i j l m n o p q r s t u v x z & ; > <
ver tabela de caracteres reservados html ISO 8959-1 http://codex.wordpress.org/pt-br:HTML_ISO-8859-1

Expressão da sintaxe do HTML5

Definição do Html5 - linguagem para estruturar um conjunto de informação (documento tipo html)

Html5 = {elemento}
elemento = <nomeelemento [atributo="valor" [/]] [areainfluencia] [/]> </nomeelemento>

areainfluencia= texto | elemento
< = tag inicio
> = tag de fim
/ = fechamento de um elemento nomeelemento = tag | evento
atributo = ver http://www.w3c.br/cursos/html5/conteudo/capitulo5.html
valor = ver http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf texto = alfabeto / codformatacao
codformatacao = branco: & n b s p ; maior: & g t ; menor: & l t ;
comentário = <!--texto--> declaração = <!--doc type html>

Nomenlatura:
 
			    [ ] = [opcional] 

			    | = ou  

			    { } = { conjunto } 

			    * = repetição

Codigo html da página Html

Clicar com o lado direito do mouse e ver Page Source ou view-source:http://nome da pagina.html ou :file:///caminho (Mac)

Geração de página dinamica

Veja página http://www.apoie.org/Aprendizado.html -> 
					<script src="DefinirTela.js"></script>
					<link rel="stylesheet" href="DefinirEstilo.css">
					<body onload="DesenharTela();">
					 <script src="ObterDadosTela.js"></script>
					 <script src="ExecutarFuncaoTela.js"></script>