html5

Prévia do material em texto

HTML 5 
 
HTML5 
2 
 
Todos os direitos reservados para Alfamídia Prow 
 
AVISO DE RESPONSABILIDADE 
As informações contidas neste material de treinamento são distribuídas “NO ESTADO 
EM QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora 
todas as precauções tenham sido tomadas na preparação deste material, a Alfamídia 
Prow não tem qualquer responsabilidade sobre qualquer pessoa ou entidade com 
respeito à responsabilidade, perda ou danos causados, ou alegadamente causados, direta 
ou indiretamente, pelas instruções contidas neste material ou pelo software de 
computador e produtos de hardware aqui descritos. 
 
 
09/2012 – Versão 1.0 
 
 
Alfamídia Prow 
http://www.alfamidia.com.br 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
HTML5 
3 
 
Sumário 
Capítulo 1 – Visão geral do HTML5 ................................................................. 4 
Capítulo 2 – Análise do suporte atual pelos navegadores .................................. 5 
Capítulo 3 – Estrutura básica, DOCTYPE e charsets ........................................ 6 
Capítulo 4 – Modelos de conteúdo ..................................................................... 8 
Categorias .................................................................................................................................. 8 
Capítulo 5 – Novos elementos e atributos ....................................................... 15 
Capítulo 6 – Elementos modificados e ausentes .............................................. 21 
Capítulo 7 – Elementos áudio e vídeo, e codecs .............................................. 22 
Vídeo ....................................................................................................................................... 22 
Codecs ..................................................................................................................................... 23 
Capítulo 7 – Menus e toolbars ......................................................................... 24 
Capítulo 8 – Tipos de links .............................................................................. 25 
Metadados de navegação ......................................................................................................... 25 
Metadados da página ............................................................................................................... 26 
Comportamento dos links na página ....................................................................................... 26 
Capítulo 8 – Introdução ao CSS3 ..................................................................... 27 
Seletores complexos ................................................................................................................ 27 
 
HTML5 
4 
 
Capítulo 1 – Visão geral do HTML5 
A web atualmente é um dos maiores repositórios de documentos abertos que a humanidade 
conseguiu produzir até o momento. Tim Berners-Lee criou o HTML com a missão de melhorar 
a comunicação entre seu grupo de colegas e facilitar a disseminação de pesquisas. Solução que 
em pouco tempo ganhou a atenção mundial. 
Desde o começo o HTML foi criado para ser uma linguagem independente de plataformas e 
dispositivos, buscando um acesso universal. A ideologia é que o desenvolvedor criasse uma 
codificação HTML e esse código seria interpretado por diversos dispositivos, ao invés de criar 
uma versão para cada aparelho. O Termo ideológico seria a “Interoperabilidade”. 
Desde sua primeira aparição, até a versão mais utilizada atualmente (HTML4), a linguagem 
recebeu significativas atualizações, ganhando forma, cores e funções que deixaram a internet 
mais atrativa. 
Sem atualizações nos últimos dez anos, apenas com uma reformulação, o XHTML, trazendo um 
processo de padronização visando a exibição das paginas web em dispositivos, como 
televisores, celulares e etc. Sempre com um ponto fundamental, a acessibilidade. Necessitando 
upgrades, a W3C estava focada em criar a segunda versão do XHTML, porem um grupo 
chamado WHATWG fundado em 2004 por desenvolvedores de empresas como Apple, Mozilla 
e Opera, achavam que o XHTML não seria uma boa solução. Com a união da W3C e 
WHATWG, surgiu o HTML5. Vista o quanto seria valioso esse novo projeto, até mesmo o 
criador do HTML, Tim Berners-Lee anuncio que colaboraria com o projeto. 
Considerada não apenas uma simples atualização da linguagem, o HTML5 ultrapassa o rótulo 
de ser um “formatador-de-textos”. Quando o HTML4 foi lançando, a W3C alertou os 
desenvolvedores sobre algumas regras para produzir os seus códigos, esse roteiro é mais 
conhecido como “boas praticas”. Contudo a nova versão traz a semântica em suas tags. 
A WHATWG ainda esta definindo as regras de marcação que serão usadas, e também definindo 
os APIs que serão utilizados. 
A missão do HTML5 é facilitar o manuseio dos elementos, assim facilitando o desenvolvedor 
trabalhar de uma forma clara e funcional para trazer bons resultados ao usuário final. Contando 
com um suporte muito bem estruturado, o HTML5 fornece um toolbox para a CSS e o 
Javascript, interagir da melhor e mais leve forma. Com a adição de novas tags e modificação de 
algumas existentes. Essa atualização, praticamente, muda a maneira de redigir uma pagina 
HTML, deixando-a mais clara e semântica, definindo onde deve ser o cabeçalho, barras de 
navegação e rodapé, com essa definição, maquinas como mecanismos de busca podem melhor 
pesquisar e indexar o conteúdo de um website. Interatividade e facilidades, outro exemplo da 
qualidade que vem sendo proposta para o HTML5. Inserir um vídeo em uma pagina HTML, era 
uma tarefa que precisaria de algumas linhas de código e a colaboração de uma tecnologia 
secundaria com essa nova versão com poucas linhas de puro HTML, inserimos o vídeo da 
mesma forma que uma foto. 
HTML5 
5 
 
Capítulo 2 – Análise do suporte atual 
pelos navegadores 
No passado para uma versão do HTML e CSS ser lançada, as ideias citadas no roteiro de 
atualização deveriam ser todas testadas, logo após, liberadas para os desenvolvedores e 
fabricantes de browsers. Com o anuncio do HTML5 e CSS3, esse método foi modificado, agora 
cada tecnologia é trabalhada em forma modular. Sendo assim conforme vão sendo liberados os 
upgrades da linguagem nos navegadores os desenvolvedores podem testar as funcionalidades, 
podendo até sugerir algumas como não necessárias. Como as organizações são abertas para 
novos membros, qualquer pessoa pode cadastrar-se nos órgãos citados e opinar com ideias e 
criticas para a melhoria. Uma nova tag para formatação ou talvez uma nova funcionalidade para 
alguma existente. Enfim, toda colaboração é bem vinda e por esse motivo que esta versão esta 
ficando tão bem feita. Um ponto muito forte é que ao invés do desenvolvedor perder inúmeras 
horas de trabalho, criando um código cross-browser, o html5 acarara com esse problema, sendo 
assim sobrando, reaproveitando as horas de trabalho para usar a criatividade com a linguagem. 
Essa compatibilidade deriva dos motores de renderização, sendo o responsável em transformar 
conteúdo HTML e CSS em um conteúdo formatado para ser exibido em uma tela. 
 
Os principais browsers do mercado, em suas versões atualizadas oferecem suporte a 
significativas especificações do HTML5 e CSS3. Porem um detalhe importante é que muitos 
usuários ainda utilizem versões que não comtemplam a necessidade da linguagem, assim 
transformando a experiência do usuário em uma nevagação em uma má experiência. 
 
Pensando nesses motivos, desenvolvem-se métodos de verificação de compatibilidade do 
browser, por definição de algum órgão, não existe um teste padrão. Observando por um ponto 
de vista logico, o interessante é verificar se a função na qual o desenvolvedor pretende utilizar 
esta disponível no navegador. Uma função que já esta sendo utilizado por developers é a 
geolocation, é uma funçãona qual imprimi as coordenadas geográficas do usuário, latitude e 
longitude. No caso verifique se a propriedade existe em objetos globais como WINDOW ou 
NAVIGATOR, e assim tratando o resultado e decidindo para qual local o usuário será 
encaminhado. 
 
Uma solução rápida é a biblioteca de detecção em Javascript chamada O Modernizr 
(http://modernizr.com), compacta e bem estruturada, ela faz verificações na maioria das 
características do HTML5 e CSS3, se existente retorna o resultado da consulta como true ou 
false. 
 
Exemplo completo no documento. 
exemplo_ modernizr.html 
HTML5 
6 
 
Capítulo 3 – Estrutura básica, DOCTYPE 
e charsets 
A estrutura básica do HTML5 continua sendo a mesma da versão anterior, porem existe 
exceções em algumas declarações. Abaixo como a estrutura básica pode ser escrita: 
 
 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 
</head> 
 
<body> 
</body> 
</html> 
 
Estudo de estrutura. 
 
<!doctype html> 
O Doctype deve ser a primeira linha de código do documento antes da tag HTML. 
Essa declaração de tipo é utilizada por validadores e não por navegadores. O doctype da 
versão 5 é o mínimo necessário para um navegador renderizar em modo padrão. Mesmo 
assim um documento HTML sem doctype pode ser um HTML5 válido. 
 
<html> 
O código HTML é uma série de elementos em árvore onde alguns elementos são filhos 
de outros e assim por diante. O elemento principal dessa grande árvore é sempre a tag 
HTML. 
 
<head> 
A Tag HEAD é onde fica toda a parte inteligente da página. No HEAD ficam os 
metadados. Metadados são informações sobre a página e o conteúdo ali publicado. 
 
<meta charset="utf-8"> 
No nosso exemplo há uma metatag responsável por chavear qual tabela de caracteres a 
página está utilizando. 
 
Nas versões anteriores ao HTML5, essa tag era escrita da forma abaixo: 
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”> 
HTML5 
7 
 
 
<link> 
Há dois tipos de links no HTML: a tag A, que são links que levam o usuário para outros 
documentos e a tag LINK, que são links para fontes externas que serão usadas no documento. 
 
No nosso exemplo há uma tag LINK que importa o CSS para nossa páginaem html4 
<link rel=”stylesheet” type=”text/css” href=”arquivo_estilo.css”> 
 
Exemplo em HTML5: 
<link rel=”stylesheet” href= “arquivo_estilo.css”> 
 
Os navegadores não precisam do atributo type. Já assumem que o script é tipo javascript e que o 
stylesheet é tipo css. 
 
<script> 
A tag script utilizada para fazer referência a arquivos javascript também perdeu a propriedade 
type. 
 
HTML 4: 
<script type="text/javascript" src="arquivo.js"></script> 
 
HTML 5: 
<script src="arquivo.js"></script> 
 
 
 
 
 
HTML5 
8 
 
Capítulo 4 – Modelos de conteúdo 
Há pequenas regras básicas que nós já conhecemos e que estão no HTML desde o início. Estas 
regras definem onde os elementos podem ou não estar. Se eles podem ser filhos ou pais de 
outros elementos e quais os seus comportamentos. 
 
Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos 
de linha e de bloco. 
Os elementos de linha marcam, na sua maioria das vezes, texto. 
 
 Alguns exemplos: a, strong, em, img, input, abbr, span. 
 
Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout. 
 
Abaixo segue algumas premissas que você precisa relembrar e conhecer: 
 
 Os elementos de linha podem conter outros elementos de linha, dependendo da categoria 
que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label. 
 
 Os elementos de linha nunca podem conter elementos de bloco. 
 
 Elementos de bloco sempre podem conter elementos de linha. 
 
 Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se 
encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível. 
 
 Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual 
modelo de conteúdo o elemento trabalha e como pode ser seu comportamento. 
 
Categorias 
Cada elemento no HTML pode ou não fazer parte de um grupo de elementos com características 
similares. Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG: 
 
 
• Metadata content 
• Flow content 
• Sectioning content 
• Heading content 
• Phrasing content 
• Embedded content 
• Interactive contente 
 
 
Abaixo segue como as categorias estão relacionadas de acordo com o WHATWG: 
Metadata content 
HTML5 
9 
 
Os elementos que compõe a categoria Metadata são: 
<base> 
 
<command> 
 
<link> 
 
<meta> 
 
<noscript> 
 
<script> 
 
<style> 
 
<title> 
 
Este conteúdo vem antes da apresentação, formando uma relação com o documento e seu 
conteúdo com outros documentos que distribuem informação por outros meios. 
 
Flow content 
A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content. 
São eles: 
 
<a> Âncora ou Hyperlink 
 
<abbr > Abreviação 
 
<address> Endereço ou informação de contato 
 
<area> Hyperlink de imagem-mapa se for um decendente de um elemento de mapa) 
 
<article> Artigo independente 
 
<aside> Conteúdo tangencial 
 
<audio> Stream de aúdio integrado 
 
<b> Negrito 
 
<bdo> Sobreescrita bi-direcional 
 
<blockquote> Citação 
 
<br> Quebra de linha 
 
<button> Botão interativo 
 
<canvas> Área de desenho de gráficos dinâmicos 
 
<cite> Título do trabalho 
 
<code> Fragmento de código 
HTML5 
10 
 
 
<command> Controle de ação do usuário 
 
<datalist> Lista de opções pé-definidas 
 
<del> Texto excluído 
 
<details> Controles sob demanda 
 
<dfn> Definição 
 
<div> Divisão de documento 
 
<dl> Lista de definições 
 
<em> Ênfase 
 
<embed> Incorporar 
 
<fieldset> Conjunto de controles de formulário 
 
<figure> Figure 
 
<footer> Rodapé 
 
<form> User-submittable Form 
 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Heading Elements 
 
<header> Header 
 
<hgroup> Especifica um container para elementos de título do nível h1 ao h6 
 
<hr> Especifica uma linha horizontal 
 
<I> Especifica um texto em itálico 
 
<iframe> Especifica uma sub janela no documento 
 
<img> inseri uma imagem 
 
<input> Campo de entrada de texto 
 
<ins> Especifica que um novo texto foi inserido no lugar de um que foi removido 
 
<kbd> Texto que foi digitado pelo usuário 
 
<keygen> Especifica um par de chaves público-privadas 
 
<label> Rótulo para controle dos elementos em um formulário 
 
<link> Especifica uma referência a um documento externo se o atributo itemprop for utilizado 
 
<map> Especifica um mapa de imagem 
HTML5 
11 
 
 
<mark> Texto destacado para fins de referência 
 
