Download pdf - Html Exercicio

Transcript
Page 1: Html Exercicio

Módulo 1

HTML, CSS & XHTML

Professor: Eduardo Mendes

Page 2: Html Exercicio

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 3: Html Exercicio

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>

Page 4: Html Exercicio

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>

Page 5: Html Exercicio

Adicionando ao phpdrinks.css

#drinks { border-width: thin; border-style: solid; border-color: #007e7e; }

Page 6: Html Exercicio

Adicionando ao phpdrinks.css

#drinks { border-width: thin; border-style: solid; border-color: #007e7e; width: 200px; }

Page 7: Html Exercicio

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 8: Html Exercicio

Alterando as cores dos cabeçalhos

#drinks h2 { color: black; } #drinks h3 { color: #d12c47; }

Page 9: Html Exercicio

Padding em uma linha

padding-top: 0px; padding-right: 20px; padding-bottom: 30px; padding-left: 10px

padding: 0px 20px 30px 10px;

Page 10: Html Exercicio

Margem em uma linha

margin-top: 0px; margin-right: 20px; margin-bottom: 30px; margin-left: 10px

margin: 0px 20px 30px 10px;

Page 11: Html Exercicio

1 valor para todos os paddings

padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px

padding: 20px;

Page 12: Html Exercicio

Margem horizontal e vertical

margin-top: 0px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px

margin: 0px 20px;

Page 13: Html Exercicio

Borda em uma linha

border-width: thin; border-style: solid; border-color: #007e7e; border: thin solid #007e7e;

Page 14: Html Exercicio

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;

Page 15: Html Exercicio

Desafio!!!

Page 16: Html Exercicio

Preparando o território

•  Faça o download do arquivo –  www.fa7.edu.br/tecnicas/modulo1/drinks5.zip

Page 17: Html Exercicio

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

Page 18: Html Exercicio

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

Page 19: Html Exercicio

Incrementando...

•  Abra o arquivo css •  Qual a definição a alterar?

float: right;

Page 20: Html Exercicio

Entendendo o float

<html> <head>...</head> <body> <h1>...</h1> <h2>...</h2> <p>...</p> <h2>...</h2> <p>...</p> <p>...</p> <p>...</p> </body> </html>

h1

h2

p

h2

p

p

p

Page 21: Html Exercicio

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

a texto

p texto em

texto a

texto

texto

Page 22: Html Exercicio

Tudo junto h1

h2

p

h2

p

p

p

texto

texto

texto

texto em texto

texto

texto texto texto

img img img img

h1

h2

p

h2

p

p

p

texto

texto

texto em texto

texto

img img img img

texto

texto texto

texto texto texto texto

Page 23: Html Exercicio

Cd Itálico, Artista Negrito

Page 24: Html Exercicio

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

Page 25: Html Exercicio

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>

Page 26: Html Exercicio

Adicionemos span <ul> <li> <span class=“cd”>Stickwitu</span>, <span class=“artista”>Pussycat Dolls</span> </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>

Page 27: Html Exercicio

Crie os estilos

.cd { font-style: italic; } .artista { font-weight: bold; }

Page 28: Html Exercicio

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

Page 29: Html Exercicio

Melhorando

