Resumo html 2012 exercícios 01 21

P R O G R A M A Ç Ã O
HTML
CADERNO DE
EXERCÍCIOS
PRÁTICOS
Prof. Celso Gallão

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>
<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>
<HEAD>
</HEAD>
<BODY>
<H1>Minha 2ª Página Web - Exercício 02</H1>
<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>

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.
<HEAD>
</HEAD>
<BODY>
<H1>Utilizando Links - Exercício 04</H1>
<HR>
<A HREF="EXE01.htm">Exercício 01</A>
<P>
<P>
<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>

<HEAD>
</HEAD>
<BODY>
<H1>Utilizando Imagens - Exercício 05</H1>
<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>
<HEAD>
</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>

<HEAD>
</HEAD>
<BODY BGCOLOR=”GREEN” TEXT=”YELLOW”
<H1>Alinhando Parágrafos – Exercício 07</H1>
<HR>

<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">

<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%">

<MARQUEE BEHAVIOR="alternate">
Texto em Movimento Alternado
</MARQUEE>
</BODY></HTML>
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.
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:

(Estas páginas ainda não foram editadas, portanto não queira testá-las agora!).

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:
Linha Horizontal:
espessura 5, comp. 360px, cor azul-escuro, à direita.

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

<head><title>Exercício 1O</title></head>

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

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

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

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

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

<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>
</BODY></HTML>

<HTML>
<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
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
• Endereço:
• Passatempos:
Voltar ao topo
• Endereço:
• Passatempos:
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.

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

Corpo Principal: Fundo Prata.
Texto em Arial, 3, cor R=00 G=55 B=00, negrito ao centro:
Exercício 14 - Utilizando Tabelas Mescladas
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.

Corpo Principal: Fundo com Imagem = LgSingBk.gif.
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”.
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.

Exercício 16-A: Salvar como EXE16A.htm. Editar conforme as orientações e Lay-Out 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 Lay-Out abaixo:
Exercício 16 - Página Principal - Microsoft Internet Explorer
Configuração do Frame:
• Comprimento = 200px
• Borda = Não
• Nome = FrEsquerda
• Carregar a Página = Exe16B.htm
• Barra de Rolagem = Não
• Permitir Redimencionamento = Não
• Comprimento = resto da tela
• Borda = Não
• Nome = FrDireita
• Carregar a Página = Exe16C.htm
• Barra de Rolagem = Sim
Abaixo segue o código-fonte:
<HTML>


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

Exercício 16-B: Salvar como EXE16B.htm. Editar conforme as orientações e Lay-Out 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>


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

Exercício 16-C: Salvar como EXE16C.htm. Editar conforme as orientações e Lay-Out 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 Lay-Out 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.
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.

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


<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>
</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>

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


<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>
</FONT>
<HR SIZE="3" COLOR="yellow" WIDTH="280">
<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>
Intel<sup>®</sup> Pentium<sup>®</sup> M</FONT></TH></TR>
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>
Turion<sup><small>TM</small></sup> 64</FONT></TH></TR>
Mobile Athlon<sup><small>TM</small></sup> 64</FONT></TH></TR>
Mobile Cempron<sup><small>TM</small></sup></FONT></TH></TR>
</TABLE>
</FONT>
</CENTER>
</BODY>
</HTML>

Exercício 17-A: Salvar como EXE17A.htm. Editar conforme as orientações e Lay-Out abaixo:
• Título no Navegador = Exercício 17 - Página Principal
• Borda = 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!”
Exercício 17 - Página Principal - Microsoft Internet Explorer
• Comprimento = 100%
• Altura = 100 pixels
• Borda = Não
• Nome = FrameAlto
• Carregar a Página = Exe17B.htm
• Barra de Rolagem = Não
• Distância entre as margens superior e inferior = 3 pixels
• Distância entre as margens direita e esquerda = 3 pixels
• Comprimento = 150 pixels
• Borda = Não
• Nome = FrameEsquerda
• Carregar a Página = Exe17C.htm
• Barra de Rolagem = Automática
• Comprimento = resto da tela
• Borda = Não
• Nome = FrameDireita
• Carregar a Página = Exe17D.htm
• Barra de Rolagem = Sim
• 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 Lay-Out 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 lay-out 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.

Exercício 17-C: Salvar como EXE17C.htm. Editar conforme as orientações e Lay-Out 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 Lay-Out 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 Lay-Out 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.

Abaixo seguem os códigos-fontes:
<HTML>


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


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

<HTML>


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


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


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

• Título no Navegador = Exercício 18 - Formulário
• Cor do fundo = Verde-Escuro
• Cor dos textos = Verde-Claro
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)
(Área para digitação de texto, com 5 linhas e 40 colunas)

<HTML>
<HEAD>
<TITLE>Exercício 18 - Formulário</TITLE>
</HEAD>
<BODY BGCOLOR="darkgreen" TEXT="lightgreen">
<CENTER>
<B>Exercício 18 - Formulário de Pesquisa<BR>Aluno 1 - Aluno 2</B></FONT>
</CENTER>

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

• 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, expessura de 5px};
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)
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)
(Área para digitação de texto, com 5 linhas e 40 colunas)

<HTML>

<HEAD>
<TITLE>Exercício 19 - Formulário</TITLE>

<STYLE>

</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">

<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>
<FIELDSET>
<LEGEND ACCESSKEY="E">
<H3>Eletrodomésticos que possui em casa (ALT+E)</H3>
</LEGEND>
<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>

<P>
<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>
<FIELDSET>
<LEGEND ACCESSKEY="A">
<H3>Fale sobre o apagão: (ALT + A)</H3>
</LEGEND>
<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>

Exercício 20: Editar e salvar com o nome de EXE20A.htm:
• 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};
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:
• Título no Navegador = Exercício 20B - Sem Estilo - Página 2
• 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.
Exercício 20B - Página 2 - Microsoft Internet Explorer
Exercício 20B - Sem Estilo - Página 2 (H1)

<HTML>

<HEAD>
<TITLE>Exercício 20A - Página 1</TITLE>

<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">

<STYLE>

</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>

<HEAD>
<TITLE>Exercício 20B - Página 2</TITLE>
<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>
</CENTER>
</BODY>
</HTML>

• Título no Navegador = Exercício 21
• Descrição da Página: Exercício 21, Folha de Estilo Externa
Definindo Estilo com Arquivo Externo:
• Carregar arquivo de estilo chamado Exe21.css
• 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
Exercício 21 - Folha de Estilo Externa (H1)
Exercícios Anteriores (ALT + E)
Exercício 16 (Link para Exe16a.htm)
Exercício 18 (Link para Exe18.htm)
Exercício 19 (Link para Exe19.htm)
Configurando Tabelas (ALT + T)
Estou adorando as folhas de estilo!
Vou detonar nas próximas páginas!
Formatando Parágrafos
Testando a formatação de um parágrafo.
E ai, você gostou?

<HTML>

<HEAD>
<TITLE>Exercício 21</TITLE>
<META HTTP-EQUIV= "Description" CONTENT="Exercício 21, Folha de Estilo Externa">

<LINK REL="StyleSheet" HREF="Exe21.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Exercício 21 - Folha de Estilos Externa</H1>
<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>
<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>

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

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

<style>

</style>

Resumo html 2012 exercícios 01 21

Mais conteúdo relacionado

Mais procurados

Semelhante a Resumo html 2012 exercícios 01 21

Resumo html 2012 exercícios 01 21