Exerccios avaliativo usando HTML em dupla:

Nome 1: _______________________________________________
Nome 2: _______________________________________________
EXERCCIO 1 Criao de uma pgina Web atravs da utilizao de tabelas dentro de tabelas
para compor o layout.
Crie um documento em HTML com as seguintes caractersticas e propriedades:
1) Inclua o seguinte estilo no HEAD da pgina:
body, table {
Font-family: Arial, Helvetica, Sans Serif;
Font-size: 12px;
Color: #0A2A411;
}
2) No BODY do documento inclua as seguintes propriedades: marginheight="0"
marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"
3) Crie uma tabela que vamos chamar de Tabela Principal, com 1 coluna, 4 linhas e as
seguintes propriedades: width="100%" border="0" cellspacing="0" cellpadding="0".
DICA: Crie um comentrio <!Tabela Principal --> Antes de criar a tabela
4) Na primeira linha da tabela principal, aplique a propriedade de fundo bgcolor="#2E78A0"
dentro da TD.
5) Nesta mesma linha, crie uma nova tabela, com 3 colunas e 1 linha. A primeira coluna
dever ter a largura de 200 Pixels. Em seguida coloque as seguintes propriedades na
tabela: width="100%" border="0" cellspacing="0" cellpadding="0".
DICA: Crie um comentrio <!01BANNERS --> Antes de criar a tabela
6) Insira na primeira coluna desta segunda tabela 01banners, a imagem: logo_html.gif, com
as seguintes propriedades: width="220" height="90".
7) Insira respectivamente na segunda e terceira colunas as imagens de mesmo tamanho
(width="230" height="60"): banner1.jpg e banner2.jpg. As imagens devem estar
centralizadas nas clulas.
8) Na segunda linha da tabela Principal, aplique a propriedade de fundo bgcolor=#27688B.
9) Crie uma nova tabela com 6 colunas e 1 linha com as seguintes propriedades: width="90%"
border="0" align="center" cellpadding="0" cellspacing="0".

DICA: Crie um comentrio <!02MENU --> Antes de criar a tabela

10) Da primeira (esquerda), at a ltima (direita) coluna da tabela 02menu, digite
respectivamente: Home Institucional Produtos Servios Novidades Fale Conosco.
11) Estes textos devem estar centralizados nas clulas e com as seguintes propriedades:
color="#FFFFFF", size="2", face="Arial e em negrito.
12) Na terceira linha da tabela Principal, crie uma nova tabela com 3 colunas e 1 linha com
as seguintes propriedades: width="100%" border="0" cellspacing="0" cellpadding="0".
DICA: Crie um comentrio <!03CONTEUDO --> Antes de criar a tabela
13) A primeira coluna desta nova tabela 03conteudo, deve ter a propriedade Width (largura)
fixada em 200 pixels, a segunda em 600 pixels e a terceira em 100%. Desta forma as duas
primeiras colunas tero ser valor de largura sempre fixos em 200 e 600 respectivamente e
a terceira coluna ter o valor varivel de acordo com a resoluo do monitor.
14)Na primeira coluna da nova tabela 03conteudo, alm da largura width="200", deve ter as
seguintes propriedades: valign="top" bgcolor="#D9E6F2".
15)Na segunda coluna da tabela 03conteudo, alm da largura width="600" deve ter a
propriedade: valign="top".
16) A Terceira coluna, deve ter largura width="100%" e bgcolor="#D9E6F2".
17)Voltando para a primeira coluna da tabela 03conteudo, crie uma nova tabela com 1
coluna, seis linhas e as seguintes propriedades: width="180" border="0" align="center"
cellpadding="0" cellspacing="10".
DICA: Crie um comentrio <!04CONTEUDO01 --> Antes de criar a tabela
18) Na primeira linha desta nova tabela 04conteudo01, insira a imagem img01.jpg, com
width=90 (largura) e height=117 (altura) - centralizada na clula.
19) Na segunda linha da tabela 04conteudo01, digite o texto Prepare-se..., centralizado na
clula.
20)Na terceira linha da tabela 04conteudo01, insira a imagem "img02.jpg" com width="90" e
height="117" - centralizada na clula.
21) Na quarta linha da tabela 04conteudo01, digite o texto No perca tempo... ,
centralizado na clula.
22)Na quinta linha da tabela 04conteudo01, insira a imagem "img03.jpg" com width="90" e
height="117" - centralizada na clula.

23) Digite o texto Ultrapasse seus limites..., na sexta linha da tabela 04conteudo01
centralizando o texto na clula.
24) Na segunda coluna da tabela 03conteudo, crie uma nova tabela com 1 coluna e oito
linhas e as seguintes propriedades: width="600" border="0" cellspacing="15"
cellpadding="7".
DICA: Crie um comentrio <!05CONTEUDO02 --> Antes de criar a tabela
25) Digite SEGUNDO TRABALHO DE HTML PARA P1 na primeira linha da tabela
05conteudo2 e aplique ao texto as seguintes propriedades: size="3" e bold.
26) Nas linhas 3, 5 e 7 da tabela 05conteudo2, aplique a seguinte propriedade
bgcolor="#D9E6F2".
27)Copie cada uma das sete frases ao final desta e da prxima pgina e insira nas linhas 2, 3,
4, 5, 6, 7 e 8 da tabela 05conteudo2.
28) Na quarta linha da tabela 05conteudo2, insira a imagem ligado.jpg com as seguintes
propriedades: width="85" height="57" hspace="10" align="left". A imagem deve ficar a
esquerda do texto inserido.
29) Na terceira e ltima coluna tabela 03conteudo, que foi inserida na terceira linha da tabela
Principal, inclua o caractere correspondente a espao em branco &nbsp e aplique a
propriedade; bgcolor="#D9E6F2" na clula.
30) Agora, na ltima linha da tabela Principal, insira a imagem transp.gif sem colocar os
parmetros para altura e largura. Nesta linha, aplique o fundo bgcolor="#205471".

FRASES para aplicar na pgina do trabalho:

"O Processo criativo no tem mistrio. Ele pega velhas idias e encontra novos usos para elas.
Criatividade mistura velhas idias de novas maneiras."
Bob Sutton, Professor de Comportamento Organizacional da Stanford University.
"Idias so a moeda do sucesso. Elas separam voc de seus concorrentes".
Edward de Bono, autor do livro "O Pensamento Lateral"
"Eu no entendo por que as pessoas tm medo de novas idias. Eu tenho medo das velhas
idias".
John Cage

"A melhor maneira de ter uma boa idia ter muitas idias".
Linus Pauling
"A imaginao move o mundo".
Napoleo Bonaparte
"Um escritor original no aquele que no imita ningum. aquele que no pode ser imitado".
Franois Ren Chateaubiand
"Complicar o simples fcil. Criatividade tornar o complicado em simples."
Charles Mingus
Veja como dever ficar o exerccio 2: