Livro HTML 5 um mero resumo

HML5

Um mero resumo

Jonas Mayer

versão 1.0

1

2

Sumário1.Introdução.............................................................................................................................................................7

1.1.O que é HTML? ...........................................................................................................................................72.Estrutura básica....................................................................................................................................................7

2.1.O Doctype ....................................................................................................................................................72.2.O elemento HTML.......................................................................................................................................72.3.O HEAD.......................................................................................................................................................7

2.3.1.O elemento title.....................................................................................................................................82.3.2.O elemento base....................................................................................................................................82.3.3.O elemento link.....................................................................................................................................82.3.4.O elemento style....................................................................................................................................82.3.5.O elemento meta...................................................................................................................................8

2.3.5.1.Metatag Charset.............................................................................................................................92.3.6.O elemento script..................................................................................................................................9

2.4.Formatação...................................................................................................................................................92.5.Tag LINK......................................................................................................................................................92.6.Parágrafos.....................................................................................................................................................92.7.Cabeçalho...................................................................................................................................................102.8.Links...........................................................................................................................................................102.9.Âncoras.......................................................................................................................................................112.10.Imagens.....................................................................................................................................................112.11.Tabelas......................................................................................................................................................122.12.Listas.........................................................................................................................................................132.13. Blocos......................................................................................................................................................13

2.13.1.O elemento div..................................................................................................................................132.13.2.O elemento span................................................................................................................................14

2.14.Layouts.....................................................................................................................................................142.15.Formulários...............................................................................................................................................15

2.15.1.A tag input.........................................................................................................................................152.15.2.A tag select........................................................................................................................................172.15.3.A tag datalist......................................................................................................................................182.15.4.A tag keygen......................................................................................................................................182.15.5.A tag output.......................................................................................................................................192.15.6.A tag textarea....................................................................................................................................192.15.7.A tag label.........................................................................................................................................192.15.8.A tag form.........................................................................................................................................202.15.9.Métodos GET e POST......................................................................................................................20

2.16.O elemento iframe....................................................................................................................................212.17. Entidades..................................................................................................................................................212.18.Codificação da URL.................................................................................................................................222.19.O elemento canvas....................................................................................................................................222.20.SVG .........................................................................................................................................................232.21.O elemento Video.....................................................................................................................................242.22.O elemento Audio ....................................................................................................................................24

3. Modelos de conteúdo.........................................................................................................................................253.1.Categorias...................................................................................................................................................25Metadata content...............................................................................................................................................26

base ..............................................................................................................................................................26command .....................................................................................................................................................26link ..............................................................................................................................................................27meta .............................................................................................................................................................28noscript ........................................................................................................................................................29script ............................................................................................................................................................30

3

style .............................................................................................................................................................30title ..............................................................................................................................................................31

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

4

select.............................................................................................................................................................58small.............................................................................................................................................................58span..............................................................................................................................................................59strong............................................................................................................................................................59sub................................................................................................................................................................59sup................................................................................................................................................................59table..............................................................................................................................................................59textarea.........................................................................................................................................................60time..............................................................................................................................................................61ul..................................................................................................................................................................61var................................................................................................................................................................62video.............................................................................................................................................................62wbr...............................................................................................................................................................63

Sectioning content............................................................................................................................................63Heading content................................................................................................................................................63Phrasing content................................................................................................................................................63Embedded content............................................................................................................................................64Interactive content............................................................................................................................................653.2.Atributos globais.........................................................................................................................................653.3.Atributos de Evento....................................................................................................................................66

3.3.1.Atributos de eventos de janela............................................................................................................663.3.2.Eventos de formulários.......................................................................................................................663.3.3.Evento do teclado................................................................................................................................673.3.4.Eventos de Mouse...............................................................................................................................673.3.5.Eventos de mídia.................................................................................................................................68

4.Validação de formulários....................................................................................................................................704.1.pattern.........................................................................................................................................................704.2.novalidate e formnovalidate.......................................................................................................................704.3.Custom validators.......................................................................................................................................71

5.Multimedia.........................................................................................................................................................715.1.O elemento object.......................................................................................................................................715.2.Audio..........................................................................................................................................................725.3.Video...........................................................................................................................................................74

6.Armazenamento Web com HTML5 ................................................................................................................767.Cache da aplicativos HTML...............................................................................................................................778.Workers Web .....................................................................................................................................................799.Drag and Drop....................................................................................................................................................80

