Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Projeto - Prático em HTML (Segundo Projeto)

    Enviado por

    Paulo Roberto Sotto Maior
    3 visualizações3 páginas

    Título original

    PROJETO_PRÁTICO EM HTML (SEGUNDO PROJETO)

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    3 visualizações3 páginas

    Projeto - Prático em HTML (Segundo Projeto)

    Enviado por

    Paulo Roberto Sotto Maior

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 3

    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>

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

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

    <!--Terceira linha-->
    <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

    <!--Quarta linha-->
    <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>

    <!--Quinta linha-->
    <DIV CLASS="linha">
    <DIV CLASS="colunaEsquerda">
    <H3>Uote OS4</H3>
    <P>Atualize agora.</P>
    <IMG SRC="uoteos4.png">
    </DIV>
    <DIV CLASS="colunaDireita">
    <H3>mapOS Serra Grande</H3>
    <P>Atualize agora.</P>
    <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>

    “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

    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: alexsand.cebrac@gmail.com, NÃO ENVIE A PASTA COM AS IMAGENS, somente os
    dois arquivos descritos acima.

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


    sumirem”.
    John Quincy Adams

    Você também pode gostar