Você está na página 1de 31

P R O G R A M A O

HTML
CADERNO DE EXERCCIOS PRTICOS
Prof. Celso Gallo

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:


<HTML><!-- EXERCCIO 01 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O1</TITLE> </HEAD> <BODY> <H1>Minha 1 Pgina Web - Exerccio 01</H1> <H3>Nome, N e Turma dos Integrantes</H3> <HR> <H6>Colgio Singular Informa:</H6> os alunos do <B>Curso Tcnico em Informtica</B>, na disciplina de <I>LGP</I>, <BR>iniciaram a edio de <U>Pginas Web</U>, utilizando a programao <I><B><U>HTML</U></B></I>. <HR> Desta forma, <BIG>em breve</BIG>, eles sero <H2>Web Designers</H2> </BODY></HTML>

Exerccio 02: Salvar como EXE02.htm:


<HTML><!-- EXERCCIO 02 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O2</TITLE> </HEAD> <BODY> <H1>Minha 2 Pgina Web - Exerccio 02</H1> <H3>Nome, N e Turma dos Integrantes</H3> <HR><B>LISTAS ORDENADAS</B> <OL> <LI>Volkswagen</LI> <OL> <LI>Gol</LI> <LI>Parati</LI> <LI>Golf</LI> </OL> <LI>Fiat</LI> <OL> <LI>Uno</LI> <LI>Palio</LI> <LI>Stilo</LI> </OL> </OL> <HR><B>LISTAS NO ORDENADAS</B> <UL> <LI>General Motors</LI> <UL> <LI>Celta</LI> <LI>Corsa</LI> <LI>Astra</LI> </UL> <LI>Ford</LI> <UL> <LI>Ka</LI> <LI>Fiesta</LI> <LI>Ecosport</LI> </UL> </UL> </BODY></HTML>
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos Pgina 1

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:


<HTML><!-- EXERCCIO 04 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O4</TITLE> </HEAD> <BODY> <H1>Utilizando Links - Exerccio 04</H1> <H3>Nome, N e Turma dos Integrantes</H3> <HR> <A HREF="EXE01.htm">Exerccio 01</A> <P> <A HREF="EXE02.htm">Exerccio 02</A> <P> <A HREF="EXE03.htm">Exerccio 03</A> <P> <A HREF Pgina <P> <A HREF E-Mail ="http://www.celsogallao.hpg.com.br"> do Professor Gallo</A> ="mailto:celsogallao@ig.com.br"> para o Professor Gallo</A>

</BODY></HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 2

Exerccio 05: Salvar como EXE05.htm:


<HTML><!-- EXERCCIO 05 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O5</TITLE> </HEAD> <BODY> <H1>Utilizando Imagens - Exerccio 05</H1> <H3>Nome, N e Turma dos Integrantes</H3> <HR> <IMG SRC="figura01.gif" Texto alinhado pelo <IMG SRC="figura01.jpg" Texto alinhado pelo <IMG SRC="figura01.bmp" Texto alinhado pela ALIGN="top"> TOPO da figura.<P> ALIGN="middle"> MEIO da figura.<P> ALIGN="bottom"> BASE da figura.<P>

<A HREF="mailto:celsogallao@ig.com.br"> <IMG SRC="Figura2.jpg" WIDTH="100" ALT="E-Mail para o Professor Gallo"></A> Esta figura um link, e teve seu comprimento alterado para 100px. <BR> <A HREF="EXE04.htm"> <IMG SRC="Figura2.jpg" HEIGHT="50" ALT="Exerccio 04"></A> Esta figura um link, e teve sua altura alterada para 50px. <BR> Obs.: Repare que, alterando apenas uma outra se ajusta proporcionalmente. </BODY></HTML> medida, a

Exerccio 06: Salvar como EXE06.htm:


<HTML><!-- EXERCCIO 06 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O6</TITLE> </HEAD> <BODY BGCOLOR="purple" TEXT="white" LINK="green" VLINK="black" ALINK="pink"> <CENTER> <H1>Alterando Cores - Exerccio 06</H1> <H3>Nome, N e Turma dos Integrantes</H3> </CENTER> <HR SIZE="5" WIDTH="300" ALIGN="left"> A utilizao de cores em Pginas Web deve ser feita com cautela e bom senso,<BR> pois da mesma forma que podem <B>ENCANTAR</B>, podem tambm <B>ESPANTAR</B> os visitantes. <HR SIZE="5" WIDTH="300" ALIGN="right"> <CENTER> <A HREF ="exe03.htm">Exerccio 03</A><br> <A HREF ="exe04.htm">Exerccio 04</A><br> <A HREF ="exe05.htm">Exerccio 05</A> </CENTER> </BODY></HTML>
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos Pgina 3

Exerccio 07: Salvar como EXE07.htm:


<HTML><!-- EXERCCIO 07 HTML - Prof. Celso Gallo --> <HEAD> <TITLE>Exerccio O7</TITLE> </HEAD> <BODY BGCOLOR=GREEN TEXT=YELLOW <H1>Alinhando Pargrafos Exerccio 07</H1> <H3>Nome, N e Turma dos Integrantes</H3> <HR> <!-- Alinhando DIREITA --> <H2 ALIGN="right">Melhorando a Pgina</H2> <HR WIDTH="220" ALIGN="right"> <DIV ALIGN="right"> Aqui estamos usando o TAG < DIV ><BR> para alinhar este texto direita. </DIV> <HR WIDTH="530" ALIGN="right"> <!-- Alinhando ao CENTRO --> <P ALIGN="center"> Este texto foi centralizado utilizando o TAG < P >. </P> <HR WIDTH="530" ALIGN="left"> <FONT SIZE="3" FACE="verdana" COLOR="white"> <CENTER> Este texto teve a fonte configurada e tambm est centralizado,<BR> mas utilizamos o TAG < CENTER >. </CENTER></FONT> <HR WIDTH="70%"> <!-- Texto em Movimento Alternado --> <MARQUEE BEHAVIOR="alternate"> Texto em Movimento Alternado </MARQUEE> </BODY></HTML>

Exerccio 08: Salvar como EXE08.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAES
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:
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos Pgina 4

Exerccio 08 - Microsoft Internet Explorer

Exerccio 14 - acesso pgina Exe14.htm. Exerccio 15 - acesso pgina Exe15.htm. (Estas pginas ainda no foram editadas, portanto no queira test-las agora!).

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 5

Exerccio 09: Salvar como EXE09.htm. Editar conforme as orientaes e Lay-Out abaixo:
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 Pgina permitindo 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-las aps 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.

ORIENTAES

Exerccio 09 - Microsoft Internet Explorer

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 6

Exerccio 10: Editar e salvar com o nome de EXE10.htm:


<HTML><!---- EXERCCIO 10 - HTML ----> <!--- Informaes de Cabealho ---> <head><title>Exerccio 1O</title></head> <!--- Corpo Principal da Pgina ---> <body bgcolor="#AAAAFF" text="darkblue" link="blue" vlink="ligthblue" alink="white"> <h1 align=center>Utilizando ncoras</h1> <h3 align=center><font color="white">Nome, N e Turma dos Integrantes</font></h3> <a name="topo"></a> <!--- Links para as ncoras ---> <a href="#LO">Lista Ordenada</a><br> <a href="#LNO">Lista No Ordenada</a><br> <a href="#LAO">Lista Aninhada Ordenada</a><br> <a href="#LANO">Lista Aninhada No Ordenada</a> <p> <!--- 1 ncora ---> <HR> <a name="LO"></a><h2 align="center">Lista Ordenada</h2><HR> <OL> <LI>Curso Tcnico em Informtica <LI>Curso Tcnico em Turismo </OL> <a href="#topo">Volta ao Incio</a> <br> <!--- 2 ncora ---> <HR><a name="LNO"></a><h2 align="center">Lista No Ordenada</h2><HR> <UL> <LI>Curso Tcnico em Eletrnica <LI>Curso Tcnico em Qumica </UL> <a href="#topo">Volta ao Incio </a><br> <!--- 3 ncora ---> <HR><a name="LAO"></a><h2 align="center">Lista Aninhada Ordenada</h2><HR> <OL> <LI> Curso Tcnico em Informtica <OL> <LI>Manh <LI>Noite </OL> <LI> Curso Tcnico em Turismo <OL> <LI>Manh <LI>Noite </OL> </OL> <a href="#topo">Volta ao Incio </a><br> <!--- 4 ncora ---> <HR><a name="LANO"></a><h2 align="center">Lista Aninhada No Ordenada</h2><HR> <UL> <LI> Curso Tcnico em Eletrnica <UL> <LI>Manh no tem <LI>Noite </UL> <LI> Curso Tcnico em Qumica <UL> <LI>Manh no tem <LI>Noite </UL> </UL> <a href="#topo">Volta ao Incio </a><br> </BODY></HTML>
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos Pgina 7

Exerccio 11: Editar e salvar com o nome de EXE11.htm:


<HTML><!---- EXERCCIO 11 - HTML - PROF. CELSO GALLO ----> <head><title>Exerccio 11</title></head> <body bgcolor="#AA00AA" text="orange" link="gray" vlink="yellow" alink="pink"> <h1 align="right">Acessando ncoras Externas</h1> <h3 align="right"><font color="silver">Nome, N e Turma dos Integrantes</font></h3> <HR> <B><font size="4">Os links abaixo acessaro as ncoras existentes no Exerccio 10:</font></b> <p> <a href="exe10.htm#LO">Lista Ordenada</a><br> <a href="exe10.htm#LNO">Lista No Ordenada</a><br> <a href="exe10.htm#LAO">Lista Aninhada Ordenada</a><br> <a href="exe10.htm#LANO">Lista Aninhada No Ordenada</a><p> <HR> </BODY> </HTML>

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. 2. 3. Nome Completo do Aluno 1 Nome Completo do Aluno 2 Nome Completo do Aluno 3

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.

Dados Pessoais
1. Apelido do Aluno 1 Endereo: Data de Nascimento: Descrio Fsica: Passatempos: Enviar E-Mail para mim Voltar ao topo Apelido do Aluno 2 Endereo: Data de Nascimento: Descrio Fsica: Passatempos: Enviar E-Mail para mim Voltar ao topo Apelido do Aluno 3 Endereo: Data de Nascimento: Descrio Fsica: Passatempos: Enviar E-Mail para mim Voltar ao topo

Linha Horizontal Texto Normal, Centralizado, definir cor. Linha Horizontal

2.

Lista Aninhada Ordenada em Negrito, com subitens 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.

3.

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 8

Exerccio 13: Salvar como EXE13.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAES
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

Exerccio 13 - Microsoft Internet Explorer

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 9

Exerccio 14: Salvar como EXE14.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAES
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: A1 B1 C1 A2 B2 C2 A3 B3 C3 A4 B4 C4

Exerccio 14 - Microsoft Internet Explorer

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 A1 B2 C1 A1: A2: A3: A4: B1: B2: B3: B4: C1: C2: C3: C4: Comprimento 10%, alinhamento esquerda, cor do fundo amarela. Comprimento 40%, altura 40px, alinhamento ao centro, alinhamento vertical na base, cor do fundo branca. Comprimento 50%, alinhamento ao centro, alinhamento vertical no topo, cor do fundo laranja. Mesclado com A3. Mesclado com A1. Comprimento 40%, altura 50px, alinhamento ao centro, cor do fundo laranja. Mesclado com B2. Comprimento 30%, alinhamento ao centro, cor do fundo amarela. Comprimento 10%, alinhamento direita, cor do fundo laranja. Mesclado com C1. Mesclado com C1. Mesclado com B4. B4 A3

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 10

Exerccio 15: Salvar como EXE15.htm. Editar conforme as orientaes e Lay-Out abaixo:
ORIENTAES
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

Exerccio 15 - Microsoft Internet Explorer

Tabela com 5 linhas e 7 colunas: Comprimento 100%,


borda tamanho 5, cor da borda azul-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: Texto FI: Texto TCG: fonte verdana, tamanho 5, vermelha, alinhado direita, na margem superior. fonte verdana, tamanho 5, vermelha, alinhado ao centro. fonte verdana, tamanho 5, vermelha, alinhado esquerda, na margem inferior. fonte arial, tamanho 3, marrom, negrito, centralizado. Comprimento das clulas = 80px. fonte arial, tamanho 3, preto, negrito, centralizado.

Textos AT, PO: Textos MDIAS:

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 Ramos

Pgina 11

Exerccio 16-A: Salvar como EXE16A.htm. Editar conforme as orientaes e Lay-Out 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 Lay-Out abaixo: Exerccio 16 - Pgina Principal - Microsoft Internet Explorer Configurao do Frame: Configurao do Frame: Comprimento = 200px Comprimento = resto da tela Borda = No Borda = No Espao entre os frames = No Espao entre os frames = No Nome = FrEsquerda Nome = FrDireita Carregar a Pgina = Exe16B.htm Carregar a Pgina = Exe16C.htm Barra de Rolagem = No Barra de Rolagem = Sim Permitir Redimencionamento = No Permitir Redimencionamento = No Abaixo segue o cdigo-fonte: <HTML> <!---- EXERCCIO 16-A - PROF. CELSO GALLO ----> <!---- PGINA PRINCIPAL DOS FRAMES ----> <HEAD> <TITLE>Exerccio 16 - Pgina Principal</TITLE> </HEAD> <FRAMESET COLS="200,*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="FrEsquerda" SRC="Exe16b.htm" SCROLLING="no" NORESIZE> <FRAME NAME="FrDireita" SRC="Exe16c.htm" SCROLLING="yes" NORESIZE> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="red" TEXT="yellow"> <CENTER><B> O seu Navegador no suporta FRAMES, esta pgina no pode ser mostrada! </B></CENTER> </BODY> </NOFRAMES> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 12

Exerccio 16-B: Salvar como EXE16B.htm. Editar conforme as orientaes e Lay-Out 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: <HTML> <!---- EXERCCIO 16-B - PROF. CELSO GALLO ----> <!---- PGINA DA ESQUERDA ----> <HEAD> <TITLE>Exerccio 16-B - Pgina Para o Frame da Esquerda</TITLE> <BASE TARGET = "FrDireita"> </HEAD> <BODY BGCOLOR="orange" TEXT="darkblue" LINK="browm" VLINK="white" ALINK="green"> <CENTER> <FONT FACE="arial" SIZE="3" COLOR="#005500"><B> Exerccio 16<BR> Utilizando Frames </FONT> <HR SIZE="3" COLOR="browm" WIDTH="100%">> <FONT FACE="arial" SIZE="3" COLOR="browm"> Aluno 1 - N<BR> Aluno 2 - N </FONT> <HR SIZE="3" COLOR="browm" WIDTH="100%"> <FONT FACE="arial" SIZE="2" COLOR="#005500"> Esta Pgina est carregada<BR> no Frame da Esquerda<P> </FONT> <A HREF="Exe16c.htm">DESKTOPS</A><P> <A HREF="Exe16d.htm">LAPTOPS</A> </CENTER> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 13