9.1.dragstart......................................................................................................................................................8110.Geolocalização.................................................................................................................................................8211.Eventos Sever-Sent...........................................................................................................................................8412.Revisão ortográfica e gramatical......................................................................................................................8513.O elemento device............................................................................................................................................85

13.1.Streams.....................................................................................................................................................85Referè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ásicaUm 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 HTMLO 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 titleA 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 baseA 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 linkA 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 styleA 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 metaO <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 scriptA tag script é usada para definir um script do lado cliente, como um JavaScript.

2.4.FormataçãoHTML 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 LINKHá 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ágrafosOs 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çalhoUma 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.LinksPara 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 elementopode 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.ÂncorasAlé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.ImagensEm 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.TabelasTabelas 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>

BordasPara 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çalhosInformaçõ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.ListasEm 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. BlocosElementos HTML podem ser agrupados com <div> e <span>.

2.13.1.O elemento divO 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 spanO 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.LayoutsLayout de página web é muito importante para fazer o seu site com bom aspecto.

Layouts de siteA 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 úteisDica: 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áriosFormulá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 inputO 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 secrie 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 selectA 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 datalistO 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 keygenA 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 outputO 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 textareaA 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 labelEm 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 formA 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 POSTO 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 POSTOs 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 POSTObserve que a string de consulta é enviado no corpo da mensagem HTTP de um pedido POST.

POST /test/demo_form.asp HTTP/1.1Host: w3schools.comname1=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 navegador

Os parâmetros não são salvos no histórico do navegador

Restrição de tamanho de dados Sim, ao enviar dados, o método GET adiciona os dados à URL, e o comprimentode um URL é limitado (comprimento máximo de URL é de 2048 caracteres)

Sem restrição

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, porque os dados enviados são parte da URL

Nunca use GET quando enviar senhas ou outras informações confidenciais!

O POST é um pouco mais seguro do que GET, porque os parâmetros não são armazenadas no histórico do navegador ou em logs de servidores web

Visibilidade Dados ficam visíveis para todos na URL Os dados não são exibidos na URL

Outros métodos HTMLA 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 documentoPUT - Envia uma representação da URI especificadaDELETE - Exclui o recurso especificadoOPTIONS - Retorna os métodos HTTP que o servidor suportaCONNECT - Converte uma solicitação de conexão em uma traspatente TCP/IP tunnel.

2.16.O elemento iframeUm 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 bordaO 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 linkO 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. EntidadesCaracteres 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: < ou <

Espaço sem quebraUma 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 .

2.18.Codificação da URLUma 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 URLURLs 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 canvasO 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 JavaScriptTodo 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 SVGVantagens 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 HTMLEm HTML 5 você pode incorporar SVG diretamente na página HTML através do elemento SVG.

Exemplo:


<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 CanvasSVG é 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 VideoMuitos sites modernos mostram vídeos. HTML5 fornece um padrão para mostrar-los.

Video na WebAté 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 DOMHTML5 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 funcionaPara 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údoHá 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 contentEste 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_parent_self_topframename

Especifica o destino padrão para todos os hyperlinks e forms na página.

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:


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 checkboxcommandradio

Especifica o tipo de comando

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 XHTMLNo HTML a tag <link> não tem tag final.No XHTML a tag <link> deve ser devidamente fechado.

Atributos:


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 alternatearchivesauthorbookmarkexternalfirsthelpiconlastlicensenextnofollownoreferrerpingbackprefetchprevsearchsidebarstylesheettagup

Obrigatório. Especifica a relação entre o documento atual e o documento linkado.

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 eventosA 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 XHTMLNo 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-typedefault-stylerefresh

Fornece um cabeçalho HTTP para a informação /valor do atributo content

name application-nameauthordescriptiongeneratorkeywords

Especifica um nome para os metadados

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></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áliseSe 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 XHTMLEm 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 dentrode uma seção CDATA:

<script type="text/javascript">//<![CDATA[var i=10;if (i<5) { //some code }//]]></script>

Atributos:


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 GlobaisA 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:


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 contentPor 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:

aDefiniçã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 azulUm link visitado é sublinhado e roxoUm 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 atributotarget.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 alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag

Especifica a relação entre o documento atual e o documento linkado


Especifica onde abrir o documento vinculado

