lista_exercicios_06 (1)

Prévia do material em texto

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 06 
 
1. Construir uma página HTML que contenha o quadro abaixo, de modo que este esteja centralizado horizontalmente na tela 
do navegador, sem a utilização do elemento de marcação HTML tabela. 
 
Instituto Federal de Educação, Ciência e Tecnologia da Bahia 
Curso: Informática 
Disciplina: Desenvolvimento Web I 
 
Sobre a estilização do texto, deverão ser observados os seguintes aspectos, a serem configurados com o uso de 
propriedades CSS: 
 Tipo de fonte: Verdana; 
 Tamanho de fonte: 12 pixels; 
 Alinhamento: centralizado horizontalmente; 
 Espaçamento entre linhas: duplo; 
 Cor de texto: Vermelho, 
 
2. Construir uma página HTML, com aplicação das formatações abaixo relacionadas em uma folha de estilos interna ou 
externa: 
 Cabeçalhos de nível h1: fonte Tahoma, Verdana, Arial ou sans-serif (nessa ordem); 
 Qualquer texto do corpo (elemento de marcação BODY) com tamanho de 10 pontos; 
 Cabeçalhos de nível 1, 2 e 3 com texto na cor vermelha. 
 
3. Criar uma página HTML com a aparência abaixo, com o uso de uma tabela alinhada ao centro, com espaçamento de 2px 
entre as células e espaçamento interno de 2px em cada célula: 
 
 
 
Observações: exige-se a aplicação das estilizações abaixo mencionadas com o uso exclusivo de uma folha de estilos CSS 
externa: 
 Sobre a tabela ainda, sem borda e com largura de 600px; 
 Uso de três tons da cor azul: #0D5188 (azul escuro), #66C5E3 (azul médio) e #C7E7F3 (azul claro); 
 Uso de fonte da família “Arial”, com tamanho 12px; 
 Título da tabela: cor branca; 
 Nomes das cidades: cor de código #0D5188 (azul escuro); 
 Cor de fundo das células de posição: prata; 
 Com exceção das posições e dos quantitativos populacionais, os demais textos estão em formato negrito; 
 As colunas referentes às posições correspondem, em termos de largura, a 10% da largura da tabela, cada uma; 
 As colunas referentes aos quantitativos populacionais correspondem, em termos de largura, a 15% da largura da 
tabela, cada uma. 
4. Criar uma página HTML constituída de apenas uma tabela centralizada, com dados tabulados referentes à classificação do 
Campeonato Brasileiro de 2010, no dia 06/06/2010, às 18h30min. A formatação da tabela é mostrada na figura abaixo. 
 
 
 
Observações: exige-se a aplicação das estilizações abaixo mencionadas com o uso exclusivo de uma folha de estilos CSS 
externa: 
 Borda principal da tabela: espessura de 1px, de cor #DDDDDD; 
 Todos os textos devem usar a fonte “Arial”; 
 Cores usadas para as posições de classificação: azul-marinho (#003366), azul-celeste (#1398BE), laranja (#DE9800), 
cinza (#CCCCCC) e vermelho (#C91B04); 
 Formatação de fontes (tamanho, cor, formato negrito/não negritado e alinhamento): 
a) Posições de classificação: tamanho 18px, em formato negrito e alinhamento centralizado; as cores variam de 
posição para posição, conforme mencionado anteriormente; 
b) Títulos das colunas: tamanho 13px, cor #999999, formato negrito e alinhamento centralizado; 
c) Nomes dos times: tamanho 14px, cor #666666, formato negrito e alinhamento à esquerda; 
d) Coluna referente à quantidade de pontos dos times: tamanho 14px, cor preta, formato negrito e alinhamento 
centralizado; 
e) Demais colunas de classificação: tamanho 14px, cor #666666, formato não negritado e alinhamento centralizado; 
f) Legendas para a área de classificação (“Taça Libertadores”, “Pré-Libertadores”, etc.): tamanho 10px, cor 
#8F8F8F, formato não negritado e alinhamento à esquerda; 
g) Legendas (siglas): tamanho 10px, cor #555555, formato negritado e alinhamento à esquerda; 
h) Legendas (significados): tamanho 10px, cor #555555, formato não negritado e alinhamento à esquerda. 
 As células dos valores exibidos nas colunas “P”, “V”, “D”, “GC” e “%” devem apresentar cor de fundo #F7F7F7; 
 Certifique-se de que todas as colunas de classificação (com exceção da coluna “%”) apresentem a mesma largura; 
 Uso de bordas com espessura de 1px, cor #DDDDDD, para separação entre as linhas; exceção às bordas de separação 
entre o 4°/5° time e 16°/17° time, que devem apresentar borda de 2px, cor #CCCCCC.