INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DA BAHIA

CAMPUS JEQUIÉ
CURSO TÉCNICO DE INFORMÁTICA
MODALIDADE SUBSEQÜENTE
PROF°.: ALEXANDRO DOS SANTOS SILVA

DESENVOLVIMENTO WEB I
LISTA DE EXERCÍCIOS 03

1. Criar uma página que contenha a listas de cidades mais populosas dos seguintes estados brasileiros: Bahia,
Pernambuco e São Paulo. Os nomes dos estados e cidades deverão estar organizados conforme mostrado abaixo:

 Bahia
1. Cidade 1 – x habitantes
2. Cidade 2 – x habitantes
...
5. Cidade 5 – x habitantes
 Pernambuco
1. Cidade 1 – x habitantes
2. Cidade 2 – x habitantes
...
5. Cidade 5 – x habitantes
 São Paulo
...

Observação: para consulta às cidades mais populosas de cada estado, acesse os seguintes endereços:
 http://pt.wikipedia.org/wiki/Bahia#Cidades_mais_populosas
 http://pt.wikipedia.org/wiki/Pernambuco#Demografia
 http://pt.wikipedia.org/wiki/S%C3%A3o_paulo#Demografia

2. Criar uma página com o layout abaixo:

Observações:
 Textos: uso de fontes padrões
(tipo e tamanho);
 Título da tabela: em formato
itálico e negrito;
 Borda, espaçamento entre
células e espaçamento interno
padrões;
 Tabela com 400px de largura;
 Nome das cidades: em
formato itálico.
3. Criar uma página com o layout abaixo:
Observações:
 Textos: uso de fontes padrões (tipo e
tamanho);
 Título da tabela: em formato itálico e
negrito;
 Borda, espaçamento entre células e
espaçamento interno padrões;
 Tabela com 400px de largura;
 Nome das cidades: em formato itálico.

4. Criar uma página com o layout abaixo:

Observações:
 Textos: uso de fontes padrões (tipo e tamanho);
 Título da tabela: em formato itálico e negrito;
  Borda, espaçamento entre células e espaçamento interno padrões;
 Tabela com alinhamento centralizado;
 Tabela com 400px de largura;
 Nome das cidades: em formato itálico.

5. Criar uma página com o layout abaixo:

Observações:
 Textos: uso de fonte da família Arial, tamanho
2 (com exceção do título “Município de
Brumado”, no qual é empregado uma fonte de
tamanho 3);
 Espaçamento entre células e espaçamento
interno padrões;
 Tabelas com alinhamento centralizado;
 Tabelas com 400px de largura;
 Cores usadas: # 0645AD (azul), ciano e
#F9F9F9 (cinza)

6. Criar uma página, de nome “questao06.html”, com links para receitas, conforme layout abaixo:

Observações:
 Todos os elementos visuais estão posicionados em uma tabela com largura de 400px, sem borda, espaçamento
entre as células de 10px e espaçamento interno de 10px;
 Imagens
1. Altura: 150px;
 2. Localização das imagens: http://sites.google.com/site/desenvolvimentowebi20121/home/quadro-de-
avisos/listadeexercicios03-questao06-imagens;
 Título “Café Starbuzz”: cabeçalho de nível 1 e fonte da família Times New Roman;
 Demais textos: uso de fonte da família Arial, com tamanho 2;
 Nomes das receitas: em formato negrito;
 Nomes das páginas para as quais serão redirecionados os links: “cafe.html”, “cappucino.html”, “cha.html” e
“mistura.html”; cada uma destas páginas terá a seguinte especificação, conforme layout abaixo:
1. Título da página: “Questão 06: Nome da Receita”;
2. Textos: fonte padrão;
3. Imagens com altura de 150px;
4. Localização das imagens: http://sites.google.com/site/desenvolvimentowebi20121/home/quadro-de-
avisos/listadeexercicios03-questao06-imagens;
5. Texto “Café Starbuzz”: cabeçalho de nível 1;
6. Linha horizontal, após o texto “Café Starbuzz”;
7. Nome da receita: cabeçalho de nível 1 e fonte padrão;
8. Uso de cabeçalhos de nível 3 para os textos “Descrição” e “Custo”;
9. Uso de parágrafos para a descrição da receita e informe do custo;
10. Link com alinhamento centralizado, com o texto “Retornar”, para a página inicial, de nome
“questao06.html”;
11. Relação de descrições e preços das receitas:
Receita Descrição Preço
Mistura de Casa Expresso, leite fervido e xarope de chocolate. R$ 2,35
Café arábico com leite Uma mistura de expresso, leite fervido e espuma. R$ 1,89
Cappucino Uma bebida condimentada com chá preto, especiarias, R$ 1,85
leite e mel.
Chá Chai Uma mistura suave e delicada de cafés do Méximo, R$ 2,35
Bolívia e Guatemala.