Você está na página 1de 81

HML5

Um mero resumo

Jonas Mayer

versão 1.0

1
2
Sumário
1.Introdução.............................................................................................................................................................7
1.1.O que é HTML? ...........................................................................................................................................7
2.Estrutura básica....................................................................................................................................................7
2.1.O Doctype ....................................................................................................................................................7
2.2.O elemento HTML.......................................................................................................................................7
2.3.O HEAD.......................................................................................................................................................7
2.3.1.O elemento title.....................................................................................................................................8
2.3.2.O elemento base....................................................................................................................................8
2.3.3.O elemento link.....................................................................................................................................8
2.3.4.O elemento style....................................................................................................................................8
2.3.5.O elemento meta...................................................................................................................................8
2.3.5.1.Metatag Charset.............................................................................................................................9
2.3.6.O elemento script..................................................................................................................................9
2.4.Formatação...................................................................................................................................................9
2.5.Tag LINK......................................................................................................................................................9
2.6.Parágrafos.....................................................................................................................................................9
2.7.Cabeçalho...................................................................................................................................................10
2.8.Links...........................................................................................................................................................10
2.9.Âncoras.......................................................................................................................................................11
2.10.Imagens.....................................................................................................................................................11
2.11.Tabelas......................................................................................................................................................12
2.12.Listas.........................................................................................................................................................13
2.13. Blocos......................................................................................................................................................13
2.13.1.O elemento div..................................................................................................................................13
2.13.2.O elemento span................................................................................................................................14
2.14.Layouts.....................................................................................................................................................14
2.15.Formulários...............................................................................................................................................15
2.15.1.A tag input.........................................................................................................................................15
2.15.2.A tag select........................................................................................................................................17
2.15.3.A tag datalist......................................................................................................................................18
2.15.4.A tag keygen......................................................................................................................................18
2.15.5.A tag output.......................................................................................................................................19
2.15.6.A tag textarea....................................................................................................................................19
2.15.7.A tag label.........................................................................................................................................19
2.15.8.A tag form.........................................................................................................................................20
2.15.9.Métodos GET e POST......................................................................................................................20
2.16.O elemento iframe....................................................................................................................................21
2.17. Entidades..................................................................................................................................................21
2.18.Codificação da URL.................................................................................................................................22
2.19.O elemento canvas....................................................................................................................................22
2.20.SVG .........................................................................................................................................................23
2.21.O elemento Video.....................................................................................................................................24
2.22.O elemento Audio ....................................................................................................................................24
3. Modelos de conteúdo.........................................................................................................................................25
3.1.Categorias...................................................................................................................................................25
Metadata content...............................................................................................................................................26
base ..............................................................................................................................................................26
command .....................................................................................................................................................26
link ..............................................................................................................................................................27
meta .............................................................................................................................................................28
noscript ........................................................................................................................................................29
script ............................................................................................................................................................30

3
style .............................................................................................................................................................30
title ..............................................................................................................................................................31
Flow content.....................................................................................................................................................32
a....................................................................................................................................................................32
abbr..............................................................................................................................................................33
address..........................................................................................................................................................33
area...............................................................................................................................................................33
article............................................................................................................................................................35
aside.............................................................................................................................................................35
audio.............................................................................................................................................................35
b....................................................................................................................................................................36
bdo................................................................................................................................................................36
blockquote....................................................................................................................................................37
br..................................................................................................................................................................37
button...........................................................................................................................................................38
canvas...........................................................................................................................................................39
cite................................................................................................................................................................39
code..............................................................................................................................................................39
datalist..........................................................................................................................................................40
del.................................................................................................................................................................40
details...........................................................................................................................................................41
dfn................................................................................................................................................................41
div................................................................................................................................................................41
dl..................................................................................................................................................................42
em.................................................................................................................................................................42
embed...........................................................................................................................................................42
fieldset..........................................................................................................................................................42
figure............................................................................................................................................................43
footer............................................................................................................................................................43
form..............................................................................................................................................................44
h1 - h6..........................................................................................................................................................45
header...........................................................................................................................................................45
hgroup..........................................................................................................................................................45
hr..................................................................................................................................................................46
i....................................................................................................................................................................46
iframe...........................................................................................................................................................46
img...............................................................................................................................................................47
input.............................................................................................................................................................48
ins.................................................................................................................................................................50
kbd................................................................................................................................................................51
keygen..........................................................................................................................................................51
label..............................................................................................................................................................51
map...............................................................................................................................................................52
mark.............................................................................................................................................................53
meter.............................................................................................................................................................53
nav................................................................................................................................................................54
object............................................................................................................................................................54
ol..................................................................................................................................................................55
output...........................................................................................................................................................55
p....................................................................................................................................................................56
pre................................................................................................................................................................56
progress........................................................................................................................................................56
q....................................................................................................................................................................57
ruby..............................................................................................................................................................57

4
select.............................................................................................................................................................58
small.............................................................................................................................................................58
span..............................................................................................................................................................59
strong............................................................................................................................................................59
sub................................................................................................................................................................59
sup................................................................................................................................................................59
table..............................................................................................................................................................59
textarea.........................................................................................................................................................60
time..............................................................................................................................................................61
ul..................................................................................................................................................................61
var................................................................................................................................................................62
video.............................................................................................................................................................62
wbr...............................................................................................................................................................63
Sectioning content............................................................................................................................................63
Heading content................................................................................................................................................63
Phrasing content................................................................................................................................................63
Embedded content............................................................................................................................................64
Interactive content............................................................................................................................................65
3.2.Atributos globais.........................................................................................................................................65
3.3.Atributos de Evento....................................................................................................................................66
3.3.1.Atributos de eventos de janela............................................................................................................66
3.3.2.Eventos de formulários.......................................................................................................................66
3.3.3.Evento do teclado................................................................................................................................67
3.3.4.Eventos de Mouse...............................................................................................................................67
3.3.5.Eventos de mídia.................................................................................................................................68
4.Validação de formulários....................................................................................................................................70
4.1.pattern.........................................................................................................................................................70
4.2.novalidate e formnovalidate.......................................................................................................................70
4.3.Custom validators.......................................................................................................................................71
5.Multimedia.........................................................................................................................................................71
5.1.O elemento object.......................................................................................................................................71
5.2.Audio..........................................................................................................................................................72
5.3.Video...........................................................................................................................................................74
6.Armazenamento Web com HTML5 ................................................................................................................76
7.Cache da aplicativos HTML...............................................................................................................................77
8.Workers Web .....................................................................................................................................................79
9.Drag and Drop....................................................................................................................................................80
9.1.dragstart......................................................................................................................................................81
10.Geolocalização.................................................................................................................................................82
11.Eventos Sever-Sent...........................................................................................................................................84
12.Revisão ortográfica e gramatical......................................................................................................................85
13.O elemento device............................................................................................................................................85
13.1.Streams.....................................................................................................................................................85
Referèncias............................................................................................................................................................86

5
6
HTML

1.Introdução

1.1.O que é HTML?


HTML é uma abreviação de Hypertext Markup Language (Linguagem de Marcação de Hipertexto) Ela é uma linguagem de
marcação utilizada para produzir páginas Web.

A partir da versão 5 do HTML ou seja, HTML 5 foram adicionadas ferramentas para optimizar a interação com CSS e JavaScript,
também foram criadas novas tags e outras foram modificadas.
As atualizações desta versão também incluem:
• Novas APIs, entre elas uma para desenvolvimento de gráficos bidimensionais
• Controle embutido de conteúdo multimídia
• Aprimoramento do uso off-line
• Melhoria na depuração de erros

2.Estrutura básica
Um documento HTML é composto de elementos que possuem uma tag, atributos, valores e possivelmente filhos que podem ser
um texto simples ou outros elementos. Cada elemento deve obrigatoriamente possuir uma tag e ela deve estar entre parênteses
angulares (< e >). Veja o exemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
<title></title>
</head>
<body>
</body>
</html>

2.1.O Doctype
O Doctype deve ser a primeira linha de código do documento antes da tag HTML. No HTML5 a declaração DOCTYPE foi
simplificada:
<!DOCTYPE html!>

O Doctype indica para o navegador e para outros meios qual a especificação de código utilizar. Em versões anteriores, era
necessário referenciar o DTD diretamente no código do Doctype. Com o HTML5, a referência por qual DTD utilizar é
responsabilidade do Browser.

O Doctype não é uma tag do HTML, mas uma instrução para que o browser tenha informações sobre qual versão do código a
marcação foi escrita.

2.2.O elemento HTML


O código HTML é uma estrutura em árvore. O elemento principal ou nó raiz é sempre a tag HTML.
<html>

O atributo LANG é necessário para que os user-agents saibam qual a linguagem principal do documento. O atributo LANG não é
restrito ap elemento HTML, ele pode ser uzado em qualquer outro elemento para indicar o idioma do texto representado.

2.3.O HEAD
É na tag HEAD onde ficam os metadados. Os metadados são informações sobre a página e o conteúdo ali publicado. O elemento
pode incluir scripts, instruir o navegador a onde encontrar a folha de estilo, fornecer meta informações e muito mais.
As seguintes tags podem ser adicionadas a seção head: <title>, <style>, <meta>, <link>, <script>, <noscript>, e <base>.

7
2.3.1.O elemento title
A tag <title> define o título do documento.
O elemento <title> é necessária em todos os documentos HTML /XHTML.

O elemento <title>:
• define um título na barra de ferramentas do navegador
• fornece um título para a página que é adicionado aos favoritos
• exibe um título para a página no motor de pesquisa resultados

Um documento HTML simplificado:


<!DOCTYPE html>
<html>
<head>
<title>Título do documento</title>
</head>

<body>
O conteúdo do documento......
</body>

</html>

2.3.2.O elemento base


A tag <base> especifica o URL base /target para todas as URLs relativas em uma página:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

2.3.3.O elemento link


A tag <link> define a relação entre um documento e um recurso externo.

A tag <link> é mais utilizado para vincular a folhas de estilo:


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

2.3.4.O elemento style


A tag <style> é usada para definir informações de estilo para um documento HTML.
Dentro do elemento <style> que é especificado como elementos HTML devem ser processados em um navegador:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

2.3.5.O elemento meta


O <meta> fornece metadados sobre o documento HTML. Metadados não será exibido na página, mas será analisádo pela máquina.
Elementos meta são normalmente usados para especificar descrição da página, palavras-chave, autor do documento, modificada
pela última vez, e outros metadados.
Os metadados podem ser utilizados pelos navegadores , pelos motores de busca (palavras-chave), ou outros serviços da web.

8
2.3.5.1.Metatag Charset
Responsável por informar o encoding do documento.
<meta charset=”utf-8”>

2.3.6.O elemento script


A tag script é usada para definir um script do lado cliente, como um JavaScript.

2.4.Formatação
HTML utiliza tags como <b> e <i> para a saída de formatação, como negrito ou itálico.

Tags de formatação de texto


<b> - Define o texto em negrito
<em> - Define texto enfatizado
<i> - Define texto itálico
<small> - Define o texto como pequeno
<strong> - Define o texto como grande
<sub> - Define texto subscrito
<sup> - Define o texto sobrescrito
<ins> - Define o texto inserido
<del> - Define o texto excluído

2.5.Tag 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ágina:
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>

O atributo rel=”stylesheet” indica que aquele link é relativo a importação de um arquivo referente a folhas de estilo.
Há outros valores para o atributo REL, como por exemplo o ALTERNATE:
<link rel=”alternate” type=”application/atom+xml” title=”feed” href=”/feed/”>

Neste caso, indicamos aos user-agents que o conteúdo do site poder ser encontrado em um caminho alternativo via Atom FEED.
No HTML5 há outros links relativos que você pode inserir como o rel=”archives” que indica uma referência a uma coleção de
material histórico da página. Por exemplo, a página de histórico de um blog pode ser referenciada nesta tag.

2.6.Parágrafos
Os parágrafos dentro de um documento HTML, em geral, são representados através da tag p. Uma das características da tag p é
que ela ocupa horizontalmente todo o espaço definido pelo elemento pai.
Pelo fato da tag p se um elemento de bloco, o navegador irá ajustar o texto à largura do elemento pai realizando todas as quebras
de linha necessárias. Caso seja necessário forçar uma quebra de linha no meio de um texto, podemos utilizar a tag br.
<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de quebra de linha em um parágrafo </title >
</head >
<body >
<p>Um texto bem longo . Longo mesmo ! Este parágrafo serve para demonstrar
o comportamento da quebra de linha automática , ou seja , sem utilizar
nenhum recurso para que a quebra ocorra .</p>

<p>Já este parágrafo demonstra a qubra de linha forçada .<br/>Percebeu ?</p>


</body >
</html >

9
2.7.Cabeçalho
Uma página HTML pode conter uma hierarquia de títulos para estabelecer uma divisão de seu conteúdo. Para conseguirmos
realizar essa tarefa devemos utilizar as tags de cabeçalho h1, h2, h3, h4, h5 e h6.
Os sufixos numéricos de 1 a 6 indicam o nível do título dentro da hierarquia de títulos do documento.
Veja o exemplo:
<html>
<head>
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title>Exemplo de cabeçalhos </title >
</head>
<body>
<h1>Título 1</h1>
<h2>Título 2</h2>
<h3>Título 3</h3>
<h4>Título 4</h4>
<h5>Título 5</h5>
<h6>Título 6</h6>
</body>
</html>

Cada nível possui um tamanho diferente de fonte. Esse tamanho é determinado pelo navegador e pode ser alterado através de
regras CSS.

Devemos utilizar os cabeçalhos com cautela, pois eles são utilizados como parâmetros de ranqueamento da página por diversos
buscadores como Google, Yahoo e Bing, por exemplo. O uso correto das tags de cabeçalho faz parte das técnicas de SEO (Search
Engine Optimization) que, como o próprio nome já indica, são técnicas que ajudam a melhorar o ranqueamento de páginas dentro dos
buscadores.

De acordo com as técnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags de cabeçalhos:
• Utilizar apenas uma tag h1 por página
• Utilizar no máximo duas tags h2 por página

2.8.Links
Para criarmos um link devemos utilizar a tag a. Porém, a tag a sem atributos não irá criar nenhum link interno ou externo. Para que
um link seja criado devemos, no mínimo, utilizar o atributo href com o caminho relativo ou absoluto de uma outra página. O elemento
pode conter mais do que apenas texto, ele pode conter outros elementos como imagens.
Veja o exemplo:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Exemplo de uso da tag a</title>
</head>
<body>
<p><a href ="pagina2.html">Exemplo de link relativo</a></p>
<p><a href ="outros/pagina3.html">Outro exemplo de link relativo</a></p>
<p><a href =" http://www.k19.com.br">Exemplo de link absoluto</a></p>
</body>
</html>

Além do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o documento. Os possíveis valores
para o atributo target são:
• _blank - em uma nova janela ou aba
• _self - na mesma janela ou frame do documento que contémo link
• _parent - em um frame que seja o "pai"do frame no qual o link se encontra
• _top - na mesma janela do documento que contém o link

Nota: _self e _top possuem o mesmo comportamento se a página que contém o link não estiver em um frame. Caso o link esteja em
um frame e com o valor _top no atributo target, o link será aberto na janela na qual o frame se encontra. Se o valor for _self, o link
será aberto no próprio frame.
Dentro de uma única página podemos ter diversos frames e, às vezes, queremos que um link de um determinado frame seja aberto
em outro. Para realizarmos tal tarefa devemos inserir como o valor do atributo target o nome do frame no qual o link será aberto.
O comportamento padrão de um link é abrir o documento na mesma página ou frame caso o atributo target não seja utilizado.

10
Nota: As tags frame e iframe não são suportadas pelo HTML5.
<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag a com o atributo target </title >
</head >
<body >
<p><a href =" pagina1 . html " target =" _blank ">Abre em outra janela /aba </a></p>
<p><a href =" pagina2 . html " target =" _self ">Abre na mesma janela </a></p>
<p><a href =" pagina3 . html ">Abre na mesma janela </a></p>
</body >
</html >

2.9.Âncoras
Além de criar links para outras páginas o HTML nos permite criar links para uma determinada seção dentro da própria página na
qual o link se encontra ou dentro de outra página. Esse recurso chama-se ancoragem, pois as seções para as quais queremos criar um
link devem possuir uma âncora.
Para criarmos umaâncora devemos utilizar novamente a tag a, porém sem o atributo href. Dessa vez utilizaremos o atributo name
para identificar a seção através de um nome.
O link também muda levemente, pois agora ao invés de passar somente o nome do arquivo da página como valor do atributo href
devemos passar o nome da seção prefixada com o caractere #.

<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag a como âncora </title >
</head >
<body >
<p><a href ="# mais_info ">Veja mais informações </a></p>
<p><a href =" pagina2 . html # outra_ancora ">Âncora em outra página </a></p>
...
<a name =" mais_info ">Mais informações </a>
<p>
...
</p>
</body >
</html >