<math> Inicia um elemento math 
 
<menu> Especifica uma lista de comandos 
 
<meta> Especifica meta informação se o atributo item prop for utilizado 
 
<meter> Especifica medição dentro de um intervalo predefinido 
 
<nav> Especifica uma lista de links para navegação 
 
<noscript> Especifica conteúdo alternativo para browsers que não suportam JavaScript ou 
outras linguagens de script 
 
<object> Especifica um objeto dentro de um documento HTML 
 
<ol> Especifica uma lista ordenada 
 
<output> Especifica o resultado de um cálculo, por exemplo, o efetuado por algum script 
 
<p> Especifica um parágrafo 
 
<pre> Especifica um texto pré-formatado 
 
<progress> Especifica o progresso de uma tarefa de qualquer tipo 
 
<q> Especifica uma breve citação 
 
<ruby> Especifica texto Ruby (tipografia utilizada no Sudeste Asiático) 
 
<samp> Especifica a saída de um programa de computador, script, etc. 
 
<script> Especifica scripts em um documento html 
 
<section> Especifica uma seção dentro de um artigo 
 
<select> Especifica uma lista de itens selecionáveis 
 
<small> Especifica um texto em tamanho pequeno paraimpressão 
 
<span> Especifica elementos inline em um documento HTML 
 
<strong> Especifica uma importância maior ao texto onde ele é utilizado 
 
<style> Especifica a declaração de folhas de estilo em documentos HTML (Se o atributo scoped 
for utilizado) 
 
<sub> Especifica texto subscrito 
 
<sup> Especifica texto sobrescrito 
 
<svg> Cria um elemento SVG 
HTML5 
12 
 
 
<table> Especifica uma tabela 
 
<textarea> Especifica um textarea onde o usuário pode introduzir várias linhas de texto 
 
<time> Especifica data e hora 
 
<ul> Especifica uma lista não ordenada 
 
<var> Especifica uma variável 
 
<video> Especifica um streaming de vídeo em um documento html 
 
<wbr> Indica o ponto exato onde desejamos que esta quebra de linha ocorra. 
 
<Text> 
 
 
Sectioning content 
Estes elementos definem um grupo de cabeçalhos e rodapés. 
 
<article> Artigo independente 
 
<aside> Conteúdo tangencial 
 
<nav> Especifica uma lista de links para navegação 
 
<section> Especifica uma seção dentro de um artigo 
 
Basicamente são elementos que juntam grupos de textos no documento. 
 
Heading content 
Os elementos da categoria Heading definem uma seção de cabeçalhos, que podem estar contidos 
em um elemento na categoria Sectioning. 
 
<h1> 
<h2> 
<h3> 
<h4> 
<h5> 
<h6> 
<hgroup> 
Phrasing content 
Fazem parte desta categoria elementos que marcam o texto do documento, bem como os 
elementos que marcam este texto dentro do elemento de parágrafo. 
 
<a> 
<abbr> 
<area> 
<audio> 
<b> 
<bdo> 
HTML5 
13 
 
<br> 
<button> 
<canvas> 
<cite> 
<code> 
<command> 
<datalist> 
<del> 
<dfn> 
<em> 
<embed> 
<i> 
<iframe> 
<img> 
<input> 
<ins > 
<kbd> 
<keygen> 
<label> 
<link> 
<map> 
<mark> 
<math> 
<meta> 
<meter> 
<noscript> 
<object> 
<output> 
<progress> 
<q> 
<ruby> 
<samp> 
<script> 
<select> 
<small> 
<span> 
<strong> 
<sub> 
<sup> 
<svg> 
<textarea> 
<time> 
<var> 
<video> 
<wbr> 
<Text> 
 
 
Embedded content 
Na categoria Embedded, há elementos que importam outra fonte de informação para o 
documento. 
 
<audio> 
HTML5 
14 
 
<canvas> 
<embed> 
<iframe> 
<img> 
<math> 
<object> 
<svg> 
<video> 
 
 
Interactive content 
Interactive Content são elementos que fazem parte da interação de usuário. 
 
<a> 
<audio > 
<button> 
<details> 
<embed> 
<iframe> 
<img> 
<input> 
<keygen> 
<label> 
<menu > 
<object> 
<select> 
<textarea> 
<video > 
 
HTML5 
15 
 
Capítulo 5 – Novos elementos e 
atributos 
<section> Define uma nova seção genérica no documento. Por exemplo, a home 
de um website pode ser dividida em diversas seções: introdução ou destaque, novidades, 
informação de contato e chamadas para conteúdo interno. Pode ser usado em conjunto com o 
h1, h2, h3, h4, h5 e h6 para indicar elementos da estrutura do documento. 
 
<article> Representa uma parte da página que poderá ser distribuído e reutilizável em FEEDs 
por exemplo. Isto pode ser um post, artigo, um bloco de comentários 
de usuários ou apenas um bloco de texto comum. 
 
<aside> representa um bloco de conteúdo que referência o conteúdo que envolta do elemento 
aside. O aside pode ser representado por conteúdos em sidebars em textos impressos, 
publicidade ou até mesmo para criar um grupo de elementos nav e outras informações separados 
do conteúdo principal do website. 
 
<hgroup> Este elemento consiste em um grupo de títulos. Ele serve para agrupar elementos de 
título de H1 até H6 quando eles tem múltiplos níveis como título com subtítulos e etc. 
 
<header> O elemento header representa um grupo de introução ou elementos de navegação. O 
elemento header pode ser utilizado para agrupar índices de conteúdos, campos de busca ou até 
mesmo logos. 
 
<footer> O elemento footer representa literalmente o rodapé da página. Seria o último elemento 
do último elemento antes de fechar a tag HTML. O elemento footer não precisa aparecer 
necessariamente no final de uma seção. 
 
<nav> O elemento nav representa uma seção da página que contém links para outras partes do 
website. Nem todos os grupos de links devem ser elementos nav, apenas aqueles grupos que 
contém links importantes. Isso pode ser aplicado naqueles blocos de links que geralmente são 
colocados no Rodapé e também para compor o menu principal do site. 
 
<figure> O elemento <figure> destina-se a marcar uma unidade de conteúdo e opcionalmente 
uma legenda para o conteúdo que se constitui em uma peça isolada do fluxo principal do 
documento e pode ser retirada daquele fluxo sem alterar o significado do documento. 
 
<figure> 
 <video src="exemplo.webm" controls></video> 
 <figcaption>Exemplo</figcaption> 
</figure> 
 
 
<figcaption> O elemento figcaption destina-se a marcar o cabeçalho ou a legenda para uma 
figura. 
 
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-hgroup-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element
HTML5 
16 
 
<track> Proporciona faixas de texto para o elemento de vídeo. 
 
<embed> é usado para conteúdo plugin. 
 
<mark> Texto destacado para fins de referência 
 
