O documento descreve as principais tags e atributos HTML para criação de páginas web, incluindo tags para links, imagens, formulários, áudio, vídeo e novas funcionalidades do HTML5. Explica como cada tag funciona e quais atributos podem ser usados para personalizar cada elemento.

2. • Atributos de Tags.
• Hiperlinks.
• Imagens.
• Formulários.
• Multimídia:
– Áudio.
– Vídeo.

3. • Ver apêndice: “Lista de Atributos de Tags”
• Para que servem?
– Determinam propriedades das tags.
• Todas as tags tem os mesmos atributos?
– Não, tags podem ter atributos característicos.
• Exemplo: tag img, tem o atributo src.

4. • Definem uma ligação entre dois documentos
HTML ou outro tipo de arquivo:
– Marcado pela tag a com os atributos:
• href, define a URL de ligação do hiperlink.
• title, define uma descrição sobre o hiperlink quando
o mouse é posicionado sobre.
• target, define em qual janela o endereço
especificado por href irá abrir.
<a href=“www.tiago.blog.br” title=“Blog do Tiago”
target=“_blank”>Abrir o blog</a>

5. • Exibe uma imagem no documento HTML.
– Nota: A imagem não é incorporada. A tag img apenas
aponta para uma imagem que existe em um dado
diretório.
– Atributos utilizados:
• src define o caminho, nome e extensão da imagem.
• alt define um texto alterativo caso a imagem não abra.
• width e height definem, respectivamente largura e
altura.
<img src=“imagens/foto.jpg” alt=“Minha Foto”
width=“75” height=“150” />

6. • Definição:
– Formulários HTML são usados ​​para transmitir
dados para um servidor.
– Um formulário pode conter elementos de entrada,
como campos de texto, caixas de seleção, botões
de rádio, apresentar botões e mais. Um formulário
também pode conter listas de seleção,
textarea, fieldset, legend, e elementos
de rotulagem.

7. • Como construir formulários?
– Tag <form> que recebe os atributos:
Atributo Valor Descrição
action URL de processamento do formulário. Especifica qual é o arquivo, geralmente do
lado do servidor que irá processar o
formulário.
accept-charset character_set: por exempo: UTF-8 Especifica as codificações de caracteres, que
são para ser usados ​​para o envio de
formulário
enctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Especifica como o formulário de dados
devem ser codificados quando enviá-lo para
o servidor (apenas para o método = "post")
method get
post
Especifica o método HTTP para o envio de
formulário de dados
name “meu_formulario” Específica o nome do formulário.

8. • Tag form outros atributos:
– Atributos para trabalhar com CSS.
– Atributos para trabalhar com eventos.
– Definir em qual janela o form vai executar.
– Outros atributos menos importantes:
• xml:lang
• lang
• dir
• title

9. • Definida a tag form e seus atributos, pode-se
colocar os elementos de entrada – input – do
formulário:
– Tags para definição desses elementos:
• <input>
• <textarea>
• <button>
• <select>
• <option>
• <optgroup>

10. • Tag <input/>
– Define cada “forma” do elemento pelo valor do
atributo type:
• button
• checkbox
• file
• hidden
• image
• password
• radio
• submit
• text

11. • Tag <input type=“button” />
– Define um botão dentro do formulário:

12. • Tag <input type=“checkbox” />
– Define “caixas de marcação” dentro do formulário,
onde todas as caixas de um grupo devem ter o
mesmo nome:

13. • Tag <input type=“file” />
– Define um campo e um botão para o usuário
selecionar um arquivo no seu computador: usado
pata upload de arquivos:

14. • Tag <input type=“hidden” />
– Campo “escondido” dentro do formulário, usado
para guardar informações não visíveis ao usuário:

15. • Tag <input type=“image” />
– Usado para que uma imagem possa ter uma
função no formulário, na maioria das vezes como
um botão:

16. • Tag <input type=“password” />
– Campo de senha, onde a senha digitada não
aparece de fato:

17. • Tag <input type=“radio” />
– Parecido com o checkbox, no entanto somente
é possível marcar uma opção:

18. • Tag <input type=“sumit” />
– Acrescenta um botão no formulário que irá
submete-lo ao servidor:

19. • Tag <input type=“text” />
– Campo de “texto comum” usado para todo o tipo
de entrada:

20. • Outras tags de formulário:
– button
– select
– option
– textarea
– optgroup

21. • Tag button que define um botão:
– É mais semântica!
– Define-se o tipo de botão pelo atributo type:
• submit
• button
• reset
– Pode definir valor também: atributo value.
– Pode-se colocar uma imagem como botão, basta a
imagem ser filha.
– Nota: a W3C recomenda que se use input para criar
botões.

22. • Como ficaria um formulário com os botões
marcados pela tag button:

23. • Tag textarea, utilizada quando se precisar
colocar um texto maior no formulário:

24. • Tags: select, option e optgroup:
– Lista de opções pré definidas, que podem ser
agrupadas ou não:

25. • Tags: select, option e optgroup:
– Rederização do código anterior:

26. • Tags para organização do formulário:
– fieldset
• Organiza um grupo de elementos, de preferência
dentro da tag form.
– legend
• Coloca uma descrição no fieldset
– label
• Coloca uma descrição para cada elemento do
formulário.
• Veja arquivos de exemplo dos formulários.

28. • Melhoramento da tag input e form:
– Novos valores possíveis de type.
– Novos atributos.
– Tratamento específico de valores.
• Novos elementos – tags – para formulários:
– datalist
– keygen
– output
• Implantação de validações na marcação.

29. Novos valores para o atributo type da tag input:
• color
• email
• number
• range
• search
• tel
• url
• date
• datetime
• datetime-local
• month
• time
• week

30. • Tag <input type=“color” />
– Botão que quando clicado abre uma janela para
seleção de cor. Quando enviado envia em a cor no
padrão hexadecimal.

31. • Tag <input type=“search” />
– Campo para formulários de busca.

32. • Tag <input type=“range” />
– Campo de ajuste de uma determinada escala,
sendo possível determinar previamente valores
mínimos e máximos.

33. • Tag <input type=“date” />
– Quando o campo tem foco, abre um calendário.

34. • Tag <input type=“email” />
– Campo para endereços de e-mail, só aceitando
valores válidos.

35. Novos atributos para a tag input e alguns da form
• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height e width
• list
• min ou max
• multiple
• pattern (regexp)
• placeholder
• required
• step

36. • Tag <input type=“text” placeholder=“Digite Aqui” />
– Valor “default” – padrão – de um determinado
campo, serve de descrição para o preenchimento.

37. • Tag <input type=“text” required=“required” />
– Obriga o preenchimento do campo para que o
formulário possa ser submetido.

38. • Tag <input type=“text” autocomplete=“off” />
• Tag <form method=“post” autocomplete=“on” />
– Pode ser usado nas duas tags, sendo que habilita
(ou não) o auto-completar em campos de
formulário com base em valores inseridos
anteriormente.
• Tag <input type=“text” autofocus=“autofocus” />
– Define que assim que o documento é aberto no
navegador, ele recebe o foco do cursor do mouse

39. • Tag <input type=“text” form=“meu_formulario” />
– Utiliza-se quando o elemento não é filho direto da tag
form, ou seja, está fora do “abre e fecha” da tag.
– Dica: Aplica-se as outras tags de formulário.
– Dica: Pode-se atribuir a mais de um formulário:
• <input type=“text” form=“formulario1 formulario2” />
• Tag <input type=“submit” formaction=“processar.php” />
– Substitui o atributo action da tag form
• Tag <input type=“submit” formmethod=“get” />
– Substitui o atributo method da tag form

40. • Tags:
– <form action=“processar.jsp” formnovalidade=“formnovalidade” />
– <input type=“submit” formnovalidade=“formnovalidade” />
• Diz que um formulário não é validado ao ser
submetido. Quando setado no input, sobreescreve
em form
• Tag <input type=“submit” formenctype=“multipart/form-data” />
– Diz ao servidor qual é o enctype que o
formulário está sendo enviado, válido somente
para o método de envio post. Quando setado no
botão, substitui o valor enctype da tag form

