HML5

Um mero resumo

Jonas Mayer

verso 1.0

Sumrio
1.Introduo.............................................................................................................................................................7 1.1.O que HTML? ...........................................................................................................................................7 2.Estrutura bsica....................................................................................................................................................7 2.1.O Doctype ....................................................................................................................................................7 2.2.O elemento HTML.......................................................................................................................................7 2.3.O HEAD.......................................................................................................................................................7 2.3.1.O elemento title.....................................................................................................................................8 2.3.2.O elemento base....................................................................................................................................8 2.3.3.O elemento link.....................................................................................................................................8 2.3.4.O elemento style....................................................................................................................................8 2.3.5.O elemento meta...................................................................................................................................8 2.3.5.1.Metatag Charset.............................................................................................................................9 2.3.6.O elemento script..................................................................................................................................9 2.4.Formatao...................................................................................................................................................9 2.5.Tag LINK......................................................................................................................................................9 2.6.Pargrafos.....................................................................................................................................................9 2.7.Cabealho...................................................................................................................................................10 2.8.Links...........................................................................................................................................................10 2.9.ncoras.......................................................................................................................................................11 2.10.Imagens.....................................................................................................................................................11 2.11.Tabelas......................................................................................................................................................12 2.12.Listas.........................................................................................................................................................13 2.13. Blocos......................................................................................................................................................13 2.13.1.O elemento div..................................................................................................................................13 2.13.2.O elemento span................................................................................................................................14 2.14.Layouts.....................................................................................................................................................14 2.15.Formulrios...............................................................................................................................................15 2.15.1.A tag input.........................................................................................................................................15 2.15.2.A tag select........................................................................................................................................17 2.15.3.A tag datalist......................................................................................................................................18 2.15.4.A tag keygen......................................................................................................................................18 2.15.5.A tag output.......................................................................................................................................19 2.15.6.A tag textarea....................................................................................................................................19 2.15.7.A tag label.........................................................................................................................................19 2.15.8.A tag form.........................................................................................................................................20 2.15.9.Mtodos GET e POST......................................................................................................................20 2.16.O elemento iframe....................................................................................................................................21 2.17. Entidades..................................................................................................................................................21 2.18.Codificao da URL.................................................................................................................................22 2.19.O elemento canvas....................................................................................................................................22 2.20.SVG .........................................................................................................................................................23 2.21.O elemento Video.....................................................................................................................................24 2.22.O elemento Audio ....................................................................................................................................24 3. Modelos de contedo.........................................................................................................................................25 3.1.Categorias...................................................................................................................................................25 Metadata content...............................................................................................................................................26 base ..............................................................................................................................................................26 command .....................................................................................................................................................26 link ..............................................................................................................................................................27 meta .............................................................................................................................................................28 noscript ........................................................................................................................................................29 script ............................................................................................................................................................30 3

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

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

HTML

1.Introduo
1.1.O que HTML?
HTML uma abreviao de Hypertext Markup Language (Linguagem de Marcao de Hipertexto) Ela uma linguagem de marcao utilizada para produzir pginas Web. A partir da verso 5 do HTML ou seja, HTML 5 foram adicionadas ferramentas para optimizar a interao com CSS e JavaScript, tambm foram criadas novas tags e outras foram modificadas. As atualizaes desta verso tambm incluem: Novas APIs, entre elas uma para desenvolvimento de grficos bidimensionais Controle embutido de contedo multimdia Aprimoramento do uso off-line Melhoria na depurao de erros

2.Estrutura bsica
Um documento HTML composto de elementos que possuem uma tag, atributos, valores e possivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deve obrigatoriamente possuir uma tag e ela deve estar entre parnteses 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 cdigo do documento antes da tag HTML. No HTML5 a declarao DOCTYPE foi simplificada: <!DOCTYPE html!> O Doctype indica para o navegador e para outros meios qual a especificao de cdigo utilizar. Em verses anteriores, era necessrio referenciar o DTD diretamente no cdigo do Doctype. Com o HTML5, a referncia por qual DTD utilizar responsabilidade do Browser. O Doctype no uma tag do HTML, mas uma instruo para que o browser tenha informaes sobre qual verso do cdigo a marcao foi escrita.

2.2.O elemento HTML

O cdigo HTML uma estrutura em rvore. O elemento principal ou n raiz sempre a tag HTML. <html> O atributo LANG necessrio para que os user-agents saibam qual a linguagem principal do documento. O atributo LANG no 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 so informaes sobre a pgina e o contedo ali publicado. O elemento pode incluir scripts, instruir o navegador a onde encontrar a folha de estilo, fornecer meta informaes e muito mais. As seguintes tags podem ser adicionadas a seo head: <title>, <style>, <meta>, <link>, <script>, <noscript>, e <base>.

2.3.1.O elemento title

A tag <title> define o ttulo do documento. O elemento <title> necessria em todos os documentos HTML /XHTML. O elemento <title>: define um ttulo na barra de ferramentas do navegador fornece um ttulo para a pgina que adicionado aos favoritos exibe um ttulo para a pgina no motor de pesquisa resultados Um documento HTML simplificado: <!DOCTYPE html> <html> <head> <title>Ttulo do documento</title> </head> <body> O contedo do documento...... </body> </html>

2.3.2.O elemento base

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

2.3.3.O elemento link

A tag <link> define a relao entre um documento e um recurso externo. A tag <link> mais utilizado para vincular a folhas de estilo: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

2.3.4.O elemento style

A tag <style> usada para definir informaes de estilo para um documento HTML. Dentro do elemento <style> que especificado como elementos HTML devem ser processados em um navegador: <head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>

2.3.5.O elemento meta

O <meta> fornece metadados sobre o documento HTML. Metadados no ser exibido na pgina, mas ser analisdo pela mquina. Elementos meta so normalmente usados para especificar descrio da pgina, 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 servios da web.

2.3.5.1.Metatag Charset
Responsvel por informar o encoding do documento. <meta charset=utf-8>

2.3.6.O elemento script

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

2.4.Formatao
HTML utiliza tags como <b> e <i> para a sada de formatao, como negrito ou itlico. Tags de formatao de texto <b> - Define o texto em negrito <em> - Define texto enfatizado <i> - Define texto itlico <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 excludo

2.5.Tag LINK
H dois tipos de links no HTML: a tag A, que so links que levam o usurio para outros documentos e a tag LINK, que so links para fontes externas que sero usadas no documento. No nosso exemplo h uma tag LINK que importa o CSS para nossa pgina: <link rel=stylesheet type=text/css href=estilo.css> O atributo rel=stylesheet indica que aquele link relativo a importao 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 contedo 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 referncia a uma coleo de material histrico da pgina. Por exemplo, a pgina de histrico de um blog pode ser referenciada nesta tag.

2.6.Pargrafos
Os pargrafos dentro de um documento HTML, em geral, so representados atravs da tag p. Uma das caractersticas da tag p que ela ocupa horizontalmente todo o espao 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 necessrias. Caso seja necessrio forar 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 pargrafo </title > </head > <body > <p>Um texto bem longo . Longo mesmo ! Este pargrafo serve para demonstrar o comportamento da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra .</p> <p>J este pargrafo demonstra a qubra de linha forada .<br/>Percebeu ?</p> </body > </html >

2.7.Cabealho
Uma pgina HTML pode conter uma hierarquia de ttulos para estabelecer uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tags de cabealho h1, h2, h3, h4, h5 e h6. Os sufixos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do documento. Veja o exemplo: <html> <head> <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8"> <title>Exemplo de cabealhos </title > </head> <body> <h1>Ttulo 1</h1> <h2>Ttulo 2</h2> <h3>Ttulo 3</h3> <h4>Ttulo 4</h4> <h5>Ttulo 5</h5> <h6>Ttulo 6</h6> </body> </html> Cada nvel possui um tamanho diferente de fonte. Esse tamanho determinado pelo navegador e pode ser alterado atravs de regras CSS. Devemos utilizar os cabealhos com cautela, pois eles so utilizados como parmetros de ranqueamento da pgina por diversos buscadores como Google, Yahoo e Bing, por exemplo. O uso correto das tags de cabealho faz parte das tcnicas de SEO (Search Engine Optimization) que, como o prprio nome j indica, so tcnicas que ajudam a melhorar o ranqueamento de pginas dentro dos buscadores. De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags de cabealhos: Utilizar apenas uma tag h1 por pgina Utilizar no mximo duas tags h2 por pgina

2.8.Links
Para criarmos um link devemos utilizar a tag a. Porm, a tag a sem atributos no ir criar nenhum link interno ou externo. Para que um link seja criado devemos, no mnimo, utilizar o atributo href com o caminho relativo ou absoluto de uma outra pgina. O elemento pode conter mais do que apenas texto, ele pode conter outros elementos como imagens. Veja o exemplo: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Exemplo de uso da tag a</title> </head> <body> <p><a href ="pagina2.html">Exemplo de link relativo</a></p> <p><a href ="outros/pagina3.html">Outro exemplo de link relativo</a></p> <p><a href =" http://www.k19.com.br">Exemplo de link absoluto</a></p> </body> </html> Alm do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o documento. Os possveis valores para o atributo target so: _blank - em uma nova janela ou aba _self - na mesma janela ou frame do documento que contmo link _parent - em um frame que seja o "pai"do frame no qual o link se encontra _top - na mesma janela do documento que contm o link Nota: _self e _top possuem o mesmo comportamento se a pgina que contm o link no 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 prprio frame. Dentro de uma nica pgina 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 padro de um link abrir o documento na mesma pgina ou frame caso o atributo target no seja utilizado.

10

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

2.9.ncoras
Alm de criar links para outras pginas o HTML nos permite criar links para uma determinada seo dentro da prpria pgina na qual o link se encontra ou dentro de outra pgina. Esse recurso chama-se ancoragem, pois as sees para as quais queremos criar um link devem possuir uma ncora. Para criarmos umancora devemos utilizar novamente a tag a, porm sem o atributo href. Dessa vez utilizaremos o atributo name para identificar a seo atravs de um nome. O link tambm muda levemente, pois agora ao invs de passar somente o nome do arquivo da pgina como valor do atributo href devemos passar o nome da seo 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 informaes </a></p> <p><a href =" pagina2 . html # outra_ancora ">ncora em outra pgina </a></p> ... <a name =" mais_info ">Mais informaes </a> <p> ... </p> </body > </html > Nota: At a verso 4 do HTML e no XHTML a especificao dizia para utilizarmos o atributo name para criarmos as ncoras. Porm, no HTML5, a recomendao do W3C que se utilize o atributo id.

2.10.Imagens
Em HTML, imagens so definidas com a tag img. A teg img vazia, isso significa que ela possui apenas atributos eno tem tag de fechamento. Para exibir uma imagem em uma pgina, 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 no possa ser exibida. Para especificar o tamanho da imagem so usados os atributos width e height. <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> Dica: uma boa prtica especificar o tamanho da imagem. Se os atributos de tamanho so definidos o espao nescessrio para a imagem reservado quando a pgina carregada. Sem esses atributos o navegador no sabe o tamanho da imagem, desse modo o layout da pgina vai mudar durante o carregamento.

2.11.Tabelas
Tabelas so definidas pela tag <table>.

11

Uma tabela dividida em linhas(com a tag <tr>) , e cada linha dividisa em clulas com dados(com a tag<td>). A tag td pode conter texto, links, imagens, listas, formulrios tabelas e outros. <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Bordas Para exibir uma tabela com bordas, especifique o atributo border: Se voc no 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. Cabealhos Informaes de cabealho em uma tabela so 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 clula de cabealho td - define uma clula Tambm possvel utilizar essas tags: thead - define o cabealho da tabela tfoot - define o rodap da tabela tbody - define o corpo da tabela Por que complicar? Qual o motivo da existncia dessas tags? A tag thead, assim como a tfoot, servem para agrupar as linhas de cabealho e de rodap, respectivamente. O cdigo fica mais claro. Facilita a aplicao de estilos CSS (atravs do seletor de elemento) Pode permitir que o contedo do corpo da tabela possua rolagem*. Ao imprimir a pgina com uma tabela muito extensa, pode permitir que o cabealho e rodap sejam replicados em todas as pginas. Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que podem ser aplicados nos elementos com a tag td e th : O atributo colspan faz com que a clula ignore o nmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porm com linhas.

2.12.Listas
Em um documento HTML podemos ter trs tipos de listas e cada uma delas deve ser utilizada de acordo com a sua semntica, ou seja, voc deve escolher um tipo de lista para cada situao.

12

Os trs tipos possveis de listas so: Lista de definio - utilizada para exibir definies de termos. Funciona como nos dicionrios, no qual temos uma palavra e em seguida o seu significado. Para criar uma lista de definio 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 definio 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 contedo 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 contedo sem ordenao. Para criar uma lista sem ordem utiliza-se a tag ul. O elemento com a tag ul deve possuir pelo menos umfilho com a tag li. <ul> <li>Coffee</li> <li>Milk</li> </ul>

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

2.13.1.O elemento div

O elemento <div> HTML um elemento de bloco de nvel que pode ser utilizado como um recipiente para o agrupamento de outros elementos HTML. O elemento <div> no tem nenhum significado especial. S que, porque um elemento nvel 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 contedo. Outro uso comum do elemento <div>, para o layout do documento. Ele substitui a "velha forma" da definio de layout usando tables. O uso de tabelas no o uso correto do elemento <table>. O propsito do elemento <table> exibir dados tabulares.

2.13.2.O elemento span

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

2.14.Layouts
Layout de pgina web muito importante para fazer o seu site com bom aspecto. Layouts de site A maioria dos sites tm colocado o seu contedo em vrias colunas (formatado como uma revista ou jornal). Vrias colunas so criadas usando os elementos <div> ou <table> . CSS usados para posicionar elementos, ou para criar fundos ou visual colorido para as pginas.Mesmo que seja possvel a criao de layouts agradveis com tabelas HTML, as tabelas foram projetados para apresentar dados tabulares - no como uma ferramenta de layout! Layouts de HTML - Usando Elementos <div> O elemento div um elemento nvel de bloco usado para agrupar elementos HTML. O exemplo a seguir utiliza cinco elementos div para criar uma disposio de vrias colunas:

