P R O G R A M A Ç Ã O

HTML HTML HTML HTML








CADFkNO DF
FXFkC|C|O8
PkAI|CO8








Autor: Prof. Ce|so Go||õo
Atuo||zoçõo: Prof. A|s|on komos





Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 1


CADERNO DE EXERCÍCIOS DE HTML
Linguagem Gráfica de Programação I
Hiper Text Markup Language
Este material contém exercícios referentes ao Resumo das Aulas de HTML.

Exercício 01: Salvar como EXE01.htm:

<HTML><!-- EXERCÍCIO 01 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O1</TITLE>
</HEAD>
<BODY>
<H1>Minha 1ª Página Web - Exercício 01</H1>
<H3>Nome, Nº e Turma dos Integrantes</H3>
<HR>
<H6>Colégio Singular Informa:</H6> os alunos do
<B>Curso Técnico em Informática</B>, na
disciplina de <I>LGP</I>,
<BR>iniciaram a edição de <U>Páginas Web</U>,
utilizando a programação
<I><B><U>HTML</U></B></I>.
<HR>
Desta forma, <BIG>em breve</BIG>, eles serão
<H2>Web Designers</H2>

</BODY></HTML>


Exercício 02: Salvar como EXE02.htm:

<HTML><!-- EXERCÍCIO 02 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O2</TITLE>
</HEAD>
<BODY>
<H1>Minha 2ª Página Web - Exercício 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 NÃO 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>


Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 2


Exercício 03: Salvar como EXE03.htm. Editar conforme as orientações e Lay-Out abaixo:

Exercício 03 - Microsoft Internet Explorer

ORIENTAÇÕES


Cabeçalho 1

Cabeçalho 3


Linha Horizontal
Texto em Negrito com letra maiúscula.
Linha Horizontal



Lista Ordenada com 2 itens em
Negrito, com 2 sub-itens em Lista Não
Ordenada em Itálico.




Linha Horizontal
Texto em Negrito com letra maiúscula.
Linha Horizontal




Lista Não Ordenada com 2 itens em
Negrito, com 3 sub-itens em Lista
Ordenada em Itálico.


Exercício 04: Salvar como EXE04.htm:

<HTML><!-- EXERCÍCIO 04 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O4</TITLE>
</HEAD>
<BODY>
<H1>Utilizando Links - Exercício 04</H1>
<H3>Nome, Nº e Turma dos Integrantes</H3>
<HR>

<A HREF="EXE01.htm">Exercício 01</A>
<P>
<A HREF="EXE02.htm">Exercício 02</A>
<P>
<A HREF="EXE03.htm">Exercício 03</A>
<P>

<A HREF ="http://www.celsogallao.hpg.com.br">
Página do Professor Gallão</A>
<P>
<A HREF ="mailto:celsogallao@ig.com.br">
E-Mail para o Professor Gallão</A>

</BODY></HTML>



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 3


Exercício 05: Salvar como EXE05.htm:

<HTML><!-- EXERCÍCIO 05 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O5</TITLE>
</HEAD>

<BODY>
<H1>Utilizando Imagens - Exercício 05</H1>
<H3>Nome, Nº e Turma dos Integrantes</H3>
<HR>

<IMG SRC="figura01.gif" ALIGN="top">
Texto alinhado pelo TOPO da figura.<P>
<IMG SRC="figura01.jpg" ALIGN="middle">
Texto alinhado pelo MEIO da figura.<P>
<IMG SRC="figura01.bmp" ALIGN="bottom">
Texto alinhado pela BASE da figura.<P>

<A HREF="mailto:celsogallao@ig.com.br">
<IMG SRC="Figura2.jpg" WIDTH="100"
ALT="E-Mail para o Professor Gallão"></A>
Esta figura é um link, e teve seu comprimento
alterado para 100px.
<BR>

<A HREF="EXE04.htm">
<IMG SRC="Figura2.jpg" HEIGHT="50"
ALT="Exercício 04"></A>
Esta figura é um link, e teve sua altura alterada
para 50px.
<BR>

Obs.: Repare que, alterando apenas uma medida, a
outra se ajusta proporcionalmente.

</BODY></HTML>


Exercício 06: Salvar como EXE06.htm:

<HTML><!-- EXERCÍCIO 06 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O6</TITLE>
</HEAD>

<BODY BGCOLOR="purple" TEXT="white"
LINK="green" VLINK="black" ALINK="pink">

<CENTER>
<H1>Alterando Cores - Exercício 06</H1>
<H3>Nome, Nº e Turma dos
Integrantes</H3>
</CENTER>

<HR SIZE="5" WIDTH="300" ALIGN="left">

A utilização de cores em Páginas Web deve ser
feita com cautela e bom senso,<BR>
pois da mesma forma que podem <B>ENCANTAR</B>,
podem também <B>ESPANTAR</B> os visitantes.

<HR SIZE="5" WIDTH="300" ALIGN="right">

<CENTER>
<A HREF ="exe03.htm">Exercício 03</A><br>
<A HREF ="exe04.htm">Exercício 04</A><br>
<A HREF ="exe05.htm">Exercício 05</A>
</CENTER>

</BODY></HTML>




Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 4


Exercício 07: Salvar como EXE07.htm:

<HTML><!-- EXERCÍCIO 07 HTML - Prof. Celso Gallão -->
<HEAD>
<TITLE>Exercício O7</TITLE>
</HEAD>
<BODY BGCOLOR=”GREEN” TEXT=”YELLOW”
<H1>Alinhando Parágrafos – Exercício 07</H1>
<H3>Nome, Nº e Turma dos Integrantes</H3>
<HR>
<!-- Alinhando à DIREITA -->
<H2 ALIGN="right">Melhorando a Página</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 também 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>





Exercício 08: Salvar como EXE08.htm. Editar conforme as orientações e Lay-Out abaixo:

ORIENTAÇÕES Exercício 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: Exercício 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 cabeçalho 2: Melhorando o Visual
Texto em arial, 3, amarelo, negrito:
A aplicação de cores e alinhamentos faz com que a
página web fique mais atraente!
Texto em arial, 2, cor #FFAAAA:
Clique nos exercícios abaixo e veja páginas
formatadas:
Links:
Exercício 06 - acesso à página Exe06.htm.
Exercício 07 - acesso à página Exe07.htm.



Linha Horizontal: espessura 5, comprimento 300px.

Texto em cabeçalho 2, ao centro: Utilizando Tabelas
Texto em arial, 3, amarelo, negrito, ao centro:
A utilização de Tabelas permite a formatação de objetos (textos e imagens) lado-a-lado!
Texto em arial, 2, cor #FFAAAA, ao centro:
Veja a utilização nos exercícios abaixo:
Links (As páginas dos links abaixo ainda não foram editadas, portanto não queira testá-las agora!):
Exercício 14 - acesso à página Exe14.htm.
Exercício 15 - acesso à página Exe15.htm.



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 5


Exercício 09: Salvar como EXE09.htm. Editar conforme as orientações e Lay-Out abaixo:

ORIENTAÇÕES Exercício 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:
Exercício 09: Aluno 1 - Aluno 2

Linha Horizontal:
espessura 2, comp. 100%, cor verde-escuro.

Texto em cabeçalho 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 parágrafo ao final:
Com os Frames fazemos subdivisões na Página
permitindo carregar várias Páginas 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 exercícios abaixo mostram páginas web com Frames,
mas você somente poderá acessá-las
após elas serem editadas, é claro.

Links, à direita, um em cada linha:
Exercício 16 - acesso à página Exe16.htm.
Exercício 17 - acesso à página Exe17.htm.

Linha Horizontal:
espessura 5, comp. 360px, cor azul-escuro, à direita.




Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 6


Exercício 10: Editar e salvar com o nome de EXE10.htm:

<HTML><!---- EXERCÍCIO 10 - HTML ---->
<!--- Informações de Cabeçalho --->
<head><title>Exercício 1O</title></head>

<!--- Corpo Principal da Página --->
<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 Não Ordenada</a><br>
<a href="#LAO">Lista Aninhada Ordenada</a><br>
<a href="#LANO">Lista Aninhada Não Ordenada</a> <p>

<!--- 1ª âncora --->
<HR>
<a name="LO"></a><h2 align="center">Lista Ordenada</h2><HR>
<OL>
<LI>Curso Técnico em Informática
<LI>Curso Técnico em Turismo
</OL>
<a href="#topo">Volta ao Início</a>
<br>

<!--- 2ª âncora --->
<HR><a name="LNO"></a><h2 align="center">Lista Não Ordenada</h2><HR>
<UL>
<LI>Curso Técnico em Eletrônica
<LI>Curso Técnico em Química
</UL>
<a href="#topo">Volta ao Início </a><br>

<!--- 3ª âncora --->
<HR><a name="LAO"></a><h2 align="center">Lista Aninhada Ordenada</h2><HR>
<OL>
<LI> Curso Técnico em Informática
<OL>
<LI>Manhã
<LI>Noite
</OL>
<LI> Curso Técnico em Turismo
<OL>
<LI>Manhã
<LI>Noite
</OL>
</OL>
<a href="#topo">Volta ao Início </a><br>

<!--- 4ª âncora --->
<HR><a name="LANO"></a><h2 align="center">Lista Aninhada Não Ordenada</h2><HR>
<UL>
<LI> Curso Técnico em Eletrônica
<UL>
<LI>Manhã não tem
<LI>Noite
</UL>
<LI> Curso Técnico em Química
<UL>
<LI>Manhã não tem
<LI>Noite
</UL>
</UL>
<a href="#topo">Volta ao Início </a><br>
</BODY></HTML>

Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 7


Exercício 11: Editar e salvar com o nome de EXE11.htm:

<HTML><!---- EXERCÍCIO 11 - HTML - PROF. CELSO GALLÃO ---->
<head><title>Exercício 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 acessarão as âncoras existentes no Exercício 10:</font></b>
<p>

<a href="exe10.htm#LO">Lista Ordenada</a><br>
<a href="exe10.htm#LNO">Lista Não Ordenada</a><br>
<a href="exe10.htm#LAO">Lista Aninhada Ordenada</a><br>
<a href="exe10.htm#LANO">Lista Aninhada Não Ordenada</a><p>
<HR>
</BODY>
</HTML>

Exercício 12: Editar e salvar com o nome de EXE12.htm de tal forma que a página seja exibida conforme o Lay-Out abaixo:

Exercício 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 1
• Endereço:
• Data de Nascimento:
• Descrição Física:
• Passatempos:
• Enviar E-Mail para mim
Voltar ao topo

2. Apelido do Aluno 2
• Endereço:
• Data de Nascimento:
• Descrição Física:
• Passatempos:
• Enviar E-Mail para mim
Voltar ao topo

3. Apelido do Aluno 3
• Endereço:
• Data de Nascimento:
• Descrição Física:
• Passatempos:
• Enviar E-Mail para mim
Voltar ao topo


Cabeçalho 1, Centralizado, definir cor.

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



Lista Ordenada, em Negrito, com Links para
Âncoras nesta Página 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 Não Ordenados em Itálico, definir cor.
Link somente na palavra “E-Mail” com o
endereço de e-mail do referido aluno.
Links para Âncora chamada #topo para exibir o
topo da Página Web, com fonte normal.



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 8


Exercício 13: Salvar como EXE13.htm. Editar conforme as orientações e Lay-Out abaixo:

ORIENTAÇÕES Exercício 13 - Microsoft Internet Explorer


Corpo Principal: Fundo Azul-claro, Link = vermelho,
Textos = #000055, Link Visitado = preto,
Link em Acesso = branco.

Texto em cabeçalho tamanho 2:
Exercício 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, através de tabela:
Tabela sem borda, com 1 linha por 3 colunas.
Em cada célula haverá uma figura e um texto.
As figuras são: foto1.jpg, foto2.jpg e foto3.jpg, todas com borda tamanho 5.
As figuras são links que acessam as âncoras externas de cada aluno, respectivamente, descritas no EXERCÍCIO 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, através de tabela:
Tabela com borda vermelha tamanho 3, com 1 linha por 3 colunas e cor de fundo amarelo.
Em cada célula haverá a figura LgSingP.jpg com 200px de comprimento e um texto.
As figuras são links que acessam as seguintes páginas web:
• 1ª Célula: http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomediod.htm
• 2ª Célula: http://www.singular.com.br
• 3ª Célula: 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ª Célula: Colégio Singular - Diurno
• 2ª Célula: Portal Singular - Anglo
• 3ª Célula: Colégio Singular - Noturno



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 9


Exercício 14: Salvar como EXE14.htm. Editar conforme as orientações e Lay-Out abaixo:

ORIENTAÇÕES Exercício 14 - Microsoft Internet Explorer


Corpo Principal: Fundo Prata.

Texto em Arial, 3, cor R=00 G=55 B=00, negrito ao centro:
Exercício 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.
Rótulo da Tabela: Tabela Não Mesclada

Todas as células alinhadas ao centro e com os seguintes textos:

A1 A2 A3 A4
B1 B2 B3 B4
C1 C2 C3 C4

Tabela com 3 linhas e 4 colunas:
Comprimento 100%, cor do fundo rosa.
Com borda tamanho 3, cor vermelha.
Rótulo da Tabela: Tabela Mesclada
Todas as células 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.





Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 10


Exercício 15: Salvar como EXE15.htm. Editar conforme as orientações e Layout abaixo:

ORIENTAÇÕES Exercício 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:
Exercício 15 - Nossas Notas da 1ªUL/2006

Tabela com 5 linhas e 7 colunas: Comprimento 100%,
borda tamanho 5, cor da borda azul-escuro e espaço
entre as células 0.
Configuração 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”.

Configuração dos Textos:
• Texto “Turma”: fonte arial, tamanho 4, branca, negrito, centralizado, com fundo preto. Comprimento da célula = 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 células = 80px.
• Textos “MÉDIAS”: fonte arial, tamanho 3, preto, negrito, centralizado.

• Notas de AT e PO de TO: fonte padrão, tamanho 5, marrom, itálico, negrito, alinhados na margem superior à direita.
• Notas de AT e PO de FI: fonte padrão, tamanho 5, marrom, itálico, negrito, alinhados ao centro.
• Notas de AT e PO de TCG: fonte padrão, tamanho 5, marrom, itálico, negrito, alinhados na margem inferior à esquerda.

• Médias de TO: fonte padrão, tamanho 7, preto, itálico, alinhados na margem superior à direita.
• Médias de FI: fonte padrão, tamanho 7, preto, itálico, alinhados ao centro.
• Médias de TCG: fonte padrão, tamanho 7, preto, itálico, alinhados na margem inferior à esquerda.




Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 11


Exercício 16-A: Salvar como EXE16A.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página Principal:
• Título no Navegador = Exercício 16 - Página Principal
• Borda = Não
• Espaço entre os frames = Não
• Caso o navegador não aceite FRAMES:
Configurar a cor do fundo da página vermelha e os textos amarelos.
Exibir a mensagem “Este navegador não aceita FRAMES!”

Outras configurações de acordo com o Layout abaixo:

Exercício 16 - Página Principal - Microsoft Internet Explorer

Configuração do Frame:
• Comprimento = 200px
• Borda = Não
• Espaço entre os frames = Não
• Nome = FrEsquerda
• Carregar a Página = Exe16B.htm
• Barra de Rolagem = Não
• Permitir Redimensionamento = Não
Configuração do Frame:
• Comprimento = resto da tela
• Borda = Não
• Espaço entre os frames = Não
• Nome = FrDireita
• Carregar a Página = Exe16C.htm
• Barra de Rolagem = Sim
• Permitir Redimensionamento = Não

Abaixo segue o código-fonte:


<HTML>
<!---- EXERCÍCIO 16-A - PROF. CELSO GALLÃO ---->
<!---- PÁGINA PRINCIPAL DOS FRAMES ---->
<HEAD>
<TITLE>Exercício 16 - Página 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 não suporta FRAMES, esta página não pode ser mostrada!
</B></CENTER>
</BODY>
</NOFRAMES>
</HTML>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 12


Exercício 16-B: Salvar como EXE16B.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página da Esquerda:
• Título no Navegador = Exercício 16-B - Página 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, “Exercício 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 Página está carregada no Frame da Esquerda”:
• Fonte arial, tamanho 2, cor #005500, centralizado e negrito.

Dois links, em dois parágrafos:
• DESKTOPS, que carregará a página Exe16C.htm no FrDireita.
• LAPTOPS, que carregará a página Exe16D.htm no FrDireita.



Abaixo segue o código-fonte:


<HTML>
<!---- EXERCÍCIO 16-B - PROF. CELSO GALLÃO ---->
<!---- PÁGINA DA ESQUERDA ---->
<HEAD>
<TITLE>Exercício 16-B - Página 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>
Exercício 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 Página 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>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 13


Exercício 16-C: Salvar como EXE16C.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página da Direita:
• Título no Navegador:
Exercício 16-C - 1ª Página 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 padrão,
centralizado e negrito.
Esta é a Página 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.
• Espaço entre as células = 3 e espaço entre o conteúdo e a borda da célula = 5.
• Rótulo da Tabela com o texto “Processadores em 2006”.

Configuração dos Links INTEL e AMD.
• Ambas as células possuem 50% de comprimento e 50px de altura, centralizado e cor do fundo #0000FF.
• Link com imagem “ImLogoINTEL.jpg” e rótulo da imagem “Intel Corporation”:
Acessará a URL http://www.intel.com.br
• Link com imagem “ImLogoAMD.jpg” e rótulo da imagem “Advanced Micro Devices”:
Acessará a URL http://www.amd.com.br

Configuração dos textos com os nomes dos processadores:
• Todos em negrito, centralizado. A linha tem altura de 100px e cor do fundo #000055.




Exercício 16-D: Salvar como EXE16D.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página da Direita:
• Título no Navegador:
Exercício 16-D - 2ª Página 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 padrão,
centralizado e negrito.
Esta é a Página 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.
• Espaço entre as células = 3 e espaço entre o conteúdo e a borda da célula = 5.
• Rótulo da Tabela com o texto “Laptops em 2006”.

Configuração dos Links INTEL e AMD. Ambas as células possuem 150px de comprimento, centralizado e cor do fundo #0000FF.
• Link com imagem “ImLogoINTEL.jpg” e rótulo da imagem “Intel Corporation”:
Acessará a URL http://www.intel.com.br
• Link com imagem “ImLogoAMD.jpg” e rótulo da imagem “Advanced Micro Devices”:
Acessará a URL http://www.amd.com.br

Configuração dos textos com os nomes dos processadores:
• Todos em negrito, centralizado, cor branca. A linha tem cor do fundo #00AA00.



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 14


Abaixo segue o código-fonte do Exercício 16-C:


<HTML>
<!---- EXERCÍCIO 16-C - PROF. CELSO GALLÃO ---->
<!---- 1ª PÁGINA DA DIREITA ---->
<HEAD>
<TITLE>Exercício 16-C - 1ª Página 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 Página 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>
<TH>Pentium <sup>®</sup> D </TH>
<TH>Celeron <sup>®</sup> D </TH>
<TH>Athlon<BR>64 <sup><small>TM</small></sup> FX </TH>
<TH>Athlon<BR>64 <sup><small>TM</small></sup> X2 </TH>
<TH>Cempron <sup><small>TM</small></sup> </TH></TR>

</TABLE>
</FONT>
</CENTER>
</BODY>
</HTML>





Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 15


Abaixo segue o código-fonte do Exercício 16-D:


<HTML>
<!---- EXERCÍCIO 16-D - PROF. CELSO GALLÃO ---->
<!---- 2ª PÁGINA DA DIREITA ---->
<HEAD>
<TITLE>Exercício 16-D - 2ª Página 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 Página 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>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 16


Exercício 17-A: Salvar como EXE17A.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página Principal:
• Título no Navegador = Exercício 17 - Página Principal
• Borda = Não
• Espaço entre os frames = Não
• Caso o navegador não aceite FRAMES:
Configurar a cor do fundo da página vermelha e os textos amarelos.
Exibir a mensagem “Este navegador não aceita FRAMES!”

Outras configurações de acordo com o Layout abaixo:

Exercício 17 - Página Principal - Microsoft Internet Explorer

Configuração do Frame:
• Comprimento = 100%
• Altura = 100 pixels
• Borda = Não
• Espaço entre os frames = Não
• Nome = FrameAlto

• Carregar a Página = Exe17B.htm
• Barra de Rolagem = Não
• Permitir Redimensionamento = Não
• Distância entre as margens superior e inferior = 3 pixels
• Distância entre as margens direita e esquerda = 3 pixels

Configuração do Frame:
• Comprimento = 150 pixels
• Borda = Não
• Espaço entre os frames = Não
• Nome = FrameEsquerda
• Carregar a Página = Exe17C.htm
• Barra de Rolagem = Automática
• Permitir Redimensionamento = Não

Configuração do Frame:
• Comprimento = resto da tela
• Borda = Não
• Espaço entre os frames = Não
• Nome = FrameDireita
• Carregar a Página = Exe17D.htm
• Barra de Rolagem = Sim
• Permitir Redimensionamento = Não
• Distância entre as margens superior e inferior = 0 pixel
• Distância entre as margens direita e esquerda = 0 pixel


Exercício 17-B: Salvar como EXE17B.htm. Editar conforme as orientações e Layout abaixo:



Título no Navegador: Exercício 17-B - Página 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 espaço entre as células, conforme layout acima:
• 1ª Linha: cor da linha = Azul-claro, altura da linha = 50 pixels.
- 1ª Célula: comprimento da célula = 110 pixels, inserir a imagem = LgSing.gif com altura = 48 pixels.
- 2ª Célula: alinhamento = direita, negrito, texto: Exercício 17 - Frames Aninhados, fonte verdana, tamanho 4.

• 2ª Linha: cor da linha = Vermelho, altura da linha = 30 pixels.
- 1ª Célula: alinhamento = centralizado, negrito, texto: Aluno 1, Nº - Aluno 2, Nº, fonte arial, tamanho 5, cor = #FFFF00.



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 17


Exercício 17-C: Salvar como EXE17C.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página da Esquerda:
• Título no Navegador = Exercício 17-C - Página 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 Página 17-D”) que carregará a página Exe17D.htm no
FrameDireita.
• BTexe17E.jpg (com a legenda “Abrir Página 17-E”) que carregará a página Exe17E.htm no
FrameDireita.



Exercício 17-D: Salvar como EXE17D.htm. Editar conforme as orientações e Layout abaixo:

Configuração da 1ª Página da Direita:
• Título no Navegador = Exercício 17-D - 1ª Página da Direita do Frame.
• Cor do fundo = #EEEEFF
• Cor dos textos = Azul-escuro


Inserir tabela com 1 linha e 2 células: Comprimento de 100% da tela, sem bordas, espaço interno das células = 0px e espaço
entre as células = 0px.
• 1ª Célula:
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ª Célula:
o Alinhamento horizontal centralizado.
o Parágrafo com o texto “Esta é a 1ª Página da Direita”, fonte arial, 4.
o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Azul-escuro.
o Texto “17D”, fonte arial, 7, itálico e negrito.
o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Azul-escuro.


Exercício 17-E: Salvar como EXE17E.htm. Editar conforme as orientações e Layout abaixo:

Configuração da 2ª Página da Direita:
• Título no Navegador = Exercício 17-E - 2ª Página da Direita do Frame.
• Cor do fundo = #EEEEFF
• Cor dos textos = Verde-escuro

Inserir tabela com 1 linha e 2 células: Comprimento de 100% da tela, sem bordas, espaço interno das células = 0px e espaço
entre as células = 0px.
• 1ª Célula:
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ª Célula:
o Alinhamento horizontal centralizado.
o Parágrafo com o texto “Esta é a 2ª Página da Direita”, fonte arial, 4.
o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Verde-escuro.
o Texto “17E”, fonte arial, 7, itálico e negrito.
o Linha Horizontal, comprimento de 300px, espessura de 5px, cor Verde-escuro.



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 18


