Interface Web - 1

Prof. Celso Masotti

Avaliação

1 - Objetivo
Desenvolver um website contendo quatro páginas HTML, contendo imagens, links,
formatação de parágrafos, tabelas, listas e CSS básico.

2 - Download
Faça download do projeto no link abaixo. Descompacte na pasta “htdocs” do XAMPP.
http://bit.ly/40KVU1l

3 - Itens Obrigatórios Para o Desenvolvimento

● Todas as páginas devem ter cor de fundo (background);

● Sempre escolha um tipo de fonte, cor e tamanho para os parágrafos e heading;
● Controle o tamanho da imagem usando a propriedade width. Veja:
Exemplo:

<img src="img/controll_D.png" width="250">

● Podemos controlar as cores das bordas das tabelas pelo CSS. Exemplo:

<style>
table{
border: 2px solid #corQueDeseja;
font-family: 'Courier New', Courier, monospace;
width: 800px;
}
th{
border: 2px solid #corQueDeseja;
color: #corQueDeseja;
background-color: #corQueDeseja;
}
td{
border: 2px solid #corQueDeseja;
}
</style>

1
4 - Sobre as Páginas

index.html

● Na imagem acima, o item “A” é a imagem com a logomarca. Existem três modelos
para que você escolha 1 deles:
○ logoControllCosmos
○ logoControllOcean
○ logoControllRoad

● O item “B” chama atenção quanto ao tipo de alinhamento, que neste caso é à
esquerda.

● Crie os links de navegação: sobre/produtos/contato.

● Observe a imagem que foi colocada entre os parágrafos. Insira a mesma ao

trabalhar nesta página.

2
sobre.html

● alinhamento dos parágrafos à direita.

● Crie os links de navegação: início/produtos/contato.

3
 ● Insira as duas imagens como no exemplo.

● Crie a tabela:

4
produtos.html

5
● alinhamento dos parágrafos ao centro;.

● Crie os links de navegação: início/sobre/contato.

● Insira as imagens como no exemplo.

Obs: as três imagens estatísticas se encontram no interior de
células de tabela.

● Crie a lista:

6
contato.html

● O alinhamento do parágrafo é justificado.

● Crie os links de navegação: início/sobre/produtos.

● Insira as imagens como no exemplo.

Quando finalizar, compacte o projeto com o Winrar ou 7-zip e envie no Teams no link
“Tarefas”. Envie também, à parte, um arquivo do bloco de notas contendo os nomes do
grupo. Este arquivo não pode estar compactado.