HTML 5 TAGS BÁSICAS E ESTRUTURAIS Prof. Rosemary Melo
TAGS BÁSICAS DA LINGUAGEM TAG <html> Indica que está criando uma página html TAG <head> Área contém informação sobre a página TAG <body> especifica o conteúdo da página Obs.: Quase todas as tags em html é representada no código por uma tag de início (exemplo: <html>) e uma de fim (exemplo: </html>).
corpo cabeçalho TAGS BÁSICAS DA LINGUAGEM Estrutura básica do HTML5 <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"/> Informa ao navegador que tem que renderizar uma página html Informa o tipo de linguagem vai usar no html Informa que tipo de caracter vai ser usado na tela <title>entendendo a estrutura e semântica do HTML5</title> </head> <body> <p>olá mundo!</p> </body> </html>
TAGS BÁSICAS DA LINGUAGEM TAG <DOCTYPE> Indica o tipo de documento que será aberto. TAG <head> Área só de informação para a página, usuário Tudo que é especifico fica nesta área Serve para informar o título da página Apresenta as informações meta Informar se tem código JavaScript e CSS não é vista pelo
TAGS BÁSICAS DA LINGUAGEM Comandos encontrados no <head> : Definição de cabeçalho <title> representa o título do documento </title> Ligação com arquivos CSS externos <link rel= stylesheet href= mystyle.css > Traz código do css para dentro do html Definição de Metas <meta charset="utf-8"/> Comando para chamada de rotinas em JavaScript <script> function myfunction { document.getelementbyid( demo ).innerhtml= Hello } </script> muito usado para validação do formulário JavaScript ;
TAGS BÁSICAS DA LINGUAGEM Comandos encontrados no <head> : TAG <meta> serve para informar o navegador que vai renderizar sua página o que ele deve fazer. deve colocar os comandos <meta> separados para cada coisa para o navegador renderizar a página mais rápido. EXEMPLO DE TAGs <meta> <head> <meta charset="utf-8"/> <meta name= description content= Páginas para alunos da Estácio /> <meta name= keywords content= HTML,CSS,XML,JAVA SCRIPT /> <meta name= author content= João Silva > <meta http-equiv= refresh content= 30 > </head> Dica: usar aplicativos da web que definem como montar meta Como montar meta para página na web?
TAGS ESTRUTURAIS DO HTML 5 A semântica das novas marcações do HTML5 Em todas as páginas da Web existem divisões básicas referentes aos tipos de conteúdo que são colocados em cada parte do layout, como cabeçalho, rodapé ou menu de navegação. Nas versões anteriores do HTML não haviam tags com uma semântica apropriada para cada uma dessas divisões. Os desenvolvedores acabavam usando a tag <div> para todas as situações, e criando seus próprios padrões de nomeclaturas através dos atributos id ou class. No HTML5 foram criadas diversas tags semânticas para indicar quais conteúdos estão sendo inseridos em cada uma das divisão da página, organizando e padronizando o desenvolvimento.
TAGS ESTRUTURAIS DO HTML 5 NOVOS ELEMENTOS DE ESTRUTURA (RESUMO) são como se fosse <div> destinadas a uma determinada tarefa utilizados no html 4. foco na semântica (significado do comando) de modo que o navegador entenda a que se refere cada conteúdo da página. visa facilitar o mecanismo de busca para que possa identificar o que é o quê na página html.
TAGS ESTRUTURAIS DO HTML 5 NOVOS ELEMENTOS DE ESTRUTURA <header> - cabeçalho da página ou seção (não confundir com o <head>) <footer> - rodapé da página ou seção <section> - seção do conteúdo <article> - um item dentro da página ou seção <nav> - conjunto de links que formam a navegação (pode ser o menu principal do site ou links relacionados ao conteúdo da página) <aside> - conteúdo relacionado ao artigo (igual aos arquivos e posts relacionados a um blog).
TAGS ESTRUTURAIS DO HTML 5 NOVOS ELEMENTOS
TAGS ESTRUTURAIS DO HTML 5 NOVOS ELEMENTOS
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
TAG <SECTION> Exemplo: o exemplo abaixo várias contém várias seções com assuntos distintos <body> <section> <h1>o HTML 5 </h1> <p>surgimento do html 5</p> </section> <section> <h1>tags h1</h1> <p>comandos de criação de páginas</p> </section> </body>
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é.
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>
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.
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> </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>
TAGS ESTRUTURAIS DO HTML 5 ESPECÍFICOS <HGROUP> também usado para delimitar o título da seção.
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> <section> <h1>tags h1</h1> <p>comandos de criação de páginas</p> </section> </article> </body> </html>
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.
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="http://www.estacio.br"> Site da Estácio</a></li> </ul> </nav> </header> </body> </html>
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.
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= http://www.estacio.br > Estude na estácio</a></p> </aside> </body> </html>
Exemplo: Estrutura 1 <body> <header> <h1>aula de HTML5 </h1> </header> <nav> <h1>menu Principal</h1> <ul> <li><a href="articles.html">índice de artigos</a></li> <li><a href="http://www.estacio.br"> Site da Estácio</a></li> </ul> </nav>... Continuação próxima página
Exemplo: Estrutura 1... <section> <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> </section> <aside> <h1>tenha uma graduação!!! </h1> <p><a href= http://www.estacio.br > Estude na estácio</a></p> </aside> </body>