13

<!DOCTYPE html> <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright W3Schools.com</div> </div> </body> </html> Dicas teis Dica: A maior vantagem de usar o CSS que, se voc colocar o cdigo CSS em uma folha de estilo externa, seu site se torna muito mais fcil de manter. Voc pode alterar o layout de todas as suas pginas, editando um arquivo. Para saber mais sobre CSS, estude o nosso tutorial CSS. Dica: Como layouts avanados levam tempo para serem criados, uma opo mais rpida usar um template. Pesquise do Google por website templates grtis (estes so layouts pr-construdos de site que voc pode usar e personalizar).

2.15.Formulrios
Formulrios HTML so usados para selecionar diferentes tipos de entrada de dados do usurio. Formulrios HTML so usados para transmitir dados para um servidor. Um formulrio HTML pode conter elementos de entrada. A tag <form> usada para criar um formulrio HTML: <form> . input elements . </form>

2.15.1.A tag input

O elemento <input> usado para selecionar as informaes do usurio. 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 boto. Atravs do atributo value definimos o texto do boto. <p> button : <input type =" button " value =" Boto " /> </p> checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name possvel 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, ms e dia (sem tempo)) Birthday: <input type="date" name="bday"> datetime - Define um controle de data e hora (ano, ms, dia, hora, minuto, segundo, e frao de segundo, com base no UTC fuso horrio) Birthday (date and time): <input type="datetime" name="bdaytime"> datetime-local - Define um controle de data e hora (ano, ms, dia, hora, minuto, segundo, e frao de segundo (sem fuso horrio) Birthday (date and time): <input type="datetime-local" name="bdaytime"> email - Define um campo para um endereo de e-mail E-mail: <input type="email" name="usremail"> file - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um arquivo no computador do usurio. <p> file : <input type =" file " /> </p> hidden - cria um elemento que no fica visvel para o usurio, porm pode conter um valor que ser enviado pelo formulrio. <p> hidden : <input type =" hidden " value =" valor escondido " /> </p> image - cria um boto para o envio do formulrio. Dese ser utilizado em conjunto com o atributo src para que uma imagem de fundo seja utilizada no boto.

<p> image : <input type =" image " src ="/img/logo.png " /> </p> month - Define um controle de ms e ano (sem fuso horrio) Birthday (month and year): <input type="month" name="bdaymonth"> number - Define um campo para digitar um nmero 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 possvel que se crie um grupo de radios no qual apenas um radio seja "checado".

<form> <input type="radio" name="sex" value="male">Male<br> <input type="radio" name="sex" value="female">Female </form> range - Define um controle para a entrada de um nmero cujo valor exato no importante (como um controle deslizante)

15

<input type="range" name="points" min="1" max="10"> reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio. Atravs do atributo value definimos o texto do boto.

<p> reset : <input type =" reset " value =" Descartar alteraes " /> </p> search - Define um campo texto para inserir uma string de pesquisa Search Google: <input type="search" name="googlesearch"> submit - cria um boto para o envio do formulrio. Atravs do atributo value definimos o texto do boto. <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 nmero 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 horrio) 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 horrio) Select a week: <input type="week" name="week_year"> Nota: Alguns valores do atributo input foram adicionados no HTML5 e nem todos os navegadores o suportam.

2.15.2.A tag select

A tag select permite ao usurio 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 atravs de elementos com a tag option. Tais elementos devem ser filhos diretos ou indiretos do elemento com a tag select. Alm disso, cada item pode conter o atributo value para informar o valor associado a uma determinada opo. <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 ">So 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 opes 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 =" Regio Sudeste "> <option value ="sao - paulo ">So Paulo </option > <option value ="rio -de - janeiro ">Rio de Janeiro </option > </optgroup > <optgroup label =" Regio 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 =" Portteis "> <option value =" notebooks ">Notebooks </option > <option value =" tablets ">Tablets </option > <option value =" celulares ">Celulares </option > </optgroup > </select > </p> </form > </body > </html >

2.15.3.A tag datalist

O elemento <datalist> especifica uma lista de opes pr-definidas para um elemento <input>. O elemento <datalist> usado para fornecer um recurso "autocompletar" em elementos <input>. Os usurios vero uma lista suspensa de opes pr-definidas como entrada de dados.

17

Use o atributo do elemento <input> da lista para vincul-lo em conjunto com um elemento <datalist>. <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

2.15.4.A tag keygen

A finalidade do elemento <keygen> o de proporcionar uma forma segura de autenticar os utilizadores. A tag <keygen> especifica um campo gerador de par de chaves em um formulrio. Quando o formulrio enviado, duas chaves so gerados, uma pblico e uma privada . A chave privada armazenada localmente, e a chave pblica enviada para o servidor. A chave pblica pode ser usada para gerar um certificado de cliente para autenticar o utilizador no futuro. <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

2.15.5.A tag output

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

2.15.6.A tag textarea

A tag textarea exibe uma caixa de texto na qual o usurio poder inserir um texto qualquer. A diferena para a tag input com o atributo type com o valor text que a tag textarea permite a insero de textos mais longos e com quebras de linha. <html > <head > <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8"> <title >Exemplo de uso da tag textarea </title > </head > <body > <form action =" pagina . html " method =" get "> <p> textarea : <textarea > </textarea > </p> </form > </body > </html >

2.15.7.A tag label

Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulrio apresentados. Podemos pensar nesses textos como rtulos de cada elemento e exatamente para esse fim que devemos utilizar a tag label do HTML. Alm de servir como rtulo, a tag label auxilia o usurio a interagir comos elementos do formulrio. Utilizando o atributo for

18

podemos fazer com que um elemento do formulrio receba o foco. Veja o exemplo: <html > <head > <meta http - equiv =" Content - Type " content =" text /html ; charset =UTF -8"> <title >Exemplo de uso da tag label </title > </head > <body > <form action =" pagina . html " method =" get "> <p> <label for =" nome ">Nome :</label > <input type =" text " id=" nome " /> </p> </form > </body > </html > Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que desejamos focar.

2.15.8.A tag form

A tag form ir definir, de fato, o nosso formulrio. Todos os elementos de formulrio 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 formulrio deve ser enviado. Alm disso, devemos informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que eles sejam enviados atravs de uma requisio do tipo GET ou POST (mtodos de envio definidos no protocolo HTTP).

2.15.9.Mtodos GET e POST

O Hypertext Transfer Protocol (HTTP) foi projetado para realizar comunicao entre o cliente e o servidor. HTTP funciona como um protocolo de solicitao-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 mtodos GET e POST Os dois mtodos usados para solicitao-resposta entre o cliente e o servidor so: GET e POST GET - Requisita dados de um recurso especificado POST - Envia dados para serem processados para um recurso especificado O mtodo 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 requisies GET: requisies GET podem ser armazenadas em cache requisies GET permandecem no histrico de navegao requisies GET podem ser favoritadas requisies GET nunca devem ser usadas para lidar com dados sensveis requisies GET podem ter restries de comprimento requisies GET devem ser usados apenas para recuperar dados O mtodo POST Observe que a string de consulta enviado no corpo da mensagem HTTP de um pedido POST. POST /test/demo_form.asp HTTP/1.1 Host: w3schools.com name1=value1&name2=value2

Algumas notas sobre o requisies POST: requisies POST ninca so armazenadas em cache requisies POST no podem ser favoritadas requisies POSTno tem restries quanto ao comprimento dos dados

19

Comparao GET vs. POST GET boto voltar/recarregar inofensivo POST Os dados sero re-submetidos (o browser deve alertar o usurio de que os dados esto prestes a ser re-submetidos) NO NO aplicao/x-www-form-urlcodificado ou multipart/form-data . Use a codificao multipart para dados binarios. Os parmetros no so salvos no histrico do navegador

Favoritar Armazenar em cache Tipos de codificao

SIM SIM aplicao/x-www-form-urlcodificado

Histrico Restrio de tamanho de dados

Parmetros permanecem no histrico do navegador

Sim, ao enviar dados, o mtodo GET Sem restrio adiciona os dados URL, e o comprimento de um URL limitado (comprimento mximo de URL de 2048 caracteres) Somente caracteres ASCII GET menos seguro em relao ao post, porque os dados enviados so parte da URL Nunca use GET quando enviar senhas ou outras informaes confidenciais! Sem restries. Os dados binrios tambm so permitido O POST um pouco mais seguro do que GET, porque os parmetros no so armazenadas no histrico do navegador ou em logs de servidores web

Restrio de tipos de dados Segurana

Visibilidade

Dados ficam visveis para todos na URL

Os dados no so exibidos na URL

Outros mtodos HTML A tabela a seguir lista alguns outros mtodos de solicitao HTTP: HEAD - Mesmo que GET, mas retorna apenas cabealhos HTTP e nenhum corpo do documento PUT - Envia uma representao da URI especificada DELETE - Exclui o recurso especificado OPTIONS - Retorna os mtodos HTTP que o servidor suporta CONNECT - Converte uma solicitao de conexo em uma traspatente TCP/IP tunnel.

2.16.O elemento iframe

Um iframe usado para exibir uma pgina web dentro de uma pgina web. Sintaxe para adicionar um iframe: <iframe src="URL"></iframe> O URL aponta para a localizao da pgina separada. Os atributos de altura e largura so usadas para especificar a altura ea largura do iframe. Os valores de atributo so especificadas em pixels por padro, mas podem tambm ser em percentagem (como "80%"). <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Removendo a borda O atributo frameborder especifica se deve ou no exibir uma borda em torno do iframe. Definir o valor do atributo como "0" remove a borda: <iframe src="demo_iframe.htm" frameborder="0"></iframe> Usar iframe como destino para um link O atributo de destino de um link deve se referir ao atributo nome do iframe: <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

20

2.17. Entidades
Caracteres reservados em HTML deve ser substitudo por entidades de caracteres. Alguns caracteres so reservados em HTML. No possvel 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 cdigo-fonte HTML. Uma entidade de carter parece com isto: &entity_name; OR &#entity_number; Para exibir um sinal de menor que devemos escrever: &lt; ou &#60; Espao sem quebra Uma entidade de carter comum utilizada em HTML o espao sem quebra (). Navegadores sempre truncam espaos em pginas HTML. Se voc escrever 10 espaos no seu texto, o navegador ir remover 9 deles, antes de exibir a pgina. Para adicionar espaos ao seu texto, voc pode usar a entidade carter &nbsp;.

2.18.Codificao da URL
Uma URL pode ser composta por palavras ou um endereo IP (Internet Protocol). Navegadores acessam pginas Web de servidores web usando uma URL. Um endereo 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 padro para http o www). domain - define o nome do dominio :port - define o nmero da porta no host (o padro para http 80) path - define um caminho no servidor (se omitido, o documento estar armazenado no diretrio raiz ) filename - define o nome de um documento /recurso Protocolos comuns Protocolo http https ftp

Abreviao de... HyperText Transfer Protocol Secure HyperText Transfer Protocol File Transfer Protocol Pginas web comuns comeam com http://. No criptografado Pginas Web protegidas. Todas as informaes trocadas so criptografadas. Para fazer o download ou upload de arquivos para um site. til para a manuteno de domnio Um arquivo em seu computador

file

Codificao de URL URLs s pode ser enviada pela Internet, utilizando o conjunto de caracteres ASCII. Uma vez que muitas vezes URLs conter caracteres fora do conjunto ASCII, a URL tem que ser convertida para um formato ASCII vlido. Codificao de URL converte caracteres em um formato que pode ser transmitido atravs da Internet. Codificao de URL no substitui caracteres ASCII com um "%" seguido de dois dgitos hexadecimais.

2.19.O elemento canvas

O elemento canvas um novo elemento introduzido no HTML 5. O elemento <canvas> usado para desenhar grficos, em tempo real, em uma pgina web. O elemento <canvas> HTML5 usado para desenhar grficos, em tempo real, atravs de scripting (normalmente JavaScript). O elemento <canvas> apenas um recipiente para grficos. Voc deve usar um script para realmente desenhar os grficos. Criando um canvas

21

A tela uma rea retangular em uma pgina HTML, e especificado com o elemento <canvas>. Nota: Por padro, o elemento <canvas> no tem fronteira e nenhum contedo. A marcao assim: <canvas id="myCanvas" width="200" height="100"></canvas> Nota: Sempre especifique um atributo id (para ser referenciado pelo script) e os atributos height e width para definir o tamanho. Para adicionar bordas, use o atributo style: <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> Desenhar sobre a tela com JavaScript Todo o desenho sobre a tela deve ser feito dentro de um JavaScript: Exemplo: <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); </script>

2.20.SVG
HTML 5 tem suporte para SVG embutido. O que SVG? SVG significa Scalable Vector Graphics SVG usado para definir grficos vetoriais para a web SVG define os grficos em formato XML Grficos SVG no perder nenhuma qualidade se forem ampliada ou redimensionada Cada elemento e cada atributo em arquivos SVG pode ser animado SVG uma recomendao da W3C Vantagens do SVG Vantagens da utilizao de SVG sobre outros formatos de imagem (como JPEG e GIF) so: Imagens SVG podem ser criados e editados com qualquer editor de texto Imagens SVG podem ser pesquisados, indexados, roteirizados e comprimidos Imagens SVG so escalveis Imagens SVG podem ser impressas com alta qualidade em qualquer resoluo Imagens SVG so zoomable (a imagem pode ser ampliada sem degradao)

Incorporar SVG diretamente em pginas HTML Em HTML 5 voc pode incorporar SVG diretamente na pgina HTML atravs do elemento SVG. Exemplo: <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> </body> </html> Diferenas entre SVG e Canvas SVG uma linguagem para descrever grficos 2D em XML. Canvas desenha grficos 2D, em tempo real (com JavaScript). SVG baseado em XML, o que significa que cada elemento est disponvel 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 so alteradas, o navegador pode automaticamente renderizar novamente a forma. Canvas renderizada pixel por pixel. Na tela, uma vez que o grfico desenhado, esquecido pelo navegador. Se a sua posio deve ser mudado, todo o cenrio precisa ser redesenhado, incluindo quaisquer objetos que possam ter sido cobertos pelo grfica.