Nota: Até a versão 4 do HTML e no XHTML a especificação dizia para utilizarmos o atributo name para criarmos as âncoras. Porém,
no HTML5, a recomendação do W3C é que se utilize o atributo id.

2.10.Imagens
Em HTML, imagens são definidas com a tag img. A teg img é vazia, isso significa que ela possui apenas atributos enão tem tag de
fechamento.
Para exibir uma imagem em uma página, você precisa usar o atributo src. Src significa source (fonte). O valor do atributo src é o
URL da imagem que você deseja exibir
A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar dentro de um documento HTML.
O valor do atributo pode ser o caminho absoluto ou relativo de uma imagem.
<img src="url" alt="some_text">

O atributo alt especifica um texto alternativo caso a imagem não possa ser exibida.
Para especificar o tamanho da imagem são usados os atributos width e height.
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

Dica: È uma boa prática especificar o tamanho da imagem. Se os atributos de tamanho são definidos o espaço nescessário para a
imagem é reservado quando a página é carregada. Sem esses atributos o navegador não sabe o tamanho da imagem, desse modo o
layout da página vai mudar durante o carregamento.

2.11.Tabelas
Tabelas são definidas pela tag <table>.

11
Uma tabela é dividida em linhas(com a tag <tr>) , e cada linha é dividisa em células com dados(com a tag<td>).
A tag td pode conter texto, links, imagens, listas, formulários tabelas e outros.

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Bordas
Para exibir uma tabela com bordas, especifique o atributo border:
Se você não especificar um atributo de border, a tabela será exibida sem bordas. Às vezes isso pode ser útil, mas na maioria das
vezes, queremos mostrar as bordas.

Cabeçalhos
Informações de cabeçalho em uma tabela são definidas com a tag <th>.

Todos os principais navegadores exibir o texto no elemento <th> como negrito e centralizado.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Tags
• tr - define uma linha da tabela
• th - define uma célula de cabeçalho
• td - define uma célula
Também é possível utilizar essas tags:
• thead - define o cabeçalho da tabela
• tfoot - define o rodapé da tabela
• tbody - define o corpo da tabela

Por que complicar? Qual o motivo da existência dessas tags?


• A tag thead, assim como a tfoot, servem para agrupar as linhas de cabeçalho e de rodapé, respectivamente.
• O código fica mais claro.
• Facilita a aplicação de estilos CSS (através do seletor de elemento)
• Pode permitir que o conteúdo do corpo da tabela possua rolagem*.
• Ao imprimir a página com uma tabela muito extensa, pode permitir que o cabeçalho e rodapé sejam replicados em todas as
páginas.
Outros dois atributos importantes para a construção de tabelas são colspan e rowspan que podem ser aplicados nos elementos com
a tag td e th :
O atributo colspan faz com que a célula ignore o número de colunas definidas em seu valor. Analogamente, o atributo rowspan faz
o mesmo, porém com linhas.

2.12.Listas
Em um documento HTML podemos ter três tipos de listas e cada uma delas deve ser utilizada de acordo com a sua semântica, ou
seja, você deve escolher um tipo de lista para cada situação.

12
Os três tipos possíveis de listas são:
• Lista de definição - utilizada para exibir definições de termos. Funciona como nos dicionários, no qual temos uma palavra e
em seguida o seu significado.
Para criar uma lista de definição utiliza-se a tag dl. O elemento com a tag dl deve possuir pelo menos um filho com a tag dt
seguido de um elemento com a tag dd, isto é, um item na lista de definição é composto por um par de elementos com as tags dt e dd.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

• Lista ordenada - utilizada para exibir qualquer conteúdo de forma ordenada.


Para criar uma lista ordenada utiliza-se a tag ol. O elemento com a tag ol deve possuir pelo menos um filho coma tag li.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

• Lista sem ordem - utilizada para exibir qualquer conteúdo sem ordenação.
Para criar uma lista sem ordem utiliza-se a tag ul. O elemento com a tag ul deve possuir pelo menos umfilho com a tag li.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

2.13. Blocos
Elementos HTML podem ser agrupados com <div> e <span>.

2.13.1.O elemento div


O elemento <div> HTML é um elemento de bloco de nível que pode ser utilizado como um recipiente para o agrupamento de
outros elementos HTML.
O elemento <div> não tem nenhum significado especial. Só que, porque é um elemento nível de bloco, o navegador irá mostrar
uma quebra de linha antes e depois dele.
Quando usado junto com o CSS, o elemento <div> pode ser usado para definir atributos de estilo de grandes blocos de conteúdo.
Outro uso comum do elemento <div>, é para o layout do documento. Ele substitui a "velha forma" da definição de layout usando
tables. O uso de tabelas não é o uso correto do elemento <table>. O propósito do elemento <table> é exibir dados tabulares.

2.13.2.O elemento span


O elemento HTML <span> é um elemento interno que pode ser usado como um recipiente para o texto.
O elemento <span> não tem nenhum significado especial.
Quando usado em conjunto com CSS, o elemento <span> pode ser usado para definir atributos de estilo para as partes do texto.

2.14.Layouts
Layout de página web é muito importante para fazer o seu site com bom aspecto.
Layouts de site
A maioria dos sites têm colocado o seu conteúdo em várias colunas (formatado como uma revista ou jornal).

Várias colunas são criadas usando os elementos <div> ou <table> . CSS é usados para posicionar elementos, ou para criar fundos
ou visual colorido para as páginas.Mesmo que seja possível a criação de layouts agradáveis com tabelas HTML, as tabelas foram
projetados para apresentar dados tabulares - não como uma ferramenta de layout!

Layouts de HTML - Usando Elementos <div>


O elemento div é um elemento nível de bloco usado para agrupar elementos HTML.

O exemplo a seguir utiliza cinco elementos div para criar uma disposição de várias colunas:

13
<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">


<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">


<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">


Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">


Copyright © W3Schools.com</div>

</div>

</body>
</html>

Dicas úteis
Dica: A maior vantagem de usar o CSS é que, se você colocar o código CSS em uma folha de estilo externa, seu site se torna muito
mais fácil de manter. Você pode alterar o layout de todas as suas páginas, editando um arquivo. Para saber mais sobre CSS, estude o
nosso tutorial CSS.

Dica: Como layouts avançados levam tempo para serem criados, uma opção mais rápida é usar um template. Pesquise do Google por
website templates grátis (estes são layouts pré-construídos de site que você pode usar e personalizar).

2.15.Formulários
Formulários HTML são usados para selecionar diferentes tipos de entrada de dados do usuário.
Formulários HTML são usados para transmitir dados para um servidor. Um formulário HTML pode conter elementos de entrada.
A tag <form> é usada para criar um formulário HTML:
<form>
.
input elements
.
</form>

2.15.1.A tag input


O elemento <input> é usado para selecionar as informações do usuário.
A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seu atributo type. O atributo type pode
receber os seguintes valores:
• button - cria um botão. Através do atributo value definimos o texto do botão.
<p>
button :
<input type =" button " value =" Botão " />
</p>

• checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível
que se crie um grupo de checkboxes no qual um ou mais checkboxes seja "checado".
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car

14
</form>

• color - Define um seletor de cores


Select your favorite color: <input type="color" name="favcolor">

• date - Define um controle de data (ano, mês e dia (sem tempo))


Birthday: <input type="date" name="bday">

• datetime - Define um controle de data e hora (ano, mês, dia, hora, minuto, segundo, e fração de segundo, com base no UTC
fuso horário)
Birthday (date and time): <input type="datetime" name="bdaytime">

