Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML 5 TAGS ESTRUTURAIS Prof. Rosemary Melo
2
TAGS ESTRUTURAIS DO HTML 5
COMUNS <HTML> <head> - Representa uma coleção de metadados. Neste elemento, são carregadas as informações referentes ao documento, como, por exemplo, comandos CSS e Javascript. <title> - Localizado dentro do <head>, representa o título do documento. <body> - Localizado no mesmo nível do <head>, este elemento representa o conteúdo principal da página. Aqui, estão localizados todos os comandos necessários à criação do documento HTML.
3
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <SECTION> representa uma seção genérica dentro de um documento. Usado quando se deseja dar um significado semântico a um contéudo de uma página e não só estilização independente. pode conter um agrupamento de textos com vários capítulos, seções numeradas etc. pode-se ter n seções dentro de uma página
4
TAG <SECTION> Exemplo: o exemplo abaixo apresenta um artigo contendo um assunto principal, e dentro desse várias seções com assuntos distintos. <body> <article> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p> O curso de html é muito importante </p> <section> <h1>O HTML 5 </h1> <p>Surgimento do html 5</p> </section> <h1>Tags h1</h1> <p>Comandos de criação de páginas</p> </article> </body>
5
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <ARTICLE> representa uma composição independente em um documento, página, aplicação, ou site, ou que é destinado a ser distribuído de forma independente ou reutilizável. Ex.: artigo de revista ou jornal, post de um fórum ou blog, um comentário enviado por usuário, ou qualquer outra forma de conteúdo independente. um artigo pode está dentro de uma seção ou não. Imagine um jornal com as seções de esportes, fofocas etc. Dentro de cada seção existem vários artigos sobre textos específicos, por exemplo, na seção de esportes pode ter um artigo falando sobre o time A, outro sobre time B e o outro sobre o time C. Um artigo pode conter um elemento <header> que é o título e um elemento <footer> que representa o rodapé.
6
TAG <ARTICLE> Exemplo: <!DOCTYPE html>
<html lang="pt-br"> <head> <meta charset="utf-8"/ <title>Entendendo a estrutura e semântica do HTML5</title> </head> <body> <article> <header> <h1>Nova Vitória !</h1> </header> <p>O time A ganhou novamente, se continuar assim será líder do campeonato...</p> <p>...</p> <footer> <a href="?comments=1">Comentários</a> </footer> </article> </body> </html>
7
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <HEADER> utilizado para delimitar o título da seção não é obrigatório. <FOOTER> este comando contém, basicamente, as informações sobre o conteúdo da seção, como por exemplo o autor, links relacionados, etc.
8
TAGS <HEADER> E <FOOTER>
Exemplo: <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"/ <title>Entendendo a estrutura e semântica do HTML5</title> </head> <body> <article> <header> <h1>Nova Vitória !</h1> <p><time pubdate datetime=" T14:28-08:00"></time></p> </header> <p>O time A ganhou novamente, se continuar assim será líder do campeonato...</p> <p>...</p> <footer> <a href="?comments=1">Comentários</a> </footer> </article> </body> </html>
9
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <HGROUP> também usado para delimitar o título da seção.
10
TAG <HGROUP> <!DOCTYPE html> <html lang="pt-br">
<head> <meta charset="utf-8"/> <title>Entendendo a estrutura e semântica do HTML5</title> </head> <body> <article> <hgroup> <h1>Livro sobre HTML</h1> <h2>Como criar uma página </h2> </hgroup> <p> O curso de html é muito importante </p> <section> <h1>O HTML 5 </h1> <p>Surgimento do html 5</p> </section> <h1>Tags h1</h1> <p>Comandos de criação de páginas</p> </article> </body> </html>
11
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <NAV> onde fica as informações de navegação da página. neste comando são colocados geralmente as ligações (links internos) para a própria página ou ligações externas para outras páginas de sites externos.
12
TAG <NAV> Exemplo: <!DOCTYPE html>
<html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Entendendo a estrutura e semântica do HTML5</title> </head> <body> <header> <nav> <h1>Menu Principal</h1> <ul> <li><a href="articles.html">índice de artigos</a></li> <li><a href=" Site da Estácio</a></li> </ul> </nav> </header> </body> </html>
13
TAGS ESTRUTURAIS DO HTML 5
ESPECÍFICOS <ASIDE> Neste comando estão contidas as informações que não estão relacionadas diretamente com o texto. Como exemplo: comerciais pagos, links promocionais etc.
14
TAG <ASIDE> Exemplo: <!DOCTYPE html>
<html lang="pt-br"> <head> <meta charset="utf-8"/> <title>Entendendo a estrutura e semântica do HTML5</title> </head> <body> <aside> <h1>Tenha uma graduação !!! </h1> <p><a href=“ Estude na estácio</a></p> </aside> </body> </html>
Apresentações semelhantes