2.21.O elemento Video

Muitos sites modernos mostram vdeos. HTML5 fornece um padro para mostrar-los. Video na Web At agora, no houve um padro para mostrar um vdeo /filme em uma pgina web. Hoje, a maioria dos vdeos so mostrados atravs 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 padro de inserir um vdeo /filme em uma pgina web: o elemento <video>. Como funciona Para mostrar um vdeo 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 vdeo, como play, pause e volume. Tambm uma boa idia sempre incluem largura e atributos de altura. Se a altura e largura so definidos, o espao necessrio para o vdeo reservado quando a pgina carregada. No entanto, sem esses atributos, o navegador no sabe o tamanho do vdeo, e no pode reservar o espao apropriado para isso. O efeito ser que o layout da pgina vai mudar durante o carregamento (enquanto o vdeo carregado). Voc tambm deve inserir o contedo de texto entre a tag <video> e </vdeo> para navegadores que no suportam o elemento <video>. O elemento <video> permite multiplos elementos <source>. elementos <source> podem se vincular a arquivos de vdeo diferentes. O browser usar o formato reconhecido inicialmente. Tipos MIME para formatos de video Formato MP4 WebM Ogg

tipo MIME video/mp4 video/webm video/ogg

Mtodos e propriedades DOM HTML5 tem mtodos DOM, propriedades e eventos para os elementos <video> e <audio>. Estes mtodos, propriedades e eventos permitem que voc manipule elementos <video> e <audio> usando JavaScript. Existem mtodos para reproduzir, pausa, e carregar, por exemplo, e existem propriedades (como durao e volume). H tambm eventos DOM que pode notific-lo quando o elemento <video> comea a executar, pausar , terminar, etc

2.22.O elemento Audio

At agora, no houve um padro para a reproduo de arquivos de udio em uma pgina web. Hoje, a maioria dos arquivos de udio so reproduzidos atravs 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 padro para incorporar um arquivo de udio em uma pgina web: o elemento <audio>. Como funciona Para usar o elemento audio de HTML5 use: <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element.

23

</audio> O atributo de controle adiciona controles de udio, como play, pause e volume. Voc tambm deve inserir um de texto entre a tag <audio> e </audio> para navegadores que no 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 MP3 Wav Ogg

tipo MIME audio/mp3 audio/wav audio/ogg

3. Modelos de contedo
H pequenas regras bsicas no HTML que definem o comportamento,a localizao e a hieraquia dos elementos. Dentre todas as categorias de modelos de contedo, 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 so como caixas, que dividem o contedo nas sees do layout. Algumas premissas dos elementos so: Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a no 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 pargrafo no pode conter um DIV. Mas o contrrio possvel. Estes dois grandes grupos podem ser divididos em categorias. Estas categorias dizem qual modelo de contedo o elemento trabalha e como pode ser seu comportamento.

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

24

Metadata content
Este contedo vem antes da apresentao, formando uma relao com o documento e seu contedo com outros documentos que distribuem informao por outros meios. Os elementos que compe a categoria Metadata so:

base
Definio e Uso: A tag <base> especifica a URL ou destino base para todas as URLs correspondentes em um documento. Pode haver no mximo 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 seco de head usem as informaes 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. Diferenas entre HTML e XHTML: Em HTML a tag <base> no tem tag final. Em XHTML a tag <base> deve ser devidamente fechado. Atributos: Atributo href target

Valor URL _blank _parent _self _top framename

Descrio Especifica a URL base para todas as URLs correspondentes na pgina. Especifica o destino padro para todos os hyperlinks e forms na pgina.

Atributos globais e Eventos: A tag <base> tambm suporta os atributos globais do HTML. Mas no suporta nenhum atributo de evento. Exemplo: Especifica uma URL padro e um destino padro para todos os links em uma pgina. <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
Definio e uso: A tag <command> define um comando (um radiobutton, um checkbox ou um boto de comando) que o usurio 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 pgina, para definir um atalho de teclado. Atributos: Atributo checked disabled

Valor checked disabled

Descrio Especifica que o comando deve ser verificada quando a pgina carregada. Apenas para type = "radio" ou type = "checkbox" Especifica que o comando deve ser desativado

25

icon label radiogroup type

URL text groupname checkbox command radio

Especifica uma imagem que representa o comando Obrigatrio. Especifica o nome do comando, que sera mostrado para o usurio Especifica o nome do grupo de comandos que vai ser alternados quando o prprio comando alternado. Apenas para type = "radio" Especifica o tipo de comando

Atributos Globais: A tag <command> tambm 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
Definio e uso: A tag <link> define a relao 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 contm atributos. Nota: Este elemento vai somente na seo head, mas pode aparecer varias vezes. Diferenas entre HTML e XHTML No HTML a tag <link> no tem tag final. No XHTML a tag <link> deve ser devidamente fechado. Atributos: Atributo href hreflang media rel

Valor URL language_code media_query alternate archives author bookmark external first help icon last license next nofollow noreferrer pingback prefetch prev search sidebar stylesheet tag up HeightxWidth

Descrio Especifica o local do documento linkado Especifica o idioma do texto no documento linkado Especidica em que dispositivo o documento linkado ser exibido Obrigatrio. Especifica a relao entre o documento atual e o documento linkado.

sizes

Especifica o tamanho do recurso linkado. Apenas para rel = "con"

26

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

Atributos globais e eventos A tag <link> suporta os atributos globais e tambm 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
Definio e uso: Metadados so dados (informaes) sobre os dados. O <meta> fornece metadados sobre o documento HTML. Metadados no ser exibido na pgina, mas sero analisveis pela mquina. Elementos meta so normalmente usados para especificar descrio da pgina, palavras-chave, autor do documento, modificada pela ltima vez, e outros metadados. Os metadados podem ser utilizados pelos navegadores (como exibir contedo ou pgina de recarga), motores de busca (palavraschave), ou outros servios 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 contedo deve ser definido se o nome ou o atributo http-equivalente est definido. Se nenhum desses forem definidos, o atributo de contedo no pode ser definido. Diferena entre HTML e XHTML No HTML a tag <meta> no tem tag final. No XHTML a tag <meta> precisa ser devidamente fechada. Atributos: Atributos charset content http-equiv

Valores character_set text content-type default-style refresh application-name author description generator keywords

Descrio Especifica o encoding para o documento HTML Indica o valor associado ao http-equivalente ou atributo nome Fornece um cabealho HTTP para a informao /valor do atributo content

name

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="Stle 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 descrio da pgina web: <meta name="description" content="Free Web tutorials on HTML and CSS"> Exemplo 3 - Definir o autor de uma pgina: <meta name="author" content="Hege Refsnes"> Exemplo 4 - Atualiza documento a cada 30 segundos: <meta http-equiv="refresh" content="30">

noscript
Definio e uso: A tag <noscript> usada para fornecer um contedo alternativo a usurios que tenham desativados scripts em seu navegador ou navegador que no suporta script do lado cliente. O elemento <noscript> pode conter todos os elementos que voc pode encontrar dentro do elemento <body> de uma pgina HTML normal. O contedo dentro do elemento <noscript> s ser exibido se os scripts no so suportados, ou esto desativados no navegador do usurio. Dicas e Notas: Dica: uma boa usar comentrios para esconder scripts de browsers sem suporte para scripts do lado client (para que eles no mostrlos como texto simples): <script> <!-function displayMsg() { alert("Hello World!") } //--> </script> Atributos Globais: A tag <noscript> suporta atributos globais. Exemplo: Uso da tag <noscript>: <script> document.write("Hello World!") </script> <noscript>Your browser does not support JavaScript!</noscript>

script
Definio e Uso: A marca <script> usado para definir um script do lado do cliente, como um JavaScript. O elemento <script> ou contm declaraes de scripts, ou ele aponta para um arquivo de script externo atravs do atributo src. Os usos comuns para JavaScript so de manipulao de imagem, validao de formulrio, e as mudanas dinmicas do contedo. Dicas e notas: Nota: Se o atributo "src" est presente, o elemento <script> deve estar vazio. Dica: Tambm olhar para o elemento <noscript> para usurios que desabilitaram os scripts em seu browser, ou ter um navegador que no suporta scripting do lado cliente. Nota: Existem vrias maneiras de um script externo podem ser executadas: Se async = "async": O script executado de forma assncrona com o resto da pgina (o script ser executado enquanto a pgina continua a anlise) Se async no est presente e adiar = "adiar": O script executado quando a pgina terminou de anlise Se nem async ou adiar est presente: O script buscada e executada imediatamente, antes de o navegador continua analisando a pgina

28

Diferenas entre HTML e XHTML Em XHTML, o contedo dentro de scripts declarado como # PCDATA (em vez de CDATA), o que significa que as entidades sero analisadas. Isto significa que em XHTML, todos os caracteres especiais devem ser codificados, ou todo o contedo deve ser acondicionada dentro de uma seo CDATA: <script type="text/javascript"> //<![CDATA[ var i=10; if (i<5) { //some code } //]]> </script> Atributos: Atributo async charset defer src type

Valor async charset defer URL MIME-type

Descrio Especifica que o script executado de forma assncrona (somente para scripts externos) Especifica o encoding usado em um arquivo de script externo Especifica que o script executado quando a pgina terminou a anlise (apenas para scripts externos) Especifica a URL de um arquivo de script externo Especifica o tipo MIME do script

Atributos Globais A tag <script> suporta os atributos globais Exemplo: Imprime "Hello world" em JavaScript <script> document.write("Hello World!") </script>

style
Descrio e uso: A tag <style> usado para definir informaes 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 vrios tags <style>. Dicas e notas: Dica: Para ligar a uma folha de estilo externa, use a tag <link>. Nota: Se o atributo "scoped" no usado, cada marca <style> deve ser localizado na seo de head. Atributos: Atributos Valores Descrio media scoped type media_query scoped text/css Especifica para qual midia/dispositivo o recurso de media otimizado. Especifica que o estilo apenas se aplicam aos elementos pais e seus elementos filhos. 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
Definio e uso: A tag <title> necessria em todos os documentos HTML e define o ttulo do documento. O elemento <title>: -define um ttulo na barra de ferramentas do navegador -fornece um ttulo para a pgina que adicionado aos favoritos -exibe um ttulo para a pgina no motor de pesquisa resultados Tipos e notas: Nota: Voc no pode ter mais de um elemento <title> em um documento HTML. Dica: Se voc omitir a tag <title>, o documento no ser valido como HTML. Atributos globais: A tag <title> suporta os atributos globais. Exemplo: Define um ttulo para seu documento HTML. <html> <head> <title>HTML Reference</title> </head> <body> The content of the document...... </body> </html>

Flow content
Por via de regra, elementos que seu modelo de contedo permitem inserir qualquer elemento que se encaixa no Flow Content, devem ter pelo menos um descendente de texto ou um elemento descendente que faa parte da categoria embedded. A maioria dos elementos utilizados no body e aplicaes so categorizados como Flow Content. So eles:

a
Definio e uso: A marca <a> define um hiperlink, que usado para ligar uma pgina a outra. O atributo mais importante do elemento <a> o atributo href, que indica o destino do link. Por padro, os links vo aparecer da seguinte forma em todos os navegadores: Um link no visitado sublinhado e azul Um link visitado sublinhado e roxo Um link ativo sublinhado e vermelho

30

Dicas e notas: Dica: Os atributos: hreflang, media, rel, target, e os atributos de tipo no podem estar presentes se o atributo href no est presente. Dica: Uma pgina linkada normalmente exibida na janela do navegador atual, a menos que voc especifique outro modo no atributo target. Dica: Use CSS para mudar o estilo de links. Atributos href hreflang media rel Valor URL language_code media_query alternate author bookmark help license next nofollow noreferrer prefetch prev search tag _blank _parent _self _top framename MIME_type Descrio Especifica a URL da pgina destino do link. Especifica o idioma do documento vinculado Especifica para qual media/dispositivo o documentento linkado otimizado Especifica a relao entre o documento atual e o documento linkado

target

Especifica onde abrir o documento vinculado

type

Especifica o tipo MIME do documento linkado

Atributos globais e eventos A tag <a> suporta os atributos globais e os atributos de evento. Exemplo: Um link para W3Schools.com: <a href="http://www.w3schools.com">Visit W3Schools.com!</a>

abbr
Definio e uso: A tag <abbr> indica uma abreviatura ou acrnimo, como "WWW" ou "NATO". Ao marcar as abreviaes que voc pode dar informaes teis para os navegadores, sistemas ortogrficos, traduo e motor de pesquisa indexadores. Dicas e notas: Dica: O atributo ttulo global pode ser usado na tag <abbr> para mostrar a verso completa da sigla abreviatura /quando voc passa o mouse sobre o elemento <abbr>. Atributos globais e eventos: A tag suporta os atributos globais e os e atributos de eventos. Exemplo: Uma abreviatura marcada como segue: The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

address
Definio e uso: A tag <address> define as informaes de contato do autor /proprietrio de um documento ou um artigo.

31

Se o elemento <address> dentro do elemento <body>, representa informaes de contato para o documento. Se o elemento <address> est dentro de um elemento <article>, representa informaes de contato para esse artigo. O texto no elemento <address> normalmente deixa em itlico. A maioria dos navegadores ir adicionar uma quebra de linha antes e depois do elemento de endereo. Dicas e notas: Dica: A tag <address> no deve ser usado para descrever um endereo postal, a menos que seja uma parte das informaes de contato. Dica: O elemento <address> normalmente ser includa juntamente com outras informaes em um elemento <footer>. Atributos globais e eventos: A tag suporta os atributos globais e os atributos de eventos. Exemplo: Informaes de contato para Example.com: <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>

area
*(se for um decendente de um elemento de mapa) Definio e uso: A tag <area> define uma rea dentro de uma imagem-mapa (uma imagem-mapa uma imagem com reas clicveis). 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 relao entre a imagem e o mapa. Diferenas entre HTML e XHTML: Em HTML a tag <area> no tem tag final. Em XHTML a tag <area> deve ser devidamente fechado. Atributos: Atributo alt coords href hreflang media rel