Exerccio 16-C: Salvar como EXE16C.htm. Editar conforme as orientaes e Lay-Out 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 Lay-Out 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 Ramos

Pgina 14

Abaixo segue o cdigo-fonte do Exerccio 16-C: <HTML> <!---- EXERCCIO 16-C - PROF. CELSO GALLO ----> <!---- 1 PGINA DA DIREITA ----> <HEAD> <TITLE>Exerccio 16-C - 1 Pgina para o Frame da Direita</TITLE> </HEAD> <BODY BGCOLOR="darkblue" TEXT="white" LINK="yellow" VLINK="lightblue" ALINK="orange"> <CENTER> <FONT FACE="arial" SIZE="3"><B> Esta a Pgina 16C.<BR> Est Carregada no Frame da Direita. </FONT> <HR SIZE="3" COLOR="white" WIDTH="280"> <FONT FACE="arial" SIZE="3"> <TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="yellow" CELLSPACING="3" CELLPADDING="5"> <CAPTION>Processadores em 2006</CAPTION> <TR BGCOLOR="#0000FF"> <TH COLSPAN="3" WIDTH="50%" HEIGHT="50"> <A HREF="http://www.intel.com.br"> <IMG SRC="ImLogoINTEL.jpg" ALT="Intel Corporation"></A></TH> <TH COLSPAN="3"> <A HREF="http://www.amd.com.br"> <IMG SRC="ImLogoAMD.jpg" ALT="Advanced Micro Devices"></A></TH></TR> <TR BGCOLOR="#000055" HEIGHT="100"> <TH>Pentium <sup></sup> 4 Extreme Edition <TH>Pentium <sup></sup> D <TH>Celeron <sup></sup> D <TH>Athlon<BR>64 <sup><small>TM</small></sup> FX <TH>Athlon<BR>64 <sup><small>TM</small></sup> X2 <TH>Cempron <sup><small>TM</small></sup> </TABLE> </FONT> </CENTER> </BODY> </HTML> </TH> </TH> </TH> </TH> </TH> </TH></TR>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 15

Abaixo segue o cdigo-fonte do Exerccio 16-D: <HTML> <!---- EXERCCIO 16-D - PROF. CELSO GALLO ----> <!---- 2 PGINA DA DIREITA ----> <HEAD> <TITLE>Exerccio 16-D - 2 Pgina para o Frame da Direita</TITLE> </HEAD> <BODY BGCOLOR="darkgreen" TEXT="yellow" LINK="browm" VLINK="gray" ALINK="orange"> <CENTER> <FONT FACE="arial" SIZE="3"><B> Esta a Pgina 16D.<BR> Est Carregada no Frame da Direita. </FONT> <HR SIZE="3" COLOR="yellow" WIDTH="280"> <FONT FACE="arial" SIZE="3"> <TABLE WIDTH="100%" BORDER="1" BORDERCOLOR="white" CELLSPACING="3" CELLPADDING="5"> <CAPTION>Laptops em 2006</CAPTION> <TR BGCOLOR="#00AA00"> <TH ROWSPAN="3" WIDTH="150"> <A HREF="http://www.intel.com.br"> <IMG SRC="ImLogoINTEL.jpg" ALT="Intel Corporation"></A></TH> <TH><FONT COLOR="white"> Intel<sup></sup> Core<sup><small>TM</small></sup> Duo</FONT></TH></TR> <TR BGCOLOR="#00AA00"> <TH><FONT COLOR="white"> Intel<sup></sup> Pentium<sup></sup> M</FONT></TH></TR> <TR BGCOLOR="#00AA00"> <TH><FONT COLOR="white"> Intel<sup></sup> Celeron<sup></sup> M</FONT></TH></TR> <TR BGCOLOR="#004400"> <TH ROWSPAN="3"><font color="white"> <A HREF="http://www.amd.com.br"> <IMG SRC="ImLogoAMD.jpg" ALT="Advanced Micro Devices"></A></TH> <TH><FONT COLOR="white"> Turion<sup><small>TM</small></sup> 64</FONT></TH></TR> <TR BGCOLOR="#004400"> <TH><FONT COLOR="white"> Mobile Athlon<sup><small>TM</small></sup> 64</FONT></TH></TR> <TR BGCOLOR="#004400"> <TH><FONT COLOR="white"> Mobile Cempron<sup><small>TM</small></sup></FONT></TH></TR> </TABLE> </FONT> </CENTER> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 16

Exerccio 17-A: Salvar como EXE17A.htm. Editar conforme as orientaes e Lay-Out 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 Lay-Out abaixo: Exerccio 17 - Pgina Principal - Microsoft Internet Explorer Configurao do Frame: Comprimento = 100% Carregar a Pgina = Exe17B.htm Altura = 100 pixels Barra de Rolagem = No Borda = No Permitir Redimencionamento = No Espao entre os frames = No Distncia entre as margens superior e inferior = 3 pixels Nome = FrameAlto 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 Redimencionamento = 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 Redimencionamento = 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 Lay-Out 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 lay-out 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 Ramos