41. • Tag <input type=“submit” formtarget=“_blank” />
– Define em qual janela será exibida a resposta do
formulário. Se definida no botão sobreescreve o valor
de target na tag form
• Tag <input type=“number” min=“1” max=”10” />
– Específica valores de mínimo e máximo para um
campo do tipo: number, range, date, datetime,
datetime-local, month, time e week
• Dica: Usando em campos do tipo date e afins, use as datas
no formato: 22-09-2012.

42. • Tag <input type=“image” height=“18” width=“40” />
– Usado somente para type igual a image, sendo
que específica, respectivamente a altura e largura
da imagem.
• Tag <input type=“text” pattern=“[A-Z]{2}” />
– Define uma expressão regular que define como o
valor do campo deve ser, no exemplo, quero as
siglas dos estados brasileiros, em maiúsculo : “SP”.
Este atributo pode ser aplicado a type igual a:
text, search, url, tel, email e password

43. • Tag <input type=“range” step=“3” />
– Define o “tamanho do passo” do valor de um elemento,
pode ser usado com os atributos mim e max. Por exemplo,
valores avançam no exemplo de 3 em 3, sendo que este
atributo pode ser usados nos type iguais a number,
range, date, datetime, datetime-local, month,
time e week
• Tag <input type=“text” multiple=“multiple” />
– Define que um input (para os type email e file
apenas) podem receber mais de um valor, no caso
selecionar mais de um arquivo, ou mais de um endereço
de email no campo.

44. • Tag <input type=“text” list=“lista_navegadores” />
– Referencia um elemento de lista criado pela tag
datalist. Funciona como uma espécie de
“auto-complete”, onde quando o campo recebe o
foco, ele exite a lista de opções.

45. • Novas tags de formulário adicionas ao grupo
visto anteriormente:
– datalist
– keygen
– output

46. • Tag <datalist>:
– Prove um container abrigando os valores que
serão exibidos como “autocomplete”.

47. • Tag <keygen>:
– Prove um meio de autenticação entre cliente e servidor.
Gerando – no momento da submissão - um par de chaves,
uma privada (armazenada no cliente) e uma pública
(armazenada no servidor). A junção das suas chaves dá (ou
não) autenticação do cliente no servidor.
<form action=“gerar_chave.jsp" method="get">
Usuário: <input type="text" name=“usuario" />
Chave: <keygen name=“seguranca" />
<input type="submit" />
</form>

48. • Tag <output name=“x" for="a b"></output>
– Funciona como um container para saída de um
cálculo, onde o atributo for contem o valor do
atributo name de dois campos.
<input type="number" name="a" value="10">
<input type="number" name="b" value="50">
<output name="x" for="a b"></output>

49. • Nova implementação, mais específica para
executar áudio e vídeo:
– Implementação nativa no navegador:
• Vantagem: ganho de processamento.
– Como era feito antes?
• Uso de plugins para os navegadores.
• Uso das tags <embed> e <object>
– Problemas de “ontem e hoje”:
• Suporte do formato das mídias não é universal.

50. • Tag <audio>
– Serve de container para execução áudios no
navegador.
– Atributos para manipulação e configuração dos
aúdios:
• controls, loop, preload, autoplay
– Tag <source> para especificar onde está o
arquivo:
• src
• type

51. Código e Renderização:

52. • Tag <video>
– Serve de container para executar vídeos no
navegador.
– Atributos para manipulação e configuração dos
vídeos:
• controls, width, height
– Tag <source> para especificar onde está o
arquivo:
• src
• type

53. Código e Renderização:

54. • Ainda existem outros elementos HTML 5 que
iremos estudar, no entanto alguns deles
sozinhos não representam função específica:
– Exemplo: <canvas>.
• Outras tags como <iframe>, <object> e
<embed> veremos quando estudarmos
JavaScipt, quando teremos conhecimento para
fazer algo interessante com elas.

55. www.tiago.blog.br
tiago@tiago.blog.br