programação para web unidade 2 – revisão de html, css e formulários prof.: henrique santos
TRANSCRIPT
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>
<!-- Aqui vêm elementos de cabeçalho da página, que não são exibidos -->
</head>
<body>
<!-- Aqui vêm elementos do corpo da página, que serão exibidos -->
</body>
</html>
Comentários
Comentários em HTML são usando uma tag especial.
Inicia-se um comentário com <!-- Termina-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:<!-- Isto seria um <h1> Comentário HTML </h1> -->
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