html - aula 3
DESCRIPTION
CSS, Formulários, classes e identificadoresTRANSCRIPT
![Page 1: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/1.jpg)
Técnicas de Programação HTML, XTML e CSS
Aula 3 Eduardo Mendes
![Page 2: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/2.jpg)
HTML
![Page 3: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/3.jpg)
Criando a nova versão do PHP Drinks
n Faça o download dos arquivos
![Page 4: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/4.jpg)
<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
![Page 5: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/5.jpg)
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
![Page 6: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/6.jpg)
O que o navegador fez?
![Page 7: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/7.jpg)
Organizando PHP Drinks
![Page 8: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/8.jpg)
Dificuldades Técnicas
![Page 9: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/9.jpg)
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>
![Page 10: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/10.jpg)
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>
![Page 11: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/11.jpg)
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”/>
![Page 12: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/12.jpg)
Elemento de bloco e elemenos inline
n Elementos de bloco n Separam o conteúdo
n Elementos inline
h2
p
blockquote
p q
![Page 13: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/13.jpg)
Elementos aninhados
![Page 14: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/14.jpg)
Elementos aninhados n <q> está aninhada a <p>, que está aninhado a
<body>, que está aninhado a <html>
![Page 15: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/15.jpg)
Um gráfico para o aninhamento
html
head body
title p
q
![Page 16: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/16.jpg)
Criando um arquivo “css” n Vamos criar o arquivo phpdrinks.css
phpdrinks.css
![Page 17: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/17.jpg)
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; }
![Page 18: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/18.jpg)
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>
![Page 19: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/19.jpg)
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>
![Page 20: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/20.jpg)
Teste Drive
![Page 21: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/21.jpg)
Oooops! n Diferença de letras
![Page 22: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/22.jpg)
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; }
![Page 23: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/23.jpg)
Oba! n Os elementos inseridos na tag <p> sofrem a
alteração também
![Page 24: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/24.jpg)
Os elementos aninhados html
body
p p h1 h2 p
img a em a
![Page 25: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/25.jpg)
Os elementos aninhados html
body
p p h1 h2 p
img a em a
![Page 26: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/26.jpg)
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; }
![Page 27: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/27.jpg)
Teste
![Page 28: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/28.jpg)
Sobrescrevendo a herança n Você decidiu que o <em> deve ser diferente
html
body
p p h1 h2 p
img a em a
![Page 29: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/29.jpg)
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; }
![Page 30: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/30.jpg)
Idéias do Cliente
n Texto verde
n Texto azul
n Texto purpura
n Texto vermelho
![Page 31: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/31.jpg)
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; }
![Page 32: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/32.jpg)
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!!!
![Page 33: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/33.jpg)
Podemos fazer mais blockquote.verde, p.verde { color: green; }
<blockquote class=“verde”>
.verde { color: green; }
![Page 34: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/34.jpg)
Realizar as idéias do Cliente
n Texto verde
n Texto azul
n Texto purpura
n Texto vermelho
![Page 35: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/35.jpg)
FORMULÁRIOS Técnicas de Programação - Eduardo Mendes
![Page 36: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/36.jpg)
Interatividade
![Page 37: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/37.jpg)
Interatividade
![Page 38: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/38.jpg)
O Navegador carrega uma página
![Page 39: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/39.jpg)
Você preenche dados...
..e envia as informações
![Page 40: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/40.jpg)
O servidor responde
![Page 41: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/41.jpg)
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>
![Page 42: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/42.jpg)
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>
![Page 43: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/43.jpg)
O que o browser cria
![Page 44: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/44.jpg)
Como o elemento form funciona?
<form action= "http://www.fa7.edu.br/tecnicas/saudacao.php" method=“POST"> </form>
![Page 45: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/45.jpg)
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” />
![Page 46: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/46.jpg)
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” />
![Page 47: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/47.jpg)
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" />
![Page 48: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/48.jpg)
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" />
![Page 49: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/49.jpg)
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>
![Page 50: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/50.jpg)
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>
![Page 51: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/51.jpg)
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>
![Page 52: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/52.jpg)
Todo elemento vem dentro de uma caixa
conteúdo
borda
![Page 53: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/53.jpg)
Vários tipos de caixas e bordas
![Page 54: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/54.jpg)
Adicionando uma caixa
![Page 55: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/55.jpg)
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>
![Page 56: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/56.jpg)
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; }
![Page 57: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/57.jpg)
Teste
![Page 58: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/58.jpg)
Adicione o padding .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; }
![Page 59: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/59.jpg)
Teste
![Page 60: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/60.jpg)
Adicione a margem .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; }
![Page 61: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/61.jpg)
Teste
![Page 62: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/62.jpg)
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); }
![Page 63: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/63.jpg)
Teste
![Page 64: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/64.jpg)
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; }
![Page 65: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/65.jpg)
Teste
![Page 66: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/66.jpg)
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; }
![Page 67: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/67.jpg)
Teste
![Page 68: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/68.jpg)
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; }
![Page 69: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/69.jpg)
Teste
![Page 70: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/70.jpg)
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; }
![Page 71: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/71.jpg)
Teste
![Page 72: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/72.jpg)
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>
![Page 73: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/73.jpg)
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”
![Page 74: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/74.jpg)
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”
![Page 75: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/75.jpg)
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
![Page 76: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/76.jpg)
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; }
![Page 77: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/77.jpg)
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”
![Page 78: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/78.jpg)
Como dividir uma página em seções h1 h2
h2
p
p
p
p img
section id=“gatos”
section id=“caes”
header
footer
![Page 79: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/79.jpg)
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>
![Page 80: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/80.jpg)
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>
![Page 81: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/81.jpg)
Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; }
![Page 82: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/82.jpg)
Adicionando ao phpdrinks.css #drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }
![Page 83: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/83.jpg)
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; }
![Page 84: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/84.jpg)
Alterando as cores dos cabeçalhos
#drinks h2 { color: black; } #drinks h3 { color: #d12c47; }
![Page 85: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/85.jpg)
Padding em uma linha padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px
padding: 0px 20px 30px 10px;
![Page 86: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/86.jpg)
Margem em uma linha margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px
margin: 0px 20px 30px 10px;
![Page 87: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/87.jpg)
1 valor para todos os paddings padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px
padding: 20px;
![Page 88: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/88.jpg)
Margem horizontal e vertical margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px
margin: 0px 20px;
![Page 89: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/89.jpg)
Borda em uma linha border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;
![Page 90: Html - Aula 3](https://reader033.vdocuments.site/reader033/viewer/2022052316/558cfd51d8b42a644b8b459f/html5/thumbnails/90.jpg)
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;