Abaixo seguem os códigos-fontes:


<HTML>
<!---- EXERCÍCIO 17-A - PROF. CELSO GALLÃO ---->
<!---- PÁGINA PRINCIPAL DOS FRAMES ---->
<HEAD>
<TITLE>Exercício 17 - Página 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 não suporta FRAMES, esta página não pode ser mostrada!
</B></CENTER>
</BODY>
</NOFRAMES>
</HTML>






<HTML>
<!---- EXERCÍCIO 17-B - PROF. CELSO GALLÃO ---->
<!---- PÁGINA DO ALTO DO FRAME ---->
<HEAD>
<TITLE>Exercício 17-B - Página 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">
Exercício 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>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 19



<HTML>
<!---- EXERCÍCIO 17-C - PROF. CELSO GALLÃO ---->
<!---- PÁGINA DA ESQUERDA DO FRAME ---->
<HEAD>
<TITLE>Exercício 17-C - Página 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 Página 17-D"></A></P>
<A HREF="Exe17e.htm">
<IMG SRC="BTexe17E.jpg" WIDTH="130" BORDER="0" ALT="Abrir Página 17-E"></A></P>
</CENTER>
</BODY>
</HTML>







<HTML>
<!---- EXERCÍCIO 17-D - PROF. CELSO GALLÃO ---->
<!---- 1ª PÁGINA DA DIREITA DO FRAME ---->
<HEAD>
<TITLE>Exercício 17-D - 1ª Página 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ª Página 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>
<!---- EXERCÍCIO 17-E - PROF. CELSO GALLÃO ---->
<!---- 2ª PÁGINA DA DIREITA DO FRAME ---->
<HEAD>
<TITLE>Exercício 17-E - 2ª Página 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ª Página 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>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 20


Exercício 18: Salvar como EXE18.htm. Editar conforme as orientações e Layout abaixo:

Configuração da Página Principal:
• Título no Navegador = Exercício 18 - Formulário
• Cor do fundo = Verde-Escuro
• Cor dos textos = Verde-Claro

Outras configurações de acordo com o Layout abaixo:

Exercício 18 - Formulário - Microsoft Internet Explorer

Exercício 18 - Formulário 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, digitação máxima de 50 caracteres) (tamanho de 6 caracteres, digitação máxima de 6 caracteres)


Sexo: Masculino (default) Feminino

Cidade: (Lista Suspensa com 7 opções, sendo exibida apenas 4 de cada vez.)
Santo André (default)
São Bernardo do Campo
São Caetano do Sul
Diadema
Mauá
Ribeirão Pires
Outra




Disciplinas que mais gosto (ALT+G) (cor amarelo)

(Tabela com 2 colunas, sem bordas.)
Linguagem Gráfica de Programação
Técnicas de Computação Gráfica (default)
Fundamentos da Informática
Técnicas Operacionais
Técnicas de Programação
Arquitetura de Equipamentos




Fale sobre o(a) professor(a) que mais ama (ALT+F): (cor amarelo)

(Tabela com 2 colunas, sem bordas.)

(Área para digitação de texto, com 5 linhas e 40 colunas)












Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 21



<HTML><!---- EXERCÍCIO 18 - PROF. CELSO GALLÃO ---->
<HEAD>
<TITLE>Exercício 18 - Formulário</TITLE>
</HEAD>
<BODY BGCOLOR="darkgreen" TEXT="lightgreen">
<CENTER>
<FONT FACE="arial" SIZE="4">
<B>Exercício 18 - Formulário de Pesquisa<BR>Aluno 1 - Aluno 2</B></FONT>
</CENTER>
<!---- Criação do Formulário ---->
<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>São Bernardo</OPTION>
<OPTION>São Caetano</OPTION>
<OPTION>Diadema</OPTION>
<OPTION>Mauá</OPTION>
<OPTION>Ribeirão 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 Gráfica de Programação<BR>
<INPUT TYPE="checkbox" NAME="cx1" VALUE="TCG" CHECKED>
Técnicas de Computação Gráfica<BR>
<INPUT TYPE="checkbox" NAME="cx1" VALUE="FI">
Fundamentos da Informática</TD>
<TD>
<INPUT TYPE="checkbox" NAME="cx1" VALUE="TO">
Técnicas Operacionais<BR>
<INPUT TYPE="checkbox" NAME="cx1" VALUE="TP">
Técnicas de Programação<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>





Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 22


Exercício 19: Editar e salvar com o nome de EXE19.htm:

Configuração da Página Principal:
• Título no Navegador = Exercício 19 - Formulário

Definindo estilos na própria página:
• 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 sólida, espessura de 5px};

Outras configurações de acordo com o Layout abaixo:

Exercício 19 - Formulário - Microsoft Internet Explorer

Exercício 19 - Formulário com Folha de Estilo
Aluno 01 – Aluno 02

Dados cadastrais (ALT+D)

Nome: Senha:
(tamanho de 30 caracteres, digitação máxima de 50 caracteres) (tamanho de 6 caracteres, digitação máxima de 6 caracteres)

Sexo: Masculino (default) Feminino


Eletrodomésticos que possui em casa (ALT+E)

TV (CRT) TV (Plasma/LCD/LED)
Microcomputador Freezer
Chuveiro Elétrico (default) Microondas


