Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.

Programação para WebUnidade 2 – Revisão de HTML, CSS e FormuláriosProf.: Henrique Santos

HTML - Revisão

Páginas HTML

Páginas HTML são documentos de texto simples que contém Tags HTML

Tags HTML são palavras-chave cercadas por < > (case-insensitive, mas procure usar minúsuclas)

Tags HTML vêm em pares•Exemplo: <b> Esse texto estaria em

negrito </b> O propósito de um navegador web é

interpretar documentos HTML e exibi-los como páginas Web.

Princípios básicos de HTML

TODO documento HTML deve estar contido no par de tags <html> </html>

TODO conteúdo não exibido da página (como definições, importações, criação de variáveis e estilos, etc) deve estar contido no par de tags <head> </head>

TODO conteúdo da página que será exibida deve estar contida no par de tags <body> </body>

Exemplo de Estrutura

<html>

<head>



</head>

<body>



</body>

</html>

Comentários

Comentários em HTML são usando uma tag especial.

Inicia-se um comentário com  Tudo que estiver entre o começo e fim do

comentário não serão processados (inclusive outras tags HTML)

Exemplo:

Títulos de Texto

Títulos dentro do texto são definidos pelas Tags <h1> a <h6>

Use as tags de títulos para títulos apenas. Não as utilize para fazer textos grandes ou bonitos.

Sites de Busca utilizam das tags de títulos para melhor armazenar e estruturar o conteúdo de páginas Web.

Parágrafos e Quebras

Parágrafos são definidos usando as tags <p></p>

Quebras de linhas são feitas usando a tag vazia <br/>

Quebra de Linha

Para fazer uma quebra de linha (sem um novo parágrafo) basta usar as tags <br></br>

Esta é uma tag vazia, não existe texto ou outras tags entre elas.

Tags vazias

Algumas tags não possuem texto ou outras tags dentro delas.

Para facilitar a escrita dessas tags, pode-se usar a mesma tag como abertura e fechamento colocando a barra / antes do >.

Exemplo: Usando as tags de quebra da antiga forma <br></br>

E da forma mais prática <br />

Atributos de Tags

Os atributos variam conforme cada Tag mas os seguintes atributos são disponíveis para TODAS Tags:

• class – a classe CSS do elemento• id – um identificador para o elemento (usado

para javascript e outros scripts de página)• style – uma definição de estilo CSS no

próprio elemento• title – o tooltip do elemento (exibido quando

o mouse fica sobre o elemento)

Links

Um link é feito usando a tag <a> A endereço do link é definido no atributo

href Exemplo: <p> Se tiver dúvidas visite a página da <a href="http://www.w3.org"> World Wide Web Consortium (W3C) </a> ou envie um email ao <a href="mailto:[email protected]">professor</a> </p>

Imagens

Para colocar imagens deve-se usar a tag <img>

A tag <img> é uma tag VAZIA O atributo src define o arquivo e local

onde a imagem está Essa tag possui outros atributos

opcionais como: width (largura), height (altura), alt (texto exibido se a imagem não carregar).

Atenção

Os atributos ‘color’ e tags como ‘font’ fazem parte do HTML antigo (versão 3.2).

Embora continuem sendo suportados, bons projetistas evitam utiliza-las para tornar suas páginas compatíveis com o HTML versão 4 ou superior.

•Esses tipos de estilo são de responsabilidade do CSS.

CSS - Revisão

Introdução

Em HTML 4.0, toda formatação deve ser removida do documento HTML e armazenada em um arquivo CSS separado.

O arquivo CSS permite a alteração da aparência e layout de todas páginas em um Web site, apenas editando um arquivo.

Todos Navegadores suportam CSS atualmente

Sintaxe CSS

A sintaxe básica de CSS seria:propriedade:valor

Por exemplo mudar a cor usa-se a propriedade color, o valor seria o código RGB da cor, então para mudar a cor para vermelho usando CSS seria:color:#FF0000

Se houver mais de uma propriedade use ; para separá-los:propriedade1:valor1;propriedade2:valor2

Atributo Style

Toda Tag HTML possui o atributo style

Este atributo pode ser usado para atribuir estilos CSS ao elemento

