EXERCÍCIO DE HTML 5 e CSS
O objetivo desse exercício é aplicar e praticar os conceitos de CSS juntos com HTML5. Abaixo estão os requisitos para implementação desse site, que será destinado uma loja virtual para exposição de seus produtos e empresa, o qual deverá:
1. Utilizar a “Estrutura de Site” em HTML 5 fornecida junto com seu material no site da disciplina.
2. Monte o CSS para o site para cada elemento do mesmo. Um para os links, outro para os conteúdos, rodapés, etc. Nessa folha de estilo, procure utilizar todas as propriedades vistas em sala, sobretudo para Box Model, Fonts, Texto e Links (estes na barra de menus).
3. Utilize o modelo (estrutura) básica para páginas HTML 5 (vide material passado).
4. Utilizando o layout citado (item 1 acima), em cada parte dele você deverá expor os conteúdos abaixo explicados:
A. header: procure na internet imagem que possa servir como banner de sua página.
Importante esta possuir pelo menos 1400 px de largura para não dar o efeito “esticado” e, portanto, deformado, para a imagem
B. Seção nav, faça uma barra de menu com a seguintes opções: QUEM SOMOS – NOSSAS LOJAS – PRODUTOS – SUPORTE – CONTATO. Use links para páginas fictícias, ou seja, não precisa cria-las.
C. Na opção PRODUTOS, quando o usuário clicar terá 3 subitens: COMPRAR - CONSULTAR – SOLICITAR UM NOVO. Para isso, utilize a opção de uma lista não-ordenada (UL) para essa opção, onde cada LI é um link dessa lista de subitens. Faça um estilo para que na opção HOVER do link PRODUTOS aparece a box da lista de itens de cada LI.
UNIVERSIDADE FEDERAL DO ESPÍRITO SANTO
CENTRO DE CIÊNCIAS EXATAS, NATURAIS E DA SAÚDE DEPARTAMENTO DE COMPUTAÇÃO
FUNDAMENTOS DE PROGRAMAÇÃO WEB Prof. Giuliano Prado de Morais Giglio
D. Seção div à esquerda: na primeira section coloque informação sobre a promoção mais atraente da loja. Importante ter pelo menos uma imagem e informação rápida a respeito (frase chamativa ou foto do produto, etc)
• Nos 3 article da section seguinte, coloque em cada um informação de um produto:
uma foto, seu nome, marca e valor.
E. Na seção aside à direita, em cada article, coloque 3 notícias a respeito do mercado em geral, tais como notícias de utilidade pública (pode pegar da internet). Cada notícia deverá tem um titulo, 3 linhas do começo de sua informação e uma foto pequena ilustrativa.
F. Em footer, coloque o endereço da matriz da loja física, email de contato e ao final, quem desenvolveu o site (seu nome e dados de contato).
G. Para todas as páginas (com exceção da suporte), o layout será como mostrado abaixo:
HEADER NAV
DIV SECTION
“aqui você colocará o conteúdo da página”
FOOTER
H. Na página de Suporte, faça um formulário que conterá as seguintes informações: nome completo, CPF, telefone de contato, email, tipo do problema (SELECT com as opções:
Conexão, Página Inexistente, Erro em atividade, Opção não encontrada, Outros) data da ocorrência do problema, descrição do problema (textarea). Todos os campos são obrigatórios (requeridos), com exceção da data.
I. Utilize para este formulário os campos específicos do HTML e suas validações, quando for o caso.