<progress> Este elemento novo no HTML5 exibe em forma de gráfico o andamento de um 
processo ou tarefa, como, por exemplo, o download de um arquivo. É importante inserir um 
conteúdo alternativo, caso o browser não mostre o elemento. 
Dentro dele o atributo “max” indica o valor máximo permitido e o atributo value, o valor que 
está sendo exibido ao usuário. 
 
Exemplo: 
<progress value="55" max="100">55%</progress> 
 
<meter> Especifica medição dentro de um intervalo predefinido 
 
<time> Especifica data e hora 
 
<ruby>, <rt>, e <rp> allow for marking up ruby annotations. 
 
<bdi> substituir o algoritmo bidirecional Unicode e fazer o texto mais compreensível, evitando 
quebras indesejáveis na formatação. 
 
<wbr> indica o ponto exato onde desejamos que esta quebra ocorra 
 
<canvas> O elemento canvas, novidade do HTML 5, permite que a informação para a 
construção de imagens baseadas em pixels seja inserida diretamente no código do documento. 
O elemento canvas apenas delimita em que local da tela isto acontece. O processo de desenho é 
controlado por uma API específica para este elemento que interage com JavaScript. 
Por enquanto, as imagens criadas são objetos em duas dimensões (2D), mas já existem 
experimentos para construção de objetos 3D com a API Canvas. 
 
<command> Controle de ação do usuário. 
 
<details> represents additional information or controls which the user can obtain on demand. 
The summary element provides its summary, legend, or caption. 
 
<datalist> Em conjunto com a lista de atributos pode ser usado para fazer caixas de combinação: 
 
<input list="browsers" name="browser" /> 
<datalist id="browsers"> 
 <option value="Internet Explorer"> 
 <option value="Firefox"> 
 <option value="Chrome"> 
 <option value="Opera"> 
 <option value="Safari"> 
</datalist> 
<input type="submit" /> 
 
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-track-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-embed-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-elementhttp://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-rt-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-rp-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-bdi-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-wbr-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-command-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-summary-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element
HTML5 
17 
 
 
Após selecionar a opção: 
 
 
<keygen> O elemento keygen, já era suportado por alguns navegadores, mas agora é 
oficialmente incluído no HTML 5. Ele indica um par de chaves público-privadas, um dos 
métodos de criptografia mais difundidos. A chave pública pode ser enviada através de um 
formulário, e a chave privada é conhecida apenas pelo seu usuário. 
 
<form action="processar.php" method="post" enctype="multipart/form-data"> 
<fieldset> 
<legend>Criptografia</legend> 
<label for="chave">Segurança :</label> 
<keygen id="chave" name="chave"> 
<input type="submit" value="Enviar"> 
</fieldset> 
</form> 
<output> 
 
Especifica o resultado de um cálculo, por exemplo, o efetuado por algum script 
 
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 
0<input type="range" name="a" value="50" /> 
+<input type="number" name="b" value="50" /> 
=<output name="x" for="a b"></output> 
</form> 
 
 
 
O elemento <input> tem novos valores para o atributo type. 
 
tel 
O elemento representa um controle para a edição de um número de telefone. Quebras de linhas 
são automaticamente removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada, pois 
números de telefone podem variar bastante internacionalmente. Você pode usar atributos como 
pattern e maxlength para restringir valores digitados no controle. 
 
search 
O elemento representa um campo de entrada de busca. Quebras de linhas são automaticamente 
removidas do valor de entrada, mas nenhuma outra sintaxe é aplicada. 
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-keygen-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-element
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#telephone-state-%28type=tel%29
https://developer.mozilla.org/pt-PT/docs/HTML/Element/input#attr-pattern
https://developer.mozilla.org/pt-PT/docs/HTML/Element/input#attr-maxlength
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-%28type=text%29-state-and-search-state-%28type=search%29
HTML5 
18 
 
 
url 
O elemento representa um controle para a edição de URL. Quebras de linha e espaços, à direita 
e à esquerda, são automaticamente removidos do valor de entrada. 
 
email 
O elemento representa um endereço de e-mail. Quebras de linhas são automaticamente 
removidas do valor de entrada. Um endereço de e-mail inválido pode ser configurado, mas o 
campo de entrada somente será satisfeito se contiver um endereço de e-mail que satisfaça a 
produção ABNF. 
 
“Nota: se o atributo multiple é configurado, podem ser digitados múltiplos endereços de 
e-mail neste campo <input>, como uma lista separada por espaços, mas atualmente isto 
não está funcionado no Firefox.” 
 
datetime 
Defini controle para uma data e hora com fuso horário 
 
 
 
 
 
 
date 
Define controle para uma data 
 
 
month 
Defini controle que indica o mês na qual o dia pertence. 
 
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#url-state-%28type=url%29
http://en.wikipedia.org/URL
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
https://developer.mozilla.org/pt-PT/docs/HTML/Element/input#attr-multiple
https://developer.mozilla.org/pt-PT/docs/HTML/Element/input
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-and-time-state-%28type=datetime%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#date-state-%28type=date%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#month-state-%28type=month%29
HTML5 
19 
 
week 
Defini controle que indica a semana na qual o dia pertence. 
 
 
 
time 
Defini controle para informar a hora escolhida. 
 
datetime-local 
Definir controle para data e hora sem fuso horário 
 
 
number 
disponibiliza setas para aumentar e diminuir os números sendo possível limitar os número 
máximo e mínimo; 
 
 
range 
Se o elemento receber o atributo, ele representa um controle para definir um valor numérico 
impreciso. 
 
 
color 
Se o elemento receber o atributo type=color, ele representa um controle que abrirá uma palheta 
de cores que retorna o valor hexadecimal que representa a cor escolhida. Este valor é uma 
seqüência sete caracteres, composto das seguintes partes e ordem: 
 
Um caractere “#”. 
Seis caracteres no intervalo 0-9, a-f, e A-F. 
 
Observação: Palavras-chave com o nome da cor(por exemplo, seqüências como “red” ou 
“green”) não são permitidos. 
 
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#week-state-%28type=week%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#time-state-%28type=time%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#local-date-and-time-state-%28type=datetime-local%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#number-state-%28type=number%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#range-state-%28type=range%29
http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#color-state-%28type=color%29
HTML5 
20 
 
 
 
 
 
Exemplo completo no documento. 
exemplo_formtypes.html 
 
HTML5 
21 
 
Capítulo 6 – Elementos modificados e 
ausentes 
Elementos que não traziam semântica e eram utilizados somente para efetuais visuais foram 
retirados. Com o CSS, a estilização de textos fica simples e pratica. Alguns elementos não 
foram descontinuados, mas suas funções foram modificas. 
Exemplo: 
- A tag <b> passa a ter a semanticidade de um SPAN, não obtendo relevância no texto marcado. 
 
- A tag <i> 
 
O elemento a sem o atributo href agora representa um placeholder no exato lugar que este 
link se encontra. 
 O elemento address agora é tratado como uma seção no documento. 
 O elemento hr agora tem o mesmo nível que um parágrafo, mas é utilizado para quebrar 
 linhas e fazer separações. 
 O elemento strong ganhou mais importância. 
 O elemento head não aceita mais elementos child como seu filho. 
 
