Livro HTML 5 um mero resumo

  • Published on
    29-Nov-2015

  • View
    145

  • Download
    47

DESCRIPTION

Livro/resumo sobre notas de estudo da tecnologia HTM5

Transcript

  • HML5

    Um mero resumo

    Jonas Mayer

    verso 1.0

    1

  • 2

  • Sumrio1.Introduo.............................................................................................................................................................7

    1.1.O que HTML? ...........................................................................................................................................72.Estrutura bsica....................................................................................................................................................7

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

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

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

    2.4.Formatao...................................................................................................................................................92.5.Tag LINK......................................................................................................................................................92.6.Pargrafos.....................................................................................................................................................92.7.Cabealho...................................................................................................................................................102.8.Links...........................................................................................................................................................102.9.ncoras.......................................................................................................................................................112.10.Imagens.....................................................................................................................................................112.11.Tabelas......................................................................................................................................................122.12.Listas.........................................................................................................................................................132.13. Blocos......................................................................................................................................................13

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

    2.14.Layouts.....................................................................................................................................................142.15.Formulrios...............................................................................................................................................15

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

    2.16.O elemento iframe....................................................................................................................................212.17. Entidades..................................................................................................................................................212.18.Codificao da URL.................................................................................................................................222.19.O elemento canvas....................................................................................................................................222.20.SVG .........................................................................................................................................................232.21.O elemento Video.....................................................................................................................................242.22.O elemento Audio ....................................................................................................................................24

    3. Modelos de contedo.........................................................................................................................................253.1.Categorias...................................................................................................................................................25Metadata content...............................................................................................................................................26

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

    3

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

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

    4

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

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

    3.3.1.Atributos de eventos de janela............................................................................................................663.3.2.Eventos de formulrios.......................................................................................................................663.3.3.Evento do teclado................................................................................................................................673.3.4.Eventos de Mouse...............................................................................................................................673.3.5.Eventos de mdia.................................................................................................................................68

    4.Validao de formulrios....................................................................................................................................704.1.pattern.........................................................................................................................................................704.2.novalidate e formnovalidate.......................................................................................................................704.3.Custom validators.......................................................................................................................................71

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

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

    9.1.dragstart......................................................................................................................................................8110.Geolocalizao.................................................................................................................................................8211.Eventos Sever-Sent...........................................................................................................................................8412.Reviso ortogrfica e gramatical......................................................................................................................8513.O elemento device............................................................................................................................................85

    13.1.Streams.....................................................................................................................................................85Referncias............................................................................................................................................................86

    5

  • 6

  • 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 bsicaUm 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:

    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:

    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 HTMLO cdigo HTML uma estrutura em rvore. O elemento principal ou n raiz sempre a tag 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: , , , , , , e .

    7

  • 2.3.1.O elemento titleA tag define o ttulo do documento.O elemento necessria em todos os documentos HTML /XHTML.

    O elemento : 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:

    Ttulo do documento

    O contedo do documento......

    2.3.2.O elemento baseA tag especifica o URL base /target para todas as URLs relativas em uma pgina:

    2.3.3.O elemento linkA tag define a relao entre um documento e um recurso externo.

    A tag mais utilizado para vincular a folhas de estilo:

    2.3.4.O elemento styleA tag usada para definir informaes de estilo para um documento HTML.Dentro do elemento que especificado como elementos HTML devem ser processados em um navegador:

    body {background-color:yellow}p {color:blue}

    2.3.5.O elemento metaO 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.

    8

  • 2.3.5.1.Metatag CharsetResponsvel por informar o encoding do documento.

    2.3.6.O elemento scriptA tag script usada para definir um script do lado cliente, como um JavaScript.

    2.4.FormataoHTML utiliza tags como e para a sada de formatao, como negrito ou itlico.

    Tags de formatao de texto - Define o texto em negrito - Define texto enfatizado - Define texto itlico - Define o texto como pequeno - Define o texto como grande - Define texto subscrito - Define o texto sobrescrito - Define o texto inserido - Define o texto excludo

    2.5.Tag LINKH 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:

    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:

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

    Exemplo de quebra de linha em um pargrafo 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 .

    J este pargrafo demonstra a qubra de linha forada .Percebeu ?

    9

  • 2.7.CabealhoUma 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:

    Exemplo de cabealhos Ttulo 1 Ttulo 2 Ttulo 3 Ttulo 4 Ttulo 5 Ttulo 6

    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.LinksPara 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 elementopode conter mais do que apenas texto, ele pode conter outros elementos como imagens.

    Veja o exemplo:

    Exemplo de uso da tag a Exemplo de link relativo Outro exemplo de link relativo Exemplo de link absoluto

    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.

    Exemplo de uso da tag a com o atributo target Abre em outra janela /aba Abre na mesma janela Abre na mesma janela

    2.9.ncorasAlm 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 #.

    Exemplo de uso da tag a como ncora Veja mais informaes ncora em outra pgina ... Mais informaes ...

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

    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.

    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.TabelasTabelas so definidas pela tag .

    11

  • Uma tabela dividida em linhas(com a tag ) , e cada linha dividisa em clulas com dados(com a tag).A tag td pode conter texto, links, imagens, listas, formulrios tabelas e outros.

    row 1, cell 1row 1, cell 2

    row 2, cell 1row 2, cell 2

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

    CabealhosInformaes de cabealho em uma tabela so definidas com a tag .

    Todos os principais navegadores exibir o texto no elemento como negrito e centralizado.

    Header 1Header 2

    row 1, cell 1row 1, cell 2

    row 2, cell 1row 2, cell 2

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

    Coffee- black hot drinkMilk- white cold drink

    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.

    CoffeeMilk

    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.

    CoffeeMilk

    2.13. BlocosElementos HTML podem ser agrupados com e .

    2.13.1.O elemento divO elemento HTML um elemento de bloco de nvel que pode ser utilizado como um recipiente para o agrupamento de

    outros elementos HTML. O elemento 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 pode ser usado para definir atributos de estilo de grandes blocos de contedo.Outro uso comum do elemento , 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 . O propsito do elemento exibir dados tabulares.

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

    2.14.LayoutsLayout de pgina web muito importante para fazer o seu site com bom aspecto.

    Layouts de siteA maioria dos sites tm colocado o seu contedo em vrias colunas (formatado como uma revista ou jornal).

    Vrias colunas so criadas usando os elementos ou . 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 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

  • Main Title of Web Page

    MenuHTMLCSSJavaScript

    Content goes here

    Copyright W3Schools.com

    Dicas teisDica: 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.FormulriosFormulrios 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 usada para criar um formulrio HTML:

    .input elements.

    2.15.1.A tag inputO elemento 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.

    button :

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

    I have a bikeI have a car

    14

  • color - Define um seletor de coresSelect your favorite color:

    date - Define um controle de data (ano, ms e dia (sem tempo))Birthday:

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

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

    email - Define um campo para um endereo de e-mailE-mail:

    file - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um arquivo no computador do usurio. file :

    hidden - cria um elemento que no fica visvel para o usurio, porm pode conter um valor que ser enviado pelo formulrio. hidden :

    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.

    image :

    month - Define um controle de ms e ano (sem fuso horrio)Birthday (month and year):

    number - Define um campo para digitar um nmero Quantity (between 1 and 5):

    password - cria uma caixa de texto de uma linha escondendo os caracteres digitados.

    Password:

    radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name possvel que secrie um grupo de radios no qual apenas um radio seja "checado".

    MaleFemale

    range - Define um controle para a entrada de um nmero cujo valor exato no importante (como um controle deslizante)

    15

  • reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio. Atravs do atributo value definimos o texto do boto.

    reset :

    search - Define um campo texto para inserir uma string de pesquisaSearch Google:

    submit - cria um boto para o envio do formulrio. Atravs do atributo value definimos o texto do boto.

    Username:

    tel - Define um campo para digitar um nmero de telefoneTelephone:

    text - cria uma caixa de texto de uma linha.

    First name: Last name:

    time - Define um controle de entrada de tempo (sem fuso horrio)Select a time:

    url - Define um campo para digitar uma URLAdd your homepage:

    week - Define um controle de semana e ano (sem fuso horrio)Select a week:

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

    2.15.2.A tag selectA tag select permite ao 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.

    Exemplo de uso da tag select Selecione uma cidade : So Paulo Rio de Janeiro Porto Alegre Curitiba

    16

  • Selecione uma ou mais categorias de produtos ( mantenha a tecla " control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ): Desktops Notebooks Tablets Celulares

    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:

    Exemplo de uso da tag select Selecione uma cidade : So Paulo Rio de Janeiro Porto Alegre Curitiba

    Selecione uma ou mais categorias de produtos ( mantenha a tecla " control " (ou " command " no Mac ) pressionada para escolher mais de uma categoria ): Desktops Notebooks Tablets Celulares

    2.15.3.A tag datalistO elemento especifica uma lista de opes pr-definidas para um elemento .

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

    17

  • Use o atributo do elemento da lista para vincul-lo em conjunto com um elemento .

    2.15.4.A tag keygenA finalidade do elemento o de proporcionar uma forma segura de autenticar os utilizadores.A tag 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.

    Username: Encryption:

    2.15.5.A tag outputO elemento representa o resultado de um clculo (como um realizado por um script).0100 +=

    2.15.6.A tag textareaA 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.

    Exemplo de uso da tag textarea textarea :

    2.15.7.A tag labelEm 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:

    Exemplo de uso da tag label Nome :

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

    2.15.8.A tag formA tag form ir definir, de fato, o nosso 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 POSTO 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 POSTOs 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 POSTObserve que a string de consulta enviado no corpo da mensagem HTTP de um pedido POST. POST /test/demo_form.asp HTTP/1.1Host: w3schools.comname1=value1&name2=value2

    Algumas notas sobre o 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 POST

    boto voltar/recarregar inofensivo Os dados sero re-submetidos (o browser deve alertar o usurio de que os dados esto prestes a ser re-submetidos)

    Favoritar SIM NO

    Armazenar em cache SIM NO

    Tipos de codificao aplicao/x-www-form-urlcodificado aplicao/x-www-form-urlcodificado ou multipart/form-data . Use a codificao multipart para dados binarios.

    Histrico Parmetros permanecem no histrico do navegador

    Os parmetros no so salvos no histrico do navegador

    Restrio de tamanho de dados Sim, ao enviar dados, o mtodo GET adiciona os dados URL, e o comprimentode um URL limitado (comprimento mximo de URL de 2048 caracteres)

    Sem restrio

    Restrio de tipos de dados Somente caracteres ASCII Sem restries. Os dados binrios tambm so permitido

    Segurana 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!

    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

    Visibilidade Dados ficam visveis para todos na URL Os dados no so exibidos na URL

    Outros mtodos HTMLA tabela a seguir lista alguns outros mtodos de solicitao HTTP:HEAD - Mesmo que GET, mas retorna apenas cabealhos HTTP e nenhum corpo do documentoPUT - Envia uma representao da URI especificadaDELETE - Exclui o recurso especificadoOPTIONS - Retorna os mtodos HTTP que o servidor suportaCONNECT - Converte uma solicitao de conexo em uma traspatente TCP/IP tunnel.

    2.16.O elemento iframeUm iframe usado para exibir uma pgina web dentro de uma pgina web.Sintaxe para adicionar um 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%").

    Removendo a bordaO atributo frameborder especifica se deve ou no exibir uma borda em torno do iframe.Definir o valor do atributo como "0" remove a borda:

    Usar iframe como destino para um linkO atributo de destino de um link deve se referir ao atributo nome do iframe:

    W3Schools.com

    20

  • 2.17. EntidadesCaracteres reservados em HTML deve ser substitudo por entidades de caracteres.Alguns caracteres so reservados em HTML.No possvel usar sinais de menor 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;ORentity_number;

    Para exibir um sinal de menor que devemos escrever: < ou