Html Exercicio

Módulo 1
HTML, CSS & XHTML
Professor: Eduardo Mendes

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”

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
<p>
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>
<p>
<img src="red.jpg">
em vitamina C.
</p>

Retornando ao phpdrinks
<div id=“drinks”>
<p>
combina benefícios do chá verde com a camomila.
</p>
.
.
.
<p>
<img src="red.jpg">
em vitamina C.
</p>
</div>

Adicionando ao phpdrinks.css
#drinks {
border-width: thin;
border-style: solid;
border-color: #007e7e;
}

#drinks {
border-width: thin;
width: 200px;
}

#drinks {
border-width: thin;
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-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-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: 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;

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

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

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

Incrementando...
•  Abra o arquivo css
•  Qual a definição
a alterar?
float: right;

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

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

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

Cd  Itálico, Artista  Negrito

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

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>

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>

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

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

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

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

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

Resposta
•  Css
#rodape {
font-size: 70%;
text-align: center;
line-height: normal;
margin-top: 30px;
}
•  Html
<div id="rodape">
<p>
© 2006, PHP DRINKS<br />
Todos os direitos reservados.
</p>
</div>

A StarBuzz Coffe
•  Topo - header
•  Principal – main
•  Coluna lateral
–  sidebar
•  Rodapé
–  footer

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

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

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;
border-bottom: thin dotted #b76666;
}
a:visited {
color: #675c47;
border-bottom: thin dotted #675c47;
}

Primeiro Passo – Alterar as posições

Depois
•  Adicionar uma largura e um float

Verificando a página sem o CSS

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

Alterando o CSS
#sidebar {
background: #efe5d0 url(images/
background.gif) bottom right;
font-size: 105%;
padding: 15px;
width: 280px;
float: right;
}

Alterando o CSS
#sidebar {
font-size: 105%;
padding: 15px;
width: 280px;
float: right;
}

Alterando o CSS
#sidebar {
font-size: 105%;
padding: 15px;
}

Alterando o CSS
•  Alterar a definição do main
#main {
font-size: 105%;
padding: 15px;
width: 420px;
float: left;
}
10px

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

Envolvendo o conteúdo com a tag div
#content {
width: 800px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
}

Fixando Camadas
#sidebar {
position: absolute;
top: 100px;
right: 200px;
width: 280px;
background: #efe5d0 url(images/background.gif)
bottom right;
font-size: 105%;
padding: 15px;
}

Adicione uma camada
<div id="qualquercoisa">
<p>
Qualquer coisa
</p>
</div>

Adiciona um seletor CSS para a camada
#qualquercoisa {
position: absolute;
top: 150px;
left: 300px;
width: 400px;
background: #F5F5F5;
}

Alterando Starbuzz
•  Retire a div “content”

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

Alterando o Starbuzz
#footer {
color: #efe5d0;
text-align: center;
padding: 15px;
font-size: 90%;
}

Premiação para o design!!!!!
•  Vamos premiar este design

Adicionemos uma camada parao prêmio
<div id="award">
<img src="images/award.gif" />
</div>

Adicionando um seletor css para o prêmio
#award {
position: absolute;
top: 30px;
left: 365px;
}

<div id=“main”>
...
</div>
<div id=“award”>
...
</div>
<div id=“sidebar”>
...
</div>
Mudando o prêmio de lugar

Solução  z-index
#award {
position: absolute;
top: 30px;
left: 365px;
z-index: 99;
}

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
100px

Um outro tipo de posicionamento: FIXED
•  Promoção para um café “no preço”

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

Corrigindo o problema com as bordas
#cupom img {
border: none;
}
#cupom a:link {
border: none;
}
#cupom a:visited {
border: none;
}

Usando um valor negativo para a esquerda
#cupom {
position: fixed;
top: 300px;
left: -90px;
}

E sobre posicionamento relativo???

Relativo à posição que deveria ficar
.beanheading img{
position: relative;
left: 100px;
}

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

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

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>

Teste
<table>
<tr>....
.....</tr><tr>....
.....</tr>
<tr>.... .....</tr>
</table>
<th>Cidade</th>
<td>28</td>

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>

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

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

Cores na tabela?
th {
background-color: #cc6600;
}

Css nas células corretas
.cellcolor {
background-color: #fcba7a;
}

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>

O Navegador carrega uma página

Você preenche dados...
..e envia as informações

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>

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>

Como o elemento form funciona?
<form action= "http://www.fa7.edu.br/phpparainiciantes/modulo1/
saudacao.php"
method=“POST">
</form>

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

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

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

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

•  O elemento <textarea> cria uma área de
texto de múltiplas linhas.
<textarea name="comentarios" rows="7" cols="50"></textarea>

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

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

Html Exercicio

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Mais de Eduardo Mendes (20)

Html Exercicio