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).