a:link { color: #007e7e; text-decoration: none; } a:visited { color: #333333; }

Page 30: Html Exercicio

Links especiais para os drinks #drinks a:link { color: #007e7e; } #drinks a:visited { color: #333333; } #drinks a:hover { background: #f88396; color: #0d5353; }

Page 31: Html Exercicio

Último passo

•  Crie um id e forneça a formatação adequada

Page 32: Html Exercicio

Resposta

•  Css #rodape { font-size: 70%; text-align: center; line-height: normal; margin-top: 30px; }

•  Html <div id="rodape"> <p> &copy; 2006, PHP DRINKS<br /> Todos os direitos reservados. </p> </div>

Page 33: Html Exercicio

A StarBuzz Coffe

•  Topo - header

•  Principal – main

•  Coluna lateral –  sidebar

•  Rodapé –  footer

Page 34: Html Exercicio

<html> <head> </head> <body> <div id="header"> </div> <div id="main"> ... </div> <div id="sidebar"> ... </div>

<div id="footer"> ... </div> </body> </html>

Page 35: Html Exercicio

starbuzz.css body { background-color: #b5a789; font-family: Georgia, "Times New Roman", Times, serif; font-size: small; margin: 0px; }

Page 36: Html Exercicio

starbuzz ids #header { background-color: #675c47; margin: 10px; height: 108px; } #main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; } #sidebar { background: #efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; } #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; }

Page 37: Html Exercicio

starbuzz.css h1 { font-size: 120%; color: #954b4b; } h2 { font-size: 110%; } .slogan { color: #954b4b; } .beanheading { text-align: center; line-height: 1.8em; } a:link { color: #b76666; text-decoration: none; border-bottom: thin dotted #b76666; } a:visited { color: #675c47; text-decoration: none; border-bottom: thin dotted #675c47; }

Page 38: Html Exercicio

Alterando

Page 39: Html Exercicio

Primeiro Passo – Alterar as posições

Page 40: Html Exercicio

Depois

•  Adicionar uma largura e um float

Page 41: Html Exercicio

Melhorando

Page 42: Html Exercicio

Verificando a página sem o CSS

Page 43: Html Exercicio

Organizando

•  Coloque a div “sidebar” para baixo da div “main”

Page 44: Html Exercicio

Alterando o CSS

#sidebar { background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 280px; float: right; }

Page 45: Html Exercicio

Alterando o CSS

#sidebar { background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; width: 280px; float: right; }

Page 46: Html Exercicio

Alterando o CSS

#sidebar { background: #efe5d0 url(images/background.gif) bottom right;

font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }

Page 47: Html Exercicio

Teste

Page 48: Html Exercicio

Alterando o CSS

•  Alterar a definição do main #main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 330px 10px 10px; width: 420px; float: left; }

10px

Page 49: Html Exercicio

Teste

Page 50: Html Exercicio

Corrigindo o footer

#footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px; font-size: 90%; clear: left; }

Page 51: Html Exercicio

Teste

Page 52: Html Exercicio

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

Page 53: Html Exercicio

Tente

Page 54: Html Exercicio

Fixando Camadas #sidebar { position: absolute; top: 100px; right: 200px; width: 280px; background: #efe5d0 url(images/background.gif)

bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 470px; }

Page 55: Html Exercicio

Teste

Page 56: Html Exercicio

Adicione uma camada

<div id="qualquercoisa"> <p> Qualquer coisa </p> </div>

Page 57: Html Exercicio

Adiciona um seletor CSS para a camada

#qualquercoisa { position: absolute; top: 150px; left: 300px; width: 400px; background: #F5F5F5; }

Page 58: Html Exercicio

Teste

Page 59: Html Exercicio

Alterando Starbuzz

•  Retire a div “content”

Page 60: Html Exercicio

#main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 330px 10px 10px; } #sidebar { position: absolute; top: 128px; right: 0px; width: 280px; background: efe5d0 url(images/background.gif) bottom right; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; }

Alterando Starbuzz

Page 61: Html Exercicio

Teste

Page 62: Html Exercicio

Alterando o Starbuzz #footer { background-color: #675c47; color: #efe5d0; text-align: center; padding: 15px; margin: 10px 330px 10px 10px; font-size: 90%; }

Page 63: Html Exercicio

Teste

Page 64: Html Exercicio

Premiação para o design!!!!!

•  Vamos premiar este design

Page 65: Html Exercicio

Adicionemos uma camada parao prêmio

<div id="award"> <img src="images/award.gif" /> </div>

Page 66: Html Exercicio

Adicionando um seletor css para o prêmio

#award { position: absolute; top: 30px; left: 365px; }

Page 67: Html Exercicio

<div id=“main”> ... </div> <div id=“award”> ... </div> <div id=“sidebar”> ... </div>

Mudando o prêmio de lugar

Page 68: Html Exercicio

Solução z-index

#award { position: absolute; top: 30px; left: 365px; z-index: 99; }

Page 69: Html Exercicio

Algo mais sobre posições absolutas <div id="sidebar"> <div id=“tv”>

<img src=“tv.gif” /> </div> <p class="beanheading"> … </p> … </div> #tv { position: absolute; top: 100px; left: 100px; width: 100px; }

div id=“header”

div id=“main”

div id=“footer”

div id=“sidebar”

div id=“tv”

100px

100p

x

Page 70: Html Exercicio

Um outro tipo de posicionamento: FIXED

•  Promoção para um café “no preço”

Page 71: Html Exercicio

Um outro tipo de posicionamento: FIXED

<div id=“cupom”> <a href=“freecoffe.html”> <img src=“images/ticket.gif” /> </a> </div>

#cupom { position: fixed; top: 300px; left: 100px; }

Page 72: Html Exercicio

Teste

Page 73: Html Exercicio

Corrigindo o problema com as bordas

#cupom img { border: none; } #cupom a:link { border: none; } #cupom a:visited { border: none; }

Page 74: Html Exercicio

Quase OK!!!

Page 75: Html Exercicio

Usando um valor negativo para a esquerda

#cupom { position: fixed; top: 300px; left: -90px; }

Page 76: Html Exercicio

Uuuuuuuufa!

Page 77: Html Exercicio

E sobre posicionamento relativo???

Page 78: Html Exercicio

Relativo à posição que deveria ficar

.beanheading img{ position: relative; left: 100px; }

Page 79: Html Exercicio

Testando o absoluto

.beanheading img{ position: relative; left: 100px; }

Page 80: Html Exercicio

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

Page 81: Html Exercicio

Como criar tabelas usando HTML? <html> <head> <style type="text/css"> td, th {

border: 1px solid black; } </style> <title>Tabelas</title>

</head> <body> <table> <tr> <th>Cidade</th> <th>Data</th> <th>Temp</th> <th>População</th> </tr>

<tr> <td>Natal</td> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr> <tr> <td>Salvador</td> <td>17/08</td> <td>30</td> <td>1.200.000</td> </tr> </table>

</body> </html>

Page 82: Html Exercicio

Teste

<table>

<tr>....

.....</tr> <tr>....

.....</tr>

<tr>.... .....</tr>

</table>

<th>Cidade</th>

<td>28</td>

Page 83: Html Exercicio

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>

Page 84: Html Exercicio

Voltando a viajar!

Page 85: Html Exercicio

Adicionando estilo a tabela table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; } td, th { border: thin dotted gray; padding: 5px; } caption { font-style: italic; padding-top: 8px; }

