1. Visão geral do HTML5mz.pro.br/marcio/fw1/02_O que e o HTML5.pdf · 1. Visão geral do HTML5 INTRODUÇÃO HTML é a sigla em inglês para Hyper Test Markup Language, que, em português,

1. Visão geral do HTML5

INTRODUÇÃO

HTML é a sigla em inglês para Hyper Test Markup Language, que, em português, significa linguagem para marcação de hipertexto “todo o conteúdo inserido em um documento para a web e que tem como principal característica a possibilidade de se interligar a outros documentos da web.

De acordo com o W3C a Web é baseada em 3 pilares:

Um esquema de nomes para localização de fontes de informação na Web, esse esquema chama-se URI. Um Protocolo de acesso para acessar estas fontes, hoje o HTTP. Uma linguagem de Hypertexto, para a fácil navegação entre as fontes de informação: o HTML.

Vamos nos focar no terceiro pilar, o HTML.

Hypertexto

HTML é uma abreviação de Hypertext Markup Language - Linguagem de Marcação de

Hypertexto. Resumindo em uma frase: o HTML é uma linguagem para publicação de conteúdo (texto,

imagem, vídeo, áudio e etc) na Web.

O HTML é baseado no conceito de Hipertexto. Hipertexto são conjuntos de elementos – ou nós –

ligados por conexões. Estes elementos podem ser palavras, imagens, vídeos, áudio, documentos etc. Estes

elementos conectados formam uma grande rede de informação. Eles não estão conectados linearmente

como se fossem textos de um livro, onde um assunto é ligado ao outro seguidamente. A conexão feita em

um hipertexto é algo imprevisto que permite a comunicação de dados, organizando conhecimentos e

guardando informações relacionadas.

Para distribuir informação de uma maneira global, é necessário haver uma linguagem que seja

entendida universalmente por diversos meios de acesso. O HTML se propõe a ser esta linguagem.

Desenvolvido originalmente por Tim Berners-Lee o HTML ganhou popularidade quando o Mosaic -

browser desenvolvido por Marc Andreessen na década de 1990 - ganhou força. A partir daí,

desenvolvedores e fabricantes de browsers utilizaram o HTML como base, compartilhando as mesmas

convenções.

O começo

Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0, onde foram

propostas diversas mudanças para enriquecer as possibilidades da linguagem. Contudo, até aqui o HTML

ainda não era tratado como um padrão. Apenas em 1997, o grupo de trabalho do W3C responsável por

manter o padrão do código, trabalhou na versão 3.2 da linguagem, fazendo com que ela fosse tratada

como prática comum. Você pode ver: http://www.w3.org/TR/html401/appendix/changes.html.

Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas,

browsers e outros meios de acesso. Interoperabilidade significa menos custo. Você cria apenas um código

HTML e este código pode ser lido por diversos meios, ao invés de versões diferentes para diversos

dispositivos. Dessa forma, evitou-se que a Web fosse desenvolvida em uma base proprietária, com

formatos incompatíveis e limitada.

http://www.w3.org/TR/html401/appendix/changes.html

Por isso o HTML foi desenvolvido para que essa barreira fosse ultrapassada, fazendo com que a

informação publicada por meio deste código fosse acessível por dispositivos e outros meios com

características diferentes, não importando o tamanho da tela, resolução, variação de cor. Dispositivos

próprios para deficientes visuais e auditivos ou dispositivos móveis e portáteis. O HTML deve ser

entendido universalmente, dando a possibilidade para a reutilização dessa informação de acordo com as

limitações de cada meio de acesso.

WHAT Working Group

Enquanto o W3C focava suas atenções para a criação da segunda versão do XHTML, um grupo

chamado Web Hypertext Application Technology Working Group ou WHATWG trabalhava em uma

versão do HTML que trazia mais flexibilidade para a produção de websites e sistemas baseados na web.