<acronym> Define siglas em HTML 4.01. 
<applet> Iniciava um mini-aplicativo incorporado. 
<basefont> Definia as propriedades da font padrão para todo o texto do documento. 
<big> Era usado para tornar o texto maior. 
<center> Usado para alinhar texto e conteúdono centro. (Apenas efeito visual); 
<dir> Definia a lista do diretório. 
<font> Especificava o tipo de fonte, tamanho, e cor do texto. 
<frame> Definia uma janela particular dentro de um conjunto de "frames/quadros". 
<frameset> Definia um conjunto de frames organizado por múltiplas janelas 
<noframes> Texto exibido para navegadores que não trabalham com "frames". 
<strike> Exibia o texto rasurado. 
<tt> Definia o teletipo de texto. 
<u> Definia o sublinhado do texto. 
<xmp> Definia um texto pré-formatado. Agora se utiliza a tag <pre>. 
HTML5 
22 
 
Capítulo 7 – Elementos áudio e vídeo, e 
codecs 
Para inserir áudio em uma página web, basta usar o elemento audio: 
 
<audio src="mus.oga" controls="true" autoplay="true" /> 
 
O valor de controls define se um controle de áudio, com botões de play, pause, volume, barra de 
progresso, contador de tempo, etc. será exibido na tela. Se for setado como "false", será preciso 
controlar o player via javascript, com métodos como play() e pause(). O valor de autoplay 
define se o áudio vai começar a tocar assim que a página carregar. 
Origens alternativas de áudio 
 
Todo agente de usuário deveria suportar o codec livre OggVorbis, mas, infelizmente, pode 
acontecer de seu arquivo oga não tocar no computador ou celular de alguém. Quem sabe do seu 
chefe ou seu cliente. Então é preciso saber como oferecer um formato alternativo de áudio. 
Fazemos assim: 
 
<audio controls="true" autoplay="true"> 
 <source src="musica.oga" /> 
 <source src="musica.mp3" /> 
 <source src="musica.wma" /> 
</audio> 
 
Claro, o agente de usuário pode ainda não saber tocar nenhum desses formatos, ou sequer ter 
suporte a áudio. Para esses casos, ofereça um conteúdo alternativo: 
 
<audio controls="true" autoplay="true"> 
 <source src="mus.oga" /> 
 <source src="mus.mp3" /> 
 <source src="mus.wma" /> 
 <p>Faça o <a href="mus.mp3">download da música</a>.</p> 
</audio> 
 
 
 
 
 
 
Vídeo 
 
HTML5 
23 
 
O uso de vídeo é muito semelhante ao de áudio: 
<video src="u.ogv" width="500" height="400" /> 
 
E com vários elementos source: 
 
<video controls="true" autoplay="true" width="500" height="400"> 
 <source src="video.ogv" /> 
 <source src="video.mp4" /> 
 <source src="video.wmv" /> 
 <p>Faça o <a href="video.mp4">download do vídeo</a>.</p> 
</video> 
 
 
Codecs 
É muito importante que você inclua, nos seus elementos source de áudio e vídeo, informação a 
respeito do container e codecs utilizados. Isso vai evitar que o navegador tenha que baixar, pelo 
menos parcialmente, o arquivo de mídia para, depois, descobrir que não consegue tocá-lo. É 
importante lembrar que a extensão do arquivo não é informação relevante para isso, pelo 
contrário, não significa nada. Uma URL pode não ter extensão de arquivo e pode levar a um 
redirecionamento 
 
 
http://pt.wikipedia.org/wiki/Codec 
 
 
http://pt.wikipedia.org/wiki/Codec
HTML5 
24 
 
Capítulo 7 – Menus e toolbars 
O elemento menu é usado para definir menus e barras de ferramenta. Dentro do menu, você 
pode inserir submenus ou comandos. Para inserir submenus, basta inserir outros elementos 
menu. Para definir comandos, você pode inserir: 
 
 Um link, um elemento a com atributo href; 
 Um botão, um elemento button; 
 Um botão, um elemento input com o atributo type contendo button, submit, reset ou image; 
 Um radiobutton, um elemento input com o atributo type contendo radio; 
 Um elemento select, contendo um ou mais options, define um grupo de comandos 
 Um elemento command 
 
Há três tipos de comando: 
 
command 
Uma ação comum; 
 
checkbox 
Uma ação que pode estar no status de ligada ou desligada, e alterna entre esses dois stauts 
quando clicada; 
 
radio 
Uma ação que pode estar no status de ligada ou desligada, e quando clicada vai para o status de 
ligada, deligando todas as ações com o mesmo valor no atributo radiogroup; 
 
Da lista de elementos possíveis para definir comandos, os três primeiros, link, button e input 
button, definem comandos do tipo command. O quarto elemento, radiobutton, define um 
comando do tipo radio. O quinto, checkbox, define um comando do tipo checkbox. 
 
 
 
 
Até o momento, não foram liberadas as atualizações para o funcionamento desse elemento, mas 
em breve sera lançada. 
 
 
 
 
HTML5 
25 
 
Capítulo 8 – Tipos de links 
Existem duas maneiras principais de linkar documentos, os elementos a e link. O elemento a 
cria um link no conteúdo da página. 
 
<a href="http://alfamidia.com.br">Alfamidia</a> 
 
O elemento link, por sua vez, cria um metadado, um link que não é mostrado no conteúdo, mas 
o agente de usuário usa de outras maneiras. O uso mais comum é vincular um documento a uma 
folha de estilos: 
 
<link rel="stylesheet" href="estilo.css" /> 
 
Note o atributo rel="stylesheet". O atributo rel pode estar presente nos elementos a e link, e ter 
uma série de valores: 
 
 
Metadados de navegação 
 
archives: os arquivos do site 
 
author: a página do autor do documento atual 
 
bookmark: o permalink da seção a que este documento pertence 
 
first: o primeiro documento da série a qual este pertence 
 
help: ajuda para esta página 
 
index: o índice ou sumário que inclui o link para esta página 
 
last: o último documento da série a qual este pertence 
 
license: a licensa que cobre este documento 
 
next: o próximo documento da série a qual este pertence 
 
prefetch: o agente de usuário deve fazer cache desse link em segundo plano tão logo o 
documento atual tenha sido carregado. O autor do documento indica que este link é o provável 
próximo destino do usuário. 
 
prev: o documento anterior da série a qual este pertence 
 
search: a busca deste site 
 
up: O documento um nível acima deste 
 
HTML5 
26 
 
Metadados da página 
 
alternate um formato alternativo para o conteúdo atual. Precisa estar acompanhado do atributo 
type, contendo o tipo MIME do formato. Por exemplo, para indicar o RSS da página atual 
usamos: 
 
<link rel="alternate" type="application/rss+xml" href="rss.xml" /> 
 
icon o ícone que representa esta página 
 