O Consumo Mensal Total é de (ALT+M)
(Lista Suspensa com 4 opções, 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 apagão: (ALT+A)

(Tabela com 2 colunas, sem bordas.)

(Área para digitação de texto, com 5 linhas e 40 colunas)














Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 23



<HTML>
<!---- EXERCÍCIO 19 Versão 2006 - HTML - PROF. CELSO GALLÃO ---->
<HEAD>
<TITLE>Exercício 19 - Formulário</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"};
TABLE {background: "darkred"};
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>Exercício 19 - Formulário 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" 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
</FIELDSET>


<P><!---- 2º Fieldset ---->


<FIELDSET>
<LEGEND ACCESSKEY="E">
<H3>Eletrodomésticos 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 Elétrico</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>








Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 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 apagão: (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>



Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 25


Exercício 20: Editar e salvar com o nome de EXE20A.htm:

Configuração da Página Principal:
• Título no Navegador = Exercício 20A - Página 1

Definindo Metainformações:
• Palavras-chave: HTML, Folha de Estilo, Formulário
• Descrição da Página: Exercício 20A, Folha de Estilo
• Atualização da página: Deve ser carregada a página EXE20B.htm, após 5 segundos.

Definindo estilos na própria página:
• 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 AÇÃO {fonte verdana, 10, branco, sem sublinhado};
• LINK VISITADO {fonte verdana, 10, laranja, sem sublinhado};

Outras configurações de acordo com o Lay-Out abaixo:

Exercício 20A - Página 1 - Microsoft Internet Explorer


Exercício 20A - Comando Meta e Folha de Estilo (H1)

Página 1 (H3)

Aluno 01 – Aluno 02 (H2)

Portal Singular (ALT+S) (vermelho negrito)

Portal Singular - Anglo (Link para http://www.singular.com.br)

Colégio Singular - Diurno (Link para http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomediod.htm)

Colégio Singular - Noturno (Link para http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares/ensinomedion.htm)






Exercício 20 - Continuação: Editar e salvar com o nome de EXE20B.htm:

Configuração da Página Principal:
• Título no Navegador = Exercício 20B - Sem Estilo - Página 2

Definindo Metainformações:
• Palavras-chave: HTML, Folha de Estilo, Formulário
• Descrição da Página: Exercício 20B, Folha de Estilo
• Atualização da página: Deve ser carregada a página EXE20A.htm, após 5 segundos.

Outras configurações de acordo com o Lay-Out abaixo:

Exercício 20B - Página 2 - Microsoft Internet Explorer


Exercício 20B - Sem Estilo - Página 2 (H1)

Aluno 01 – Aluno 02 (H2)








Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 26



<HTML>
<!---- EXERCÍCIO 20A Versão 2006 - HTML - PROF. CELSO GALLÃO ---->
<HEAD>
<TITLE>Exercício 20A - Página 1</TITLE>

<!---- Definindo Meta Informações ---->
<META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulário">
<META HTTP-EQUIV= "Description" CONTENT="Exercício 20A, Folha de Estilo">
<META HTTP-EQUIV= "Refresh" CONTENT="5; URL=Exe20b.htm">

<!---- Definindo estilos na própria página ---->
<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"};
FIELDSET {border:"grove"; border-width:5px};
A:LINK {font: 12pt "verdana"; color: "darkgreen"; font-weight: "bold"; text-
decoration: "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>Exercício 20A - Comando Meta e Folha de Estilo</H1>
<H3>Página 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">Colégio Singular - Diurno</A><P>
<A HREF="http://paginas.terra.com.br/educacao/portaisls/singular/principal/regulares
/ensinomedion.htm">Colégio Singular - Noturno</A><P>
</FIELDSET>

</FORM>
</BODY>
</HTML>






<HTML>
<!---- EXERCÍCIO 20B Versão 2006 - HTML - PROF. CELSO GALLÃO ---->
<HEAD>
<TITLE>Exercício 20B - Página 2</TITLE>

<!---- Definindo Meta Informações ---->
<META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulário">
<META HTTP-EQUIV= "Description" CONTENT="Exercício 20b, Folha de Estilo">
<META HTTP-EQUIV= "Refresh" CONTENT="5; URL=Exe20A.htm">

</HEAD>
<BODY TEXT="darkgreen" BGCOLOR="yellow">
<CENTER>
<H1>Exercício 20B - Sem Estilo - Página 2</H1>
<H2>Aluno 1 - Aluno 2</H2>
</CENTER>
</BODY>
</HTML>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 27


Exercício 21: Editar e salvar com o nome de EXE21.htm:

Configuração da Página Principal:
• Título no Navegador = Exercício 21

Definindo Metainformações:
• Palavras-chave: HTML, Folha de Estilo, Formulário
• Descrição da Página: Exercício 21, Folha de Estilo Externa

Definindo Estilo com Arquivo Externo:
• Carregar arquivo de estilo chamado Exe21.css

Outras configurações de acordo com o Lay-Out abaixo:
• Texto em H1, centralizado: Exercício 21 - Folha de Estilo Externa
• Texto em H2, centralizado: Aluno 01 – Aluno 02
• Linha Horizontal
• FIELDSET com a legenda com texto em H3 Exercícios Anteriores (ALT + E), e tecla de atalho ALT+E.
o Cinco LINKS, sendo um em cada linha, com acesso aos exercícios 16, 17, 18, 19 e 20.
• Quebra de Parágrafo.
• 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ª Célula terá o texto Estou adorando as folhas de estilo! com alinhamento vertical para baixo.
o A 2ª Célula terá o texto Vou detonar nas próximas páginas! com alinhamento vertical para cima.
• Quebra de Parágrafo (retirar estilo pré-formatado).
• Texto em H3, centralizado: Formatando Parágrafos.
• Texto em Parágrafo: Testando a formatação de um parágrafo.
• Quebra de linha.
• Texto em Parágrafo: E ai, você gostou?

Exercício 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}

Exercício 16 (Link para Exe16a.htm)
Exercício 17 (Link para Exe17a.htm)
Exercício 18 (Link para Exe18.htm)
Exercício 19 (Link para Exe19.htm)
Exercício 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 próximas páginas!






F FF Formatando Paragrafos ormatando Paragrafos ormatando Paragrafos ormatando Paragrafos


../~.d ~ ¡..~/~,o d. . /~.~¸.~¡. ../~.d ~ ¡..~/~,o d. . /~.~¸.~¡. ../~.d ~ ¡..~/~,o d. . /~.~¸.~¡. ../~.d ~ ¡..~/~,o d. . /~.~¸.~¡.
´ ~. . ¸./ ´ ~. . ¸./ ´ ~. . ¸./ ´ ~. . ¸./





Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 28



<HTML>
<!---- EXERCÍCIO 21 Versão 2006 - HTML - PROF. CELSO GALLÃO ---->
<HEAD>
<TITLE>Exercício 21</TITLE>

<!---- Definindo Meta Informações ---->
<META HTTP-EQUIV= "Keywords" CONTENT="HTML, Folha de Estilo, Formulário">
<META HTTP-EQUIV= "Description" CONTENT="Exercício 21, Folha de Estilo Externa">

<!---- Acessando Arquivo Externo de Folha de Estilos ---->
<LINK REL="StyleSheet" HREF="Exe21.css" TYPE="text/css">
</HEAD>

<BODY>
<H1>Exercício 21 - Folha de Estilos Externa</H1>
<H2>Aluno 1 - Aluno 2</H2>
<HR>
<FORM NAME="Form1">
<FIELDSET>
<LEGEND ACCESSKEY="E">
<H3>Exercícios Anteriores (ALT + E)</H3>
</LEGEND>
<CENTER>
<A HREF="exe16a.htm">Exercício 16</A><BR>
<A HREF="exe17a.htm">Exercício 17</A><BR>
<A HREF="exe18.htm" >Exercício 18</A><BR>
<A HREF="exe19.htm" >Exercício 19</A><BR>
<A HREF="exe20a.htm">Exercício 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 próximas páginas!</TD>
</TR>
</TABLE>
</FIELDSET>
</FORM>

<!---- Retirando o estilo pré-formatado ---->
<P style=border: "none">

<H3 align="center">Formatando Parágrafos</H3>
<P>Testando a formatação de um parágrafo.<BR>E ai, você gostou?</P>

</BODY>
</HTML>






Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 29


Exercício 21 - Continuação: Editar e salvar com o nome de EXE21.css:

Definindo estilos no Arquivo Externo:
• BODY {carregar figura LgSing.gif sem repetição, 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, itálico, cor vermelha};
• FIELDSET {borda estilo sólido, espessura de 5px, cor vermelha};
• LINK {fonte verdana, 10, cor rgb(50%,50%,10%), negrito, sem sublinhado};
• LINK EM AÇÃO {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};


<!---- EXERCÍCIO 21 FOLHA DE ESTILO EXTERNA - Versão 2006 - HTML - PROF. CELSO GALLÃO ---->

<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 {font: 16pt "arial"; font-weight: "bold"; color:"#505050"; text-align:
"center"};

H3 {font: 10pt "arial black"; font-style: "italic"; color: "red"};

A:LINK {font: 10pt "verdana"; color: "rgb(50%,50%,10%)"; font-weight: "bold"; text-
decoration: "none"};

A:ACTIVE {font: 10pt "verdana"; color: "pink"; text-decoration: "none"};

A:VISITED {font: 10pt "verdana"; color: "orange"; text-decoration: "none"};

TABLE {background: "yellow"};

TD {font: 12pt "verdana"; color: "red"; text-align: "center"};

HR {color: "red"; line-height: 5pt};

P {background: "darkgreen"; font-family: "script,arial"; font-size: 20pt; color:
"white"; border: "double"; border-width: 10px };

FIELDSET {color: "red"; border: "solid"; border-width: 5px };
-->
</style>





CADERNO DE EXERCÍCIOS DE HTML
Este material contém exercícios referentes ao Resumo das Aulas de HTML.

Hiper Text Markup Language

Linguagem Gráfica de Programação I

Exercício 01: Salvar como EXE01.htm:
<HTML><!-- EXERCÍCIO 01 HTML - Prof. Celso Gallão --> <HEAD> <TITLE>Exercício O1</TITLE> </HEAD> <BODY> <H1>Minha 1ª Página Web - Exercício 01</H1> <H3>Nome, Nº e Turma dos Integrantes</H3> <HR> <H6>Colégio Singular Informa:</H6> os alunos do <B>Curso Técnico em Informática</B>, na disciplina de <I>LGP</I>, <BR>iniciaram a edição de <U>Páginas Web</U>, utilizando a programação <I><B><U>HTML</U></B></I>. <HR> Desta forma, <BIG>em breve</BIG>, eles serão <H2>Web Designers</H2> </BODY></HTML>

Exercício 02: Salvar como EXE02.htm:
<HTML><!-- EXERCÍCIO 02 HTML - Prof. Celso Gallão --> <HEAD> <TITLE>Exercício O2</TITLE> </HEAD> <BODY> <H1>Minha 2ª Página Web - Exercício 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 NÃO 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>
Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos Página 1

Exercício 03: Salvar como EXE03.htm. Editar conforme as orientações e Lay-Out abaixo:
Exercício 03 - Microsoft Internet Explorer ORIENTAÇÕES
Cabeçalho 1 Cabeçalho 3 Linha Horizontal Texto em Negrito com letra maiúscula. Linha Horizontal

Lista Ordenada com 2 itens em Negrito, com 2 sub-itens em Lista Não Ordenada em Itálico.

Linha Horizontal Texto em Negrito com letra maiúscula. Linha Horizontal

Lista Não Ordenada com 2 itens em Negrito, com 3 sub-itens em Lista Ordenada em Itálico.

Exercício 04: Salvar como EXE04.htm:
<HTML><!-- EXERCÍCIO 04 HTML - Prof. Celso Gallão --> <HEAD> <TITLE>Exercício O4</TITLE> </HEAD> <BODY> <H1>Utilizando Links - Exercício 04</H1> <H3>Nome, Nº e Turma dos Integrantes</H3> <HR> <A HREF="EXE01.htm">Exercício 01</A> <P> <A HREF="EXE02.htm">Exercício 02</A> <P> <A HREF="EXE03.htm">Exercício 03</A> <P> <A HREF Página <P> <A HREF E-Mail ="http://www.celsogallao.hpg.com.br"> do Professor Gallão</A> ="mailto:celsogallao@ig.com.br"> para o Professor Gallão</A>

</BODY></HTML>

Colégio Singular – Caderno de Exercício das Aulas de HTML - Prof. Celso Gallão – Atualização: Prof. Aislan Ramos

Página 2

e teve sua altura alterada para 50px.Exercício 05</H1> <H3>Nome. Celso Gallão --> <HEAD> <TITLE>Exercício O5</TITLE> </HEAD> <BODY> <H1>Utilizando Imagens .htm: <HTML><!-.<BR> pois da mesma forma que podem <B>ENCANTAR</B>.: Repare que.Prof.<P> <A HREF="mailto:celsogallao@ig. <BR> <A HREF="EXE04. Nº e Turma dos Integrantes</H3> </CENTER> <HR SIZE="5" WIDTH="300" ALIGN="left"> A utilização de cores em Páginas Web deve ser feita com cautela e bom senso. <BR> Obs.Exercício 05: Salvar como EXE05. Celso Gallão --> <HEAD> <TITLE>Exercício O6</TITLE> </HEAD> <BODY BGCOLOR="purple" TEXT="white" LINK="green" VLINK="black" ALINK="pink"> <CENTER> <H1>Alterando Cores .Exercício 06</H1> <H3>Nome. a Exercício 06: Salvar como EXE06. <HR SIZE="5" WIDTH="300" ALIGN="right"> <CENTER> <A HREF ="exe03.htm"> <IMG SRC="Figura2.htm: <HTML><!-.htm">Exercício 03</A><br> <A HREF ="exe04.EXERCÍCIO 06 HTML . alterando apenas uma outra se ajusta proporcionalmente.<P> ALIGN="bottom"> BASE da figura. Celso Gallão – Atualização: Prof.br"> <IMG SRC="Figura2.Prof. Aislan Ramos Página 3 . </BODY></HTML> medida.Prof. e teve seu comprimento alterado para 100px.jpg" HEIGHT="50" ALT="Exercício 04"></A> Esta figura é um link.jpg" Texto alinhado pelo <IMG SRC="figura01.gif" Texto alinhado pelo <IMG SRC="figura01.htm">Exercício 05</A> </CENTER> </BODY></HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML .jpg" WIDTH="100" ALT="E-Mail para o Professor Gallão"></A> Esta figura é um link.bmp" Texto alinhado pela ALIGN="top"> TOPO da figura. Nº e Turma dos Integrantes</H3> <HR> <IMG SRC="figura01.<P> ALIGN="middle"> MEIO da figura.htm">Exercício 04</A><br> <A HREF ="exe05.EXERCÍCIO 05 HTML .com. podem também <B>ESPANTAR</B> os visitantes.

em arial.acesso à página Exe14. Editar conforme as orientações e Lay-Out abaixo: ORIENTAÇÕES Corpo Principal: Fundo = azul. azul-claro. prata.EXERCÍCIO 07 HTML . Exercício 15 . 3.Texto em Movimento Alternado --> <MARQUEE BEHAVIOR="alternate"> Texto em Movimento Alternado </MARQUEE> </BODY></HTML> Exercício 08: Salvar como EXE08. 2.acesso à página Exe06. negrito.Prof.acesso à página Exe07. </DIV> <HR WIDTH="530" ALIGN="right"> <!-. Textos = #FFFFFF.Prof. Link = amarelo.acesso à página Exe15. portanto não queira testá-las agora!): Exercício 14 . Texto em cabeçalho 2.Alinhando ao CENTRO --> <P ALIGN="center"> Este texto foi centralizado utilizando o TAG < P >. Link Visitado = #00FF00. ao centro: A utilização de Tabelas permite a formatação de objetos (textos e imagens) lado-a-lado! Texto em arial. </CENTER></FONT> <HR WIDTH="70%"> <!-.htm.htm. Texto em arial. 5. Aislan Ramos Página 4 Exercício 08 .htm.Exercício 07: Salvar como EXE07. comprimento 100%. </P> <HR WIDTH="530" ALIGN="left"> <FONT SIZE="3" FACE="verdana" COLOR="white"> <CENTER> Este texto teve a fonte configurada e também está centralizado. negrito: A aplicação de cores e alinhamentos faz com que a página web fique mais atraente! Texto em arial.Microsoft Internet Explorer . ao centro: Veja a utilização nos exercícios abaixo: Links (As páginas dos links abaixo ainda não foram editadas. amarelo. negrito: Aluno 1 . amarelo. cor #FFAAAA: Clique nos exercícios abaixo e veja páginas formatadas: Links: Exercício 06 . Exercício 07 . cor #FFAAAA.htm. 2. 3. Linha Horizontal: espessura 5. negrito. ao centro: Utilizando Tabelas Texto em arial. comprimento 300px. Texto em cabeçalho 2: Melhorando o Visual Texto em arial.Aluno 2 Linha Horizontal: espessura 1.htm. Link em Acesso = vermelho.Alinhando à DIREITA --> <H2 ALIGN="right">Melhorando a Página</H2> <HR WIDTH="220" ALIGN="right"> <DIV ALIGN="right"> Aqui estamos usando o TAG < DIV ><BR> para alinhar este texto à direita.htm: <HTML><!-. Nº e Turma dos Integrantes</H3> <HR> <!-.<BR> mas utilizamos o TAG < CENTER >. Colégio Singular – Caderno de Exercício das Aulas de HTML . à direita: Exercício 08 Texto em movimento da direita para a esquerda. 4. Celso Gallão --> <HEAD> <TITLE>Exercício O7</TITLE> </HEAD> <BODY BGCOLOR=”GREEN” TEXT=”YELLOW” <H1>Alinhando Parágrafos – Exercício 07</H1> <H3>Nome. Celso Gallão – Atualização: Prof.

3. cor verde-escuro. Aislan Ramos Página 5 . comp. negrito: Exercício 09: Aluno 1 . mas você somente poderá acessá-las após elas serem editadas. 400px.htm. cor azul-escuro. à direita. um em cada linha: Exercício 16 . Exercício 17 . laranja. 3. cor #000055. à direita.htm. Editar conforme as orientações e Lay-Out abaixo: Corpo Principal: Fundo com Imagem LgSingBk. cor #005500. Texto em arial.Exercício 09: Salvar como EXE09.htm.Aluno 2 Linha Horizontal: espessura 2. à direita. ORIENTAÇÕES Exercício 09 . 100%. em 3 linhas. Texto em movimento alternado.Prof. Texto em arial. 360px. é claro. Link Visitado = laranja. Links. comp. Textos = #505050. negrito. Link = vermelho. cor laranja. com quebra de parágrafo ao final: Com os Frames fazemos subdivisões na Página permitindo carregar várias Páginas na mesma janela! Estudaremos Frames mais adiante.acesso à página Exe17. à direita. Linha Horizontal: espessura 5. comp.gif. à direita. com quebra de linha ao final: Os exercícios abaixo mostram páginas web com Frames. Celso Gallão – Atualização: Prof.acesso à página Exe16. Texto em cabeçalho 1: Utilizando Frames Linha Horizontal: espessura 5.Microsoft Internet Explorer Colégio Singular – Caderno de Exercício das Aulas de HTML . Link em Acesso = verde. negrito. 2. em arial. em 3 linhas.

2ª âncora ---> <HR><a name="LNO"></a><h2 align="center">Lista Não Ordenada</h2><HR> <UL> <LI>Curso Técnico em Eletrônica <LI>Curso Técnico em Química </UL> <a href="#topo">Volta ao Início </a><br> <!--.HTML ----> <!--. Nº e Turma dos Integrantes</font></h3> <a name="topo"></a> <!--. Aislan Ramos Página 6 .Exercício 10: Editar e salvar com o nome de EXE10.Informações de Cabeçalho ---> <head><title>Exercício 1O</title></head> <!--.Links para as âncoras ---> <a href="#LO">Lista Ordenada</a><br> <a href="#LNO">Lista Não Ordenada</a><br> <a href="#LAO">Lista Aninhada Ordenada</a><br> <a href="#LANO">Lista Aninhada Não Ordenada</a> <p> <!--.Prof.3ª âncora ---> <HR><a name="LAO"></a><h2 align="center">Lista Aninhada Ordenada</h2><HR> <OL> <LI> Curso Técnico em Informática <OL> <LI>Manhã <LI>Noite </OL> <LI> Curso Técnico em Turismo <OL> <LI>Manhã <LI>Noite </OL> </OL> <a href="#topo">Volta ao Início </a><br> <!--.4ª âncora ---> <HR><a name="LANO"></a><h2 align="center">Lista Aninhada Não Ordenada</h2><HR> <UL> <LI> Curso Técnico em Eletrônica <UL> <LI>Manhã não tem <LI>Noite </UL> <LI> Curso Técnico em Química <UL> <LI>Manhã não tem <LI>Noite </UL> </UL> <a href="#topo">Volta ao Início </a><br> </BODY></HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML . Celso Gallão – Atualização: Prof.htm: <HTML><!---.EXERCÍCIO 10 .1ª âncora ---> <HR> <a name="LO"></a><h2 align="center">Lista Ordenada</h2><HR> <OL> <LI>Curso Técnico em Informática <LI>Curso Técnico em Turismo </OL> <a href="#topo">Volta ao Início</a> <br> <!--.Corpo Principal da Página ---> <body bgcolor="#AAAAFF" text="darkblue" link="blue" vlink="ligthblue" alink="white"> <h1 align=”center”>Utilizando Âncoras</h1> <h3 align=”center”><font color="white">Nome.

definir cor.PROF. Celso Gallão – Atualização: Prof. Apelido do Aluno 1 • Endereço: • Data de Nascimento: • Descrição Física: • Passatempos: • Enviar E-Mail para mim Voltar ao topo Apelido do Aluno 2 • Endereço: • Data de Nascimento: • Descrição Física: • Passatempos: • Enviar E-Mail para mim Voltar ao topo Apelido do Aluno 3 • Endereço: • Data de Nascimento: • Descrição Física: • Passatempos: • Enviar E-Mail para mim Voltar ao topo Linha Horizontal Texto Normal. Links para Âncora chamada #topo para exibir o topo da Página Web. Colégio Singular – Caderno de Exercício das Aulas de HTML . Lista Aninhada Ordenada em Negrito. Dados Pessoais 1.htm#LO">Lista Ordenada</a><br> <a href="exe10. Link somente na palavra “E-Mail” com o endereço de e-mail do referido aluno.Prof.htm de tal forma que a página seja exibida conforme o Lay-Out abaixo: Exercício 12 .Exercício 11: Editar e salvar com o nome de EXE11.HTML .EXERCÍCIO 11 . 3. Centralizado. Linha Horizontal 2. em Negrito. definir cor. Definir cor para Link. definir cor.htm#LANO">Lista Aninhada Não Ordenada</a><p> <HR> </BODY> </HTML> Exercício 12: Editar e salvar com o nome de EXE12. com Links para Âncoras nesta Página Web. 3. com subitens Não Ordenados em Itálico. Linha Horizontal Lista Ordenada. Linha Horizontal Texto Normal. Centralizado.htm#LNO">Lista Não Ordenada</a><br> <a href="exe10. 2.htm: <HTML><!---. Centralizado. definir cor. com fonte normal. Link Visitado e Link em Acesso. Nome Completo do Aluno 1 Nome Completo do Aluno 2 Nome Completo do Aluno 3 Cabeçalho 1.htm#LAO">Lista Aninhada Ordenada</a><br> <a href="exe10. Aislan Ramos Página 7 . Links e Âncoras Nomes dos Integrantes 1. CELSO GALLÃO ----> <head><title>Exercício 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 acessarão as âncoras existentes no Exercício 10:</font></b> <p> <a href="exe10.Microsoft Internet Explorer Listas.

htm. Texto em arial.br/educacao/portaisls/singular/principal/regulares/ensinomedion. centralizados e em negrito.Diurno • 2ª Célula: Portal Singular . marrom. com 1 linha por 3 colunas. e devem ser: • 1ª Célula: Colégio Singular . cor vermelho-escuro. cor vermelho-escuro. lado a lado. descritas no EXERCÍCIO 12.br • 3ª Célula: http://paginas. Texto em arial. As figuras são: foto1.Noturno Exercício 13 . através de tabela: Tabela com borda vermelha tamanho 3. com 1 linha por 3 colunas e cor de fundo amarelo. Inserir 3 figuras.com. centralizados e em negrito. Textos = #000055. Link = vermelho. 80%. cor azul-escuro.com. Celso Gallão – Atualização: Prof.jpg e foto3. Texto em cabeçalho tamanho 2: Exercício 13 . 60%. ao centro: IMAGENS DOS INTEGRANTES Linha Horizontal: espessura 3.jpg.htm Os textos devem estar sob cada figura.Anglo • 3ª Célula: Colégio Singular .jpg.Microsoft Internet Explorer Colégio Singular – Caderno de Exercício das Aulas de HTML . Linha Horizontal: espessura 3.jpg com 200px de comprimento e um texto.htm • 2ª Célula: http://www. ao centro. marrom. todas com borda tamanho 5.Imagens e Âncoras Externas Linha Horizontal: espessura 5.com.Exercício 13: Salvar como EXE13. ao centro. 5.singular. comp. Link Visitado = preto. Os textos com os nomes dos alunos devem estar sob cada figura. negrito.terra. Link em Acesso = branco. Aislan Ramos Página 8 .ANGLO Inserir 3 figuras. comp. Editar conforme as orientações e Lay-Out abaixo: ORIENTAÇÕES Corpo Principal: Fundo Azul-claro. negrito. Em cada célula haverá a figura LgSingP. As figuras são links que acessam as âncoras externas de cada aluno. ao centro: ACESSO PARA O PORTAL SINGULAR . 5. ao centro. comp.terra.Prof. foto2.br/educacao/portaisls/singular/principal/regulares/ensinomediod. lado a lado. através de tabela: Tabela sem borda. respectivamente. As figuras são links que acessam as seguintes páginas web: • 1ª Célula: http://paginas. 80%. Em cada célula haverá uma figura e um texto.

cor do fundo amarela.htm. 3. Mesclado com A1. Mesclado com A3. Mesclado com B2. cor do fundo laranja. Mesclado com B4. alinhamento ao centro. comp.Microsoft Internet Explorer Tabela com 3 linhas e 4 colunas: Comprimento 100%. alinhamento ao centro. cor do fundo rosa. altura 40px. cor do fundo laranja. Texto em Arial. 2. Editar conforme as orientações e Lay-Out abaixo: ORIENTAÇÕES Corpo Principal: Fundo Prata. alinhamento ao centro. negrito ao centro: Exercício 14 . Mesclado com C1. cor R=00 G=55 B=00. negrito ao centro: Aluno 1 . cor do fundo branca. cor do fundo laranja. alinhamento à direita. cor vermelha. alinhamento vertical no topo.Utilizando Tabelas Mescladas Texto em Arial. cor R=55 G=00 B=00. Aislan Ramos Página 9 . altura 50px. Comprimento 30%. Comprimento 40%. Com borda tamanho 1. Com borda tamanho 3. cor do fundo amarela. cor prata. Comprimento 10%. cor do fundo cinza-escuro. Rótulo da Tabela: Tabela Mesclada Todas as células mescladas e alinhadas conforme abaixo: A2 B2 C1 A1: A2: A3: A4: B1: B2: B3: B4: C1: C2: C3: C4: Comprimento 10%. Mesclado com C1. Tabela com 3 linhas e 4 colunas: Comprimento 100%. alinhamento ao centro. Comprimento 40%.Exercício 14: Salvar como EXE14. Rótulo da Tabela: Tabela Não Mesclada Todas as células alinhadas ao centro e com os seguintes textos: A1 B1 C1 A2 B2 C2 A3 B3 C3 A4 B4 C4 Exercício 14 . alinhamento vertical na base. 100%. Celso Gallão – Atualização: Prof. alinhamento à esquerda. A3 A1 B4 Colégio Singular – Caderno de Exercício das Aulas de HTML .Aluno 2 Linha Horizontal: espessura 2. cor branco. Comprimento 50%.Prof.

itálico. com fundo preto. textos em arial. alinhados na margem inferior à esquerda. vermelha. alinhados na margem superior à direita. preto.htm.Nossas Notas da 1ªUL/2006 Exercício 15 . negrito.Microsoft Internet Explorer Tabela com 5 linhas e 7 colunas: Comprimento 100%. negrito. cor R=00 G=55 B=00. itálico. Comprimento da célula = 100px. alinhados ao centro. na margem inferior. Celso Gallão – Atualização: Prof. tamanho 5. alinhado à direita. negrito. Configuração das Linhas: • 1ª Linha: cor do fundo = “#8888FF”. vermelha. tamanho 5. negrito ao centro: Exercício 15 . fonte verdana. altura 50px. alinhados ao centro. itálico. • Texto “TO”: • Texto “FI”: • Texto “TCG”: fonte verdana. tamanho 4. negrito. preto. Colégio Singular – Caderno de Exercício das Aulas de HTML . fonte arial. centralizado.Prof. tamanho 5. tamanho 7. tamanho 5. borda tamanho 5.Exercício 15: Salvar como EXE15. centralizado. alinhados na margem superior à direita. • Notas de AT e PO de TCG: fonte padrão. branco e negrito. • Médias de TO: fonte padrão. itálico. tamanho 7. cor da borda azul-escuro e espaço entre as células 0. negrito. alinhado à esquerda. itálico. • 5ª Linha: cor do fundo = “#EEEEEE”. • 4ª Linha: cor do fundo = “#EEEEEE”. negrito. Comprimento das células = 80px. tamanho 3. fonte arial. branca. Configuração dos Textos: • Texto “Turma”: fonte arial. tamanho 5. marrom. preto. alinhados na margem inferior à esquerda. Texto em Arial. • Notas de AT e PO de FI: fonte padrão. itálico. “PO”: • Textos “MÉDIAS”: • Notas de AT e PO de TO: fonte padrão. alinhado ao centro. • 2ª Linha: cor do fundo = “#BBBB00”. marrom. preto. • Médias de FI: • Médias de TCG: fonte padrão. tamanho 3. Aislan Ramos Página 10 .gif. vermelha. marrom. 5. • Textos “AT”. tamanho 7. na margem superior. fonte padrão. Editar conforme as orientações e Layout abaixo: ORIENTAÇÕES Corpo Principal: Fundo com Imagem = LgSingBk. fonte verdana. centralizado. tamanho 5. marrom. • 3ª Linha: cor do fundo = “#EEEEEE”.

esta página não pode ser mostrada! </B></CENTER> </BODY> </NOFRAMES> </HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML .htm" SCROLLING="no" NORESIZE> <FRAME NAME="FrDireita" SRC="Exe16c. Aislan Ramos Página 11 .Microsoft Internet Explorer Configuração do Frame: Configuração do Frame: • Comprimento = 200px • Comprimento = resto da tela • Borda = Não • Borda = Não • Espaço entre os frames = Não • Espaço entre os frames = Não • Nome = FrEsquerda • Nome = FrDireita • Carregar a Página = Exe16B.PROF.Página Principal</TITLE> </HEAD> <FRAMESET COLS="200. Celso Gallão – Atualização: Prof.htm" SCROLLING="yes" NORESIZE> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="red" TEXT="yellow"> <CENTER><B> O seu Navegador não suporta FRAMES.htm • Barra de Rolagem = Não • Barra de Rolagem = Sim • Permitir Redimensionamento = Não • Permitir Redimensionamento = Não Abaixo segue o código-fonte: <HTML> <!---.EXERCÍCIO 16-A .Exercício 16-A: Salvar como EXE16A.*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="FrEsquerda" SRC="Exe16b.PÁGINA PRINCIPAL DOS FRAMES ----> <HEAD> <TITLE>Exercício 16 . CELSO GALLÃO ----> <!---.Prof. Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 16 .htm • Carregar a Página = Exe16C. Exibir a mensagem “Este navegador não aceita FRAMES!” Outras configurações de acordo com o Layout abaixo: Exercício 16 .Página Principal • Borda = Não • Espaço entre os frames = Não • Caso o navegador não aceite FRAMES: Configurar a cor do fundo da página vermelha e os textos amarelos.htm.Página Principal .

centralizado e negrito. em dois parágrafos: • DESKTOPS.Exercício 16-B: Salvar como EXE16B. cor marrom. Linha Horizontal. Editar conforme as orientações e Layout abaixo: Configuração da Página da Esquerda: • Título no Navegador = Exercício 16-B .htm no FrDireita. Abaixo segue o código-fonte: <HTML> <!---.PÁGINA DA ESQUERDA ----> <HEAD> <TITLE>Exercício 16-B . centralizado e negrito.PROF. comprimento 100%.Nº </FONT> <HR SIZE="3" COLOR="browm" WIDTH="100%"> <FONT FACE="arial" SIZE="2" COLOR="#005500"> Esta Página está carregada<BR> no Frame da Esquerda<P> </FONT> <A HREF="Exe16c. • Cor dos links = Marrom. centralizado e negrito. cor dos textos = Azul-escuro. com o NOME e Nº dos alunos”: • Fonte arial. Linha Horizontal.htm no FrDireita.htm">DESKTOPS</A><P> <A HREF="Exe16d. comprimento 100%.Nº<BR> Aluno 2 . tamanho 3. Celso Gallão – Atualização: Prof. cor marrom.htm">LAPTOPS</A> </CENTER> </BODY> </HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML . em duas linhas.EXERCÍCIO 16-B . que carregará a página Exe16C. que carregará a página Exe16D.htm. em duas linhas.Página para o Frame da Esquerda.Prof. cor #005500. “Exercício 16 Utilizando Frames”: • Fonte arial. cor dos links visitados = Branco e cor dos links em acesso = Verde. Aislan Ramos Página 12 . • LAPTOPS. cor #005500. tamanho 2. espessura 3.Página 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> Exercício 16<BR> Utilizando Frames </FONT> <HR SIZE="3" COLOR="browm" WIDTH="100%">> <FONT FACE="arial" SIZE="3" COLOR="browm"> Aluno 1 . CELSO GALLÃO ----> <!---. cor marrom. • Cor do fundo = Laranja. espessura 3. em duas linhas. Texto. tamanho 3. Dois links. Texto. “Esta Página está carregada no Frame da Esquerda”: • Fonte arial. Texto.

com. • Link com imagem “ImLogoINTEL.br Configuração dos textos com os nomes dos processadores: • Todos em negrito. tamanho 280px. cor padrão. cor branca. • Cor dos links em acesso = Laranja. Colégio Singular – Caderno de Exercício das Aulas de HTML . em duas linhas.amd. cor branca.br Configuração dos textos com os nomes dos processadores: • Todos em negrito. espessura 3. Todos os textos a seguir devem ter a fonte arial. centralizado. Configuração dos Links INTEL e AMD. tamanho 3.jpg” e rótulo da imagem “Advanced Micro Devices”: Acessará a URL http://www.intel. fonte arial. Ambas as células possuem 150px de comprimento.htm. Linha Horizontal.htm. Tabela com 6 Linhas e 2 Colunas: • Comprimento 100%. cor padrão. centralizado e cor do fundo #0000FF. • Cor dos textos = Amarelo.amd. e dos textos = Branco. Editar conforme as orientações e Layout abaixo: Configuração da Página da Direita: • Título no Navegador: Exercício 16-C . • Espaço entre as células = 3 e espaço entre o conteúdo e a borda da célula = 5. Tabela com 2 Linhas e 6 Colunas: • Comprimento 100%.jpg” e rótulo da imagem “Advanced Micro Devices”: Acessará a URL http://www. Está Carregada no Frame da Direita. centralizado. Texto. cor da borda branca. • Cor dos links visitados = Azul-claro.com. • Cor do fundo = Verde-escuro. Texto. Todos os textos a seguir devem ter a fonte arial. cor amarela.intel. Linha Horizontal. Aislan Ramos Página 13 . borda tamanho 1. • Cor dos links = Amarelo. A linha tem cor do fundo #00AA00.com. centralizado e negrito. borda tamanho 1. Editar conforme as orientações e Layout abaixo: Configuração da Página da Direita: • Título no Navegador: Exercício 16-D . tamanho 3. • Cor dos links em acesso = Laranja. A linha tem altura de 100px e cor do fundo #000055. • Link com imagem “ImLogoINTEL. Exercício 16-D: Salvar como EXE16D. cor da borda amarela.2ª Página para o Frame da Direita. Configuração dos Links INTEL e AMD. Esta é a Página 16D.br • Link com imagem “ImLogoAMD.jpg” e rótulo da imagem “Intel Corporation”: Acessará a URL http://www.com.Exercício 16-C: Salvar como EXE16C. • Ambas as células possuem 50% de comprimento e 50px de altura.jpg” e rótulo da imagem “Intel Corporation”: Acessará a URL http://www. • Espaço entre as células = 3 e espaço entre o conteúdo e a borda da célula = 5. centralizado e negrito. Celso Gallão – Atualização: Prof. centralizado e cor do fundo #0000FF. • Rótulo da Tabela com o texto “Laptops em 2006”. • Cor dos links visitados = Cinza-Claro. Esta é a Página 16C. tamanho 3. • Rótulo da Tabela com o texto “Processadores em 2006”. fonte arial. Está Carregada no Frame da Direita. • Cor dos links = Marrom. tamanho 280px. espessura 3. • Cor do fundo = Azul-escuro. em duas linhas. tamanho 3.br • Link com imagem “ImLogoAMD.Prof.1ª Página para o Frame da Direita.

EXERCÍCIO 16-C .amd.br"> <IMG SRC="ImLogoINTEL.PROF.com.1ª PÁGINA DA DIREITA ----> <HEAD> <TITLE>Exercício 16-C .br"> <IMG SRC="ImLogoAMD.Prof. CELSO GALLÃO ----> <!---.intel.1ª Página 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 Página 16C.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> Colégio Singular – Caderno de Exercício das Aulas de HTML . Celso Gallão – Atualização: Prof.com. Aislan Ramos Página 14 .Abaixo segue o código-fonte do Exercício 16-C: <HTML> <!---. </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.<BR> Está Carregada no Frame da Direita.jpg" ALT="Intel Corporation"></A></TH> <TH COLSPAN="3"> <A HREF="http://www.

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.intel. CELSO GALLÃO ----> <!---.amd.Prof.2ª PÁGINA DA DIREITA ----> <HEAD> <TITLE>Exercício 16-D .br"> <IMG SRC="ImLogoINTEL.2ª Página 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 Página 16D.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> Colégio Singular – Caderno de Exercício das Aulas de HTML .<BR> Está Carregada no Frame da Direita.PROF. Aislan Ramos Página 15 .com. </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.EXERCÍCIO 16-D .br"> <IMG SRC="ImLogoAMD. Celso Gallão – Atualização: Prof.Abaixo segue o código-fonte do Exercício 16-D: <HTML> <!---.com.

Celso Gallão – Atualização: Prof. Tabela: comprimento 100%. cor = #FFFF00. Aislan Ramos Página 16 .1ª Célula: comprimento da célula = 110 pixels. sem bordas. .Página Principal • Borda = Não • Espaço entre os frames = Não • Caso o navegador não aceite FRAMES: Configurar a cor do fundo da página vermelha e os textos amarelos.Página para o Frame do Alto • Cor do fundo = #AADDEE. • 2ª Linha: cor da linha = Vermelho.1ª Célula: alinhamento = centralizado. altura da linha = 30 pixels. Nº . Colégio Singular – Caderno de Exercício das Aulas de HTML . conforme layout acima: • 1ª Linha: cor da linha = Azul-claro.htm • Barra de Rolagem = Sim • Permitir Redimensionamento = Não • Distância entre as margens superior e inferior = 0 pixel • Distância entre as margens direita e esquerda = 0 pixel Exercício 17-B: Salvar como EXE17B. texto: Aluno 1.htm. Editar conforme as orientações e Layout abaixo: Título no Navegador: Exercício 17-B .Frames Aninhados.Exercício 17-A: Salvar como EXE17A. sem espaço entre as células. Nº. Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 17 . . negrito.htm • Altura = 100 pixels • Barra de Rolagem = Não • Borda = Não • Permitir Redimensionamento = Não • Espaço entre os frames = Não • Distância entre as margens superior e inferior = 3 pixels • Nome = FrameAlto • Distância entre as margens direita e esquerda = 3 pixels Configuração do Frame: • Comprimento = 150 pixels • Borda = Não • Espaço entre os frames = Não • Nome = FrameEsquerda • Carregar a Página = Exe17C. Exibir a mensagem “Este navegador não aceita FRAMES!” Outras configurações de acordo com o Layout abaixo: Exercício 17 .gif com altura = 48 pixels.Prof. tamanho 4.2ª Célula: alinhamento = direita.Página Principal . • Cor dos links = Marrom.Microsoft Internet Explorer Configuração do Frame: • Comprimento = 100% • Carregar a Página = Exe17B. • Cor dos links em acesso = Prata. tamanho 5. • Cor dos links visitados = Branco. • Cor dos textos = Azul-escuro. texto: Exercício 17 . fonte verdana.Aluno 2. inserir a imagem = LgSing. . fonte arial. negrito.htm • Barra de Rolagem = Automática • Permitir Redimensionamento = Não Configuração do Frame: • Comprimento = resto da tela • Borda = Não • Espaço entre os frames = Não • Nome = FrameDireita • Carregar a Página = Exe17D.htm. altura da linha = 50 pixels.

sem bordas. o Inserir a imagem = ImCanto. • Cor do fundo = #EEEEFF • Cor dos textos = Azul-escuro Inserir tabela com 1 linha e 2 células: Comprimento de 100% da tela. cor Verde-escuro. espessura de 5px. o Linha Horizontal. • 1ª Célula: o Comprimento de 30px.jpg (com a legenda “Abrir Página 17-D”) que carregará a página Exe17D. o Parágrafo com o texto “Esta é a 1ª Página da Direita”. o Linha Horizontal. cor Azul-escuro.2ª Página da Direita do Frame. Colégio Singular – Caderno de Exercício das Aulas de HTML . fonte arial.htm. comprimento de 300px. espessura de 5px. Aislan Ramos Página 17 . itálico e negrito. fonte arial. com 130px de comprimento. comprimento de 300px. alinhamento horizontal à esquerda e alinhamento vertical ao topo. • 2ª Célula: o Alinhamento horizontal centralizado. o Parágrafo com o texto “Esta é a 2ª Página da Direita”. espessura de 5px. 4. comprimento de 50px e altura de 50px. Celso Gallão – Atualização: Prof. comprimento de 50px e altura de 50px.gif. espaço interno das células = 0px e espaço entre as células = 0px. Exercício 17-D: Salvar como EXE17D.1ª Página da Direita do Frame. espaço interno das células = 0px e espaço entre as células = 0px. centralizadas. o Linha Horizontal.htm no FrameDireita. 4. • 1ª Célula: o Comprimento de 30px. 7. fonte arial.Prof. Editar conforme as orientações e Layout abaixo: Configuração da Página da Esquerda: • Título no Navegador = Exercício 17-C . 7. comprimento de 300px.gif. e transformálas em links: • BTexe17D. sem bordas. itálico e negrito.Página da Esquerda do Frame. • Cor do fundo = #EEEEFF • Cor dos textos = Verde-escuro Inserir tabela com 1 linha e 2 células: Comprimento de 100% da tela. comprimento de 300px. Editar conforme as orientações e Layout abaixo: Configuração da 1ª Página da Direita: • Título no Navegador = Exercício 17-D . o Texto “17E”. alinhamento horizontal à esquerda e alinhamento vertical ao topo.Exercício 17-C: Salvar como EXE17C. Exercício 17-E: Salvar como EXE17E. o Inserir a imagem = ImCanto. espessura de 5px.jpg (com a legenda “Abrir Página 17-E”) que carregará a página Exe17E. cor Verde-escuro. sem bordas. • BTexe17E. o Texto “17D”. cor Azul-escuro.htm. fonte arial. • 2ª Célula: o Alinhamento horizontal centralizado. • 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.htm. Editar conforme as orientações e Layout abaixo: Configuração da 2ª Página da Direita: • Título no Navegador = Exercício 17-E . o Linha Horizontal.htm no FrameDireita.

PROF.EXERCÍCIO 17-B . CELSO GALLÃO ----> <!---.gif" HEIGHT="48"></TD> <TH ALIGN="right"> <FONT FACE="Verdana" SIZE="4"> Exercício 17 .*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="FrameAlto" SRC="Exe17b.Frames Aninhados </FONT></TD></TR> <TR BGCOLOR="red" HEIGHT="30"> <TH COLSPAN="2"> <FONT FACE="Arial" SIZE="5" COLOR="#FFFF00"> Aluno 1. Nº . Nº </FONT></TD></TR> </TABLE> </BODY> </HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML .Abaixo seguem os códigos-fontes: <HTML> <!---. Celso Gallão – Atualização: Prof.Página 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.Prof.htm" SCROLLING NORESIZE> <FRAME NAME="FrameDireita" SRC="Exe17d.htm" SCROLLING="no" NORESIZE MARGINHEIGHT="3" MARGINWIDTH="3"> <FRAMESET COLS="150. Aislan Ramos Página 18 .PÁGINA PRINCIPAL DOS FRAMES ----> <HEAD> <TITLE>Exercício 17 .PÁGINA DO ALTO DO FRAME ----> <HEAD> <TITLE>Exercício 17-B .htm" SCROLLING="yes" NORESIZE MARGINHEIGHT="0" MARGINWIDTH="0"> </FRAMESET> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="red" TEXT="yellow"> <CENTER><B> O seu Navegador não suporta FRAMES.PROF.Aluno 2. esta página não pode ser mostrada! </B></CENTER> </BODY> </NOFRAMES> </HTML> <HTML> <!---. CELSO GALLÃO ----> <!---.Página Principal</TITLE> </HEAD> <FRAMESET ROWS="100.*"> <FRAME NAME="FrameEsquerda" SRC="Exe17c.EXERCÍCIO 17-A .

Página da Esquerda do Frame</TITLE> <BASE TARGET = "FrameDireita"> </HEAD> <BODY BGCOLOR="#AADDEE" TEXT="darkblue" LINK="browm" VLINK="white" ALINK="silver"> <CENTER> <A HREF="Exe17d.2ª PÁGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exercício 17-E .jpg" WIDTH="130" BORDER="0" ALT="Abrir Página 17-D"></A></P> <A HREF="Exe17e.PROF. CELSO GALLÃO ----> <!---. Celso Gallão – Atualização: Prof.PÁGINA DA ESQUERDA DO FRAME ----> <HEAD> <TITLE>Exercício 17-C .2ª Página 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.1ª Página 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 2ª Página 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> Colégio Singular – Caderno de Exercício das Aulas de HTML . Aislan Ramos Página 19 . CELSO GALLÃO ----> <!---.GIF" WIDTH="50" HEIGHT="50"></TD> <TD ALIGN="center"> <FONT FACE="Arial" SIZE="4"> <P>Esta é a 1ª Página 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> <!---.PROF.Prof.EXERCÍCIO 17-E . CELSO GALLÃO ----> <!---.<HTML> <!---.jpg" WIDTH="130" BORDER="0" ALT="Abrir Página 17-E"></A></P> </CENTER> </BODY> </HTML> <HTML> <!---.EXERCÍCIO 17-D .EXERCÍCIO 17-C .1ª PÁGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exercício 17-D .htm"> <IMG SRC="BTexe17E.PROF.htm"> <IMG SRC="BTexe17D.

com 5 linhas e 40 colunas) Colégio Singular – Caderno de Exercício das Aulas de HTML . digitação máxima de 6 caracteres) Sexo: Masculino (default) Feminino Cidade: (Lista Suspensa com 7 opções.Microsoft Internet Explorer Exercício 18 . Celso Gallão – Atualização: Prof. Aislan Ramos Página 20 . centralizado) Aluno 01 – Aluno 02 (fonte arial.) (Área para digitação de texto. 4.) Linguagem Gráfica de Programação Técnicas de Computação Gráfica (default) Fundamentos da Informática Técnicas Operacionais Técnicas de Programação Arquitetura de Equipamentos Fale sobre o(a) professor(a) que mais ama (ALT+F): (cor amarelo) (Tabela com 2 colunas. digitação máxima de 50 caracteres) (tamanho de 6 caracteres.Formulário • Cor do fundo = Verde-Escuro • Cor dos textos = Verde-Claro Outras configurações de acordo com o Layout abaixo: Exercício 18 .htm. 4. centralizado) Dados Pessoais (ALT+P) (cor amarelo) Nome: Senha: (tamanho de 30 caracteres.) Santo André (default) São Bernardo do Campo São Caetano do Sul Diadema Mauá Ribeirão Pires Outra Disciplinas que mais gosto (ALT+G) (cor amarelo) (Tabela com 2 colunas.Prof.Formulário . sem bordas. sendo exibida apenas 4 de cada vez.Exercício 18: Salvar como EXE18.Formulário de Pesquisa (fonte arial. sem bordas. Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 18 .

Prof.Formulário de Pesquisa<BR>Aluno 1 .EXERCÍCIO 18 . Aislan Ramos Página 21 .Formulário</TITLE> </HEAD> <BODY BGCOLOR="darkgreen" TEXT="lightgreen"> <CENTER> <FONT FACE="arial" SIZE="4"> <B>Exercício 18 .Aluno 2</B></FONT> </CENTER> <!---.PROF. Celso Gallão – Atualização: Prof.Criação do Formulário ----> <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>São Bernardo</OPTION> <OPTION>São Caetano</OPTION> <OPTION>Diadema</OPTION> <OPTION>Mauá</OPTION> <OPTION>Ribeirão 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 Gráfica de Programação<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TCG" CHECKED> Técnicas de Computação Gráfica<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="FI"> Fundamentos da Informática</TD> <TD> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TO"> Técnicas Operacionais<BR> <INPUT TYPE="checkbox" NAME="cx1" VALUE="TP"> Técnicas de Programação<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> Colégio Singular – Caderno de Exercício das Aulas de HTML .<HTML><!---. CELSO GALLÃO ----> <HEAD> <TITLE>Exercício 18 .

negrito.) (Área para digitação de texto. 12. Aislan Ramos Página 22 . digitação máxima de 50 caracteres) (tamanho de 6 caracteres. cor branca.Prof. espessura de 5px}. • TD {fonte verdana. texto alinhado à esquerda}. cor da fonte verde.Microsoft Internet Explorer Exercício 19 . 20. negrito.Formulário com Folha de Estilo Aluno 01 – Aluno 02 Dados cadastrais (ALT+D) Nome: Sexo: Senha: (tamanho de 30 caracteres. Celso Gallão – Atualização: Prof. • H1 {fonte arial. negrito. cor marrom}.Formulário Definindo estilos na própria página: • BODY {fonte arial.Exercício 19: Editar e salvar com o nome de EXE19. 10.htm: Configuração da Página Principal: • Título no Navegador = Exercício 19 . Outras configurações de acordo com o Layout abaixo: Exercício 19 . • TABLE {cor do fundo vermelho-escuro}.) até 100Kwh de 100 a 200 Kwh(deverá estar pré-selecionada) de 200 a 500 Kwh acima de 500Kwh Fale sobre o apagão: (ALT+A) (Tabela com 2 colunas.Formulário . 12. sem bordas. centralizado. com 5 linhas e 40 colunas) Colégio Singular – Caderno de Exercício das Aulas de HTML . sendo exibida apenas 4 de cada vez. cor verde-escuro}. cor azul-escuro}. • H3 {fonte arial. digitação máxima de 6 caracteres) Masculino (default) Feminino Eletrodomésticos que possui em casa (ALT+E) TV (CRT) Microcomputador Chuveiro Elétrico (default) O Consumo Mensal Total é de (ALT+M) TV (Plasma/LCD/LED) Freezer Microondas (Lista Suspensa com 4 opções. espessura de 5pt}. cor do fundo verde-claro}. • HR {cor vermelha. • H2 {fonte arial. 15. • FIELDSET {cor verde-escuro. borda sólida.

TD {font: 12pt "verdana". HR {color: "red". TABLE {background: "darkred"}. Celso Gallão – Atualização: Prof. line-height: 5pt}. H1 {font: 20pt "arial". color: "white"..PROF.: <INPUT TYPE="password" NAME="psw1" Sexo: <INPUT TYPE="radio" NAME="rd1" <INPUT TYPE="radio" NAME="rd1" </FIELDSET> <P><!---. color:"brown"}.1º Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="P"> <H3>Dados Pessoais (ALT + P)</H3> </LEGEND> Nome. border-width: 5px }. H2 {font: 15pt "arial".Definindo Estilos ----> <STYLE> <!-BODY {font: 10pt "arial". text-align: "left"}. color:"darkgreen"}. Aislan Ramos Página 23 .Prof. background: "lightgreen"}.EXERCÍCIO 19 Versão 2006 . FIELDSET{color: "darkgreen".Formulário</TITLE> <!---. border: "solid". font-weight: "bold". H3 {font: 12pt "arial"..Formulário com Folha de Estilo</H1> <H2>Aluno 1 .2º Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="E"> <H3>Eletrodomésticos 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 Elétrico</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 Colégio Singular – Caderno de Exercício das Aulas de HTML .<HTML> <!---. font-weight: "bold". font-weight: "bold".: <INPUT TYPE="text" NAME="txt1" Senha. CELSO GALLÃO ----> <HEAD> <TITLE>Exercício 19 ..Aluno 2</H2> <HR> </CENTER> <FORM NAME="F1"> <!---. --> </STYLE> </HEAD> <BODY> <CENTER> <H1>Exercício 19 .HTML . color:"green". color:"darkblue"}.

Prof.<P><!---.4º Fieldset ----> <FIELDSET> <LEGEND ACCESSKEY="A"> <H3>Fale sobre o apagão: (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> Colégio Singular – Caderno de Exercício das Aulas de HTML . Celso Gallão – Atualização: Prof. Aislan Ramos Página 24 .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><!---.

com.com.Noturno (Link para http://paginas.Sem Estilo . Folha de Estilo. após 5 segundos. sem sublinhado}. 10. • LINK EM AÇÃO {fonte verdana. cor do fundo verde-claro}. 20. Folha de Estilo. Folha de Estilo • Atualização da página: Deve ser carregada a página EXE20A.Página 1 Definindo Metainformações: • Palavras-chave: HTML.Página 1 . sem sublinhado}.br/educacao/portaisls/singular/principal/regulares/ensinomediod. negrito.terra.Microsoft Internet Explorer Exercício 20B .terra.Prof. cor marrom}.singular. Formulário • Descrição da Página: Exercício 20A. negrito. • LINK VISITADO {fonte verdana.br) (Link para http://paginas. após 5 segundos. Definindo estilos na própria página: • BODY {fonte arial. 12. • LINK {fonte verdana. 10. Formulário • Descrição da Página: Exercício 20B.htm) Exercício 20 .htm.Sem Estilo .Anglo Colégio Singular . cor da fonte verde. • H2 {fonte arial. Aislan Ramos Página 25 . espessura de 5px}. • H1 {fonte arial.htm: Configuração da Página Principal: • Título no Navegador = Exercício 20A . laranja. negrito.Página 2 Definindo Metainformações: • Palavras-chave: HTML. sem sublinhado}.Página 2 . cor azul-escuro}. Outras configurações de acordo com o Lay-Out abaixo: Exercício 20A . • FIELDSET {borda estilo grove.Comando Meta e Folha de Estilo (H1) Página 1 (H3) Aluno 01 – Aluno 02 (H2) Portal Singular (ALT+S) (vermelho negrito) Portal Singular .Exercício 20: Editar e salvar com o nome de EXE20A. branco.Página 2 (H1) Aluno 01 – Aluno 02 (H2) Colégio Singular – Caderno de Exercício das Aulas de HTML . Outras configurações de acordo com o Lay-Out abaixo: Exercício 20B .Diurno (Link para http://www. 15.htm.Microsoft Internet Explorer Exercício 20A .br/educacao/portaisls/singular/principal/regulares/ensinomedion. verde-escuro. Folha de Estilo • Atualização da página: Deve ser carregada a página EXE20B.com.htm: Configuração da Página Principal: • Título no Navegador = Exercício 20B . 10. Celso Gallão – Atualização: Prof.htm) Colégio Singular .Continuação: Editar e salvar com o nome de EXE20B.

H1 {font: 20pt "arial".htm"> <!---. A:VISITED {font: 10pt "verdana". URL=Exe20A.Sem Estilo .Definindo Meta Informações ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML.htm">Colégio Singular .Definindo Meta Informações ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML. font-weight: "bold". A:ACTIVE {font: 10pt "verdana". A:LINK {font: 12pt "verdana". Folha de Estilo"> <META HTTP-EQUIV= "Refresh" CONTENT="5.PROF.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.br/educacao/portaisls/singular/principal/regulares /ensinomedion. Celso Gallão – Atualização: Prof.terra. color: "darkgreen".Anglo</A><P> <A HREF="http://paginas. color:"brown"}.Definindo estilos na própria página ----> <STYLE> <!-BODY {font: 10pt "arial". border-width:5px}. Formulário"> <META HTTP-EQUIV= "Description" CONTENT="Exercício 20b. Formulário"> <META HTTP-EQUIV= "Description" CONTENT="Exercício 20A.EXERCÍCIO 20B Versão 2006 . Folha de Estilo. background: "lightgreen"}.htm"> </HEAD> <BODY TEXT="darkgreen" BGCOLOR="yellow"> <CENTER> <H1>Exercício 20B . CELSO GALLÃO ----> <HEAD> <TITLE>Exercício 20A .Página 2</TITLE> <!---.singular.Página 1</TITLE> <!---.Diurno</A><P> <A HREF="http://paginas.Aluno 2</H2> </CENTER> </BODY> </HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML . Folha de Estilo"> <META HTTP-EQUIV= "Refresh" CONTENT="5. color:"green". color: "white". font-weight: "bold".com. color: "orange".Prof.htm">Colégio Singular .Noturno</A><P> </FIELDSET> </FORM> </BODY> </HTML> <HTML> <!---. textdecoration: "none"}.terra.HTML . text-decoration: "none"}. Folha de Estilo. FIELDSET {border:"grove".<HTML> <!---. H2 {font: 15pt "arial". font-weight: "bold".PROF.com.Página 2</H1> <H2>Aluno 1 . CELSO GALLÃO ----> <HEAD> <TITLE>Exercício 20B .br/educacao/portaisls/singular/principal/regulares /ensinomediod. color:"darkblue"}.br"> Portal Singular .HTML .EXERCÍCIO 20A Versão 2006 .com. Aislan Ramos Página 26 . --> </STYLE> </HEAD> <BODY TEXT="darkgreen"><CENTER> <H1>Exercício 20A . text-decoration: "none"}. URL=Exe20b.Comando Meta e Folha de Estilo</H1> <H3>Página 1</H3> <H2>Aluno 1 .

e tecla de atalho ALT+E. Formulário • Descrição da Página: Exercício 21. A linha deverá ter 50px de altura. 18.htm) (Link para Exe19. sendo um em cada linha. Folha de Estilo Externa Definindo Estilo com Arquivo Externo: • Carregar arquivo de estilo chamado Exe21. • Quebra de Parágrafo. sem bordas.Exercício 21: Editar e salvar com o nome de EXE21. Folha de Estilo.htm) Vou detonar nas próximas páginas! Estou adorando as folhas de estilo! ! " Colégio Singular – Caderno de Exercício das Aulas de HTML . centralizado: Exercício 21 .Folha de Estilo Externa • Texto em H2. centralizado: Aluno 01 – Aluno 02 • Linha Horizontal • FIELDSET com a legenda com texto em H3 Exercícios Anteriores (ALT + E).Prof.htm) (Link para Exe17a.htm) (Link para Exe20a. 17. 19 e 20. o Cinco LINKS.Microsoft Internet Explorer (H1) Aluno 01 – Aluno 02 (H2) Exercício 16 Exercício 17 Exercício 18 Exercício 19 Exercício 20 (Link para Exe16a. • Texto em Parágrafo: E ai. você gostou? Exercício 21 . o A 2ª Célula terá o texto Vou detonar nas próximas páginas! com alinhamento vertical para cima. centralizado: Formatando Parágrafos. Celso Gallão – Atualização: Prof. o A 1ª Célula terá o texto Estou adorando as folhas de estilo! com alinhamento vertical para baixo. • Texto em Parágrafo: Testando a formatação de um parágrafo. com acesso aos exercícios 16. e tecla de atalho ALT+T. • Texto em H3. o Tabela de 1 linha com 2 colunas. • FIELDSET com a legenda com texto em H3 Configurando Tabelas (ALT + T). Aislan Ramos Página 27 . • Quebra de Parágrafo (retirar estilo pré-formatado).css Outras configurações de acordo com o Lay-Out abaixo: • Texto em H1.htm: Configuração da Página Principal: • Título no Navegador = Exercício 21 Definindo Metainformações: • Palavras-chave: HTML. • Quebra de linha.htm) (Link para Exe18.

Celso Gallão – Atualização: Prof.htm" >Exercício 18</A><BR> <A HREF="exe19.css" TYPE="text/css"> </HEAD> <BODY> <H1>Exercício 21 .htm">Exercício 16</A><BR> <A HREF="exe17a.EXERCÍCIO 21 Versão 2006 . Folha de Estilo Externa"> <!---.PROF. Aislan Ramos Página 28 .Folha de Estilos Externa</H1> <H2>Aluno 1 .Retirando o estilo pré-formatado ----> <P style=border: "none"> <H3 align="center">Formatando Parágrafos</H3> <P>Testando a formatação de um parágrafo.<BR>E ai.htm" >Exercício 19</A><BR> <A HREF="exe20a.HTML .htm">Exercício 17</A><BR> <A HREF="exe18. Formulário"> <META HTTP-EQUIV= "Description" CONTENT="Exercício 21.Acessando Arquivo Externo de Folha de Estilos ----> <LINK REL="StyleSheet" HREF="Exe21.<HTML> <!---.Prof.htm">Exercício 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 próximas páginas!</TD> </TR> </TABLE> </FIELDSET> </FORM> <!---. você gostou?</P> </BODY> </HTML> Colégio Singular – Caderno de Exercício das Aulas de HTML . CELSO GALLÃO ----> <HEAD> <TITLE>Exercício 21</TITLE> <!---.Aluno 2</H2> <HR> <FORM NAME="Form1"> <FIELDSET> <LEGEND ACCESSKEY="E"> <H3>Exercícios Anteriores (ALT + E)</H3> </LEGEND> <CENTER> <A HREF="exe16a. Folha de Estilo.Definindo Meta Informações ----> <META HTTP-EQUIV= "Keywords" CONTENT="HTML.

Exercício 21 . 20. text-align: "center"}. • HR {cor vermelha. font-size: 20pt. A:LINK {font: 10pt "verdana". font-weight: "bold". color: "red"}. CELSO GALLÃO ----> <style> <!-BODY {background: URL(LgSing. sem sublinhado}. • H3 {fonte arial black. • LINK EM AÇÃO {fonte verdana. • H1 {fontes script ou arial. Margem superior de 0px e cor da barra de rolagem em verde-claro}. text-decoration: "none"}.30. •P <!---. textdecoration: "none"}. color: "pink". negrito. H3 {font: 16pt "arial". • TABLE {cor do fundo amarela}. H2 "center"}. • LINK VISITADO {fonte verdana. scrollbar-base-color: lightgreen}. color: "orange".Prof. branca. font-weight: "bold". 10. negrito. espessura de 5px.50%. espessura de 5pt}. 12. font-family: "script. Colégio Singular – Caderno de Exercício das Aulas de HTML . line-height: 5pt}.arial". • TD {fonte verdana. {cor do fundo verde-escuro. 30. sem sublinhado}. itálico. cor rgb(50%. alinhamento à direita}. {font: 10pt "verdana".gif) right center no-repeat fixed. 10. cor #505050. P {background: "darkgreen". font-size: 30pt. text-align: "right"}. {color: "red". border: "solid". {font: 12pt "verdana".gif sem repetição. color:"#505050".10%)".10%). • H2 {fonte arial. color:"rgb(30. margin-top: 0px. color: "red". text-align: {font: 10pt "arial black". font-style: "italic". border-width: 5px }. fontes script ou arial.arial". • LINK {fonte verdana. color: "rgb(50%. cor vermelha}. sem sublinhado}. A:ACTIVE A:VISITED TABLE TD HR {font: 10pt "verdana".Continuação: Editar e salvar com o nome de EXE21. {background: "yellow"}. text-decoration: "none"}.50%. 10. border-width: 10px }. H1 {font-family: "script. 10. cor #303030. FIELDSET --> </style> {color: "red".Versão 2006 . cor vermelha}. cor-de-laranja. alinhamento ao centro}.30)". font-weight: "bold". cor-de-rosa. border: "double". Aislan Ramos Página 29 . vermelha.HTML . 16. • FIELDSET {borda estilo sólido. fixa na margem direita e centro da tela. negrito. alinhamento ao centro}. com borda dupla de 10px de espessura}. color: "white".css: Definindo estilos no Arquivo Externo: • BODY {carregar figura LgSing. Celso Gallão – Atualização: Prof.EXERCÍCIO 21 FOLHA DE ESTILO EXTERNA .PROF.

Sign up to vote on this title
UsefulNot useful