Valor text coordinates URL language_code media query alternate author bookmark help license next nofollow noreferrer prefetch prev search tag default rect

Descrio Especifica um texto alternativo para a rea. Necessrio se o atributo href est presente Especifica as coordenadas da rea Especifica o destino do hiperlink para a rea Especifica o idioma a URL de destino Especifica para que midia/dispositivo a URL destino est optimizada Especifica a relao entre o documento actual e o URL de destino

shape

Especifica o formato da rea

32

circle poly target _blank _parent _self _top framename MIME_type Especifica onde abrir o URL de destino

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 clicveis : <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>

article
Definio e uso: A tag <article> especifica independente, de contedo independente. Um artigo deve fazer sentido por si prprio e que deve ser possvel distribuir de forma independente a partir do resto do site. Fontes potenciais para o elemento <article>: -post Frum -blog -notcia -comentrio Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: <article> <h1>Internet Explorer 9</h1> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>

aside
Definio e uso: A tag <aside> define algum contedo, alm do contedo que colocado dentro O contedo reserva deve estar relacionada com o contedo circundante. Atributos globais e eventos: A tag suporta atributos globais e eventos. Dicas e regras: Dica: O contedo <aside> poderia ser colocado como uma barra lateral em um artigo. Exemplo:

33

<p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>

audio
Definio e uso: A tag <audio> define o som, como msica ou outros fluxos de udio. Atualmente, existem trs formatos de arquivos suportados para o elemento <audio>: MP3, WAV e OGG: Tipos MIME para formatos de udio Formato Tipo MIME MP3 Ogg Wav audio/mpeg audio/ogg audio/wav

Dicas e Notas: Dica: Qualquer texto dentro do entre <audio> e </audio> ser exibido em navegadores que no suportam a tag <audio>. Atributos: Atributo autoplay controls

Valor autoplay controls

Descrio Especifica que o udio vai comear a reproduzir assim que est pronto Especifica que os controles de udio deve ser exibido (como um boto etc play /pause). Especifica que o udio vai recomear, cada vez que ele for concludo Especifica que a sada de udio deve ser silenciado Especifica se e como o autor acha que o udio deve ser carregado quando a pgina carregada Especifica a URL do arquivo de udio

loop muted preload

loop muted auto metadata none URL

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

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

b
Definio e uso: A tag <b> especifica o texto em negrito. Dicas e notas: Nota: De acordo com a especificao do HTML 5, a marca <b> deve ser usado como ltimo recurso quando no h outra tag mais apropriada. O HTML 5 estados de especificao de que os ttulos 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 realado deve usar a tag <mark>. Dica: Voc tambm pode usar o CSS "font-weight" propriedade para definir o texto em negrito. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: <p>This is normal text - <b>and this is bold text</b>.</p>

bdo
Definio e uso: bdo significa Bi-Direcional Override. A tag <bdo> usado para substituir a direo do texto atual. Atributos: Atributo dir

Valor ltr - esquerda para a direita rtl - direita para a esquerda

Descrio Obrigatrio. Especifica a direo do texto do texto dentro do elemento <bdo>

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Especifica a direo do texto: <bdo dir="rtl"> This text will go right-to-left. </bdo>

blockquote
Definio e uso: A tag <blockquote> especifica uma seo que citado de outra fonte. Normalmente, os browsers botam pargrafo em elementos <blockquote>. Dicas e notas: Dica: Use para <q> citaes de linha (curtas). Diferenas entre HTML e XHTML: Nota: Para validar um elemento <blockquote> como XHTML, deve conter apenas outros elementos nvel de bloco, como este: <blockquote> <p> Aqui uma longa citao aqui uma longa citao. </p> </blockquote> Atributos: Atributo cite Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uma seo 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 worlds leading conservation organization, WWF works in 100

Valor URL

Descrio Especifica a fonte da citao

35

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

br
Definio e uso: A marca <br> insere uma quebra de linha nica. A marca <br> uma tag vazia, o que significa que no tem tag final. Dicas e notas: Dica: A marca <br> til para escrever endereos ou poemas. Nota: Use a tag <br> para inserir quebras de linha, no para separar os pargrafos. Diferenas entre HTML e XHTML: Em HTML, a tag <br> no tem tag final. Em XHTML, o tag <br> deve ser bem fechada, como esta: <br />. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uma quebra de linha marcada como segue: This text contains<br>a line break.

button
Definio e uso: A tag <button> define um boto clicvel. Dentro de um elemento <button> voc pode colocar contedo, como texto ou imagens. Esta a diferena entre este elemento e os botes criada com o elemento <input>. Dica: Sempre especificar o tipo de atributo para um elemento <button>. Navegadores diferentes usam diferentes tipos padres para o elemento <button>. Dicas e notas: Nota: Se voc usar o elemento <button> em um formulrio HTML, navegadores diferentes podem apresentar valores diferentes. Use <input> para criar botes em um formulrio HTML. Atributos: Atributo autofocus

Valor autofocus

Descrio Especifica que um boto deve receber automaticamente o foco quando a pgina carregada Especifica que um boto deve ser desativado Especifica um ou mais forms que o boto pertence Especifica para onde enviar o formulrio de dados quando um formulrio submetido. Apenas para type = "submit" Especifica como forma de dados devem ser codificados antes de envi-lo para um servidor. Apenas para type = "submit" Especifica como enviar o formulrio de dados (o mtodo HTTP para usar). Apenas para type = "submit" Especifica que o formulrio de dados no deve ser validado no envio. Apenas para

disabled form formaction

disabled form_id URL

formenctype

application/x-www-form-urlencoded multipart/form-data text/plain get post formnovalidate

formmethod

formnovalidate

36

type = "submit" formtarget _blank _self _parent _top framename name button reset submit text Especifica onde exibir a resposta depois de enviar o formulrio. Apenas para type = "submit"

name type

Especifica o nome do boto Especifica o tipodo boto

value Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um boto clicvel marcada como segue: <button type="button">Click Me!</button>

Especifica o valor inicial do boto

canvas
Definio e uso: A tag <canvas> usado para desenhar grficos, em tempo real, atravs de scripting (normalmente JavaScript). A tag <canvas> apenas um recipiente para grficos, voc deve usar um script para realmente desenhar os grficos. Dicas e Notas: Nota: Qualquer texto dentro do elemento <canvas> ser exibido em navegadores que no suportam <canvas>. Atributos: Atributo height width Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Desenhe um quadrado vermelho, na mosca, e mostr-lo dentro do elemento <canvas>: <canvas id="myCanvas"></canvas> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script>

Valor pixels pixels

Descrio Especifica a altura da tela Especifica a largura da tela

cite
Definio e uso: A tag <cite> define o ttulo de uma obra (por exemplo, um livro, uma msica, um filme, um programa de TV, uma pintura, uma escultura, etc.) Nota: O nome de uma pessoa no o ttulo de uma obra. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo:

37

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

code
Definio e uso: O <em>, <strong>, <dfn>, <code>, <samp>, <kbd> e tags <var> so todas as marcas de frase. Eles no so substitudo, mas possvel obter efeitos mais ricos com CSS. Tag <em> <strong> <dfn> <code> <samp> <kbd> <var> Descrio Torna o texto como enfatizado Define o texto importante Define um termo de definio Define um cdigo de computador Define exemplo de sada de um programa de computador Define a entrada de teclado Define uma varivel

Atributos globais e eventos: As tags suportam atributos globais e eventos. Exemplo: Formato de texto em um documento: <em>Emphasized text</em> <strong>Strong text</strong> <dfn>Definition term</dfn> <code>A piece of computer code</code> <samp>Sample output from a computer program</samp> <kbd>Keyboard input</kbd> <var>Variable</var> command

datalist
Definio e uso: A tag <datalist> especifica uma lista de opes pr-definidas para um elemento <input>. A tag <datalist> usado para fornecer um recurso "autocompletar" em elementos <input>. Os usurios vero uma lista suspensa de opes pr-definidas como entrada de dados. Use o atributo do elemento <input> da lista para vincul-lo em conjunto com um elemento <datalist>. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um elemento <input> com valores pr-definidos em um <datalist>: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

38

del
Definio e uso: A tag <del> define o texto que foi excludo de um documento.(riscado). Dicas e notas: Dica: Tambm olhar para a tag <ins> para marcao de texto inserido. Dica: Use e <del> <ins> a atualizaes e modificaes de marcao em um documento. Navegadores normalmente atacar uma linha atravs de texto excludo e sublinhar o texto inserido. Atributos: Atributo cite

Valor URL

Descrio Especifica uma URL para um documento que explica a razo pela qual o texto foi apagado Especifica a data e hora em que o texto foi excludo

datetime

YYYY-MM-DDThh:mm:ssTZD

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um texto com uma parte apagada, e uma parte nova, inserida: <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

details
Definio e uso: A tag <details> especifica detalhes adicionais que o usurio pode visualizar ou esconder sob demanda. A tag <details> pode ser usado para criar um widget interativo que o usurio pode abrir e fechar. Qualquer tipo de contedo pode ser colocado dentro da tag <details>. O contedo de um elemento <details> no deve ser visvel a menos que o atributo aberta definida. Dicas e notas: Dica: A tag <summary> usado para especificar um ttulo visvel para os detalhes. O ttulo pode ser clicado para visualizar /esconder os detalhes. Nota: este elemento somente compativel com o chrome Atributos: Atributo open

Valor open

Descrio Especifica que as informaes devem estar visveis (aberto) para o usurio

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

dfn
ver <code>

39

div
Definio e uso: A tag <div> define uma diviso ou uma seo 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 pgina web. Nota: Por padro, os navegadores sempre colocar uma quebra de linha antes e depois do elemento <div>. No entanto, isto pode ser alterado com CSS. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: A seo em um documento que ser exibido em azul: <div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>

dl
Definio e uso: A tag <dl> define uma lista de definies. A tag <dl> usado em conjunto com <dt> (define o item na lista) e <dd> (descreve o item na lista). Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: A definio da lista, com itens e descries: <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>

em
ver <code>

embed
Definio e uso: A tag <embed> define um recipiente para uma aplicao externa ou contedo interativo (um plug-in). Atributo: Atributo height src type width

Valor pixels URL MIME_type pixels

Descrio Especifica a altura do contedo incorporado Especifica o endereo do arquivo externo para incorporar Specifies the MIME type of the embedded content Specifies the width of the embedded content

Atributos globais e eventos:

40

A tag suporta atributos globais e eventos. Exemplo: Uma animao flash embutido: <embed src="helloworld.swf">

fieldset
Definio e uso: A tag <fieldset> utilizado para agrupar elementos relacionados em um formulrio. A tag <fieldset> desenha uma caixa em torno dos elementos relacionados. Dicas e notas: Dica: A tag <legend> define uma legenda para o elemento <fieldset>. Atributos: Atributo disabled

Valor disabled

Descrio Especifica que um grupo de elementos de formulrio relacionados deve ser desativado Especifica um ou mais forms que o fieldset pertence Especifica um nome para o fieldset

form name Atributos globais e eventos: A tag suporta atributos globais e eventos.

form_id text

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

figure
Definio e uso: A tag <figure> especifica independente de contedo, como ilustraes, diagramas, fotos, listas de cdigo, etc Enquanto o contedo do elemento <figure> est relacionado com o fluxo principal, a sua posio independente do fluxo principal, e se tiver sido removido, no deve afectar o fluxo do documento. Dicas e notas: Dica: O elemento <figcaption> usado para adicionar uma legenda para o elemento <figure>. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Use um elemento <figure> para marcar uma foto em um documento: <figure> <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228"> </figure>

41

footer
Definio e uso: A tag <footer> define um rodap de um documento ou seo. Um elemento <footer> deve conter informaes sobre o elemento que contm. Normalmente um rodap contm o autor do documento, informaes de copyright, links para termos de uso, informaes de contato, etc Voc pode ter vrios elementos <footer> em um documento. Dicas e notas: Dica: Informaes de contato dentro de um elemento <footer> deve ir dentro de uma tag <adress>. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: A seo de rodap em um documento: <footer> <p>Posted by: Hege Refsnes</p> <p><time pubdate datetime="2012-03-01"></time></p> </footer>

form
Definio e uso: O <form> usado para criar um formulrio HTML para entrada do usurio. O elemento <form> pode conter um ou mais dos elementos de forma a seguir: - <input> - <textarea> - <button> - <select> - <option> - <optgroup> - <fieldset> - <label> Diferenas entre HTML e XHTML Em XHTML, o atributo name est obsoleto. Use o atributo id global em vez. Atributos: Atributo Valor accept-charset action autocomplete enctype character_set URL on off application/x-www-form-urlencoded multipart/form-data text/plain get post text novalidate _blank _self _parent _top

Descrio Especifica encodings, que podem ser usados para o envio de formulrios. Especifica para onde enviar o formulrio de dados quando um formulrio enviado Especifica se um formulrio deve ter autocomplete ligado ou desligado Especifica como o formulrio de dados devem ser codificados quando envi-lo para o servidor (apenas para o mtodo = "post") Especifica o mtodo HTTP para o envio de formulrio de dados Especifica o nome de um formulrio Especifica que o formulrio no deve ser validado quando submetido Especifica onde exibir a resposta que recebido aps enviar o formulrio

method name novalidate target

42

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um formulrio HTML com dois campos de entrada e um boto de envio: <form action="demo_form.asp" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>

h1 - h6
Definio e uso: O <h1> para <h6> so usados para definir cabealhos HTML. <h1> define o ttulo mais importante. <h6> define a posio menos importante Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Os seis diferentes ttulos de HTML: <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>

header
Definio e uso: A tag <header> especifica um cabealho de um documento ou seo. O elemento <header> deve ser usado como um recipiente para o contedo introdutrio ou conjunto de ligaes de navegao. Voc pode ter vrios elementos <header> em um documento. Nota: A tag <header> no podem ser colocados dentro de um <footer>, <address> ou outro elemento <header>. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um cabealho para um <article>: <article> <header> <h1>Internet Explorer 9</h1> <p><time pubdate datetime="2011-03-15"></time></p> </header> <p>Windows Internet Explorer 9 (abbreviated as IE9) was released to the public on March 14, 2011 at 21:00 PDT.....</p> </article>