Pgina 17

Exerccio 17-C: Salvar como EXE17C.htm. Editar conforme as orientaes e Lay-Out 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 transformlas 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 Lay-Out 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: o Comprimento de 30px, alinhamento horizontal esquerda e alinhamento vertical ao topo. o Inserir a imagem = ImCanto.gif, comprimento de 50px e altura de 50px. 2 Clula: o Alinhamento horizontal centralizado. o Pargrafo com o texto Esta a 1 Pgina da Direita, fonte arial, 4. o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Azul-escuro. o Texto 17D, fonte arial, 7, itlico e negrito. o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Azul-escuro.

Exerccio 17-E: Salvar como EXE17E.htm. Editar conforme as orientaes e Lay-Out 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: o Comprimento de 30px, alinhamento horizontal esquerda e alinhamento vertical ao topo. o Inserir a imagem = ImCanto.gif, comprimento de 50px e altura de 50px. 2 Clula: o Alinhamento horizontal centralizado. o Pargrafo com o texto Esta a 2 Pgina da Direita, fonte arial, 4. o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Verde-escuro. o Texto 17E, fonte arial, 7, itlico e negrito. o Linha 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 Ramos

Pgina 18

Abaixo seguem os cdigos-fontes: <HTML> <!---- EXERCCIO 17-A - PROF. CELSO GALLO ----> <!---- PGINA PRINCIPAL DOS FRAMES ----> <HEAD> <TITLE>Exerccio 17 - Pgina Principal</TITLE> </HEAD> <FRAMESET ROWS="100,*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="FrameAlto" SRC="Exe17b.htm" SCROLLING="no" NORESIZE MARGINHEIGHT="3" MARGINWIDTH="3"> <FRAMESET COLS="150,*"> <FRAME NAME="FrameEsquerda" SRC="Exe17c.htm" SCROLLING NORESIZE> <FRAME NAME="FrameDireita" SRC="Exe17d.htm" SCROLLING="yes" NORESIZE MARGINHEIGHT="0" MARGINWIDTH="0"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="red" TEXT="yellow"> <CENTER><B> O seu Navegador no suporta FRAMES, esta pgina no pode ser mostrada! </B></CENTER> </BODY> </NOFRAMES> </HTML>

<HTML> <!---- EXERCCIO 17-B - PROF. CELSO GALLO ----> <!---- PGINA DO ALTO DO FRAME ----> <HEAD> <TITLE>Exerccio 17-B - Pgina para o Frame do Alto</TITLE> </HEAD> <BODY BGCOLOR="#AADDEE" TEXT="darkblue" LINK="browm" VLINK="white" ALINK="silver"> <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0"> <TR BGCOLOR="lightblue" HEIGHT="50"> <TD WIDTH="110"> <IMG SRC="LgSing.gif" HEIGHT="48"></TD> <TH ALIGN="right"> <FONT FACE="Verdana" SIZE="4"> Exerccio 17 - Frames Aninhados </FONT></TD></TR> <TR BGCOLOR="red" HEIGHT="30"> <TH COLSPAN="2"> <FONT FACE="Arial" SIZE="5" COLOR="#FFFF00"> Aluno 1, N - Aluno 2, N </FONT></TD></TR> </TABLE> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 19

<HTML> <!---- EXERCCIO 17-C - PROF. CELSO GALLO ----> <!---- PGINA DA ESQUERDA DO FRAME ----> <HEAD> <TITLE>Exerccio 17-C - Pgina da Esquerda do Frame</TITLE> <BASE TARGET = "FrameDireita"> </HEAD> <BODY BGCOLOR="#AADDEE" TEXT="darkblue" LINK="browm" VLINK="white" ALINK="silver"> <CENTER> <A HREF="Exe17d.htm"> <IMG SRC="BTexe17D.jpg" WIDTH="130" BORDER="0" ALT="Abrir Pgina 17-D"></A></P> <A HREF="Exe17e.htm"> <IMG SRC="BTexe17E.jpg" WIDTH="130" BORDER="0" ALT="Abrir Pgina 17-E"></A></P> </CENTER> </BODY> </HTML>

<HTML> <!---- EXERCCIO 17-D - PROF. CELSO GALLO ----> <!---- 1 PGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exerccio 17-D - 1 Pgina da Direita do Frame</TITLE> </HEAD> <BODY BGCOLOR="#EEEEFF" TEXT="darkblue"> <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="30" VALIGN="top" ALIGN="left"> <IMG SRC="ImCanto.GIF" WIDTH="50" HEIGHT="50"></TD> <TD ALIGN="center"> <FONT FACE="Arial" SIZE="4"> <P>Esta a 1 Pgina da Direita <HR WIDTH="300" SIZE="5" COLOR="darkblue"> <FONT FACE="Arial" SIZE="7"><I><B>17D</B></I> <HR WIDTH="300" SIZE="5" COLOR="darkblue"> </FONT></TD></TR> </TABLE> </BODY> </HTML>

