Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.
Transcript of Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.
![Page 1: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/1.jpg)
Programação para WebUnidade 2 – Revisão de HTML, CSS e FormuláriosProf.: Henrique Santos
![Page 2: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/2.jpg)
HTML - Revisão
![Page 3: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/3.jpg)
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.
![Page 4: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/4.jpg)
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>
![Page 5: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/5.jpg)
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>
![Page 6: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/6.jpg)
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> -->
![Page 7: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/7.jpg)
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.
![Page 8: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/8.jpg)
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/>
![Page 9: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/9.jpg)
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.
![Page 10: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/10.jpg)
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 />
![Page 11: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/11.jpg)
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)
![Page 12: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/12.jpg)
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>
![Page 13: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/13.jpg)
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).
![Page 14: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/14.jpg)
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.
![Page 15: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/15.jpg)
CSS - Revisão
![Page 16: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/16.jpg)
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
![Page 17: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/17.jpg)
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
![Page 18: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/18.jpg)
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>
![Page 19: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/19.jpg)
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>
![Page 20: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/20.jpg)
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>
![Page 21: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/21.jpg)
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>
![Page 22: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/22.jpg)
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>
![Page 23: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/23.jpg)
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" />
![Page 24: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/24.jpg)
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>
![Page 25: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/25.jpg)
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>
![Page 26: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/26.jpg)
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.
![Page 27: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/27.jpg)
Formulários HTMLRevisão
![Page 28: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/28.jpg)
![Page 29: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/29.jpg)
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).
![Page 30: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/30.jpg)
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
![Page 31: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/31.jpg)
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
![Page 32: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/32.jpg)
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.
![Page 33: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/33.jpg)
Controles de Texto
Textfields <input type="text" … />
• Atributo ‘value’ define um valor inicial
Campos de Password <input type="password" … />
•SEMPRE use POST
![Page 34: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/34.jpg)
Controles de Texto
Áreas de Texto <textarea name="…" rows="…"
cols="…"> … </textarea>• Interpretação de tags HTML desabilitada
entre <textarea> e </textarea>
![Page 35: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/35.jpg)
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
![Page 36: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/36.jpg)
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>
![Page 37: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/37.jpg)
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
![Page 38: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/38.jpg)
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
![Page 39: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/39.jpg)
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/>
![Page 40: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/40.jpg)
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>
![Page 41: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/41.jpg)
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>
![Page 42: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/42.jpg)
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
![Page 43: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/43.jpg)
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>
![Page 44: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/44.jpg)
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" />
![Page 45: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/45.jpg)
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
![Page 46: Programação para Web Unidade 2 – Revisão de HTML, CSS e Formulários Prof.: Henrique Santos.](https://reader035.fdocumentos.tips/reader035/viewer/2022062700/552fc165497959413d8ea569/html5/thumbnails/46.jpg)
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