Html5 Aula 3

quinta-feira, 15 de março de 12

HTML5 ESSENCIAL
Fundamentos de todo serviço na Web


EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Hipermídia
• Semântica
• Desempenho

3

O QUE VEREMOS AGORA
• Fundamentos da Web
• Documentos HTML
• Conteúdo
• Section, div, span, aside, parágrafos, cabeçalhos e rodapé
• Listas e tabelas
• Formulários (campos e atributos)
• Forms 2.0
• Tags editáveis (contenteditable)
• IFrames
• Hipermídia
• Semântica

4

TABELAS
• Estrutura para deﬁnição de dados tabulares
• Não devem ser utilizadas para layout de páginas
• Alguns atributos foram depreciados no XHTML e retirados no
HTML5 para evitar esse mau uso das tabelas
• Tabelas são estruturas simétricas onde toda linha deve conter
sempre o mesmo número de colunas
• <table> - Para a tabela
• <tr> - Para linhas (table rows)
• <td> - Para divisão em células das linhas (colunas)
• <th> - Para células que representam cabeçalhos
• <thead> - Para agrupar o cabeçalho da tabela
• <tfoot> - Para agrupar o rodapé da tabela
• <tbody> - Para agrupar o conteúdo geral da tabela

5

TABELAS

Cursos da formação WebMobile Front-End Engineer
Nome Módulo Carga-horária
HTML5 Essencial I - Content & Design 28h
Photoshop para Web I - Content & Design 28h
WebDesign com CSS3 I - Content & Design 32h
Javascript Essencial II - Web Applications 32h
jQuery & jQueryUI II - Web Applications 24h
AJAX & HTML5 II - Web Applications 32h
TOTAL 176h

6
quinta-feira, 15 de março de 12 <th>

<table>
TABELAS
<th colspan=“3”>

<thead>