Page 86: Html Exercicio

Border-collapse

table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-collapse: collapse; }

Page 87: Html Exercicio

Teste

Page 88: Html Exercicio

Cores na tabela?

th { background-color: #cc6600; }

Page 89: Html Exercicio

E como faríamos isso???

Page 90: Html Exercicio

Css nas células corretas

.cellcolor { background-color: #fcba7a; }

Page 91: Html Exercicio

Uma coluna para 2 linhas <tr> <td rowspan=“2”>Natal</td> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr> <tr> <td>15/08</td> <td>28</td> <td>1.000.000</td> </tr>

Page 92: Html Exercicio

Interatividade

Page 93: Html Exercicio

Interatividade

Page 94: Html Exercicio

O Navegador carrega uma página

Page 95: Html Exercicio

Você preenche dados...

..e envia as informações

Page 96: Html Exercicio

O servidor responde

Page 97: Html Exercicio

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>

Page 98: Html Exercicio

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>

Page 99: Html Exercicio

O que o browser cria

Page 100: Html Exercicio

Como o elemento form funciona? <form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/

saudacao.php" method=“POST"> </form>

Page 101: Html Exercicio

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

Page 102: Html Exercicio

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

Page 103: Html Exercicio

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

Page 104: Html Exercicio

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

Page 105: Html Exercicio

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>

Page 106: Html Exercicio

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>

Page 107: Html Exercicio

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>