Exemplo:<p style="color:#0000FF"> Este parágrafo é azul. </p>

<p style="color:#00FF00;text-align:center"> Já este é verde centralizado. </p>

CSS Interno

É muito chato ficar formatando cada elemento individualmente usando o atributo style

Por isso é possível declarar ‘classes de estilos’ no documento HTML para usar nos elementos

Sempre declare esses estilos dentro da tag <head>

CSS Interno

A declaração de estilo começa com a tag <style type="text/css"> e termina com </style>

Exemplo:<style type="text/css">.azul {color:#0000FF}.verde_grande { color:#00FF00; font-size:2.5em }</style>

CSS Interno

Para usar as classes de estilo declaradas no começo do texto basta usar o atributo class que todo elemento HTML possui.

Exemplo: <p class="azul"> Este parágrafo é azul </p> <p class="verde_grande"> Enquanto esse é maior e verde. </p>

Mudando o padrão dos Elementos

CSS Interno facilita muito a vida mas e se quiser mudar o comportamento de todos elementos de um tipo?

• Basta declarar o elemento na tag de estilo e mudar seus atributos

Exemplo: <style type="text/css"> p {color:#0000FF} h1{color:#00FF00; font-size:2.5em; text-align:center}</style>

CSS Externo

O CSS Interno ajuda bastante mas e se for preciso usar o mesmo padrão em várias páginas diferentes?

• Basta criar um arquivo CSS separado e importá-lo no começo dos documentos HTML

Um arquivo CSS é um arquivo texto comum com extensão .css

Lembre de importar dentro da tag <head> Importe o arquivo usando a tag:<link rel="stylesheet" type="text/css" href="MeuArquivoEstilo.css" />

Comentário em CSS

Pode fazer comentários dentro do CSS Interno ou Externo.

Comentário começa com /* e termina com */

Exemplo:<style type="text/css">p {color:#0000FF} /* Isto seria um comentário */

</style>

Tag <span> do HTML

Como formatar somente parte de um elemento (parágrafo por exemplo), sem sair do padrão CSS? Solução: Use a tag <span> do HTML.

• A tag <span> por si só, faz nada com os dados contidos nela.

• Usando o CSS no entanto, é possível criarmos formatação para partes de um elemento.

Exemplo:•<p> Este parágrafo <span class= "atencao"> exemplifica bem </span> o que se pode fazer.</p>

Tag <div> do HTML

Elemento HTML usado para agrupar informação mas que sozinha não faz coisa alguma.

Grosso modo, tem a mesma função da tag Span.

Para critério de elegância, usa-se a tag div para agrupar informações, ou blocos de informação; enquanto use-se o span para formatar partes de elementos.

Formulários HTMLRevisão

Introdução

Um Formulário HTML é uma seção de um documento contendo elementos especiais chamados controles (campos de texto, botões, etc).

Usuários normalmente preenchem um formulário modificando os controles (inserindo texto nos campos, clicando em um botão).

O Formulário é então enviado para um agente para ser processado (um Servlet, Servidor Web, etc).

Introdução

Formulários são feitos usando as tags <form></form>

Todos controles devem estar contidos dentro das tags de formulário

Quase todos controles são feitos usando o elemento <input>, variando somente o atributo type

Método de Envio

O padrão de envio de um formulário é via GET

GET é mais rápido e fácil de enviar mas bastante inseguro

Outra forma de envio mais seguro é via POST

Usando POST as informações não aparecem na barra de endereços do navegador

Controles de Texto

Como mencionado anteriormente, a grande maioria usa a tag <input>.

A tag <input> é uma tag vazia, lembre-se sempre de fechá-la logo depois de usá-la.

Os outros controles de texto que não usam a tag <input>, NÃO são tags vazias.

Atributo ‘name’ é obrigatória para todos controles, nunca se esqueça.

Controles de Texto

Textfields <input type="text" … />

• Atributo ‘value’ define um valor inicial

Campos de Password <input type="password" … />

•SEMPRE use POST

Controles de Texto

Áreas de Texto <textarea name="…" rows="…"

cols="…"> … </textarea>• Interpretação de tags HTML desabilitada

entre <textarea> e </textarea>

Botões

Botão de Envio/Submissão <input type="submit" … />

• Use atributo ‘name’ se tiver vários botões• Use atributo ‘value’ para mudar o texto do botão

Botão de Limpar <input type="reset" … />

• Use ‘value’ para mudar o texto do botão

Botão JavaScript <input type="button"

onClick="algumaFuncaoJavaScript()" … /> Botões Fancy

<button type="submit">HTML</button>• Depende do navegador

Usando Vários Botões Submit

<p style="text-align:center">Item: <input type="text" name="item" value="Pen Drive 16GB" /> <br />

<input type="submit" name="adicionar" value="Adicionar as Compras" />

<input type="submit" name="deletar" value="Remover das Compras" /> </p>

Check Box

Formato <input type="checkbox" … />

• O atributo ‘checked’ o torna selecionado inicialmente• O par Nome/Valor é enviado somente se o checkbox

estiver selecionado ao se enviar o formulário

Código Exemplo:<p><input type="checkbox" name="sem_email" checked /> Marque aqui se você <i>não</i> quiser receber nossos emails.</p>

Resultado

Radio Button

Formato<input type ="radio" … />

•Todos radio buttons em um grupo devem possuir o mesmo valor para o atributo ‘name’, mas sempre possuem valores diferentes para o atributo ‘value’.

•Apenas um botão por grupo pode ser clicado; clicando um botão diferente desabilita o clicado anteriormente

Radio Button

Exemplo:Formas de Pagamento: <br/><input type="radio" name="pagamento"value="credito"/> Cartão de Crédito <br/><input type="radio" name="pagamento"value="boleto" /> Boleto Bancário <br/><input type="radio" name="pagamento"value="transferencia"/> Transferência Eletrônica <br/>

Combo Box

Formato A tag <select> possui o atributo ‘name’ A tag <select> não é vazia, nela estão contidas as tags

<option> <option> possui o atributo ‘value’

ExemploLinguagem Favorita:<select name="language"><option value="c#">C#</option><option value="c++">C++</option><option value="java" selected>Java</option><option value="php">PHP</option><option value="delphi">Delphi</option></select>

List Box

Formato• Idêntico à combo boxes, mas utiliza o atributo

‘multiple’ Exemplo:Linguagens que você conhece:<br/><select name="language" multiple><option value="c#">C#</option><option value="c++">C++</option><option value="java"

selected>Java</option><option value="php">PHP</option><option

value="delphi">Delphi</option></select>

Controle de Upload de Arquivos

Formato: • <input type="file" ... />

Este componente resulta em uma caixa de texto ao lado de um botão de pesquisa

• Usuários podem selecionar um arquivo no seu sistema de arquivos através de um diálogo de seleção

• A declaração FORM deve incluir o atributo ENCTYPE com o valor multipart/formdata

• Também devemos utilizar POST para o método de envio

Controle de Upload de Arquivos

Exemplo:<form action="http://localhost:4444" enctype="multipart/formdata" method="post">

Selecione uma foto: <input type="file" name="arquivo_foto" />

</form>

Campos Escondidos

Formato: <input type="hidden" ... />

•Este elemento armazena um nome e um valor, mas nenhum elemento gráfico é adicionado à página.

•O par nome/valor é adicionado aos dados do formulário quando o mesmo for enviado para o servidor.

Exemplo:<input type="hidden" name="cod_item" value="101" />

Campos Escondidos

Campos escondidos armazenam nomes e valores fixos que são enviados sem alteração para um servidor, independente da entrada do usuário

São tipicamente utilizados com três objetivos

• Rastrear o usuário• Fornecer entrada prédefinida para um programa do

lado servidor• Armazenar informação de contexto em páginas que

são geradas dinâmicamente. Não coloque informação confidencial

em campos escondidos já que os mesmos podem ser vistos no código da página

Lembrete

Lembre-se que ao enviar dados via GET a URL se torna: URLbase?nome1=valor1&nome2=valor2…

Isto é importante caso seja preciso na programação, enviar um dado simples a alguma página

• No caso basta enviar via GET no próprio endereço da página

Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.

Documents

Transcript of Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.