• datetime-local - Define um controle de data e hora (ano, mês, dia, hora, minuto, segundo, e fração de segundo (sem fuso
horário)
Birthday (date and time): <input type="datetime-local" name="bdaytime">

• email - Define um campo para um endereço de e-mail


E-mail: <input type="email" name="usremail">

• file - cria um botão que, ao ser clicado, abre uma caixa de diálogo para a escolha de um arquivo no computador do usuário.
<p>
file :
<input type =" file " />
</p>

• hidden - cria um elemento que não fica visível para o usuário, porém pode conter um valor que será enviado pelo formulário.
<p>
hidden :
<input type =" hidden " value =" valor escondido " />
</p>

• image - cria um botão para o envio do formulário. Dese ser utilizado em conjunto com o atributo src para que uma imagem
de fundo seja utilizada no botão.
<p>
image :
<input type =" image " src ="/img/logo.png " />
</p>

• month - Define um controle de mês e ano (sem fuso horário)


Birthday (month and year): <input type="month" name="bdaymonth">

• number - Define um campo para digitar um número


Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

• password - cria uma caixa de texto de uma linha escondendo os caracteres digitados.
<form>
Password: <input type="password" name="pwd">
</form>

• radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name é possível que se
crie um grupo de radios no qual apenas um radio seja "checado".
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

• range - Define um controle para a entrada de um número cujo valor exato não é importante (como um controle deslizante)

15
<input type="range" name="points" min="1" max="10">

• reset - cria um botão que descarta todas as alterações feitas dentro de um formulário. Através do atributo value definimos o
texto do botão.
<p>
reset :
<input type =" reset " value =" Descartar alterações " />
</p>

• search - Define um campo texto para inserir uma string de pesquisa


Search Google: <input type="search" name="googlesearch">

• submit - cria um botão para o envio do formulário. Através do atributo value definimos o texto do botão.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

• tel - Define um campo para digitar um número de telefone


Telephone: <input type="tel" name="usrtel">

• text - cria uma caixa de texto de uma linha.


<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

• time - Define um controle de entrada de tempo (sem fuso horário)


Select a time: <input type="time" name="usr_time">

• url - Define um campo para digitar uma URL


Add your homepage: <input type="url" name="homepage">

• week - Define um controle de semana e ano (sem fuso horário)


Select a week: <input type="week" name="week_year">

Nota: Alguns valores do atributo input foram adicionados no HTML5 e nem todos os navegadores o suportam.

2.15.2.A tag select


A tag select permite ao usuário escolher um ou mais itens de uma lista. O atributo multiple, quando presente, informa ao
navegador que mais de um item pode ser selecionado. A lista de itens deve ser informada através de elementos com a tag option. Tais
elementos devem ser filhos diretos ou indiretos do elemento com a tag select. Além disso, cada item pode conter o atributo value para
informar o valor associado a uma determinada opção.
<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag select </title >
</head >
<body >
<form action =" pagina . html " method =" get ">
<p>
Selecione uma cidade :
<select >
<option value ="sao - paulo ">São Paulo </option >
<option value ="rio -de - janeiro ">Rio de Janeiro </option >
<option value ="porto - alegre ">Porto Alegre </option >
<option value =" curitiba ">Curitiba </option >
</select >

16
</p>
<p>
Selecione uma ou mais categorias de produtos ( mantenha a tecla
" control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ):
<select multiple =" multiple ">
<option value =" desktops ">Desktops </option >
<option value =" notebooks ">Notebooks </option >
<option value =" tablets ">Tablets </option >
<option value =" celulares ">Celulares </option >
</select >
</p>
</form >
</body >
</html >

Caso exista a necessidade de agrupar as opções de um elemento com a tag select, podemos utilizar utilizar a tag optgroup em
conjunto com o atributo label. Veja o exemplo:
<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag select </title >
</head >
<body >
<form action =" pagina . html " method =" get ">
<p>
Selecione uma cidade :
<select >
<optgroup label =" Região Sudeste ">
<option value ="sao - paulo ">São Paulo </option >
<option value ="rio -de - janeiro ">Rio de Janeiro </option >
</optgroup >
<optgroup label =" Região Sul ">
<option value ="porto - alegre ">Porto Alegre </option >
<option value =" curitiba ">Curitiba </option >
</optgroup >
</select >
</p>

<p>
Selecione uma ou mais categorias de produtos ( mantenha a tecla
" control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ):
<select multiple =" multiple ">
<optgroup label ="De mesa ">
<option value =" desktops ">Desktops </option >
</optgroup >
<optgroup label =" Portáteis ">
<option value =" notebooks ">Notebooks </option >
<option value =" tablets ">Tablets </option >
<option value =" celulares ">Celulares </option >
</optgroup >
</select >
</p>
</form >
</body >
</html >

2.15.3.A tag datalist


O elemento <datalist> especifica uma lista de opções pré-definidas para um elemento <input>.

O elemento <datalist> é usado para fornecer um recurso "autocompletar" em elementos <input>. Os usuários verão uma lista
suspensa de opções pré-definidas como entrada de dados.

17
Use o atributo do elemento <input> da lista para vinculá-lo em conjunto com um elemento <datalist>.
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

2.15.4.A tag keygen


A finalidade do elemento <keygen> é o de proporcionar uma forma segura de autenticar os utilizadores.
A tag <keygen> especifica um campo gerador de par de chaves em um formulário.
Quando o formulário é enviado, duas chaves são gerados, uma público e uma privada .

A chave privada é armazenada localmente, e a chave pública é enviada para o servidor. A chave pública pode ser usada para gerar
um certificado de cliente para autenticar o utilizador no futuro.

<form action="demo_keygen.asp" method="get">


Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

2.15.5.A tag output


O elemento <output> representa o resultado de um cálculo (como um realizado por um script).
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

2.15.6.A tag textarea


A tag textarea exibe uma caixa de texto na qual o usuário poderá inserir um texto qualquer. A diferença para a tag input com o
atributo type com o valor text é que a tag textarea permite a inserção de textos mais longos e com quebras de linha.

<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag textarea </title >
</head >
<body >
<form action =" pagina . html " method =" get ">
<p>
textarea :
<textarea >
</textarea >
</p>
</form >
</body >
</html >

2.15.7.A tag label


Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulário apresentados. Podemos pensar
nesses textos como rótulos de cada elemento e é exatamente para esse fim que devemos utilizar a tag label do HTML.
Além de servir como rótulo, a tag label auxilia o usuário a interagir comos elementos do formulário. Utilizando o atributo for

18
podemos fazer com que um elemento do formulário receba o foco.
Veja o exemplo:
<html >
<head >
<meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8">
<title >Exemplo de uso da tag label </title >
</head >
<body >
<form action =" pagina . html " method =" get ">
<p>
<label for =" nome ">Nome :</label >
<input type =" text " id=" nome " />
</p>
</form >
</body >
</html >

Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que desejamos focar.

2.15.8.A tag form


A tag form irá definir, de fato, o nosso formulário. Todos os elementos de formulário que vimos anteriormente devem ser filhos
diretos ou indiretos de um elemento com a tag form para que os dados vinculados a esses elementos sejam enviados.
O atributo action é define para onde os dados de um formulário deve ser enviado. Além disso, devemos informar a maneira como
queremos que esses dados sejam enviados, ou seja, se queremos que eles sejam enviados através de uma requisição do tipo GET ou
POST (métodos de envio definidos no protocolo HTTP).

2.15.9.Métodos GET e POST


O Hypertext Transfer Protocol (HTTP) foi projetado para realizar comunicação entre o cliente e o servidor.
HTTP funciona como um protocolo de solicitação-resposta entre um cliente e servidor.
Um navegador da Web pode ser o cliente, e um aplicativo em um computador que hospeda um site pode ser o servidor.

Os métodos GET e POST


Os dois métodos usados para solicitação-resposta entre o cliente e o servidor são: GET e POST
• GET - Requisita dados de um recurso especificado
• POST - Envia dados para serem processados para um recurso especificado

O método GET
Observe que a string de consulta é enviada na URL de um pedido GET.
/test/demo_form.asp?name1=value1&name2=value2

Algumas notas sobre requisições GET:


• requisições GET podem ser armazenadas em cache
• requisições GET permandecem no histórico de navegação
• requisições GET podem ser favoritadas
• requisições GET nunca devem ser usadas para lidar com dados sensíveis
• requisições GET podem ter restrições de comprimento
• requisições GET devem ser usados apenas para recuperar dados

O método POST
Observe que a string de consulta é enviado no corpo da mensagem HTTP de um pedido POST.
POST /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2

Algumas notas sobre o requisições POST:


• requisições POST ninca são armazenadas em cache
• requisições POST não podem ser favoritadas
• requisições POSTnão tem restrições quanto ao comprimento dos dados

19
Comparação GET vs. POST

GET POST
botão voltar/recarregar inofensivo Os dados serão re-submetidos (o browser
deve alertar o usuário de que os dados
estão prestes a ser re-submetidos)
Favoritar SIM NÃO
Armazenar em cache SIM NÃO
Tipos de codificação aplicação/x-www-form-urlcodificado aplicação/x-www-form-urlcodificado ou
multipart/form-data . Use a codificação
multipart para dados binarios.
Histórico Parâmetros permanecem no histórico do Os parâmetros não são salvos no histórico
navegador do navegador
Restrição de tamanho de dados Sim, ao enviar dados, o método GET Sem restrição
adiciona os dados à URL, e o comprimento
de um URL é limitado (comprimento
máximo de URL é de 2048 caracteres)
Restrição de tipos de dados Somente caracteres ASCII Sem restrições. Os dados binários também
são permitido
Segurança GET é menos seguro em relação ao post, O POST é um pouco mais seguro do que
porque os dados enviados são parte da GET, porque os parâmetros não são
URL armazenadas no histórico do navegador ou
em logs de servidores web
Nunca use GET quando enviar senhas ou
outras informações confidenciais!
Visibilidade Dados ficam visíveis para todos na URL Os dados não são exibidos na URL

Outros métodos HTML


A tabela a seguir lista alguns outros métodos de solicitação HTTP:
HEAD - Mesmo que GET, mas retorna apenas cabeçalhos HTTP e nenhum corpo do documento
PUT - Envia uma representação da URI especificada
DELETE - Exclui o recurso especificado
OPTIONS - Retorna os métodos HTTP que o servidor suporta
CONNECT - Converte uma solicitação de conexão em uma traspatente TCP/IP tunnel.

2.16.O elemento iframe


Um iframe é usado para exibir uma página web dentro de uma página web.
Sintaxe para adicionar um iframe:
<iframe src="URL"></iframe>

O URL aponta para a localização da página separada.


Os atributos de altura e largura são usadas para especificar a altura ea largura do iframe. Os valores de atributo são especificadas
em pixels por padrão, mas podem também ser em percentagem (como "80%").

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

Removendo a borda
O atributo frameborder especifica se deve ou não exibir uma borda em torno do iframe.
Definir o valor do atributo como "0" remove a borda:
<iframe src="demo_iframe.htm" frameborder="0"></iframe>

Usar iframe como destino para um link


O atributo de destino de um link deve se referir ao atributo nome do iframe:
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

20
2.17. Entidades
Caracteres reservados em HTML deve ser substituído por entidades de caracteres.
Alguns caracteres são reservados em HTML.
Não é possível usar sinais de menor que (<) ou maior que (>) em seu texto, porque o navegador irá misturá-los com etiquetas.
Para realmente exibir caracteres reservados, devemos usar entidades de caracteres no código-fonte HTML.
Uma entidade de caráter parece com isto:
&entity_name;
OR
&#entity_number;
Para exibir um sinal de menor que devemos escrever: &lt; ou &#60;

Espaço sem quebra


Uma entidade de caráter comum utilizada em HTML é o espaço sem quebra ().

Navegadores sempre truncam espaços em páginas HTML. Se você escrever 10 espaços no seu texto, o navegador irá remover 9
deles, antes de exibir a página. Para adicionar espaços ao seu texto, você pode usar a entidade caráter &nbsp;.

2.18.Codificação da URL
Uma URL pode ser composta por palavras ou um endereço IP (Internet Protocol). Navegadores acessam páginas Web de servidores
web usando uma URL.
Um endereço web é formado pela seguinte sintaxe:
scheme://host.domain:port/path/filename

Sendo:
• scheme - define o protocolo. O mais usado é o http.
• host - define o dominio do host (o padrão para http é o www).
• domain - define o nome do dominio
• :port - define o número da porta no host (o padrão para http é 80)
• path - define um caminho no servidor (se omitido, o documento estar armazenado no diretório raiz )
• filename - define o nome de um documento /recurso

Protocolos comuns
Protocolo Abreviação de...
http HyperText Transfer Protocol Páginas web comuns começam com http://.
Não criptografado
https Secure HyperText Transfer Protocol Páginas Web protegidas. Todas as
informações trocadas são criptografadas.
ftp File Transfer Protocol Para fazer o download ou upload de
arquivos para um site. Útil para a
manutenção de domínio
file Um arquivo em seu computador

Codificação de URL
URLs só pode ser enviada pela Internet, utilizando o conjunto de caracteres ASCII.
Uma vez que muitas vezes URLs conter caracteres fora do conjunto ASCII, a URL tem que ser convertida para um formato ASCII
válido.
Codificação de URL converte caracteres em um formato que pode ser transmitido através da Internet.
Codificação de URL não substitui caracteres ASCII com um "%" seguido de dois dígitos hexadecimais.

2.19.O elemento canvas


O elemento canvas é um novo elemento introduzido no HTML 5.
O elemento <canvas> é usado para desenhar gráficos, em tempo real, em uma página web.
O elemento <canvas> HTML5 é usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript).
O elemento <canvas> é apenas um recipiente para gráficos. Você deve usar um script para realmente desenhar os gráficos.

Criando um canvas

21
A tela é uma área retangular em uma página HTML, e é especificado com o elemento <canvas>.
Nota: Por padrão, o elemento <canvas> não tem fronteira e nenhum conteúdo.
A marcação é assim:
<canvas id="myCanvas" width="200" height="100"></canvas>

Nota: Sempre especifique um atributo id (para ser referenciado pelo script) e os atributos height e width para definir o tamanho.

Para adicionar bordas, use o atributo style:


<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>

Desenhar sobre a tela com JavaScript


Todo o desenho sobre a tela deve ser feito dentro de um JavaScript:
Exemplo:
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

2.20.SVG
HTML 5 tem suporte para SVG embutido.
O que é SVG?
• SVG significa Scalable Vector Graphics
• SVG é usado para definir gráficos vetoriais para a web
• SVG define os gráficos em formato XML
• Gráficos SVG não perder nenhuma qualidade se forem ampliada ou redimensionada
• Cada elemento e cada atributo em arquivos SVG pode ser animado
• SVG é uma recomendação da W3C

Vantagens do SVG
Vantagens da utilização de SVG sobre outros formatos de imagem (como JPEG e GIF) são:

• Imagens SVG podem ser criados e editados com qualquer editor de texto
• Imagens SVG podem ser pesquisados, indexados, roteirizados e comprimidos
• Imagens SVG são escaláveis
• Imagens SVG podem ser impressas com alta qualidade em qualquer resolução
• Imagens SVG são zoomable (a imagem pode ser ampliada sem degradação)

Incorporar SVG diretamente em páginas HTML


Em HTML 5 você pode incorporar SVG diretamente na página HTML através do elemento SVG.
Exemplo:
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">


<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Diferenças entre SVG e Canvas


SVG é uma linguagem para descrever gráficos 2D em XML.
Canvas desenha gráficos 2D, em tempo real (com JavaScript).
SVG é baseado em XML, o que significa que cada elemento está disponível no DOM SVG. Você pode anexar manipuladores de

22
eventos JavaScript para um elemento.
Em SVG, cada forma desenhada é lembrada como um objeto. Se os atributos de um objeto SVG são alteradas, o navegador pode
automaticamente renderizar novamente a forma.
Canvas é renderizada pixel por pixel. Na tela, uma vez que o gráfico é desenhado, é esquecido pelo navegador. Se a sua posição
deve ser mudado, todo o cenário precisa ser redesenhado, incluindo quaisquer objetos que possam ter sido cobertos pelo gráfica.

2.21.O elemento Video


Muitos sites modernos mostram vídeos. HTML5 fornece um padrão para mostrar-los.
Video na Web
Até agora, não houve um padrão para mostrar um vídeo /filme em uma página web.
Hoje, a maioria dos vídeos são mostrados através de um plug-in (como flash). No entanto, os navegadores diferentes podem ter
diferentes plug-ins.
HTML5 define um novo elemento que especifica uma forma padrão de inserir um vídeo /filme em uma página web: o elemento
<video>.

Como funciona
Para mostrar um vídeo com HTML 5 use:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

O atributo de controle adiciona controles de vídeo, como play, pause e volume.


Também é uma boa idéia sempre incluem largura e atributos de altura. Se a altura e largura são definidos, o espaço necessário para
o vídeo é reservado quando a página é carregada. No entanto, sem esses atributos, o navegador não sabe o tamanho do vídeo, e não
pode reservar o espaço apropriado para isso. O efeito será que o layout da página vai mudar durante o carregamento (enquanto o vídeo
é carregado).
Você também deve inserir o conteúdo de texto entre a tag <video> e </vídeo> para navegadores que não suportam o elemento
<video>.
O elemento <video> permite multiplos elementos <source>. elementos <source> podem se vincular a arquivos de vídeo
diferentes. O browser usará o formato reconhecido inicialmente.

Tipos MIME para formatos de video


Formato tipo MIME
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Métodos e propriedades DOM


HTML5 tem métodos DOM, propriedades e eventos para os elementos <video> e <audio>.
Estes métodos, propriedades e eventos permitem que você manipule elementos <video> e <audio> usando JavaScript.
Existem métodos para reproduzir, pausa, e carregar, por exemplo, e existem propriedades (como duração e volume). Há também
eventos DOM que pode notificá-lo quando o elemento <video> começa a executar, pausar , terminar, etc

2.22.O elemento Audio


Até agora, não houve um padrão para a reprodução de arquivos de áudio em uma página web.
Hoje, a maioria dos arquivos de áudio são reproduzidos através de um plug-in (como flash). No entanto, os navegadores diferentes
podem ter diferentes plug-ins.
HTML5 define um novo elemento que especifica uma forma padrão para incorporar um arquivo de áudio em uma página web: o
elemento <audio>.

Como funciona
Para usar o elemento audio de HTML5 use:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.

23
</audio>

O atributo de controle adiciona controles de áudio, como play, pause e volume.


Você também deve inserir um de texto entre a tag <audio> e </audio> para navegadores que não suportam o elemento <audio>.
O elemento <audio> permite multiplos elementos <source>. elementos <source> pode se vincular a diferentes arquivos de áudio.
O navegador usará o formato reconhecido inicialmente.

Tipos MIME para formatos de audio


Formato tipo MIME
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg

3. Modelos de conteúdo
Há pequenas regras básicas no HTML que definem o comportamento,a localização e a hieraquia dos elementos. 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.

Algumas premissas dos elementos são:


• 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.

3.1.Categorias
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content

24
Metadata content
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.

Os elementos que compõe a categoria Metadata são:

base
Definição e Uso:
A tag <base> especifica a URL ou destino base para todas as URLs correspondentes em um documento.
Pode haver no máximo um elemento <base> em um documento e ele deve estar dentro do elemento <head>.

Dicas e notas:
Dica: Coloque a tag <base> como o primeiro elemento dentro do elemento <head>, de modo que outros elementos da secção de head
usem as informações do elemento <base>.

Nota: Se o tag <base> está presente, ele deve ter o atributo de um href ou um atributo de destino, ou ambos.

Diferenças entre HTML e XHTML:


Em HTML a tag <base> não tem tag final.
Em XHTML a tag <base> deve ser devidamente fechado.

Atributos:
Atributo Valor Descrição
href URL Especifica a URL base para todas as URLs correspondentes na página.
target _blank Especifica o destino padrão para todos os hyperlinks e forms na página.
_parent
_self
_top
framename

Atributos globais e Eventos:


A tag <base> também suporta os atributos globais do HTML. Mas não suporta nenhum atributo de evento.

Exemplo:
Especifica uma URL padrão e um destino padrão para todos os links em uma página.
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>

<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman">
<a href="http://www.w3schools.com">W3Schools</a>
</body>

command
Definição e uso:
A tag <command> define um comando (um radiobutton, um checkbox ou um botão de comando) que o usuário pode invocar.

Um comando pode ser parte de um menu de contexto ou barra de ferramentas, usando o elemento <menu>, ou pode ser colocada em
qualquer outro lugar na página, para definir um atalho de teclado.

Atributos:
Atributo Valor Descrição
checked checked Especifica que o comando deve ser verificada quando a página é carregada. Apenas para
type = "radio" ou type = "checkbox"
disabled disabled Especifica que o comando deve ser desativado

25
icon URL Especifica uma imagem que representa o comando
label text Obrigatório. Especifica o nome do comando, que sera mostrado para o usuário
radiogroup groupname Especifica o nome do grupo de comandos que vai ser alternados quando o próprio
comando é alternado. Apenas para type = "radio"
type checkbox Especifica o tipo de comando
command
radio

Atributos Globais:
A tag <command> também suporta os atributos globais. E suporta os atributos de evento.

Dicas e Notas:
Nota: a tag <command> somente é compativel com o IE.

Exemplo:
Um elemento <command> pode ser marcado assim:
<menu>
<command type="command" label="Save" onclick="save()">Save</command>
</menu>

link
Definição e uso:
A tag <link> define a relação entre um documento e um recurso externo.
A tag <link> é o mais utilizado para vincular a folhas de estilo.
Nota: O elemento <link> é um elemento vazio, somente contém atributos.
Nota: Este elemento vai somente na seção head, mas pode aparecer varias vezes.

Diferenças entre HTML e XHTML


No HTML a tag <link> não tem tag final.
No XHTML a tag <link> deve ser devidamente fechado.

Atributos:
Atributo Valor Descrição
href URL Especifica o local do documento linkado
hreflang language_code Especifica o idioma do texto no documento linkado
media media_query Especidica em que dispositivo o documento linkado será exibido
rel alternate Obrigatório. Especifica a relação entre o documento atual e o documento linkado.
archives
author
bookmark
external
first
help
icon
last
license
next
nofollow
noreferrer
pingback
prefetch
prev
search
sidebar
stylesheet
tag
up
sizes HeightxWidth Especifica o tamanho do recurso linkado. Apenas para rel = "ícon"

26
any
type MIME_type Especifica o tipo de MIME do documento linkado.

Atributos globais e eventos


A tag <link> suporta os atributos globais e também suporta os atributos de evento.
Exemplo:
Link para uma folha de estilo externa:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

meta
Definição e uso:
Metadados são dados (informações) sobre os dados.
O <meta> fornece metadados sobre o documento HTML. Metadados não será exibido na página, mas serão analisáveis pela máquina.
Elementos meta são normalmente usados para especificar descrição da página, palavras-chave, autor do documento, modificada pela
última vez, e outros metadados.
Os metadados podem ser utilizados pelos navegadores (como exibir conteúdo ou página de recarga), motores de busca (palavras-
chave), ou outros serviços da web.

Dicas e notas:
Nota: tags <meta> sempre vai dentro do elemento <head>.
Nota: Os metadados é sempre passado em pares nome /valor.
Nota: O atributo de conteúdo deve ser definido se o nome ou o atributo http-equivalente está definido. Se nenhum desses forem
definidos, o atributo de conteúdo não pode ser definido.

Diferença entre HTML e XHTML


No HTML a tag <meta> não tem tag final.
No XHTML a tag <meta> precisa ser devidamente fechada.

Atributos:
Atributos Valores Descrição
charset character_set Especifica o encoding para o documento HTML
content text Indica o valor associado ao http-equivalente ou atributo nome
http-equiv content-type Fornece um cabeçalho HTTP para a informação /valor do atributo content
default-style
refresh
name application-name Especifica um nome para os metadados
author
description
generator
keywords

Atributos Globais:
A tag <meta> suporta os atributos globais.

Exemplo:
Descreve metadados dentro do documento HTML.
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
</head>

Exemplo 1 - Definir palavras-chave para os motores de busca:


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

27
Exemplo 2 - Definir uma descrição da página web:
<meta name="description" content="Free Web tutorials on HTML and CSS">

Exemplo 3 - Definir o autor de uma página:


<meta name="author" content="Hege Refsnes">

Exemplo 4 - Atualiza documento a cada 30 segundos:


<meta http-equiv="refresh" content="30">

noscript
Definição e uso:
A tag <noscript> é usada para fornecer um conteúdo alternativo a usuários que tenham desativados scripts em seu navegador ou
navegador que não suporta script do lado cliente.
O elemento <noscript> pode conter todos os elementos que você pode encontrar dentro do elemento <body> de uma página HTML
normal.

O conteúdo dentro do elemento <noscript> só será exibido se os scripts não são suportados, ou estão desativados no navegador do
usuário.

Dicas e Notas:
Dica: É uma boa usar comentários para esconder scripts de browsers sem suporte para scripts do lado client (para que eles não mostrá-
los como texto simples):
<script>
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

Atributos Globais:
A tag <noscript> suporta atributos globais.

Exemplo:
Uso da tag <noscript>:
<script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

script
Definição e Uso:
A marca <script> é usado para definir um script do lado do cliente, como um JavaScript.
O elemento <script> ou contém declarações de scripts, ou ele aponta para um arquivo de script externo através do atributo src.
Os usos comuns para JavaScript são de manipulação de imagem, validação de formulário, e as mudanças dinâmicas do conteúdo.

Dicas e notas:
Nota: Se o atributo "src" está presente, o elemento <script> deve estar vazio.
Dica: Também olhar para o elemento <noscript> para usuários que desabilitaram os scripts em seu browser, ou ter um navegador que
não suporta scripting do lado cliente.
Nota: Existem várias maneiras de um script externo podem ser executadas:

Se async = "async": O script é executado de forma assíncrona com o resto da página (o script será executado enquanto a página
continua a análise)
Se async não está presente e adiar = "adiar": O script é executado quando a página terminou de análise
Se nem async ou adiar está presente: O script é buscada e executada imediatamente, antes de o navegador continua analisando a
página

28
Diferenças entre HTML e XHTML
Em XHTML, o conteúdo dentro de scripts é declarado como # PCDATA (em vez de CDATA), o que significa que as entidades serão
analisadas.

Isto significa que em XHTML, todos os caracteres especiais devem ser codificados, ou todo o conteúdo deve ser acondicionada dentro
de uma seção CDATA:
<script type="text/javascript">
//<![CDATA[
var i=10;
if (i<5)
{
//some code
}
//]]>
</script>

Atributos:
Atributo Valor Descrição
async async Especifica que o script é executado de forma assíncrona (somente para scripts externos)
charset charset Especifica o encoding usado em um arquivo de script externo
defer defer Especifica que o script é executado quando a página terminou a análise (apenas para scripts
externos)
src URL Especifica a URL de um arquivo de script externo
type MIME-type Especifica o tipo MIME do script

Atributos Globais
A tag <script> suporta os atributos globais

Exemplo:
Imprime "Hello world" em JavaScript
<script>
document.write("Hello World!")
</script>

style
Descrição e uso:
A tag <style> é usado para definir informações de estilo para um documento HTML.
Dentro do elemento <style> você especificar como elementos HTML devem processar em um navegador.
Cada documento HTML pode conter vários tags <style>.

Dicas e notas:
Dica: Para ligar a uma folha de estilo externa, use a tag <link>.
Nota: Se o atributo "scoped" não é usado, cada marca <style> deve ser localizado na seção de head.
Atributos:
Atributos Valores Descrição
media media_query Especifica para qual midia/dispositivo o recurso de media é otimizado.
scoped scoped Especifica que o estilo apenas se aplicam aos elementos pais e seus elementos filhos.
type text/css Especifica o tipo MIME da folha de estilo.

Atributos globais e eventos:


Esta tag suporta os atributos globais e os atributos de eventos.
Exemplo:
O uso do elemento <style> em um documento HTML:
<html>
<head>
<style type="text/css">
h1 {color:red;}

29
p {color:blue;}
</style>
</head>

<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>

title
Definição e uso:
A tag <title> é necessária em todos os documentos HTML e define o título do documento.

O elemento <title>:

-define um título na barra de ferramentas do navegador


-fornece um título para a página que é adicionado aos favoritos
-exibe um título para a página no motor de pesquisa resultados

Tipos e notas:
Nota: Você não pode ter mais de um elemento <title> em um documento HTML.

Dica: Se você omitir a tag <title>, o documento não será valido como HTML.

Atributos globais:
A tag <title> suporta os atributos globais.
Exemplo:
Define um título para seu documento HTML.
<html>

<head>
<title>HTML Reference</title>
</head>

<body>
The content of the document......
</body>

</html>

Flow content
Por via de regra, elementos que seu modelo de conteúdo permitem inserir qualquer elemento que se encaixa no Flow Content, devem
ter pelo menos um descendente de texto ou um elemento descendente que faça parte da categoria embedded.
A maioria dos elementos utilizados no body e aplicações são categorizados como Flow Content.

São eles:

a
Definição e uso:
A marca <a> define um hiperlink, que é usado para ligar uma página a outra.
O atributo mais importante do elemento <a> é o atributo href, que indica o destino do link.
Por padrão, os links vão aparecer da seguinte forma em todos os navegadores:

Um link não visitado é sublinhado e azul


Um link visitado é sublinhado e roxo
Um link ativo é sublinhado e vermelho

30
Dicas e notas:
Dica: Os atributos: hreflang, media, rel, target, e os atributos de tipo não podem estar presentes se o atributo href não está presente.
Dica: Uma página linkada normalmente é exibida na janela do navegador atual, a menos que você especifique outro modo no atributo
target.
Dica: Use CSS para mudar o estilo de links.

Atributos Valor Descrição


href URL Especifica a URL da página destino do link.
hreflang language_code Especifica o idioma do documento vinculado
media media_query Especifica para qual media/dispositivo o documentento linkado é otimizado
rel alternate Especifica a relação entre o documento atual e o documento linkado
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
target _blank Especifica onde abrir o documento vinculado
_parent
_self
_top
framename
type MIME_type Especifica o tipo MIME do documento linkado

Atributos globais e eventos


A tag <a> suporta os atributos globais e os atributos de evento.

Exemplo:
Um link para W3Schools.com:
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

abbr
Definição e uso:
A tag <abbr> indica uma abreviatura ou acrónimo, como "WWW" ou "NATO".

Ao marcar as abreviações que você pode dar informações úteis para os navegadores, sistemas ortográficos, tradução e motor de
pesquisa indexadores.

Dicas e notas:
Dica: O atributo título global pode ser usado na tag <abbr> para mostrar a versão completa da sigla abreviatura /quando você passa o
mouse sobre o elemento <abbr>.

Atributos globais e eventos:


A tag suporta os atributos globais e os e atributos de eventos.

Exemplo:
Uma abreviatura é marcada como segue:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

address
Definição e uso:
A tag <address> define as informações de contato do autor /proprietário de um documento ou um artigo.

31
Se o elemento <address> é dentro do elemento <body>, representa informações de contato para o documento.
Se o elemento <address> está dentro de um elemento <article>, representa informações de contato para esse artigo.
O texto no elemento <address> normalmente deixa em itálico. A maioria dos navegadores irá adicionar uma quebra de linha antes e
depois do elemento de endereço.

Dicas e notas:
Dica: A tag <address> não deve ser usado para descrever um endereço postal, a menos que seja uma parte das informações de contato.

Dica: O elemento <address> normalmente ser incluída juntamente com outras informações em um elemento <footer>.
Atributos globais e eventos:
A tag suporta os atributos globais e os atributos de eventos.

Exemplo:
Informações de contato para Example.com:
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

area
• *(se for um decendente de um elemento de mapa)
Definição e uso:
A tag <area> define uma área dentro de uma imagem-mapa (uma imagem-mapa é uma imagem com áreas clicáveis).

O elemento <area> é sempre aninhada na marca <map>.

Nota: O atributo usemap na marca <img> está associado com o elemento de atributo <map> do nome, e cria uma relação entre a
imagem e o mapa.
Diferenças entre HTML e XHTML:
Em HTML a tag <area> não tem tag final.
Em XHTML a tag <area> deve ser devidamente fechado.

Atributos:
Atributo Valor Descrição
alt text Especifica um texto alternativo para a área.
Necessário se o atributo href está presente
coords coordinates Especifica as coordenadas da área
href URL Especifica o destino do hiperlink para a
área
hreflang language_code Especifica o idioma a URL de destino
media media query Especifica para que midia/dispositivo a
URL destino está optimizada
rel alternate Especifica a relação entre o documento
author actual e o URL de destino
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
shape default Especifica o formato da área
rect

32
circle
poly
target _blank Especifica onde abrir o URL de destino
_parent
_self
_top
framename
type MIME_type Especifica o tipo MIME do URL de
destino

Atributos globais e eventos:


A tag suporta os atributos globais e os atributos de evento.

Exemplo:
Uma imagem Mapa, com áreas clicáveis :
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

article
Definição e uso:
A tag <article> especifica independente, de conteúdo independente.

Um artigo deve fazer sentido por si próprio e que deve ser possível distribuir de forma independente a partir do resto do site.

Fontes potenciais para o elemento <article>:


-post Fórum
-blog
-notícia
-comentário

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

aside
Definição e uso:
A tag <aside> define algum conteúdo, além do conteúdo que é colocado dentro
O conteúdo reserva deve estar relacionada com o conteúdo circundante.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Dicas e regras:
Dica: O conteúdo <aside> poderia ser colocado como uma barra lateral em um artigo.

Exemplo:

33
<p>My family and I visited The Epcot center this summer.</p>

<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

audio
Definição e uso:
A tag <audio> define o som, como música ou outros fluxos de áudio.

Atualmente, existem três formatos de arquivos suportados para o elemento <audio>: MP3, WAV e OGG:
Tipos MIME para formatos de áudio
Formato Tipo MIME
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

Dicas e Notas:
Dica: Qualquer texto dentro do entre <audio> e </audio> será exibido em navegadores que não suportam a tag <audio>.

Atributos:
Atributo Valor Descrição
autoplay autoplay Especifica que o áudio vai começar a
reproduzir assim que está pronto
controls controls Especifica que os controles de áudio deve
ser exibido (como um botão etc play
/pause).
loop loop Especifica que o áudio vai recomeçar, cada
vez que ele for concluído
muted muted Especifica que a saída de áudio deve ser
silenciado
preload auto Especifica se e como o autor acha que o
metadata áudio deve ser carregado quando a página
none é carregada
src URL Especifica a URL do arquivo de áudio

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Executa um som.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

b
Definição e uso:
A tag <b> especifica o texto em negrito.

Dicas e notas:
Nota: De acordo com a especificação do HTML 5, a marca <b> deve ser usado como último recurso quando não há outra tag mais
apropriada. O HTML 5 estados de especificação de que os títulos devem ser marcados com o <h1> para <h6>, enfatizou texto deve

34
ser indicado com o tag, <em> importante texto devem ser indicados com a tag <strong>, e marcou /texto realçado deve usar a tag
<mark>.

Dica: Você também pode usar o CSS "font-weight" propriedade para definir o texto em negrito.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
<p>This is normal text - <b>and this is bold text</b>.</p>

bdo
Definição e uso:
bdo significa Bi-Direcional Override.

A tag <bdo> é usado para substituir a direção do texto atual.

Atributos:
Atributo Valor Descrição
dir ltr - esquerda para a direita Obrigatório. Especifica a direção do texto
rtl - direita para a esquerda do texto dentro do elemento <bdo>

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Especifica a direção do texto:
<bdo dir="rtl">
This text will go right-to-left.
</bdo>

blockquote
Definição e uso:
A tag <blockquote> especifica uma seção que é citado de outra fonte.

Normalmente, os browsers botam parágrafo em elementos <blockquote>.

Dicas e notas:
Dica: Use para <q> citações de linha (curtas).

Diferenças entre HTML e XHTML:


Nota: Para validar um elemento <blockquote> como XHTML, deve conter apenas outros elementos nível de bloco, como este:
<blockquote>
<p> Aqui é uma longa citação aqui é uma longa citação. </p>
</blockquote>

Atributos:
Atributo Valor Descrição
cite URL Especifica a fonte da citação

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma seção que é citado de outra fonte:
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100

35
countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>

br
Definição e uso:
A marca <br> insere uma quebra de linha única.
A marca <br> é uma tag vazia, o que significa que não tem tag final.

Dicas e notas:
Dica: A marca <br> é útil para escrever endereços ou poemas.

Nota: Use a tag <br> para inserir quebras de linha, não para separar os parágrafos.

Diferenças entre HTML e XHTML:


Em HTML, a tag <br> não tem tag final.
Em XHTML, o tag <br> deve ser bem fechada, como esta: <br />.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma quebra de linha é marcada como segue:
This text contains<br>a line break.

button
Definição e uso:
A tag <button> define um botão clicável.
Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os
botões criada com o elemento <input>.
Dica: Sempre especificar o tipo de atributo para um elemento <button>. Navegadores diferentes usam diferentes tipos padrões para o
elemento <button>.

Dicas e notas:
Nota: Se você usar o elemento <button> em um formulário HTML, navegadores diferentes podem apresentar valores diferentes. Use
<input> para criar botões em um formulário HTML.

Atributos:
Atributo Valor Descrição
autofocus autofocus Especifica que um botão deve receber
automaticamente o foco quando a página é
carregada
disabled disabled Especifica que um botão deve ser
desativado
form form_id Especifica um ou mais forms que o botão
pertence
formaction URL Especifica para onde enviar o formulário
de dados quando um formulário é
submetido. Apenas para type = "submit"
formenctype application/x-www-form-urlencoded Especifica como forma de dados devem ser
multipart/form-data codificados antes de enviá-lo para um
text/plain servidor. Apenas para type = "submit"
formmethod get Especifica como enviar o formulário de
post dados (o método HTTP para usar). Apenas
para type = "submit"
formnovalidate formnovalidate Especifica que o formulário de dados não
deve ser validado no envio. Apenas para

36
type = "submit"
formtarget _blank Especifica onde exibir a resposta depois de
_self enviar o formulário. Apenas para type =
_parent "submit"
_top
framename
name name Especifica o nome do botão
type button Especifica o tipodo botão
reset
submit
value text Especifica o valor inicial do botão

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um botão clicável é marcada como segue:
<button type="button">Click Me!</button>

canvas
Definição e uso:
A tag <canvas> é usado para desenhar gráficos, em tempo real, através de scripting (normalmente JavaScript).
A tag <canvas> é apenas um recipiente para gráficos, você deve usar um script para realmente desenhar os gráficos.

Dicas e Notas:
Nota: Qualquer texto dentro do elemento <canvas> será exibido em navegadores que não suportam <canvas>.

Atributos:
Atributo Valor Descrição
height pixels Especifica a altura da tela
width pixels Especifica a largura da tela

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Desenhe um quadrado vermelho, na mosca, e mostrá-lo dentro do elemento <canvas>:
<canvas id="myCanvas"></canvas>

<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

cite
Definição e uso:
A tag <cite> define o título de uma obra (por exemplo, um livro, uma música, um filme, um programa de TV, uma pintura, uma
escultura, etc.)
Nota: O nome de uma pessoa não é o título de uma obra.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:

37
Definir o título de uma obra com a tag <cite>:
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

code
Definição e uso:
O <em>, <strong>, <dfn>, <code>, <samp>, <kbd> e tags <var> são todas as marcas de frase. Eles não são substituído, mas é
possível obter efeitos mais ricos com CSS.

Tag Descrição
<em> Torna o texto como enfatizado
<strong> Define o texto importante
<dfn> Define um termo de definição
<code> Define um código de computador
<samp> Define exemplo de saída de um programa de computador
<kbd> Define a entrada de teclado
<var> Define uma variável

Atributos globais e eventos:


As tags suportam atributos globais e eventos.

Exemplo:
Formato de texto em um documento:
<em>Emphasized text</em>
<strong>Strong text</strong>
<dfn>Definition term</dfn>
<code>A piece of computer code</code>
<samp>Sample output from a computer program</samp>
<kbd>Keyboard input</kbd>
<var>Variable</var>

• command

datalist
Definição e uso:
A tag <datalist> especifica uma lista de opções pré-definidas para um elemento <input>.
A tag <datalist> é usado para fornecer um recurso "autocompletar" em elementos <input>. Os usuários verão uma lista suspensa de
opções pré-definidas como entrada de dados.
Use o atributo do elemento <input> da lista para vinculá-lo em conjunto com um elemento <datalist>.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um elemento <input> com valores pré-definidos em um <datalist>:
<input list="browsers">

<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

38
del
Definição e uso:
A tag <del> define o texto que foi excluído de um documento.(riscado).

Dicas e notas:
Dica: Também olhar para a tag <ins> para marcação de texto inserido.
Dica: Use e <del> <ins> a atualizações e modificações de marcação em um documento. Navegadores normalmente atacar uma linha
através de texto excluído e sublinhar o texto inserido.

Atributos:
Atributo Valor Descrição
cite URL Especifica uma URL para um documento
que explica a razão pela qual o texto foi
apagado
datetime YYYY-MM-DDThh:mm:ssTZD Especifica a data e hora em que o texto foi
excluído

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um texto com uma parte apagada, e uma parte nova, inserida:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

details
Definição e uso:
A tag <details> especifica detalhes adicionais que o usuário pode visualizar ou esconder sob demanda.
A tag <details> pode ser usado para criar um widget interativo que o usuário pode abrir e fechar. Qualquer tipo de conteúdo pode ser
colocado dentro da tag <details>.
O conteúdo de um elemento <details> não deve ser visível a menos que o atributo aberta é definida.

Dicas e notas:
Dica: A tag <summary> é usado para especificar um título visível para os detalhes. O título pode ser clicado para visualizar /esconder
os detalhes.
Nota: este elemento somente é compativel com o chrome

Atributos:
Atributo Valor Descrição
open open Especifica que as informações devem estar
visíveis (aberto) para o usuário

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
O uso do elemento <details>:
<details>
<summary>Copyright 1999-2011.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

dfn
ver <code>

39
div
Definição e uso:
A tag <div> define uma divisão ou uma seção em um documento HTML.
A tag <div> é usado para grupo bloco-elementos para formatá-los com CSS.

Dicas e notas:
Dica: O elemento <div> é muitas vezes utilizado em conjunto com CSS, para o layout de uma página web.
Nota: Por padrão, os navegadores sempre colocar uma quebra de linha antes e depois do elemento <div>. No entanto, isto pode ser
alterado com CSS.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
A seção em um documento que será exibido em azul:
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

dl
Definição e uso:
A tag <dl> define uma lista de definições.
A tag <dl> é usado em conjunto com <dt> (define o item na lista) e <dd> (descreve o item na lista).

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
A definição da lista, com itens e descrições:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

em
ver <code>

embed
Definição e uso:
A tag <embed> define um recipiente para uma aplicação externa ou conteúdo interativo (um plug-in).

Atributo:
Atributo Valor Descrição
height pixels Especifica a altura do conteúdo
incorporado
src URL Especifica o endereço do arquivo externo
para incorporar
type MIME_type Specifies the MIME type of the embedded
content
width pixels Specifies the width of the embedded
content

Atributos globais e eventos:

40
A tag suporta atributos globais e eventos.

Exemplo:
Uma animação flash embutido:
<embed src="helloworld.swf">

fieldset
Definição e uso:
A tag <fieldset> é utilizado para agrupar elementos relacionados em um formulário.
A tag <fieldset> desenha uma caixa em torno dos elementos relacionados.

Dicas e notas:
Dica: A tag <legend> define uma legenda para o elemento <fieldset>.

Atributos:
Atributo Valor Descrição
disabled disabled Especifica que um grupo de elementos de
formulário relacionados deve ser
desativado
form form_id Especifica um ou mais forms que o fieldset
pertence
name text Especifica um nome para o fieldset

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Elementos relacionados a um grupo de uma forma:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>

figure
Definição e uso:
A tag <figure> especifica independente de conteúdo, como ilustrações, diagramas, fotos, listas de código, etc
Enquanto o conteúdo do elemento <figure> está relacionado com o fluxo principal, a sua posição é independente do fluxo principal, e
se tiver sido removido, não deve afectar o fluxo do documento.

Dicas e notas:
Dica: O elemento <figcaption> é usado para adicionar uma legenda para o elemento <figure>.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Use um elemento <figure> para marcar uma foto em um documento:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock"
width="304" height="228">
</figure>

41
footer
Definição e uso:
A tag <footer> define um rodapé de um documento ou seção.
Um elemento <footer> deve conter informações sobre o elemento que contém.
Normalmente um rodapé contém o autor do documento, informações de copyright, links para termos de uso, informações de contato,
etc
Você pode ter vários elementos <footer> em um documento.

Dicas e notas:
Dica: Informações de contato dentro de um elemento <footer> deve ir dentro de uma tag <adress>.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
A seção de rodapé em um documento:
<footer>
<p>Posted by: Hege Refsnes</p>
<p><time pubdate datetime="2012-03-01"></time></p>
</footer>

form
Definição e uso:
O <form> é usado para criar um formulário HTML para entrada do usuário.
O elemento <form> pode conter um ou mais dos elementos de forma a seguir:
- <input>
- <textarea>
- <button>
- <select>
- <option>
- <optgroup>
- <fieldset>
- <label>

Diferenças entre HTML e XHTML


Em XHTML, o atributo name está obsoleto. Use o atributo id global em vez.
Atributos:
Atributo Valor Descrição
accept-charset character_set Especifica encodings, que podem ser
usados para o envio de formulários.
action URL Especifica para onde enviar o formulário
de dados quando um formulário é enviado
autocomplete on Especifica se um formulário deve ter
off autocomplete ligado ou desligado
enctype application/x-www-form-urlencoded Especifica como o formulário de dados
multipart/form-data devem ser codificados quando enviá-lo
text/plain para o servidor (apenas para o método =
"post")
method get Especifica o método HTTP para o envio de
post formulário de dados
name text Especifica o nome de um formulário
novalidate novalidate Especifica que o formulário não deve ser
validado quando submetido
target _blank Especifica onde exibir a resposta que é
_self recebido após enviar o formulário
_parent
_top

42
Atributos globais e eventos:
A tag suporta atributos globais e eventos.

Exemplo:
Um formulário HTML com dois campos de entrada e um botão de envio:
<form action="demo_form.asp" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

h1 - h6
Definição e uso:
O <h1> para <h6> são usados para definir cabeçalhos HTML.
<h1> define o título mais importante. <h6> define a posição menos importante

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Os seis diferentes títulos de HTML:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

header
Definição e uso:
A tag <header> especifica um cabeçalho de um documento ou seção.
O elemento <header> deve ser usado como um recipiente para o conteúdo introdutório ou conjunto de ligações de navegação.
Você pode ter vários elementos <header> em um documento.

Nota: A tag <header> não podem ser colocados dentro de um <footer>, <address> ou outro elemento <header>.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um cabeçalho para um <article>:
<article>
<header>
<h1>Internet Explorer 9</h1>
<p><time pubdate datetime="2011-03-15"></time></p>
</header>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>

hgroup
Definição e uso:
A tag <hgroup> é usado para agrupar elementos de título.
O elemento <hgroup> é utilizado para agrupar um conjunto de elementos para <h1> <h6>, quando um cabeçalho possui múltiplos
níveis (subtítulos).

Atributos globais e eventos:

43
A tag suporta atributos globais e eventos.

Exemplo:
Usar <hgroup> para títulos do grupo:
<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>

<p>The rest of the content...</p>

hr
Definição e uso:
A tag <hr> define uma ruptura temática em uma página HTML (por exemplo, uma mudança de tema).
O elemento <hr> é usado para separar o conteúdo (ou definir uma mudança) em uma página HTML.

Diferença entre HTML e XHTML


Em HTML, a tag <hr> não tem tag final.
Em XHTML, a marca <hr> deve ser bem fechada, como esta: <hr />.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Use a tag <hr> para definir uma mudança temática no conteúdo:
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>

i
Definição e uso:
A marca <i> define uma parte do texto em uma voz alternativa ou humor. O conteúdo da tag <i> é geralmente mostrado em itálico.

A marca <i> pode ser usado para indicar um termo técnico, uma frase de outro idioma, um pensamento, ou um nome de navio, etc

Usar o elemento <i> somente quando não há um elemento mais apropriado semântica, tais como:
<em> (texto enfatizado)
<strong> (texto importante)
<mark> (texto marcados /destacado)
<cite> (o título de uma obra)
<dfn> (um termo definição)
Atributos globais e eventos:
A tag suporta atributos globais e eventos.

Exemplo:
<p>He named his car <i>The lightning</i>, because it was very fast.</p>

iframe
Definição e uso:
A tag <iframe> especifica um quadro embutido.
Um quadro embutido é usado para incorporar outro documento dentro do documento HTML atual.

Dicas e notas:
Dica: Para lidar com navegadores que não suportam <iframe>, adicionar um texto entre <iframe> abertura e do fechamento </iframe>

44
tag.
Dica: Use CSS para o estilo do <iframe> (mesmo para incluir barras de rolagem).

Diferença entre HTML e XHTML:


Em XHTML, o atributo name é obsoleto, e será removido. Use o atributo id ao invés dele.
Atributos:
Atributo Valor Descrição
height pixels Especifica a altura de um <iframe>
name name Especifica o nome de um <iframe>
sandbox "" Permite que um conjunto de restrições
allow-forms adicionais para o conteúdo do <iframe>
allow-same-origin
allow-scripts
allow-top-navigation
seamless seamless Especifica que o <iframe> deve parecer
como parte do documento que contem
src URL Especifica o endereço do documento para
incorporar no <iframe>
srcdoc HTML_code Especifica o conteúdo HTML da página
para mostrar no <iframe>
width pixels Especifica a largura de um <iframe>

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um quadro em linha é marcado como segue:
<iframe src="http://www.w3schools.com"></iframe>

img
Definição e uso:
A marca <img> define uma imagem em uma página HTML.
A marca <img> tem dois atributos necessários: src e alt.
Nota: As imagens não são tecnicamente inserido em uma página HTML, imagens são ligados a páginas HTML. A marca <img> cria
um espaço de retenção para a imagem referenciada.

Dica: Para associar uma imagem a um outro documento, simplesmente o ninho da marca <img> dentro de tags <a>.

Diferença entre HTML e XHTML:


Em HTML a tag <img> não tem tag final.
Em XHTML a tag <img> deve ser devidamente fechado.

Atributos:
Atributo Valor Descrição
alt text Especifica um texto alternativo para uma
imagem
crossorigin anonymous Permitir imagens de sites de terceiros que
use-credentials permitem origem cruzada de acesso a ser
usado com canvas
height pixels Especifica a altura de uma imagem
ismap ismap Especifica uma imagem como um servidor
de imagem-mapa
src URL Especifica a URL de uma imagem
usemap #mapname Especifica uma imagem como um cliente
de imagem-mapa

45
width pixels Especifica a largura de uma imagem

Atributos globais e eventos:


A tag suporta atributos globais e eventos.
Exemplo:
Como inserir uma imagem:
<img src="smiley.gif" alt="Smiley face" height="42" width="42">

input
Definição e uso:
A marca <input> especifica um campo de entrada onde o usuário pode inserir dados.

<input> elementos são usados dentro de um elemento <form> para declarar controles de entrada que permitem aos usuários inserir
dados.
Um campo input pode variar de muitas formas, dependendo do tipo de atributo.

Dicas e notas:
Nota: O elemento <input> é vazio, ele contém apenas atributos.
Dica: Use o elemento <label> para definir rótulos para os elementos <input>.

Diferença entre HTML e XHTML:


Em HTML, a tag <input> não tem tag final.

Em XHTML, a marca <input> deve ser bem fechada, como esta <input />.

Atributos:
Atributo Valor Atributo
accept audio/* Especifica os tipos de arquivos que o
video/* servidor aceita (apenas para type = "file")
image/*
MIME_type
alt text Especifica um texto alternativo para
imagens (somente para type = "image")
autocomplete on Especifica se o elemento <inpit> deve com
off o autocomplete ativado.
autofocus autofocus Especifica que um elemento <input> deve
receber automaticamente o foco quando a
página é carregada
checked checked Especifica que um elemento <input> deve
ser pré-selecionado quando a página é
carregada (para type = "checkbox" ou type
= "radio")
disabled disabled Especifica que um elemento <input> deve
ser desativado
form form_id Especifica um ou mais forms que o
elemento <input> pertence
formaction URL Especifica a URL do arquivo que irá
processar o controle de entrada, quando o
formulário é enviado (para type = "submit"
e type = "image")
formenctype application/x-www-form-urlencoded Especifica como os forms-dados devem ser
multipart/form-data codificados quando enviá-dos para o
text/plain servidor (por type = "submit" e type =
"image")
formmethod get Define o método HTTP para o envio de
post dados para o URL de ação (para type =
"submit" e type = "imagem")

46
formnovalidate formnovalidate Define que os elementos de formulário não
deve ser validado quando submetidos
formtarget _blank Especifica onde exibir a resposta que é
_self recebida após enviar o formulário (para
_parent type = "submit" e type = "image")
_top
framename
height pixels Especifica a altura de um elemento
<input> (apenas para type = "image")
list datalist_id Refere-se a um elemento <datalist> que
contém opções pré-definidas para um
elemento <input>
max number Especifica o valor máximo de um elemento
date <input>
maxlength number Especifica o número máximo de caracteres
permitidos em um elemento <input>
min number Especifica um valor mínimo para um
date elemento <input>
multiple multiple Especifica que um usuário pode inserir
mais de um valor em um elemento <input>
name text Especifica o nome de um elemento
<input>
pattern regexp Especifica uma expressão regular pela qual
o valor de um elemento <input> é
verificado
placeholder text Especifica uma sugestão curta que
descreve o valor esperado de um elemento
<input>
readonly readonly Especifica que um campo de entrada é
somente leitura
required required Especifica que um campo de entrada deve
ser preenchido antes de enviar o formulário
size number Especifica a largura, em caracteres, de um
elemento <input>
src URL Especifica o URL da imagem para usar
como um botão de envio (somente para
type = "image")
step number Especifica os intervalos de número legal
para um campo de entrada
type button Especifica o tipo de elemento <input> para
checkbox exibir
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit

47
tel
text
time
url
week
value text Especifica o valor de um elemento <input>
width pixels Especifica a largura de um elemento
<input> (apenas para type = "image")

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um formulário HTML com três campos de entrada, dois campos de texto e um botão de envio:
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>

ins
Definição e uso:
A tag <ins> define um texto que foi inserido num documento.

Dica: Também olhar para a tag <del> para marcação de texto excluído.
Navegadores normalmente riscam uma linha de texto excluído e sublinham o texto inserido.

Dicas e Notas:
Dica: <ins> usá-lo juntamente com <del> a atualizações e modificações de marcação em um documento.

Atributo Valor Descrição


cite URL Especifica uma URL para um documento
que explica a razão pela qual o texto foi
inserido /alterado
datetime YYYY-MM-DDThh:mm:ssTZD Especifica a data ea hora em que o texto
foi inserido /alterado

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um texto com uma parte apagada, e uma parte nova, inserida:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

kbd
ver <code>

keygen
Definição e uso:
A tag <keygen> especifica um campo gerador de par de chaves utilizado para formulários.
Quando o formulário é enviado, a chave privada é armazenada localmente, e a chave pública é enviada para o servidor.

Atributos:
Atributo Valor Descrição
autofocus autofocus Especifica que um elemento <keygen>

48
deve receber automaticamente o foco
quando a página é carregada
challenge challenge Especifica que o valor do elemento
<keygen> devem ser testados quando
submetidos
disabled disabled Especifica que um elemento <keygen>
deve ser desativado
form form_id Especifica uma ou mais formas que o
elemento <keygen> pertence
keytype rsa Especifica o algoritmo de segurança da
dsa chave.
ec
name name Define um nome para o elemento
<keygen>

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um formulário com um campo keygen:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>

label
Definição e uso:
A tag <label> define um rótulo para um elemento <input>.
O elemento <label> não processar como algo especial para o usuário. No entanto, ele fornece uma melhoria de usabilidade para os
usuários do mouse, porque se o usuário clica sobre o texto dentro do elemento <label>, alterna o controle.
O para atributo da marca <label> deve ser igual ao atributo id do elemento relacionado para os ligar juntos.

Dicas e notas:
Dica: Uma etiqueta pode ser ligado a um elemento ou usando o atributo "for", ou colocando-a no elemento dentro do elemento
<label>.
Nota: O IE não suporta.

Atributos:
Atributo Valor Descrição
for element_id Especifica o elemento form que o label
será vinculado
form form_id Especifica um ou mais form que o label
pertence

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Dois botões de opção com etiquetas:
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>

49
• link (Se o atributo itemprop for utilizado)

map
Definição e uso:
A tag <map> é usada para definir uma imagem mapa do lado do cliente. Uma imagem-mapa é uma imagem com áreas clicáveis.
O atributo obrigatório name do elemento <map> está associado com o atributo <img> usemap e cria uma relação entre a imagem e o
mapa.
O elemento <map> contém um número de elementos <area>, que define as áreas clicáveis na imagem do mapa.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Diferença entre HTML e XHTML:


Em XHTML, o atributo name é obsoleto, e será removido. Use o atributo id vez.

Atributos:
Atributos Valores Descrição
name mapname Obrigatório. Especifica o nome de uma
imagem-mapa

Exemplo:
Uma imagem Mapa, com áreas clicáveis:
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

mark
Definição e uso:
A tag <mark> define o texto marcado.
Use a tag <mark> se você quiser destacar partes do texto.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Realçar partes de um texto:
<p>Do not forget to buy <mark>milk</mark> today.</p>

• math
• menu
• meta (Se o atributo itemprop for utilizado)OK

meter
Definição e uso:
A tag <meter> define uma medição escalar dentro de um intervalo conhecido, ou um valor fraccional. Isto é também conhecido como
um medidor.
Exemplos: o uso do disco, a relevância do resultado de uma consulta, etc
Nota: A tag <meter> não deve ser utilizado para indicar o progresso (como em uma barra de progresso). Para barras de progresso, use
a tag <progress>.
Nota: Não é suportada pelo IE e pelo Safari

Atributos:
Atributos Valor Descrição
form form_id Especifica um ou mais forms que o

50
elemento <meter> pertence
high number Especifica o intervalo que é considerado
como sendo um valor alto
low number Especifica o intervalo que é considerado
como sendo um valor baixo
max number Especifica o valor máximo do intervalo
min number Especifica o valor minimo do intervalo
optimum number Especifica que valor é o valor ideal para o
medidor
value number Obrigatório. Especifica o valor atual do
indicador

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uso do elemento meter que mede dados dentro de um determinado intervalo (a medida):
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>

nav
Definição e uso:
A tag <nav> define uma seção de links de navegação.
Nem todos os links de um documento deve ser em um elemento <nav>. O elemento <nav> destina-se apenas para o bloco grande de
links de navegação.
Navegadores, como leitores de tela para deficientes motores, pode usar esse elemento para determinar se deve omitir a prestação
inicial deste conteúdo.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma seção de links de navegação:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

• noscript

object
Definição e uso:
A tag <object> define um objeto incorporado dentro de um documento HTML. Use este elemento para incorporar multimídia (como
áudio, vídeo, applets Java, ActiveX, PDF e Flash) em suas páginas web.
Você também pode usar a marca <object> para incorporar uma outra página em seu documento HTML.
Você pode usar a tag <param> passar parâmetros para plugins que foram incorporados com a tag <object>.

Dicas e notas:
Nota: Um elemento <object> deve aparecer dentro do elemento <body>. O texto entre a <object> e </object> é um texto alternativo,
para navegadores que não suportam esta tag.
Dica: Para imagens utilize a tag <img> em vez da marca <object>.
Dica: pelo menos um dos "dados" ou "tipo" atributo deve ser definido.

Atributos:
Atributo Valor Descrição

51
data URL Especifica o URL do recurso a ser usado
pelo objeto
form form_id Especifica uma ou mais forms que o
objetct pertence
height pixels Especifica a altura do objecto
name name Especifica o nome do objeto.
type MIME_type Especifica o tipo MIME dos dados
especificados no atributo de dados
usemap #mapname Especifica um nome de imagem de mapa
de lado cliente para ser usado como o
objeto.
width pixels Especifica a largura do objecto

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Como usar o elemento <object> para incorporar um arquivo Flash:
<object width="400" height="400" data="helloworld.swf"></object>

ol
Definição e uso:
A tag <ol> define uma lista ordenada. Uma lista ordenada pode ser numérica ou alfabética.
Use a tag <li> para definir os itens da lista.

Dicas e notas:
Dica: Para a lista não-ordenada, utilize a tag <ul>.
Dica: Use CSS para listas de estilo.

Atributos:
Atributo Valor Descrição
reversed reversed Especifica que a ordem da lista deve ser
descendente (9,8,7 ...)
start number Especifica o valor inicial de uma lista
ordenada
type 1 Especifica o tipo de marcador a ser usado
A na lista
a
I
i

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
2 listas ordenadas diferentes:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

52
output
Definição e uso:
A tag <output> representa o resultado de um cálculo (como uma realizada por um script).
Nota:O IE não oferece suporte.

Atributos:
Atributo Valor Descrição
for element_id Especifica a relação entre o resultado do
cálculo, e os elementos utilizados para o
cálculo
form form_id Espesifica um ou mais forms que o output
pertence
name name Especifica um nome para o elemento de
saída

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Realizar um cálculo e mostrar o resultado em um elemento <output>:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

p
Definição e uso:
O <p> define um parágrafo.
Navegadores automaticamente adicionar algum espaço (margem), antes e depois de cada elemento <p>. As margens podem ser
modificados com CSS (com as propriedades de margem).

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um parágrafo é marcada como segue:
<p>This is some text in a paragraph.</p>

pre
Definição e uso:
A tag <pre> define o texto pré-formatado.
Texto em um elemento <pre> é exibido em uma fonte de largura fixa (geralmente Courier), e preserva os espaços e quebras de linha.

Dicas e usos:
Dica: Use o elemento <pre> ao exibir texto com formatação incomum, ou algum tipo de código de computador.
Atributos globais e eventos:
A tag suporta atributos globais e eventos.

Exemplo:
Texto pré-formatado:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves

53
both spaces and
line breaks
</pre>

progress
Definição e uso:
A tag <progress> representa o andamento de uma tarefa.

Dicas e notas:
Dica: Use a tag <progress> em conjunto com JavaScript para exibir o progresso de uma tarefa.
Nota: A tag <progress> não é adequado para a representação de um medidor (por exemplo, o uso de espaço em disco ou a relevância
de um resultado de consulta). Para representar um medidor, use a tag <meter> vez.

Atributos:
Atributo Valor Descrição
max number Especifica quanto trabalho a tarefa requer,
no total
value number Especifica o quanto da tarefa foi concluída

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
O download em progresso:
<progress value="22" max="100"></progress>

q
Definição e uso:
A tag <q> define uma citação curta.
Navegadores normalmente inserem aspas em torno da citação.

Dicas e notas;
Dica: Use <blockquote> para marcar uma seção que é citado de outra fonte.
Atributos:
Atributo Valor Descrição
cite URL Especifica a URL fonte da citação

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Marca uma breve citação:
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

ruby
Definição e uso:
A tag <ruby> especifica uma anotação de rubi.
Anotações Ruby são usados para a tipografia Leste asiática, para mostrar a pronúncia de caracteres do leste asiático.
Utilizar a etiqueta <ruby> juntamente com o <rt> e /ou as etiquetas <rp>: O elemento <ruby> consiste em um ou mais caracteres que
precisa de uma explicação /pronúncia, e um elemento que dá <rt> essa informação, e um elemento <rp> opcional que define o que
mostrar para navegadores que não suportam anotações Ruby.

Atributos globais e eventos:

54
A tag suporta atributos globais e eventos.

Exemplo:
Uma anotação ruby:
<ruby>
漢<rt> ㄏㄢˋ </rt>
</ruby>

• samp
ver <code>
• script
• section
Definição e uso:
A tag <section> define seções em um documento. Tal como capítulos, cabeçalhos, rodapés, ou quaisquer outras seções do documento.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
A seção em um documento, explicando o que o WWF é:
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>

select
Definição e uso:
O elemento <select> é usado para criar uma lista drop-down.
As tags <option> dentro do elemento <select> definir as opções disponíveis na lista.

Dicas e notas:
Dica: O elemento <select> é um controle de forma e pode ser usado em um formulário para coletar entrada do usuário.
Atributo Valor Descrição
autofocus autofocus Especifica que a lista drop-down deve
receber automaticamente o foco quando a
página é carregada
disabled disabled Especifica que uma lista drop-down deve
ser desativado
form form_id Define um ou mais form que o elemento
select pertence
multiple multiple Especifica que várias opções podem ser
selecionadas de cada vez
name name Define um nome para a lista drop-down
required required Especifica que o usuário é obrigado a
selecionar um valor antes de enviar o
formulário
size number Define o número de opções visíveis em
uma lista drop-down

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Criar uma lista suspensa com quatro opções:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>

55
<option value="audi">Audi</option>
</select>

small
Definição e uso:
A tag <small> define texto menor (e comentários outro lado).

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Defina um texto menor:
<p>W3Schools.com - the world's largest web development site.</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>

span
Definição e uso:
O tag é usado para <span> grupo linha elementos em um documento.
A marca <span> não fornece nenhuma mudança visual por si só.
A marca <span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento.

Dicas e notas:
Dica: Quando um texto é ligado em um elemento <span>, você pode estilizar com CSS, ou manipulá-lo com JavaScript.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um elemento <span> usado para colorir uma parte de um texto:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>

strong
ver <code>
• style (Se o atributo scoped for utilizado)

sub
Definição e uso:
A tag <sub> define o texto subscrito. Texto subscrito aparece meia caráter abaixo da linha de base. texto Subscrito pode ser utilizado
para as fórmulas químicas, tal como H2O.
A tag <sup> define o texto sobrescrito. Texto sobrescrito aparece meia caráter acima da linha de base. Texto sobrescrito pode ser
usado para notas de rodapé, como WWW [1].

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

u
Texto subscrito e sobrescrito :
<p>This text contains <sub>subscript</sub> text.</p>

<p>This text contains <sup>superscript</sup> text.</p>

sup
ver sub
• svg

56
table
Definição e uso:
A tag <table> define uma tabela HTML.
Uma tabela HTML consiste no elemento <table> e um ou mais <tr>, <th>, e elementos <td>.
O elemento <tr> define uma linha da tabela, o elemento <th> define um cabeçalho de quadro, e o elemento <td> define uma célula da
tabela.
Uma mais complexa tabela HTML pode também incluir <caption>, <col>, <colgroup>, <thead>, <tfoot> e elementos <tbody>.

Atributos:
Atributo Valor Descrição
border 1 Especifica se as células da tabela deve ter
"" bordas ou não

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma tabela HTML simples, contendo duas colunas e duas linhas:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

textarea
Definição e uso:
A tag <textarea> define um multilinha de controle de entrada de texto.
Uma área de texto pode conter um número ilimitado de caracteres, eo texto torna em uma fonte de largura fixa (geralmente Courier).
O tamanho de uma área de texto pode ser especificado pelo cols e atributos de linhas, ou até melhor, através altura CSS 'e
propriedades de largura.

Atributos:
Atributo Valor Descrição
autofocus autofocus Especifica que uma área de texto deve
receber automaticamente o foco quando a
página é carregada
cols number Especifica a largura visível de uma área de
texto
disabled disabled Especifica que uma área de texto deve ser
desativado
form form_id Especifica um ou mais forms que a área de
texto pertence
maxlength number Especifica o número máximo de caracteres
permitidos na área de texto
name text Especifica um nome para uma área de
texto
placeholder text Especifica uma sugestão curta que
descreve o valor esperado de uma área de
texto

57
readonly readonly Especifica que uma área de texto deve ser
somente leitura
required required Especifica que uma área de texto é
exigida /deve ser preenchida
rows number Especifica o número de linhas visíveis
numa área de texto
wrap hard Especifica como o texto em uma área de
soft texto deve ser ajustada quando submetida a
um form

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma área de texto HTML:
<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

time
Definição e uso:
A tag <time> define tanto uma hora (24 horas), ou uma data no calendário gregoriano, opcionalmente, com um tempo e um fuso
horário.
Este elemento pode ser usado como uma forma de codificar as datas e horários de uma forma legível por máquina, de modo que, por
exemplo, os agentes podem oferecer para adicionar lembretes de aniversário ou eventos programados para o calendário do usuário, e
os motores de busca podem produzir resultados mais inteligente de busca.

Atributos:
Atributos Valor Descrição
datetime datetime Dá a data /hora sendo especificado. Caso
contrário, a data /hora é dada pelo
conteúdo do elemento

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Como definir uma hora e uma data:
<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

ul
Definição e uso:
A tag <ul> define uma lista não ordenada (com marcadores).
Use a tag <ul> juntamente com a marca <li> para criar listas desordenadas.

Dicas e notas:
Dica: Use CSS para listas de estilo.
Dica: Para criar listas ordenadas, use a tag <ol>.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Uma lista não ordenada HTML:
<ul>

58
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

var
ver <code>

video
Definição e uso:
A marca <video> especifica de vídeo, como um clipe de filme ou fluxos de vídeo.

Atualmente, existem três formatos de vídeo com suporte para o elemento <video>: MP4, WebM, e Ogg:
Tipo MIME para formatos de video
Formato Tipo-MIME
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Dicas e Notas:
Dica: Qualquer texto entre o <video> e </vídeo> marcas serão exibidos em navegadores que não suportam o elemento <video>.

Atributos:
Atributo Valor Detalhes
autoplay autoplay Especifica que o vídeo vai iniciar a
reprodução assim que está pronto
controls controls Especifica que os controles de vídeo deve
ser exibido (como um botão etc play
/pause).
height pixels Define a altura do player de vídeo
loop loop Especifica que o vídeo vai começar
novamente, cada vez que ele for concluído
muted muted Especifica que a saída de áudio do vídeo
deve ser silenciada
poster URL Especifica uma imagem a ser mostrada
enquanto o vídeo está baixando, ou até que
o usuário pressiona o botão play
preload auto Especifica se e como o autor pensa que o
metadata vídeo deve ser carregado quando a página
none é carregada
src URL Especifica a URL do arquivo de vídeo
width pixels Define a largura do player de vídeo

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Reproduz um video:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

59
wbr
Definição e uso:
O <wbr> (Oportunidade quebra de palavra) tag especifica onde em um texto que seria ok para adicionar uma quebra de linha.

Dica: Quando uma palavra é muito longo, ou você está com medo de que o navegador irá quebrar suas linhas no lugar errado, você
pode usar o elemento <wbr> para adicionar oportunidades de quebra de palavra.
Nota:Não é suportada pelo IE.

Atributos globais e eventos:


A tag suporta atributos globais e eventos.

Exemplo:
Um texto com oportunidades de quebra de palavra:
<p>
To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object.
</p>

• Text

Sectioning content
Basicamente são elementos que juntam grupos de textos no documento.
Estes elementos definem um grupo de cabeçalhos e rodapés.
• article
• aside
• nav
• section

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 - 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 (se ele for descendente de um elemento de mapa)OK
• audio
• b
• bdo
• br
• button
• canvas
• cite
• code
• command
• datalist
• del (se ele contiver um elemento da categoria de Phrasing)OK
• dfn
• em
• embed
• i

60
• iframe
• img
• input
• ins (se ele contiver um elemento da categoria de Phrasing)
• kbd
• keygen
• label
• link (se o atributo itemprop for utilizado)
• map (se apenas ele contiver um elemento da categoria de Phrasing)
• mark
• math
• meta (se o atributo itemprop for utilizado)
• 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
• 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 (se o atributo control for utilizado)OK
• button
• details
• embed
• img (se o atributo usemap for utilizado)
• input (se o atributo type não tiver o valor hidden)OK
• keygen

61
• label
• menu (se o atributo type tiver o valor toolbar)OK
• object (se o atributo usemap for utilizado)
• select
• textarea
• video (se o atributo control for utilizado)

3.2.Atributos globais
Atributo Descrição
accesskey Especifica uma tecla de atalho para ativar /focar um elemento
class Especifica um ou mais nomes de classes para um elemento (refere-se a uma classe em uma folha
de estilo)
contenteditable Especifica se o conteúdo de um elemento é editável ou não
contextmenu Especifica um menu de contexto para um elemento. O menu de contexto aparece quando um
usuário clica com direito sobre o elemento
dir Especifica a direção de texto para o conteúdo de um elemento
draggable Especifica se é um elemento arrastável ou não
dropzone Especifica se os dados arrastados são copiados, movido ou ligados, quando soltos
hidden Especifica que um elemento é ou não relevante
id Especifica um id único para um elemento
lang Especifica o idioma do conteúdo do elemento
spellcheck Especifica se o elemento tem a sua ortografia e gramática marcada ou não
style Especifica um estilo CSS inline para um elemento
tabindex Especifica a ordem de tabulação de um elemento
title Especifica informações adicionais sobre um elemento
translate Especifica se o valor de um elemento devem ser traduzidas quando a página está localizada, ou
não.

3.3.Atributos de Evento

3.3.1.Atributos de eventos de janela


Eventos acionado para o objeto janela (aplica-se ao <body>):
Atributo Valor Descrição
onafterprint script Script para ser executado depois que o documento for impresso
onbeforeprint script Script para ser executado antes de o documento ser impresso
onbeforeunload script Script para ser executado antes do documento ser descarregado
onerror script Script para ser executado quando ocorrer um erro
onhaschange script Script para ser executado quando o documento foi alterado
onload script Acionado depois que a página terminou de carregar

62
onmessage script Script para ser executado quando a mensagem é acionada
onoffline script Script para ser executado quando o documento entra em modo offline
ononline script Script para ser executado quando o documento voçtat a ficar online
onpagehide script Script para ser executado quando a janela está oculta
onpageshow script Script para ser executado quando a janela torna-se visível
onpopstate script Script para ser executado quando o histórico da janela é mudado
onredo script Script para ser executado quando o documento realiza uma refazer
onresize script Ativado quando a janela do navegador é redimensionada
onstorage script Script para ser executado quando uma área de armazenamento na Web é
atualizado
onundo script Script para ser executado quando o documento realiza uma desfazer
onunload script Dispara uma vez que uma página tenha descarregado (ou a janela do
navegador foi fechado)

3.3.2.Eventos de formulários
Eventos desencadeados por ações dentro de um formulário HTML (aplica-se a quase todos os elementos HTML, mas é a mais
utilizada em elementos de formulário):

Atributo Valor Descrição


onblur script Dispara o momento em que o elemento
perde o foco
onchange script Dispara no momento em que o valor do
elemento é alterado
oncontextmenu script Script para ser executado quando um menu
de contexto é acionado
onfocus script Dispara no momento em que o elemento
obtém foco
onformchange script Script para ser executado quando um
formulário muda
onforminput script Script para ser executado quando um
formulário recebe entrada do usuário
oninput script Script para ser executado quando um
elemento recebe entrada do usuário
oninvalid script Script para ser executado quando um
elemento é inválido
onselect script Inicia depois de algum texto tiver sido
selecionado em um elemento
onsubmit script Inicia quando um formulário é submetido

3.3.3.Evento do teclado
Atributo Valor Descrição
onkeydown script Acionado quando um usuário está
pressionando uma tecla
onkeypress script Ativado quando um usuário pressiona uma
tecla
onkeyup script Acionado quando um usuário solta uma
tecla

63
3.3.4.Eventos de Mouse
Eventos desencadeados pelo mouse, ou ações do usuário semelhantes
Atributo Valor Descrição
onclick script Acionado em um clique do mouse sobre o
elemento
ondblclick script Inicia em um clique duplo do mouse sobre
o elemento
ondrag script Script para ser executado quando um
elemento é arrastado
ondragend script Script para ser executado no final da
operação de arrasto
ondragenter script Script para ser executado quando um
elemento foi arrastado para um destino de
soltar válido
ondragleave script Script para ser executado quando um
elemento deixa um destino de soltar válido
ondragover script Script para ser executado quando um
elemento está sendo arrastado sobre um
destino de soltar válido
ondragstart script Script para ser executado no início de
operação de arrasto
ondrop script Script para ser executado quando o
elemento arrastado está sendo descartado
onmousedown script Acionado quando um botão do mouse é
pressionado em um elemento
onmousemove script Dispara quando o ponteiro do mouse se
move sobre um elemento
onmouseout script Dispara quando o ponteiro do mouse se
move para fora de um elemento
onmouseover script Dispara quando o ponteiro do mouse se
move sobre um elemento
onmouseup script Dispara quando um botão do mouse é
liberado sobre um elemento
onmousewheel script Script para ser executado quando a roda do
mouse está sendo rodado
onscroll script Script para ser executado quando um
elemento da barra de rolagem está sendo
rolada

3.3.5.Eventos de mídia
Eventos desencadeados por mídias como vídeos, imagens e áudio (aplica-se a todos os elementos HTML, mas é mais comum em
elementos de mídia, como <audio>, <embed>, <img>, <object>, e <video>):
Atributo Valor Descrição
onabort script Script para ser executado em interromper
oncanplay script Script para ser executado quando um
arquivo está pronto para começar a
reproduzir (quando armazena no buffer o
suficiente para começar)
oncanplaythrough script Script para ser executado quando um
arquivo pode ser reproduzido por todo o
caminho até o fim sem pausa para

64
buferização
ondurationchange script Script para ser executado quando a duração
da midia muda
onemptied script Script para ser executado quando algo de
ruim acontece e o arquivo de repente está
indisponíveis (como disconexão
inesperada)
onended script Script para ser executado quando a mídia
tiver chegado ao final (um evento útil para
mensagens como "Obrigado por escutar")
onerror script Script para ser executado quando um erro
ocorre quando o arquivo está sendo
carregado
onloadeddata script Script para ser executado quando os dados
da mídia são carregados
onloadedmetadata script Script para ser executado quando os
metadados dados (como dimensões e
duração) são carregados
onloadstart script Script para ser executado assim que o
arquivo começa a carregar.
onpause script Script para ser executado quando a mídia
está em pausa ou pelo usuário ou por meio
de programação
onplay script Script para ser executado quando a mídia
está pronta para começar a reproduzir
onplaying script Script para ser executado quando a mídia
realmente começou a ser reproduzida
onprogress script Script para ser executado quando o
navegador está em processo de obtenção
de dados de mídia
onratechange script Script para ser executado cada vez que as
alterações na taxa de reprodução (como
quando um usuário muda para um
movimento lento ou modo de avanço
rápido)
onreadystatechange script Script para ser executado a cada vez que o
estado pronto (o estado de pronto controla
o estado dos dados de mídia)
onseeked script Script para ser executado quando o atributo
de busca é definido como falso indicando
que a busca acabou
onseeking script Script para ser executado quando o atributo
de busca é definido como true, indicando
que a busca está ativa
onstalled script Script para ser executado quando o
navegador é incapaz de buscar os dados de
mídia por qualquer razão
onsuspend script Script para ser executado quando a coleta
de dados de mídia é interrompida por
qualquer motivo antes que esteja
completamente carregado
ontimeupdate script Script para ser executado quando a posição
de reprodução mudou (como quando o
usuário avança rapidamente para um ponto
diferente na mídia)

65
onvolumechange script Script para ser executado cada vez que o
volume é alterado que (inclui definir o
volume para "mudo")
onwaiting script Script para ser executado quando a mídia
fez uma pausa, mas deverá retomar (como
quando a mídia faz uma pausa para buffer
de mais dados)

4.Validação de formulários
Uma das tarefas mais enfadonhas de se fazer em Javascript é validar formulários. Infelizmente, é também uma das mais comuns.
HTML5 facilita muito nossa vida ao validar formulários, tornando automática boa parte do processo. Em muitos casos, todo ele. Você
já viu que pode tornar seus campos “espertos” com os novos valores para o atributo type, que já incluem validação para datas, emails,
URLs e números. Vamos um pouco além.

4.1.pattern
O atributo pattern nos permite definir expressões regulares de validação, sem Javascript. Veja um exemplo de como validar CEP:
<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8” />
<title>O atributo pattern</title>
</head>
<body>
<form>
<label for=”CEP”>CEP:
<input name=”CEP” id=”CEP” required pattern=”\d{5}-?\d{3}” />
</label>
<input type=”submit” value=”Enviar” />
</form>
</body>
</html>

4.2.novalidate e formnovalidate
Podem haver situações em que você precisa que um formulário não seja validado. Nestes casos, basta incluir no elemento form o
atributo novalidate.
Outra situação comum é querer que o formulário não seja validado dependendo da ação de submit. Nesse caso, você pode usar no
botão de submit o atributo formnovalidate. Veja um exemplo:

<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8” />
<title>Salvando rascunho</title>
<style>
label{display:block;}
</style>
</head>
<body>
<form>
<label>nome: <input name=”nome” required></label>
<label>email: <input name=”email” type=”email” required></label>
<label>mensagem: <textarea name=”mensagem” required></textarea></label>
<input type=”submit” name=”action” value=”Salvar rascunho” formnovalidate>
<input type=”submit” name=”action” value=”Enviar”>
</form>

66
</body>
</html>

4.3.Custom validators
É claro que as validações padrão, embora atendam a maioria dos casos, não são suficientes para todas as situações. Muitas vezes
você vai querer escrever sua própria função de validação Javascript. Há alguns detalhes na especificação do HTML5 que vão ajudá-lo
com isso:
1. O novo evento oninput é disparado quando algo é modificado no valor de um campo de formulário. Diferente de onchange,
que é disparado ao final da edição, oninput é disparado ao editar. É diferente também de onkeyup e onkeypress, porque vai capturar
qualquer modificação no valor do campo, feita com mouse, teclado ou outra interface qualquer.
2. O método setCustomValidity pode ser invocado por você. Ele recebe uma string. Se a string for vazia, o campo será
marcado como válido. Caso contrário, será marcado como inválido.
Com isso, você pode inserir suas validações no campo de formulário e deixar o navegador fazer o resto. Não é mais preciso
capturar o evento submit e tratá-lo. Veja, por exemplo, este formulário com validação de CPF:

<!DOCTYPE html>
<html lang=”pt-BR”>
<head>
<meta charset=”UTF-8” />
<title>Custom validator</title>
<!-- O arquivo cpf.js contém a função validaCPF, que
recebe uma string e retorna true ou false. -->
<script src=”cpf.js”></script>
<script>
function vCPF(i){
i.setCustomValidity(validaCPF(i.value)?’’:’CPF inválido!’)
}
</script>
</head>

<body>
<form>
<label>CPF: <input name=”cpf” oninput=”vCPF(this)” /></label>
<input type=”submit” value=”Enviar” />
</form>
</body>

</html>

5.Multimedia
Multimídia na web é música, som, vídeos e animações.
Navegadores modernos têm suporte para vários formatos multimídia.

Suporte de navegadores
O suporte para sons, animações e vídeos é tratado de formas diferentes por vários navegadores. Alguns elementos multimídia é
suportado, e alguns requerem um programa de ajuda extra (um plug-in).

5.1.O elemento object


O objetivo do elemento <object> é apoiar auxiliares HTML (plug-ins).

Auxiliares HTML (plug-ins)


Um aplicativo auxiliar é um pequeno programa de computador que estende a funcionalidade padrão do navegador. Aplicativos
auxiliares também são chamados de plug-ins.
Os plug-ins são muitas vezes utilizados pelos navegadores para reproduzir áudio e vídeo.

Exemplos de conhecido plug-ins são o Adobe Flash Player e QuickTime.


Os plug-ins podem ser adicionados a páginas da Web através da marca <object> ou a tag <embed>.
A maioria dos plug-ins permitem controle manual (ou programado) sobre as configurações para o volume, voltar, avançar, pausar,

67
parar e jogar.

QuickTime - Executar audio WAV


<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav">
<param name="controller" value="true">
</object>

QuickTime - Executar video MP4


<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>

Adobe Flash Player - Executar video SWF


<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40">
</embed>
</object>

Windows Media Player - Executar filme WMV


O exemplo abaixo mostra o código sugerido usado para exibir um arquivo do Windows Media.
<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true"
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

Plug-ins
Os plug-ins podem ser usados para muitas finalidades: para exibir mapas, verificação de vírus, verificar o ID de banco, e muito mais.
As restrições são poucas

5.2.Audio
Sons podem ser executados de varias formas diferentes.
Problemas e Soluções
A execução de audio em HTML não é facil!
Você deve conhecer um monte de truques para se certificar de seus arquivos de áudio serão reproduzido em todos os navegadores
(Internet Explorer, Chrome, Firefox, Safari, Opera) e em todos os equipamentos (PC, Mac, iPhone, iPad).

Usando Plug-ins
Os plug-ins podem ser adicionados a páginas HTML usando a marca <object> ou a tag <embed>.
Estas tags de recipientes para definir os recursos (normalmente não-HTML recursos), o que, dependendo do tipo, ou será exibida
pelos navegadores, ou através de um plug-in externo.

Usando o elemento <embed>


A tag <embed> define um recipiente externo para o conteúdo (não-HTML).

68
O fragmento de código a seguir deve executar um arquivo MP3 embutido em uma página web:
<embed height="50" width="100" src="horse.mp3">

Problemas:
• Diferentes navegadores suportam diferentes formatos de áudio
• Se um navegador não suporta o formato de arquivo, o áudio não ser reproduzidos sem um plug-in
• Se o plug -in não estiver instalado no computador dos usuários, o áudio não será reproduzido
• Se você converter o arquivo para outro formato, ele ainda não vai reproduzir em todos os navegadores

Usando o elemento <object>


A tag <object> tambem pode definir um recipiente externo para o contéudo (não-HTML).
O fragmento de código a seguir deve executar um arquivo MP3 embutido em uma página web:
<object height="50" width="100" data="horse.mp3"></object>

Problemas:
• Diferentes navegadores suportam diferentes formatos de áudio
• Se um navegador não suporta o formato de arquivo, o áudio não sera reproduzidos sem um plug-in
• Se o plug-in não estiver instalado no computador dos usuários, o áudio não será reproduzido
• Se você converter o arquivo para outro formato, ele ainda não vai reproduzir em todos os navegadores

Usando o elemento <audio> do HTML5


A HTML5 tag <audio> define o som, como música ou outros fluxos de áudio.
O elemento <audio> funciona em todos os navegadores modernos.
O exemplo a seguir usa a tag <audio>, e especifica um arquivo de MP3 (para o Internet Explorer, Chrome e Safari), e um arquivo
OGG (para Firefox e Opera). Se alguma coisa falhar, ele exibe um texto:

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Problemas:
• Você deve converter os arquivos de áudio em formatos diferentes
• O elemento <audio> não funciona em navegadores mais antigos.

A Melhor Solução HTML


O exemplo abaixo usa o elemento HTML5 <audio> e tenta reproduzir o áudio seja como MP3 ou OGG. Se ele falhar, o código "cai"
para tentar o elemento <embed>:
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

Problemas:
• Você deve converter os arquivos de áudio em formatos diferentes
• O elemento <embed> não pode "retroceder" para exibir uma mensagem de erro

Yahoo Media Player - Uma maneira fácil de adicionar áudio para o seu site
O GRATUITO Yahoo Media Player é definitivamente um favorito: Você simplesmente deixar Yahoo fazer o trabalho de tocar suas
músicas.
Ele reproduz MP3 e um monte de outros formatos. Você pode adicioná-lo à sua página (ou blog) com uma única linha de código, e
facilmente transformar sua página HTML em uma playlist profissional:
<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/js"></script>

Para usá-lo, insera o seguinte JavaScript no fundo da sua página web:


<script src="http://mediaplayer.yahoo.com/js"></script>

69
Em seguida, basta ligar para os seus arquivos de áudio em seu HTML, e o código JavaScript cria automaticamente um botão de
reprodução para cada música:
<a href="song1.mp3">Play Song 1</a>
<a href="song2.wav">Play Song 2</a>
...
...

O Yahoo Media Player apresenta seus leitores com um botão de play pequeno em vez de um player completo. No entanto, quando
você clica no botão, um player completo aparece. Note-se que o leitor está sempre encaixado e pronto, na parte inferior da janela.
Basta clicar sobre ele para deslizá-lo para fora.

Usando um Hiperlink
Se uma página Web inclui um hiperlink para um arquivo de media, a maioria dos navegadores vai usar uma "aplicação auxiliar"
para reproduzir o arquivo.
O fragmento de código a seguir exibe um link para um arquivo MP3. Se um usuário clica no link, o navegador irá lançar um
aplicativo auxiliar para reproduzir o arquivo:
<a href="horse.mp3">Play the sound</a>

Nota sobre sons embutidos


Quando o som está incluído em uma página web, ou como parte de uma página web, ele é chamado de som embutido.
Se você pretende usar sons embutidos, esteja ciente de que muitas pessoas achem a idéia irritante. Observe também que alguns
usuários podem ter desligado a opção de som embutido em seu navegador.
Nosso melhor conselho é incluir sons em linha apenas em páginas onde o usuário espera ouvir sons. Um exemplo disso é uma
página que é aberta após o usuário clicar em um link para ouvir uma gravação.

5.3.Video
Videos podem ser reproduzido em HTML de diferentes maneiras.

Problemas e soluções
Mostrar videos não é facil. Você deve adicionar um monte de truques para se certificar de seu vídeo será reproduzido em todos os
navegadores (Internet Explorer, Chrome, Firefox, Safari, Opera) e em todos os equipamentos (PC, Mac, iPhone, iPad).

O elemento<embed>
O objetivo da tag <embed> é incorporar elementos multimídia em páginas HTML.
O seguinte fragmento HTML exibe um vídeo em Flash incorporado em uma página web:

<embed src="intro.swf" height="200" width="200">

Problemas
• Se o navegador não suporta Flash, o vídeo não será reproduzido
• iPad e iPhone não suportam vídeos em Flash
• Se você converter o vídeo para outro formato, ele ainda não vai reproduzir em todos os navegadores

Usando o elemento <object>


O propósito da tag <object> é incorporar elementos multimídia em páginas HTML.

O seguinte fragmento HTML exibe um vídeo em Flash incorporado em uma página web:
<object data="intro.swf" height="200" width="200"></object>

Problemas:
• Se o navegador não suporta Flash, o vídeo não será reproduzido
• iPad e iPhone não suportam vídeos em Flash
• Se você converter o vídeo para outro formato, ele ainda não vai reproduzir em todos os navegadores

Usando o elemento HTML5 <video>


A tag HTML5 <video> define um vídeo ou filme.
O elemento <video> funciona em todos os navegadores modernos.

O seguinte fragmento HTML exibe um vídeo em OGG, MP4 ou formato WebM:

70
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>

Problemas
Você deve converter seus vídeos para diferentes formatos
O elemento <video> não funciona em navegadores mais antigos

A melhor solução HTML


O exemplo abaixo usa quatro diferentes formatos de vídeo. O elemento HTML 5 <video> tenta reproduzir o vídeo em formato
MP4, ou,OGG, ou em WebM. Se isso não funcionar, o código "cai" para tentar o elemento <object>. Se isso também falhar, ele "cai"
para o elemento <embed>:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>

Problema:
• Você precissa converter seus videos em diferentes formatos

A solução YouTube
A maneira mais fácil de exibir vídeos em HTML é usar YouTube.

Reproduzindo um video YouTube em HTML


Se você quiser reproduzir um vídeo em uma página da web, você pode fazer o upload do vídeo para o YouTube e inserir o código
HTML adequado para exibir o vídeo:
Exemplo - IFrame
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>

Exemplo - Embed
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>

Usando um hiperlink
Se uma página web inclui um link para um arquivo de mídia, a maioria dos navegadores irá usar um "aplicativo auxiliar" para
reproduzir o arquivo.

O fragmento de código a seguir exibe um link para um vídeo Flash. Se um usuário clica no link, o navegador irá lançar um
aplicativo auxiliar para reproduzir o arquivo:

<a href="intro.swf">Play a video file</a>

Uma nota sobre vídeos embutidos


Quando um vídeo está incluído em uma página web é chamado de vídeo embutido.
Se você planeja usar vídeos embutidos, esteja ciente de que muitas pessoas acham chato. Observe também que alguns usuários
podem ter desligado a opção de vídeo embutido em seu navegador.
Nosso melhor conselho é incluir vídeos embutidos apenas em páginas onde o usuário espera para ver um vídeo. Um exemplo
disso é uma página que se abre após o usuário clicar em um link para ver o vídeo.

71
6.Armazenamento Web com HTML5
Com HTML5, páginas da web podem armazenar dados localmente no navegador do usuário.
Anteriormente, isso era feito com cookies. No entanto, Web Storage é mais seguro e mais rápido. Os dados não são incluído a cada
solicitação do servidor, mas usados apenas quando solicitado. Também é possível armazenar grandes quantidades de dados, sem afetar
o desempenho do site.
Os dados são armazenados em pares chave /valor, e uma página web só pode acessar os dados armazenados por si só.

localStorage e sessionStorage
Existem dois novos objectos para o armazenamento de dados no cliente:

localStorage - armazena dados sem data de validade


sessionStorage - armazena dados para uma sessão
Antes de usar o armazenamento web, verifique o suporte ao navegador para localStorage e sessionStorage:
if(typeof(Storage)!=="undefined")
{
//Yes! localStorage and sessionStorage support!
//Some code.....
}
else
{
//Sorry! No web storage support..
}

O objeto localStorage
O objeto localStorage armazena os dados sem data de validade. Os dados não serão apagados quando o navegador é fechado, e
estará disponível no próximo dia, semana ou ano.
localStorage.lastname="Smith";
document.getElementById("result").innerHTML="Last name: "
+ localStorage.lastname;

Explicação do exemplo:
Cria um par de chaves /valor localStorage com chave = "sobrenome" e valor = "Smith"
Recupera o valor da chave "sobrenome" e insere-o no elemento com id = "resultado"
Dica: chaves /valor pares são sempre armazenados como strings. Lembre-se de convertê-los para outro formato, quando
necessário.

O exemplo a seguir conta o número de vezes que um usuário tenha clicado em um botão. Neste código a cadeia de valor é convertido
num número para poder aumentar o contador:
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";

O objeto sessionStorage
O objeto sessionStorage é igual ao objeto localStorage, exceto que ele armazena os dados por apenas uma sessão. Os dados são
apagados quando o usuário fecha a janela do navegador.

O exemplo a seguir conta o número de vezes que um usuário clicou um botão, na sessão atual:
if (sessionStorage.clickcount)
{
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this

72
session.";

7.Cache da aplicativos HTML


Com HTML5 é fácil fazer uma versão offline de uma aplicação web, através da criação de um arquivo de manifesto de cache.

O que é o cache de aplicativos?


HTML5 introduz cache de aplicativos, o que significa que se uma aplicação web é armazenada em cache, e acessível sem uma
conexão à internet.

Cache de aplicativo fornece a um aplicativo três vantagens:


1. Navegação offline - os usuários podem usar o aplicativo quando ele estiver offline
2. Velocidade - recursos em cache carregar mais rápido
3. Carga do servidor reduzido - o navegador só irá baixar recursos atualizados /alterados do servidor

Exemplo de manifesto de cache


O exemplo abaixo mostra um documento HTML com um manifesto de cache (para navegação off-line):
<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

Manifesto de cache Básico


Para ativar o cache da aplicação, inclua o atributo manifest na tag <html>.
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Cada página com o atributo de manifesto especificado será armazenada em cache quando o usuário a visita. Se o atributo
manifesto não é especificado, a página não será armazenada em cache (a menos que a página for especificada diretamente no arquivo
de manifesto).

O arquivo de manifesto
O arquivo de manifesto é um arquivo de texto simples, que informa ao navegador o que armazenar em cache (e que não armazenar).
O arquivo de manifesto tem três seções:
CACHE MANIFEST - arquivos listados sob este cabeçalho serão armazenada em cache após serem baixadas pela primeira vez
NETWORK - Os arquivos relacionados sob esse cabeçalho requerem uma conexão com o servidor, e nunca vão ser armazenada em
cache
FALLBACK - Arquivos listados sob esse cabeçalho especificam páginas fallback se uma página é inacessível.

CACHE MANIFEST
A primeira linha de manifesto de cache, é necessário:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

O arquivo de manifesto acima lista três recursos: um arquivo de CSS, uma imagem GIF, e um arquivo JavaScript. Quando o
arquivo de manifesto é carregado, o navegador irá baixar os três arquivos do diretório raiz do site. Então, sempre que o usuário não
está conectado à Internet, os recursos ainda estará disponível.

NETWORK
A seção de rede abaixo especifica que o arquivo "login.asp" nunca deve ser armazenado em cache, e não estará disponível offline:
NETWORK:
login.asp

73
Um asterisco pode ser usado para indicar que todos os outros recursos /arquivos requerem uma conexão internet:
NETWORK:
*

FALLBACK
A seção FALLBACK abaixo especifica que "offline.html" será servido no lugar de todos os arquivos no catálogo html , no caso de
uma conexão com a Internet não pode ser estabelecida:
FALLBACK:
/html//offline.html

Nota: A primeira URI é o recurso o segundo é o retorno.

Atualizando o cache
Uma vez que um aplicativo é armazenados em cache, ele permanece em cache até que uma das seguintes situações ocorra:

1. O usuário limpar o cache do navegador


2. O arquivo de manifesto é modificado
3. O cache de aplicativo de programação é atualizada

Exemplo - Arquivo de manifesto de cache


CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html//offline.html

Dica: As linhas que começam com "#" são linhas de comentário, mas também pode servir a um outro propósito. O cache de um
aplicativo é atualizado apenas quando o arquivo de manifesto sofre mudanças. Se você editar uma imagem ou mudar uma função
JavaScript, essas alterações não serão recarregadas no cache. Atualizando a data e a versão em uma linha de comentário é uma
maneira de fazer com que o navegador atualize o cache de seus arquivos.

Notas sobre cache de aplicação


Tenha cuidado com que você coloca no cache.

Uma vez que um arquivo é armazenado em cache, o navegador irá continuar a mostrar a versão em cache, mesmo se você mudar o
arquivo no servidor. Para garantir que o navegador atualize o cache, você precisa alterar o arquivo de manifesto.

8.Workers Web
Um worker da web é um JavaScript que executa em segundo plano, sem afetar o desempenho da página.
Quando uma página HTML executa scripts, ela página fica sem resposta até que o script seja concluído.

Um worker web é um JavaScript que roda em segundo plano, independentemente de outros scripts, sem afetar o desempenho da
página. Permite ao usuário continuar a fazer o que quiser: clicar, selecionar coisas, etc, enquanto o worker web é executado em
segundo plano.

Checar suporte a worker Web


Antes de criar um worker web, verifique se o navegador do usuário pode suporta-lo:
if(typeof(Worker)!=="undefined")
{
//Yes! Web worker support!
//Some code.....
}
else
{
//Sorry! No Web Worker support..
}

74
Criando um arquivo de Web Worker
Agora, vamos criar o nosso worker web em um JavaScript externo.

Aqui, nós criamos um script que conta. O script é armazenado no arquivo 'demo_workers.js':
var i=0;

function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

A parte importante do código acima é o método postMessage () - que é usado para envia uma mensagem de volta para a página
HTML.
Nota: Normalmente os workers web não são utilizados para tais scripts simples, mas sim para tarefas que exigem mais da CPU.

Criando um objeto worker web


Agora que temos o arquivo worker web, precisamos chamá-lo para a página HTML.

As linhas a seguir verificam se o worker já existe, se não - ele cria um novo objeto worker web e executa o código em
"demo_workers.js":
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}

Então podemos enviar e receber mensagens do worker web.


Adicionar um ouvite de evento "onMessage" para o worker web.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

Quando o worker web envia uma mensagem, o código dentro do ouvinte de evento é executado. Então dados do worker web são
armazenados em event.data.

Finalizar o worker web


Quando um objeto worker web é criado, ele vai continuar a ouvir as mensagens (mesmo depois do script externo terminar) até ele
que seja encerrado.

Para terminar um worker web, e liberar os recursos do navegador/computador, use o método terminate():
w.terminate();

Exemplo de worker web com código completo


<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>


<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{

75
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {
document.getElementById("result").innerHTML=event.data;
};
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";
}
}

function stopWorker()
{
w.terminate();
}
</script>

</body>
</html>

Worker web e DOM


Como workers web são arquivos externos eles não tem acesso ao seguintes objetos Javascript:
• O objeto window
• O objeto document
• O objeto parent

9.Drag and Drop


Arrastar e soltar é uma característica muito comum. É quando você "agarrar" um objeto e arrastá-lo para um local diferente.

Em HTML5, arrastar e soltar é parte do padrão, e qualquer elemento pode ser arrastado.
A API de Drag and Drop é relativamente simples. Basicamente, inserir o atributo draggable=”true” num elemento o torna
arrastável. E há uma série de eventos que você pode tratar. Os eventos do objeto sendo arrastado são:

9.1.dragstart
O objeto começou a ser arrastado. O evento que a função recebe tem um atributo target, que contém o objeto sendo arrastado.
• drag - O objeto está sendo arrastado
• dragend - A ação de arrastar terminou

O objeto sobre o qual outro é arrastado sofre os seguintes eventos:


• dragenter - O objeto sendo arrastado entrou no objeto target
• dragleave - O objeto sendo arrastado deixou o objeto target
• dragover - O objeto sendo arrastado se move sobre o objeto target
• drop - O objeto sendo arrastado foi solto sobre o objeto target

Detalhes importantes:
A ação padrão do evento dragover é cancelar a ação de dragging atual. Assim, nos objetos que devem receber drop, é preciso setar
uma ação de dragover com, no mínimo, return false.
Seleções de texto são automaticamente arrastáveis, não precisam do atributo draggable. E se você quiser criar uma área para onde
seleções de texto possam ser arrastadas, basta tratar esses mesmos eventos.
Por fim, todas funções de tratamento de evento de drag recebem um objeto de evento que contém uma propriedade dataTransfer,
um dataset comum a todos os eventos durante essa operação de drag.

<!DOCTYPE HTML>
<html>
<head>
<meta content=”text/html; charset=UTF-8” http-equiv=”content-type”/>
<title>HTML5 Drag and drop demonstration</title>

76
<style type=”text/css”>
#boxA, #boxB {
float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }

#drag, #drag2 {
width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
</style>
<script type=”text/javascript”>

//Quando o usuário inicia um drag, guardamos no dataset do evento


//o id do objeto sendo arrastado
function dragStart(ev) {
ev.dataTransfer.setData(“ID”, ev.target.getAttribute(‘id’));
}

//Quando o usuário arrasta sobre um dos painéis, retornamos


//false para que o evento não se propague para o navegador, o
//que faria com que o conteúdo fosse selecionado.
function dragOver(ev) { return false; }

//Quando soltamos o elemento sobre um painel, movemos o


//elemento, lendo seu id do dataset do evento
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData(“ID”);
ev.target.appendChild(document.getElementById(idelt));
}

</script>
</head>
<body>
<!-- Painel 1 -->
<div id=”boxA”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
<!-- Draggable 1 -->
<div id=”drag” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
<!-- Draggable 2 -->
<div id=”drag2” draggable=”true”
ondragstart=”return dragStart(event)”>drag me</div>
</div>

<!-- Painel 2 -->


<div id=”boxB”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>
</div>

</body>
</html>

10.Geolocalização
Localizar a posição do usuário
O HTML5 Geolocation API é usada para obter a posição geográfica de um usuário.
Nota: Geolocalização é muito mais precisa para dispositivos com GPS, como o iPhone.

77
Usando a Geolocalização
Usar o método getCurrentPosition () para obter a posição do utilizador.
O exemplo a seguir é um exemplo Geolocation simples retornando a latitude e longitude da posição do usuário:

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

Explicação do exemplo:

1. Verifique se Geolocalização é suportada


2. Se suportado, execute o getCurrentPosition () método. Se não, exibir uma mensagem para o utilizador
3. Se o getCurrentPosition () é bem sucedido, ele retorna um objeto coordenadas para a função especificada no parâmetro
(showPosition)
4. O showPosition () função obtém o mostra a latitude e longitude
5. O exemplo acima é um script Geolocation muito básico, sem manipulação de erro.

Tratamento de erros e rejeições


O segundo parâmetro do método getCurrentPosition () é usado para tratar os erros. Ele especifica uma função a ser executada se não
conseguir obter a localização do usuário:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}

Códigos de erro:
Permission denied - O usuário não permitiu Geolocation
Position unavailable - Não é possível obter a localização atual
Timeout - A operação expirou

Exibindo o resultado em um mapa


Para exibir o resultado em um mapa, você precisa de acesso a um serviço de mapas que pode usar a latitude e longitude, como o
Google Maps:
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;

78
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";

document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}

No exemplo acima usamos a latitude e longitude retornadas para mostrar a localização em um mapa do Google (usando uma
imagem estática).
Também é possivel usar um script para mostrat um mapa interativo com um marcador de zoom e opções de arrasto.

Localização de informações especificas


Esta página demonstrou como para mostrar a posição de um usuário em um mapa. No entanto, Geolocation também é muito útil
para a localização de informações específicas.

Exemplos:
1. Up-to-date informações locais
2. Mostrando Pontos de interesse perto do usuário
3. Turn-by-turn de navegação (GPS)

O método getCurrentPosition()
O getCurrentPosition() retorna um objeto se ele é bem sucedido. Propriedades a latitude, longitude e precisão são sempre devolvidos.
As outras propriedades abaixo são retornadas se disponível.

coords.latitude - A latitude como um número decimal


coords.longitude - A longitude como um número decimal
coords.accuracy - A precisão da posição
coords.altitude - A altitude em metros acima do nível médio do mar
coords.altitudeAccuracy - A precisão da posição de altitude
coords.heading - A posição em graus no sentido horário a partir do Norte
coords.speed - A velocidade em metros por segundo
timestamp - A data /hora da resposta

Objeto Geolocation - Outros Métodos interessantes


watchPosition () - Retorna a posição atual do usuário e continua a retornar à posição atualizada conforme os movimentos do usuário
(como o GPS em um carro).
clearWatch () - Interrompe a watchPosition () método.

O exemplo a seguir mostra o método watchPosition (). Você precisa de um dispositivo GPS precisa de testar isso (como o iPhone):
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>

11.Eventos Sever-Sent
Eventos Server-Sent HTML5 possibilitam que uma página web para obter atualizações de um servidor.

Eventos Server-Sent - Um Caminho de mensagens


Um evento Server-Sent é quando uma página da web recebe automaticamente as atualizações de um servidor.
Isto também era possível antes, mas a página web teria que perguntar se há atualizações disponíveis. Com server-enviados
eventos, as atualizações vêm automaticamente.

79
Exemplos: Facebook /Twitter, atualizações de preços de ações, feeds de notícias, resultados desportivos, etc

Receber notificações de eventos Server-Sent


O objeto EventSource é usado para receber notificações de eventos Server-Sent:
Exemplo:
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};

Explicação do evento:
Cria um novo objeto EventSource, e especifica o URL da página de envio das atualizações (neste exemplo "demo_sse.php")
Cada vez que uma atualização é recebido, ocorre um evento onMessage
Quando ocorre um evento onMessage, são colocados os dados recebidos no elemento com id = "result".

Checar o suporte a eventos Sever-Send


No exemplo acima, havia algumas linhas extras de código para verificar o suporte ao navegador para eventos Server-Sent:
if(typeof(EventSource)!=="undefined")
{
//Yes! Server-sent events support!
//Some code.....
}
else
{
//Sorry! No server-sent events support..
}

Código Sever-Side

A sintaxe do eventos Sever-Send é simples


1. Defina o cabeçalho "Content-Type" para "text /event-stream".
2. Especifique que a página não deva ser armazenada em cache.
3. Defina a saída dos dados que serão enviados
4. Leve os dados de saída de volta a página Web.

O objeto EventSource
Nos exemplos anteriores, usamos o evento onMessage para obter mensagens. Mas outros eventos também estão disponíveis:
onopen - Quando uma conexão com o servidor é aberta
onmessage - Quando uma mensagem é recebida
onerror - Quando ocorre um erro

12.Revisão ortográfica e gramatical


Os agentes de usuário podem oferecer recursos de revisão ortográfica e gramatical, dependendo do que houver disponível em cada
plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta através do atributo spellcheck. Inserir
spellcheck=”true” num elemento faz com que a revisão esteja habilitada para ele. Você também pode desabilitar a revisão para
determinado elemento, inserindo spellcheck=”false”.

13.O elemento device


Você pode inserir em seu HTML um elemento de acesso à webcam do usuário, assim:
<device type=”media”>
Isso vai exibir uma interface solicitando ao usuário acesso a sua webcam. Se ele tiver mais de uma, também será permitido que ele
escolha que webcam usar. O atributo media também pode conter o valor “fs”, que vai abrir uma caixa de seleção no sistema de
arquivos, permitindo ao usuário escolher um arquivo para fazer stream.
O passo seguinte é conectar o stream desse seu elemento device a alguma coisa. Veja, por exemplo, como conectá-lo a um
elemento video na própria página, fazendo com que o usuário possa ver a imagem de sua própria webcam:

<!DOCTYPE html>

80
<html lang=”en-US”>
<head>
<meta charset=”UTF-8” />
<title>Videochat, step 1</title>

<script>
function update(stream) {
document.getElementsByTagName(‘video’)[0].src = stream.url;
}
</script>
</head>
<body>
<p>To start chatting, select a video camera: <device type=media onchange=”update(this.data)”></p>
</body>
</html>

13.1.Streams
Você deve ter notado, no script acima, que a função de update recebe um parâmetro stream. Trata-se de um objeto da classe
Stream, que possui uma propriedade url, que já usamos acima, e um método record. O método record inicia a gravação do stream e
retorna um objeto StreamRecorder. Esse último possui um método stop, que retorna o arquivo que foi gravado.

Referèncias
W3C W3SCHOOLS; HTML Tutorial - (HTML5 Compliant); http://www.w3schools.com/html

FER FERREIRA. Elcio, EIS. Diego ; HTML5 Curso W3C Escritótio Brasil

K19 K19; K02 - Desenvolvimento Web com HTML, CSS e JavaScript

81

Você também pode gostar