Técnicas de Programação HTML, XTML e CSS
Aula 3 Eduardo Mendes
HTML
Criando a nova versão do PHP Drinks
n Faça o download dos arquivos
<html> <head> <title>PHP Drinks</title> <head> <body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> Prove uma de nossas <a href="bebidas.html">bebidas</a> e relaxe ao som de <em>Dance Dance</em>. </p> <h2>Localização</h2> <p> Você pode nos encontrar no centro da Vila Web. Para chegar aqui sigas as <a href="instrucoes.html">instrucoes</a>. </p> </body> <html>
Edite phpdrinks.html
O que nós fizemos??? n O texto que deve se tornar um “link” foi colocado
entre tags <a>
n Adicione a informação HTML que informará para onde o link nos levará ao clicar nele
O que o navegador fez?
Organizando PHP Drinks
Dificuldades Técnicas
Criando links para uma subpasta
n Identicamos o caminho
Criar um valor para o atributo href para
caminho identificado bebidas/bebidas.html
<a href=“bebidas/bebidas.html”>bebidas</a>
Criando links para uma pasta acima
n Identicamos o caminho
Criar um valor para o atributo href para
caminho identificado ../phpdrinks.html
<a href=“../phpdrinks.html”>Voltar</a>
Corrigindo os links para as imagens
n Realize o mesmo para as imagens no caminho para a imagem:
<img src=“drinks.gif”/>
<img src=“imagens/drinks.gif”/>
<img src=“../imagens/red.jpg”/>
Elemento de bloco e elemenos inline
n Elementos de bloco n Separam o conteúdo
n Elementos inline
h2
p
blockquote
p q
Elementos aninhados
Elementos aninhados n <q> está aninhada a <p>, que está aninhado a
<body>, que está aninhado a <html>
Um gráfico para o aninhamento
html
head body
title p
q
Criando um arquivo “css” n Vamos criar o arquivo phpdrinks.css
phpdrinks.css
Criando um arquivo “css” – Folha de Estilo
n Copiar as regras CSS para ele h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; }
Linkando um html para uma folha de estilo
<html> <head> <title>PHP Drinks</title> <head>
<style type=“text/css”> </style>
<body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> . . . </p> </body> <html>
Linkando um html para uma folha de estilo
<html> <head> <title>PHP Drinks</title> <head>
<link type=”text/css” rel=“stylesheet” href=“phpdrinks.css” />
<body> <h1>Bem-vindo ao Novo PHP Drinks</h1> <img src="drinks.gif"/> <p> . . . </p> </body> <html>
Teste Drive
Oooops! n Diferença de letras
Altere o arquivo css h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; font-family:sans-serif; }
Oba! n Os elementos inseridos na tag <p> sofrem a
alteração também
Os elementos aninhados html
body
p p h1 h2 p
img a em a
Os elementos aninhados html
body
p p h1 h2 p
img a em a
Movendo a definição da fonte para o body
body { font-family:sans-serif; } h1, h2 { font-family:sans-serif; color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; font-family:sans-serif; }
Teste
Sobrescrevendo a herança n Você decidiu que o <em> deve ser diferente
html
body
p p h1 h2 p
img a em a
Sobrescrevendo a herança body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } em { font-family: serif; }
Idéias do Cliente
n Texto verde
n Texto azul
n Texto purpura
n Texto vermelho
Adicionando uma classe <h2>Chá Verde Gelado</h2> <p class="verde"> <img src="../imagens/green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila.
</p>
p.verde { color: green; }
Adicionando uma classe body { font-family:sans-serif; } h1, h2 { color: gray; } h1 { border-bottom: 1px solid black; } p { color: maroon; } p.verde { color: green; }
Teste!!!
Podemos fazer mais blockquote.verde, p.verde { color: green; }
<blockquote class=“verde”>
.verde { color: green; }
Realizar as idéias do Cliente
n Texto verde
n Texto azul
n Texto purpura
n Texto vermelho
FORMULÁRIOS Técnicas de Programação - Eduardo Mendes
Interatividade
Interatividade
O Navegador carrega uma página
Você preenche dados...
..e envia as informações
O servidor responde
O que você escreve e o que o browser faz
<p> Apenas digite seu nome e clique no botão enviar para ser saudado pelo servidor web :)<br/> Primeiro Nome:
<input type="text" name="primeiroNome" value="" /> <br /> Ultimo Nome: <input type="text" name="segundoNome" value="" /> <br /> <input type="submit" value="Enviar" /> </p>
O que você escreve??? <html> <head> <title>Digite seus dados</title> </head> <body> <form action= "http://www.fa7.edu.br/tecnicas/saudacao.php" method=“post"> <p> Apenas digite seu nome e clique no botão enviar para ser saudado pelo servidor web :)<br/> Primeiro Nome:
<input type="text" name="primeiroNome" value="" /> <br /> Ultimo Nome: <input type="text" name="segundoNome" value="" /> <br /> <input type="submit" value="Enviar" /> </p> </form>
</body> </html>
O que o browser cria
Como o elemento form funciona?
<form action= "http://www.fa7.edu.br/tecnicas/saudacao.php" method=“POST"> </form>
Que elementos o formulário pode possuir?
n O elemento <input> de texto serve para o usuário preencher uma linha de texto. Atributos opcionais podem configurar o máximo de caracteres e a largura
<input type=“text” name=“primeiroNome” />
Que elementos o formulário pode possuir?
n O elemento <input> submit cria um botão que permite você submeter o formulário. Quando você clica neste botão o navegador envia o formulário para uma que uma aplicação web processe-o
<input type=“submit” value=“Enviar” />
Que elementos o formulário pode possuir?
n O elemento <input> radio cria um controle com vários botões, só é possível selecionar um.
<input type="radio" name="temperatura" value="quente" /> <input type="radio" name="temperatura" value="frio" />
Que elementos o formulário pode possuir?
n O elemento <input> checkbox cria um controle com vários botões, onde vários podem ser selecionados.
<input type="checkbox" name="tempero[]" value="sal" /> <input type="checkbox" name="tempero[]" value="pimentao" /> <input type="checkbox" name="tempero[]" value="alho" />
Que elementos o formulário pode possuir?
n O elemento <textarea> cria uma área de texto de múltiplas linhas.
<textarea name="comentarios" rows="7" cols="50"></textarea>
Que elementos o formulário pode possuir?
n O elemento <select> cria um controle de menu na página web, que possibilita escolher entre várias opções.
<select name="musicas"> <option>Mind Trick</option>
<option>Dont cha</option> <option>Vai Lacraia</option>
</select>
Que elementos o formulário pode possuir?
n O elemento <option> aparece dentro do elemento <select> para criar as opções do menu. Pode possuir o atributo “value”
<select name="musicas">
<option>Mind Trick</option> <option>Dont cha</option>
<option>Vai Lacraia</option> </select>
<select name="musicas"> <option value=“1”>Mind Trick</option>
<option value=“2”>Dont cha</option> <option value=“3”>Vai Lacraia</option>
</select>
Todo elemento vem dentro de uma caixa
conteúdo
borda
Vários tipos de caixas e bordas
Adicionando uma caixa
Adicionando uma caixa n Abra o arquivo phpdrinks.html
n Adicione um paragrafo com uma classe e salve o arquivo
<p class="garantia"> Garantimos a você um ambiente agradável, gente bonita,
funções e procedimentos que farão sua noite ser inesquecível
</p>
Adicionando uma caixa n Abra o phpdrinks.css e adicione as regras de css
para a classe garantia
.garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; }
Teste
Adicione o padding .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; }
Teste
Adicione a margem .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; }
Teste
Adicionando uma imagem de fundo
.garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(imagens/estrela.gif); }
Teste
Para que a imagem não se repita
.garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
Teste
Aumentando o padding à esquerda
.garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
Teste
Aumentando a margem à direita
.garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 250px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
Teste
Adicionando cor e estilo a borda
.garantia { border-color: white; border-width: 1px; border-style: dashed; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 100px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
Teste
O atributo id n Similar a classe n Um atributo chamado “id” n Deve possuir um nome único n Só um elemento pode possuir aquele id específico <p id=“rodape”>Página desenvolvida pela FA7</p>
Como usar? p.especial { color: red; } .especial { color:red; }
Seleciona apenas as tags <p> que tenham
a classe “especial”
Seleciona todos os elementos
que tenham a classe “especial”
Como usar? #rodape { color: red; } p#rodape { color:red; }
Seleciona qualquer elemento
que possua o id “rodape”
Seleciona apenas o elemento <p>
que tenha o id “rodape”
n Altere o atributo classe para o atributo id <p id="garantia"> Garantimos a você um ambiente agradável, gente bonita, funções e procedimentos que farão sua noite ser inesquecível
</p>
Adicionando id ao phpdrinks.php
Adicionando id ao phpdrinks.php n Altere o “.garantia” para um id no phpdrinks.css #garantia { border-color: white; border-width: 1px; border-style: dashed; background-color: #a7cece; padding: 25px; padding-left: 80px; margin: 30px; margin-right: 100px; background-image: url(estrela.gif); background-repeat: no-repeat; background-position: top left; }
Como dividir uma página em seções h1 h2
h2
p
p
p
p img
div id=“gatos”
div id=“caes”
div id=“topo”
div id=“rodape”
Como dividir uma página em seções h1 h2
h2
p
p
p
p img
section id=“gatos”
section id=“caes”
header
footer
Retornando ao projeto n bebidas.html <h1>Nossos Drinks</h1> <h2>Chá Verde Gelado</h2> <p> <img src="green.jpg">
Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila.
</p> <h2>Concentrado Gelado</h2> <p> <img src="lightblue.jpg"> Combinação de suco de limão com contreau. </p> <h2>Azul Bliss</h2> <p> <img src="blue.jpg"> Mistura secreta que deixará você relaxado. </p> <h2>Drink Rejuvenescedor</h2> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico
em vitamina C. </p>
n bebidas.html <h2>Nossos Drinks</h2> <h3>Chá Verde Gelado</h3> <p> <img src="green.jpg">
Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila.
</p> <h3>Concentrado Gelado</h3> <p> <img src="lightblue.jpg"> Combinação de suco de limão com contreau. </p> <h3>Azul Bliss</h3> <p> <img src="blue.jpg"> Mistura secreta que deixará você relaxado. </p> <h3>Drink Rejuvenescedor</h3> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico
em vitamina C. </p>
Retornando ao projeto <div id=“drinks”> <h2>Nossos Drinks</h2> <h3>Chá Verde Gelado</h3> <p> <img src="green.jpg"> Mistura de vitaminas e sais minerais, este drink combina benefícios do chá verde com a camomila.
</p> . . . <h3>Drink Rejuvenescedor</h3> <p> <img src="red.jpg"> Combinação de acerola e goiaba, drink rico em vitamina C.
</p> </div>
Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; margin-left: 20px; text-align: center; background-image: url(images/cocktail.gif); background-repeat: repeat-x; }
Alterando as cores dos cabeçalhos
#drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
Padding em uma linha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px
padding: 0px 20px 30px 10px;
Margem em uma linha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px
margin: 0px 20px 30px 10px;
1 valor para todos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px
padding: 20px;
Margem horizontal e vertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px
margin: 0px 20px;
Borda em uma linha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
Fundo em uma linha background-color: white; background-image: url(images/cocktail.gif); background-repeat: repeat-x;
background: white url(images/cocktail.gif) repeat-x;