HTML 5 - Webnode.com.br€¦ · 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

HTML 5TAGS 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 poruma tag de início (exemplo: <html>) e uma de fim (exemplo:</html>).

Estrutura básica do HTML5

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8"/>

<title>Entendendo a estrutura e semântica do HTML5</title>

</head>

<body>

<p>Olá mundo !</p>

</body>

</html>

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

cab

eça

lho

corp

o



TAG <DOCTYPE>

Indica o tipo de documento que será aberto.

TAG <head>

Área só de informação para a página, não é vista pelousuá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


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 JavaScript”;

}

</script>

muito usado para validação do formulário


Comandos encontrados no <head> :

TAG <meta> serve para informar o navegador que vai renderizar sua página o que eledeve fazer.deve colocar os comandos <meta> separados para cada coisa para onavegador 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 deconteú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ânticaapropriada para cada uma dessas divisões.

Os desenvolvedores acabavam usando a tag <div> para todas as situações, ecriando seus próprios padrões de nomeclaturas através dosatributos id ou class.

No HTML5 foram criadas diversas tags semânticas para indicar quais conteúdosestão sendo inseridos em cada uma das divisão da página, organizando epadronizando o desenvolvimento.


NOVOS ELEMENTOS DE ESTRUTURA (RESUMO)

são como se fosse <div> destinadas a uma determinada tarefautilizados no html 4.

foco na semântica (significado do comando) de modo que onavegador entenda a que se refere cada conteúdo da página.

visa facilitar o mecanismo de busca para que possa identificar oque é o quê na página html.


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 omenu principal do site ou links relacionados ao conteúdo dapágina)

<aside> - conteúdo relacionado ao artigo (igual aos arquivos eposts relacionados a um blog).

TAGS ESTRUTURAIS DO HTML 5 – NOVOS ELEMENTOS

TAGS ESTRUTURAIS DO HTML 5 – NOVOS ELEMENTOS


ESPECÍFICOS

<SECTION>

representa uma seção genérica dentro de um documento.

Usado quando se deseja dar um significado semântico a umconté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 comassuntos 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>


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 formaindependente ou reutilizável.

Ex.: artigo de revista ou jornal, post de um fórum ou blog, um comentárioenviado 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 cadaseção existem vários artigos sobre textos específicos, por exemplo, na seçãode esportes pode ter um artigo falando sobre o time A, outro sobre time B eo outro sobre o time C.

Um artigo pode conter um elemento <header> que é o título e umelemento <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>


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 oconteú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>...</p> <footer>

<a href="?comments=1">Comentários</a> </footer>

</article></body>

</html>


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>


ESPECÍFICOS

<NAV>

onde fica as informações de navegação da página.

neste comando são colocados geralmente as ligações (linksinternos) para a própria página ou ligações externas para outraspá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>


ESPECÍFICOS

<ASIDE>

Neste comando estão contidas as informações que não estãorelacionadas 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>...</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>

Documents

HTML 5 - Webnode.com.br€¦ · 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