type MIME_type Especifica o tipo MIME do documento linkado

Atributos globais e eventosA 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>

abbrDefiniçã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.

addressDefiniçã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:[email protected]">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:


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 alternateauthorbookmarkhelplicensenextnofollownoreferrerprefetchprevsearchtag

Especifica a relação entre o documento actual e o URL de destino

shape defaultrect

Especifica o formato da área

32

circlepoly


Especifica onde abrir o URL de destino

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>

articleDefiniçã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>

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


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>

audioDefiniçã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:


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, cadavez que ele for concluído

muted muted Especifica que a saída de áudio deve ser silenciado

preload autometadatanone

Especifica se e como o autor acha que o áudio deve ser carregado quando a página é carregada

src URL Especifica a URL do arquivo de áudio


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>

bDefiniçã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.


Exemplo:

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

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

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

Atributos:


dir ltr - esquerda para a direita rtl - direita para a esquerda

Obrigatório. Especifica a direção do texto do texto dentro do elemento <bdo>


Exemplo:Especifica a direção do texto:

<bdo dir="rtl">This text will go right-to-left.</bdo>

blockquoteDefiniçã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:


cite URL Especifica a fonte da citação


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>

brDefiniçã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 />.


Exemplo:Uma quebra de linha é marcada como segue:

This text contains<br>a line break.

buttonDefiniçã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:


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-urlencodedmultipart/form-datatext/plain

Especifica como forma de dados devem sercodificados antes de enviá-lo para um servidor. Apenas para type = "submit"

formmethod getpost

Especifica como enviar o formulário de 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_self_parent_topframename

Especifica onde exibir a resposta depois deenviar o formulário. Apenas para type = "submit"

name name Especifica o nome do botão

type buttonresetsubmit

Especifica o tipodo botão

value text Especifica o valor inicial do botão


Exemplo:Um botão clicável é marcada como segue:

<button type="button">Click Me!</button>

canvasDefiniçã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:


height pixels Especifica a altura da tela

width pixels Especifica a largura da tela


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>

citeDefiniçã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.


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>

codeDefiniçã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

datalistDefiniçã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>.


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

delDefiniçã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:


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


Exemplo:Um texto com uma parte apagada, e uma parte nova, inserida:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

detailsDefiniçã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:


open open Especifica que as informações devem estarvisíveis (aberto) para o usuário


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>

dfnver <code>

39

divDefiniçã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.


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>

dlDefiniçã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).


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>

emver <code>

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

Atributo:


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">

fieldsetDefiniçã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:


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 fieldsetpertence

name text Especifica um nome para o fieldset


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>

figureDefinição e uso:A tag <figure> especifica independente de conteúdo, como ilustrações, diagramas, fotos, listas de código, etcEnquanto 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>.


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

footerDefiniçã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, etcVocê 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>.


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>

formDefiniçã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 XHTMLEm XHTML, o atributo name está obsoleto. Use o atributo id global em vez.Atributos:


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 onoff

Especifica se um formulário deve ter autocomplete ligado ou desligado

enctype application/x-www-form-urlencodedmultipart/form-datatext/plain

Especifica como o formulário de dados devem ser codificados quando enviá-lo para o servidor (apenas para o método = "post")

method getpost

Especifica o método HTTP para o envio deformulá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_self_parent_top

Especifica onde exibir a resposta que é recebido após enviar o formulário

42


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 - h6Definiçã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


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>

headerDefiniçã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>.


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>

hgroupDefiniçã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).


43


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>

hrDefiniçã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 XHTMLEm HTML, a tag <hr> não tem tag final.Em XHTML, a marca <hr> deve ser bem fechada, como esta: <hr />.


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>

iDefiniçã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>

iframeDefiniçã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:


height pixels Especifica a altura de um <iframe>

name name Especifica o nome de um <iframe>

sandbox ""allow-formsallow-same-originallow-scriptsallow-top-navigation

Permite que um conjunto de restrições adicionais para o conteúdo do <iframe>

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>


Exemplo:Um quadro em linha é marcado como segue:

<iframe src="http://www.w3schools.com"></iframe>

imgDefiniçã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:


alt text Especifica um texto alternativo para uma imagem

crossorigin anonymous use-credentials

Permitir imagens de sites de terceiros que 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">

