Scribd Logo
Carregar

Bem-vindo(a) ao Scribd!

  • 3K visualizações

    Atividade Pratica 2021 - Fundamentos Desenv Software

    Enviado por

    LauraAzevedo
    Este documento apresenta duas atividades práticas para codificação de páginas HTML. A primeira atividade pede para codificar uma página com estilos CSS para formatar texto. A segunda atividade pede para criar uma tabela com formulário de pedido de pizza usando estilos CSS para formatação.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd

    Atividade Pratica 2021 - Fundamentos Desenv Software

    Enviado por

    LauraAzevedo
    3K visualizações11 páginas
    Este documento apresenta duas atividades práticas para codificação de páginas HTML. A primeira atividade pede para codificar uma página com estilos CSS para formatar texto. A segunda atividade pede para criar uma tabela com formulário de pedido de pizza usando estilos CSS para formatação.

    Descrição original:

    exerícios fndamentos sw

    Título original

    ATIVIDADE PRATICA 2021 - FUNDAMENTOS DESENV SOFTWARE

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Este documento apresenta duas atividades práticas para codificação de páginas HTML. A primeira atividade pede para codificar uma página com estilos CSS para formatar texto. A segunda atividade pede para criar uma tabela com formulário de pedido de pizza usando estilos CSS para formatação.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    3K visualizações11 páginas

    Atividade Pratica 2021 - Fundamentos Desenv Software

    Enviado por

    LauraAzevedo
    Este documento apresenta duas atividades práticas para codificação de páginas HTML. A primeira atividade pede para codificar uma página com estilos CSS para formatar texto. A segunda atividade pede para criar uma tabela com formulário de pedido de pizza usando estilos CSS para formatação.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Fazer download em pdf ou txt
    de 11

    CENTRO UNIVERSITÁRIO INTERNACIONAL UNINTER

    ESCOLA SUPERIOR POLITÉCNICA


    BACHARELADO EM ENGENHARIA DE SOFTWARE
    FUNDAMENTOS DE DESENVOLVIMENTO DE SOFTWARE

    ATIVIDADE PRÁTICA

    LAURA XAVIER DE OLIVEIRA G DE AZEVEDO E MELLO – RU: 3763932


    PROFA. LUCIANE Y. H. KANASHIRO, M E.

    SÃO PAULO – SP
    2021
    1 ATIVIDADE 01

    Codifique uma página html com a aparência semelhante a imagem abaixo.

    Solução:
    <!DOCTYPE html>
    <html lang="pt-BR">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercicio 01</title>
    <!--Definindo folha de estilos para as fontes de acordo com o
    solicitado na atividade-->
    <style type="text/css">
    /* seletor elemento html h1 */
    h1{
    font-family:'book antiqua', 'Arial Narrow';
    }
    /* seletor id para letra verde */
    #letraVerde {
    color: green;
    font-family: 'book antiqua', 'Arial Narrow';
    font-size: 12px
    }
    /* seletor id para letra vermelha */
    #letraVermelha {
    color: red;
    font-size: 18px;
    font-family: 'bookman old style';
    }
    /* seletor id para letra azul */
    #letraAzul {

    1
    color: blue;
    font-size: 18px;
    font-family: 'bookman old style';
    }
    </style>
    </head>
    <body>
    <!--Definindo 'citação' como um cabeçalho principal 'h1'-->
    <h1>citação:</h1>
    <!-- Início parágrafo, atribuindo id para ele e utilizando o elemento
    'span' para separar as formatações das palavras-->
    <p id="letraVerde">Não há <span id="letraVermelha">saber maior</span>
    ou <span id="letraAzul">saber menor</span>: há saberes diferentes.
    <!-- Insere quebra de linha -->
    <br>
    Paulo Freire
    </p>
    <!--Fim do parágrafo-->
    </body>
    </html>

    Imagem da página no navegador:


    2 ATIVIDADE 02

    Utilizando tabela, crie um documento HTML com aparência semelhante à imagem


    abaixo. Crie folhas de estilos para estilizar sua tabela.

    3
    Coloque a tabela dentro de uma div por motivos de responsividade:
    <div style="overflow-x:auto;">
    </div>

    Solução:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Atividade 02</title>
    <style type="text/css">
    /*definindo cabeçalho com img pizza planet e fundo verde*/
    #cabecalho {
    background-color: #04aa6d;
    height: 200px;
    padding: 15px 10px 15px 20px;
    }
    /*tabela com 70% do tamanho da tela*/
    table {
    width: 70%;
    }
    /*definindo as bordas da tabela*/
    table, th, td {
    border:1px solid black;
    }
    /*definindo comprimento da caixa do campo input de nome*/
    .nome {
    width: 95%;
    }
    /*definindo nome do campo com 5% da tamanho da tela*/
    .campo {
    width: 5%;
    }
    /*deixando alinhado ao centro o botão enviar*/
    table [type="submit"] {
    display: block;
    margin: auto;
    }
    /*pintando de marrom os campos*/
    .marrom {
    background-color: #BA743B;
    }
    </style>
    </head>
    <body>
    <!--Tag de responsividade-->
    <div style="overflow-x:auto;">
    <table>
    <!--criando div para deixar o cabeçalho apartado do resto da tabela-->
    <div>
    <!--aplicando id de cabecalho. uso do id aqui por conta de somente ocorrer uma única vez no documento-->
    <tr id="cabecalho">
    <!--colspan=2 para ocupar todas as 2 colunas da tabela de comprimento-->
    <th colspan="2"><img src="C:/Users/azeve/OneDrive/Área de Trabalho/pizza_planet.png"></th>
    </tr>
    </div>
    <div>
    <!--definindo campo de nome e caixa de input-->
    <tr>
    <td class="campo marrom">Nome</td>
    <td class="marrom">&nbsp<input type="text" class="nome"></td>
    </tr>
    <!--definindo campo de tamanho e opções de radio button para escolha-->
    <tr>
    <td class="campo">Tamanho</td>
    <td>
    <!--definindo opções de tamanho com radio button e separando as opções cada
    uma em uma linha utilizando a tag de quebra de linha <br>-->
    <input type="radio" name="tamanho" value="g" checked> Grande <br>
    <input type="radio" name="tamanho" value="m"> Médio <br>
    <input type="radio" name="tamanho" value="p"> Pequeno <br>
    </td>
    </tr>
    <!--definindo campo de sabor e opções de select para escolha + pintando de marrom-->
    <tr>
    <td class="campo marrom">Sabor</td>
    <td class="marrom">
    <select name="sabor">
    <!-- selected faz a frase ficar como default, disabled significa que nao é
    uma opção válida de sabor para ser escolhido e o hidden oculta a frase quando
    lista as opções de sabores-->
    <option selected disabled hidden>Por favor selecione</option>
    <option>Mussarela</option>
    <option>Berinjela</option>
    <option>Milho</option>
    </select>
    </td>
    </tr>
    <!--definindo campo de adicionais e opções de checkbox para escolha de mais de
    uma opção-->
    <tr>
    <td class="campo">Adicionais</td>
    <td>
    <input type="checkbox" name="borda" value="sim"> borda <br>
    <input type="checkbox" name="queijo" value="sim"> queijo
    </td>
    </tr>
    <!--definindo campo de observações e textarea para inserir um texto em mais de uma linha-->
    <tr>
    <!--colspan=2 para ocupar todas as 2 colunas da tabela de comprimento + pintando de marrom-->
    <td colspan="2" class="marrom">
    Observações: <br>
    <!--tamanho do textarea: 120 colunas e 10 linhas-->
    <textarea name="observacoes" cols="120" rows="10"></textarea>
    </td>
    </tr>
    <!--definindo botão de enviar e colspan=2 para ocupar todas as 2 colunas da tabela-->
    <tr>
    <td colspan="2"><input type="submit"></td>
    </tr>
    </div>
    </table>
    </div>
    </body>
    </html>

    Imagem da página no navegador:

    Você também pode gostar