pingback a URL de pingback desta página. Através desse endereço um sistema de blogging ou 
gerenciador de conteúdo pode avisar automaticamente quando um link para esta página for 
inserido. 
 
stylesheet: a folha de estilo linkada deve ser vinculada a este documento para exibição 
 
 
Comportamento dos links na página 
 
External: indica um link externo ao domínio do documento atual 
 
nofollow: indica que o autor do documento atual não endossa o conteúdo desse link. Os robôs 
de indexação para motores de busca podem, por exemplo, não seguir este link ou levar em conta 
o nofollow em seu algoritmo de ranking. 
 
noreferrer: o agente de usuário não deve enviar o header HTTP Referer se o usuário acessar esse 
link 
 
sidebar: o link deve ser aberto numa sidebar do navegador, se este recurso estiver disponível 
 
 
 
 
HTML5 
27 
 
Capítulo 8 – Introdução ao CSS3 
Seletores complexos 
 
A sintaxe do CSS é simples: 
 
seletor { 
 propriedade: valor; 
} 
 
A propriedade é a característica que você deseja modificar no elemento. O valor é o valor 
referente a esta característica. Se você quer modificar a cor do texto, o valor é um Hexadecimal, 
RGBA ou até mesmo o nome da cor por extenso. Até aqui, nada muito diferente. Muitas vezes 
você não precisa aprender do que se trata a propriedade, basta saber que existe e se quiser 
decorar, decore. Propriedades são criadas todos os dias e não é um ato de heroísmo você saber 
todas as propriedades do CSS e seus respectivos valores. Os seletores são a alma do CSS e você 
precisa dominá-los. É com os seletores que você irá escolher um determinado elemento dentro 
todos os outros elementos do DOM para formatá-lo. Boa parte da inteligência do CSS está em 
saber a utilizar os seletoresde uma maneira eficaz, escalável e inteligente. Os seletores 
complexos selecionam elementos que talvez você precisasse fazer 
algum script em Javascript para poder marcá-lo com uma CLASS ou um ID para então você 
formatá-lo. Com os seletores complexos você consegue formatar elementos que antes eram 
inalcançáveis. exemplo de funcionamento Imagine que você tenha um título (h1) seguido de um 
parágrafo (p). Você precisa selecionar todos os parágrafos que vem depois de um título H1. 
Com os seletores complexos você fará assim: 
h1 + p { 
 color:red; 
} 
 
 
- Gradiente 
 
O gradiente será feito no background. Você define a direção do gradiente, onde ele 
começará e terminará, e quais as cores que farão a transição. 
 
 
Veja abaixo como fazemos um gradiente linear. 
 
.classe { 
/* Firefox */ 
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(188,33,36,1) 100%); 
 
/* Chrome e Safari */ 
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(188,33,36,1) 100%); 
HTML5 
28 
 
 
/* Opera */ 
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(188,33,36,1) 100%); 
 
/* IE6-9 */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', 
endColorstr='#bc2124',GradientType=0 ); 
} 
 
 
Veja abaixo como fazemos um gradiente radial, infelizmente o Internet Explorer não 
fornece suporte a essa funcionalidade. 
 
.classe { 
 
background: -webkit-radial-gradient(50% 50%, cover, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 
100%); 
 
background: -moz-radial-gradient(50% 50%, cover, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 
100%); 
 
background: -ms-radial-gradient(50% 50%, cover, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 
100%); 
 
background: -o-radial-gradient(50% 50%, cover, rgb(0, 0, 0) 0%, rgb(255, 0, 0) 100%); 
 
} 
 
 
Exemplo completo no documento. 
exemplo_gradiente.html 
 
- Columns 
 
Com o controle de colunas no CSS, podemos definir colunas de texto de forma automática. Até 
hoje não havia maneira de fazer isso de maneira inteligente com CSS e o grupo de propriedades 
columns pode fazer isso de maneira livre de gambiarras. 
 
 
column-count 
A propriedade column-count define a quantidade de colunas terá o bloco de textos. 
 
/* Define a quantidade de colunas, a largura é definida uniformemente.*/ 
-moz-column-count:2; 
-webkit-column-count:2; 
column-width 
Com a propriedade column-width definimos a largura destas colunas. 
 
HTML5 
29 
 
/* Define qual a largura mínima para as colunas. Se as colunas forem espremidas, 
fazendo com que a largura delas fique menor que este valor, elas se transformam em 1 
coluna automaticamente */ 
-moz-column-width: 400px; 
-webkit-column-width: 400px; 
 
 
 
column-gap 
 
A propriedade column-gap cria um espaço entre as colunas, um gap. 
 /* Define o espaço entre as colunas. */ 
-moz-column-gap: 50px; 
-webkit-column-gap: 50px; 
 
Utilizamos aqui os prefixos -moz- e -webkit-, estas propriedades não funcionam oficialmente em 
alguns browsers. Mas já podem ser usados em browsers como Firefox, Safari e Opera. 
 
 
Exemplo completo no documento. 
exemplo_colunas.html 
 
 
- Transform 
Veja o código abaixo e seu respectivo resultado: 
 
img { 
 -webkit-transform: skew(30deg); /* para webkit */ 
 -moz-transform: skew(30deg); /* para gecko */ 
 -o-transform: skew(30deg); /* para opera */ 
 transform: skew(30deg); /* para browsers sem prefixo */ 
} 
 
O código acima determina que o ângulo da imagem seja de 30deg. Colocamos um exemplo para 
cada prefixo de browser. Ficando assim: 
 
 
 
 
 
 
 
 
 
 
Com a propriedade aplicada 
 
Imagem original 
HTML5 
30 
 
 
 
 
 
Várias transformações em um único elemento 
Para utilizarmos vários valores ao mesmo tempo em um mesmo elemento, basta definir vários 
valores separando-os com espaços em uma mesma propriedade transform: 
img { 
 -webkit-transform: scale(1.5) skew(30deg); /* para webkit */ 
 -moz-transform: scale(1.5) skew(30deg); /* para gecko */ 
 -o-transform: scale(1.5) skew(30deg); /* para opera */ 
 transform: scale(1.5) skew(30deg); /* para browsers sem prefixo 
*/ 
} 
 
transform-origin 
A propriedade transform-origin define qual o ponto do elemento a transformação terá origem. A 
sintaxe é idêntica ao background-position. Observe o código abaixo 
 
img { 
 -webkit-transform-origin: 10px 10px; /* para webkit */ 
 -moz-transform-origin: 10px 10px; /* para webkit */ 
 -o-transform-origin: 10px 10px; /* para webkit */ 
 transform-origin: 10px 10px; /* para webkit */ 
} 
 
 
- Transições e animações 
Com a versão anterior do CSS, formatavam-se fontes, backgrounds, cores, tamanhos e medidas 
de distâncias e posições, agora existe a possibilidade de animar elementos, não ao ponto de criar 
filmes, para isso tem as opções Canvas e SVG. Vale lembrar que existe a possibilidade de 
algumas funções não funcionar em alguns navegadores. Antes de utilizar alguma função como 
padrão em algum projeto, verifique nos principais browsers. 
Abaixo exemplo de utilização: 
 
 
HTML5 
31 
 