inputDefiniçã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/*video/*image/*MIME_type

Especifica os tipos de arquivos que o servidor aceita (apenas para type = "file")

alt text Especifica um texto alternativo para imagens (somente para type = "image")

autocomplete onoff

Especifica se o elemento <inpit> deve como 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-urlencodedmultipart/form-datatext/plain

Especifica como os forms-dados devem sercodificados quando enviá-dos para o servidor (por type = "submit" e type = "image")

formmethod getpost

Define o método HTTP para o envio de dados para o URL de ação (para type = "submit" e type = "imagem")

46

formnovalidate formnovalidate Define que os elementos de formulário nãodeve ser validado quando submetidos

formtarget _blank_self_parent_topframename

Especifica onde exibir a resposta que é recebida após enviar o formulário (para type = "submit" e type = "image")

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 numberdate

Especifica o valor máximo de um elemento<input>

maxlength number Especifica o número máximo de caracterespermitidos em um elemento <input>

min numberdate

Especifica um valor mínimo para um 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 qualo 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 buttoncheckboxcolordate datetime datetime-local email filehiddenimagemonth number passwordradiorange resetsearchsubmit

Especifica o tipo de elemento <input> paraexibir

47

teltexttime urlweek

value text Especifica o valor de um elemento <input>

width pixels Especifica a largura de um elemento <input> (apenas para type = "image")


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>

insDefiniçã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.


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


Exemplo:Um texto com uma parte apagada, e uma parte nova, inserida:

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

kbdver <code>

keygenDefiniçã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:


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 rsadsaec

Especifica o algoritmo de segurança da chave.

name name Define um nome para o elemento <keygen>


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>

labelDefiniçã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:


for element_id Especifica o elemento form que o label será vinculado

form form_id Especifica um ou mais form que o label pertence


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)

mapDefiniçã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.


Diferença entre HTML e XHTML:Em XHTML, o atributo name é obsoleto, e será removido. Use o atributo id vez.

Atributos:


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>

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


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

meterDefiniçã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, etcNota: 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:


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


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>

navDefiniçã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.


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

objectDefiniçã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:


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


Exemplo:Como usar o elemento <object> para incorporar um arquivo Flash:

<object width="400" height="400" data="helloworld.swf"></object>

olDefiniçã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:


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 1AaIi

Especifica o tipo de marcador a ser usado na lista


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

outputDefiniçã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:


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


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>

pDefiniçã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).


Exemplo:Um parágrafo é marcada como segue:

<p>This is some text in a paragraph.</p>

preDefiniçã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 elementis displayed in a fixed-widthfont, and it preserves

53

both spaces andline breaks</pre>

progressDefiniçã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:


max number Especifica quanto trabalho a tarefa requer, no total

value number Especifica o quanto da tarefa foi concluída


Exemplo:O download em progresso:

<progress value="22" max="100"></progress>

qDefiniçã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:


cite URL Especifica a URL fonte da citação


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>

rubyDefiniçã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.


54


Exemplo:Uma anotação ruby:

<ruby>漢 <rt> ㄏㄢ̀ </rt></ruby>

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


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>

selectDefiniçã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.


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


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>

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


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>

spanDefiniçã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.


Exemplo:Um elemento <span> usado para colorir uma parte de um texto:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

strongver <code>

• style (Se o atributo scoped for utilizado)

subDefiniçã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].


uTexto 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

tableDefiniçã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:


border 1""

Especifica se as células da tabela deve ter bordas ou não


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>

textareaDefiniçã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:


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 detexto pertence

maxlength number Especifica o número máximo de caracterespermitidos 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 hardsoft

Especifica como o texto em uma área de texto deve ser ajustada quando submetida aum form


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>

timeDefiniçã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:


datetime datetime Dá a data /hora sendo especificado. Caso contrário, a data /hora é dada pelo conteúdo do elemento


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>

ulDefiniçã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>.


Exemplo:Uma lista não ordenada HTML:

<ul>

58

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

varver <code>

videoDefiniçã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é queo usuário pressiona o botão play

preload autometadatanone

Especifica se e como o autor pensa que o vídeo deve ser carregado quando a página é carregada

src URL Especifica a URL do arquivo de vídeo

width pixels Define a largura do player de vídeo


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

wbrDefiniçã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.


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 contentBasicamente 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 contentOs 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 contentFazem 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 contentNa categoria Embedded, há elementos que importam outra fonte de informação para o documento.

• audio • canvas • embed • iframe • img • math • object • svg • video

Interactive contentInteractive 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 janelaEventos acionado para o objeto janela (aplica-se ao <body>):


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áriosEventos 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):


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 menude 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


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 MouseEventos desencadeados pelo mouse, ou ações do usuário semelhantes


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 domouse 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ídiaEventos 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>):


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çãoda 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 atributode busca é definido como falso indicando que a busca acabou

onseeking script Script para ser executado quando o atributode 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çãode reprodução mudou (como quando o usuário avança rapidamente para um pontodiferente 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áriosUma 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.patternO 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 formnovalidatePodem 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>  <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.MultimediaMultimídia na web é música, som, vídeos e animações.Navegadores modernos têm suporte para vários formatos multimídia.

Suporte de navegadoresO 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 objectO 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-insOs 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.AudioSons podem ser executados de varias formas diferentes.

Problemas e SoluçõesA 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 HTML5A 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 HTMLO 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 siteO 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 HiperlinkSe 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 embutidosQuando 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.VideoVideos podem ser reproduzido em HTML de diferentes maneiras.

Problemas e soluçõesMostrar 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>

ProblemasVocê deve converter seus vídeos para diferentes formatosO elemento <video> não funciona em navegadores mais antigos

A melhor solução HTMLO 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 YouTubeA maneira mais fácil de exibir vídeos em HTML é usar YouTube.

Reproduzindo um video YouTube em HTMLSe 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

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

Usando um hiperlinkSe 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 embutidosQuando 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 afetaro 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 validadesessionStorage - armazena dados para uma sessãoAntes 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 localStorageO 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 sessionStorageO 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 HTMLCom 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 offline2. Velocidade - recursos em cache carregar mais rápido3. Carga do servidor reduzido - o navegador só irá baixar recursos atualizados /alterados do servidor

Exemplo de manifesto de cacheO 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ásicoPara 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 manifestoO 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 vezNETWORK - Os arquivos relacionados sob esse cabeçalho requerem uma conexão com o servidor, e nunca vão ser armazenada em cacheFALLBACK - Arquivos listados sob esse cabeçalho especificam páginas fallback se uma página é inacessível.

CACHE MANIFESTA 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.

NETWORKA 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:*

FALLBACKA 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 cacheUma 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 navegador2. 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 oarquivo 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 WebAntes 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 WorkerAgora, 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 webAgora 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 webQuando 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


<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 DropArrastar 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.dragstartO 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>  <div id=”boxA” ondrop=”return dragDrop(event)” ondragover=”return dragOver(event)”>  <div id=”drag” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div>  <div id=”drag2” draggable=”true” ondragstart=”return dragStart(event)”>drag me</div></div>

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

</body> </html>

10.GeolocalizaçãoLocalizar a posição do usuárioO 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çãoUsar 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 é suportada2. Se suportado, execute o getCurrentPosition () método. Se não, exibir uma mensagem para o utilizador3. 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 longitude5. O exemplo acima é um script Geolocation muito básico, sem manipulação de erro.

Tratamento de erros e rejeiçõesO 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 GeolocationPosition unavailable - Não é possível obter a localização atualTimeout - A operação expirou

Exibindo o resultado em um mapaPara 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 especificasEsta 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 locais2. Mostrando Pontos de interesse perto do usuário3. 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 decimalcoords.longitude - A longitude como um número decimalcoords.accuracy - A precisão da posiçãocoords.altitude - A altitude em metros acima do nível médio do marcoords.altitudeAccuracy - A precisão da posição de altitudecoords.heading - A posição em graus no sentido horário a partir do Nortecoords.speed - A velocidade em metros por segundotimestamp - A data /hora da resposta

Objeto Geolocation - Outros Métodos interessanteswatchPosition () - 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-SentEventos Server-Sent HTML5 possibilitam que uma página web para obter atualizações de um servidor.

Eventos Server-Sent - Um Caminho de mensagensUm 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-SentO 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-SendNo 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 EventSourceNos 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 é abertaonmessage - Quando uma mensagem é recebidaonerror - Quando ocorre um erro

12.Revisão ortográfica e gramaticalOs 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 deviceVocê 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 eleescolha 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.StreamsVocê 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

Documents

Livro HTML 5 um mero resumo