{ Cursos da formação WebMobile Front-End Engineer
Nome Módulo Carga-horária
<tr>
<tr>

{
HTML5 Essencial I - Content & Design 28h <tr>
<tbody>
Photoshop para Web I - Content & Design 28h <tr>
WebDesign com CSS3 I - Content & Design 32h <tr>
Javascript Essencial II - Web Applications 32h <tr>
jQuery & jQueryUI II - Web Applications 24h <tr>
<tfoot> <tr>
AJAX & HTML5 II - Web Applications 32h
{ TOTAL 176h <tr>

<th> <td>

6
quinta-feira, 15 de março de 12 <th>

TABELAS
• Resposta do exercício:
<table>
<thead>
<tr>
<th colspan=“3”>Cursos de formação WebMobile...</th>
</tr>
<tr>
<th>Nome</th>
<th>Módulo</th>
<th>Carga-horária</th>
</tr>
</thead>
... continua

7

TABELAS
• Continuação do exercício:
<tfoot> 
<tr>
<th>TOTAL</th>
<th></th> 
<th>176h</th>
</tr>
</tfoot>

... continua

8

TABELAS
• Continuação do exercício:
<tbody>
<tr>
<th>HTML5 Essencial</th>
<td> I - Content & Design</td>
<th>28h</th>
Apenas um trecho do <tbody>
</tr> Lembrando de fechar a tag <table>
<tr>
<th>Photoshop para Web</th>
<td> I - Content & Design</td>
<th>28h</th>
</tr>
</tbody>

9

TABELAS ACESSÍVEIS
• <caption> - Para se definir o título da tabela. É em geral
exibido centralizado acima da tabela. Muito útil para
acessibilidade
• Atributo summary de <table> - Atributo não visual mas útil
para leitores de tela. Nele, você deve expor a finalidade da
tabela e eventualmente alguma particularidade se ela for uma
tabela complexa
• Atributo abbr em células <td> ou <th> - Atributo para
abreviaturas de conteúdo que podem ser mais extensos
• Atributo id de células - Atributo de uso geral para identificação
de uma tag. Útil para ser referenciado por atributos headers
• Atributo headers em células - Atributo que referencia id(s) de
alguma(s) outra(s) célula(s) que lhe servirá(ão) de cabeçalho

10

TABELAS ACESSÍVEIS
• Escopo de células de cabeçalho (<th>)
• Células (em geral de cabeçalho <th>) podem possuir o
atributo scope com um dos seguintes valores:
• row - Diz que a célula de cabeçalho fala sobre uma linha
• col - Diz que a célula de cabeçalho fala sobre uma coluna
• rowgroup - O mesmo que row, mas fala sobre <rowgroup>
• colgroup - O mesmo que col, mas fala sobre <colgroup>

11

TABELAS ACESSÍVEIS
• Agrupamento de colunas ou linhas
• Agrupamentos são feitos através das tags <colgroup> para agrupar
colunas ou <rowgroup> para agrupar linhas.
• Tags <colgroup> e <rowgroup> podem conter elementos (tags
internas) <col> ou o atributo span. Ex:
• <colgroup span=“3”></colgroup> ou
• <colgroup>
<col />
<col />
</colgroup>
• Ao criar agrupamentos de colunas/linhas, é possível adicionar estilos
a todas as células agrupadas
• A tag <col> não possui corpo, ela só é vantagem sobre o atributo
span caso haja alguma particularidade em alguma coluna.

12

13

thead e tfoot

13

14

TABELAS
• Material de estudo só sobre tabelas e
acessibilidade
• Cartilha sobre tabelas e acessibilidade do Governo
Federal - http://www.governoeletronico.gov.br/biblioteca/
arquivos/tabelas-acessiveis
• Meste Maujor, leitura obrigatória - http://www.maujor.com/
tutorial/actables.php
• W3Schools, a principal referência sobre HTML na Web -
http://www.w3schools.com/html/html_tables.asp

15

FORMULÁRIOS
• Formulários são agrupamentos de tags que servem
para obter dados do usuário
• Todo conjunto de tags deve ser agrupado pela tag <form></form>
• A maioria dos controles de entrada é escrita pela tag <input />
• É possível e recomendado agrupar campos de formulário com a tag
<fieldset></fieldset>
• Agrupamentos com <fieldset> podem conter legendas
<legend></legend>
• As tags <legend> se existirem devem ser o primeiro nó filho de <fieldset>
• Simples textos que referenciam algum campo podem ser envolvidos
na tag <label></label>
• Ao clicarmos em um texto envolto em <label> seu campo associado
ganhará foco (ou será marcado, no caso de checkboxes ou radio buttons)

16

FORMULÁRIOS
• Submeter formulários signiﬁca enviar uma requisição
ao servidor
• O método da requisição é escolhido pelo atributo method da tag
<form>
• A ausência do atributo method signiﬁca requisição GET.
• Outro método importante da tag <form> é o action, nele, deve ser
informada a URL para onde será enviada a requisição
• A ausência do action faz o browser requisitar a mesma URL utilizada para
obter a página atual

17

FORMULÁRIOS
• Exemplo Simples:
<form method="POST">
<ﬁeldset>
<legend>Campos de um formulário de logon</legend>
<label>Login <input type="text"/></label>
<label>Senha <input type="password"/></label>
<label><input type="checkbox"/> Lembrar login</label>
<input type=“button” value=“Ok” />
</ﬁeldset>
</form>

18

FORMULÁRIOS
• Tipos de entrada <input>
• text - Entradas simples de texto em única linha
• password - Entradas de texto como senhas
• Os browsers emitem pontos ou asteriscos no lugar do que foi digitado
• Os browsers não permitem copiar seu conteúdo digitado
• Mesmo assim, seu conteúdo é transmitido ao browser em texto claro
• checkbox - Campo onde só é possível marcar ou desmarcar
• radio - Campo semelhante ao checkbox mas que torna a
escolha intercambiável entre componentes com o mesmo
nome
• Ex: <input type="radio" name="sexo" value="M" /> Masculino
<input type="radio" name="sexo" value="F" /> Feminino

19

FORMULÁRIOS
• Tipos de entrada <input> como botões
• button - Exibe um botão sem ação associada
• Ex: <input type="button" name="enviar" value="OK" />
• submit - Exibe um botão que submete o formulário quando é
acionado (clicado)
• reset - Exibe um botão que “limpa” o formulário quando é
acionado
• Na verdade não “limpa” mas reinicia os campos do formulário para
seus valores originais, sem eventuais alterações do usuário
• Este botão não é enviado ao servidor quando o formulário é
submetido

20

FORMULÁRIOS
• Outros tipos de entrada <input>
• image - Funciona como um submit mas precisa carregar uma
imagem em seu atributo src.
• Ex: <input type="image" name="mapa" src="mapa.png" />
• ﬁle - Exibe um controle para escolha de algum arquivo na
máquina do usuário para ser enviado ao servidor
• Caso haja um input ﬁle no formulário
a tag form precisa ter method="POST" e
é necessário informar um novo atributo
enctype da seguinte forma:

• <form method="POST" enctype="multipart/form-data">

• hidden - Cria a referência a um campo invisível
• Útil para recuperação de informações geradas pelo próprio servidor

21

FORMULÁRIOS

22

FORMULÁRIOS
• Outros campos

22

FORMULÁRIOS
• Outros campos
• <textarea></textarea>
• Campo de texto que envolve mais de uma linha
• O atributo rows deﬁne o número de linhas

22

FORMULÁRIOS
• Outros campos
• <textarea></textarea>
• Campo de texto que envolve mais de uma linha
• O atributo rows deﬁne o número de linhas
• <select></select>
• Também chamado de combobox
• Menu suspenso de lista de valores pré-deﬁnidos
• Requer tags <option></option> para representar cada valor
• Ex.: <select name="estado" multiple rows="3">
<option value="PE">Pernambuco</option>
<option value="PB">Paraíba</option>
<option value="RN">Rio Grande do Norte</option>
<option value="AL">Alagoas</option>
</select>
• O atributo rows o transforma em listbox
• O atributo multiple permite a seleção de mais de uma opção

22

FORMULÁRIOS
• Atributos comuns em todo campo de formulário
• name - Nome do campo.
• Campos sem name não são enviados ao servidor
• value - Valor do campo.
• disabled - Desabilita o campo.
• É útil em geral para ser manipulado via Javascript e gerar efeitos de
habilitar ou desabilitar algum campo baseado em ações do usuário
• Campos desabilitados não são enviados ao servidor
• readonly - Torna o campo somente leitura.
• Semelhante ao disabled, mas envia o campo para o servidor
• required - Torna o campo requerido (HTML5)
• Faz o browser veriﬁcar o preenchimento do campo para permitir
submeter o formulário
• maxlength - Para o limite de caracteres permitidos no campo

23

FORMS 2.0
• Após muitos anos sem evoluções nessa área, o
Opera iniciou um processo de criação de novos
campos de formulário
• color - Escolha de cores
• date - Escolha de data
• datetime - Escolha de data e hora
• datetime-local - Escolha de data e hora local
• email - Escrita de email (há uma validação da entrada)
• month - Escolha de mês
• number - Exibição de números como spinner

• continua ...

24

FORMS 2.0
• Após muitos anos sem evoluções nessa área, o
Opera iniciou um processo de criação de novos
campos de formulário
• range - Exibição de paleta de slider
• search - Campo de texto para busca
• tel - Campo de texto para telefone
• time - Escolha de hora
• url - Campo de texto para URL
• week - Escolha de semana

25

FORMS 2.0
• Outra tag para formulários FORMS 2.0
• <keygen> - Tag que envia uma chave pública para o servidor
poder utilizar para cifrar o conteúdo. Só quem gera uma chave
pública detém sua chave privada capaz de decifrar
• Essa tag gera um combobox para o usuário escolher a quantidade de
bits do tamanho dessa chave

26

Html5 Aula 3

Mais conteúdo relacionado

Destaque

Semelhante a Html5 Aula 3

Mais de Jose Berardo

Último

Html5 Aula 3