Curso HTML 5 - Construindo um Layout
0 gostou593 visualizações
O documento discute as novas tags de seção do HTML5 como <section>, <article> e <nav> para estruturar semanticamente o conteúdo da página. Também explica a diferença entre elementos de bloco como <p> e <div> e elementos de linha, além de revisar outros elementos como <table>, <ol> e <ul> para organizar dados e listas.
Curso HTML 5 - Construindo um Layout
- 2. • Seccionando um Layout – Novas (e não tão novas) tags de seção. – Classe dos Elementos de estruturação. • Elementos de Bloco. • Elementos de Linha. – Tabelas, listas e outras tags de bloco. – Hierarquias e validação.
- 3. • Livros: – HTML5 - Curso W3C Escritório Brasil. Elcio Ferreira e Diego Eis; – Smashing HTML5. Bill Sanders; • Apêndices: – Comparação de Elementos Válidos por DOCTYPE. – Lista de Atributos de Tags. – Lista de Eventos e Métodos de Audio e Video. – Lista de Eventos. – Lista de Métodos e Propriedades da Tag Canvas. – Lista de Tags. • Lista de Exercícios
- 4. • Layout – Organização da disposição do conteúdo de um documento web. Estruturação sistemática das tags HTML. • Itens para considerar: – Validação da Hierarquia proposta. • Compatibilidade, visibilidade de buscadores, etc. – Semântica das tags empregadas. – Usabilidade da aplicação.
- 5. • Regras desde as versões anteriores. – HTML 4.1, XHTML, etc. • Por que? – Padronização da Redenrização. – Semântica. • Como saber se o documento respeita as regras? – http://validator.w3.org/
- 6. • Elementos de Linha – Usados, na maioria, para de marcação de texto. No entanto elementos de formulário e links também são elementos de linha. • Elementos de Bloco – Marcam, na maioria, seções do layout do documento. “Caixas” que dividem e o conteúdo. • Observação: Sem o tratamento com as CSS fica um pouco mais difícil de perceber a divisão e o “porque” de dividir.
- 7. • Algumas regras óbvias de validação: – Elementos linha não podem ter elementos de bloco como filhos, por exemplo: • <a href=“index.html><p>que lindo!</p></a> – Toda tag aberta, deve ser fechada. Cuidado com a regra acima. – Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.
- 8. • Elementos de bloco sempre podem conter elementos de linha. • Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo - p - não pode conter um div. Mas o contrário é possível. • Como saber mais sobre essas regras? Teste o código! – http://validator.w3.org/
- 9. • Porque usar os novos elementos de seção? – Section, article, nav, etc. • Como era feito antes? – “Sopa de divs” • Código sem semântica. • E antes do antes? – Divisão feita com tabelas. • Exportação do Fireworks para o Dreamweaver.
- 10. • <div> – Divisão - division - do layout (se lembra? Tag antiga), elemento de bloco, não traz implícito qual é de fato o setor do layout que pretende-se seccionar. – Pode-se utilizar, no entanto é mais interessante dar preferência para as tags adequadas da nova implementação do HTML.
- 11. • <p> – Elemento de bloco que deve ser utilizado para estruturação de textos. Cada elemento p estrutura um parágrafo do texto. – O elemento p também é utilizado na estruturação de formulários, veremos na próxima aula.
- 12. • Funções específicas: – Tratamento adequado da informação. – Adivinhe? Semântica. – Padronização da estruturação dos documentos. • Problemas irritantes: – Browsers incompatíveis. – Uso inadequado. – Problemas com DOM (no JavaScript).
- 13. • <section> – A tag section define uma nova seção genérica no documento. Por exemplo, a home de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, informação de contato e chamadas para conteúdo interno.
- 14. • <nav> – O elemento nav representa uma seção da página que contém links para outras partes do website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são colocados no rodapé e também para compor o menu principal do site.
- 15. • <article> – O elemento article representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs por exemplo. Isto pode ser um post, artigo, um bloco de comentários de usuários ou apenas um bloco de texto comum.
- 16. • <aside> – O elemento aside representa um bloco de conteúdo que referência o conteúdo que envolta do elemento aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados do conteúdo principal do website.
- 17. • <header> – O elemento header representa um grupo de introdução ou elementos de navegação. O elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até mesmo logos
- 18. • <footer> – O elemento footer representa literalmente o rodapé da página. Seria o último elemento do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer necessariamente no final de uma seção.
- 19. • <table> – Apenas para dados tabulares. – Container para abrigar as outras estruturas tabulares providas por outras tags.
- 20. • <thead> – Cabeçalho da tabela. • <th> – Célula do cabeçalho. • <tbody> – Corpo dos dado da tabela. • <tr> – Linha da tabela. • <td> – Celula dos dados da tabela. • <tfooter> – Rodapé da tabela.
- 21. • Lista Ordenada: • <ol> • Lista Não Ordenada: • <ul> • Itens da lista: • <li>
- 22. • Muito! • Formulários. • Objetos. • Elementos incorporados. • Frames. • Imagens. • Conteúdo Multimídia.