UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
Programação para Aplicações WEB
Profa. Semíramis Assis
2015.2
Introdução ao HTML

Formulários <form>





Objetivo de cadastramento de informações.
Possui botões de submissão/reset dos dados ou genérico.
Pode utilizar validações através de scripts.
Utiliza tags de input de dados
Atributos:




Name – Identificação do formulário e seus elementos.
Action – Ação a ser executada quando os dados forem
submetidos.
Method – Método de envio dos dados. Get – Exibindo os dados
na barra de endereços; Post – Escondendo os dados na barra
de endereço.
Enctype – Tipo de dados existentes no formulário. Text/plain –
Apenas campos texto. Multipart/form-data – Existem arquivos a
serem submetidos.
Introdução ao HTML

Textos:





<input type=“text”> - Campo de texto simples.
<textarea> - Campo de texto com múltiplas linhas.
<input type=“password”> - Campo para entrada de senhas.
<input type=“hidden”> - Campos com valores escondidos
do usuário.
Seleção:


<input type=“radio”> - Pode selecionar apenas uma opção
por vez. Conhecido como Radio Button.
<input type=“checkbox”> - Pode checar mais de uma
opção. Conhecido como CheckBox.
Introdução ao HTML
• Exemplo de formulário simples:
• Exercício! Criar um formulário com dois campos de texto simples, dois
botões (um Submit e um Reset). Em seguida, criar um textarea com label
‘Descrição’ e um campo para entrada de senhas.
Introdução ao HTML

Quais os elementos utilizados para construir o
formulário abaixo? Exercício! Reproduzir o
formulário abaixo, da mesma forma exibida
na figura.
Introdução ao HTML

Novos inputs inseridos no HTML 5:







<input type=“color”> - Disponibiliza uma paleta de cores
para seleção;
<input type=“date”> - Disponibiliza um calendário;
<input type=“datetime”> - Calendário com hora e fuso
horário;
<input type=“datetime-local”> - Calendário com hora sem
fuso horário;
<input type=“email”> - Entrada de e-mail. Faz validação em
caso de e-mails inválidos.
<input type=“month”> - Entrada de mês.
<input type=“number”> - Entrada numérica.
Introdução ao HTML
• Utilização da tag VIDEO inserida com o HTML 5:
Atributos:
• Autoplay
• Controls
• Height
• Width
• Loop
• Muted
• Poster
• Preload
• Src
• Função javascript:
Funções:
• play()
• pause()
• load()
• canPlayType()
• addTextTrack()
Introdução ao HTML


Exercício! Testar os novos controles do
HTML5 criando um input cor e setando a cor
selecionada em um texto de um parágrafo.
Criar uma tag vídeo com os botões
AUMENTAR e LOOP. Ao clicar no Aumentar, o
vídeo deverá aumentar de tamanho e ao
clicar em Loop, deverá entrar em repetição
contínua ou sair da repetição contínua.
Introdução ao HTML

Outros novos inputs do HTML 5:






Range – Campos numéricos que contém uma faixa
de valores;
Search – Campo para pesquisa;
Tel – Entrada de números de telefones;
Time – Entrada de tempo (sem fuso horário);
Url – Endereço url;
Week – Seleciona semana e ano;
Introdução ao HTML

Exercício! Criar um formulário que
utilize os campos de e-mail, url e dois
campos texto (nome e descrição).
Colocar dois botões (reset e submit).
Introdução ao HTML

Combo


Botões




<select> - Apresenta uma lista, em forma de ComboBox, de todas
as opções informadas. Pode ser de seleção simples ou múltipla.
<input type=“button”> - Botões que podem realizar ações
determinadas pelo desenvolvedor ( funções javascript).
<input type=“submit”> - Botão para submissão dos dados. Ao
clicar, a página informada no atributo action do formulário será
invocada e os dados enviados.
<input type=“reset”> - Botão para resetar (limpar) o formulário.
Arquivos

<input type=“file”> - Define que um arquivo poderá ser
selecionado.
Introdução ao HTML

Tags para campos de texto:









