Embed Size (px)
Citation preview
Curso de HTML
Por: Dorival Silva
Aula 02
O que é novo HTML 5?
A declaração simplificada DOCTYPE:
<!DOCTYPE html>
A codificação de caracteres (charset) simples:
<meta charset=“UTF-8”>
Exemplo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Título do documento</title> </head>
<body>Conteúdo do documento…
</body>
</html>
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>.
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.
Elementos Semânticos
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>
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>
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>
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>
Praticando - <footer><!DOCTYPE html>
<html>
<body>
<footer>
<p>Por: "seu nome aqui"</p>
<p>Informações: <a href="mailto:[email protected]">
[email protected]</a>.</p>
</footer>
</body>
</html>
Exercício – About-meCrie um página pessoal
Desenvolver um documento aplicando as tags apresentadas anteriormente.
