3. Criando a nova versão do PHP
Drinks
n Faça o download dos arquivos
4. <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
5. 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
9. 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>
10. 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>
11. 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”/>
12. Elemento de bloco e elemenos
inline
n Elementos de bloco
n Separam o conteúdo
n Elementos inline
h2
p
blockquote
p
q
16. Criando um arquivo “css”
n Vamos criar o arquivo phpdrinks.css
phpdrinks.css
17. 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;
}
18. Linkando um html para uma
folha de estilo
<html>
<head>
<title>PHP Drinks</title>
<style type=“text/css”>
</style>
<head>
<body>
<h1>Bem-vindo ao Novo PHP Drinks</h1>
<img src="drinks.gif"/>
<p>
.
.
.
</p>
</body>
<html>
19. Linkando um html para uma
folha de estilo
<html>
<head>
<title>PHP Drinks</title>
<link type=”text/css” rel=“stylesheet” href=“phpdrinks.css” />
<head>
<body>
<h1>Bem-vindo ao Novo PHP Drinks</h1>
<img src="drinks.gif"/>
<p>
.
.
.
</p>
</body>
<html>
26. 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;
}
31. 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;
}
32. Adicionando uma classe
body {
font-family:sans-serif;
}
h1, h2 {
color: gray;
}
h1 {
border-bottom: 1px solid black;
}
p {
color: maroon;
Teste!!!
}
p.verde {
color: green;
}
33. Podemos fazer mais
blockquote.verde, p.verde {
color: green;
}
<blockquote class=“verde”>
.verde {
color: green;
}
34. Realizar as idéias do Cliente
n Texto verde
n Texto azul
n Texto purpura
n Texto vermelho
41. 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>
42. 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>
44. Como o elemento form
funciona?
<form action= "http://www.fa7.edu.br/tecnicas/saudacao.php"
method=“POST">
</form>
45. 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” />
46. 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” />
47. 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" />
48. 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" />
49. 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>
50. 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>
51. 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>
55. 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>
56. 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;
}
64. 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;
}
72. 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>
73. 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”
74. 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”
75. Adicionando id ao phpdrinks.php
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>
76. 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;
}
77. Como dividir uma página em seções
h1
h2
p
h2
p
p
p img
div id=“topo”
div id=“gatos”
div id=“caes”
div id=“rodape”
78. Como dividir uma página em seções
h1
h2
p
h2
p
p
p img
header
section id=“gatos”
section id=“caes”
footer
79. 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>
80. 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>
84. Alterando as cores dos
cabeçalhos
#drinks h2 {
color: black;
}
#drinks h3 {
color: #d12c47;
}
85. Padding em uma linha
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px
padding: 0px 20px 30px 10px;
86. Margem em uma linha
margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px
margin: 0px 20px 30px 10px;
87. 1 valor para todos os paddings
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px
padding: 20px;
88. Margem horizontal e vertical
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px
margin: 0px 20px;
89. Borda em uma linha
border-width: thin;
border-style: solid;
border-color: #007e7e;
border: thin solid #007e7e;
90. 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;
