A maior rede de estudos do Brasil

Grátis
55 pág.
Apostila HTML

Pré-visualização | Página 8 de 17

ou relativamente 
uns aos outros. Ex: <frameset cols="70%,*"> <frameset cols="50,100">. 
5 
05 – Frames 
HTML – Lucilia Ribeiro 23
ROWS: Divide a janela (ou frame) em diversos frames horizontais, tantos quantos forem 
os valores descritos. Os valores podem estar expressos em pixels, percentuais ou 
relativamente uns aos outros. 
FRAMEBORDER: Indica se será exibida uma borda 3D para os frames, ou se os frames 
não aparecerão destacados por uma borda. O parâmetro pode assumir os valores "1" (default, 
indica a exibição da borda) ou "0" (suprime a exibição de borda). 
FRAMESPACING: Cria um espaço adicional, em pixels, entre os frames. 
Os atributos FRAMESPACING e FRAMEBORDER funcionam igualmente por toda a cadeia de 
FRAMESETs encadeados, bastando que sejam declarados no primeiro comando FRAMESET a 
ser utilizado. A definição de frames através de percentuais é interessante, pois a diagramação 
da janela é preservada, não importando a resolução em que se estiver visualizando a página. 
5.3 FRAMES SOBREPOSTOS DIRETA E INDIRETAMENTE 
A janela do navegador pode ser dividida em diversos frames horizontais e verticais. Para 
que isso seja possível, as TAGs <FRAMESET> são encadeadas. Assim são criados frames 
sobrepostos diretamente: 
 
EX11.HTML (Documento de Layout) 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11</TITLE> 
 </HEAD> 
 <FRAMESET rows=*,*> <!---Divisão da janela em 2 frames---> 
 <FRAME src=ex11a.html noresize> 
 <FRAMESET cols=30%,70%> <!---Divisão do segundo frame em duas---> 
 <FRAME src=ex11b.html> 
 <FRAME src=ex11c.html> 
 </FRAMESET> 
 </FRAMESET> 
</HTML> 
O documento acima é um documento de layout. Os documentos a que se referem os 
comandos <FRAME>, dentro do <FRAMESET>, são tipicamente documentos de conteúdo, mas 
também poderão ser novos documentos de layout, que dividam novamente cada frame. 
A janela do navegador foi inicialmente dividida em 2 frames horizontais iguais. Foi atribuído 
o documento de conteúdo "ex11a.htm" ao primeiro frame. 
Em seguida, dividiu-se o segundo frame em dois frames verticais, o primeiro com 30% do 
espaço disponível e o segundo com os restantes 70%. Um frame pode exibir um documento de 
conteúdo, isto é, um documento tradicional com textos, imagens etc, ou um documento de 
layout, que o dividiria novamente em outros frames. Chama-se isto de divisão indireta. 
Iremos criar os documentos ex11a, ex11b e ex11c para fazer funcionar o exemplo. 
 
EX11A.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11A</TITLE> 
 </HEAD> 
 <BODY> 
 <P> 
 <FONT face="Arial, Helvetica" color="blue" size="+4"> 
 Este texto é um teste do arquivo EX11A 
 </FONT> 
 </BODY> 
</HTML> 
 
 
05 – Frames 
HTML – Lucilia Ribeiro 24
 
EX11B.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11B</TITLE> 
 </HEAD> 
 <BODY> 
 <P><FONT face="Arial, Helvetica" color="red"> 
Este texto é um teste do arquivo EX11B</FONT> 
 </BODY> 
</HTML> 
 
EX11C.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>EX11C</TITLE> 
 </HEAD> 
 <BODY> 
 <H1 align="center"> <B>Este texto é um teste do arquivo EX11C</B></H1> 
 </BODY> 
</HTML> 
5.4 LINKS EM FRAME ALVO 
Quando o usuário pressiona um link qualquer em um frame, o link pode atualizar seu 
próprio frame com o documento contido em sua URL, ou atualizar outro frame. Para que seja 
possível a atualização de outros frames, foi introduzido o atributo TARGET na TAG <A>. O 
atributo "TARGET" pode ter o nome de um frame ou uma dentre as seguintes palavras: 
_self (atualiza o próprio frame) 
_parent (atualiza o "frame-mãe") 
_top (atualiza toda a janela, independente de qualquer frame - ex.: link externo) 
_blank ou _window (abre uma nova janela de navegador) 
 
"_self", "_parent" e "_top" são case-sensitive, e devem ser escritos em minúsculas. 
 
EX12.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Este é o menu</TITLE> 
 </HEAD> 
 <FRAMESET rows=80%,*> 
 <FRAMESET cols=30%,*> 
 <FRAME src=ex12ind.html name=menu> 
 <FRAME src=ex12nada.html name=textos> 
 </FRAMESET> 
 <FRAME src=ex12nada.html name=ajuda> 
 </FRAMESET> 
</HTML> 
 
