Upload
alfredofigueiras3325
View
698
Download
6
Embed Size (px)
Citation preview
P R O G R A M A O HTML HTML HTML HTML CADFkNO
DFFXFkC|C|O8PkAI|CO8 Autor: Prof. Ce|so Go||o Atuo||zoo: Prof.
A|s|on komos Colgio Singular Caderno de Exerccio das Aulas de HTML
- Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 1 CADERNO DE
EXERCCIOS DE HTML Linguagem Grfica de Programao I Hiper Text Markup
Language Este material contm exerccios referentes ao Resumo das
Aulas de HTML. Exerccio 01: Salvar como EXE01.htm: Exerccio O1
Minha 1 Pgina Web - Exerccio 01 Nome, N e Turma dos Integrantes
Colgio Singular Informa: os alunos do Curso Tcnico em
Informtica, na disciplina de LGP,
iniciaram a edio de Pginas Web, utilizando a programaoHTML.
Destaforma,embreve,elessero Web Designers Exerccio 02: Salvar como
EXE02.htm: Exerccio O2 Minha 2 Pgina Web - Exerccio 02 Nome, N e
Turma dos Integrantes LISTAS ORDENADAS Volkswagen Gol Parati
Golf Fiat Uno Palio Stilo LISTAS NO ORDENADAS
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 2 Exerccio 03: Salvar como EXE03.htm. Editar conforme as orientaes e Lay-Out abaixo: Exerccio 03 - Microsoft Internet Explorer ORIENTAES Cabealho 1 Cabealho 3 Linha Horizontal Texto em Negrito com letra maiscula. Linha Horizontal Lista Ordenada com 2 itens em Negrito, com 2 sub-itens em Lista No Ordenada em Itlico. Linha Horizontal Texto em Negrito com letra maiscula. Linha Horizontal Lista No Ordenada com 2 itens em Negrito, com 3 sub-itens em Lista Ordenada em Itlico. Exerccio 04: Salvar como EXE04.htm: Exerccio O4 Utilizando Links - Exerccio 04 Nome, N e Turma dos Integrantes Exerccio 01 Exerccio 02 Exerccio 03 Pgina do Professor Gallo E-Mail para o Professor Gallo Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 3 Exerccio 05: Salvar como EXE05.htm: Exerccio O5 Utilizando Imagens - Exerccio 05 Nome, N e Turma dos Integrantes
Texto alinhado pelo TOPO da figura.
Texto alinhado pelo MEIO da figura.
Texto alinhado pela BASE da figura. Esta figura um link, e teve
seu comprimentoalterado para 100px.
Esta figura um link, e teve sua altura alteradapara 50px.
Obs.:Repareque,alterandoapenasumamedida,a outra se ajusta
proporcionalmente. Exerccio 06: Salvar como EXE06.htm: Exerccio O6
Alterando Cores - Exerccio 06 Nome, N e Turma dosIntegrantes
AutilizaodecoresemPginasWebdeveser feita com cautela e bom
senso,
poisdamesmaformaquepodemENCANTAR, podem tambm
ESPANTAR os visitantes. Exerccio 03
Exerccio 04
Exerccio 05 Colgio Singular Caderno de Exerccio das Aulas de HTML -
Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 4 Exerccio 07:
Salvar como EXE07.htm: Exerccio O7 Este texto foi centralizado
utilizando o TAG < P >. Este texto teve a fonte configurada e
tambm est centralizado,
mas utilizamos o TAG < CENTER >. Texto em Movimento Alternado
Exerccio 08: Salvar como EXE08.htm. Editar conforme as orientaes e
Lay-Out abaixo: ORIENTAESExerccio 08 - Microsoft Internet Explorer
Corpo Principal: Fundo = azul, Link = amarelo, Textos = #FFFFFF,
Link Visitado = #00FF00,Link em Acesso = vermelho. Texto em arial,
4, azul-claro, negrito, direita: Exerccio 08 Texto em movimento da
direita para a esquerda, em arial, 5, prata, negrito: Aluno 1 -
Aluno 2 Linha Horizontal: espessura 1, comprimento 100%. Texto em
cabealho 2: Melhorando o Visual Texto em arial, 3, amarelo,
negrito: A aplicao de cores e alinhamentos faz com que a pgina web
fique mais atraente! Texto em arial, 2, cor #FFAAAA: Clique nos
exerccios abaixo e veja pginas formatadas: Links:Exerccio 06 -
acesso pgina Exe06.htm. Exerccio 07 - acesso pgina Exe07.htm. Linha
Horizontal: espessura 5, comprimento 300px. Texto em cabealho 2, ao
centro: Utilizando Tabelas Texto em arial, 3, amarelo, negrito, ao
centro: A utilizao de Tabelas permite a formatao de objetos (textos
e imagens) lado-a-lado! Texto em arial, 2, cor #FFAAAA, ao centro:
Veja a utilizao nos exerccios abaixo: Links (As pginas dos links
abaixo ainda no foram editadas, portanto no queira test-las
agora!):Exerccio 14 - acesso pgina Exe14.htm. Exerccio 15 - acesso
pgina Exe15.htm. Colgio Singular Caderno de Exerccio das Aulas de
HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 5
Exerccio 09: Salvar como EXE09.htm. Editar conforme as orientaes e
Lay-Out abaixo: ORIENTAESExerccio 09 - Microsoft Internet Explorer
Corpo Principal: Fundo com Imagem LgSingBk.gif, Link = vermelho,
Textos = #505050, Link Visitado = laranja,Link em Acesso = verde.
Texto em movimento alternado, em arial, 3, cor #005500, negrito:
Exerccio 09: Aluno 1 - Aluno 2 Linha Horizontal:espessura 2, comp.
100%, cor verde-escuro. Texto em cabealho 1:Utilizando Frames Linha
Horizontal:espessura 5, comp. 400px, cor laranja, direita. Texto em
arial, 3, laranja, negrito, direita, em 3 linhas, com quebra de
pargrafo ao final: Com os Frames fazemos subdivises na
Pginapermitindo carregar vrias Pginas na mesma janela!Estudaremos
Frames mais adiante. Texto em arial, 2, cor #000055, negrito,
direita, em 3 linhas, com quebra de linha ao final: Os exerccios
abaixo mostram pginas web com Frames,mas voc somente poder
acess-lasaps elas serem editadas, claro. Links, direita, um em cada
linha:Exerccio 16 - acesso pgina Exe16.htm. Exerccio 17 - acesso
pgina Exe17.htm. Linha Horizontal:espessura 5, comp. 360px, cor
azul-escuro, direita. Colgio Singular Caderno de Exerccio das Aulas
de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 6
Exerccio 10: Editar e salvar com o nome de EXE10.htm: Exerccio 1O
Utilizando ncoras Nome, N e Turma dos Integrantes Lista
Ordenada
Lista No Ordenada
Lista Aninhada Ordenada
Lista Aninhada No Ordenada Lista Ordenada Curso Tcnico em
Informtica Curso Tcnico em Turismo Volta ao Incio
Lista No Ordenada
Volta ao Incio
Lista Aninhada Ordenada Curso Tcnico em Informtica Manh Noite Curso
Tcnico em Turismo Manh Noite Volta ao Incio
Lista Aninhada No Ordenada
Volta ao Incio
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso
Gallo Atualizao: Prof. Aislan RamosPgina 7 Exerccio 11: Editar e
salvar com o nome de EXE11.htm: Exerccio 11 Acessando ncoras
Externas Nome, N e Turma dos Integrantes Os links abaixo
acessaro as ncoras existentes no Exerccio 10: Lista
Ordenada
Lista No Ordenada
Lista Aninhada Ordenada
Lista Aninhada No Ordenada Exerccio 12: Editar e salvar com o nome
de EXE12.htm de tal forma que a pgina seja exibida conforme o
Lay-Out abaixo: Exerccio 12 - Microsoft Internet Explorer Listas,
Links e ncoras Nomes dos Integrantes 1.Nome Completo do Aluno 1
2.Nome Completo do Aluno 2 3.Nome Completo do Aluno 3 Dados
Pessoais 1.Apelido do Aluno 1Endereo: Data de Nascimento: Descrio
Fsica: Passatempos: Enviar E-Mail para mim Voltar ao topo 2.Apelido
do Aluno 2 Endereo: Data de Nascimento: Descrio Fsica: Passatempos:
Enviar E-Mail para mim Voltar ao topo 3.Apelido do Aluno 3 Endereo:
Data de Nascimento: Descrio Fsica: Passatempos: Enviar E-Mail para
mim Voltar ao topo Cabealho 1, Centralizado, definir cor. Linha
Horizontal Texto Normal, Centralizado, definir cor. Linha
Horizontal Lista Ordenada, em Negrito, com Links para ncoras nesta
Pgina Web. Definir cor para Link, Link Visitado e Link em Acesso.
Linha Horizontal Texto Normal, Centralizado, definir cor. Linha
Horizontal Lista Aninhada Ordenada em Negrito, com sub-itens No
Ordenados em Itlico, definir cor. Link somente na palavra E-Mail
com o endereo de e-mail do referido aluno.Links para ncora chamada
#topo para exibir o topo da Pgina Web, com fonte normal. Colgio
Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 8 Exerccio 13: Salvar como
EXE13.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAESExerccio 13 - Microsoft Internet Explorer Corpo Principal:
Fundo Azul-claro, Link = vermelho, Textos = #000055, Link Visitado
= preto,Link em Acesso = branco. Texto em cabealho tamanho
2:Exerccio 13 - Imagens e ncoras Externas Linha
Horizontal:espessura 5, comp. 60%, cor azul-escuro, ao centro.
Texto em arial, 5, marrom, negrito, ao centro: IMAGENS DOS
INTEGRANTES Linha Horizontal:espessura 3, comp. 80%, cor
vermelho-escuro, ao centro. Inserir 3 figuras, lado a lado, atravs
de tabela: Tabela sem borda, com 1 linha por 3 colunas. Em cada
clula haver uma figura e um texto. As figuras so: foto1.jpg,
foto2.jpg e foto3.jpg, todas com borda tamanho 5. As figuras so
links que acessam as ncoras externas de cada aluno,
respectivamente, descritas no EXERCCIO 12. Os textos com os nomes
dos alunos devem estar sob cada figura, centralizados e em negrito.
Linha Horizontal:espessura 3, comp. 80%, cor vermelho-escuro, ao
centro. Texto em arial, 5, marrom, negrito, ao centro: ACESSO PARA
O PORTAL SINGULAR - ANGLO Inserir 3 figuras, lado a lado, atravs de
tabela: Tabela com borda vermelha tamanho 3, com 1 linha por 3
colunas e cor de fundo amarelo. Em cada clula haver a figura
LgSingP.jpg com 200px de comprimento e um texto. As figuras so
links que acessam as seguintes pginas web: 1 Clula:
http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomediod.htm
2 Clula: http://www.singular.com.br 3 Clula:
http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomedion.htm
Os textos devem estar sob cada figura, centralizados e em negrito,
e devem ser: 1 Clula: Colgio Singular - Diurno 2 Clula: Portal
Singular - Anglo 3 Clula: Colgio Singular - Noturno Colgio Singular
Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 9 Exerccio 14: Salvar como
EXE14.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAESExerccio 14 - Microsoft Internet Explorer Corpo Principal:
Fundo Prata. Texto em Arial, 3, cor R=00 G=55 B=00, negrito ao
centro: Exerccio 14 - Utilizando Tabelas Mescladas Texto em Arial,
2, cor R=55 G=00 B=00, negrito ao centro: Aluno 1 - Aluno 2 Linha
Horizontal:espessura 2, comp. 100%, cor branco. Tabela com 3 linhas
e 4 colunas: Comprimento 100%, cor do fundo cinza-escuro.Com borda
tamanho 1, cor prata. Rtulo da Tabela: Tabela No Mesclada Todas as
clulas alinhadas ao centro e com os seguintes textos: A1A2A3A4
B1B2B3B4 C1C2C3C4 Tabela com 3 linhas e 4 colunas: Comprimento
100%, cor do fundo rosa.Com borda tamanho 3, cor vermelha. Rtulo da
Tabela: Tabela Mesclada Todas as clulas mescladas e alinhadas
conforme abaixo: A2 A3 A1 B2 B4 C1 A1:Comprimento 10%, alinhamento
esquerda, cor do fundo amarela. A2:Comprimento 40%, altura 40px,
alinhamento ao centro, alinhamento vertical na base, cor do fundo
branca. A3:Comprimento 50%, alinhamento ao centro, alinhamento
vertical no topo, cor do fundo laranja. A4:Mesclado com A3.
B1:Mesclado com A1. B2:Comprimento 40%, altura 50px, alinhamento ao
centro, cor do fundo laranja. B3:Mesclado com B2. B4:Comprimento
30%, alinhamento ao centro, cor do fundo amarela. C1:Comprimento
10%, alinhamento direita, cor do fundo laranja. C2:Mesclado com C1.
C3:Mesclado com C1. C4:Mesclado com B4. Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 10 Exerccio 15: Salvar como EXE15.htm. Editar
conforme as orientaes e Layout abaixo: ORIENTAESExerccio 15 -
Microsoft Internet Explorer Corpo Principal: Fundo com Imagem =
LgSingBk.gif. Texto em Arial, 5, cor R=00 G=55 B=00, negrito ao
centro: Exerccio 15 - Nossas Notas da 1UL/2006 Tabela com 5 linhas
e 7 colunas: Comprimento 100%, borda tamanho 5, cor da
bordaazul-escuro e espao entre as clulas 0. Configurao das Linhas:
1 Linha: cor do fundo = #8888FF, altura 50px, textos em arial,
branco e negrito. 2 Linha: cor do fundo = #BBBB00. 3 Linha: cor do
fundo = #EEEEEE. 4 Linha: cor do fundo = #EEEEEE. 5 Linha: cor do
fundo = #EEEEEE. Configurao dos Textos: Texto Turma:fonte arial,
tamanho 4, branca, negrito, centralizado, com fundo preto.
Comprimento da clula = 100px. Texto TO:fonte verdana, tamanho 5,
vermelha, alinhado direita, na margem superior. Texto FI: fonte
verdana, tamanho 5, vermelha, alinhado ao centro. Texto TCG:fonte
verdana, tamanho 5, vermelha, alinhado esquerda, na margem
inferior. Textos AT, PO:fonte arial, tamanho 3, marrom, negrito,
centralizado. Comprimento das clulas = 80px. Textos MDIAS: fonte
arial, tamanho 3, preto, negrito, centralizado. Notas de AT e PO de
TO: fonte padro, tamanho 5, marrom, itlico, negrito, alinhados na
margem superior direita. Notas de AT e PO de FI: fonte padro,
tamanho 5, marrom, itlico, negrito, alinhados ao centro. Notas de
AT e PO de TCG:fonte padro, tamanho 5, marrom, itlico, negrito,
alinhados na margem inferior esquerda. Mdias de TO:fonte padro,
tamanho 7, preto, itlico, alinhados na margem superior direita.
Mdias de FI:fonte padro, tamanho 7, preto, itlico, alinhados ao
centro. Mdias de TCG:fonte padro, tamanho 7, preto, itlico,
alinhados na margem inferior esquerda. Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 11 Exerccio 16-A: Salvar como EXE16A.htm. Editar
conforme as orientaes e Layout abaixo: Configurao da Pgina
Principal: Ttulo no Navegador = Exerccio 16 - Pgina Principal Borda
= No Espao entre os frames = No Caso o navegador no aceite FRAMES:
Configurar a cor do fundo da pgina vermelha e os textos amarelos.
Exibir a mensagem Este navegador no aceita FRAMES! Outras
configuraes de acordo com o Layout abaixo: Exerccio 16 - Pgina
Principal - Microsoft Internet Explorer Configurao do Frame:
Comprimento = 200px Borda = No Espao entre os frames = No Nome =
FrEsquerda Carregar a Pgina = Exe16B.htm Barra de Rolagem = No
Permitir Redimensionamento = No Configurao do Frame: Comprimento =
resto da tela Borda = No Espao entre os frames = No Nome =
FrDireita Carregar a Pgina = Exe16C.htm Barra de Rolagem = Sim
Permitir Redimensionamento = No Abaixo segue o cdigo-fonte:
Exerccio 16 - Pgina Principal O seu Navegador no suporta FRAMES,
esta pgina no pode ser mostrada! Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 12 Exerccio 16-B: Salvar como EXE16B.htm. Editar
conforme as orientaes e Layout abaixo: Configurao da Pgina da
Esquerda: Ttulo no Navegador = Exerccio 16-B - Pgina para o Frame
da Esquerda. Cor do fundo = Laranja, cor dos textos = Azul-escuro.
Cor dos links = Marrom, cor dos links visitados = Branco e cor dos
links em acesso = Verde. Texto, em duas linhas, Exerccio 16
Utilizando Frames: Fonte arial, tamanho 3, cor #005500,
centralizado e negrito. Linha Horizontal, espessura 3, cor marrom,
comprimento 100%. Texto, em duas linhas, com o NOME e N dos alunos:
Fonte arial, tamanho 3, cor marrom, centralizado e negrito. Linha
Horizontal, espessura 3, cor marrom, comprimento 100%. Texto, em
duas linhas, Esta Pgina est carregada no Frame da Esquerda: Fonte
arial, tamanho 2, cor #005500, centralizado e negrito. Dois links,
em dois pargrafos: DESKTOPS, que carregar a pgina Exe16C.htm no
FrDireita. LAPTOPS, que carregar a pgina Exe16D.htm no FrDireita.
Abaixo segue o cdigo-fonte: Exerccio 16-B - Pgina Para o Frame da
Esquerda Exerccio 16
Utilizando Frames > Aluno 1 - N
Aluno 2 - N Esta Pgina est carregada
no Frame da Esquerda DESKTOPS LAPTOPS Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 13 Exerccio 16-C: Salvar como EXE16C.htm. Editar
conforme as orientaes e Layout abaixo: Configurao da Pgina da
Direita: Ttulo no Navegador: Exerccio 16-C - 1 Pgina para o Frame
da Direita. Cor do fundo = Azul-escuro, e dos textos = Branco. Cor
dos links = Amarelo. Cor dos links visitados = Azul-claro. Cor dos
links em acesso = Laranja. Texto, em duas linhas, fonte arial,
tamanho 3, cor padro, centralizado e negrito. Esta a Pgina 16C.Est
Carregada no Frame da Direita. Linha Horizontal, espessura 3, cor
branca, tamanho 280px. Todos os textos a seguir devem ter a fonte
arial, tamanho 3. Tabela com 2 Linhas e 6 Colunas: Comprimento
100%, borda tamanho 1, cor da borda amarela. Espao entre as clulas
= 3 e espao entre o contedo e a borda da clula = 5. Rtulo da Tabela
com o texto Processadores em 2006. Configurao dos Links INTEL e
AMD. Ambas as clulas possuem 50% de comprimento e 50px de altura,
centralizado e cor do fundo #0000FF. Link com imagem
ImLogoINTEL.jpg e rtulo da imagem Intel Corporation: Acessar a URL
http://www.intel.com.br Link com imagem ImLogoAMD.jpg e rtulo da
imagem Advanced Micro Devices: Acessar a URL http://www.amd.com.br
Configurao dos textos com os nomes dos processadores: Todos em
negrito, centralizado. A linha tem altura de 100px e cor do fundo
#000055. Exerccio 16-D: Salvar como EXE16D.htm. Editar conforme as
orientaes e Layout abaixo: Configurao da Pgina da Direita: Ttulo no
Navegador: Exerccio 16-D - 2 Pgina para o Frame da Direita. Cor do
fundo = Verde-escuro. Cor dos textos = Amarelo. Cor dos links =
Marrom. Cor dos links visitados = Cinza-Claro. Cor dos links em
acesso = Laranja. Texto, em duas linhas, fonte arial, tamanho 3,
cor padro, centralizado e negrito. Esta a Pgina 16D.Est Carregada
no Frame da Direita. Linha Horizontal, espessura 3, cor amarela,
tamanho 280px. Todos os textos a seguir devem ter a fonte arial,
tamanho 3. Tabela com 6 Linhas e 2 Colunas: Comprimento 100%, borda
tamanho 1, cor da borda branca. Espao entre as clulas = 3 e espao
entre o contedo e a borda da clula = 5. Rtulo da Tabela com o texto
Laptops em 2006. Configurao dos Links INTEL e AMD. Ambas as clulas
possuem 150px de comprimento, centralizado e cor do fundo #0000FF.
Link com imagem ImLogoINTEL.jpg e rtulo da imagem Intel
Corporation: Acessar a URL http://www.intel.com.br Link com imagem
ImLogoAMD.jpg e rtulo da imagem Advanced Micro Devices: Acessar a
URL http://www.amd.com.br Configurao dos textos com os nomes dos
processadores: Todos em negrito, centralizado, cor branca. A linha
tem cor do fundo #00AA00. Colgio Singular Caderno de Exerccio das
Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan
RamosPgina 14 Abaixo segue o cdigo-fonte do Exerccio 16-C: Exerccio
16-C - 1 Pgina para o Frame da Direita Esta a Pgina 16C.
Est Carregada no Frame da Direita. Processadores em 2006 Pentium 4
Extreme Edition Pentium D Celeron D Athlon
64TM FX Athlon
64TM X2 Cempron TM Colgio Singular Caderno de Exerccio das Aulas de
HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 15
Abaixo segue o cdigo-fonte do Exerccio 16-D: Exerccio 16-D - 2
Pgina para o Frame da Direita Esta a Pgina 16D.
Est Carregada no Frame da Direita. Laptops em 2006 Intel CoreTM Duo
Intel Pentium M Intel Celeron M TurionTM 64 Mobile AthlonTM 64
Mobile CempronTM Colgio Singular Caderno de Exerccio das Aulas de
HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 16
Exerccio 17-A: Salvar como EXE17A.htm. Editar conforme as orientaes
e Layout abaixo: Configurao da Pgina Principal: Ttulo no Navegador
= Exerccio 17 - Pgina Principal Borda = No Espao entre os frames =
No Caso o navegador no aceite FRAMES: Configurar a cor do fundo da
pgina vermelha e os textos amarelos. Exibir a mensagem Este
navegador no aceita FRAMES! Outras configuraes de acordo com o
Layout abaixo: Exerccio 17 - Pgina Principal - Microsoft Internet
Explorer Configurao do Frame: Comprimento = 100% Altura = 100
pixels Borda = No Espao entre os frames = No Nome = FrameAlto
Carregar a Pgina = Exe17B.htm Barra de Rolagem = No Permitir
Redimensionamento = No Distncia entre as margens superior e
inferior = 3 pixels Distncia entre as margens direita e esquerda =
3 pixels Configurao do Frame: Comprimento = 150 pixels Borda = No
Espao entre os frames = No Nome = FrameEsquerda Carregar a Pgina =
Exe17C.htm Barra de Rolagem = Automtica Permitir Redimensionamento
= No Configurao do Frame: Comprimento = resto da tela Borda = No
Espao entre os frames = No Nome = FrameDireita Carregar a Pgina =
Exe17D.htm Barra de Rolagem = Sim Permitir Redimensionamento = No
Distncia entre as margens superior e inferior = 0 pixel Distncia
entre as margens direita e esquerda = 0 pixel Exerccio 17-B: Salvar
como EXE17B.htm. Editar conforme as orientaes e Layout abaixo:
Ttulo no Navegador: Exerccio 17-B - Pgina para o Frame do Alto Cor
do fundo = #AADDEE. Cor dos textos = Azul-escuro. Cor dos links =
Marrom. Cor dos links visitados = Branco. Cor dos links em acesso =
Prata. Tabela: comprimento 100%, sem bordas, sem espao entre as
clulas, conforme layout acima: 1 Linha: cor da linha = Azul-claro,
altura da linha = 50 pixels. -1 Clula: comprimento da clula = 110
pixels, inserir a imagem = LgSing.gif com altura = 48 pixels. -2
Clula: alinhamento = direita, negrito, texto: Exerccio 17 - Frames
Aninhados, fonte verdana, tamanho 4. 2 Linha: cor da linha =
Vermelho, altura da linha = 30 pixels. -1 Clula: alinhamento =
centralizado, negrito, texto: Aluno 1, N - Aluno 2, N, fonte arial,
tamanho 5, cor = #FFFF00. Colgio Singular Caderno de Exerccio das
Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan
RamosPgina 17 Exerccio 17-C: Salvar como EXE17C.htm. Editar
conforme as orientaes e Layout abaixo: Configurao da Pgina da
Esquerda: Ttulo no Navegador = Exerccio 17-C - Pgina da Esquerda do
Frame. Cor do fundo = #AADDEE Cor dos textos = Azul-escuro Cor dos
links = Marrom Cor dos links visitados = Branco Cor dos links em
acesso = Prata Inserir as duas figuras abaixo, centralizadas, sem
bordas, com 130px de comprimento, e transform-las em links:
BTexe17D.jpg (com a legenda Abrir Pgina 17-D) que carregar a pgina
Exe17D.htm no FrameDireita. BTexe17E.jpg (com a legenda Abrir Pgina
17-E) que carregar a pgina Exe17E.htm no FrameDireita. Exerccio
17-D: Salvar como EXE17D.htm. Editar conforme as orientaes e Layout
abaixo: Configurao da 1 Pgina da Direita: Ttulo no Navegador =
Exerccio 17-D - 1 Pgina da Direita do Frame. Cor do fundo = #EEEEFF
Cor dos textos = Azul-escuro Inserir tabela com 1 linha e 2 clulas:
Comprimento de 100% da tela, sem bordas, espao interno das clulas =
0px e espao entre as clulas = 0px. 1 Clula: oComprimento de 30px,
alinhamento horizontal esquerda e alinhamento vertical ao topo.
oInserir a imagem = ImCanto.gif, comprimento de 50px e altura de
50px. 2 Clula: oAlinhamento horizontal centralizado. oPargrafo com
o texto Esta a 1 Pgina da Direita, fonte arial, 4. oLinha
Horizontal, comprimento de 300px, espessura de 5px, cor
Azul-escuro. oTexto 17D, fonte arial, 7, itlico e negrito. oLinha
Horizontal, comprimento de 300px, espessura de 5px, cor
Azul-escuro. Exerccio 17-E: Salvar como EXE17E.htm. Editar conforme
as orientaes e Layout abaixo: Configurao da 2 Pgina da Direita:
Ttulo no Navegador = Exerccio 17-E - 2 Pgina da Direita do Frame.
Cor do fundo = #EEEEFF Cor dos textos = Verde-escuro Inserir tabela
com 1 linha e 2 clulas: Comprimento de 100% da tela, sem bordas,
espao interno das clulas = 0px e espao entre as clulas = 0px. 1
Clula: oComprimento de 30px, alinhamento horizontal esquerda e
alinhamento vertical ao topo. oInserir a imagem = ImCanto.gif,
comprimento de 50px e altura de 50px. 2 Clula: oAlinhamento
horizontal centralizado. oPargrafo com o texto Esta a 2 Pgina da
Direita, fonte arial, 4. oLinha Horizontal, comprimento de 300px,
espessura de 5px, cor Verde-escuro. oTexto 17E, fonte arial, 7,
itlico e negrito. oLinha Horizontal, comprimento de 300px,
espessura de 5px, cor Verde-escuro. Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 18 Abaixo seguem os cdigos-fontes: Exerccio 17 -
Pgina Principal O seu Navegador no suporta FRAMES, esta pgina no
pode ser mostrada! Exerccio 17-B - Pgina para o Frame do Alto
Exerccio 17 - Frames Aninhados Aluno 1, N - Aluno 2, N Colgio
Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 19 Exerccio 17-C - Pgina da
Esquerda do Frame Exerccio 17-D - 1 Pgina da Direita do Frame Esta
a 1 Pgina da Direita 17D Exerccio 17-E - 2 Pgina da Direita do
Frame Esta a 2 Pgina da Direita 17E Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 20 Exerccio 18: Salvar como EXE18.htm. Editar
conforme as orientaes e Layout abaixo: Configurao da Pgina
Principal: Ttulo no Navegador = Exerccio 18 - Formulrio Cor do
fundo = Verde-Escuro Cor dos textos = Verde-Claro Outras
configuraes de acordo com o Layout abaixo: Exerccio 18 - Formulrio
- Microsoft Internet Explorer Exerccio 18 - Formulrio de Pesquisa
(fonte arial, 4, centralizado) Aluno 01 Aluno 02 (fonte arial, 4,
centralizado) Dados Pessoais (ALT+P) (cor amarelo) Nome: Senha:
(tamanho de 30 caracteres, digitao mxima de 50 caracteres) (tamanho
de 6 caracteres, digitao mxima de 6 caracteres) Sexo: Masculino
(default) Feminino Cidade: (Lista Suspensa com 7 opes, sendo
exibida apenas 4 de cada vez.) Santo Andr (default) So Bernardo do
Campo So Caetano do Sul Diadema Mau Ribeiro Pires Outra Disciplinas
que mais gosto (ALT+G) (cor amarelo) (Tabela com 2 colunas, sem
bordas.) Linguagem Grfica de Programao Tcnicas de Computao Grfica
(default) Fundamentos da Informtica Tcnicas Operacionais Tcnicas de
Programao Arquitetura de Equipamentos Fale sobre o(a) professor(a)
que mais ama (ALT+F): (cor amarelo) (Tabela com 2 colunas, sem
bordas.) (rea para digitao de texto, com 5 linhas e 40 colunas)
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso
Gallo Atualizao: Prof. Aislan RamosPgina 21 Exerccio 18 - Formulrio
Exerccio 18 - Formulrio de Pesquisa
Aluno 1 - Aluno 2 Dados Pessoais (ALT + P) Nome: Senha: Sexo:
Masculino Feminino Cidade:
Santo Andr So Bernardo So Caetano Diadema Mau Ribeiro Pires Outra
Disciplinas que mais gosto (ALT + G) Linguagem Grfica de
Programao
Tcnicas de Computao Grfica
Fundamentos da Informtica Tcnicas Operacionais
Tcnicas de Programao
Arquitetura de Equipamentos Fale sobre o(a) professor(a) que mais
ama (ALT + F) Colgio Singular Caderno de Exerccio das Aulas de HTML
- Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 22 Exerccio
19: Editar e salvar com o nome de EXE19.htm: Configurao da Pgina
Principal: Ttulo no Navegador = Exerccio 19 - Formulrio Definindo
estilos na prpria pgina: BODY {fonte arial, 10, cor da fonte verde,
cor do fundo verde-claro}; H1{fonte arial, 20, negrito, cor
marrom}; H2{fonte arial, 15, negrito, cor azul-escuro}; H3{fonte
arial, 12, negrito, cor verde-escuro}; TABLE {cor do fundo
vermelho-escuro}; TD{fonte verdana, 12, cor branca, texto alinhado
esquerda}; HR{cor vermelha, espessura de 5pt}; FIELDSET{cor
verde-escuro, borda slida, espessura de 5px}; Outras configuraes de
acordo com o Layout abaixo: Exerccio 19 - Formulrio - Microsoft
Internet Explorer Exerccio 19 - Formulrio com Folha de Estilo Aluno
01 Aluno 02 Dados cadastrais (ALT+D) Nome: Senha: (tamanho de 30
caracteres, digitao mxima de 50 caracteres) (tamanho de 6
caracteres, digitao mxima de 6 caracteres) Sexo: Masculino
(default) Feminino Eletrodomsticos que possui em casa (ALT+E) TV
(CRT) TV (Plasma/LCD/LED) Microcomputador Freezer Chuveiro Eltrico
(default) Microondas O Consumo Mensal Total de (ALT+M) (Lista
Suspensa com 4 opes, sendo exibida apenas 4 de cada vez,
centralizado.) at 100Kwh de 100 a 200 Kwh(dever estar
pr-selecionada) de 200 a 500 Kwh acima de 500Kwh Fale sobre o
apago: (ALT+A) (Tabela com 2 colunas, sem bordas.) (rea para
digitao de texto, com 5 linhas e 40 colunas) Colgio Singular
Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 23 Exerccio 19 - Formulrio
Exerccio 19 - Formulrio com Folha de Estilo Aluno 1 - Aluno 2 Dados
Pessoais (ALT + P) Nome...: Senha..: Sexo:Masculino Feminino
Eletrodomsticos que possui em casa (ALT+E) TV (CRT)
Microcomputador
Chuveiro Eltrico TV (Plasma)
Freezer
Microondas Colgio Singular Caderno de Exerccio das Aulas de HTML -
Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 24 O Consumo
Mensal Total de (ALT+M) at 100Kwh de 100Kwh a 200Kwh de 200kwh a
500Kwh acima de 500Kwh Fale sobre o apago: (ALT + A) Colgio
Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 25 Exerccio 20: Editar e salvar
com o nome de EXE20A.htm: Configurao da Pgina Principal: Ttulo no
Navegador = Exerccio 20A - Pgina 1 Definindo Metainformaes:
Palavras-chave: HTML, Folha de Estilo, Formulrio Descrio da Pgina:
Exerccio 20A, Folha de Estilo Atualizao da pgina: Deve ser
carregada a pgina EXE20B.htm, aps 5 segundos. Definindo estilos na
prpria pgina: BODY {fonte arial, 10, cor da fonte verde, cor do
fundo verde-claro}; H1{fonte arial, 20, negrito, cor marrom};
H2{fonte arial, 15, negrito, cor azul-escuro}; FIELDSET {borda
estilo grove, espessura de 5px}; LINK{fonte verdana, 12,
verde-escuro, negrito, sem sublinhado}; LINK EM AO{fonte verdana,
10, branco, sem sublinhado}; LINK VISITADO{fonte verdana, 10,
laranja, sem sublinhado}; Outras configuraes de acordo com o
Lay-Out abaixo: Exerccio 20A - Pgina 1 - Microsoft Internet
Explorer Exerccio 20A - Comando Meta e Folha de Estilo (H1) Pgina 1
(H3) Aluno 01 Aluno 02 (H2) Portal Singular (ALT+S) (vermelho
negrito) Portal Singular - Anglo(Link para
http://www.singular.com.br) Colgio Singular - Diurno(Link para
http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomediod.htm)
Colgio Singular - Noturno (Link para
http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomedion.htm)
Exerccio 20 - Continuao: Editar e salvar com o nome de EXE20B.htm:
Configurao da Pgina Principal: Ttulo no Navegador = Exerccio 20B -
Sem Estilo - Pgina 2 Definindo Metainformaes: Palavras-chave: HTML,
Folha de Estilo, Formulrio Descrio da Pgina: Exerccio 20B, Folha de
Estilo Atualizao da pgina: Deve ser carregada a pgina EXE20A.htm,
aps 5 segundos. Outras configuraes de acordo com o Lay-Out abaixo:
Exerccio 20B - Pgina 2 - Microsoft Internet Explorer Exerccio 20B -
Sem Estilo - Pgina 2 (H1) Aluno 01 Aluno 02 (H2) Colgio Singular
Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 26 Exerccio 20A - Pgina 1
Exerccio 20A - Comando Meta e Folha de Estilo Pgina 1 Aluno 1 -
Aluno 2 Portal Singular (ALT + S) Portal Singular - Anglo Colgio
Singular - Diurno Colgio Singular - Noturno Exerccio 20B - Pgina 2
Exerccio 20B - Sem Estilo - Pgina 2 Aluno 1 - Aluno 2 Colgio
Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo
Atualizao: Prof. Aislan RamosPgina 27 Exerccio 21: Editar e salvar
com o nome de EXE21.htm: Configurao da Pgina Principal: Ttulo no
Navegador = Exerccio 21 Definindo Metainformaes: Palavras-chave:
HTML, Folha de Estilo, Formulrio Descrio da Pgina: Exerccio 21,
Folha de Estilo Externa Definindo Estilo com Arquivo Externo:
Carregar arquivo de estilo chamado Exe21.css Outras configuraes de
acordo com o Lay-Out abaixo: Texto em H1, centralizado: Exerccio 21
- Folha de Estilo Externa Texto em H2, centralizado: Aluno 01 Aluno
02 Linha Horizontal FIELDSET com a legenda com texto em H3
Exerccios Anteriores (ALT + E), e tecla de atalho ALT+E. oCinco
LINKS, sendo um em cada linha, com acesso aos exerccios 16, 17, 18,
19 e 20. Quebra de Pargrafo. FIELDSET com a legenda com texto em H3
Configurando Tabelas (ALT + T), e tecla de atalho ALT+T. oTabela de
1 linha com 2 colunas, sem bordas. A linha dever ter 50px de
altura.oA 1 Clula ter o texto Estou adorando as folhas de estilo!
com alinhamento vertical para baixo. oA 2 Clula ter o texto Vou
detonar nas prximas pginas! com alinhamento vertical para cima.
Quebra de Pargrafo (retirar estilo pr-formatado). Texto em H3,
centralizado: Formatando Pargrafos. Texto em Pargrafo: Testando a
formatao de um pargrafo. Quebra de linha. Texto em Pargrafo: E ai,
voc gostou? Exerccio 21 - Microsoft Internet Explorer .. ... ...
... .//~ d. .// /...~ //~ d. .// /...~ //~ d. .// /...~ //~ d. .//
/...~ (H1) Aluno 01 Aluno 02 (H2) Exercicios Anteriores {ALT + E}
Exercicios Anteriores {ALT + E} Exercicios Anteriores {ALT + E}
Exercicios Anteriores {ALT + E} Exerccio 16(Link para Exe16a.htm)
Exerccio 17(Link para Exe17a.htm) Exerccio 18(Link para Exe18.htm)
Exerccio 19(Link para Exe19.htm) Exerccio 20(Link para Exe20a.htm)
Configurando Tabelas {ALT + T} Configurando Tabelas {ALT + T}
Configurando Tabelas {ALT + T} Configurando Tabelas {ALT + T} Estou
adorando as folhas de estilo! Vou detonar nas prximas pginas! F FF
Formatando Paragrafos ormatando Paragrafos ormatando Paragrafos
ormatando Paragrafos ../~.d ~ ..~/~,o d. . /~.~.~. ../~.d ~ ..~/~,o
d. . /~.~.~. ../~.d ~ ..~/~,o d. . /~.~.~. ../~.d ~ ..~/~,o d. .
/~.~.~. ~. . ./ ~. . ./ ~. . ./ ~. . ./ Colgio Singular Caderno de
Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof.
Aislan RamosPgina 28 Exerccio 21 Exerccio 21 - Folha de Estilos
Externa Aluno 1 - Aluno 2 Exerccios Anteriores (ALT + E) Exerccio
16
Exerccio 17
Exerccio 18
Exerccio 19
Exerccio 20 Configurando Tabelas (ALT + T) Estou adorando as folhas
de estilo! Vou detonar nas prximas pginas! Formatando Pargrafos
Testando a formatao de um pargrafo.
E ai, voc gostou? Colgio Singular Caderno de Exerccio das Aulas de
HTML - Prof. Celso Gallo Atualizao: Prof. Aislan RamosPgina 29
Exerccio 21 - Continuao: Editar e salvar com o nome de EXE21.css:
Definindo estilos no Arquivo Externo: BODY {carregar figura
LgSing.gif sem repetio, fixa na margem direita e centro da tela.
Margem superior de 0px e cor da barra de rolagem em verde-claro};
H1{fontes script ou arial, 30, negrito, cor #303030, alinhamento
direita}; H2{fonte arial, 16, negrito, cor #505050, alinhamento ao
centro}; H3{fonte arial black, 10, itlico, cor vermelha}; FIELDSET
{borda estilo slido, espessura de 5px, cor vermelha}; LINK{fonte
verdana, 10, cor rgb(50%,50%,10%), negrito, sem sublinhado}; LINK
EM AO{fonte verdana, 10, cor-de-rosa, sem sublinhado}; LINK
VISITADO{fonte verdana, 10, cor-de-laranja, sem sublinhado}; TABLE
{cor do fundo amarela}; TD {fonte verdana, 12, vermelha,
alinhamento ao centro}; HR {cor vermelha, espessura de 5pt}; P{cor
do fundo verde-escuro, fontes script ou arial, 20, branca, com
borda dupla de 10px de espessura};