Exercicios HTML

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

  • General Motors
    • Celta
    • Corsa
    • Astra
  • Ford
    • Ka
    • Fiesta
    • Ecosport

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

  • Curso Tcnico em Eletrnica
  • Curso Tcnico em Qumica

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

  • Curso Tcnico em Eletrnica
    • Manh no tem
    • Noite
  • Curso Tcnico em Qumica
    • Manh no tem
    • Noite

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};