Projeto - Prático em HTML (Segundo Projeto)

GERAÇÃO WEB
Aluno: ______________________________________________________ Turma: ______________________ NOTA:
_______
Professor: ___________________________________________________ Data: _____/______/__________
PROJETO – PRÁTICO 2 - HTML
1)Abra o aplicativo do bloco de notas e digite o código HTML abaixo e salve o arquivo na área de trabalho com o nome: index.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Pear Brasil</TITLE>
<LINK REL="stylesheet" href="estilo.css">
</HEAD>
<BODY>
<DIV ID="recipiente">
<DIV ID="cabecalho">
<H1>Pear</H1>
<UL>
<LI>HOME</LI>
<LI>SMARTPHONES</LI>
<LI>RELOGIOS</LI>
<LI>NOTEBOOKS</LI>
<LI>LOJA ONLINE</LI>
<LI>SOBRE A EMPRESA</LI>
</UL>
</DIV>

<DIV CLASS="linha">
<DIV ID="recLinha1">
<H2>aIFone 18</H2>
<P>A melhor geração do aIFone</P>
<IMG SRC="aifone.png">
</DIV>
</DIV>

<DIV CLASS="linha">
<H2>aiFone Zica</H2>
<P>Chega no futuro e fala: Éh Nois!</P>
<IMG SRC="aifonezica.jpg">
</DIV>

<DIV CLASS="linha">
<H2>Uote</H2>
<P>Da hora em todos os sentidos.</P>
<IMG SRC="uote.jpg">
</DIV>
“Paciência e perseverança tem o efeito mágico de fazer as dificuldades desaparecerem e os obstáculos
sumirem”.
John Quincy Adams
GERAÇÃO WEB

<DIV CLASS="linha">
<DIV CLASS="colunaEsquerda">
<DIV ID="recTv">
<H3>Pear TiVí 8k</H3>
<P>Sua TV 8k</P>
<IMG SRC="tivi.png">
</DIV>
</DIV>
<DIV CLASS="colunaDireita">
<H3>aiOS11</H3>
<P>Atualize agora.</P>
<IMG SRC="aios11.png">
</DIV>
</DIV>

<DIV CLASS="linha">
<DIV CLASS="colunaEsquerda">
<H3>Uote OS4</H3>
<IMG SRC="uoteos4.png">
</DIV>
<DIV CLASS="colunaDireita">
<H3>mapOS Serra Grande</H3>
<IMG SRC="serragrande.png">
</DIV>
</DIV>
<DIV ID="rodape">
<P>Alguns produtos e promoções não estão
disponíveis no Brasil.</P>
<ADDRESS>
Rua do Pé de Goiaba - 328; Bairro Salada Mista.
</ADDRESS>
</DIV>
</DIV>
</BODY>
</HTML>

sumirem”.
John Quincy Adams
GERAÇÃO WEB
2) Abra o aplicativo do bloco de notas e digite o código CSS abaixo e salve o arquivo na área de trabalho com o
nome: estilo.css
#cabecalho{ /*Definindo o que vamos editar*/

width: 100%; /*Largura do elemento*/
height: 45px; /*Altura do elemento*/
background-color: #32302F; /*Cor do fundo*/
}
H1{ /*Título da página*/
color: #FFFFFF; /*Cor da letra*/
font-family: Mv Boli; /*Tipo da letra*/
font-size: 32px; /*Tamanho da letra*/
float:left; /*Elemento flutuando a esquerda*/
line-height: 6px; /*Altura da linha*/
margin-left: 10px;
}
UL{ /*Menu Completo*/
color: #FFFFFF;
font-family: Calibri;
float:right;
line-height:15px;
}
LI{ /*Itens do Menu*/
display: inline; /*Coloca o menu na horizontal*/
margin-right: 50px; /*Cria uma margem a esquerda*/
}
#recipiente{
margin: -8px;
}
.linha{
width: 100%;
height: 400px;
}
.linha img{
width:100%;
height:auto;
}
3) Baixe as imagens do site, no endereço: goo.gl/gVkJ8x
4) Crie uma pasta na área de trabalho e coloque dentro todos os arquivos criados por você: index.html, estilo.css e
envie para o e-mail do professor: [email protected], NÃO ENVIE A PASTA COM AS IMAGENS, somente os
dois arquivos descritos acima.

sumirem”.
John Quincy Adams

Projeto - Prático em HTML (Segundo Projeto)

Enviado por

Direitos autorais:

Formatos disponíveis

Projeto - Prático em HTML (Segundo Projeto)

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Projeto - Prático em HTML (Segundo Projeto)

Enviado por

Direitos autorais:

Formatos disponíveis

GERAÇÃO WEB

Aluno: ________________________________ Turma: NOTA:

PROJETO – PRÁTICO 2 - HTML

“Paciência e perseverança tem o efeito mágico de fazer as dificuldades desaparecerem e os obstáculos

#cabecalho{ /Definindo o que vamos editar/

3) Baixe as imagens do site, no endereço: goo.gl/gVkJ8x

“Paciência e perseverança tem o efeito mágico de fazer as dificuldades desaparecerem e os obstáculos

Você também pode gostar