Post on 07-Apr-2016
UCSal – Tecnologia em Análise e Desenvolvimento de Sistemas
Programação para Aplicações WEBProfa. 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
<select> - Apresenta uma lista, em forma de ComboBox, de todas as opções informadas. Pode ser de seleção simples ou múltipla.
Botões <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/pt-br/library/dn144998.aspx - Geolocalização (Microsoft).