Aula2 - Elementos Semânticos
Transferir como PPT, PDF5 gostaram1,102 visualizações
O documento discute as novidades do HTML5, incluindo declarações simplificadas, codificação de caracteres e novos elementos semânticos como <header>, <footer>, <article> e <section>. Exemplos demonstram o uso desses elementos semânticos para melhor descrever o significado do conteúdo.
Aula2 - Elementos Semânticos
- 1. Curso de HTML Por: Dorival Silva Aula 02
- 2. O que é novo HTML 5? A declaração simplificada DOCTYPE: <!DOCTYPE html> A codificação de caracteres (charset) simples: <meta charset=“UTF-8”>
- 3. Exemplo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título do documento</title> </head> <body> Conteúdo do documento… </body> </html>
- 4. Novos Elementos Os mais interessantes são: Semânticas: <header>, <footer>, <article> e <section>. Controles: número, data, hora, calendário e alcance. Gráficos: <svg> e <canvas>. Multimídia: <video> e <audio>.
- 5. Elementos Semânticos? São chamados de elementos semânticos aqueles que descrevem claramente seu significado, tanto para o desenvolvedor como para o navegador. Elementos semânticos são elementos com um significado.
- 7. Praticando - <header> <!DOCTYPE html> <html> <body> <article> <header> <h1>Elementos Semânticos</h1> <p>Exemplos</p> </header> <p>Este é um exemplo do uso de elementos semânticos em HTML 5</p> </article> </body> </html>
- 8. Praticando - <nav> <!DOCTYPE html> <html> <body> <nav> <a href="#">HOME</a> | <a href="#">EMPRESA</a> | <a href="#">PRODUTOS</a> | <a href="#">CONTATO</a> </nav> </body> </html>
- 9. Praticando - <article> <!DOCTYPE html> <html> <body> <article> <h1>Meu primeiro artigo</h1> <p>Aqui é inserido o artigo. Tem a função de pode lê-lo de forma independente do site.</p> </article> </body> </html>
- 10. Praticando - <aside> <!DOCTYPE html> <html> <body> <p>Aplicando elementos semânticos</p> <aside> <h4>Barra Lateral</h4> <p>O conteúdo de lado de ser relacionado ao conteúdo em sua volta</p> </aside> </body> </html>
- 11. Praticando - <footer> <!DOCTYPE html> <html> <body> <footer> <p>Por: "seu nome aqui"</p> <p>Informações: <a href="mailto:digiteseu@emailaqui.com"> digiteseu@emailaqui.com</a>.</p> </footer> </body> </html>
- 12. Exercício – About-me Crie um página pessoal Desenvolver um documento aplicando as tags apresentadas anteriormente.