hgroup
Definio e uso: A tag <hgroup> usado para agrupar elementos de ttulo. O elemento <hgroup> utilizado para agrupar um conjunto de elementos para <h1> <h6>, quando um cabealho possui mltiplos nveis (subttulos). Atributos globais e eventos:

43

A tag suporta atributos globais e eventos. Exemplo: Usar <hgroup> para ttulos do grupo: <hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2> </hgroup> <p>The rest of the content...</p>

hr
Definio e uso: A tag <hr> define uma ruptura temtica em uma pgina HTML (por exemplo, uma mudana de tema). O elemento <hr> usado para separar o contedo (ou definir uma mudana) em uma pgina HTML. Diferena entre HTML e XHTML Em HTML, a tag <hr> no tem tag final. Em XHTML, a marca <hr> deve ser bem fechada, como esta: <hr />. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Use a tag <hr> para definir uma mudana temtica no contedo: <h1>HTML</h1> <p>HTML is a language for describing web pages.....</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.....</p>

i
Definio e uso: A marca <i> define uma parte do texto em uma voz alternativa ou humor. O contedo da tag <i> geralmente mostrado em itlico. A marca <i> pode ser usado para indicar um termo tcnico, uma frase de outro idioma, um pensamento, ou um nome de navio, etc Usar o elemento <i> somente quando no h um elemento mais apropriado semntica, tais como: <em> (texto enfatizado) <strong> (texto importante) <mark> (texto marcados /destacado) <cite> (o ttulo de uma obra) <dfn> (um termo definio) Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: <p>He named his car <i>The lightning</i>, because it was very fast.</p>

iframe
Definio 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 no 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). Diferena entre HTML e XHTML: Em XHTML, o atributo name obsoleto, e ser removido. Use o atributo id ao invs dele. Atributos: Atributo Valor Descrio height name sandbox pixels name "" allow-forms allow-same-origin allow-scripts allow-top-navigation seamless URL HTML_code pixels Especifica a altura de um <iframe> Especifica o nome de um <iframe> Permite que um conjunto de restries adicionais para o contedo do <iframe>

seamless src srcdoc width Atributos globais e eventos: A tag suporta atributos globais e eventos.

Especifica que o <iframe> deve parecer como parte do documento que contem Especifica o endereo do documento para incorporar no <iframe> Especifica o contedo HTML da pgina para mostrar no <iframe> Especifica a largura de um <iframe>

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

img
Definio e uso: A marca <img> define uma imagem em uma pgina HTML. A marca <img> tem dois atributos necessrios: src e alt. Nota: As imagens no so tecnicamente inserido em uma pgina HTML, imagens so ligados a pginas HTML. A marca <img> cria um espao de reteno para a imagem referenciada. Dica: Para associar uma imagem a um outro documento, simplesmente o ninho da marca <img> dentro de tags <a>. Diferena entre HTML e XHTML: Em HTML a tag <img> no tem tag final. Em XHTML a tag <img> deve ser devidamente fechado. Atributos: Atributo alt crossorigin

Valor text anonymous use-credentials pixels ismap URL #mapname

Descrio Especifica um texto alternativo para uma imagem Permitir imagens de sites de terceiros que permitem origem cruzada de acesso a ser usado com canvas Especifica a altura de uma imagem Especifica uma imagem como um servidor de imagem-mapa Especifica a URL de uma imagem Especifica uma imagem como um cliente de imagem-mapa

height ismap src usemap

45

width

pixels

Especifica a largura de uma imagem

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

input
Definio e uso: A marca <input> especifica um campo de entrada onde o usurio pode inserir dados. <input> elementos so usados dentro de um elemento <form> para declarar controles de entrada que permitem aos usurios inserir dados. Um campo input pode variar de muitas formas, dependendo do tipo de atributo. Dicas e notas: Nota: O elemento <input> vazio, ele contm apenas atributos. Dica: Use o elemento <label> para definir rtulos para os elementos <input>. Diferena entre HTML e XHTML: Em HTML, a tag <input> no tem tag final. Em XHTML, a marca <input> deve ser bem fechada, como esta <input />. Atributos: Atributo accept

