Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: 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:hsantos@unipacbomdespacho.com.br">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 HTML Revisã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 Campos de Password <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 Botão de Limpar Botão JavaScript <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 Código Exemplo: Resultado <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/> value="boleto" /> Boleto Bancário <br/> value="transferencia"/> Transferência Eletrônica <br/>
Combo Box Formato Exemplo Linguagem Favorita: 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’ Exemplo Linguagem 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: Exemplo: <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