P. 1
Exercicios HTML

Exercicios HTML

|Views: 615|Likes:

More info:

Published by: alfredo.figueiras3325 on Dec 01, 2011
Direitos Autorais:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

09/27/2013

pdf

text

original

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. <BR> <A HREF="EXE04.Exercício 05: Salvar como EXE05.EXERCÍCIO 05 HTML .bmp" Texto alinhado pela ALIGN="top"> TOPO da figura. Aislan Ramos Página 3 .Prof.<BR> pois da mesma forma que podem <B>ENCANTAR</B>. Celso Gallão --> <HEAD> <TITLE>Exercício O5</TITLE> </HEAD> <BODY> <H1>Utilizando Imagens . <BR> Obs.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. e teve seu comprimento alterado para 100px. <HR SIZE="5" WIDTH="300" ALIGN="right"> <CENTER> <A HREF ="exe03. Nº e Turma dos Integrantes</H3> <HR> <IMG SRC="figura01.jpg" HEIGHT="50" ALT="Exercício 04"></A> Esta figura é um link. </BODY></HTML> medida.htm"> <IMG SRC="Figura2. Celso Gallão – Atualização: Prof.<P> ALIGN="bottom"> BASE da figura. 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 . alterando apenas uma outra se ajusta proporcionalmente.htm: <HTML><!-.jpg" Texto alinhado pelo <IMG SRC="figura01. podem também <B>ESPANTAR</B> os visitantes.Exercício 06</H1> <H3>Nome.br"> <IMG SRC="Figura2. a Exercício 06: Salvar como EXE06.<P> ALIGN="middle"> MEIO da figura.Prof.htm">Exercício 04</A><br> <A HREF ="exe05.EXERCÍCIO 06 HTML .com.gif" Texto alinhado pelo <IMG SRC="figura01.Exercício 05</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.: Repare que.htm">Exercício 03</A><br> <A HREF ="exe04.htm: <HTML><!-.<P> <A HREF="mailto:celsogallao@ig.Prof.

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

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

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><!---.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> <!--. Aislan Ramos Página 6 .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> <!--.Exercício 10: Editar e salvar com o nome de EXE10.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> <!--. Nº e Turma dos Integrantes</font></h3> <a name="topo"></a> <!--.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.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> <!--.HTML ----> <!--.EXERCÍCIO 10 .Informações de Cabeçalho ---> <head><title>Exercício 1O</title></head> <!--.Prof.

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

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

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

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

Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 16 . Aislan Ramos Página 11 .Página Principal</TITLE> </HEAD> <FRAMESET COLS="200.EXERCÍCIO 16-A .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> <!---. Celso Gallão – Atualização: Prof.Prof. 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.htm" SCROLLING="yes" NORESIZE> </FRAMESET> <NOFRAMES> <BODY BGCOLOR="red" TEXT="yellow"> <CENTER><B> O seu Navegador não suporta FRAMES. 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" SCROLLING="no" NORESIZE> <FRAME NAME="FrDireita" SRC="Exe16c.htm. CELSO GALLÃO ----> <!---.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.PÁGINA PRINCIPAL DOS FRAMES ----> <HEAD> <TITLE>Exercício 16 .Página Principal .Exercício 16-A: Salvar como EXE16A.*" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="FrEsquerda" SRC="Exe16b.htm • Carregar a Página = Exe16C.

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

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

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

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

. Nº . .Página Principal . inserir a imagem = LgSing. texto: Aluno 1.htm. Tabela: comprimento 100%. • Cor dos links visitados = Branco.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. Aislan Ramos Página 16 . fonte verdana.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.Frames Aninhados.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.Aluno 2.Prof. sem espaço entre as células.Microsoft Internet Explorer Configuração do Frame: • Comprimento = 100% • Carregar a Página = Exe17B. • Cor dos links = Marrom. tamanho 5. • Cor dos textos = Azul-escuro.1ª Célula: comprimento da célula = 110 pixels.2ª Célula: alinhamento = direita.Exercício 17-A: Salvar como EXE17A. negrito. Colégio Singular – Caderno de Exercício das Aulas de HTML .1ª Célula: alinhamento = centralizado. . altura da linha = 50 pixels. altura da linha = 30 pixels.htm. Editar conforme as orientações e Layout abaixo: Título no Navegador: Exercício 17-B . sem bordas.gif com altura = 48 pixels. • 2ª Linha: cor da linha = Vermelho. tamanho 4.Página para o Frame do Alto • Cor do fundo = #AADDEE. Exibir a mensagem “Este navegador não aceita FRAMES!” Outras configurações de acordo com o Layout abaixo: Exercício 17 . fonte arial.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. negrito. Nº. • Cor dos links em acesso = Prata. texto: Exercício 17 . cor = #FFFF00. Celso Gallão – Atualização: Prof. conforme layout acima: • 1ª Linha: cor da linha = Azul-claro. Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 17 .

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

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

