Escolar Documentos
Profissional Documentos
Cultura Documentos
Autor atual:
ltimas atualizaes:
Niteri - RJ
Junho / 2007
Sumrio
Prefcio
1
iii
1.1
. . . . . . . . . . . . . .
1.2
1.3
1.4
. . . . .
1.5
. . . . . . . . . . . . . . . . .
1.6
11
2.1
Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
2.2
Quebras de linha
. . . . . . . . . . . . . . . . . . . . . . . . .
12
2.3
Linhas horizontais . . . . . . . . . . . . . . . . . . . . . . . . .
12
15
3.1
Marcadores de estilo
. . . . . . . . . . . . . . . . . . . . . . .
15
3.2
Cabealhos
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
16
3.3
17
3.4
. . . . . . . . . . .
17
3.5
O marcador FONT . . . . . . . . . . . . . . . . . . . . . . . .
18
3.6
19
Imagens
4.1
23
O marcador IMG
. . . . . . . . . . . . . . . . . . . . . . . . .
23
4.1.1
25
4.1.2
25
4.1.3
27
. . . . . . . . .
4.2
Alinhamento de imagens . . . . . . . . . . . . . . . . . . . . .
28
4.3
29
Links
33
5.1
O marcador A . . . . . . . . . . . . . . . . . . . . . . . . . . .
33
5.1.1
34
5.1.2
. . . . . .
36
5.1.3
. . . . . . . . .
38
5.1.4
38
40
5.2.1
. . . . . . .
41
5.2.2
41
5.2.3
41
5.2
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
Listas
43
6.1
O marcador UL . . . . . . . . . . . . . . . . . . . . . . . . . .
43
6.2
O marcador OL . . . . . . . . . . . . . . . . . . . . . . . . . .
44
6.3
O marcador DL . . . . . . . . . . . . . . . . . . . . . . . . . .
45
6.4
Aninhamento de listas
46
6.5
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
Tabelas
47
51
7.1
O marcador TABLE
. . . . . . . . . . . . . . . . . . . . . . .
52
7.2
O marcador TR . . . . . . . . . . . . . . . . . . . . . . . . . .
53
7.3
O marcador TD . . . . . . . . . . . . . . . . . . . . . . . . . .
53
7.4
Ttulos de colunas . . . . . . . . . . . . . . . . . . . . . . . . .
54
7.5
. . . . . . . . . . . .
55
7.6
Aninhamento de tabelas
. . . . . . . . . . . . . . . . . . . . .
56
7.7
Legendas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
57
Formulrios
59
8.1
O marcador FORM . . . . . . . . . . . . . . . . . . . . . . . .
59
8.2
O marcador INPUT
60
8.3
8.4
O marcador TEXTAREA
8.5
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . .
63
. . . . . . . . . . . . . . . . . . . .
64
66
8.5.1
66
8.5.2
Usando tabelas
66
. . . . . . . . . . . . . . . . . . . . . .
UFF
8.6
PET-TELE))) i
Agrupamento de campos com o marcador
FIELDSET
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
67
8.6.1
68
8.6.2
69
. . . . . . . . . . . . . .
Frames
73
9.1
O frame document
. . . . . . . . . . . . . . . . . . . . . . . .
9.2
O marcador FRAMESET
. . . . . . . . . . . . . . . . . . . .
74
9.3
74
9.3.1
74
9.3.2
. . . . . . . . . . . . . . . . .
75
9.3.3
75
9.4
O marcador FRAME . . . . . . . . . . . . . . . . . . . . . . .
76
9.5
77
9.6
Interligao de frames
79
9.7
O marcador NOFRAMES
. . . . . . . . . . . . . . . . . . . .
81
9.8
82
. . . . . . . . . . . . . . . . . . . . . .
10 Imagens Mapeadas
10.1 Mapas do tipo
server-side
73
83
. . . . . . . . . . . . . . . . . . . .
83
84
84
84
89
B Padres de cores
91
ii
Prefcio
Tendo em vista as diretrizes do MEC em Ensino, Pesquisa e Extenso, o
Programa de Educao Tutorial (PET), do curso de Engenharia de Telecomunicaes, da Universidade Federal Fluminense (UFF), desenvolveu um
projeto de elaborao de apostilas, com o intuito de auxiliar os alunos no
aprendizado de temas importantes a sua formao, mas ausentes nas disciplinas do referido curso. Estas apostilas tambm so usadas como material
didtico para os cursos de capacitao, ministrados por alunos do PET para
os corpos docente e discente do curso de graduao em Engenharia de Telecomunicaes.
Abaixo segue a lista de apostilas preparadas neste projeto:
HTML : Linguagem de programao para hipertextos, principalmente empregada na construo de pginas da Internet (Webpages ).
LaTeX : Sistema de edio de texto largamente utilizado em meios acadmicos e cientcos, bem como por algumas editoras nacionais e internacionais.
MATLAB :
reas prossionais.
iii
UFF
PET-TELE))) 1
Sumrio
Captulo 1
Noes gerais sobre HTML e
Internet
1.1 Caractersticas da linguagem HTML
A linguagem HTML (Hypertext
hipertexto.
Caractersticas bsicas da linguagem HTML:
sensitive '
Quando um cliente
(American Standard Code for Information Interchange ) o formato mais comum usado em arquivos texto em computadores e na Internet. Num arquivo ASCII, cada
caractere alfabtico, numrico ou especial, representado por um nmero binrio de sete
bits. possvel representar at 128 caracteres com este cdigo.
1 ASCII
Arquivos HTML podem possuir as extenses `html' ou `htm'. A primeira normalmente utilizada em sistemas UNIX e a segunda em sistemas
ambas as extenses.
tags.
De um modo geral, as
formatado. A
>',
>'.
Por exemplo:
<B>
Linguagem
</B>
de Marcao.
<tag>
</tag>.
Veremos exemplos
tros.
Parmetros so recursos prprios de cada marcao, que permitem que ele
seja executado de diversas formas. Pode-se dizer que enquanto um comando
diz ao
Browser o que fazer, seus parmetros dizem a ele como fazer, atravs
de suas opes.
<FONT
SIZE="4"COLOR="green"> Texto
</FONT>
UFF
PET-TELE))) 7
No exemplo acima, `FONT' o comando e, `SIZE' e `COLOR' so os parmetros cujas opes escolhidas pelo programador foram, respectivamente,
`4' e `green'. Note que, ao contrrio da marcao de abertura, a marcao
de fechamento de um comando no precisa mencionar seus parmetros.
</HTML>.
Este par de
<HTML> e nalizado
tags essencial.
<HEAD> e </HEAD>.
Entre estas
<TITLE> e </TITLE>.
O ttulo
Browser.
A maioria dos comandos HTML ser colocada na rea do corpo do programa, que delimitada pelas marcaes
se os `frame
<BODY> e </BODY>.
Excetuando-
documents ', que sero vistos mais adiante, esta uma marcao
obrigatria.
O exemplo abaixo ilustra a estrutura de um programa HTML.
<HTML>
<HEAD>
<TITLE> Primeiro
</HEAD>
<BODY>
Exemplo
</TITLE>
</BODY>
</HTML>
Browsers.
Windows.
UFF
PET-TELE))) 9
Browsers mais
GOPHER - um servidor composto por menus e diretrios com informaes sobre arquivos e dados.
WAIS - Wide Area Indexed Server um local onde documentos esto disponveis em formato especial de pesquisa.
2 Conjunto
10
Captulo 2
Pargrafos e quebras de linha
2.1 Pargrafos
A linguagem HTML no reconhece os caracteres de quebra de linha dos
editores de texto e, mesmo que exista uma linha em branco no cdigo fonte,
os clientes
marcao apropriada.
A marcao
<P>
Sintaxe bsica:
Sintaxe
right
center
</P>.
As barras verticais no exemplo de sintaxe indicam que as opes so
mutuamente exclusivas, como era de se esperar, e as aspas so opcionais neste
caso. A utilizao de aspas na denio de parmetros s ser obrigatria
em duas situaes: quando o valor do parmetro for composto de duas ou
mais palavras ou quando no for dado nenhum espao entre os parmetros
na
tag.
Este comando pode ou no ser terminado por
11
</P>.
12
A marcao
existe a
<P>
<BR>
de
<HTML>
<HEAD>
<TITLE> Parágrafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta sentença com a marcação
parágrafo. </P>
Para vericar a diferença.
</BODY>
</HTML>
<HR>
No existe a marcao
</HR>.
WIDTH=nmero
ALIGN=left
linha.
center
UFF
PET-TELE))) 13
<HR>
Sintaxe completa: <HR SIZE=nmero WIDTH=nmero |
ALIGN=left | center | right COLOR=cor NOSHADE>
Sintaxe bsica:
nmero%
de
<HTML>
<HEAD>
<TITLE> Parágrafos e quebras de linha </TITLE>
</HEAD>
<BODY>
<P ALIGN=center>Utilizando P:</P>
<P> Vamos separar esta sentença com a marcação
parágrafo. </P>
Para vericar a diferença.
</BODY>
</HTML>
14
Captulo 3
Aplicando estilos de texto
3.1 Marcadores de estilo
Estes comandos permitem que o programador crie uma srie de efeitos no
texto, alterando a forma e o tamanho da fonte.
Todas as
<B>
<I>
texto
</I>;
texto
</B>;
<U>
<STRONG>
texto
texto
</U>;
</STRONG>;
Sintaxe:
<TT>
</TT>;
Sintaxe:
<BIG>
texto
</BIG>;
Small - Reduz a fonte. Sintaxe:
<SMALL>
texto
</SMALL>;
</SUP>;
15
<SUP>
texto
16
<SUB>
texto
</SUB>;
Pulsante - Faz com que o texto pisque. Este efeito no funciona em todos
os
Browsers. Sintaxe:
<BLINK>
texto
</BLINK>;
<HTML>
<HEAD>
<TITLE> Estilos de texto </TITLE>
</HEAD>
<BODY>
<B>Negrito</B>
<BR><I>Itálico</I>
<BR><U>Sublinhado</U>
<BR><STRONG>Strong</STRONG>
<BR><TT>Typewritter</TT>
<BR><BIG>Big</BIG>
<BR><SMALL>Small</SMALL>
<BR>Texto <SUP>Sobrescrito</SUP>
<BR>Texto <SUB>Subscrito</SUB>
<BR><BLINK>Pulsante</BLINK>
</BODY>
</HTML>
3.2 Cabealhos
Outra forma usada para mudar o tamanho da letra e aplicar o estilo negrito
a um texto o uso das marcaes
<H>.
<Hn>
Texto
</Hn>.
UFF
PET-TELE))) 17
<HTML>
<HEAD>
<TITLE> Cabeçalhos </TITLE>
</HEAD>
<BODY>
<H1> Cabeçalho com tamanho 1 </H1>
<H2> Cabeçalho com tamanho 2 </H2>
<H3> Cabeçalho com tamanho 3 </H3>
<H4> Cabeçalho com tamanho 4 </H4>
<H5> Cabeçalho com tamanho 5 </H5>
<H6> Cabeçalho com tamanho 6 </H6>
</BODY>
</HTML>
<PRE>
</PRE>
pgina, um texto que foi digitado num editor de textos qualquer, mantendo
sua formatao original com marcas de tabulao, m de linha gerado pela
tecla `Enter' e outros formatos.
O principal parmetro do comando PRE o parmetro WIDTH, que
especica, em caracteres, a largura da linha do texto.
Sintaxe bsica:
Sintaxe completa:
Texto
</PRE>.
<CENTER>
</CENTER>.
18
<HTML>
<HEAD>
<TITLE> Cabeçalhos </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Cabeçalho com tamanho 1 </H1>
<H2> Cabeçalho com tamanho 2 </H2>
<H3> Cabeçalho com tamanho 3 </H3>
<H4> Cabeçalho com tamanho 4 </H4>
<H5> Cabeçalho com tamanho 5 </H5>
<H6> Cabeçalho com tamanho 6 </H6>
</CENTER>
</BODY>
</HTML>
tags
<FONT>
</FONT>
UFF
PET-TELE))) 19
caso geral, a especicao de cores feita atravs do padro RGB (RedGreen-Blue). Neste padro a cor descrita por um nmero de 6 dgitos,
onde os dois primeiros correspondem intensidade da cor vermelha, os
dois do meio da cor verde e os dois ltimos da cor azul.
A cor
Os
<HTML>
<HEAD>
<TITLE> Cores de texto </TITLE>
</HEAD>
<BODY>
<FONT SIZE=7 COLOR=0C01BD >P</FONT>
<FONT SIZE=6 COLOR=655E7D >e</FONT>
<FONT SIZE=5 COLOR=A39A4B >t</FONT>
<FONT SIZE=4 COLOR=EEF303 >-</FONT>
<FONT SIZE=4 COLOR=EEF303 >T</FONT>
<FONT SIZE=5 COLOR=A39A4B >e</FONT>
<FONT SIZE=6 COLOR=655E7D >l</FONT>
<FONT SIZE=7 COLOR=0C01BD >e</FONT>
</BODY>
</HTML>
<BODY>,
possvel
denir cores para o fundo da pgina, para o texto e para os links de acordo
com a preferncia do programador. Tambm possvel inserir imagens como
plano de fundo, porm isto ser tpico de um de nossos prximos captulos.
20
Browser.
marcao
<HTML>
<HEAD>
<TITLE> Cores de texto e fundo </TITLE>
</HEAD>
<BODY BGCOLOR=black>
<FONT SIZE=7 COLOR=0C01BD >P</FONT>
<FONT SIZE=6 COLOR=655E7D >e</FONT>
<FONT SIZE=5 COLOR=A39A4B >t</FONT>
<FONT SIZE=4 COLOR=EEF303 >-</FONT>
<FONT SIZE=4 COLOR=EEF303 >T</FONT>
<FONT SIZE=5 COLOR=A39A4B >e</FONT>
<FONT SIZE=6 COLOR=655E7D >l</FONT>
<FONT SIZE=7 COLOR=0C01BD >e</FONT>
UFF
<P>
<A HREF= >link</A>
</BODY>
</HTML>
Deve-se observar que a tag
no Captulo 5.
PET-TELE))) 21
22
Captulo 4
Imagens
De modo geral, para que seja possvel inserir uma imagem em uma pgina
HTML, ela deve estar disponvel nos formatos GIF ou JPG. Estes formatos so aceitos por qualquer
Web podem estar protegidas por direitos autorais. Portanto, antes de colocar
em sua pgina uma gura interessante obtida em algum site, procure checar
se ele faz alguma restrio quanto utilizao de suas imagens.
SRC= nome ou URL do arquivo - Nome ou endereo (URL) da imagem a ser exibida. Este parmetro obrigatrio.
23
24
ALIGN= Top
Middle
ALIGN= Left
WIDTH= "nmero
imagem em pixels ou em relao largura da janela, independentemente de seu tamanho original. Quando se altera a dimenso horizontal da imagem, a dimenso vertical modicada automaticamente para
que a proporo original seja mantida.
HEIGHT= nmero
imagem em pixels ou em relao largura da janela, independentemente de seu tamanho original. Quando se altera a dimenso vertical
da imagem, a dimenso horizontal modicada automaticamente para
que a proporo original seja mantida. Se quisermos forar uma distoro na proporo original da imagem, temos que usar os parmetros
WIDTH e HEIGHT simultaneamente.
BORDER= nmero - Especica, em pixels, a largura da borda da imagem. O valor zero remove a borda.
VSPACE=nmero - Determina, em pixels, o espao que deve ser deixado em branco na parte de cima e na parte de baixo da imagem.
HSPACE=nmero - Determina, em pixels, o espao que deve ser deixado em branco nas laterais da imagem.
Sintaxe bsica:
Sintaxe completa:
Right >.
Middle
Bottom
UFF
PET-TELE))) 25
<IMG
<HTML>
<HEAD>
<TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio </H1>
<BR>
<IMG SRC=imagem1.gif >
</CENTER>
</BODY>
</HTML>
um arquivo especicado.
Para especicar uma imagem que esteja em um diretrio abaixo do diretrio atual, basta utilizar a sintaxe:
<IMG
SRC=../nome do
arquivo >.
Portanto, o smbolo `../' corresponde passagem para uma nvel superior
numa rvore de diretrios e o smbolo `/' corresponde a uma passagem para
um nvel inferior.
26
<IMG
<IMG
Salve
<HTML>
<HEAD>
<TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio </H1>
<BR>
<IMG SRC=imagem1.gif >
<P>
<H1> Inserindo imagens de outros diretrios </H1>
<P>
<H2> Diretrio acima do diretrio atual </H2>
<BR>
<IMG SRC=../imagem2.gif >
<P>
<H2> Diretrio abaixo do diretrio atual </H2>
<BR>
<IMG SRC=Subdir/imagem3.gif >
UFF
PET-TELE))) 27
</CENTER>
</BODY>
</HTML>
<IMG
Veja o exemplo:
<IMG
SRC= http://www.servidor.com.br/imagem.gif>
A sintaxe do exemplo, insere no documento a imagem `imagem.gif ', localizada no servidor `www.servidor.com.br'. O protocolo utilizado o http e
sua declarao necessria para a sintaxe correta da URL, como vimos no
primeiro captulo.
Incremente mais uma vez o exemplo `imagens1.html', conforme mostrado
abaixo.
<HTML>
<HEAD><TITLE> Imagens 1 - Insero de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretrio
</H1>
<BR>
<IMG SRC=imagem1.gif >
<P>
<H1> Inserindo imagens de outros diretrios
</H1>
<P>
<H2> Diretrio acima do diretrio atual </H2>
<BR>
<IMG SRC=../imagem2.gif >
<P>
<H2> Diretrio abaixo do diretrio atual </H2>
<BR>
28
servidores
</H1>
SRC=http://www.telecom.u.br/pet/imgcomunicacao.jpg >
</CENTER>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY>
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=imagem1.gif ALIGN=top >
<P>
topo
UFF
PET-TELE))) 29
Alinhamento pelo
<IMG
SRC=imagem1.gif ALIGN=bottom
<IMG
SRC=imagem1.gif ALIGN=middle
>
fundo
<P>
Alinhamento pelo
<P>
<IMG
>
meio
<P>
<IMG
</BODY>
</HTML>
Sintaxe:
tedo da
As tcnicas estudadas anteriormente para inserir imagens que no estejam contidas no mesmo diretrio do documento continuam vlidas. Observe
os exemplos:
<BODY
</BODY>
30
<BODY
>[Contedo
BACKGROUND= http://www.servidor.com.br/imagem.gif
da pgina]
</BODY>
O que o
<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY BACKGROUND=../imagem2.gif >
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=imagem1.gif ALIGN=top > topo
<P>
Alinhamento pelo <IMG SRC=imagem1.gif ALIGN=bottom > fundo
<P>
Alinhamento pelo <IMG SRC=imagem1.gif ALIGN=middle > meio
<P>
<IMG SRC=imagem1.gif ALIGN=right> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isso ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a no ser
encarada pelo Browser como um caracter de linha.
<P>
UFF
<IMG
PET-TELE))) 31
SRC=imagem1.gif ALIGN=left> Note que, com este tipo de
</BODY>
</HTML>
32
Captulo 5
Links
Como foi comentado no incio da apostila, a principal atrao da Internet a
criao de documentos com o conceito de hipertexto, ou seja, um documento
que se liga a outros atravs de
Web a
cor padro. J as imagens que tm esta funo costumam receber uma borda
na cor padro de
link.
5.1 O marcador A
As
tags
<A>
</A>
hy-
perlink, assim como criar um endereo para uma parte especca de um documento que ser referida por um
link.
fora do documento.
34
mais bem explorado; por ora, til saber apenas que a sintaxe TARGET= _blank faz com que uma nova janela seja aberta para carregar
o documento. Caso o parmetro TARGET no seja utilizado, o documento carregado ser exibido na mesma janela onde est o
link.
Nas subsees seguintes sero vistas as sintaxes para criar links em todas
as situaes possveis.
<A
</A>
<A> e </A>
<A HREF= praias.html > Praias </A> - Faz com que a palavra `Praias'
torne-se o marcador de um
<A
torne-se o marcador de um
</A>
<A
<IMG
SRC=praia.jpg >
</A>
- Faz com
UFF
PET-TELE))) 35
Documento 1:
<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=links2.html >
</CENTER>
</BODY>
</HTML>
aqui
</A>
Documento 2:
<HTML>
<HEAD>
<TITLE> Links 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 2 </H1>
<P> Notou o funcionamento do
</CENTER>
</BODY>
</HTML>
link?
</P>
link criado.
36
<A
</A>
<A
</A>
<A HREF=
gem </A>.
link absoluto:
Por exemplo:
<A
</A>.
UFF
PET-TELE))) 37
<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=../links2.html >
aqui
</A>
para acessar o
documento 2.
</CENTER>
</BODY>
</HTML>
Verique o funcionamento do
link.
Modique
<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=Subdir/links2.html >
acessar o documento 2.
</CENTER>
</BODY>
</HTML>
Verique o funcionamento do
link.
aqui
</A>
para
38
Web.
Sintaxe:
<A
</A>.
<A
</A>.
<HTML>
<HEAD>
<TITLE> Links 3 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Link para arquivo em outro servidor </H1>
<BR>
Clique <A HREF=http://www.telecom.u.br/pet >
aqui
</A>
para
</CENTER>
</BODY>
</HTML>
Verique o funcionamento do
link.
UFF
PET-TELE))) 39
Um procedimento muito comum nesses casos enderear partes importantes do texto do documento, como, por exemplo, ttulos de sees, e criar um
menu inicial no topo da pgina com
parte que lhe interessa, evitando que ele tenha o trabalho de procurar.
Criando ncoras:
Para enderear uma seo utilizado o parmetro NAME do comando A. O
endereo criado recebe o nome de ncora.
</A>.
Referenciando ncoras:
Uma vez criadas as ncoras, pode-se criar
<A
</A>.
atual.
Utilizando-se os recursos de endereamento descritos nas sees anteriores, o programador poder referir, atravs de
<A
</A>
<A
<A
</A>
<A
40
<A
</A>
<A
<A
</A>
<A
<HTML>
<HEAD>
<TITLE> Links
</HEAD>
<BODY>
<CENTER>
<H1> Link para
<BR>
Conhea <A
</TITLE>
</H1>
HREF=http://www.telecom.u.br/pet/integrantes.html#ex-bolsistas >
aqui
</A>
os ex-bolsistas do PET-Tele.
</CENTER>
</BODY>
</HTML>
Visualize o cdigo fonte da pgina exibida pelo
para ver as ncoras que ela possui. Tente modicar o exemplo `links4.html'
para que o
</A>
<A
UFF
PET-TELE))) 41
<A
HREF=MAILTO:endereo de e-mail?SUBJECT=texto do
</A>.
<A HREF=MAILTO:endereo1,endereo2?SUBJECT=texto do
</A>
<HTML>
<HEAD>
<TITLE> Links 5 - Enviando E-mail </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Enviando e-mails diretamente <BR> da página </H1>
<BR>
Envie um <A HREF=mailto:pet_tele@yahoo.com.br?SUBJECT=Teste
do curso de HTML&cc=digite aqui o seu e-mail > e-mail </A> para
PET-Tele.
</CENTER>
</BODY>
</HTML>
42
Captulo 6
Listas
Uma forma muito conveniente de estruturar um documento HTML a utilizao de listas. As listas podem funcionar como um sumrio, um menu ou
um resumo do contedo do documento e so excelentes para serem usadas
como ponto de partida ao acesso de outras partes do documento.
Existem basicamente trs tipos de listas: as no ordenadas, que contm
uma srie de itens sem numer-los, as ordenadas, que atribuem um nmero
para cada elemento da lista e as listas de denies, que contm termos e
suas respectivas denies. Os comandos usados para criar cada um destes
tipos de listas sero vistos nas prximas sees.
6.1 O marcador UL
As marcaes
(Unordered
<LI>
(Line
item ).
Os
44
Sintaxe bsica:
Sintaxe
lista]
</UL>.
O exemplo abaixo ilustra a construo de uma lista no ordenada. Digiteo salvando como `listas1.html'.
<HTML>
<HEAD>
<TITLE> Listas 1 - Lista
</HEAD>
<BODY>
<UL TYPE=DISC>
<LI> Primeiro item
<LI> Segundo item
<LI> Terceiro item
</UL>
</BODY>
</HTML>
Não Ordenada
</TITLE>
6.2 O marcador OL
As marcaes utilizadas para gerar listas ordenadas (Ordered
e
</OL>.
Estas
lists ) so <OL>
<LI>.
TYPE=tipo - permite escolher o tipo de marcador da lista. Seus possveis valores so:
TYPE=1 - Cria uma lista numrica normal. No precisa ser especicado, pois padro.
TYPE=A - Cria uma lista alfabtica com letras maisculas comeando pelo A.
TYPE=a - Cria uma lista alfabtica com letras minsculas comeando pelo a.
UFF
PET-TELE))) 45
TYPE=I - Cria uma lista numrica com nmeros romanos (maisculos) comeando pelo I.
TYPE=i - Cria uma lista numrica com nmeros romanos (minsculos) comeando pelo i.
importante ressaltar que, independente do tipo de marcador utilizado,
atribuiremos sempre um nmero ao parmetro START. Se, por exemplo, o
programador escrever START=3 para uma lista alfabtica com letras maisculas, o primeiro marcador da lista ser a letra C, pois a terceira letra do
alfabeto. O mesmo acontece com listas alfabticas com letras minsculas e
listas cujos marcadores so algarismos romanos.
<HTML>
<HEAD>
<TITLE> Listas 2 </HEAD>
<BODY>
<OL>
<LI> Primeiro item
<LI> Segundo item
<LI> Terceiro item
</OL>
</BODY>
</HTML>
Lista Ordenada</TITLE>
6.3 O marcador DL
Uma lista de denies consiste em alternar um termo e uma denio.
As
tags
<DL>
</DL>
<DT>
<DD>.
e as denies
46
<HTML>
<HEAD>
<TITLE> Listas 3 - Lista de Denições </TITLE>
</HEAD>
<BODY>
<H1>Lista de Denições<H1>
<DL>
<DT> Primeiro termo
<DD> Denição do primeiro termo
<DT> Segundo termo
<DD> Denição do segundo termo
<DT> Terceiro termo
<DD> Denição do terceiro termo
<DD> Denição alternativa para o terceiro termo
</DL>
</BODY>
</HTML>
Os clientes
<HTML>
<HEAD>
<TITLE> Listas
</HEAD>
<BODY>
<OL>
4 - Aninhamento de Listas
</TITLE>
UFF
PET-TELE))) 47
da lista ordenada
<DL>
<DT>
<DD>
<DT>
<DD>
</DL>
<LI> Segundo
da lista ordenada
<LI>
da lista ordenada
</UL>
<LI> Terceiro item da lista ordenada
<LI> Quarto item da lista ordenada
</OL>
</BODY>
</HTML>
<IMG
SRC>.
Escolha, primeiramente, uma imagem de seu agrado e salve como `marcador.gif '. Esta imagem ser o marcador de nossa lista.
Digite, agora, o exemplo seguite. Salve-o como `listas5.html'.
48
<HTML>
<HEAD>
<TITLE> Listas 5 - Lista com Marcadores Grácos </TITLE>
</HEAD>
<BODY>
<IMG SRC= marcador.gif > Primeiro item <BR>
<IMG SRC= marcador.gif > Segundo item <BR>
<IMG SRC= marcador.gif > Terceiro item
</BODY>
</HTML>
Note que, apesar de no possuir nenhum dos comandos padro de lista
estudados, a formatao do texto na tela ser a de uma lista cujos marcadores
so imagens.
Quando se deseja aninhar listas com marcadores grcos, torna-se necessrio utilizar as
tags
direita devidamente.
O exemplo abaixo ilustra este procedimento.
`listas6.html'.
<HTML>
<HEAD>
<TITLE> Listas 6 - Lista com Marcadores Grácos Aninhados
</TITLE>
</HEAD>
<BODY>
<IMG SRC= marcador.gif > Primeiro item <BR>
<IMG SRC= marcador.gif > Segundo item
<DL>
<DD><IMG SRC=marcador.gif WIDTH=20 HEIGHT=20 >
Primeiro sub-item do segundo item
<DD><IMG
<DL>
<DD><IMG
<DD><IMG
UFF
</DL>
<DD><IMG
PET-TELE))) 49
</DL>
<IMG SRC=
<IMG SRC=
</BODY>
</HTML>
<BR>
50
Captulo 7
Tabelas
O uso de tabelas melhora muito a aparncia de uma pgina pois permite o
alinhamento de textos e imagens, alm de ordenar as informaes de uma
forma padronizada.
Uma tabela constituda de linhas e colunas, e a interseo entre estes
dois elementos denominada clula.
As tabelas so criadas pelo comando TABLE, suas linhas so criadas pelo
comando TR e as clulas de uma linha so criadas pelos comandos TD ou
TH. Todos esses comandos sero detalhados nas sees seguintes.
Para ter uma noo do funcionamento, digite o exemplo abaixo. Salve-o
como `tabs1.html'.
<HTML>
<HEAD>
<TITLE> Tabelas 1 </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD> linha1 coluna1 </TD>
<TD> linha1 coluna2 </TD>
<TD> linha1 coluna3 </TD>
</TR>
<TR>
<TD> linha2 coluna1 </TD>
<TD> linha2 coluna2 </TD>
51
52
<TD> linha2
</TR>
</TABLE>
</BODY>
</HTML>
</TD>
coluna3
<TABLE>
</TABLE>
BORDER=nmero - Especica a largura da linha das bordas que separam as clulas da tabela. Se no for especicado este parmetro, no
ser exibida uma borda para a tabela.
WIDTH=nmero
ALIGN=left
center
gina.
S funci-
<TABLE>
</TABLE>.
Sintaxe completa:
<TABLE
BORDER= nmero
CELLSPACING=nmero CELLPADDING=nmero
UFF
PET-TELE))) 53
WIDTH=nmero
| nmero%
cor
BORDERCOLOR= cor > [Comandos de criao de linhas e clulas]
</TABLE>.
7.2 O marcador TR
A
tag
<TR>
(Table
<TR>
</TR>,
ALIGN= left
right
center
VALIGN=top
middle
bottom
de
de
7.3 O marcador TD
A tag
<TD> (Table
<TD>
</TD>.
54
ALIGN= left
right
center
VALIGN=top
middle
bottom
WIDTH=nmero
Sintaxe completa:
VALIGN=
tipodealinhamentoNOWRAP COLSPAN=nmeroROWSPAN=nmero
WIDTH=nmero
Caracteres
<TH>
</TH>
(Title
Heading ) o programa-
UFF
forma que
PET-TELE))) 55
<TD>
</TD>,
<HTML>
<HEAD>
<TITLE>Tabelas 2 - Expansões </TITLE>
</HEAD>
<BODY>
<TABLE WIDTH=80% ALIGN=center BORDER=1 CELLSPACING=0
BORDERCOLOR=000000 CELLPADDING=0>
<TR>
<TD ROWSPAN=2 BGCOLOR=E0E0E0 > </TD>
<TH COLSPAN=2> Título 1 </TH>
<TH COLSPAN=2> Título 2 </TH>
</TR>
<TR>
<TH> Subtítulo 1 </TH>
<TH> Subtítulo 2 </TH>
<TH> Subtítulo 3 </TH>
<TH> Subtítulo 4 </TH>
</TR>
<TR>
56
ALIGN=center VALIGN=middle>
</TD>
</TR>
<TR>
<TH> Tópico 2 </TH>
<TD> Dados </TD>
<TD> Dados </TD>
</TR>
</TABLE>
</BODY>
</HTML>
</TD>
<TD>
<HTML>
<HEAD>
<TITLE> Tabelas 3 - Aninhamento </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BORDERCOLOR= black WIDTH=100%>
<TR>
<TD>
<TABLE BORDER=1 BORDERCOLOR=red WIDTH=100%>
<TR>
<TD> Célula 1 </TD>
<TD> Célula 2 </TD>
<TD> Célula 3 </TD>
</TR>
UFF
PET-TELE))) 57
<TR>
<TD> Célula 4 </TD>
<TD> Célula 5 </TD>
<TD> Célula 6 </TD>
</TR>
</TABLE>
</TD>
<TD> Célula7 </TD>
</TR>
<TR>
<TD> Célula8 </TD>
<TD> Célula9 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
7.7 Legendas
Se o programador desejar criar um ttulo ou legenda para a tabela, basta usar
o comando CAPTION imediatamente aps a abertura do comando TABLE.
Sintaxe bsica:
<HTML>
<HEAD>
<TITLE> Tabelas 3 - Aninhamento </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=1 BORDERCOLOR= black
WIDTH=100%>
58
Captulo 8
Formulrios
Os formulrios eletrnicos so um dos mais fascinantes recursos da linguagem
HTML pois atravs deles um usurio pode interagir com o sevidor enviandolhe dados para serem processados. Os comandos de criao de formulrios
so, portanto, os principais responsveis pela troca de informaes entre
cliente e servidor.
Neste captulo, voc aprender a criar um formulrio usando os recursos
da linguagem HTML. Porm, para que um formulrio funcione, necessrio que no lado do servidor exista um outro programa, escrito em outra
linguagem de programao, que ser o responsvel pelo recebimento e processamento das informaes enviadas. Este tipo de programa denominado
CGI e no ser abordado neste curso.
59
60
<FORM ACTION=URL
</FORM>
Permite a exibio de
UFF
PET-TELE))) 61
CHECKBOX - Aceita campos do tipo sim/no. Permite a exibio
de vrias opes e aceita que o usurio escolha vrias delas.
MAXLENGTH=comprimento - Dene o nmero mximo de caracteres permitidos para variveis do tipo TEXT ou PASSWORD.
62
<INPUT
TYPE=textNAME=nome >.
Sintaxe completa:
<INPUT TYPE=text
NAME=nome SIZE=tamanho
<INPUT
Sintaxe completa:
<INPUT
TYPE=password NAME=nome
<INPUT
Sintaxe completa:
<INPUT TYPE=radio
NAME=nome VALUE=valor
CHECKED>.
Sintaxe bsica para campos do tipo CHECKBOX:
<INPUT
Sintaxe completa:
<INPUT TYPE=radio
NAME=nome VALUE=valor
CHECKED>.
Digite o exemplo abaixo e salve-o como `forms1.html'.
<HTML>
<HEAD>
<TITLE> Formulários 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscrição</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que você domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
UFF
PET-TELE))) 63
<BR><INPUT
Power Point
<P
ALIGN=center>
<INPUT
TYPE=submit VALUE=Enviar>
<INPUT
</P>
</FORM>
</BODY>
</HTML>
tags
podem ser selecionados pelo usurio. Visualmente elas criam uma lista de
seleo onde uma caixa exibida com o valor padro, e o clique em uma seta
faz surgir uma lista de opes. Um ou mais itens podem ser selecionados.
Os parmetros do comando SELECT so:
opcional.
Cada item da lista deve ser especicado pelo comando OPTION, cujos
principais parmetros so:
SELECTED - Indica que a opo deve ser previamente marcada como selecionada.
Sintaxe bsica:
Sintaxe completa:
SELECTED>.
64
<HTML>
<HEAD>
<TITLE> Formulários 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscrição</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que você domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<P> Cargo:</P>
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista de Sistemas
<OPTION VALUE=gerente>Gerente
<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>
<TEXTAREA>
</TEXTAREA>
digitao onde o usurio pode digitar livremente um texto. Esta caixa pode
UFF
PET-TELE))) 65
ser previamente preenchida com algum texto que deve ser especicado no
local de `texto padro'.
Os parmetros do comando TEXTAREA so:
<TEXTAREA NAME=nome
COLS=nmero > Texto Padro </TEXTAREA>.
Assim, sua sintaxe :
ROWS=nmero
<HTML>
<HEAD>
<TITLE> Formulários 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscrição<H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que você domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista
<OPTION VALUE=gerente>Gerente
de Sistemas
66
<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P> Por que deseja trabalhar em nossa empresa?
<BR><TEXTAREA ROWS=6 COLS=40
NAME=pq>Mínimo de 3 linhas!</TEXTAREA>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>
<PRE>
</PRE>.
de campos. Para ter uma noo mais clara desta tcnica, digite o exemplo
abaixo. Salve-o como `forms2.html'.
<HTML>
<HEAD>
<TITLE> Formulários
</TITLE>
</HEAD>
<BODY>
UFF
PET-TELE))) 67
TYPE=reset
<FIELDSET> e
<FIELDSET> [Campos] </FIELDSET>.
</FIELDSET>.
Alm disso, o comando LEGEND, denido dentro do comando FIELDSET, permite especicar nomes para os conjuntos de campos e criar teclas
de atalho para eles. Sua sintaxe bsica :
de campos
<LEGEND>
Nome do conjunto
</LEGEND>.
Browsers.
<HTML>
<HEAD>
68
<LEGEND
</LEGEND>
Sintaxe:
A sintaxe acima dene a tecla `a' como tecla de atalho para o conjunto
de campos `Nome do conjunto de campos'.
Modique o exemplo `forms3.html' para que que como mostrado abaixo.
Teste as teclas de atalho.
<HTML>
<HEAD>
UFF
PET-TELE))) 69
<INPUT
70
sintaxe usada :
<LABEL
</LABEL>
[Campo]. O marcador LABEL pode tambm ser fechado logo aps sua abertura ou at mesmo depois da tag de criao do campo.
Modique novamente o exemplo `forms3.html' para que que como mostrado abaixo. Teste agora as teclas de atalho para cada campo.
<HTML>
<HEAD>
<TITLE> Formulários 3 - FIELDSET </TITLE>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ACCESSKEY=I> <U>I</U>nformações de
Contato</LEGEND>
<LABEL ACCESSKEY=N FOR=nome> <U>N</U>ome:
</LABEL><INPUT TYPE=text NAME=nome
ID=nome><BR>
<LABEL ACCESSKEY=E FOR=email><U>E</U>-mail:
</LABEL><INPUT TYPE=text NAME=email
ID=email><BR>
<LABEL ACCESSKEY=T FOR=tel> <U>T</U>ELEFONE:
</LABEL><INPUT TYPE=text NAME=tel ID=tel>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C> <U>C</U>artão de
crédito</LEGEND>
<LABEL ACCESSKEY=V FOR=visa><INPUT TYPE=radio
NAME=card VALUE=visa ID=visa> <U>V</U>isa
</LABEL>
<LABEL ACCESSKEY=M FOR=master><INPUT
TYPE=radio NAME=card VALUE=mc
ID=master><U>M</U>aster Card </LABEL>
<BR>
<LABEL ACCESSKEY=U FOR=num>
N<U>ú</U>mero: </LABEL><INPUT
NAME=number ID=num>
TYPE=text
UFF
PET-TELE))) 71
<BR>
<LABEL
ACCESSKEY=D FOR=data>
validade:
</LABEL> <INPUT
<U>D</U>ata
TYPE=text SIZE=7
</FIELDSET>
</FORM>
</BODY>
</HTML>
de
72
Captulo 9
Frames
O recurso de frames permite ao programador criar pginas HTML que podem
ser visualizadas simultaneamente na janela do
<FRAMESET></FRAMESET> so
especicados todos os atributos dos frames que sero criados, tais como sua
quantidade e disposio horizontal e vertical.
Cada frame especicado precisar de um outro comando para denir suas
caractersticas individuais e, principalmente, seu contedo.
utilizado o comando FRAME.
73
Para tanto
74
ROWS=tamanhos - usado para criar um documento com frames dispostos em linhas. Nele dever ser especicada a altura de cada linha do
documento. Os valores podem ser especicados em pixels, percentagem
ou tamanho relativo.
FRAMEBORDER=1|0 - Mostra ou inibe borda para os frames, caso receba os valores 1 ou 0 respectivamente.
<FRAMESET
</FRAMESET>
- Cria
UFF
<FRAMESET
PET-TELE))) 75
ROWS=60,100,100,200 > [Frames]
</FRAMESET>
Cria quatro frames dispostos em linhas, cujas alturas, de cima para baixo,
so de 60, 100, 100 e 200 pixels.
Browser, a melhor
<FRAMESET
</FRAMESET>
- Cria trs
<FRAMESET
<FRAMESET>
- Cria cinco
<FRAMESET
</FRAMESET>
- Cria dois
<FRAMESET
</FRAMESET>
- Cria um
frame com altura de 300 pixels no centro da janela e, acima e abaixo dele,
dois frames de mesma altura.
<FRAMESET
</FRAMESET>
- Cria
dois frames dispostos em linhas, sendo que o de cima ocupa 30% da tela, e
o de baixo ocupa 70%.
76
<FRAMESET
</FRAMESET>
Cria trs frames dispostos em colunas, sendo que o da esquerda ocupa 30%
da tela, o do centro 50% e o da direita 20%.
<FRAMESET
</FRAMESET>
- Cria
trs frames dispostos em linhas, sendo que o de cima ocupa 25% da tela, o
de baixo tem altura de 100 pixels e o do centro ocupa o espao restante.
Nota: Como voc deve ter percebido pelos exemplos, os diferentes formatos de valores podem ser combinados entre si.
Os parmetros do comando
SRC= Endereo - Este parmetro o nico indispensvel, pois especica o nome ou a URL do documento que ser exibido no frame.
ALIGN=posiao - Ajusta o alinhamento do frame ou do texto. As opes permitidas para este parmetro so:
UFF
PET-TELE))) 77
FRAMEBORDER=1|0 -Idntico ao parmetro de mesmo nome do comando FRAMESET, ele ativa ou desativa a exibio de borda para o
frame atual.
no>.
<HTML>
<HEAD><TITLE> Documento 1 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 1 </H1></CENTER>
</BODY>
</HTML>
78
Documento 2:
<HTML>
<HEAD><TITLE> Documento 2 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 2 </H1></CENTER>
</BODY>
</HTML>
Salve-o com o nome de `doc2.html'.
UFF
PET-TELE))) 79
Documento 3:
<HTML>
<HEAD><TITLE> Documento 3 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 3 </H1></CENTER>
</BODY>
</HTML>
Salve-o com o nome de `doc3.html'.
Agora, digite o seguinte cdigo, salvando-o como `frames1.html':
<HTML>
<HEAD>
<TITLE> Frames 1 </TITLE>
</HEAD>
<FRAMESET ROWS=40%, 60% >
<FRAME SRC=doc1.html >
<FRAMESET COLS=*,* >
<FRAME SRC=doc2.html >
<FRAME SRC=doc3.html >
</FRAMESET>
</FRAMESET>
</HTML>
Abra o arquivo `frames1.html' e visualize o resultado.
correto.
No campo do cabealho do documento que contm os
a tag
<BASE
80
TARGET do comando A para este m. A sintaxe utilizada neste caso seria:
<A
Texto do
link
</A>.
<HTML>
<HEAD>
<TITLE> Menu </TITLE>
<BASE TARGET=frame2 >
</HEAD>
<BODY>
<H2> Lista de tens: </H2>
<OL>
<LI> <A HREF=doc1.html >
<LI> <A HREF=doc2.html >
<LI> <A HREF=doc3.html >
</OL>
</BODY>
</HTML>
Link1
Link2
Link3
</A>
</A>
</A>
<HTML>
<HEAD>
<TITLE> Frames 2 </TITLE>
</HEAD>
<FRAMESET COLS=30%, 70% >
<FRAME NAME=frame1 SRC=menu.html >
<FRAME NAME=frame2 SRC=doc1.html >
</FRAMESET>
</HTML>
Salve com o nome de `frames2.html'.
Abra o arquivo `frames2.html' e teste os links do frame da esquerda.
Aprecie o efeito na tela.
UFF
PET-TELE))) 81
Para solucionar este problema existe o comando NOFRAMES, que permite a incluso de avisos ou comandos HTML que sero visualizados pelo
browser no compatvel com frames.
As marcaes
<NOFRAMES>
</NOFRAMES>
so denidas dentro
Browser.
Browser usado
<HTML>
<HEAD>
<TITLE> Frames 2 </TITLE>
</HEAD>
<FRAMESET COLS=30%, 70% >
<FRAME NAME=frame1 SRC=menu.html >
<FRAME NAME=frame2 SRC=item1.html >
<NOFRAMES>
Esta página usa frames, um recurso não suportado
pelo Browser que está sendo utilizado.
82
<BR>
Sugerimos obter uma versão atualizada do
<A
</A>
ou do
<A
</NOFRAMES>
</FRAMESET>
</HTML>
Browser ir carregar
TARGET= _blank - Faz com que uma nova janela seja aberta para
carregar o documento.
TARGET= _parent - Faz com que o documento seja carregado no frameset de nvel superior ao do documento atual.
Captulo 10
Imagens Mapeadas
Mapas de imagem (ou
serem clicadas em regies especcas, permitem o acesso a outros documentos. como se determinadas partes da imagem funcionassem como
links.
arquivos gerados por este tipo de programa possuem a extenso `.map', mas
alguns possuem a opo de criar diretamente um arquivo HTML que contm apenas a rea de denio do mapa.
server-side (lado
servidor perguntando o endereo (URL) do documento associado rea clicada. O servidor envia, ento, o endereo de volta ao
83
A sin-
84
<A
arquivo.map ><IMG SRC=nome da imagem ISMAP></A>. O parmetro ISMAP do comando IMG indica que a imagem do tipo clicvel, ou seja,
uma imagem mapeada.
<MAP>
</MAP>.
<MAP
Sintaxe bsica:
sensveis]
</MAP>
<IMG
UFF
PET-TELE))) 85
RECT (retngulo) - Exige quatro coordenadas, x1, y1, x2 e y2. As
coordenadas x1 e y1 correspondem ao vrtice superior esquerdo do
retngulo, enquanto que x2 e y2 correspondem ao vrtice inferior
direito.
HREF=nome ou URL do arquivo - Especica o caminho para o documento a que determinada regio da imagem levar, se clicada.
86
<HTML>
<HEAD><TITLE> Documento 1 </TITLE></HEAD>
<BODY>
<CENTER><H1> Você clicou sobre o retângulo!
</H1></CENTER>
</BODY>
</HTML>
Salve-o com o nome de `doc-ret.html'.
Documento 2:
<HTML>
<HEAD><TITLE> Documento 2 </TITLE></HEAD>
<BODY>
<CENTER><H1> Você clicou sobre o círculo!
</H1></CENTER>
</BODY>
</HTML>
UFF
PET-TELE))) 87
<HTML>
<HEAD><TITLE> Documento 3 </TITLE></HEAD>
<BODY>
<CENTER><H1> Você clicou sobre o triângulo!
</H1></CENTER>
</BODY>
</HTML>
Salve-o com o nome de `doc-tri.html'.
Documento 4:
<HTML>
<HEAD><TITLE> Mapa de imagem </TITLE></HEAD>
<BODY>
<CENTER>
<H1> Clique sobre as guras abaixo: </H1>
<IMG SRC=mapa.gif USEMAP=#mapa>
</CENTER>
<MAP NAME=mapa>
<AREA SHAPE=rect COORDS=74,19,170, 55 HREF=doc-ret.html >
<AREA SHAPE=circ COORDS=50,86,30 HREF=doc-circ.html >
<AREA SHAPE=poly COORDS=87,107,154,66,134,142
HREF=doc-tri.html >
</MAP>
</BODY>
</HTML>
Salve-o como `mapa.html'.
88
Apndice A
Notaes especiais para smbolos
Notaes especiais para smbolos:
Notao
Descrio
Aparncia
>
Maior que
<
Menor que
>
<
&
E comercial
&
"
Aspas duplas
®
Marca registrada
©
Copyrights
r
c
Caracter
Notao
Exemplo
Acento agudo
&xacute;
ó=
Acento grave
&xgrave;
À=
Acento circunexo
◯
Ê=
&xtilde;
ã= / Ñ=
&xuml;
ü= / ï =
Cedilha
&xcedil;
Ç=
89
90
Caracter
Notao
å = e Å =
Letras unidas
æ = e Æ =
O cortado
ø = e Ø =
Eth
Caracter alemo
ð =
ß =
Apndice B
Padres de cores
Lista de cores com seus respectivos padres rgb:
91
92
UFF
Medium Spring Green: rgb = #7FFF00
Medium Turquoise: rgb = #70DBDB
Medium Violet: Red rgb = #DB7093
Medium Wood: rgb = #A68064
Midnight Blue: rgb = #2F2F4F
Navy Blue: rgb = #23238E
Neon Blue: rgb = #4D4DFF
Neon Pink: rgb= # FF6EC7
New Midnight Blue: rgb = #00009C
New Tan: rgb = #EBC79E
Old Gold: rgb = #CFB53B
Orange: rgb = #FF7F00
Orange Red: rgb = #FF2400
Orchid: rgb = #DB70DB
Pale Green: rgb = #8FBC8F
Pink: rgb = #BC8F8F
Plum: rgb = #EAADEA
Quartz: rgb = #D9D9F3
Rich Blue: rgb = #5959AB
Salmon: rgb = #6F4242
Scarlet: rgb = #8C1717
Sea Green: rgb = #238E68
Semi-Sweet Chocolate: rgb = #6B4226
Sienna: rgb = #8E6B23
Silver: rgb = #E6E8FA
Sky Blue: rgb = #3299CC
Slate Blue: rgb = #007FFF
Spicy Pink: rgb = #FF1CAE
Spring Green: rgb = #00FF7F
Steel Blue: rgb = #236B8E
Summer Sky: rgb = #38B0DE
Tan: rgb = #DB9370
Thistle: rgb = #D8BFD8
Turquoise: rgb = #ADEAEA
Very Dark Brown: rgb = #5C4033
Very Light Grey: rgb = #CDCDCD
Violet: rgb = #4F2F4F
Violet Red: rgb = #CC3299
PET-TELE))) 93
94