<HTML> <!---- EXERCCIO 17-E - PROF. CELSO GALLO ----> <!---- 2 PGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exerccio 17-E - 2 Pgina da Direita do Frame</TITLE> </HEAD> <BODY BGCOLOR="#EEEEFF" TEXT="darkgreen"> <TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0"> <TR> <TD WIDTH="30" VALIGN="top" ALIGN="left"> <IMG SRC="ImCanto.GIF" WIDTH="50" HEIGHT="50"></TD> <TD ALIGN="center"> <FONT FACE="Arial" SIZE="4"> <P>Esta a 2 Pgina da Direita <HR WIDTH="300" SIZE="5" COLOR="darkgreen"> <FONT FACE="Arial" SIZE="7"><I><B>17E</B></I> <HR WIDTH="300" SIZE="5" COLOR="darkgreen"> </FONT></TD></TR> </TABLE> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 20

Exerccio 18: Salvar como EXE18.htm. Editar conforme as orientaes e Lay-Out 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 Lay-Out 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:
(tamanho de 30 caracteres, digitao mxima de 50 caracteres)

Senha:
(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 Ramos

Pgina 21

<HTML><!---- EXERCCIO 18 - PROF. CELSO GALLO ----> <HEAD> <TITLE>Exerccio 18 - Formulrio</TITLE> </HEAD> <BODY BGCOLOR="darkgreen" TEXT="lightgreen"> <CENTER> <FONT FACE="arial" SIZE="4"> <B>Exerccio 18 - Formulrio de Pesquisa<BR>Aluno 1 - Aluno 2</B></FONT> </CENTER> <!---- Criao do Formulrio ----> <FORM NAME="F1"> <FIELDSET> <LEGEND ACCESSKEY="P"> <FONT COLOR="yellow">Dados Pessoais (ALT + P)</FONT> </LEGEND> Nome: <INPUT TYPE="text" NAME="txt1" VALUE="" SIZE="30" MAXLENGTH="50"> Senha: <INPUT TYPE="password" NAME="psw1" VALUE="" SIZE="6" MAXLENGTH="6"><P> Sexo: <INPUT TYPE="radio" NAME="rd1" VALUE="M" CHECKED>Masculino <INPUT TYPE="radio" NAME="rd1" VALUE="F">Feminino<P> Cidade: <BR> <SELECT NAME="lista1" SIZE="4"> <OPTION SELECTED>Santo Andr</OPTION> <OPTION>So Bernardo</OPTION> <OPTION>So Caetano</OPTION> <OPTION>Diadema</OPTION> <OPTION>Mau</OPTION> <OPTION>Ribeiro Pires</OPTION> <OPTION>Outra</OPTION> </SELECT> </FIELDSET> <P> <FIELDSET> <LEGEND ACCESSKEY="G"> <FONT COLOR="yellow">Disciplinas que mais gosto (ALT + G)</FONT> </LEGEND> <TABLE WIDTH="100%" BORDER="0"> <TR> <TD> <INPUT TYPE="checkbox" NAME="cx1" VALUE="LGP"> Linguagem Grfica de Programao<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TCG" CHECKED> Tcnicas de Computao Grfica<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="FI"> Fundamentos da Informtica</TD> <TD> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TO"> Tcnicas Operacionais<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TP"> Tcnicas de Programao<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="AE"> Arquitetura de Equipamentos</TD></TR> </TABLE> </FIELDSET> <P> <FIELDSET> <LEGEND ACCESSKEY="F"> <FONT COLOR="yellow"> Fale sobre o(a) professor(a) que mais ama (ALT + F) </FONT> </LEGEND> <TABLE WIDTH="100%" BORDER="0"> <TR> <TD> <TEXTAREA NAME="area1" COLS="40" ROWS="5"></TEXTAREA></TD> <TD> <INPUT TYPE="reset" NAME="bt2" VALUE="LIMPAR"><P> <INPUT TYPE="submit" NAME="bt1" VALUE="ENVIAR"></TD></TR> </TABLE> </FIELDSET> </BODY></HTML>
Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos Pgina 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, expessura de 5px}; Outras configuraes de acordo com o Lay-Out abaixo:

Exerccio 19 - Formulrio - Microsoft Internet Explorer

Exerccio 19 - Formulrio com Folha de Estilo Aluno 01 Aluno 02


Dados cadastrais (ALT+D) Nome:
(tamanho de 30 caracteres, digitao mxima de 50 caracteres)

Senha:
(tamanho de 6 caracteres, digitao mxima de 6 caracteres)

Sexo:

Masculino (default)

Feminino