a { 
 color: white; 
 background: gray; 
} 
 
 
a { 
 color:white; 
 background:green; 
 -moz-transition: 0.5s linear; /* Firefox */ 
 -webkit-transition: 0.5s linear; /* Safari and Chrome */ 
 -o-transition: 0.5s linear; /* Opera */ 
 } 
 
 
 a:hover { 
 color:black; 
 background:yellow; 
 -moz-transition: 0.5s linear; /* Firefox */ 
 -webkit-transition: 0.5s linear; /* Safari and Chrome */ 
 -o-transition: 0.5s linear; /* Opera */ 
 } 
 
 
Código para testar: 
<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
<meta charset="utf-8"> 
<title>Transition</title> 
<style> 
a { 
 font-size:36px; 
 padding:10px; 
color:white; 
 background:green; 
 -moz-transition: 0.5s linear; /* Firefox */ 
 -webkit-transition: 0.5s linear; /* Safari and Chrome */ 
 -o-transition: 0.5s linear; /* Opera */ 
} 
a:hover { 
 color:black; 
 background:yellow; 
 -moz-transition: 0.5s linear; /* Firefox */ 
 -webkit-transition: 0.5s linear; /* Safari and Chrome */ 
 -o-transition: 0.5s linear; /* Opera */ 
} 
</style> 
</head> 
<body> 
 <a href="#">Alfamidia</a> 
</body> 
</html> 
HTML5 
32 
 
 
 
Exemplo completo no documento. 
exemplo_ transition.html 
 
- Bordas 
Utilizar uma imagem como background da borda que o desevelvoder definiu, mais uma 
novidade interessante da versão do CSS3. Como de costume, a aplicação é simples: 
 
.classe { 
display:block; 
background:#f0f0f0; 
height:300px; 
width:300px; 
border-image: url(bg.png) 10 10 10 10 stretch; 
} 
 
Abaixo alguns exemplos de utilização: 
 
#exemplo_a { 
 height: 65px; 
 width:160px; 
 -moz-border-radius-bottomright: 50px; 
 border-bottom-right-radius: 50px; 
} 
 
#exemplo_b { 
 height: 65px; 
 width:160px; 
 -moz-border-radius-bottomright: 50px 25px; 
 border-bottom-right-radius: 50px 25px; 
} 
 
#exemplo_c { 
 height: 65px; 
 width:160px; 
 -moz-border-radius-bottomright: 25px 50px; 
 border-bottom-right-radius: 25px 50px; 
} 
 
#exemplo_d { 
 height: 5em; 
 width: 12em; 
 -moz-border-radius: 20px 80px 20px 80px; 
 border-radius: 20px 80px 20px 80px; 
} 
 
#exemplo_e { 
 height: 65px; 
HTML5 
33 
 
 width:160px; 
 -moz-border-radius: 35px 10px / 10px 35px; 
 border-radius: 65px 10px / 10px 35px; 
} 
 
#exemplo_f { 
 height: 80px; 
 width: 80px; 
 -moz-border-radius: 40px; 
 border-radius: 40px; 
} 
 
 
 
Exemplo completo no documento. 
exemplo_bordas.html 
 
- Múltiplos backgrounds 
 
body { 
 text-align:center; 
 background: 
 url(bg.png) left repeat-y, 
 url(bg2.png) right repeat-y; 
HTML5 
34 
 
} 
 
 
Exemplo completo no documento. 
exemplo_multiplo_bg.html 
 
Sobre posicoes de backgrounds 
 
Exemplo de como sobrepor imagens, 
body { 
 text-align:center; 
 min-height:600px; 
 background: 
 url(bg_01.png) left topno-repeat, /* 2 */ 
 url(bg_02.png) right bottom no-repeat, /* 1 */ 
 /*url(bg_01.png) right bottom no-repeat, */ 
 url(bg_00.png); /* 0 */ 
} 
 
Exemplo completo no documento. 
exemplo_multiplo_bg2.html 
 
- Módulo Template Layout 
 
A propriedade FLOAT, é uma peça muito importante na criação de layouts com CSS, 
porem não é a maneira correta de estruturação. 
 
Template Layout, esse modulo criado pela w3c, proporciona uma nova forma de criar, 
organizar os elementos e as demais informações do layout. 
 
O módulo Template Layout basicamente define slots de layout para que você encaixe e 
posicione seus elementos. O mapeamento dos slots é feito com duas propriedades que já 
conhecemos que este módulo adiciona mais alguns valores e funcionalidades, são as 
propriedades position e display. 
 
A propriedade display irá definir como será o Grid. Quantos slots e etc. 
A propriedade position irá posicionar seus elementos nestes slots. 
 
Exemplo de estrutura HTML 
<div class="geral"> 
 <nav class="menu">&diams;</nav> 
 <aside class="lateral">&diams;</aside> 
 <aside class="informacoes">&diams;</aside> 
 <article>&diams;</article> 
 <footer>&diams;</footer> 
</div> 
 
Exemplo de estrutura CSS 
<style> 
HTML5 
35 
 
.geral { 
 display: "a a a" 
 "b c d" /100px 
 "e e e" 
 100px 600px 100px; 
} 
nav.menu { position:a; } 
aside.lateral {position:b; } 
aside.informacoes {position:d;} 
article {position:c; } 
footer {position:e;} 
 
</style> 
 
Com a propriedade display define-se o GRID. 
Então, o layout conta com três colunas. 
a coluna A B E, terá 100px de largura 
a coluna A C E terá 600px de largura 
a coluna A D E terá 100px de largura. 
 
Na coluna horizontal B C D, define-se a altura da mesma. No exemplo esta como 100px. 
Para melhor visualização defina um background para cada elemento. 
 
