2. 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”
3. Retornando ao phpdrinks
• 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>
• 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>
4. Retornando ao phpdrinks
<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>
8. Alterando as cores dos cabeçalhos
#drinks h2 {
color: black;
}
#drinks h3 {
color: #d12c47;
}
9. Padding em uma linha
padding-top: 0px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 10px
padding: 0px 20px 30px 10px;
10. Margem em uma linha
margin-top: 0px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 10px
margin: 0px 20px 30px 10px;
11. 1 valor para todos os paddings
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px
padding: 20px;
12. Margem horizontal e vertical
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 20px
margin: 0px 20px;
13. Borda em uma linha
border-width: thin;
border-style: solid;
border-color: #007e7e;
border: thin solid #007e7e;
14. 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;
17. Adicione o estilo correto para obter
• Verifique o arquivo css e
adicione o estilo correto para
que a página possua esta
aparência
<div>
<h2>Drinks Especiais desta Semana</h2>
<p>
<img src="imagens/yellow.gif" />
</p>
<h3>Lemon Breeze</h3>
<p>
Um drinks mais que saudável, este drink combina
ervas botânicas, minerais, e vitaminas com uma
suave mistura de limão que manterá sua saúde imune
dia e noite.
</p>
<div id=“drinks”>
18. Adicione o estilo correto para obter
• Adicione novamente estilo à camada garantia
<p>
Garantimos a você um ambiente agradável, gente bonita, funções
e procedimentos que farão sua noite ser inesquecível.
Nossos Djs tocarão as melhores músicas da balada durante
a noite toda. Os maiores sucessos da pista regados pelos drinks
mais exóticosno mundo da programação web.
</p>
<p id=“drinks”>
21. E sobre os elementos inline???
<p>
Venha se divertir conosco <em>a qualquer hora</em>
com estes e todos os nossos outros maravilhosos
drinks.<a href="bebidas/bebidas.html">drinks</a>.
</p>
p
texto em texto a
p texto em texto
atexto
p texto
em
texto
a
texto
texto
24. <span>
• Elementos que formatam elementos inline
• Vejamos:
– Vamos separar os cd e os artistas com tags
span
– Adicionemos às tags span classes “cd” e classes
“artista”
– Criar no phpdrinks.css regras para “cd” e
“artista”
25. Separando Cds de Artistas
<ul>
<li>Stickwitu, Pussycat Dolls</li>
<li>Frozen, Madonna</li>
<li>Earth 7, L.T.J. Bukem</li>
<li>Le Roi Est Mort, Vive Le Roi!, Engima</li>
<li>Music for Airports, Brian Eno</li>
</ul>
28. Links de mútiplas personalidades
• Um link pode ter três estados
– Não-visitado
– Visitado
– Hover
– Teste:
a:link {
color:green;
}
a:hover{
color: yellow;
}
52. Envolvendo o conteúdo com a tag div
#content {
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
80. Tabelas
Cidade Data Temp População
Natal 15/08 28° 1.000.000
Salvador 17/08 30° 1.200.000
Rio 19/08 40° 12.000.000
Sampa 21/08 28° 20.000.000
colunas
linhas
cabeçalho
83. Adicionando um resumo e um título
<table summary=“Tabelas de cidades conhecidas”>
<caption>
As cidades que conheci no Brasil
</caption>
<tr>
<th>Cidade</th>
97. 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>
</form>
98. O que você escreve???
<html>
<head>
<title>Digite seus dados</title>
</head>
<body>
<form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/
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>
100. Como o elemento form funciona?
<form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/
saudacao.php"
method=“POST">
</form>
101. Que elementos o formulário pode possuir?
• 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” />
102. Que elementos o formulário pode possuir?
• 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” />
103. Que elementos o formulário pode possuir?
• 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" />
104. Que elementos o formulário pode possuir?
• 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" />
105. Que elementos o formulário pode possuir?
• O elemento <textarea> cria uma área de
texto de múltiplas linhas.
<textarea name="comentarios" rows="7" cols="50"></textarea>
106. Que elementos o formulário pode possuir?
• 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>
107. Que elementos o formulário pode possuir?
• O elemento <option> aparece dentro do
elemento <select> para criar as opções do
menu.
<select name="musicas">
<option>Mind Trick</option>
<option>Dont cha</option>
<option>Vai Lacraia</option>
</select>