Maxlength – Limita o tamanho máximo de caracteres.
Width – Determina o comprimento do campo.
Disabled – Determina se o campo será exibido desabilitado
ou não.
Readonly – Informa se o campo será somente leitura.
Size – Determina o tamanho do campo em caracteres.
Style – Determina a estilização do campo (css a ser
utilizado).
Value – Informa o valor padrão do campo, que será
carregado com ele ou exibido por ele.
Name – Nome de identificação do campo.
ID – Identificador do campo, pode ter o mesmo valor do
nome, não obrigatório.
Introdução ao HTML

Algumas novas API’s introduzidas com o
HTML 5:


Geolocalização – Retorna latitude/longitude
informados pelo browser;
Drag/drop – Capacidade de arrastar
objetos de um lado a outro da tela.
Introdução ao HTML
• Exemplo simples de geolocalização:
Introdução ao HTML
• Exibindo localização no mapa:
• Tratando erros:
Introdução ao HTML
• Propriedades do objeto Position:
Introdução ao HTML

Exercício! Fazer uma função que retorne
a altitude das coordenadas, após
clicar em um botão, exibindo na tela.
Introdução ao HTML

Exercício! Criar um formulário que
contenha um campo para submissão de
arquivos. Qual o tipo do formulário para
este caso?
Introdução ao HTML

É possível enviar dados de formulários
diretamente para um email! Como?

Definindo a Action como um tipo Mailto!
Introdução ao HTML

Fieldsets


Agrupam informações (campos) em regiões delimitadas por linhas.
Atributos:



Name – Nome para o fieldset.
Form – Formulários aos quais o fieldset pertence.
Disabled – Indica que o grupo de elementos pertencentes ao fieldset
será exibido com o estilo desabilitado.
Introdução ao CSS


Folha de estilos que permite definir
características como: largura,
comprimento, cor, plano de fundo,
figuras de fundo, margens e outras
variáveis visuais em campos, labels,
tabelas, botões de uma página HTML.
Nem todas as propriedades são
suportadas por todos os navegadores.
Introdução ao CSS

Aplica-se um estilo a um campo através do
atributo Class da linha, coluna ou elemento.
Exemplo:
Ou
Introdução ao CSS

Exemplo de um arquivo básico css:
Atenção nas
separações
por ‘;’ das
linhas!
Introdução ao CSS

Resultado da folha de estilo apresentada:
Introdução ao CSS

Alguns atributos:

Formatação de texto:






Font – Define todas as propriedades da fonte em uma
única linha.
Font-family – Define a família de fonte a ser utilizada.
Fontes são aplicadas de acordo com precedência de
inserção e presença da fonte no computador do usuário.
Font-size – Define tamanho da fonte.
Font-weight – Define quão fina ou larga a fonte irá
aparecer (negrito).
Font-style – Define o estilo da fonte (itálico,normal ou
oblíquo).
Visibility – Define se o conteúdo será visível, collapse,
escondido ou herdado do elemento pai.
Introdução ao CSS



Exercício! Modificar a tag <p> do html
para apresentar textos com cor de
fundo amarela (yellow) e em negrito
(bold).
Modificar a cor de fundo da página para
laranja (orange).
Criar um item de nome ‘label’ e aplicar
em uma linha de uma tabela.
Introdução ao CSS

Tabelas:







Border-style – Define o estilo da borda
(dotted,solid, double, groove,inset,outset,dashed).
Alguns efeitos dependem da cor da borda (inset e
outset).
Border-width – Largura da borda.
Border-color – Cor da borda.
Border-top-style – Estilo da borda superior.
Border-right-style – Estilo da borda direita.
Border-bottom-style – Estilo da borda inferior.
Border-left-style - Estilo da borda esquerda.
Introdução ao CSS

Exemplo de
definição de todas
bordas em tabela
(figura de cima) e,
logo abaixo, código
utilizado:
Introdução ao CSS

Exercício! Fazer uma tabela com bordas
estilizadas, seguindo o exemplo:
Introdução ao CSS

Bibliografia:



http://www.w3schools.com/css
SILVA, M.S. Criando sites com HTML:
sites de alta qualidade com html e css.
Novatec.
http://msdn.microsoft.com/ptbr/library/dn144998.aspx - Geolocalização
(Microsoft).