Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Gabarito_AD1_WEB_2022_1
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Fundação CECIERJ - Vice Presidência de Educação Superior a Distância
Curso de Tecnologia em Sistemas de Computação
Disciplina Construção de Páginas WEB
Gabarito da AD1 1° semestre de 2022.
Observações importantes:
1. Esta avaliação consiste no desenvolvimento do site de uma loja que vende
dispositivos de armazenamento de dados (memórias RAM, HDs e SSDs). As
imagens utilizadas nas páginas de exemplo estarão disponíveis para
download na plataforma como arquivos auxiliares. Você pode utilizar outras
imagens desde que respeite o layout estabelecido em cada questão.
2. A resolução do monitor ou o tamanho da janela do navegador onde as
páginas serão exibidas não tem importância. Nas figuras ilustrativas das
questões, a janela do navegador foi dimensionada para exibir um efeito
visual que sua página deve reproduzir, quando dimensionada de forma
semelhante.
3. Os trabalhos devem ser feitos utilizando editores simples, que não incluam
código no texto. Utilize preferencialmente o Notepad (Windows) ou o Gedit
(Linux). Outros editores, com esta característica, podem ser utilizados como
Notepad++ e PsPad (Windows); Kate e Kwrite (Linux); Coda e TextMate
(Mac); ou Gedit, Geany, Atom e Visual Studio Code (Multiplataforma).
4. ATENÇÃO: A avaliação é individual. Caso existam duas ou mais
implementações excessivamente coincidentes, independente de qualquer
motivo, todas as avaliações envolvidas receberão nota ZERO!
5. Não serão aceitos trabalhos em papel. O aluno deve postar na atividade
determinada na plataforma. É imprescindível que o tutor receba todos os
arquivos que compõem o site. A entrega destes arquivos deve ser feita através
DA PLATAFORMA na forma de um arquivo de extensão zip. Os arquivos
HTML, JS ou CSS devem estar individualizados (mesmo que agrupados num
ZIP) para que o tutor possa testar seu site. Não serão aceitos trabalhos em
arquivos de texto DOC ou PDF.
6. Fazer as ADs é muito importante, não apenas pela nota, mas principalmente
pela experiência que permitirá um melhor desempenho nas avaliações
presenciais. Os assuntos abordados na AD podem cair na prova presencial
mesmo não tendo sido abordados nos vídeos ou no material escrito.
PÁGINA COM LAYOUT BASEADO EM TABELA
1. Escreva o código necessário para criar esta página mostrada na figura 1. O
posicionamento dos elementos na página deve ser feito utilizando uma tabela de bordas
invisíveis. Os textos da página devem utilizar as fontes “georgia” e “serif” (principal,
alternativa). As referências do menu apontam respectivamente para as páginas:
PakiMemo.html, Memorias.html, Discos.html, Cadastro.html e Compras.html. Os links
do menu estão numa lista NÃO numerada, com cada item indicado por um quadrado
(square). A seleção de um link deve causar a abertura da página correspondente em uma
nova janela do navegador (ou novo tab). Use uma tag <address> para as informações de
localização (endereço, telefone e e-mail). No canto superior esquerdo aparece uma
imagem (arquivo PakiLogoTopo.png), com uma linha contínua abaixo dela (criada pela
tag HR com tamanho 370 px). Junto com o texto de apresentação aparece a imagem
PakiLogo.png centralizada. As cores utilizadas foram: Fundo - #116688, Texto -
#EEEE22, Link - #FFFF22 e Link Visitado - #DDDD22. [1,0 ponto]
Arquivo HTML:
<html><head><title>PakiMemo - Armazenamento de Dados</title>
<base target="_blank" /></head>
<body bgcolor="#116688" text="#EEEE22"
link="#FFFF22" vlink="#DDDD22">
<table width="100%">
<tr><td colspan="2">
<img src="Imagens/PakiLogoTopo.png" align="left" />
<div align="right">
<font face="georgia,serif">
<address>Rua do Paço do Elefantinho, 123<br/>
Tel: (21) 4321-5678<br/>
<a href="mailto:contato@paquiderme.com.br">
contato@paquiderme.com.br</a></address>
</font></div>
<font face="georgia,serif" color="#EEEE22">
<br/><hr width="370" align="left" size="3" noshade />
</font>
</td></tr>
<tr><td width="180" valign="top"><br/>
<font face="georgia,serif" color="#EEEE22">
<ul type="square">
<li><a href="2_PakiMemo.html">INICIAL</a></li><br/>
<li><a href="3_Memorias.html">MEMÓRIAS</a></li><br/>
<li><a href="4_Discos.html">HDs / SSDs</a></li><br/>
<li><a href="5_Cadastro.html">CADASTRO</a></li><br/>
<li><a href="6_Compras.html">COMPRAS</a></li></ul>
</font> </td>
<td><div align="center">
<font face="georgia,serif" size="+1">
<p><img src="Imagens/PakiLogo.png" hspace="20"/></p>
<p>Aqui você encontra HDs, SSDs e Memórias
para seu computador.</p>
</font></div></td></tr>
</table></body></html>
PÁGINA COM CSS E ESTRUTURA HTML5
Leia o texto “Caminho até o HTML5” disponibilizado na seção “textos” da primeira
semana para que você possa implementar uma nova versão de sua página inicial e todas
as demais páginas do trabalho. É recomendável também que você tenha lido o material
“Folhas de Estilo”.
2. Faça uma nova implementação da página inicial da loja, desta vez utilizando as tags de
estrutura do HTML5 (figura 2). A aparência deve ser definida por estilos armazenados
em um arquivo de extensão css (não devem ser usadas na página atributos e tags
obsoletas). Para esta página foram criadas três classes de estilo: ender, imgLogo e apres.
Além disso, as tags <body>, <header>, <nav>, <section>, <ol>, <ul> e <a> tiveram sua
aparência modificada. Os textos da página devem utilizar as fontes “Lora”, “georgia” e
“serif” (principal, alternativa, alternativa) para o endereço e a descrição, e as fontes
“Rubik”, “verdana” e “sans-serfif” (principal, alternativa, alternativa) para o menu. No
quadro 1 são mostrados os estilos das tags de estrutura para produzir o posicionamento
mostrado na figura. A descrição dos estilos que devem ser aplicados às outras classes e
tags está no quadro 2. [1 ponto]
DICA: A página precisa utilizar as tags header, nav e section (não necessariamente
nesta ordem).
DICA: As fontes “Lora” e “Rubik” são disponibilizadas pelo Google. Consulte a página
https://www.w3schools.com/csS/css_font_google.asp para saber como usá-los.
DICA: A tag <hr/> foi substituída pela definição da borda.
header { display: block; margin-bottom: 1px; }
nav { display: block; width: 18%; float: left; }
section { display: block; width: 70%; float: right; }
Quadro 1 – Estilo das divisões padrão da página
<body> Cor de fundo #116688, cor de texto #EEEE22, tamanho de fonte de
16px e fontes Lora, Georgia, serif.
<nav> Aos estilos de posicionamento acrescente: margem direita de 10px e
fontes Rubik, Verdana, sans-serif.
<a> Sem sublinhado, cor de link #FFFF22 e link visitado #DDDD22.
<ol> e <ul> Espaçamento entre as linhas (line-height) de 200%
<ul> dentro
de <nav>
Cor de texto #FFDD22, espaçamento entre as linhas (line-height) de
230%, margem superior de 40px e marca de início de item (list-style-
type) como quadrado (square).
ender Informações de localização (endereço, telefone e e-mail). Texto
alinhado a direita, tamanho de fonte 14px, espaçamento entre as
linhas (line-height) de 140% e elemento todo colado na direita da
janela (float com valor right).
imgLogo Logo do topo esquerdo da página. Borda inferior solida e com 3px,
margem inferior de 4px e espaçamento do conteúdo com a borda
inferior da célula (padding-bottom) de 5px.
apres Texto e imagem de apresentação da página. Alinhamento de texto
centralizado (center) e tamanho do fonte de 18px.
Quadro 2 – Classes de Estilo da Página
Arquivo HTML:
<!DOCTYPE html>
<html><head><title>PakiMemo - Armazenamento de Dados</title>
<base target="_blank" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lora|Rubik">
<link rel="stylesheet" type="text/css" href="PakiMemo.css" />
</head>
<body>
<header>
<address class="ender">Rua do Paço do Elefantinho, 123<br/>
Tel: (21) 4321-5678<br/>
<a href="mailto:contato@paquiderme.com.br">
contato@paquiderme.com.br</a></a></address>
<img class="imgLogo" src="Imagens/PakiLogoTopo.png"/></span>
</header>
<nav>
<ul><li><a href="2_PakiMemo.html">INICIAL</a></li>
<li><a href="3_Memorias.html">MEMÓRIAS</a></li>
<li><a href="4_Discos.html">HDs / SSDs</a></li>
<li><a href="5_Cadastro.html">CADASTRO</a></li>
<li><a href="6_Compras.html">COMPRAS</a></li></li></ul>
</ul>
</nav>
<section>
<div class="apres">
<p><img src="Imagens/PakiLogo.png"/></p>
<p>Aqui você encontra HDs, SSDs e Memórias
para seu computador.</p>
</div>
</section>
</body>
</html>
Arquivo CSS:
/*
* Estilo Seções
*/
header {
display:block;
margin-bottom: 1px;
}
nav {
display:block;
width: 18%;
float: left;
margin-right: 10px;
font-family: Rubik, Verdana, sans-serif;
}
section {
display:block;
width: 70%;
float: right;
}
/*
* Estilo Geral
*/
body {
color: #EEEE22;
font-size: 16px;
background-color: #116688;
font-family: Lora, Georgia, serif;
}
a:link { color:#FFFF22; text-decoration:none; }
a:visited { color:#DDDD22; text-decoration:none; }
ol { line-height: 200%; }
ul { line-height: 200%; }
/*
* Estilo Nav
*/
nav ul {
color: #FFDD22;
margin-top: 40px;
line-height: 230%;
list-style-type: square;
}
/*
* Estilo Header
*/
.ender {
float: right;
text-align: right;
font-size: 14px;
line-height: 140%;
}
img.imgLogo {
padding-bottom: 5px;
border-bottom: 3px solid;
margin-bottom: 4px;
}
/***************************************
* Estilo Seção Apresentação
*/
div.apres {
text-align: center;
font-size: 18px;
}
VÁRIOS TIPOS DE LISTA
3. A imagem ao lado mostra a página que será
aberta quando o link “Memórias” for
selecionado na página da segunda questão. Esta
e as próximas páginas utilizam os mesmos
estilos da questão anterior, com o acréscimo de
algumas novas classes. A descrição destes acréscimos está no quadro 3 e eles devem ser
adicionados ao arquivo CSS usado na questão anterior. Apenas o interior da tag section
(figura 3) foi modificado em relação à página da segunda questão (header e nav
permanecem como mostrado na figura 2). [2 pontos]
Titulo Texto com alinhamento centralizado
preco Cor de texto #EE0000, texto em negrito (bold) e alinhamento vertical
de texto no meio da célula (middle).
listaMemo Largura de 340px, cor de texto #AA0000, cor de fundo #EEEEEE,
espaçamento entre o interior e a borda (padding) variável (10px 10px
10px 50px) e borda de 4px, sólida e na cor #000055. Margem superior
de 0px e inferior de 10px. Lista centralizada na página (DICA:
margem esquerda e direita com valor auto). Lista numerada com
números arábicos (decimal). Fontes Rubik, Verdana, sans-serif.
ESTILOS DENTRO DE listaMemo
<ul> Cor de texto #114455 e estilo de lista disco (disc).
Quadro 3 - Classes de Estilo da página Memórias
Session do Arquivo HTML:
<section>
<h3 class="Titulo">Memórias</h3>
<ol class="listaMemo">
<li>DDR3
<ul>
<li>Kingston 4Gb - <span class="preco">R$ 200,00</span></li>
<li>Samsung 8Gb - <span class="preco">R$
190,00</span></li></ul></li>
<li>DDR4
<ul>
<li>Kingston Fury 8Gb - <span class="preco">
R$ 298,00</span></li>
<li>Corsair Vengeance 8GB - <span class="preco">
R$ 245,00</span></li></ul></li>
</ol>
</section>
Inclusão no Arquivo CSS:
/***************************************
* Estilo Seção Memórias
*/
.Titulo {
text-align: center;
}
.listaMemo {
color: #AA0000;
width: 340px;
border: 4px solid #000055;
margin: 0px auto 10px auto;
padding: 10px 10px 10px 50px;
background-color: #EEEEEE;
list-style-type: decimal;
font-family: Rubik, verdana, sans-serif;
}
.listaMemo ul {
color: #114455;
list-style-type: disc;
}
.preco {
color: #EE0000;
font-weight: bold;
vertical-align: middle;
}
TABELA COMUM COM JUNÇÃO DE CÉLULAS
4. A figura 4 mostra o interior da section da página (imagem ao
lado) que será aberta quando o link “HDs e SSDs” for
selecionado na página da segunda questão. Esta página utiliza
os mesmo estilos da questão anterior, com o acréscimo de
algumas novas classes. A apresentação dos produtos é feita
através de uma tabela com bordas definida com o estilo tabDisco. A tabela têm as tags
<td>, <th> e <img> modificadas conforme o contexto. Foram também definidas as
classes linTH (utilizada nas células de legenda das colunas), colTH (utilizada nas células
de legenda das linhas) e imgDisco (células onde aparece a imagem do produto). Apenas o
interior da tag section foi modificado em relação à página da segunda questão (header e
nav permanecem como mostrado na figura 2). A descrição dos novos estilos está no
quadro 4 e eles devem ser adicionados ao arquivo CSS da questão anterior. [2 pontos]
tabDisco Borda sólida e fina (DICA: border-collapse com valor collapse),
margem superior de 6px e inferior de 10px, cor de fundo #FFFFFF,
cor de texto #000066 e fontes Rubik, verdana, sans-serif. Tabela
centralizada na página (DICA: margem esquerda e direita com valor
auto). Tamanho de fonte de 14px.
ESTILOS DENTRO DE tabDisco
<td> e <th> Borda de 3px, sólida e de cor #226699. Espaçamento do conteúdo
com a borda da célula (padding) variável (6px 12px 6px 12px).
titulo Cor de texto #FFFF00, cor de fundo #229955, texto em negrito e
centralizado de tamanho 16px.
linTH Cor de texto #FFFFFF, cor de fundo #22BB66, alinhamento vertical
de texto no meio da célula (vertical-align com valor middle) e
alinhamento horizontal de texto centralizado.
colTH Cor de texto #FFFFFF, cor de fundo #2299DD e alinhamento de texto
à esquerda.
imgDisco Largura e altura de 70px.
Quadro 4 - Classes de Estilo da Página HDs e SSDs
OBS: As páginas criadas para esta avaliação se referem a uma loja hipotética. A
descrição dos produtos está simplificada por motivos didáticos.
Session do Arquivo HTML:
<section><br/>
<table class="tabDisco">
<tr><th colspan="5" class="titulo">HDs e SSDs Internos</th></tr>
<tr><th class="linTH">Tipo/Interface</th>
<th class="linTH">Fabricante</th>
<th class="linTH">Capacidade</th>
<th class="linTH">Foto</th>
<th class="linTH">Preço</th></tr>
<tr><th rowspan="2" class="colTH">
HD Sata III</th>
<td>Western Digital</td>
<td>500 Gb</td>
<td><img class="imgDabel"
src="Imagens/HD_WD_500gb_70.jpg" /></td>
<td class="preco">R$ 170,00</td></tr>
<tr><td>Seagate</td>
<td>1 Tb</td>
<td><img class="imgDabel"
src="Imagens/HD_Seagate_1Tb_70.jpg" /></td>
<td class="preco">R$ 350,00</td></tr>
<tr><th rowspan="2" class="colTH">
SSD Sata III</th>
<td>Samdisk</td>
<td>480 gb</td>
<td><img class="imgDabel"
src="Imagens/SSD_Samdisk_480Gb_70.jpg" /></td>
<td class="preco">R$ 380,00</td></tr>
<tr><td>Kingston</td>
<td>960 gb</td>
<td><img class="imgDabel"
src="Imagens/SSD_Kingston_960Gb_70.jpg" /></td>
<td class="preco">R$ 700,00</td></tr>
<tr><th rowspan="2" class="colTH">
SSD M2</th>
<td>Kingston</td>
<td>500 Gb</td>
<td><img class="imgDabel"
src="Imagens/SSD_Kingston_M2_5000Gb_70.jpg" /></td>
<td class="preco">R$ 410,00</td></tr>
<tr><td>Western Digital</td>
<td>240 Gb</td>
<td><img class="imgDabel"src="Imagens/SSD_WD_M2_240Gb_70.jpg" /></td>
<td class="preco">R$ 270,00</td></tr>
</table>
</section>
Inclusão no Arquivo CSS:
/***************************************
* Estilo Seção Discos
*/
.tabDisco {
color: #000066;
font-size: 14px;
margin: 6px auto 10px auto;
border-collapse: collapse;
background-color: #FFFFFF;
font-family: Rubik, verdana, sans-serif;
}
.tabDisco td, .tabDisco th {
border: 3px solid #226699;
padding: 6px 12px 6px 12px;
}
.tabDisco .titulo {
color: #FFFF00;
font-size: 16px;
font-weight: bold;
text-align: center;
background-color: #229955;
}
.tabDisco .linTH {
color: #FFFFFF;
text-align: center;
vertical-align: middle;
background-color: #22BB66;
}
.tabDisco .colTH {
color: #FFFFFF;
text-align: left;
background-color: #2299DD;
}
.imgDisco {
width: 70px;
height: 70px;
}
FORMULÁRIOS COM NOVOS ELEMENTOS
O site termina com duas páginas de formulário. Para cria-las, devemos utilizar os
elementos <fieldset> e <legend> para organizar os seus campos logicamente e para
compor o seu visual. Não devemos esquecer também os elementos <label> para ligar os
textos de identificação com os campos do formulário.
O posicionamento dos campos do formulário sempre foi uma tarefa complicada.
Antigamente, utilizavam-se tabelas sem bordas para fazer este posicionamento e definir o
layout. A tendência hoje em dia é evitar o uso de tabelas para esse fim, utilizando CSS no
lugar. O layout pode ser definido através do posicionamento de caixinhas (boxes), uma
dentro de outra, como mostrado na figura 5. No quadro 5 está a definição de um conjunto
de classes que podem ser utilizadas nos formulários das próximas questões, de modo a
obter a aparência definida nos enunciados.
Figura 5 – Exemplo de utilização de algumas das classes
FormBox Largura de 520px, cor de fundo #33BBBB, Espaçamento entre o
interior e a borda (padding) de 10px, tamanho de fonte de 16px,
texto do interior centralizado, margem superior de 10px e borda de
3px, sólida e na cor #EEEE22.
POSICIONAMENTO E TAMANHO DE FIELDSETS
FSLinhaInteira Fieldset que ocupa toda a largura do box. Cor de texto branca,
largura 490px e texto alinhado a esquerda.
FSColEsq Fieldset da coluna esquerda. Largura 210px e texto centralizado,
preso ao lado esquerdo do formulário (float com valor left).
FSColDir Fieldset da coluna direita. Largura 210px e texto centralizado, preso
ao lado direito do formulário (float com valor right).
POSICIONAMENTO E TAMANHO DE BOXES INTERNAS DOS FILEDSETS
LinhaForm Margem 0px, altura de 30px e espaçamento entre o interior e a borda
(padding) variável (6px 3px 0px e 3px).
ColEsq Largura de 180px. Preso ao lado esquerdo do formulário (float com
valor left). Elemento de bloco (DICA: display com valor block).
ColDir Largura de 180px. Preso ao lado direito do formulário (float com
valor right). Elemento de bloco (DICA: display com valor block).
LabBox Largura de 80px. Preso ao lado esquerdo do formulário (float com
valor left). Elemento de bloco (DICA: display com valor block).
botoes Botões de envio e limpeza colocados dentro de um <div> com
alinhamento de texto à direita e margem variável (20px 10px 0px
10px).
TAMANHO DE ELEMENTOS DE ENTRADA DE VALORES
InpBoxGnd Input de largura de 384px. Preso ao lado direito do formulário (float
com valor right). Elemento de bloco (DICA: display valor block).
InpBoxMed Input de largura de 80px. Preso ao lado direito do formulário (float
com valor right). Elemento de bloco (DICA: display valor block).
numDD Input numérico de dois dígitos com largura de 35px.
numQD Input numérico de quatro dígitos com largura de 50px.
Quadro 5 - Classes que podem ser usadas nos formulários
IMPORTANTE: Nos formulários devemos também utilizar, sempre que possível, os
novos elementos definidos a partir do HTML5, mesmo que nem todos os navegadores
estejam atualmente preparados para aproveitar todo o potencial destes elementos. Está
disponibilizado na seção “textos” da quinta semana (Formulários) material para que você
possa implementar seus formulários com as novidades do HTML5.
DICA IMPORTANTE: Não esqueça que o atributo nome deve estar definido em todos
os elementos dos formulários.
ATENÇÃO
Alguns identificadores ficaram com a definição errada no enunciado:
#inpEnder altura de 80px 80%.
#fsBandeira altura LARGURA de 80px.
Há também uma diferença na forma em que os navegadores Firefox e Chrome
interpretam a definição do estilo de texto centralizado quando aplicado à tag FieldSet. No
primeiro navegador apenas os elementos no interior do FieldSet ficam centralizados,
enquanto que no segundo, o título do FieldSet também fica centralizado. Essa diferença
pode ser notada na figura 5 (imagem gerada no Chrome) e na figura 6 (imagem gerada no
Firefox). Nesse caso o aluno deve seguir a definição, que centraliza os elementos dentro
do Fieldset em ambos navegadores.
Importante notar que nos três casos estamos privilegiando sempre a visualização, uma
vez que a definição é apenas como uma sugestão ou uma dica para o aluno.
5. A imagem ao lado mostra a página que será aberta
quando o link “Cadastro” for selecionado na página da
segunda questão. A página utiliza as mesmas cores e
estilos definidos para as páginas das questões anteriores
e os novos estilos descritos no quadro 5. Utilizando tags
como <form>, <label>, <input>, <textarea>,
<fieldset> e <legend>, faça o formulário de modo que o posicionamento de seus
elementos seja como o mostrado na figura 6.
Apenas o interior da tag section foi modificado em relação à página da segunda questão.
Utilize os estilos descritos no quadro 5, adicionando-os ao arquivo CSS usado na questão
4. Será necessário modificar alguns desses estilos para atender às particularidades de
elementos deste formulário. Essas modificações estão especificadas no quadro 6. Defina
identificadores para os elementos que serão modificados e inclua-os dentro de uma tag
<style> no início do arquivo (dentro da tag <head>). [2 pontos]
IDENTIFICADORES DA PÁGINA DE CADASTRO
#linhaEnder Modificação da classe LinhaForm com altura de 50px.
#inpEnder Modificação da classe InpBoxGnd com Largura de 394px e altura de
80px 80%.
Quadro 6 – Identificadores da página de Cadastro
Session do Arquivo HTML:
<section>
<div class="FormBox">
<h3 class="Titulo">Cadastro</h3>
<form method="POST">
<fieldset class="FSLinInteira">
<legend>Identificação</legend>
<div class="LinhaForm">
<label for="idEmail" class="LabBox">E-mail:</label>
<input id="idEmail" class="InpBoxGnd"
type="email" name="TxtEmail" required /></div>
<div class="LinhaForm">
<span class="ColEsq">
<label for="idSenha" class="LabBox">Senha:</label>
<input id="idSenha" class="InpBoxMed"
type="password" name="TxtSenha" required /></span>
<span class="ColDir">
<label for="idConf" class="LabBox">Confirme:</label>
<input id="idConf" class="InpBoxMed"
type="password" name="TxtConf" required /></span>
</div>
</fieldset>
<fieldset class="FSLinInteira">
<legend>Dados Pessoais</legend>
<div class="LinhaForm">
<label for="idNome" class="LabBox">Nome:</label>
<input id="idNome" class="InpBoxGnd"
type="text" name="TxtNome" required /></div>
<div class="LinhaForm" id="linhaEnder">
<label class="LabBox">Endereço: </label>
<textarea name="TxtEnder" class="InpBoxGnd"
id="inpEnder" ></textarea>
</div>
<div class="LinhaForm">
<span class="ColEsq">
<label class="LabBox">Telefone:</label>
<input type="text" class="InpBoxMed"
name="TxtTelefone" required />
</label></span>
<span class="ColDir">
<label class="LabBox">Celular:</label><input type="text" class="InpBoxMed"
name="TxtCelular" />
</span></div>
<fieldset class="FSColEsq"><legend>Nacimento:</legend>
<input type="number" name="TxtDiaNasc"
min="1" max="31" class="numDD" /> /
<input type="number" name="TxtMesNasc"
min="1" max="12" class="numDD" /> /
<input type="number" name="TxtAnoNasc" value="1980"
min="1920" max="2000" class="numQD" />
</fieldset>
<fieldset class="FSColDir"><legend>Sexo:</legend>
<label><input type="radio" name="TglSexo"
value="M" />Mas</label>
<label><input type="radio" name="TglSexo"
value="F" />Fem</label>
<label><input type="radio" name="TglSexo"
value="O" checked />Outro</label>
</fieldset>
</fieldset>
<div class="botoes">
<input type="submit" value="Cadastrar" />
<input type="reset" value="Limpar" />
</div>
</div>
</section>
Inclusão no Arquivo CSS:
/***************************************
* Estilo dos Formulários
*/
.FormBox {
width: 520px;
padding: 10px;
margin-top: 10px;
font-size: 16px;
text-align: center;
background-color: #33BBBB;
border: 3px solid #EEEE22;
}
/*** Fieldsets ***/
.FSLinInteira {
color: white;
width: 490px;
text-align: left;
}
.FSColEsq {
width: 210px;
float: left;
text-align: center;
}
.FSColDir {
width: 210px;
float: right;
text-align: center;
}
.LinhaForm {
margin: 0px;
height: 30px;
padding: 6px 3px 0px 3px;
}
.ColEsq {
width: 180px;
float: left;
display: block;
}
.ColDir {
width: 180px;
float: right;
display: block;
}
.LabBox {
width: 80px;
float: left;
display: block;
}
.InpBoxGnd {
width: 384px;
float: right;
display: block;
}
.InpBoxMed {
width: 80px;
float: right;
display: block;
}
.numDD { width:35px; }
.numQD { width:50px; }
.botoes {
text-align: right;
margin: 20px 10px 0px 10px;
}
Style do Arquivo HTML:
<style>
#linhaEnder { height: 50px; }
#inpEnder { height: 80%; width: 394px; }
</style>
6. A imagem ao lado mostra a página que será aberta
quando o link “Compras” for selecionado na página da
segunda questão. A página utiliza as mesmas cores e estilos
definidos para as páginas das questões anteriores e os novos
estilos descritos no quadro 5. Utilizando tags como
<label>, <input>, <form>, <textarea>, <select>,
<option>, <optgroup>, <fieldset> e <legend>, faça o formulário de modo que o
posicionamento de seus elementos seja como o mostrado na figura 7. A seleção da
palavra “aqui” no fieldset de identificação causa a abertura da página de cadastro (criada
na questão 5).
A figura 8 mostra o conteúdo da lista de seleção de produtos. Defina o atributo readonly
na lista de compras e no campo ao lado do label “valor”. Apenas o interior da tag section
foi modificado em relação à página da segunda questão. Utilize os estilos descritos no
quadro 5, adicionando-os ao arquivo CSS usado na questão 4. Será necessário modificar
alguns desses estilos para atender às particularidades de elementos deste formulário.
Essas modificações estão especificadas no quadro 7. Defina identificadores para os
elementos que serão modificados e inclua-os dentro de uma tag <style> no início do
arquivo (dentro da tag <head>). [2 pontos]
IDENTIFICADORES DA PÁGINA DE COMPRAS
#loginCad Modificação da classe ColEsq com largura de 260px.
#idEmail Modificação da classe InpBoxGnd com largura de 160px.
#senhaCad Modificação da classe ColDir com largura de 180px.
#lisSelProd Modificação da classe ColEsq com largura de 370px.
#selProduto Largura de 75%
#btnIncluir Modificação da classe ColDir com largura de 70px.
#boxPedidos Modificação da classe LinhaForm com altura de 100px.
#lisPedArea Altura de 90% e largura de 100%.
#fsBandeira Modificação da classe FSColDir com altura LARGURA de 80px e
texto alinhado à esquerda.
#numCartao Modificação da classe ColEsq com largura de 350px, altura de 35px e
padding superior de 10px.
#valCartao Modificação da classe ColEsq com largura de 230px e altura de 35px.
#boxParcel Modificação da classe ColEsq com largura de 230px e altura de 30px.
Quadro 7 – Identificadores da página de Compras
OBS GERAL: Todas as imagens utilizadas na avaliação foram capturadas no Firefox no
sistema operacional Linux, com exceção da figura 8 capturada no Chrome do Windows.
Session do Arquivo HTML:
<section>
<div class="FormBox">
<h3 class="Titulo">Compras</h3>
<form method="POST">
<fieldset class="FSLinInteira">
<legend>Identificação</legend>
<div class="LinhaForm">
<span class="ColEsq" id="loginCad">
<label for="idEmail" class="LabBox">E-mail:</label>
<input type="email" class="InpBoxGnd"
id="idEmail" name="TxtEmail" required /></span>
<span class="ColDir" id="senhaCad">
<label for="idSenha" class="LabBox">Senha:</label>
<input id="idSenha" class="InpBoxMed"
type="password" name="TxtSenha" required /></span>
</div>
<div class="LinhaForm">
<b><i>Se você ainda não tem cadastro clique
<a href="5_Cadastro.html">aqui</a></i></b>!</div>
</fieldset>
<fieldset class="FSLinInteira">
<legend> Lista de Compras </legend>
<div class="LinhaForm">
<span class="ColEsq" id="lisSelProd">
<label for="idEmail" class="LabBox">Produtos: </label>
<Select name="selProduto" id="selProduto" >
<option> ----- </option>
<optgroup label="Memória DDR3">
<option>Kingston 4Gb</option>
<option>Samsung 8Gb</option></optgroup>
<optgroup label="Memória DDR4">
<option>Kingston Fury 8Gb</option>
<option>Corsair Vengeance 8GB</option></optgroup>
<optgroup label="HD Sata III ">
<option>Western Digital 500 Gb</option>
<option>Seagate 1 Tb</option></optgroup>
<optgroup label="SSD Sata III ">
<option>Samdisk 480 Gb</option>
<option>Kingston 960 Gb </option>></optgroup>
<optgroup label="SSD M2">
<option>Kingston 500 Gb </option>
<option>Western Digital 240 Gb</option></optgroup>
</select>
</span>
<span class="ColDir" id="btnIncluir">
<input type="button" value="Incluir" />
</span>
</div>
<div class="LinhaForm" id="boxPedidos">
<textarea name="listaPedidos" readonly
id="lisPedArea">
</textarea>
</div>
<div class="LinhaForm">
<span class="ColDir">
<label class="LabBox" for="TxtTotal">Valor: R$</label>
<input type="text" name="TxtTotal" readonly
id="TxtTotal" class="InpBoxMed" /></span></div>
</fieldset>
<fieldset class="FSLinInteira">
<legend> Dados do Cartão </legend>
<fieldset class="FSColDir" id="fSBandeira">
<legend> Bandeira:</legend>
<label><input type="radio" name="RadBand"
checked />Visa</label><br/>
<label><input type="radio" name="RadBand" />Master</label><br/>
<label><input type="radio" name="RadBand" />Elo</label>
</fieldset>
<div class="ColEsq" id="numCartao">
<label class="LabBox" for="TxtNumCC01">Número:</label>
<input type="text" name="TxtNumCC01"
id="TxtNumCC01" maxlength="4"
class="numDD" />
<input type="text" name="TxtNumCC02"
class="numDD" maxlength="4" />
<input type="text" name="TxtNumCC03"
class="numDD" maxlength="4" />
<input type="text" name="TxtNumCC04"
class="numDD" maxlength="4" />
</div>
<div class="ColEsq" id="valCartao">
<label class="LabBox" for="mesVal">Validade:</label>
<input type="number" name="TxtMesVal" id="mesVal"
min="1" max="12" class="numDD" value="1" /> /
<input type="number" name="TxtAnoVal" value="2022"
min="2022" max="2036" class="numQD" /></div>
<div class="ColEsq"id="boxParcel">
<label class="LabBox" for="numParcel">Parcelas:</label>
<input type="number" name="TxtMesVal" id="numParcel"
min="1" max="6" class="numDD" value="1" />
x Sem Juros</div>
</fieldset>
<div class="botoes">
<input type="submit" value="Confirmar" />
<input type="reset" value="Limpar" />
</div>
</div>
</section>
Style do Arquivo HTML:
<style>
#loginCad { width: 260px; }
#idEmail { width: 160px; }
#senhaCad { width: 180px; }
#lisSelProd { width: 370px; }
#selProduto { width: 75%; }
#btnIncluir { width: 70px; }
#boxPedidos { height: 100px; }
#lisPedArea {
height: 90%;
width: 100%;
}
#fSBandeira {
width: 80px;
text-align: left;
}
#numCartao {
width: 350px;
height: 35px;
padding-top: 10px;
}
#valCartao { width: 230px; height: 35px; }
#boxParcel { width: 230px; height: 30px; }
</style>Materiais relacionados
24 pág.
24 pág.
15 pág.
Perguntas relacionadas
Compartilhar