nav.menu {position:a; background:#000;} 
aside.lateral {position:b; background:#999;} 
aside.informacoes {position:d; background:#666;} 
article {position:c; background:#f0f0f0;} 
footer {position:e; background:#333;} 
 
Um fator importante é que não importa o posicionamento dos elementos na pagina, tudo 
dependerá conforme o desenvolvedor posiciona-los. 
 
Pseudo-elemento ::slot() 
Utiliza-se o slot() para formatar um elemento especifico, assim não atribui o estilo ao elemento 
e sim ao slot. Se necessario posicionar aquele elemento em outro lugar, ficará mais fácil. 
 
Exemplo de utilização. 
<style> 
.geral { 
 display: "a a a" 
 "b c d" /100px 
 "e e e" 
 100px 600px 100px; 
} 
 
nav.menu {position:a; background:#000;} 
aside.lateral {position:b; background:#999;} 
aside.informacoes {position:d; background:#666;} 
article {position:c; background:#f0f0f0;} 
footer {position:e; background:#333;} 
 
.geral::slot(b) { background: #F90 } 
 
</style> 
HTML5 
36 
 
 
OBS.: Esta especificação é um estudo da W3C, os browers ainda não a suportam. 
Um desenvolver criou um Javascript que interpreta o CSS e imprimi os resultados. 
Use com cautela e sempre teste nos principais navegadores. 
 
Exemplo completo no documento. Combinado com: 
- @font-face 
- transition 
- column 
- gradient 
exemplo_modulo_template.html 
 
 
- Cores 
A mais conhecida maneira de trabalhar com cores solidas em desenvolvimento web é 
com o formato hexadecimal, porem não é o único formato existente. Alguns 
desenvolvedores preferem utilizar o formato RGB. o formato é simples, são três 
conjuntos de numero que iniciam-se em 0 até 255 ou utiliza-se porcentagem 0% a 
100%. 
Sintaxe de aplicação na CSS: 
 
COR VERMELHA 
 
.classe { 
rgb(255,0,0) 
} 
 
.classe { 
rgb(100%,0%,0%) 
} 
 
Agora o CSS3 apresenta o RGBA, que no caso continua a mesma sintaxe, porem com o 
canal ALPHA, propriedade na qual cuida da opacidade. 
 
.classe { 
rgba(255,0,0, 0.5) 
} 
 
.classe { 
rgba(100%,0%,0%,0.5) 
} 
 
Exemplo completo no documento. 
exemplo_cores.html 
 
 
Outra novidade interessante se tratando de produtividade é a currentColor. 
Essa propriedade faz um aproveitamento da ultima cor utilizada dentro do seletor. 
Exemplo de utilização: 
HTML5 
37 
 
 
.classe { 
color:rgba(255,255,0, 0.5); 
border:1px solid currentColor; 
} 
 
Obs.: currentColor funciona em qualquer propriedade que utilize cor e esteja dentro 
do mesmo seletor. 
 
- Paged media 
 
Essa função serve de auxilio ao desenvolvedor que terá no em seus trabalhos, usuários 
com a necessidade de imprimir o conteúdo. Até o momento não tínhamos uma maneira 
correta de formatar uma pagina para impressão, suprindo essa necessidade contamos 
com @page. 
Com o CSS3, construiremos o modelo de pagina. 
 
Page Model (modelo de página) 
O page box tem algumas áreas simples de se entender que facilitará a explicação. Veja 
abaixo uma imagem e uma explicação de suas respectivas áreas: 
 
Page box 
O page box é onde tudo acontece. Tenha em mente que o page box é o viewport das 
medias impressas. É lá que conterá as Áreas de margem, padding, border e onde o texto 
será consumido. A largura e altura do page box é determinada pela propriedade size. Em 
um caso simples, o page box tem a largura e a altura de uma folha. Entretanto em casos 
complexos onde page box difere das folhas de papel em valores e orientações já que 
você pode personalizar de acordo com sua necessidade. 
 
Page area 
A page area é a area de conteúdo (content area) do page box. 
 
Margin box 
Margin boxes contém boxes para header e footer. São conjunto de 16 boxes onde você 
pode inserir conteúdo útil como número da página, título do livro, etc, etc, etc. Essas 
áreas ficam fora do Page area. Cada um tem suas margins, paddings e bordas 
individuais. Veja o diagrama abaixo para visualizar melhor. 
HTML5 
38 
 
 
 
 
Page sheet 
A folha, a página, a superfície que será impresso o conteúdo. A ilustração abaixo mostra 
a representação de uma folha. 
 
 
Área não impressa 
A área de não impressão é a área onde o dispositivo de impressão não é capaz de 
imprimir. Esta área depende do dispositivo que você está utilizando. O page box fica 
dentro da área de impressão. 
 
 
 
HTML5 
39 
 
Área de impressão 
A área impressa é onde o dispositivo de impressão é capaz de imprimir. A área de 
impressão é o tamanho da page sheet menos a área de não impressão. Como a área de 
não impressão, a área útil de impressão depende muito do dispositivo. O dispositivo 
pode ajustar o conteúdo para que seja impresso sem problemas nessa área. Cada 
dispositivo tem seu meio de ajuste. 
 
Propriedade size 
A propriedade size especifica o tamanho e a orientação da área do de conteúdo, o page 
box. O tamanho do page box pode ser definida com valores absolutos (px) ou relativos 
(%). 
 
Você pode usar Três valores para definir a largura e a orientação do page box: 
 
auto 
O page box irá ter o tamanho e orientação do page sheet escolhido pelo usuário. 
 
landscape (modo paisagem) 
O page box neste caso tem o mesmo tamanho da página, mas o Lado maior é o 
horizontal. 
 
 
Portrait (modo retrato) 
O page box neste caso tem o mesmo tamanho da página, mas o lado maior é o vertical. 
 
Veja um exemplo abaixo: 
 
@page { 
 size: auto; 
 margin: 10%; 
} 
 
Como nessa caso a margem é variável, ela está sendo relativa às dimensões da página. 
Logo se a página uma A4, com as dimensões: 210mm x 297mm, as margens serão 
21mm e 29.7mm. 
 
 
Outro exemplo: 
@page { 
 size: 210mm 297mm; /* definem o page-sheet para um tamanho de A4*/ 
} 
 
Page-size 
O page-size pode ser especificado utilizando um dos media names abaixo. Isso é o 
equivalente a utilizar os valores escritos diretamente na propriedade size. Contudo é 
muito melhor utilizar o nome de um formato de formatode papel. 
 
Formato Descrição 
A5 A página deve ser definida para o tamanho ISO A5: 148mm x 210mm. 
HTML5 
40 
 
A4 A página deve ser definida para o tamanho ISO A4: 210 mm x 297 mm. 
A3 A página deve ser definida para o tamanho ISO A3: 297mm x 420mm. 
B5 A página deve ser definida para o tamanho ISO B3 media: 176mm x 250mm. 
B4 A página deve ser definida para o tamanho ISO B4: 250mm x 353mm. 
letter A página deve ser definida para o tamanho papel carta: 8.5 pol x 11 pol 
 
A4 é um dos formatos mais utilizados para impressão de documentos. 
 
Exemplo: 
@page { 
 size: A4 landscape; 
} 
 
 
Exemplo completo no documento. 
exemplo_@page.html 
 
- @font-face 
O design do website está pronto, imagens, cores e fontes. Descobre-se que a fonte 
utilizada no layout não é uma fonte padrão do sistema e provavelmente o usuário não a 
terá instalada. Fique tranquilo, o CSS3 tem a solução 
A propriedade @font-face possibilita utilizar fonts externas em websites. 
 
@font-face { 
font-family: 'LeagueGothic'; 
src: url(http://site.com/fonts/LeagueGothic.otf); 
} 
 
@font-face { 
font-family: 'Orienta'; 
src: url(Orienta.woff); 
} 
 
header { 
font-family: ' Orienta '; 
} 
 
 
Exemplo completo no documento. 
exemplo_fontface.html 
 
 
Referencias 
http://www.w3.org 
http://pt.wikipedia.org