O WHATWG (http://www.whatwg.org/) foi fundado por desenvolvedores de empresas como

Mozilla, Apple e Opera em 2004. Eles não estavam felizes com o caminho que a Web tomava e nem com

o rumo dado ao XHTML. Por isso, estas organizações se juntaram para escrever o que seria chamado hoje

de HTML5.

Entre outros assuntos que o WHATWG se focava era Web Forms 2.0 que foi incluído no HTML5

e o Web Controls 1.0 que foi abandonado por enquanto.

Por volta de 2006, o trabalho do WHATWG passou ser conhecido pelo mundo e principalmente

pelo W3C - que até então trabalhavam separadamente - que reconheceu todo o trabalho do grupo. Em

Outubro de 2006, Tim Berners-Lee anunciou que trabalharia juntamente com o WHATWG na produção

do HTML5 em detrimento do XHTML 2. Contudo o XHTML continuaria sendo mantido paralelamente

de acordo comas mudanças causadas no HTML. O grupo que estava cuidando especificamente do

XHTML 2 foi descontinuado em 2009.

O HTML5 e suas mudanças

Quando o HTML4 foi lançado, o W3C alertou os desenvolvedores sobre algumas boas práticas

que deveriam ser seguidas ao produzir códigos client-side. Desde este tempo, assuntos como a separação

da estrutura do código com a formatação e princípios de acessibilidade foram trazidos para discussões e à

atenção dos fabricantes e desenvolvedores.

Contudo, o HTML4 ainda não trazia diferencial real para a semântica do código. o HTML4

também não facilitava a manipulação dos elementos via Javascript ou CSS. Se você quisesse criar um

sistema com a possibilidade de Drag’n Drop de elementos, era necessário criar um grande script, com

bugs e que muitas vezes não funcionavam de acordo em todos os browsers.

O que é o HTML5?

O HTML5 é a nova versão do HTML4. Enquanto o WHATWG define as regras de marcação que

usaremos no HTML5 e no XHTML, eles também definem APIs que formarão a base da arquitetura web.

Essas APIs são conhecidas como DOM Level 0.

Um dos principais objetivos do HTML5 é facilitar a manipulação do elemento possibilitando o

desenvolvedor a modificar as características dos objetos de forma não intrusiva e de maneira que seja

transparente para o usuário final.

http://www.whatwg.org/

Sintaxe

A especificação para o HTML5 define uma sintaxe que é compatível tanto com a HTML

quanto com a XHTML “O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação

da linguagem de marcação HTML, baseada em XML. Combina as tags de marcação HTML com regras

da XML. Este processo de padronização provê a exibição de uma página Web neste formato por diversos

dispositivos (televisão, palm, celular, etc), além da melhoraria da acessibilidade do conteúdo. A principal

diferença entre XHTML e HTML, é que o primeiro é XML válido, enquanto o segundo possui sintaxe

própria. Ambos possuem sentido semântico.”.

Digite o seguinte comando no bloco de notas ou Dreamwever

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html14/loose.dtd">

<html lang="pt-br">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>TÍTULO DA PAGINA</title>

</head>

<body>

<h1>Minha primeira página </h1>

</body>

</html>

DOCTYPE

Esta declaração “tipo de documento” deve ser feita na primeira linha da marcação é para garantir

renderização “é o processo pelo qual pode-se obter o produto final de um processamento digital qualquer.

Este processo aplica-se essencialmente em programas de modelagem 2D e 3D (3ds Max, Maya,

CINEMA 4D, Blender, Adobe Photoshop, Gimp, Corel PhotoPaint, etc.), bem como áudio (Cubase,

Ableton Live, Logic Pro, etc) e vídeo (Adobe Premiere, Sony Vegas, Pinnacle Studio etc).” no modo

standard. Nada deve existir acima da declaração, nem mesmo uma linha em branco.

CODIFICAÇÃO DE CARACTERES

A codificação de caracteres em um documento web pode ser feita de três maneiras distintas:

Com uso de um caractere CHARSET no cabeçalho HTTP Content-Type.

Uso de um caractere Unicode Byte Order Mark (BOM) no início do documento.

Uso do elemento meta com o atributo charset, o usado acima.

O CONJUNTO DE CARACTERES DO DOCUMENTO

O conjunto de caracteres para documentos XML e HTML 4.0 é Unicode (aka ISO 10646). Isto significa

que navegadores HTML e processadores XML comportam-se por padrão (internamente) com uso da

codificação Unicode. Contudo, isto não significa que documentos devam ser transmitidos com a

codificação Unicode. Desde que agentes de usuário e servidores estejam em concordância, pode ser usada

qualquer codificação que possa ser convertida para Unicode. Mais detalhes em document character set.

http://pt.wikipedia.org/wiki/3ds_Max

http://pt.wikipedia.org/wiki/Maya

http://pt.wikipedia.org/wiki/CINEMA_4D

http://pt.wikipedia.org/wiki/Blender

http://pt.wikipedia.org/wiki/Adobe_Photoshop

http://pt.wikipedia.org/wiki/Gimp

http://pt.wikipedia.org/wiki/Corel_PhotoPaint

http://pt.wikipedia.org/wiki/Cubase

http://pt.wikipedia.org/wiki/Ableton_Live

http://pt.wikipedia.org/wiki/Logic_Pro

http://pt.wikipedia.org/wiki/Adobe_Premiere

http://pt.wikipedia.org/wiki/Sony_Vegas

http://pt.wikipedia.org/wiki/Pinnacle_Systems

http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0040

http://www.w3.org/International/questions/qa-doc-charset

DECLARANDO A CODIFICAÇÃO

É muito importante que a codificação de caracteres para qualquer documento XML ou (X)HTML seja

claramente indicada, de modo a que os dispositivos do cliente possam facilmente mapear a codificação

para Unicode. Esta indicação poderá ser feita das seguintes maneiras:

Usar o parâmetro 'charset' no Content-Type do cabeçalho HTTP. Exemplo:

Content-Type: text/html; charset=utf-8

Para que isto funcione você deverá ter acesso às configurações do servidor ou então servir seu

documento via script (para maiores informações ver Setting the HTTP charset parameter).

Em XML (inclusive XHTML), usar o pseudo-atributo para codificação na declaração xml no

ínicio do documento ou a declaração textual no início da entidade. Exemplo:

<?xml version="1.0" encoding="utf-8" ?>

Mas atenção, existem considerações complementares que devem ser levadas em conta quando

você servir XHTML 1.0 como HTML.

Para HTML ou XHTML servidos como HTML, você deve usar sempre a tag <meta> dentro da

seção <head> do documento. Exemplo:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

Em XHTML, você deverá colocar uma barra "/" no final:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

Agora vamos linkar o arquivo CSS com a linha vermelhar e adicionar o arquivo em sua pasta:



<html lang="pt-br">

<head>



<link rel="stylesheet" href="codigos/estilos/main.css">

</head>

<body>


</body>

</html>

http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0270

http://www.w3.org/International/O-HTTP-charset

http://www.w3.org/International/articles/serving-xhtml/#declaration

FOLHAS DE ESTILOS PERSISTENTES

Estas folhas de estilos estão sempre habilitadas (estão sempre "on") e são combinadas com a folha

de estilos ativa. Elas são usadas para compartilhar regras de estilo comuns com as demais folhas de estilo.

Uma folha de estilo é persistente, quando no link colocado no documento o atributo rel é igual a

"stylesheet" e não se define nenhum atributo title.

Para fazer persistente a folha de estilos paul.css, o elemento link a incluir na tag <head> do documento

teria a seguinte sintaxe:

<link rel="stylesheet" type="text/css" href="paul.css" />

HTML (abreviação para a expressão inglesa HyperText Markup Language, que significa Linguagem de

Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web.

Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto da junção entre os

padrões HyTime e SGM e fechar ao final da pagina com </HTML>.

Trata-se de uma forma simples de declarar qual é o idioma do seu site.

Em HTML:

<html lang="pt-br">

Em HTML, a tag <head> é usada como cabeçalho, ou seja, um conjunto de informações de uma página de um site. Se você lembrar bem, cabeçalho é um trecho de um documento que fica no início e fornece informações. Por exemplo, no cabeçalho de uma prova da escola você preenchia seu nome, número, nome do professor, nome da disciplina etc. Na criação de sites, a tag head tem uma função similar: a tag head serve para armazenar informações de uma página de seu site. Essas informações são invisíveis, ou seja, os usuários que estiverem navegando pelo seu website não verão o que existe na tag head. Ora, se ninguém vai ver, qual a função da tag <head> ? Essa tag possui informações que serão importantes para seu navegador e para serviços de busca, como o Google.. Um exemplo de utilidade da tag head para o seu navegador, é para criar um título de uma página, através da tag <title>. O título é exibido na barra superior do seu browser (do lado dos botões de minimar, maximizar e fechar). Já um exemplo de uso da tag head para os navegadores, é o uso das meta-tags, como a meta-tag description, onde fornecemos uma descrição da página (é aquele texto explicativo que aparece nos resultados de busca do Google. (aprenderemos a criar um título e fazer a descrição de uma página de HTML nas próximas seções) Uma outra grande utilidade da tag <head> </head> na criação de um site, é que lá ficam localizados scripts, como de JavaScript. Quando estudarmos CSS em nosso curso, veremos que a tag head também é importante para o CSS.

Tudo o que vemos em um site, estará dentro da tag body. Como o próprio nome sugere, a tag body é que vai definir o corpo de um site. Lá é que estarão as informações visíveis para o usuário. A tag body está aninhada (dentro) da tag <html>, e está no mesmo nível da tag <head>. E assim como estas, possui tag de abertura e fechamento: <body> e </body> Vamos fazer mais um teste:



<html lang="pt-br">

<head>



<link rel="stylesheet" href="codigos/estilos/main.css">

</head>

<body>


OI, isto e um teste

</body>

</html>

accesskey

Atributo de tecla de acesso, destina-se a permitir que o usuário dê o foco ao

elemento com uso do teclado.

Observe o exemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>


<title>Untitled Document</title>

</head>

<body>

<ul>

<li><a href="http://www.ig.com.br" accesskey="a">Site A</a></li>

<li><a href="http://www.ig.com.br" accesskey="b">Site B</a></li>

<li><a href="http://www.ig.com.br" accesskey="c">Site C</a></li>

</ul>

</body>

</html>

Obs: para acionar via teclado, pressione o “Alt” + a tecla solicitada.

No próximo exemplo, se o usuário estiver usando um dispositivo móvel ou outro similar que

possua somente o teclado número, o foco deve ser dado ao se pressionar a tecla 0 e assim sucessivamente:




<head>



</head>

<body>

<ul>

<li><a href="http://www.ig.com.br" accesskey="a 0">Site A</a></li>

<li><a href="http://www.ig.com.br" accesskey="b 1">Site B</a></li>

<li><a href="http://www.ig.com.br" accesskey="c 2">Site C</a></li>

</ul>

</body>

</html>

Na próxima situação o usuário deve prover meios de da o foco aos links para outro site, quando o

usuário pressionar a tecla “alt” + b.




<head>



</head>

<body>

<form action="index_1.html">

<label>Buscar:<input type="busca" name="q" accesskey="b 0" /></label>

<input type="submit" />

</form>

</body>

</html>

contenteditable

Atributo conteúdo editável, este atributo admite os valores true e false e se destina a permitir que o

usuário edite os conteúdos do elemento:




<head>


<title>contenteeditable - index4.html</title>

</head>

<body>

<div contenteditable="true">

<h1> Cabeçalho do nível </h1>

<p>Parágrafo <span>um</span></p>

<p contenteditable="false">Parágrafo dois</p>

<img src="imagens/images5.jpg" alt="imagens muito boa"/>

</div>

</body>

</html>

Obs: agora altera a posição do </p> para este lado

Execute e verifique a diferença.

dir

O atributo direção do texto, destina-se a especificar a direção de escrita do texto. Esse atributo

admite dois valores, a saber: ltr, sigla em inglês para left to right, que traduzirmos por “da esquerda para

direita”, que vem a ser a direção da escrita ocidental, e rtl, sigla em inglês para right to left, que

traduzirmos por “da direita para a esquerda”, que vem a ser a direção da escrita oriental ( por exemplo> o

japonês).




<head>


<title>dir - index5.html</title>

</head>

<body>

<p dir="ltr">Texto com atributo de direção ocidental</p>

<p dir="rtl">Texto com atributo de direção oriental</p>

</body>

</html>

Existe a propriedade CSS direction que cumpre a mesma finalidade desse atributo e admite os

mesmo valores.




<head>


<title>dir - index5.html</title>

</head>

<body>

<p dir="ltr">Texto com atributo de direção ocidental</p>

<p dir="rtl">Texto com atributo de direção oriental</p>

<hr align="left" size="4" width="1260" color="maroon" />

<p style="direction:ltr">Texto com atributo de direção ocidental</p>

<p style="direction:rtl">Texto com atributo de direção oriental</p>

</body>

</html>

Id

O atributo identificador único, destina-se a atribuir um nome identificador para o elemento.

A utilidade desta atributo é identificar um elemento no documento?. Programas, scripts e folhas de estilo

têm a capacidade de se comunicar com a marcação HTML e conseguem selecionar elementos com base

em seu identificador.




<head>


<title>id - index6.html</title>

</head>

<body>

<p id="cor-um">Texto do parágrafo marcado com o identificador cor-um</p>

<p id="cor-dois">Texto do parágrafo marcado com o identificador cor-dois</p>

</body>

</html>

Agora acrescente uma folha de estilo e altera o código como abaixo:




<head>


<link href="HTML5/codigos/estilos/main.css" rel="stylesheet" type="text/css" />

<title>id - index6.html</title>

</head>

<body>

<p id="cor-um" >Texto do parágrafo marcado com o identificador cor-um</p>

<p id="cor-dois">Texto do parágrafo marcado com o identificador cor-dois</p>

</body>

</html>

Na folha de estilo acrescente:

#cor-um {

color:#F00;

}

#cor-dois {

color:#006;

}

Style

Atributo para estilização, destina-se a definir regras de estilo para o elemento em que é aplicado.

Com o uso desse atributo, você pode, por exemplo, aplicar cores, mudar o tamanho das letras,

posicionamentos e praticamente tudo que diga respeito à apresentação visual do conteúdo do elemento em

que o atributo for aplicado.




<head>



<title>style - index7.html</title>

</head>

<body>

<p style="color:red;">Um parágrafo estilizado na cor vermelha</p>

</body>

</html>

Tabindex

Este atributo de tabulação, destina-se a definir uma ordem de tabulação, ou seja, a sequência em

que os elementos receberão o foco quando o usuário navegar com o uso do teclado, tecla “TAB”.




<head>



<title>tabindex - index8.html</title>

</head>

<body>

<p tabindex="5">Paragrafo</p>

<p tabindex="1">Parágrafo</p>

<a href="#" tabindex="4">link</a>

<img src="imagens/images5.jpg" alt="" tabindex="2" />

<h4 tabindex="3">Título 4</h4>

</body>

</html>

Article

Destina-se a marcar um conteúdo autossuficiente em uma página, documento ou aplicação.




<head>



<title>article - index9.html</title>

</head>

<body>

<article>

//Marcação HTML para a matéria do blog

<article>

// Comentário 1

</article>

<article>

// Comentário 2

</article>

</article>

</body>

</html>

Aside

Este atributo destina-se a marcar um conteúdo separado.




<head>



<title>aside - index10.html</title>

</head>

<body>

//Marcação HTML

<article>

//Post 1

</article>

<article>

//Post 2

</article>

<aside>

<nav>

<h1>Categorias</h1>

<ul>

<li><a href="C1">categoria 1</a></li>

<li><a href="C2">categoria 2</a></li>

</ul>

<h1>Blogroll</h1>

<ul>

<li><a href="http://www.ig.com.br">Blog 1</a></li>

<li><a href="http://www.mmhostec.com.br">Blog 2</a></li>

</ul>

</nav>

</aside>

</body>

</html>

Datalist

Esse elemento foi criado para ser usado em conjunto com o elemento INPUT. Destina-se a

fornecer um alista de sugestões para preenchimento do campo INPUT e permite que o usuário selecione

uma das opções de uma lista de opções predefinida como sugestão pelo desenvolvedor ou então entre no

campo um valor diferente daqueles constantes da lista de opções sugeridas. Apenas o Firefox e Opera

oferece suporte para esse elemento.




<head>



<title>menu - index12.html</title>

</head>

<body>

<label for="fru">Fruta preferida:</label><br>

<input type="text" list="frutas" id="fru">

<datalist id="frutas">

<option value="Abacate">

<option value="Abacaxi">

<option value="Banana">

<option value="Mamão">

<option value="Manga">

<option value="Pera">

</datalist>

</body>

</html>

details

Esse elemento destina-se a fornecer informações textuais ou controles de formulário adicionais

sobre determinada página ou sobre um conteúdo específico da página.

O elemento details admite os seguintes atributos: atributos globais e open. O atributo open quando

presente faz com que os conteúdos adicionais sejam colocados à vista quando o elemento é renderizado.

Esse elemento poderá ser usado em conjunto com o elemento sumary.

Sumary

Esse elemento foi criado para uso em conjunto com o elemento details e destina-se a fornecer um

rótulo ou breve sumário das informações adicionais fornecidas por details.

O exemplo a seguir esclare o uso dos elementos details e sumary, mas nenhum navegador atual

oferece suporte para esses elementos. No entanto, existe um plugin jQquery desenvolvido por Mathias

Bynens (HTTP://github.com/mathiasbynens/noSelect0jQuery-Plugin) que simula o comportamento do

navegador para esses elementos.

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<title> Sumary </title>

<link href="../estilos/main.css" rel="stylesheet" type="text/css">



<link type="text/css" rel="stylesheet" href="../estilos/shCore.css">

<link type="text/css" rel="stylesheet" href="../estilos/shThemeDefault.css">

<style>

summary {

text-decoration:underline;

color:red;

}

summary:hover {

text-decoration:none;

cursor:pointer;

}

dl {

border:1px solid #ccc;

padding:5px 10px;

width:400px;

background:#fafafa;

}

</style>



<script src="../scripts/modernizr-1.6.min.js"></script>

<script src="../scripts/shCore.js"></script>

<script src="../scripts/shBrushJScript.js"></script>

<script src="../scripts/shBrushCss.js"></script>

<script src="../scripts/shBrushPhp.js"></script>

<script src="../scripts/shBrushPlain.js"></script>

<script src="../scripts/shBrushXml.js"></script>

<script>SyntaxHighlighter.config.clipboardSwf = "../scripts/clipboard.swf";

SyntaxHighlighter.all();</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>

/*!

* noSelect jQuery Plugin

* @link http://github.com/mathiasbynens/noSelect-jQuery-Plugin

* @author Mathias Bynens <http://mathiasbynens.be/>

*/

(function(a){a.fn.noSelect=function(){function b(){return !1}return

a(this).each(function(){this.onselectstart=this.ondragstart=b;a(this).mousedown(b).css({MozUserSelect:'n

one',WebkitUserSelect:'none',userSelect:'none'})})}})(jQuery);

$(function() {

// Execute the fallback only if there’s no native `details` support

if (!('open' in document.createElement('details'))) {

// Loop through all `details` elements

$('details').each(function() {

// Store a reference to the current `details` element in a variable

var $details = $(this),

// Store a reference to the `summary` element of the current `details` element (if any) in a variable

$detailsSummary = $('summary', $details),

// Do the same for the info within the `details` element

$detailsNotSummary = $details.children(':not(summary)'),

// This will be used later to look for direct child text nodes

$detailsNotSummaryContents = $details.contents(':not(summary)');

// If there is no `summary` in the current `details` element…

if (!$detailsSummary.length) {

// …create one with default text

$detailsSummary = $(document.createElement('summary')).text('Details').prependTo($details);

}

// Look for direct child text nodes

if ($detailsNotSummary.length !== $detailsNotSummaryContents.length) {

// Wrap child text nodes in a `span` element

$detailsNotSummaryContents.filter(function() {

// Only keep the node in the collection if it’s a text node containing more than only whitespace

return (this.nodeType === 3) && (/[^\t\n\r ]/.test(this.data));

}).wrap('<span>');

// There are now no direct child text nodes anymore — they’re wrapped in `span` elements

$detailsNotSummary = $details.children(':not(summary)');

}

// Hide content unless there’s an `open` attribute

if (typeof $details.attr('open') !== 'undefined') {

$details.addClass('open');

$detailsNotSummary.show();

} else {

$detailsNotSummary.hide();

}

// Set the `tabindex` attribute of the `summary` element to 0 to make it keyboard accessible

$detailsSummary.attr('tabindex', 0).click(function() {

// Focus on the `summary` element

$detailsSummary.focus();

// Toggle the `open` attribute of the `details` element

typeof $details.attr('open') !== 'undefined' ? $details.removeAttr('open') : $details.attr('open', 'open');

// Toggle the additional information in the `details` element

$detailsNotSummary.toggle(0);

$details.toggleClass('open');

}).keyup(function(event) {

if (13 === event.keyCode || 32 === event.keyCode) {

// Enter or Space is pressed — trigger the `click` event on the `summary` element

// Opera already seems to trigger the `click` event when Enter is pressed

if (!($.browser.opera && 13 === event.keyCode)) {

event.preventDefault();

$detailsSummary.click();

}

}

});

});

}

});

</script>

</head>

<body>

<div id="tudo">

<header>

<h1>Sumary</h1>

<h2>Elemento details e summary</h2>

<p>Click no texto a seguir</p>

</header>

<section>

<details>

<summary>HTML5</summary>

<h1>

teste de mensagem

</h1>

</details>

</section>

</div>

</body>

</html>

Figcaption

Esse elemento destina-se a marcar uma legenda para o conteúdo inserido com uso do elemento

figure e deve constar da marcação como elemento-filho do elemento figure. Admite apenas os atributos

globais.




<head>



<title>figure</title>

</head>

<body>

<figure>

<img src="imagens/images5.jpg" />

<figcaption>Imagem de redes.</figcaption>

<p><br />Meu canto de Morte,<br />

Guerreioros, ouvi:<br />

nas selvas cresci;<br />

<figcaption>

<cite>I-Juca-Pirama</cite>1<sup>o.</sup>Verso do IV canto de poema.<br /><br />

</figcaption>

<figcaption>Regra CSS para estilização do elemento h1.</figcaption>

<pre><code>h1 {

font:italic 22px sans-serif;

color:red;

text-align:center;

}

</code>

</pre>

</figure>

</body>

</html>

header

Esse elemento destina-se a marcar o cabeçalho de uma seção ou da página como um todo e deve

conter os elementos h1-h6 (não obrigatóriamente).




<head>




</head>

<body>

<header>

<h1>Jogos Online</h1>

<nav>

<ul>

<li><a href="/jogos">Jogos</a>

<li><a href="/forim">Forum</a>

<li><a href="/download">Download</a>

</ul>

</nav>

<h2>Notícias importantes</h2>

<p>Atualize seu software para o jogo so hoje</p>

</header>

</body>

</html>

Hgroup

Esse elemento destina-se a agrupar os elementos h1-h6, quando existir mais de um deles como

cabeçalho de uma seção ou da página. Admite apenas os atributos globais. Uma pagina poderá conter

vários elementos hgroup.




<head>




</head>

<body>

<article>

<header>

<hgroup>

<h2>Jogos Online</h2>

<h3>Notícias importantes</h3>

</hgroup>

<p>Atualize seu software para o jogo so hoje</p>

</header>

</article>

</body>

</html>

Meter

Esse elemento destina-se a marcar uma medida escalar compreendida entre determinados limites

conhecidos. Atualmente os únicos navegadores que suportam esse elemento é o Chrome e o Opera.




<head>




</head>

<body>

<meter value="0.7"></meter><br /><br />

<meter value="8" min="2" max="20"></meter><br /><br />

<meter value="9" min="0" max="10" low="4" high="8" optium="10"></meter><br /><br />

<meter value="7" min="0" max="10"> 7 pontos em 10 possíveis</meter>

</body>

</html>

Nav

Esse elemento destina-se a marcar uma seção da página que contenha links para outras páginas ou para

outras partes dentro da própria página, ou seja, uma seção contendo links para navegação externa ou

interna.




<head>




</head>

<body>

<nav>

<ul>

<li><a href="/">Home</a></li>

<li><a href="/Codigos">Códigos dos exemplos</a></li>

</ul>

</nav>

</body>

</html>

Output

Esse elemento destina-se a servir de container para o resultado de um calculo.




<head>

<script type="text/javascript">

function calculaValorTotal(){

var qdeItens = document.forms['formulario']['qde'].value;

var valorTotal = (qdeItens * 320).toFixed(2);

document.forms['formulario']['vtotal'].value = valorTotal;

}

window.onload = function(){

document.forms['formulario']['qde'].onblur = calculaValorTotal;

}

</script>




</head>

<body>

<p> Preço unitário do produto: R$320,00</p>

<form name="formulario" method="get" action="">

<p><label>Quantidade:<input type="text" name="qde" /></label></p>

<p>Valor total:R$<output name="vtotal"></output></p>

</form>

</body>

</html>

video

Este elemento destina-se a incorporar um vídeo ou filme.




<head>



</head>

<body>

<video width="426" height="240">

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">

<object width="426" height="240">

<param name="movie" value="http://www.youtube.com/v/-TdbsZg6CC4"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>

<embed src="http://www.youtube.com/v/-TdbsZg6CC4"

type="application/x-shockwave-flash"

allowscriptaccess="always"

allowfullscreen="true"

width="426"

height="240">

</embed>

</object>

</video>

</body>

</html>

Também temos a opção de servidor navegadores que não suportam qualquer marcação para inserção de

som como demonstrado abaixo:




<head>



</head>

<body>

<source src="video/video de php feito pelo aluno CAUAN.mp4" type="video/mp4"/>

<br />Faça <a href="video/video de php feito pelo aluno CAUAN.mp4"> Download do video</a>

</body>

</html>

Este atributo destina-se a iniciar o vídeo automaticamente, tão logo a página seja carregada e a repetir o

vídeo indefinidamente.




<head>



</head>

<body>

<video autoplay="autoplay">



</video>

</body>

</html>

A presença do atributo controls faz com que o navegador renderize uma barra de controle nativa contendo

botões do tipo play e pause bem como controle de volume.




<head>



</head>

<body>

<video controls="controls" >



</video>

</body>

</html>

Atributo poster.




<head>



</head>

<body>

<video poster="imagens/images5.jpg" controls muted>



</video>

</body>

</html>

placeholder

Este atributo é para uso exclusivo com os elementos input e textarea e destina-se a definir uma

dica (palavra ou frase curta) de preenchimento do campo.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<head>



</head>

<body>

<p><label>E-mail:<br /><input type="email" name="email"

placeholder="[email protected]" /></label>

</body>

</html>

autofocus

Este atributo destina-se a definir em qual elemento deve ser dado o foco tão logo a página seja carregada.

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<head>



</head>

<body>



<p><label>Nome:<br /><input type="text" autofocus></label></p>

</body>

</html>

required

Este atributo é para uso exclusivo com os elementos input, select e textarea e destina-se a marcar

um controle de formulário como sendo de preenchimento obrigatório.




<head>



</head>

<body>

<form method="get" action="">




<p><label for="x">Observe a barra de endereço:</label><input id="x" type=text required

name=x />

<input type=submit value="OK" ></p>

</form>

</body>

</html>

autocomplete

Alguns navegadores atuais implementam de forma variada uma funcionalidade que consiste em

sugerir uma lista de opções para preenchimento de um controle de formulário, este elemento desabilita o

autopreenchimento do elemento.




<head>



</head>

<body>

<form method="get" action="">




<p><label for="x">Observe a barra de endereço:</label><input id="x" type=text required

autocomplete=off name=x />

<input type=submit value="OK" ></p>

</form>

</body>

</html>

max Este atributo destina-se a definir um valor máximo e mínimo de entrada de dados. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form method="get" action=""> <p><label>Nome:<input type="text" name="nome"></label></p> <p><label>E-mail:<input type="text" name="email" ></label></p> <p><label>Mensagem:<textarea name="msg" ></textarea></label></p> <p><label>Quantidade:<input name="quantidade" required type="number" min="10" max="20" value="15" /> <p><input type="submit" name="enviar" value="enviar" ></p> </form> </body> </html> pattern Este atributo é para uso exclusivo com o elemento input e destina-se a definir uma expressão regular (um padrão) com a qual o valor entrado em um campo de formulário deve ser comparado. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form method="get" action=""> <p><label>Nome:<input type="text" name="nome"></label></p> <p><label>E-mail:<input type="text" name="email" ></label></p> <p><label>Mensagem:<textarea name="msg" ></textarea></label></p> <p><label>Quantidade:<input name="quantidade" required type="number" min="10" max="20" value="15" />

<input type="text" pattern="[0-9]{5}-[0-9]{3}" name="cep" title="Um Cep é constituído de 5 números um traço e mais 3 números."/> <p><input type="submit" name="enviar" value="enviar" ></p> </form> </body> </html> reversed Este atributo é para uso exclusivo com o elemento ol e destina-se a definir uma contagem descendente para o marcador da lista ordenada. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <form method="get" action=""> <p><label>Nome:<input type="text" name="nome"></label></p> <p><label>E-mail:<input type="text" name="email" </label></p> <p><label>Mensagem:<textarea name="msg" ></textarea></label></p> <p><label>Quantidade:<input name="quantidade" required type="number" min="10" max="20" value="15" /> <input type="text" pattern="[0-9]{5}-[0-9]{3}" name="cep" title="Um Cep é constituído de 5 números um traço e mais 3 números."/> <p><input type="submit" name="enviar" value="enviar" ></p> <ol reversed> <li>Maça</li> <li>Pera</li> </ol> </form> </body> </html>

Documents

1. Visão geral do HTML5mz.pro.br/marcio/fw1/02_O que e o HTML5.pdf · 1. Visão geral do HTML5 INTRODUÇÃO HTML é a sigla em inglês para Hyper Test Markup Language, que, em português,