2ª PÁGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exercício 17-E .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.Prof.PROF.htm"> <IMG SRC="BTexe17E.jpg" WIDTH="130" BORDER="0" ALT="Abrir Página 17-E"></A></P> </CENTER> </BODY> </HTML> <HTML> <!---.EXERCÍCIO 17-C . Celso Gallão – Atualização: Prof.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 .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</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. Aislan Ramos Página 19 .1ª PÁGINA DA DIREITA DO FRAME ----> <HEAD> <TITLE>Exercício 17-D .PÁGINA DA ESQUERDA DO FRAME ----> <HEAD> <TITLE>Exercício 17-C .<HTML> <!---.EXERCÍCIO 17-E .jpg" WIDTH="130" BORDER="0" ALT="Abrir Página 17-D"></A></P> <A HREF="Exe17e.htm"> <IMG SRC="BTexe17D. CELSO GALLÃO ----> <!---.PROF. 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. CELSO GALLÃO ----> <!---.EXERCÍCIO 17-D .

Formulário • Cor do fundo = Verde-Escuro • Cor dos textos = Verde-Claro Outras configurações de acordo com o Layout abaixo: Exercício 18 . Aislan Ramos Página 20 . sem bordas.) (Área para digitação de texto.Formulário de Pesquisa (fonte arial. 4. centralizado) Aluno 01 – Aluno 02 (fonte arial. 4.Microsoft Internet Explorer Exercício 18 .htm. digitação máxima de 50 caracteres) (tamanho de 6 caracteres. sem bordas.) 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.) 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. centralizado) Dados Pessoais (ALT+P) (cor amarelo) Nome: Senha: (tamanho de 30 caracteres.Prof.Exercício 18: Salvar como EXE18. Celso Gallão – Atualização: Prof. sendo exibida apenas 4 de cada vez. Editar conforme as orientações e Layout abaixo: Configuração da Página Principal: • Título no Navegador = Exercício 18 . digitação máxima de 6 caracteres) Sexo: Masculino (default) Feminino Cidade: (Lista Suspensa com 7 opções. com 5 linhas e 40 colunas) Colégio Singular – Caderno de Exercício das Aulas de HTML .Formulário .

Formulário</TITLE> </HEAD> <BODY BGCOLOR="darkgreen" TEXT="lightgreen"> <CENTER> <FONT FACE="arial" SIZE="4"> <B>Exercício 18 .<HTML><!---.EXERCÍCIO 18 .Formulário de Pesquisa<BR>Aluno 1 .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 ----> <HEAD> <TITLE>Exercício 18 . Aislan Ramos Página 21 .Aluno 2</B></FONT> </CENTER> <!---.Prof. Celso Gallão – Atualização: Prof.

) 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. cor do fundo verde-claro}.Formulário . • HR {cor vermelha. negrito. • TD {fonte verdana. sendo exibida apenas 4 de cada vez.Prof. negrito. com 5 linhas e 40 colunas) Colégio Singular – Caderno de Exercício das Aulas de HTML . cor da fonte verde. cor branca.Formulário com Folha de Estilo Aluno 01 – Aluno 02 Dados cadastrais (ALT+D) Nome: Sexo: Senha: (tamanho de 30 caracteres. • H2 {fonte arial. Outras configurações de acordo com o Layout abaixo: Exercício 19 . cor marrom}. • H1 {fonte arial. 20. borda sólida.Exercício 19: Editar e salvar com o nome de EXE19. texto alinhado à esquerda}. 12. espessura de 5pt}. • TABLE {cor do fundo vermelho-escuro}. 15. • H3 {fonte arial.htm: Configuração da Página Principal: • Título no Navegador = Exercício 19 . negrito. Aislan Ramos Página 22 . 10.Microsoft Internet Explorer Exercício 19 . • FIELDSET {cor verde-escuro. sem bordas. cor azul-escuro}. espessura de 5px}. centralizado.Formulário Definindo estilos na própria página: • BODY {fonte arial. 12. digitação máxima de 50 caracteres) (tamanho de 6 caracteres. Celso Gallão – Atualização: Prof. cor verde-escuro}. 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.) (Área para digitação de texto.

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

Aislan Ramos Página 24 . Celso Gallão – Atualização: Prof.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 .<P><!---.Prof.

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

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

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

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

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

You're Reading a Free Preview

Descarregar
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->