html - aula 3

Técnicas de Programação HTML, XTML e CSS

Aula 3 Eduardo Mendes

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

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; }

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

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” />


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” />


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" />


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" />


n  O elemento <textarea> cria uma área de texto de múltiplas linhas.

<textarea name="comentarios" rows="7" cols="50"></textarea>


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>


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; }

Adicione o padding .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; }

Adicione a margem .garantia { border-color: black; border-width: 1px; border-style: solid; background-color: #a7cece; padding: 25px; margin: 30px; }

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); }

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; }

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; }

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; }

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; }

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;

html - aula 3

Technology