Valor audio/* video/* image/* MIME_type text on off autofocus

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

alt autocomplete autofocus

Especifica um texto alternativo para imagens (somente para type = "image") Especifica se o elemento <inpit> deve com o autocomplete ativado. Especifica que um elemento <input> deve receber automaticamente o foco quando a pgina carregada Especifica que um elemento <input> deve ser pr-selecionado quando a pgina carregada (para type = "checkbox" ou type = "radio") Especifica que um elemento <input> deve ser desativado Especifica um ou mais forms que o elemento <input> pertence Especifica a URL do arquivo que ir processar o controle de entrada, quando o formulrio enviado (para type = "submit" e type = "image") Especifica como os forms-dados devem ser codificados quando envi-dos para o servidor (por type = "submit" e type = "image") Define o mtodo HTTP para o envio de dados para o URL de ao (para type = "submit" e type = "imagem")

checked

checked

disabled form formaction

disabled form_id URL

formenctype

application/x-www-form-urlencoded multipart/form-data text/plain get post

formmethod

46

formnovalidate formtarget

formnovalidate _blank _self _parent _top framename pixels datalist_id

Define que os elementos de formulrio no deve ser validado quando submetidos Especifica onde exibir a resposta que recebida aps enviar o formulrio (para type = "submit" e type = "image")

height list

Especifica a altura de um elemento <input> (apenas para type = "image") Refere-se a um elemento <datalist> que contm opes pr-definidas para um elemento <input> Especifica o valor mximo de um elemento <input> Especifica o nmero mximo de caracteres permitidos em um elemento <input> Especifica um valor mnimo para um elemento <input> Especifica que um usurio pode inserir mais de um valor em um elemento <input> Especifica o nome de um elemento <input> Especifica uma expresso regular pela qual o valor de um elemento <input> verificado Especifica uma sugesto curta que descreve o valor esperado de um elemento <input> Especifica que um campo de entrada somente leitura Especifica que um campo de entrada deve ser preenchido antes de enviar o formulrio Especifica a largura, em caracteres, de um elemento <input> Especifica o URL da imagem para usar como um boto de envio (somente para type = "image") Especifica os intervalos de nmero legal para um campo de entrada Especifica o tipo de elemento <input> para exibir

max maxlength min multiple name pattern

number date number number date multiple text regexp

placeholder

text

readonly required size src

readonly required number URL

step type

number button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit

47

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

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um formulrio HTML com trs campos de entrada, dois campos de texto e um boto de envio: <form action="demo_form.asp"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>

ins
Definio e uso: A tag <ins> define um texto que foi inserido num documento. Dica: Tambm olhar para a tag <del> para marcao de texto excludo. Navegadores normalmente riscam uma linha de texto excludo e sublinham o texto inserido. Dicas e Notas: Dica: <ins> us-lo juntamente com <del> a atualizaes e modificaes de marcao em um documento. Atributo cite Valor URL Descrio Especifica uma URL para um documento que explica a razo pela qual o texto foi inserido /alterado Especifica a data ea hora em que o texto foi inserido /alterado

datetime

YYYY-MM-DDThh:mm:ssTZD

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um texto com uma parte apagada, e uma parte nova, inserida: <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

kbd
ver <code>

keygen
Definio e uso: A tag <keygen> especifica um campo gerador de par de chaves utilizado para formulrios. Quando o formulrio enviado, a chave privada armazenada localmente, e a chave pblica enviada para o servidor. Atributos: Atributo autofocus

Valor autofocus

Descrio Especifica que um elemento <keygen>

48

deve receber automaticamente o foco quando a pgina carregada challenge challenge Especifica que o valor do elemento <keygen> devem ser testados quando submetidos Especifica que um elemento <keygen> deve ser desativado Especifica uma ou mais formas que o elemento <keygen> pertence Especifica o algoritmo de segurana da chave. Define um nome para o elemento <keygen>

disabled form keytype

disabled form_id rsa dsa ec name

name

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um formulrio com um campo keygen: <form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name"> Encryption: <keygen name="security"> <input type="submit"> </form>

label
Definio e uso: A tag <label> define um rtulo para um elemento <input>. O elemento <label> no processar como algo especial para o usurio. No entanto, ele fornece uma melhoria de usabilidade para os usurios do mouse, porque se o usurio 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 no suporta. Atributos: Atributo for form

Valor element_id form_id

Descrio Especifica o elemento form que o label ser vinculado Especifica um ou mais form que o label pertence

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Dois botes de opo com etiquetas: <form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br> <input type="submit" value="Submit"> </form>

49

link (Se o atributo itemprop for utilizado)

map
Definio e uso: A tag <map> usada para definir uma imagem mapa do lado do cliente. Uma imagem-mapa uma imagem com reas clicveis. O atributo obrigatrio name do elemento <map> est associado com o atributo <img> usemap e cria uma relao entre a imagem e o mapa. O elemento <map> contm um nmero de elementos <area>, que define as reas clicveis na imagem do mapa. Atributos globais e eventos: A tag suporta atributos globais e eventos. Diferena entre HTML e XHTML: Em XHTML, o atributo name obsoleto, e ser removido. Use o atributo id vez. Atributos: Atributos name

Valores mapname

Descrio Obrigatrio. Especifica o nome de uma imagem-mapa

Exemplo: Uma imagem Mapa, com reas clicveis: <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> </map>

mark
Definio e uso: A tag <mark> define o texto marcado. Use a tag <mark> se voc quiser destacar partes do texto. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Realar partes de um texto: <p>Do not forget to buy <mark>milk</mark> today.</p> math menu meta (Se o atributo itemprop for utilizado)OK

meter
Definio e uso: A tag <meter> define uma medio escalar dentro de um intervalo conhecido, ou um valor fraccional. Isto tambm conhecido como um medidor. Exemplos: o uso do disco, a relevncia do resultado de uma consulta, etc Nota: A tag <meter> no deve ser utilizado para indicar o progresso (como em uma barra de progresso). Para barras de progresso, use a tag <progress>. Nota: No suportada pelo IE e pelo Safari Atributos: Atributos form

Valor form_id

Descrio Especifica um ou mais forms que o

50

elemento <meter> pertence high low max min optimum value number number number number number number Especifica o intervalo que considerado como sendo um valor alto Especifica o intervalo que considerado como sendo um valor baixo Especifica o valor mximo do intervalo Especifica o valor minimo do intervalo Especifica que valor o valor ideal para o medidor Obrigatrio. Especifica o valor atual do indicador

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uso do elemento meter que mede dados dentro de um determinado intervalo (a medida): <meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter>

nav
Definio e uso: A tag <nav> define uma seo de links de navegao. 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 navegao. Navegadores, como leitores de tela para deficientes motores, pode usar esse elemento para determinar se deve omitir a prestao inicial deste contedo. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uma seo de links de navegao: <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> noscript

object
Definio e uso: A tag <object> define um objeto incorporado dentro de um documento HTML. Use este elemento para incorporar multimdia (como udio, vdeo, applets Java, ActiveX, PDF e Flash) em suas pginas web. Voc tambm pode usar a marca <object> para incorporar uma outra pgina em seu documento HTML. Voc pode usar a tag <param> passar parmetros 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 no suportam esta tag. Dica: Para imagens utilize a tag <img> em vez da marca <object>. Dica: pelo menos um dos "dados" ou "tipo" atributo deve ser definido. Atributos: Atributo

Valor

Descrio

51

data form height name type usemap

URL form_id pixels name MIME_type #mapname

Especifica o URL do recurso a ser usado pelo objeto Especifica uma ou mais forms que o objetct pertence Especifica a altura do objecto Especifica o nome do objeto. Especifica o tipo MIME dos dados especificados no atributo de dados Especifica um nome de imagem de mapa de lado cliente para ser usado como o objeto. Especifica a largura do objecto

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

pixels

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

ol
Definio e uso: A tag <ol> define uma lista ordenada. Uma lista ordenada pode ser numrica ou alfabtica. Use a tag <li> para definir os itens da lista. Dicas e notas: Dica: Para a lista no-ordenada, utilize a tag <ul>. Dica: Use CSS para listas de estilo. Atributos: Atributo reversed start type

Valor reversed number 1 A a I i

Descrio Especifica que a ordem da lista deve ser descendente (9,8,7 ...) Especifica o valor inicial de uma lista ordenada Especifica o tipo de marcador a ser usado na lista

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: 2 listas ordenadas diferentes: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>

52

output
Definio e uso: A tag <output> representa o resultado de um clculo (como uma realizada por um script). Nota:O IE no oferece suporte. Atributos: Atributo for

Valor element_id

Descrio Especifica a relao entre o resultado do clculo, e os elementos utilizados para o clculo Espesifica um ou mais forms que o output pertence Especifica um nome para o elemento de sada

form name

form_id name

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Realizar um clculo e mostrar o resultado em um elemento <output>: <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>

p
Definio e uso: O <p> define um pargrafo. Navegadores automaticamente adicionar algum espao (margem), antes e depois de cada elemento <p>. As margens podem ser modificados com CSS (com as propriedades de margem). Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um pargrafo marcada como segue: <p>This is some text in a paragraph.</p>

pre
Definio 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 espaos e quebras de linha. Dicas e usos: Dica: Use o elemento <pre> ao exibir texto com formatao incomum, ou algum tipo de cdigo de computador. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Texto pr-formatado: <pre> Text in a pre element is displayed in a fixed-width font, and it preserves

53

both spaces and line breaks </pre>

progress
Definio 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> no adequado para a representao de um medidor (por exemplo, o uso de espao em disco ou a relevncia de um resultado de consulta). Para representar um medidor, use a tag <meter> vez. Atributos: Atributo max value Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: O download em progresso: <progress value="22" max="100"></progress>

Valor number number

Descrio Especifica quanto trabalho a tarefa requer, no total Especifica o quanto da tarefa foi concluda

q
Definio e uso: A tag <q> define uma citao curta. Navegadores normalmente inserem aspas em torno da citao. Dicas e notas; Dica: Use <blockquote> para marcar uma seo que citado de outra fonte. Atributos: Atributo Valor cite Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Marca uma breve citao: <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q> We hope they succeed.</p> URL

Descrio Especifica a URL fonte da citao

ruby
Definio e uso: A tag <ruby> especifica uma anotao de rubi. Anotaes Ruby so usados para a tipografia Leste asitica, para mostrar a pronncia de caracteres do leste asitico. 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 explicao /pronncia, e um elemento que d <rt> essa informao, e um elemento <rp> opcional que define o que mostrar para navegadores que no suportam anotaes Ruby. Atributos globais e eventos:

54

A tag suporta atributos globais e eventos. Exemplo: Uma anotao ruby: <ruby> <rt> </rt> </ruby> samp ver <code> script section Definio e uso: A tag <section> define sees em um documento. Tal como captulos, cabealhos, rodaps, ou quaisquer outras sees do documento. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: A seo em um documento, explicando o que o WWF : <section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is....</p> </section>

select
Definio e uso: O elemento <select> usado para criar uma lista drop-down. As tags <option> dentro do elemento <select> definir as opes disponveis na lista. Dicas e notas: Dica: O elemento <select> um controle de forma e pode ser usado em um formulrio para coletar entrada do usurio. Atributo Valor Descrio autofocus autofocus Especifica que a lista drop-down deve receber automaticamente o foco quando a pgina carregada Especifica que uma lista drop-down deve ser desativado Define um ou mais form que o elemento select pertence Especifica que vrias opes podem ser selecionadas de cada vez Define um nome para a lista drop-down Especifica que o usurio obrigado a selecionar um valor antes de enviar o formulrio Define o nmero de opes visveis em uma lista drop-down

disabled form multiple name required

disabled form_id multiple name required

size

number

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Criar uma lista suspensa com quatro opes: <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option>

55

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

small
Definio e uso: A tag <small> define texto menor (e comentrios outro lado). Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Defina um texto menor: <p>W3Schools.com - the world's largest web development site.</p> <p><small>Copyright 1999-2050 by Refsnes Data</small></p>

span
Definio e uso: O tag usado para <span> grupo linha elementos em um documento. A marca <span> no fornece nenhuma mudana visual por si s. A marca <span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Dicas e notas: Dica: Quando um texto ligado em um elemento <span>, voc pode estilizar com CSS, ou manipul-lo com JavaScript. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um elemento <span> usado para colorir uma parte de um texto: <p>My mother has <span style="color:blue">blue</span> eyes.</p>

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

sub
Definio e uso: A tag <sub> define o texto subscrito. Texto subscrito aparece meia carter abaixo da linha de base. texto Subscrito pode ser utilizado para as frmulas qumicas, tal como H2O. A tag <sup> define o texto sobrescrito. Texto sobrescrito aparece meia carter acima da linha de base. Texto sobrescrito pode ser usado para notas de rodap, como WWW [1]. Atributos globais e eventos: A tag suporta atributos globais e eventos. u Texto subscrito e sobrescrito : <p>This text contains _subscript text.</p> <p>This text contains ^superscript text.</p>

sup
ver sub svg

56

table
Definio 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 cabealho de quadro, e o elemento <td> define uma clula da tabela. Uma mais complexa tabela HTML pode tambm incluir <caption>, <col>, <colgroup>, <thead>, <tfoot> e elementos <tbody>. Atributos: Atributo border

Valor 1 ""

Descrio Especifica se as clulas da tabela deve ter bordas ou no

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uma tabela HTML simples, contendo duas colunas e duas linhas: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

textarea
Definio e uso: A tag <textarea> define um multilinha de controle de entrada de texto. Uma rea de texto pode conter um nmero 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, atravs altura CSS 'e propriedades de largura. Atributos: Atributo autofocus

Valor autofocus

Descrio Especifica que uma rea de texto deve receber automaticamente o foco quando a pgina carregada Especifica a largura visvel de uma rea de texto Especifica que uma rea de texto deve ser desativado Especifica um ou mais forms que a rea de texto pertence Especifica o nmero mximo de caracteres permitidos na rea de texto Especifica um nome para uma rea de texto Especifica uma sugesto curta que descreve o valor esperado de uma rea de texto

cols disabled form maxlength name placeholder

number disabled form_id number text text

57

readonly required rows wrap

readonly required number hard soft

Especifica que uma rea de texto deve ser somente leitura Especifica que uma rea de texto exigida /deve ser preenchida Especifica o nmero de linhas visveis numa rea de texto Especifica como o texto em uma rea de texto deve ser ajustada quando submetida a um form

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

time
Definio e uso: A tag <time> define tanto uma hora (24 horas), ou uma data no calendrio gregoriano, opcionalmente, com um tempo e um fuso horrio. Este elemento pode ser usado como uma forma de codificar as datas e horrios de uma forma legvel por mquina, de modo que, por exemplo, os agentes podem oferecer para adicionar lembretes de aniversrio ou eventos programados para o calendrio do usurio, e os motores de busca podem produzir resultados mais inteligente de busca. Atributos: Atributos datetime

Valor datetime

Descrio D a data /hora sendo especificado. Caso contrrio, a data /hora dada pelo contedo do elemento

Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Como definir uma hora e uma data: <p>We open at <time>10:00</time> every morning.</p> <p>I have a date on <time datetime="2008-02-14">Valentines day</time>.</p>

ul
Definio e uso: A tag <ul> define uma lista no ordenada (com marcadores). Use a tag <ul> juntamente com a marca <li> para criar listas desordenadas. Dicas e notas: Dica: Use CSS para listas de estilo. Dica: Para criar listas ordenadas, use a tag <ol>. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Uma lista no ordenada HTML: <ul>

58

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

var
ver <code>

video
Definio e uso: A marca <video> especifica de vdeo, como um clipe de filme ou fluxos de vdeo. Atualmente, existem trs formatos de vdeo com suporte para o elemento <video>: MP4, WebM, e Ogg: Tipo MIME para formatos de video Formato Tipo-MIME MP4 WebM Ogg video/mp4 video/webm video/ogg

Dicas e Notas: Dica: Qualquer texto entre o <video> e </vdeo> marcas sero exibidos em navegadores que no suportam o elemento <video>. Atributos: Atributo autoplay controls

Valor autoplay controls

Detalhes Especifica que o vdeo vai iniciar a reproduo assim que est pronto Especifica que os controles de vdeo deve ser exibido (como um boto etc play /pause). Define a altura do player de vdeo Especifica que o vdeo vai comear novamente, cada vez que ele for concludo Especifica que a sada de udio do vdeo deve ser silenciada Especifica uma imagem a ser mostrada enquanto o vdeo est baixando, ou at que o usurio pressiona o boto play Especifica se e como o autor pensa que o vdeo deve ser carregado quando a pgina carregada Especifica a URL do arquivo de vdeo Define a largura do player de vdeo

height loop muted poster

pixels loop muted URL

preload

auto metadata none URL pixels

src width Atributos globais e eventos: A tag suporta atributos globais e eventos.

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

59

wbr
Definio 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:No suportada pelo IE. Atributos globais e eventos: A tag suporta atributos globais e eventos. Exemplo: Um texto com oportunidades de quebra de palavra: <p> To learn AJAX, you must be familiar with the XML<wbr>Http<wbr>Request Object. </p> Text

Sectioning content
Basicamente so elementos que juntam grupos de textos no documento. Estes elementos definem um grupo de cabealhos e rodaps. article aside nav section

Heading content
Os elementos da categoria Heading definem uma seo de cabealhos, que podem estar contidos em um elemento na categoria Sectioning. h1 - h6 hgroup

Phrasing content
Fazem parte desta categoria elementos que marcam o texto do documento, bem como os elementos que marcam este texto dentro do elemento de pargrafo. a abbr area (se ele for descendente de um elemento de mapa)OK audio b bdo br button canvas cite code command datalist del (se ele contiver um elemento da categoria de Phrasing)OK dfn em embed i

60

iframe img input ins (se ele contiver um elemento da categoria de Phrasing) kbd keygen label link (se o atributo itemprop for utilizado) map (se apenas ele contiver um elemento da categoria de Phrasing) mark math meta (se o atributo itemprop for utilizado) meter noscript object output progress q ruby samp script select small span strong sub sup svg textarea time var video wbr Text

Embedded content
Na categoria Embedded, h elementos que importam outra fonte de informao para o documento. audio canvas embed iframe img math object svg video

Interactive content
Interactive Content so elementos que fazem parte da interao de usurio. a audio (se o atributo control for utilizado)OK button details embed img (se o atributo usemap for utilizado) input (se o atributo type no 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 accesskey class contenteditable contextmenu dir draggable dropzone hidden id lang spellcheck style tabindex title translate Descrio Especifica uma tecla de atalho para ativar /focar um elemento Especifica um ou mais nomes de classes para um elemento (refere-se a uma classe em uma folha de estilo) Especifica se o contedo de um elemento editvel ou no Especifica um menu de contexto para um elemento. O menu de contexto aparece quando um usurio clica com direito sobre o elemento Especifica a direo de texto para o contedo de um elemento Especifica se um elemento arrastvel ou no Especifica se os dados arrastados so copiados, movido ou ligados, quando soltos Especifica que um elemento ou no relevante Especifica um id nico para um elemento Especifica o idioma do contedo do elemento Especifica se o elemento tem a sua ortografia e gramtica marcada ou no Especifica um estilo CSS inline para um elemento Especifica a ordem de tabulao de um elemento Especifica informaes adicionais sobre um elemento Especifica se o valor de um elemento devem ser traduzidas quando a pgina est localizada, ou no.

3.3.Atributos de Evento 3.3.1.Atributos de eventos de janela

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

62

onmessage onoffline ononline onpagehide onpageshow onpopstate onredo onresize onstorage onundo onunload

script script script script script script script script script script script

Script para ser executado quando a mensagem acionada Script para ser executado quando o documento entra em modo offline Script para ser executado quando o documento votat a ficar online Script para ser executado quando a janela est oculta Script para ser executado quando a janela torna-se visvel Script para ser executado quando o histrico da janela mudado Script para ser executado quando o documento realiza uma refazer Ativado quando a janela do navegador redimensionada Script para ser executado quando uma rea de armazenamento na Web atualizado Script para ser executado quando o documento realiza uma desfazer Dispara uma vez que uma pgina tenha descarregado (ou a janela do navegador foi fechado)

3.3.2.Eventos de formulrios
Eventos desencadeados por aes dentro de um formulrio HTML (aplica-se a quase todos os elementos HTML, mas a mais utilizada em elementos de formulrio): Atributo onblur onchange oncontextmenu onfocus onformchange onforminput oninput oninvalid onselect onsubmit Valor script script script script script script script script script script Descrio Dispara o momento em que o elemento perde o foco Dispara no momento em que o valor do elemento alterado Script para ser executado quando um menu de contexto acionado Dispara no momento em que o elemento obtm foco Script para ser executado quando um formulrio muda Script para ser executado quando um formulrio recebe entrada do usurio Script para ser executado quando um elemento recebe entrada do usurio Script para ser executado quando um elemento invlido Inicia depois de algum texto tiver sido selecionado em um elemento Inicia quando um formulrio submetido

3.3.3.Evento do teclado
Atributo onkeydown onkeypress onkeyup Valor script script script Descrio Acionado quando um usurio est pressionando uma tecla Ativado quando um usurio pressiona uma tecla Acionado quando um usurio solta uma tecla

63

3.3.4.Eventos de Mouse
Eventos desencadeados pelo mouse, ou aes do usurio semelhantes Atributo Valor onclick ondblclick ondrag ondragend ondragenter script script script script script Descrio Acionado em um clique do mouse sobre o elemento Inicia em um clique duplo do mouse sobre o elemento Script para ser executado quando um elemento arrastado Script para ser executado no final da operao de arrasto Script para ser executado quando um elemento foi arrastado para um destino de soltar vlido Script para ser executado quando um elemento deixa um destino de soltar vlido Script para ser executado quando um elemento est sendo arrastado sobre um destino de soltar vlido Script para ser executado no incio de operao de arrasto Script para ser executado quando o elemento arrastado est sendo descartado Acionado quando um boto do mouse pressionado em um elemento Dispara quando o ponteiro do mouse se move sobre um elemento Dispara quando o ponteiro do mouse se move para fora de um elemento Dispara quando o ponteiro do mouse se move sobre um elemento Dispara quando um boto do mouse liberado sobre um elemento Script para ser executado quando a roda do mouse est sendo rodado Script para ser executado quando um elemento da barra de rolagem est sendo rolada

ondragleave ondragover

script script

ondragstart ondrop onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onscroll

script script script script script script script script script

3.3.5.Eventos de mdia
Eventos desencadeados por mdias como vdeos, imagens e udio (aplica-se a todos os elementos HTML, mas mais comum em elementos de mdia, como <audio>, <embed>, <img>, <object>, e <video>): Atributo Valor Descrio onabort oncanplay script script Script para ser executado em interromper Script para ser executado quando um arquivo est pronto para comear a reproduzir (quando armazena no buffer o suficiente para comear) Script para ser executado quando um arquivo pode ser reproduzido por todo o caminho at o fim sem pausa para

oncanplaythrough

script

64

buferizao ondurationchange onemptied script script Script para ser executado quando a durao da midia muda Script para ser executado quando algo de ruim acontece e o arquivo de repente est indisponveis (como disconexo inesperada) Script para ser executado quando a mdia tiver chegado ao final (um evento til para mensagens como "Obrigado por escutar") Script para ser executado quando um erro ocorre quando o arquivo est sendo carregado Script para ser executado quando os dados da mdia so carregados Script para ser executado quando os metadados dados (como dimenses e durao) so carregados Script para ser executado assim que o arquivo comea a carregar. Script para ser executado quando a mdia est em pausa ou pelo usurio ou por meio de programao Script para ser executado quando a mdia est pronta para comear a reproduzir Script para ser executado quando a mdia realmente comeou a ser reproduzida Script para ser executado quando o navegador est em processo de obteno de dados de mdia Script para ser executado cada vez que as alteraes na taxa de reproduo (como quando um usurio muda para um movimento lento ou modo de avano rpido) Script para ser executado a cada vez que o estado pronto (o estado de pronto controla o estado dos dados de mdia) Script para ser executado quando o atributo de busca definido como falso indicando que a busca acabou Script para ser executado quando o atributo de busca definido como true, indicando que a busca est ativa Script para ser executado quando o navegador incapaz de buscar os dados de mdia por qualquer razo Script para ser executado quando a coleta de dados de mdia interrompida por qualquer motivo antes que esteja completamente carregado Script para ser executado quando a posio de reproduo mudou (como quando o usurio avana rapidamente para um ponto diferente na mdia)

onended

script

onerror

script

onloadeddata onloadedmetadata

script script

onloadstart onpause

script script

onplay onplaying onprogress

script script script

onratechange

script

onreadystatechange

script

onseeked

script

onseeking

script

onstalled

script

onsuspend

script

ontimeupdate

script

65

onvolumechange

script

Script para ser executado cada vez que o volume alterado que (inclui definir o volume para "mudo") Script para ser executado quando a mdia fez uma pausa, mas dever retomar (como quando a mdia faz uma pausa para buffer de mais dados)

onwaiting

script

4.Validao de formulrios
Uma das tarefas mais enfadonhas de se fazer em Javascript validar formulrios. Infelizmente, tambm uma das mais comuns. HTML5 facilita muito nossa vida ao validar formulrios, tornando automtica 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 validao para datas, emails, URLs e nmeros. Vamos um pouco alm.

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

4.2.novalidate e formnovalidate
Podem haver situaes em que voc precisa que um formulrio no seja validado. Nestes casos, basta incluir no elemento form o atributo novalidate. Outra situao comum querer que o formulrio no seja validado dependendo da ao de submit. Nesse caso, voc pode usar no boto 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 validaes padro, embora atendam a maioria dos casos, no so suficientes para todas as situaes. Muitas vezes voc vai querer escrever sua prpria funo de validao Javascript. H alguns detalhes na especificao do HTML5 que vo ajud-lo com isso: 1. O novo evento oninput disparado quando algo modificado no valor de um campo de formulrio. Diferente de onchange, que disparado ao final da edio, oninput disparado ao editar. diferente tambm de onkeyup e onkeypress, porque vai capturar qualquer modificao no valor do campo, feita com mouse, teclado ou outra interface qualquer. 2. O mtodo setCustomValidity pode ser invocado por voc. Ele recebe uma string. Se a string for vazia, o campo ser marcado como vlido. Caso contrrio, ser marcado como invlido. Com isso, voc pode inserir suas validaes no campo de formulrio e deixar o navegador fazer o resto. No mais preciso capturar o evento submit e trat-lo. Veja, por exemplo, este formulrio com validao de CPF: <!DOCTYPE html> <html lang=pt-BR> <head> <meta charset=UTF-8 /> <title>Custom validator</title> <!-- O arquivo cpf.js contm a funo validaCPF, que recebe uma string e retorna true ou false. --> <script src=cpf.js></script> <script> function vCPF(i){ i.setCustomValidity(validaCPF(i.value)?:CPF invlido!) } </script> </head> <body> <form> <label>CPF: <input name=cpf oninput=vCPF(this) /></label> <input type=submit value=Enviar /> </form> </body> </html>

5.Multimedia
Multimdia na web msica, som, vdeos e animaes. Navegadores modernos tm suporte para vrios formatos multimdia. Suporte de navegadores O suporte para sons, animaes e vdeos tratado de formas diferentes por vrios navegadores. Alguns elementos multimdia suportado, e alguns requerem um programa de ajuda extra (um plug-in).

5.1.O elemento object

O objetivo do elemento <object> apoiar auxiliares HTML (plug-ins). Auxiliares HTML (plug-ins) Um aplicativo auxiliar um pequeno programa de computador que estende a funcionalidade padro do navegador. Aplicativos auxiliares tambm so chamados de plug-ins. Os plug-ins so muitas vezes utilizados pelos navegadores para reproduzir udio e vdeo. Exemplos de conhecido plug-ins so o Adobe Flash Player e QuickTime. Os plug-ins podem ser adicionados a pginas da Web atravs da marca <object> ou a tag <embed>. A maioria dos plug-ins permitem controle manual (ou programado) sobre as configuraes para o volume, voltar, avanar, 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 cdigo sugerido usado para exibir um arquivo do Windows Media. <object width="100%" height="100%" type="video/x-ms-asf" url="3d.wmv" data="3d.wmv" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name="url" value="3d.wmv"> <param name="filename" value="3d.wmv"> <param name="autostart" value="1"> <param name="uiMode" value="full"> <param name="autosize" value="1"> <param name="playcount" value="1"> <embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed> </object> Plug-ins Os plug-ins podem ser usados para muitas finalidades: para exibir mapas, verificao de vrus, verificar o ID de banco, e muito mais. As restries so poucas

5.2.Audio
Sons podem ser executados de varias formas diferentes. Problemas e Solues A execuo de audio em HTML no facil! Voc deve conhecer um monte de truques para se certificar de seus arquivos de udio sero 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 pginas HTML usando a marca <object> ou a tag <embed>. Estas tags de recipientes para definir os recursos (normalmente no-HTML recursos), o que, dependendo do tipo, ou ser exibida pelos navegadores, ou atravs de um plug-in externo. Usando o elemento <embed> A tag <embed> define um recipiente externo para o contedo (no-HTML).

68

O fragmento de cdigo a seguir deve executar um arquivo MP3 embutido em uma pgina web: <embed height="50" width="100" src="horse.mp3"> Problemas: Diferentes navegadores suportam diferentes formatos de udio Se um navegador no suporta o formato de arquivo, o udio no ser reproduzidos sem um plug-in Se o plug -in no estiver instalado no computador dos usurios, o udio no ser reproduzido Se voc converter o arquivo para outro formato, ele ainda no vai reproduzir em todos os navegadores Usando o elemento <object> A tag <object> tambem pode definir um recipiente externo para o contudo (no-HTML). O fragmento de cdigo a seguir deve executar um arquivo MP3 embutido em uma pgina web: <object height="50" width="100" data="horse.mp3"></object> Problemas: Diferentes navegadores suportam diferentes formatos de udio Se um navegador no suporta o formato de arquivo, o udio no sera reproduzidos sem um plug-in Se o plug-in no estiver instalado no computador dos usurios, o udio no ser reproduzido Se voc converter o arquivo para outro formato, ele ainda no vai reproduzir em todos os navegadores Usando o elemento <audio> do HTML5 A HTML5 tag <audio> define o som, como msica 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> no funciona em navegadores mais antigos. A Melhor Soluo HTML O exemplo abaixo usa o elemento HTML5 <audio> e tenta reproduzir o udio seja como MP3 ou OGG. Se ele falhar, o cdigo "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> no pode "retroceder" para exibir uma mensagem de erro Yahoo Media Player - Uma maneira fcil de adicionar udio para o seu site O GRATUITO Yahoo Media Player definitivamente um favorito: Voc simplesmente deixar Yahoo fazer o trabalho de tocar suas msicas. Ele reproduz MP3 e um monte de outros formatos. Voc pode adicion-lo sua pgina (ou blog) com uma nica linha de cdigo, e facilmente transformar sua pgina 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 pgina 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 cdigo JavaScript cria automaticamente um boto de reproduo para cada msica: <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 boto de play pequeno em vez de um player completo. No entanto, quando voc clica no boto, um player completo aparece. Note-se que o leitor est sempre encaixado e pronto, na parte inferior da janela. Basta clicar sobre ele para desliz-lo para fora. Usando um Hiperlink Se uma pgina Web inclui um hiperlink para um arquivo de media, a maioria dos navegadores vai usar uma "aplicao auxiliar" para reproduzir o arquivo. O fragmento de cdigo a seguir exibe um link para um arquivo MP3. Se um usurio clica no link, o navegador ir lanar um aplicativo auxiliar para reproduzir o arquivo: <a href="horse.mp3">Play the sound</a> Nota sobre sons embutidos Quando o som est includo em uma pgina web, ou como parte de uma pgina web, ele chamado de som embutido. Se voc pretende usar sons embutidos, esteja ciente de que muitas pessoas achem a idia irritante. Observe tambm que alguns usurios podem ter desligado a opo de som embutido em seu navegador. Nosso melhor conselho incluir sons em linha apenas em pginas onde o usurio espera ouvir sons. Um exemplo disso uma pgina que aberta aps o usurio clicar em um link para ouvir uma gravao.

5.3.Video
Videos podem ser reproduzido em HTML de diferentes maneiras. Problemas e solues Mostrar videos no facil. Voc deve adicionar um monte de truques para se certificar de seu vdeo 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 multimdia em pginas HTML. O seguinte fragmento HTML exibe um vdeo em Flash incorporado em uma pgina web: <embed src="intro.swf" height="200" width="200"> Problemas Se o navegador no suporta Flash, o vdeo no ser reproduzido iPad e iPhone no suportam vdeos em Flash Se voc converter o vdeo para outro formato, ele ainda no vai reproduzir em todos os navegadores Usando o elemento <object> O propsito da tag <object> incorporar elementos multimdia em pginas HTML. O seguinte fragmento HTML exibe um vdeo em Flash incorporado em uma pgina web: <object data="intro.swf" height="200" width="200"></object> Problemas: Se o navegador no suporta Flash, o vdeo no ser reproduzido iPad e iPhone no suportam vdeos em Flash Se voc converter o vdeo para outro formato, ele ainda no vai reproduzir em todos os navegadores Usando o elemento HTML5 <video> A tag HTML5 <video> define um vdeo ou filme. O elemento <video> funciona em todos os navegadores modernos. O seguinte fragmento HTML exibe um vdeo em OGG, MP4 ou formato WebM:

70

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video> Problemas Voc deve converter seus vdeos para diferentes formatos O elemento <video> no funciona em navegadores mais antigos A melhor soluo HTML O exemplo abaixo usa quatro diferentes formatos de vdeo. O elemento HTML 5 <video> tenta reproduzir o vdeo em formato MP4, ou,OGG, ou em WebM. Se isso no funcionar, o cdigo "cai" para tentar o elemento <object>. Se isso tambm 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 soluo YouTube A maneira mais fcil de exibir vdeos em HTML usar YouTube. Reproduzindo um video YouTube em HTML Se voc quiser reproduzir um vdeo em uma pgina da web, voc pode fazer o upload do vdeo para o YouTube e inserir o cdigo HTML adequado para exibir o vdeo: Exemplo - IFrame <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k"> </iframe> Exemplo - Embed <embed width="420" height="345" src="http://www.youtube.com/v/XGSy3_Czz8k" type="application/x-shockwave-flash"> </embed> Usando um hiperlink Se uma pgina web inclui um link para um arquivo de mdia, a maioria dos navegadores ir usar um "aplicativo auxiliar" para reproduzir o arquivo. O fragmento de cdigo a seguir exibe um link para um vdeo Flash. Se um usurio clica no link, o navegador ir lanar um aplicativo auxiliar para reproduzir o arquivo: <a href="intro.swf">Play a video file</a> Uma nota sobre vdeos embutidos Quando um vdeo est includo em uma pgina web chamado de vdeo embutido. Se voc planeja usar vdeos embutidos, esteja ciente de que muitas pessoas acham chato. Observe tambm que alguns usurios podem ter desligado a opo de vdeo embutido em seu navegador. Nosso melhor conselho incluir vdeos embutidos apenas em pginas onde o usurio espera para ver um vdeo. Um exemplo disso uma pgina que se abre aps o usurio clicar em um link para ver o vdeo.

71

6.Armazenamento Web com HTML5

Com HTML5, pginas da web podem armazenar dados localmente no navegador do usurio. Anteriormente, isso era feito com cookies. No entanto, Web Storage mais seguro e mais rpido. Os dados no so includo a cada solicitao do servidor, mas usados apenas quando solicitado. Tambm possvel armazenar grandes quantidades de dados, sem afetar o desempenho do site. Os dados so armazenados em pares chave /valor, e uma pgina web s pode acessar os dados armazenados por si s. localStorage e sessionStorage Existem dois novos objectos para o armazenamento de dados no cliente: localStorage - armazena dados sem data de validade sessionStorage - armazena dados para uma sesso Antes de usar o armazenamento web, verifique o suporte ao navegador para localStorage e sessionStorage: if(typeof(Storage)!=="undefined") { //Yes! localStorage and sessionStorage support! //Some code..... } else { //Sorry! No web storage support.. } O objeto localStorage O objeto localStorage armazena os dados sem data de validade. Os dados no sero apagados quando o navegador fechado, e estar disponvel no prximo dia, semana ou ano. localStorage.lastname="Smith"; document.getElementById("result").innerHTML="Last name: " + localStorage.lastname; Explicao 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 so sempre armazenados como strings. Lembre-se de convert-los para outro formato, quando necessrio. O exemplo a seguir conta o nmero de vezes que um usurio tenha clicado em um boto. Neste cdigo a cadeia de valor convertido num nmero para poder aumentar o contador: if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s)."; O objeto sessionStorage O objeto sessionStorage igual ao objeto localStorage, exceto que ele armazena os dados por apenas uma sesso. Os dados so apagados quando o usurio fecha a janela do navegador. O exemplo a seguir conta o nmero de vezes que um usurio clicou um boto, na sesso atual: if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button " + sessionStorage.clickcount + " time(s) in this

72

session.";

7.Cache da aplicativos HTML

Com HTML5 fcil fazer uma verso offline de uma aplicao web, atravs da criao de um arquivo de manifesto de cache. O que o cache de aplicativos? HTML5 introduz cache de aplicativos, o que significa que se uma aplicao web armazenada em cache, e acessvel sem uma conexo internet. Cache de aplicativo fornece a um aplicativo trs vantagens: 1. Navegao offline - os usurios podem usar o aplicativo quando ele estiver offline 2. Velocidade - recursos em cache carregar mais rpido 3. Carga do servidor reduzido - o navegador s ir baixar recursos atualizados /alterados do servidor Exemplo de manifesto de cache O exemplo abaixo mostra um documento HTML com um manifesto de cache (para navegao off-line): <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html> Manifesto de cache Bsico Para ativar o cache da aplicao, inclua o atributo manifest na tag <html>. <!DOCTYPE HTML> <html manifest="demo.appcache"> ... </html> Cada pgina com o atributo de manifesto especificado ser armazenada em cache quando o usurio a visita. Se o atributo manifesto no especificado, a pgina no ser armazenada em cache (a menos que a pgina for especificada diretamente no arquivo de manifesto). O arquivo de manifesto O arquivo de manifesto um arquivo de texto simples, que informa ao navegador o que armazenar em cache (e que no armazenar). O arquivo de manifesto tem trs sees: CACHE MANIFEST - arquivos listados sob este cabealho sero armazenada em cache aps serem baixadas pela primeira vez NETWORK - Os arquivos relacionados sob esse cabealho requerem uma conexo com o servidor, e nunca vo ser armazenada em cache FALLBACK - Arquivos listados sob esse cabealho especificam pginas fallback se uma pgina inacessvel. CACHE MANIFEST A primeira linha de manifesto de cache, necessrio: CACHE MANIFEST /theme.css /logo.gif /main.js O arquivo de manifesto acima lista trs recursos: um arquivo de CSS, uma imagem GIF, e um arquivo JavaScript. Quando o arquivo de manifesto carregado, o navegador ir baixar os trs arquivos do diretrio raiz do site. Ento, sempre que o usurio no est conectado Internet, os recursos ainda estar disponvel. NETWORK A seo de rede abaixo especifica que o arquivo "login.asp" nunca deve ser armazenado em cache, e no estar disponvel offline: NETWORK: login.asp

73

Um asterisco pode ser usado para indicar que todos os outros recursos /arquivos requerem uma conexo internet: NETWORK: * FALLBACK A seo FALLBACK abaixo especifica que "offline.html" ser servido no lugar de todos os arquivos no catlogo html , no caso de uma conexo com a Internet no pode ser estabelecida: FALLBACK: /html//offline.html Nota: A primeira URI o recurso o segundo o retorno. Atualizando o cache Uma vez que um aplicativo armazenados em cache, ele permanece em cache at que uma das seguintes situaes ocorra: 1. 2. 3. O usurio limpar o cache do navegador O arquivo de manifesto modificado O cache de aplicativo de programao 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 comeam com "#" so linhas de comentrio, mas tambm pode servir a um outro propsito. O cache de um aplicativo atualizado apenas quando o arquivo de manifesto sofre mudanas. Se voc editar uma imagem ou mudar uma funo JavaScript, essas alteraes no sero recarregadas no cache. Atualizando a data e a verso em uma linha de comentrio uma maneira de fazer com que o navegador atualize o cache de seus arquivos. Notas sobre cache de aplicao Tenha cuidado com que voc coloca no cache. Uma vez que um arquivo armazenado em cache, o navegador ir continuar a mostrar a verso em cache, mesmo se voc mudar o arquivo no servidor. Para garantir que o navegador atualize o cache, voc precisa alterar o arquivo de manifesto.

8.Workers Web
Um worker da web um JavaScript que executa em segundo plano, sem afetar o desempenho da pgina. Quando uma pgina HTML executa scripts, ela pgina fica sem resposta at que o script seja concludo. Um worker web um JavaScript que roda em segundo plano, independentemente de outros scripts, sem afetar o desempenho da pgina. Permite ao usurio continuar a fazer o que quiser: clicar, selecionar coisas, etc, enquanto o worker web executado em segundo plano. Checar suporte a worker Web Antes de criar um worker web, verifique se o navegador do usurio pode suporta-lo: if(typeof(Worker)!=="undefined") { //Yes! Web worker support! //Some code..... } else { //Sorry! No Web Worker support.. }

74

Criando um arquivo de Web Worker Agora, vamos criar o nosso worker web em um JavaScript externo. Aqui, ns 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 cdigo acima o mtodo postMessage () - que usado para envia uma mensagem de volta para a pgina HTML. Nota: Normalmente os workers web no so utilizados para tais scripts simples, mas sim para tarefas que exigem mais da CPU. Criando um objeto worker web Agora que temos o arquivo worker web, precisamos cham-lo para a pgina HTML. As linhas a seguir verificam se o worker j existe, se no - ele cria um novo objeto worker web e executa o cdigo em "demo_workers.js": if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } Ento 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 cdigo dentro do ouvinte de evento executado. Ento dados do worker web so armazenados em event.data. Finalizar o worker web Quando um objeto worker web criado, ele vai continuar a ouvir as mensagens (mesmo depois do script externo terminar) at ele que seja encerrado. Para terminar um worker web, e liberar os recursos do navegador/computador, use o mtodo terminate(): w.terminate(); Exemplo de worker web com cdigo completo <!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <br><br> <script> var w; function startWorker() { if(typeof(Worker)!=="undefined") {

75

if(typeof(w)=="undefined") { w=new Worker("demo_workers.js"); } w.onmessage = function (event) { document.getElementById("result").innerHTML=event.data; }; } else { document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers..."; } } function stopWorker() { w.terminate(); } </script> </body> </html> Worker web e DOM Como workers web so arquivos externos eles no tem acesso ao seguintes objetos Javascript: O objeto window O objeto document O objeto parent

9.Drag and Drop

Arrastar e soltar uma caracterstica muito comum. quando voc "agarrar" um objeto e arrast-lo para um local diferente. Em HTML5, arrastar e soltar parte do padro, e qualquer elemento pode ser arrastado. A API de Drag and Drop relativamente simples. Basicamente, inserir o atributo draggable=true num elemento o torna arrastvel. E h uma srie de eventos que voc pode tratar. Os eventos do objeto sendo arrastado so:

9.1.dragstart
O objeto comeou a ser arrastado. O evento que a funo recebe tem um atributo target, que contm o objeto sendo arrastado. drag - O objeto est sendo arrastado dragend - A ao 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 ao padro do evento dragover cancelar a ao de dragging atual. Assim, nos objetos que devem receber drop, preciso setar uma ao de dragover com, no mnimo, return false. Selees de texto so automaticamente arrastveis, no precisam do atributo draggable. E se voc quiser criar uma rea para onde selees de texto possam ser arrastadas, basta tratar esses mesmos eventos. Por fim, todas funes de tratamento de evento de drag recebem um objeto de evento que contm uma propriedade dataTransfer, um dataset comum a todos os eventos durante essa operao 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 usurio 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 usurio arrasta sobre um dos painis, retornamos //false para que o evento no se propague para o navegador, o //que faria com que o contedo fosse selecionado. function dragOver(ev) { return false; } //Quando soltamos o elemento sobre um painel, movemos o //elemento, lendo seu id do dataset do evento function dragDrop(ev) { var idelt = ev.dataTransfer.getData(ID); ev.target.appendChild(document.getElementById(idelt)); } </script> </head> <body> <!-- Painel 1 --> <div id=boxA ondrop=return dragDrop(event) ondragover=return dragOver(event)> <!-- Draggable 1 --> <div id=drag draggable=true ondragstart=return dragStart(event)>drag me</div> <!-- Draggable 2 --> <div id=drag2 draggable=true ondragstart=return dragStart(event)>drag me</div> </div> <!-- Painel 2 --> <div id=boxB ondrop=return dragDrop(event) ondragover=return dragOver(event)> </div> </body> </html>

10.Geolocalizao
Localizar a posio do usurio O HTML5 Geolocation API usada para obter a posio geogrfica de um usurio. Nota: Geolocalizao muito mais precisa para dispositivos com GPS, como o iPhone.

77

Usando a Geolocalizao Usar o mtodo getCurrentPosition () para obter a posio do utilizador. O exemplo a seguir um exemplo Geolocation simples retornando a latitude e longitude da posio do usurio: <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> Explicao do exemplo: 1. 2. 3. 4. 5. Verifique se Geolocalizao suportada Se suportado, execute o getCurrentPosition () mtodo. Se no, exibir uma mensagem para o utilizador Se o getCurrentPosition () bem sucedido, ele retorna um objeto coordenadas para a funo especificada no parmetro (showPosition) O showPosition () funo obtm o mostra a latitude e longitude O exemplo acima um script Geolocation muito bsico, sem manipulao de erro.

Tratamento de erros e rejeies O segundo parmetro do mtodo getCurrentPosition () usado para tratar os erros. Ele especifica uma funo a ser executada se no conseguir obter a localizao do usurio: 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; } } Cdigos de erro: Permission denied - O usurio no permitiu Geolocation Position unavailable - No possvel obter a localizao atual Timeout - A operao expirou Exibindo o resultado em um mapa Para exibir o resultado em um mapa, voc precisa de acesso a um servio 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 localizao em um mapa do Google (usando uma imagem esttica). Tambm possivel usar um script para mostrat um mapa interativo com um marcador de zoom e opes de arrasto. Localizao de informaes especificas Esta pgina demonstrou como para mostrar a posio de um usurio em um mapa. No entanto, Geolocation tambm muito til para a localizao de informaes especficas. Exemplos: 1. Up-to-date informaes locais 2. Mostrando Pontos de interesse perto do usurio 3. Turn-by-turn de navegao (GPS) O mtodo getCurrentPosition() O getCurrentPosition() retorna um objeto se ele bem sucedido. Propriedades a latitude, longitude e preciso so sempre devolvidos. As outras propriedades abaixo so retornadas se disponvel. coords.latitude - A latitude como um nmero decimal coords.longitude - A longitude como um nmero decimal coords.accuracy - A preciso da posio coords.altitude - A altitude em metros acima do nvel mdio do mar coords.altitudeAccuracy - A preciso da posio de altitude coords.heading - A posio em graus no sentido horrio a partir do Norte coords.speed - A velocidade em metros por segundo timestamp - A data /hora da resposta Objeto Geolocation - Outros Mtodos interessantes watchPosition () - Retorna a posio atual do usurio e continua a retornar posio atualizada conforme os movimentos do usurio (como o GPS em um carro). clearWatch () - Interrompe a watchPosition () mtodo. O exemplo a seguir mostra o mtodo watchPosition (). Voc precisa de um dispositivo GPS precisa de testar isso (como o iPhone): <script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>

11.Eventos Sever-Sent
Eventos Server-Sent HTML5 possibilitam que uma pgina web para obter atualizaes de um servidor. Eventos Server-Sent - Um Caminho de mensagens Um evento Server-Sent quando uma pgina da web recebe automaticamente as atualizaes de um servidor. Isto tambm era possvel antes, mas a pgina web teria que perguntar se h atualizaes disponveis. Com server-enviados eventos, as atualizaes vm automaticamente.

79

Exemplos: Facebook /Twitter, atualizaes de preos de aes, feeds de notcias, resultados desportivos, etc Receber notificaes de eventos Server-Sent O objeto EventSource usado para receber notificaes de eventos Server-Sent: Exemplo: var source=new EventSource("demo_sse.php"); source.onmessage=function(event) { document.getElementById("result").innerHTML+=event.data + "<br>"; }; Explicao do evento: Cria um novo objeto EventSource, e especifica o URL da pgina de envio das atualizaes (neste exemplo "demo_sse.php") Cada vez que uma atualizao recebido, ocorre um evento onMessage Quando ocorre um evento onMessage, so colocados os dados recebidos no elemento com id = "result". Checar o suporte a eventos Sever-Send No exemplo acima, havia algumas linhas extras de cdigo 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.. } Cdigo Sever-Side A sintaxe do eventos Sever-Send simples 1. Defina o cabealho "Content-Type" para "text /event-stream". 2. Especifique que a pgina no deva ser armazenada em cache. 3. Defina a sada dos dados que sero enviados 4. Leve os dados de sada de volta a pgina Web. O objeto EventSource Nos exemplos anteriores, usamos o evento onMessage para obter mensagens. Mas outros eventos tambm esto disponveis: onopen - Quando uma conexo com o servidor aberta onmessage - Quando uma mensagem recebida onerror - Quando ocorre um erro

12.Reviso ortogrfica e gramatical

Os agentes de usurio podem oferecer recursos de reviso ortogrfica e gramatical, dependendo do que houver disponvel em cada plataforma. Os desenvolvedores podem controlar o comportamento dessa ferramenta atravs do atributo spellcheck. Inserir spellcheck=true num elemento faz com que a reviso esteja habilitada para ele. Voc tambm pode desabilitar a reviso para determinado elemento, inserindo spellcheck=false.

13.O elemento device

Voc pode inserir em seu HTML um elemento de acesso webcam do usurio, assim: <device type=media> Isso vai exibir uma interface solicitando ao usurio acesso a sua webcam. Se ele tiver mais de uma, tambm ser permitido que ele escolha que webcam usar. O atributo media tambm pode conter o valor fs, que vai abrir uma caixa de seleo no sistema de arquivos, permitindo ao usurio 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 prpria pgina, fazendo com que o usurio possa ver a imagem de sua prpria webcam: <!DOCTYPE html>

80

<html lang=en-US> <head> <meta charset=UTF-8 /> <title>Videochat, step 1</title> <script> function update(stream) { document.getElementsByTagName(video)[0].src = stream.url; } </script> </head> <body> <p>To start chatting, select a video camera: <device type=media onchange=update(this.data)></p> </body> </html>

13.1.Streams
Voc deve ter notado, no script acima, que a funo de update recebe um parmetro stream. Trata-se de um objeto da classe Stream, que possui uma propriedade url, que j usamos acima, e um mtodo record. O mtodo record inicia a gravao do stream e retorna um objeto StreamRecorder. Esse ltimo possui um mtodo stop, que retorna o arquivo que foi gravado.

Referncias
W3C FER K19 W3SCHOOLS; HTML Tutorial - (HTML5 Compliant); http://www.w3schools.com/html FERREIRA. Elcio, EIS. Diego ; HTML5 Curso W3C Escrittio Brasil K19; K02 - Desenvolvimento Web com HTML, CSS e JavaScript

81