HTML
Exames: HTML. Pesquise 860.000+ trabalhos acadêmicosPor: marcos3000 • 10/3/2015 • 2.015 Palavras (9 Páginas) • 701 Visualizações
dimensionada para exibir um efeito visual que sua página deve reproduzir, quando dimensionada de forma semelhante.
4. 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.
5. 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!
6. Não serão aceitos trabalhos APENAS em papel. Se desejar o aluno pode TAMBÉM entregar uma listagem da sua avaliação. É 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. O arquivo zip deve conter os arquivos html, css e os arquivos de imagem individualizados (e não tudo junto num arquivo pdf).
7. Não serão aceitos trabalhos em arquivos de texto DOC ou PDF. Os arquivos HTML, JS ou CSS devem estar individualizados (mesmo que agrupados num ZIP) para que o tutor possa testar seu site.
PÁGINA COM LAYOUT BASEADO EM TABELA
1. Escreva o código necessário para criar esta página mostrada na Fig. 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 a fonte “verdana” ou, caso este não esteja presente (como no Linux), o fonte “liberation” (fonte mostrado na figura). As referências do menu apontam respectivamente para as páginas: FicaFrio.html, Tipos.html, Estoque.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). Uma imagem no formato PNG (logoDeitado.png) foi utilizada para o logotipo da loja exibido no canto superior esquerdo da página. Junto com o texto de apresentação aparece a imagem logoFF.png centralizada. As cores utilizadas foram: Fundo - #7799AA, Texto - #FFFFFF, Link - #FFFFFF e Link Visitado - #99EEEE. [1,5 pontos]
Fig. 1 – Página do Site da loja Fica Frio Refrigeração
PÁGINA COM CSS E ESTRUTURA HTML5
O futuro chegou ao seu site. 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 novas tags de estrutura do HTML5 (Fig. 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 cinco classes de estilo: ender, imgLogo, sobImagem e apres. Além disso, as tags <body>, <header>, <nav>, <section>, <ol>, <ul> e <a> tiveram sua aparência modificada. A descrição do estilo que deve ser aplicado a estas classes e tags está no quadro 1 logo abaixo. No quadro 2 é mostrado o estilo das tags de estrutura para produzir o posicionamento mostrado na figura. [2 pontos]
Fig. 2 - Página do site na nova implementação
DICA: As tags <hr/> foram substituídas pela definição de bordas.
DICA: A página precisa conter as novas tags header, nav e section (não necessariamente nesta ordem).
<body>
Cor de fundo #7799AA, cor de texto #FFFFFF, tamanho de fonte de 16px e fontes Verdana e Liberation.
<a>
Sem sublinhado, cor de link #FFFFFF e link visitado #99EEEE.
<ol> e <ul>
Espaçamento entre as linhas (line-height) de 200%
<ul> dentro de <nav>
Cor de texto #FFFFFF, quadrado como caractere de início de elemento de lista e margem superior de 30px.
sobImagem
Cor de texto #CCFFFF e texto em negrito.
ender
Informações de localização (endereço, telefone e e-mail). Texto alinhado a direita, tamanho de fonte 12px, espaçamento entre as linhas (line-height) de 150% e elemento todo colado na direita da janela (float com valor right).
apres
Alinhamento de texto centralizado (center).
imgLogo
Borda inferior solida e com 3px, margem inferior de 6px e espaçamento do conteúdo com a borda inferior da célula (padding-bottom) de 15px.
Quadro 1 – Classes de Estilo da Página
header { display:block; margin-bottom: 1px; }
nav { display:block; width: 20%; float: left; }
section { display:block; width: 77%; float: right; }
Quadro 2 – Estilo das divisões padrão da página
VÁRIOS TIPOS DE LISTA E TABELA
3. A Fig. 3 mostra a section da página que será aberta quando o link “Tipos” for selecionado na página da segunda questão. A página utiliza os mesmo estilos da questão anterior, com os acréscimos da classe listaTipos (lista numérica), a redefinição do estilo da tag <ul> quando dentro de listaTipos e a definição da classe tabInfo (tabela). A descrição destes novos estilos está no quadro 3 e eles devem ser adicionados ao arquivo CSS usado na questão anterior. Apenas o interior da tag section foi modificado em relação à página da segunda questão (header e nav permanecem como na questão anterior) [1,5 pontos]
Fig. 3 – Section da página do Link Tipo
listaTipos
Cor de texto #003080, cor de fundo #DDDDDD, espaçamento entre o interior e a borda (padding) variável (10px 10px 10px 50px), margem variável (30px 10px 10px 10px) e borda de 2px, sólida e na cor #000055.
...