HTML 5 NA PRÁTICA

AGENDA - PARTE 2
• Formulários em HTML5

• Tipos de campos

• Dados e validadores

• Desenvolvendo formulários com HTML5

• Usando novos campos

• Validando campos
 AGENDA - PARTE 2
• Trabalhando com CSS

• Classes, pseudo-classes e estilos em CSS3

• Modificação de elementos

• Desenho de páginas com CSS

• Uso de fontes

• Animações

FORMULÁRIOS EM HTML 5
 TIPO INPUT
• tel - números de telefones

• email - endereços de email

• url - endereços web

• search - campos de busca

• range - seletor numérico entre valores

arquivo aula_2_1.html
 TIPO INPUT
SECUNDÁRIO/NÃO IMPLEMENTADO

• number • month

• color • time

• datetime • date

• datetime-local • week

arquivo aula_2_2.html
 NOVOS ATRIBUTOS
• autocomplete • pattern

• autofocus • placeholder

• datalist • required

• max • step

• min • maxlenght*

• multiple

TRABALHANDO COM CSS

 CLASSES

Novos elementos suportam classes e pseudo-classes

aside - header - footer - section - article

header{
font-family: verdana;
border: 5px dotted black;
padding: 10px;
background-color: ivory;
}
 PSEUDO-CLASSES
a{
text-decoration: none;
color: #0000ff;
}

a:visited{
text-decoration: underline;
color: #ff0000;
}

NOVAS PSEUDO-CLASSES
• Active • Selection

• Focus • Lang

• Visited • Nth-child(n)

• Hover • Nth-last-child(n)

• Link • First-child

• Disabled • Last-child

• Enabled • Only-child

• Checked
 NOVIDADE
PSEUDO-ELEMENTOS
• First-letter

• First-line p::first-letter{
• Before
font-size: 60px;
}
• After

arquivo aula_2_4.html
 FONTES
em CSS3 qualquer fonte vira “família”

@font-face{
font-family: 'zapfino';
src: url('zapfino.ttf') format ('truetype');
}

p.zap{
font-family: zapfino;
}

arquivo aula_2_5.html
 SOMBRA
• elementos:

• horizontal-offset (obrigatório)

• vertical-offset (obrigatório)

• blur-radius (opcional)

• shadow-color (opcional)

text-shadow: 0.25em 0.25em 2px #999;

arquivo aula_2_6.html
 COLUNAS
• Elementos

• Número de colunas -moz-column-count: 4;

(obrigatório) -moz-column-gap: 1em;
-webkit-column-count: 4;
• Distância entre colunas -webkit-column-gap: 1em;
(obrigatório) -moz-column-rule: 1px solid #222;
-webkit-column-rule: 1px solid #222;
• Design da coluna
(opcional)

arquivo aula_2_7.html
 GRADIENTES

-webkit-gradient(linear, left top, left bottom,

from(red), to(yellow), color-stop(0.5, orange),
color-stop(0.5, orange))

arquivo aula_2_8.html
 ROUNDED CORNERS

• Elementos
style=“-moz-border-radius: 10px;-
• -moz-border-radius webkit- border-radius: 10px;border:
4px solid #FF0000;”

• border

arquivo aula_2_9.html
 EXERCÍCIO

construir uma página contendo

• Fundo em gradiente

• Formulário de inscrição validado

•5 (cinco) artigos

•3 colunas

• Área de navegação

• Ao menos 2 (duas) variações de fontes