Eletrodomsticos que possui em casa (ALT+E) TV (CRT) Microcomputador Chuveiro Eltrico (default O Consumo Mensal Total de (ALT+M)
(Lista Suspensa com 4 opes, sendo exibida apenas 4 de cada vez, centralizado.)

TV (Plasma) Freezer Microondas

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 Ramos

Pgina 23

<HTML> <!---- EXERCCIO 19 Verso 2006 - HTML - PROF. CELSO GALLO ----> <HEAD> <TITLE>Exerccio 19 - Formulrio</TITLE> <!---- Definindo Estilos ----> <STYLE> <!-BODY {font: 10pt "arial"; color:"green"; background: "lightgreen"}; H1 {font: 20pt "arial"; font-weight: "bold"; color:"brown"}; H2 {font: 15pt "arial"; font-weight: "bold"; color:"darkblue"}; H3 {font: 12pt "arial"; font-weight: "bold"; color:"darkgreen"}; {background: "darkred"}; TABLE TD {font: 12pt "verdana"; color: "white"; text-align: "left"}; HR {color: "red"; line-height: 5pt}; FIELDSET{color: "darkgreen"; border: "solid"; border-width: 5px }; --> </STYLE> </HEAD> <BODY> <CENTER> <H1>Exerccio 19 - Formulrio com Folha de Estilo</H1> <H2>Aluno 1 - Aluno 2</H2> <HR> </CENTER> <FORM NAME="F1"> <!---- 1 Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="P"> <H3>Dados Pessoais (ALT + P)</H3> </LEGEND> Nome...: <INPUT TYPE="text" NAME="txt1" Senha..: <INPUT TYPE="password" NAME="psw1" Sexo: <INPUT TYPE="radio" NAME="rd1" <INPUT TYPE="radio" NAME="rd1" </FIELDSET> <P><!---- 2 Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="E"> <H3>Eletrodomsticos que possui em casa (ALT+E)</H3> </LEGEND> <TABLE WIDTH="100%" BORDER="0"> <TR> <TD> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="TC">TV (CRT)<BR> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="MC">Microcomputador<BR> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="CE" CHECKED>Chuveiro Eltrico</TD> <TD> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="TP">TV (Plasma)<BR> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="FR">Freezer<BR> <INPUT TYPE="CHECKBOX" NAME="cx1" VALUE="MO">Microondas</TD></TR> </TABLE> </FIELDSET>

VALUE="" SIZE="30" MAXLENGTH="50"> VALUE="" SIZE="6" MAXLENGTH="6"><P> VALUE="M" CHECKED>Masculino VALUE="F">Feminino

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 24

<P><!---- 3 Fieldset ----> <CENTER> <FIELDSET> <LEGEND ACCESSKEY="M"> <H3>O Consumo Mensal Total de (ALT+M)</H3> </LEGEND> <SELECT NAME="lista" SIZE="4"> <OPTION>at 100Kwh</OPTION> <OPTION SELECTED>de 100Kwh a 200Kwh</OPTION> <OPTION>de 200kwh a 500Kwh</OPTION> <OPTION>acima de 500Kwh</OPTION> </SELECT> </FIELDSET> </CENTER> <P><!---- 4 Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="A"> <H3>Fale sobre o apago: (ALT + A)</H3> </LEGEND> <TABLE WIDTH="100%" BORDER="0"> <TR> <TD> <TEXTAREA NAME="area1" COLS="40" ROWS="5"></TEXTAREA></TD> <TD> <INPUT TYPE="RESET" NAME="bt2" VALUE="LIMPAR"><P> <INPUT TYPE="SUBMIT" NAME="bt1" VALUE="ENVIAR"></TD></TR> </TABLE> </FIELDSET> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 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 Colgio Singular - Diurno
(Link para http://www.singular.com.br) (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 Ramos

Pgina 26

<HTML> <!---- EXERCCIO 20A Verso 2006 - HTML - PROF. CELSO GALLO ----> <HEAD> <TITLE>Exerccio 20A - Pgina 1</TITLE> <!---- Definindo Meta Informaes ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulrio"> <META HTTP-EQUIV= "Description" CONTENT="Exerccio 20A, Folha de Estilo"> <META HTTP-EQUIV= "Refresh" CONTENT="5; URL=Exe20b.htm"> <!---- Definindo estilos na prpria pgina ----> <STYLE> <!-{font: 10pt "arial"; color:"green"; background: "lightgreen"}; BODY H1 {font: 20pt "arial"; font-weight: "bold"; color:"brown"}; H2 {font: 15pt "arial"; font-weight: "bold"; color:"darkblue"}; FIELDSET {border:"grove"; border-width:5px}; A:LINK {font: 12pt "verdana"; color: "darkgreen"; font-weight: "bold"; textdecoration: "none"}; A:ACTIVE {font: 10pt "verdana"; color: "white"; text-decoration: "none"}; A:VISITED {font: 10pt "verdana"; color: "orange"; text-decoration: "none"}; --> </STYLE> </HEAD> <BODY TEXT="darkgreen"><CENTER> <H1>Exerccio 20A - Comando Meta e Folha de Estilo</H1> <H3>Pgina 1</H3> <H2>Aluno 1 - Aluno 2</H2></CENTER> <FORM NAME="F1"> <FIELDSET> <LEGEND ACCESSKEY="S"> <FONT COLOR="red"><B>Portal Singular (ALT + S)<B></FONT> </LEGEND> <P> <A HREF="http://www.singular.com.br"> Portal Singular - Anglo</A><P> <A HREF="http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares /ensinomediod.htm">Colgio Singular - Diurno</A><P> <A HREF="http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares /ensinomedion.htm">Colgio Singular - Noturno</A><P> </FIELDSET> </FORM> </BODY> </HTML> <HTML> <!---- EXERCCIO 20B Verso 2006 - HTML - PROF. CELSO GALLO ----> <HEAD> <TITLE>Exerccio 20B - Pgina 2</TITLE> <!---- Definindo Meta Informaes ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulrio"> <META HTTP-EQUIV= "Description" CONTENT="Exerccio 20b, Folha de Estilo"> <META HTTP-EQUIV= "Refresh" CONTENT="5; URL=Exe20A.htm"> </HEAD> <BODY TEXT="darkgreen" BGCOLOR="yellow"> <CENTER> <H1>Exerccio 20B - Sem Estilo - Pgina 2</H1> <H2>Aluno 1 - Aluno 2</H2> </CENTER> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 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. o Cinco 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. o Tabela de 1 linha com 2 colunas, sem bordas. A linha dever ter 50px de altura. o A 1 Clula ter o texto Estou adorando as folhas de estilo! com alinhamento vertical para baixo. o A 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

Exerccio 21 - Folha de Estilo Externa (H1)


Aluno 01 Aluno 02 (H2)

Exerccios Anteriores (ALT + E)

Exerccio 16 Exerccio 17 Exerccio 18 Exerccio 19 Exerccio 20

(Link para Exe16a.htm) (Link para Exe17a.htm) (Link para Exe18.htm) (Link para Exe19.htm) (Link para Exe20a.htm)

Configurando Tabelas (ALT + T)

Vou detonar nas prximas pginas! Estou adorando as folhas de estilo!

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 Ramos

Pgina 28

<HTML> <!---- EXERCCIO 21 Verso 2006 - HTML - PROF. CELSO GALLO ----> <HEAD> <TITLE>Exerccio 21</TITLE> <!---- Definindo Meta Informaes ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulrio"> <META HTTP-EQUIV= "Description" CONTENT="Exerccio 21, Folha de Estilo Externa"> <!---- Acessando Arquivo Externo de Folha de Estilos ----> <LINK REL="StyleSheet" HREF="Exe21.css" TYPE="text/css"> </HEAD> <BODY> <H1>Exerccio 21 - Folha de Estilos Externa</H1> <H2>Aluno 1 - Aluno 2</H2> <HR> <FORM NAME="Form1"> <FIELDSET> <LEGEND ACCESSKEY="E"> <H3>Exerccios Anteriores (ALT + E)</H3> </LEGEND> <CENTER> <A HREF="exe16a.htm">Exerccio 16</A><BR> <A HREF="exe17a.htm">Exerccio 17</A><BR> <A HREF="exe18.htm" >Exerccio 18</A><BR> <A HREF="exe19.htm" >Exerccio 19</A><BR> <A HREF="exe20a.htm">Exerccio 20</A> </CENTER> </FIELDSET> <P> <FIELDSET> <LEGEND ACCESSKEY="T"> <H3>Configurando Tabelas (ALT + T)</H3> </LEGEND> <TABLE WIDTH="100%" BORDER="0"> <TR HEIGHT="50"> <TD VALIGN="bottom" >Estou adorando as folhas de estilo!</TD> <TD VALIGN="top">Vou detonar nas prximas pginas!</TD> </TR> </TABLE> </FIELDSET> </FORM> <!---- Retirando o estilo pr-formatado ----> <P style=border: "none"> <H3 align="center">Formatando Pargrafos</H3> <P>Testando a formatao de um pargrafo.<BR>E ai, voc gostou?</P> </BODY> </HTML>

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 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}; <!---- EXERCCIO 21 FOLHA DE ESTILO EXTERNA - Verso 2006 - HTML - PROF. CELSO GALLO ----> <style> <!-BODY {background: URL(LgSing.gif) right center no-repeat fixed; margin-top: 0px; scrollbar-base-color: lightgreen}; H1 {font-family: "script,arial"; font-size: 30pt; font-weight: "bold"; color:"rgb(30,30,30)"; text-align: "right"}; H2 "center"}; H3 {font: 16pt "arial"; font-weight: "bold"; color:"#505050"; text-align: {font: 10pt "arial black"; font-style: "italic"; color: "red"};

A:LINK {font: 10pt "verdana"; color: "rgb(50%,50%,10%)"; font-weight: "bold"; textdecoration: "none"}; A:ACTIVE A:VISITED TABLE TD HR {font: 10pt "verdana"; color: "pink"; text-decoration: "none"}; {font: 10pt "verdana"; color: "orange"; text-decoration: "none"}; {background: "yellow"}; {font: 12pt "verdana"; color: "red"; text-align: "center"}; {color: "red"; line-height: 5pt};

P {background: "darkgreen"; font-family: "script,arial"; font-size: 20pt; color: "white"; border: "double"; border-width: 10px }; FIELDSET --> </style> {color: "red"; border: "solid"; border-width: 5px };

Colgio Singular Caderno de Exerccio das Aulas de HTML - Prof. Celso Gallo Atualizao: Prof. Aislan Ramos

Pgina 30