05 – Frames 
HTML – Lucilia Ribeiro 25
 
 
EX12A.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Introdução </TITLE> 
 </HEAD> 
 <BODY> 
 <H1>Este é o documento a.htm</H1> 
 <H2>Introdução</H2> 
 </BODY> 
</HTML> 
 
EX12B.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY> 
 <H1>Este é o documento b.htm</H1> 
 <H2>Capítulo 1</H2> 
 </BODY> 
</HTML> 
 
EX12C.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY> 
 <H1>Este é o documento c.htm</H1> 
 <H2>Capítulo 2</H2> 
 </BODY> 
</HTML> 
 
EX12D.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 3 </TITLE> 
 </HEAD> 
 <BODY bgcolor=lightgreen> 
 <H1>Este é o documento d.htm</H1> 
 <H2>Capítulo 3</H2> 
 </BODY> 
</HTML> 
 
EX12E.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 5 </TITLE> 
 </HEAD> 
 <BODY bgcolor=aqua> 
 <H1>Este é o documento e.htm</H1> 
 <H2>Capítulo 4</H2> 
 </BODY> 
</HTML> 
 
EX12F.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 5 </TITLE> 
 </HEAD> 
 <BODY bgcolor=#ccccee> 
 <H1>Este é o documento f.htm</H1> 
 <H2>Capítulo 5</H2> 
 </BODY> 
</HTML> 
 
EX12NADA.HTML 
 
<HTML> 
 <HEAD></HEAD> 
 <BODY bgcolor="#80FFFF"> 
 </BODY> 
</HTML> 
 
EX12G.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Capítulo 6</TITLE> 
 </HEAD> 
 <BODY bgcolor="skyblue"> 
 <H1>Capítulo 6</H1> 
 <HR> 
 <P>Este capítulo descreve alguns conceitos básicos 
relacionados com a utilização dos recursos de <A href = 
ex12hlp.html target = ajuda>frames </A> e sua utilização 
na criação de home pages.</P> 
 <UL> 
 <LI>O que são Frames</LI> 
 <LI>Sintaxe geral</LI> 
 <LI>Exemplos</LI> 
 </UL> 
 <HR> 
 <H5>Aula sobre o uso de Frames.</H5> 
 <BR> 
 </BODY> 
</HTML> 
 
EX12SOS.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Ajuda do manual </TITLE> 
 </HEAD> 
 <BODY background=gray> 
 <H2><B><FONT face=Arial, Helvetica, sans-serif 
color=red>Arquivo de Ajuda Online</FONT></B></H2> 
 Este arquivo contém informações sobre a 
ajuda.<BR> 
 </BODY> 
</HTML> 
 
EX12HLP.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Help do Frame.</TITLE> 
 </HEAD> 
 <BODY bgcolor=aquamarine> 
 <H1><FONT color=red>Frames</FONT></H1> 
 <P><TT>Os frames são divisões da tela do browser em diversas telas (ou “quadros”). Com isso, torna-se possível 
apresentar mais de uma página por vez: por exemplo, um índice principal em uma parte pequena da tela, e os textos 
relacionados ao índice em outra parte.</TT></P> 
 <P><A href=ex12nada.html>apagar texto de ajuda</A></P> 
 </BODY> 
</HTML> 
05 – Frames 
HTML – Lucilia Ribeiro 26
 
EX12IND.HTML 
 
<HTML> 
 <HEAD> 
 <TITLE>Menu principal</TITLE> 
 <base target=textos> 
 </HEAD> 
 <BODY bgcolor=gold> 
 <H1 align=center>Menu Principal</H1> 
 <UL> 
 <LI><A href=ex12a.html>Introdução </A> 
 <LI><A href=ex12b.html>Capítulo 1 </A> 
 <LI><A href=ex12c.html>Capítulo 2 </A> 
 <LI><A href=ex12d.html>Capítulo 3 </A> 
 <LI><A href=ex12e.html>Capítulo 4 </A> 
 <LI><A href=ex12f.html>Capítulo 5 </A> 
 <LI><A href=ex12g.html>Capítulo 6 </A> 
 </UL> 
 <HR> 
 <P CENTER> <A href=ex12sos.html target=ajuda>Ativa Ajuda</A> 
 <P CENTER> <A href=ex12nada.html target=ajuda>Desativa Ajuda</A> 
 </BODY> 
</HTML> 
 
 
 
 
 
 
 
 
 
 
 
 
 
06 – CSS 
HTML – Lucilia Ribeiro 27
 
Folhas de Estilo - CSS 
 
 
 
"O estilo é uma dificuldade de expressão" 
(Mário Quintana) 
 
6.1 INTRODUÇÃO 
CSS, sigla em inglês para Cascading Style Sheet que em português foi traduzido para Folha 
de Estilo em Cascata. 
A introdução deste conceito preconiza o uso dos elementos (tags) HTML, exclusivamente 
para marcar e estruturar o conteúdo do documento. Nenhum elemento HTML será usado para 
alterar a apresentação, ou seja estilizar o conteúdo. A tarefa de estilização ficará a cargo das 
CSS que nada mais é do que um arquivo