14
Capítulo 3
Aplicando estilos de texto
3.1 Marcadores de estilo
Estes comandos permitem que o programador crie uma série de efeitos no
texto, alterando a forma e o tamanho da fonte. Todas as tags deste tipo
devem ser especi cadas em pares, marcando o início e o m do texto a ser
formatado.
Os principais comandos de estilo de texto são:
Negrito - Aplica o estilo negrito. Sintaxe: <B> texto </B>;
Itálico - Aplica o estilo itálico. Sintaxe: <I> texto </I>;
Sublinhado - Aplica o estilo sublinhado. Sintaxe: <U> texto </U>;
Strong - Similar ao negrito. Sintaxe: <STRONG> texto </STRONG>;
Typewriter - Deixa o texto com espaçamento regular. Sintaxe: <TT>
texto </TT>;
Big - Aumenta a fonte e aplica o estilo negrito. Sintaxe: <BIG> texto
</BIG>;
Small - Reduz a fonte. Sintaxe: <SMALL> texto </SMALL>;
Sobrescrito - Eleva o texto e diminui seu corpo. Sintaxe: <SUP> texto
</SUP>;
15
16
Subscrito - Rebaixa o texto e diminui seu corpo. Sintaxe: <SUB> texto
</SUB>;
Pulsante - Faz com que o texto pisque. Este efeito não funciona em todos
os Browsers. Sintaxe: <BLINK> texto </BLINK>;
O exemplo a seguir mostra todos estes efeitos. Digite-o e salve-o como
`[Link]'.
<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 Cabeçalhos
Outra forma usada para mudar o tamanho da letra e aplicar o estilo negrito
a um texto é o uso das marcações <H>. A linguagem HTML possui seis
comandos, de H1 a H6, que aplicam um tamanho de fonte diferenciado para
o texto que venham a envolver. Além de modi car o tamanho, os comandos
H inserem linhas em branco acima e abaixo da linha de texto formatada.
O comando H1 possui o maior tamanho, enquanto que H6 possui o menor
tamanho de fonte.
A sintaxe básica deste comando é: <Hn> Texto </Hn>.
Onde n é o número de 1 a 6 correspondente ao tamanho do cabeçalho.
UFF PET-TELE))) 17
O exemplo abaixo permite visualizar os tamanhos de cabeçalhos. Digite-o
salvando como `[Link]'.
<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>
3.3 Exibição de textos pré-formatados
Através das tags <PRE> e </PRE> o programador pode incluir, em uma
página, um texto que foi digitado num editor de textos qualquer, mantendo
sua formatação original com marcas de tabulação, m de linha gerado pela
tecla `Enter' e outros formatos.
O principal parâmetro do comando PRE é o parâmetro WIDTH, que
especi ca, em caracteres, a largura da linha do texto.
Sintaxe básica: <PRE> Texto </PRE>.
Sintaxe completa: <PRE WIDTH=largura > Texto </PRE>.
3.4 Centralização de textos e outros elementos
Para centralizar um cabeçalho, parágrafo ou gura dentro da largura da
página, devem ser usadas as marcações <CENTER> e </CENTER> envol-
vendo o elemento a ser centralizado.
Sintaxe: <CENTER> [Elementos a serem centralizados] </CENTER>.
Modi que o exemplo `[Link]' conforme mostrado abaixo.
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>
3.5 O marcador FONT
As tags <FONT> e </FONT> permitem ao programador modi car o ta-
manho, o tipo e a cor da fonte de um texto.
Seus parâmetros são:
SIZE=número - Especi ca o tamanho da fonte a ser utilizada e pode
variar de 1 a 7. Caso seja especi cado um número antecedido por
sinais de adição ou subtração, o tamanho padrão da fonte (tamanho 3)
será, respectivamente, aumentado ou diminuído daquele valor. Assim
size=2 e size=-1 têm o mesmo efeito prático.
FACE=nome - Permite que seja escolhida uma fonte diferente para o
texto. Podem ser especi cados vários tipos de fonte, de modo que, se o
sistema não possuir a primeira opção, a segunda é carregada automati-
camente e assim por diante. Pode-se, portanto, escrever: FACE=fonte1,
fonte2, fonte3. Neste caso, fonte1 é a fonte preferida pelo programador,
fonte2 é sua segunda opção e fonte3 a última.
COLOR=cor - Especi ca a cor do texto. Seu valor pode ser especi cado
pelo nome da cor em inglês, no caso de cores mais comuns. Porém, no
UFF PET-TELE))) 19
caso geral, a especi cação de cores é feita através do padrão RGB (Red-
Green-Blue). Neste padrão a cor é descrita por um número de 6 dígitos,
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
resultante será uma combinação destas três. A base numérica utilizada
para a representação das cores no padrão RGB é a hexadecimal, o que
nos fornece 256 possibilidades de intensidade para cada cor básica (de
0 a 255). Escreve-se: COLOR= rrggbb ou COLOR= nome. Os
padrões RGB de algumas cores podem ser vistos no apêndice B desta
apostila.
Sintaxe básica:<FONT> Texto </FONT>.
Sintaxe completa: <FONT FACE=nome SIZE=número COLOR=cor >
Texto </FONT>.
Digite o exemplo abaixo e salve-o como `[Link]'.
<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>
3.6 Cores de texto e padrões de fundo
Através da manipulação dos parâmetros da marcação <BODY>, é possível
de nir cores para o fundo da página, para o texto e para os links de acordo
com a preferência do programador. Também é possível inserir imagens como
plano de fundo, porém isto será tópico de um de nossos próximos capítulos.
20
Em todos os parâmetros do comando BODY, a cor deve ser de nida da
mesma forma que no parâmetro COLOR do comando FONT, ou seja, pelo
seu nome ou padrão RGB.
Os principais parâmetros do comando BODY utilizados para alterar cores
de texto e fundo de uma página são:
BGCOLOR=cor - É a cor de fundo, onde o padrão é cinza ou branco,
dependendo do Browser.
TEXT= cor - É a cor do texto, sendo que o padrão é preto.
LINK=cor - É a cor dos links, sendo que o padrão é azul.
VLINK=cor - É a cor dos links já visitados, onde o padrão é vermelho-
púrpuro.
Assim, poderíamos con gurar as cores de uma página complementando a
marcação<BODY> da seguinte forma: <BODY BGCOLOR=cor TEXT=cor
LINK=cor VLINK=cor > [Conteúdo da página] </BODY>
Deve-se ressaltar que o programador precisa ter cuidado ao escolher as
cores para que não atrapalhem a leitura da informação contida na página.
Modi cações nas cores dos links também podem vir a confundir o usuário,
portanto, se quiser alterá-las, tome cuidado para não inverter o padrão ou
escolher cores iguais às de texto ou fundo.
Modi que o exemplo `[Link]' conforme mostrado abaixo.
<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 PET-TELE))) 21
<P>
<A HREF= >link</A> com cor modi cada
</BODY>
</HTML>
Deve-se observar que a tag <A> utilizada no exemplo acima será de nida
no Capítulo 5.
22
Capítulo 4
Imagens
De modo geral, para que seja possível inserir uma imagem em uma página
HTML, ela deve estar disponível nos formatos GIF ou JPG. Estes forma-
tos são aceitos por qualquer Browser, além de possibilitar a compactação dos
arquivos de imagem, permitindo o carregamento mais rápido da página. Cer-
tos Browsers conseguem exibir imagens de outros formatos, como BMP, por
exemplo. Porém, tendo em vista os aspectos de universalidade e e ciência,
os formatos GIF e JPG continuam sendo os mais recomendados.
Você pode obter uma imagem através de páginas na Internet, CD-ROMs
de imagens ou processos de digitalização. Neste último caso, é provável que
se precise utilizar programas de tratamento de imagens, tais como PaintShop
Pro ou PhotoPaint para realizar uma conversão de formatos.
É importante ressaltar que algumas imagens encontradas em páginas da
Web podem estar protegidas por direitos autorais. Portanto, antes de colocar
em sua página uma gura interessante obtida em algum site, procure checar
se ele faz alguma restrição quanto à utilização de suas imagens.
4.1 O marcador IMG
O marcador IMG insere uma imagem no corpo do documento.
Seus principais parâmetros são:
SRC= nome ou URL do arquivo - Nome ou endereço (URL) da ima-
gem a ser exibida. Este parâmetro é obrigatório.
23
24
ALT=Texto - Exibe o texto especi cado quando o Browser não encontra
a imagem ou quando o cursor passa por cima da gura.
ALIGN= Top | Middle | Bottom - Especi ca o alinhamento da ima-
gem relativamente à linha de texto onde é exibida.
ALIGN= Left | Right - Especi ca o alinhamento da imagem relativa-
mente às bordas laterais da janela.
ISMAP - Determina que a gura é um mapa de imagem. Trataremos deste
assunto com mais detalhes em um de nossos próximos capítulos.
WIDTH= "número | número%" - Especi ca a largura de exibição da
imagem em pixels ou em relação à largura da janela, independente-
mente de seu tamanho original. Quando se altera a dimensão horizon-
tal da imagem, a dimensão vertical é modi cada automaticamente para
que a proporção original seja mantida.
HEIGHT= número | número% - Especi ca a altura de exibição da
imagem em pixels ou em relação à largura da janela, independente-
mente de seu tamanho original. Quando se altera a dimensão vertical
da imagem, a dimensão horizontal é modi cada automaticamente para
que a proporção original seja mantida. Se quisermos forçar uma dis-
torção na proporção original da imagem, temos que usar os parâmetros
WIDTH e HEIGHT simultaneamente.
BORDER= número - Especi ca, em pixels, a largura da borda da ima-
gem. O valor zero remove a borda.
VSPACE=número - Determina, em pixels, o espaço que deve ser dei-
xado em branco na parte de cima e na parte de baixo da imagem.
HSPACE=número - Determina, em pixels, o espaço que deve ser dei-
xado em branco nas laterais da imagem.
Sintaxe básica: <IMG SRC= nome ou URL do arquivo >.
Sintaxe completa: <IMG SRC= nome ou URL do arquivo WIDTH=número
HEIGHT=número BORDER=número ALT=Texto
VSPACE=número HSPACE=número ALIGN=Top | Middle | Bottom |
Left | Right >.
UFF PET-TELE))) 25
4.1.1 Inserindo imagens do mesmo diretório
Se a imagem e o documento HTML que a exibirá estiverem no mesmo dire-
tório, basta especi car o nome completo da imagem no parâmetro SRC do
comando IMG.
Sintaxe básica: <IMG SRC=nome da imagem >.
Digite o exemplo abaixo salvando-o como `[Link]'. Para que ele
funcione, é necessário que você escolha uma imagem qualquer e a salve com
o nome de `[Link] ' no mesmo diretório do documento.
<HTML>
<HEAD>
<TITLE> Imagens 1 - Inserção de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretório </H1>
<BR>
<IMG SRC=[Link] >
</CENTER>
</BODY>
</HTML>
4.1.2 Inserindo imagens de diretórios diferentes
Se a imagem e o documento HTML que a exibirá estiverem em diretórios
diferentes, o programador precisará especi car o caminho relativo para a
imagem a partir do documento corrente, no parâmetro SRC do comando
IMG. O Browser sempre assume o diretório atual como o inicial para procurar
um arquivo especi cado.
Para especi car uma imagem que esteja em um diretório abaixo do diretó-
rio atual, basta utilizar a sintaxe: <IMG SRC=Diretório/nome do arquivo >.
Por outro lado, se o diretório onde se encontra a imagem estiver situado
acima do diretório atual, a sintaxe utilizada será: <IMG SRC=../nome do
arquivo >.
Portanto, o símbolo `../' corresponde à passagem para uma nível superior
numa árvore de diretórios e o símbolo `/' corresponde a uma passagem para
um nível inferior. Utilizando estes símbolos, você poderá incluir em uma
página um arquivo qualquer de imagem existente no micro.
26
Observe os exemplos de sintaxes:
<IMG SRC=Dir1/Dir2/[Link] > - Esta sintaxe insere no docu-
mento a imagem `[Link]', que está salva no diretório `Dir2', abaixo do
diretório `Dir1', que por sua vez encontra-se abaixo do diretório atual.
<IMG SRC=../../../[Link] > - Esta sintaxe insere no documento a
imagem `[Link]', que está salva no terceiro diretório acima do diretório
corrente.
<IMG SRC=../../Dir3/[Link] > - Esta sintaxe insere no docu-
mento a imagem `[Link]', que está salva no diretório `Dir3', abaixo
do segundo diretório acima do diretório corrente.
Modi que o exemplo `[Link]' como mostrado abaixo. Para que o
código funcione, você deverá escolher uma imagem qualquer e salvá-la como
`[Link] ' no diretório imediatamente acima do diretório atual. Salve
também outra imagem como `[Link]' numa pasta do diretório atual
chamada `Subdir'. Lembre-se que o diretório atual será aquele que contém o
documento `[Link]'.
<HTML>
<HEAD>
<TITLE> Imagens 1 - Inserção de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretório </H1>
<BR>
<IMG SRC=[Link] >
<P>
<H1> Inserindo imagens de outros diretórios </H1>
<P>
<H2> Diretório acima do diretório atual </H2>
<BR>
<IMG SRC=../[Link] >
<P>
<H2> Diretório abaixo do diretório atual </H2>
<BR>
<IMG SRC=Subdir/[Link] >
UFF PET-TELE))) 27
</CENTER>
</BODY>
</HTML>
4.1.3 Inserindo imagens de outros servidores
Para inserir em uma página HTML imagens localizadas em outro servidor,
é necessário apenas especi car corretamente sua URL no parâmetro SRC do
comando IMG.
Sintaxe básica: <IMG SRC= URL >.
Veja o exemplo:
<IMG SRC= [Link]
A sintaxe do exemplo, insere no documento a imagem `[Link] ', lo-
calizada no servidor `[Link]'. O protocolo utilizado é o http e
sua declaração é necessária para a sintaxe correta da URL, como vimos no
primeiro capítulo.
Incremente mais uma vez o exemplo `[Link]', conforme mostrado
abaixo.
<HTML>
<HEAD><TITLE> Imagens 1 - Inserção de imagens </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Inserindo imagens do mesmo diretório
</H1>
<BR>
<IMG SRC=[Link] >
<P>
<H1> Inserindo imagens de outros diretórios
</H1>
<P>
<H2> Diretório acima do diretório atual </H2>
<BR>
<IMG SRC=../[Link] >
<P>
<H2> Diretório abaixo do diretório atual </H2>
<BR>
28
<IMG SRC=Subdir/[Link] >
<P>
<H1> Inserindo imagens de outros servidores </H1>
<BR>
<IMG
SRC=[Link] >
</CENTER>
</BODY>
</HTML>
4.2 Alinhamento de imagens
Para alinhar uma imagem numa página é utilizado o parâmetro ALIGN.
As opções Top, Middle e Bottom do parâmetro ALIGN de nem a posição
da imagem com relação ao texto. Se for usada Top, a gura será alinhada
com o texto pela sua parte superior, se for usada Middle, pelo centro e, se
for usada Bottom, pela parte inferior. Estas três opções mantêm a imagem
como um caractere de linha, ou seja, de cada lado da gura só poderá haver
uma linha de texto.
Por outro lado, as opções Right e Left de nem a posição da imagem na
página. A opção Left determina que a imagem seja posicionada junto à borda
esquerda da janela e a opção Right faz com que a imagem que junto à borda
direita. Essas duas opções fazem com que a imagem não mais seja encarada
como um caractere de linha, mas sim como um objeto a parte, e isso permite
que o texto ua ao lado da gura.
Digite o exemplo abaixo e salve-o como `[Link]' na mesma pasta
onde se encontra `[Link]'.
<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY>
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=[Link] ALIGN=top > topo
<P>
UFF PET-TELE))) 29
Alinhamento pelo <IMG SRC=[Link] ALIGN=bottom > fundo
<P>
Alinhamento pelo <IMG SRC=[Link] ALIGN=middle > meio
<P>
<IMG SRC=[Link] ALIGN=right> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a não ser
encarada pelo Browser como um caracter de linha.
<P>
<IMG SRC=[Link] ALIGN=left> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a não ser
encarada pelo Browser como um caracter de linha.
</BODY>
</HTML>
4.3 Backgrounds com imagens
Ao invés de de nir uma cor para enfeitar o fundo de sua página, o pro-
gramador pode optar por utilizar imagens. Para fazer isto basta substituir o
parâmetro BGCOLOR do comando BODY pelo parâmetro BACKGROUND.
Em BACKGROUND deverá ser especi cado o nome ou a URL do arquivo
de imagem desejado, lembrando que este deverá estar, preferencialmente, nos
formatos GIF ou JPG.
Sintaxe: <BODY BACKGROUND= nome ou URL do arquivo > [Con-
teúdo da página]</BODY>
As técnicas estudadas anteriormente para inserir imagens que não este-
jam contidas no mesmo diretório do documento continuam válidas. Observe
os exemplos:
<BODY BACKGROUND= ../[Link] > [Conteúdo da página]</BODY>
- Esta sintaxe insere, como plano de fundo do documento, a imagem `ima-
[Link]' localizada no diretório acima do diretório corrente.
<BODY BACKGROUND= Dir1/[Link] > [Conteúdo da página]
</BODY>
- Esta sintaxe insere, como plano de fundo do documento, a imagem `ima-
30
[Link]' localizada no diretório `Dir1' abaixo do diretório corrente.
<BODY BACKGROUND= [Link]
>[Conteúdo da página] </BODY> - Esta sintaxe insere, como plano de
fundo do documento, a imagem `[Link]' localizada no servidor `[Link]'.
É necessário esclarecer que para preencher todo o fundo de uma página
não é preciso inserir um gura que possua as dimensões dela. O que o
Browser faz é carregar a imagem escolhida e então repetí-la quantas vezes
for necessário a m de preencher toda a tela. Devido ao fato de a imagem ser
carregada uma única vez, é recomendável, para maior rapidez na abertura
da página, que guras pequenas sejam de nidas como planos de fundo. É
claro que o aspecto estético também é determinante, mas em guras do tipo
textura, a adoção deste procedimento praticamente não será visível embora
o tempo de carga da página seja sensivelmente reduzido.
Não é recomendável a utilização de guras com muitos contrastes, pois
isto pode di cultar a leitura das informações contidas na página.
Modi que o exemplo `[Link]' para que que como mostrado abaixo.
<HTML>
<HEAD>
<TITLE> Imagens 1 - Alinhamento de imagens </TITLE>
</HEAD>
<BODY BACKGROUND=../[Link] >
<H1> Alinhamento de imagens </H1>
<P>
Alinhamento pelo <IMG SRC=[Link] ALIGN=top > topo
<P>
Alinhamento pelo <IMG SRC=[Link] ALIGN=bottom > fundo
<P>
Alinhamento pelo <IMG SRC=[Link] ALIGN=middle > meio
<P>
<IMG SRC=[Link] 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 não ser
encarada pelo Browser como um caracter de linha.
<P>
UFF PET-TELE))) 31
<IMG SRC=[Link] ALIGN=left> Note que, com este tipo de
alinhamento, o texto ui ao lado da gura naturalmente. Isto ocorre
porque, quando alinhamos a gura pelas laterais, ela passa a não ser
encarada pelo Browser como um caracter de linha.
</BODY>
</HTML>
32
Capítulo 5
Links
Como foi comentado no início da apostila, a principal atração da Internet é a
criação de documentos com o conceito de hipertexto, ou seja, um documento
que se liga a outros através de hyperlinks. Com este recurso, o programador
poderá permitir ao usuário o acesso imediato a qualquer endereço da Web a
partir de sua página.
As palavras ou imagens de um documento que o interligam com outros
são denominadas marcadores de links. De um modo geral, os textos de nidos
como marcadores de links são exibidos pelos Browsers sublinhados e com uma
cor padrão. Já as imagens que têm esta função costumam receber uma borda
na cor padrão de link.
5.1 O marcador A
As tags <A> e </A> podem marcar um texto ou uma imagem como hy-
perlink, assim como criar um endereço para uma parte especí ca de um do-
cumento que será referida por um link.
Os principais parâmetros do comando A são:
HREF= nome ou URL do arquivo - Especi ca o endereço da URL
ao qual o link está associado. Pode ser usado para referências dentro e
fora do documento.
NAME=nome - Especi ca o nome da seção de um documento que é
referida por um link de hipertexto. Trataremos nas seções mais adiante.
33
34
TARGET= janela - Especi ca o nome do frame ou janela onde será
aberto o link. Quando formos tratar de frames, este parâmetro será
mais bem explorado; por ora, é útil saber apenas que a sintaxe TAR-
GET= _blank faz com que uma nova janela seja aberta para carregar
o documento. Caso o parâmetro TARGET não seja utilizado, o docu-
mento carregado será exibido na mesma janela onde está o link.
Nas subseções seguintes serão vistas as sintaxes para criar links em todas
as situações possíveis.
5.1.1 Links para arquivos no mesmo diretório
Semelhante ao que acontece com o comando IMG, para fazer uma ligação
entre dois documentos contidos no mesmo diretório, o programador necessita
apenas especi car o nome completo do arquivo que será chamado no parâ-
metro HREF do comando A. Este arquivo chamado poderá ser uma nova
página, uma gura, ou até mesmo uma seção especí ca de um documento,
como será visto à frente.
Sintaxe: <A HREF= nome do arquivo > Texto ou imagem </A>
Na sintaxe acima, o elemento envolvido pelas marcações <A> e </A> é
de nido como marcador do link para se chegar ao documento cujo nome foi
especi cado no parâmetro HREF, desde que este esteja no mesmo diretório
do documento corrente. Se o usuário clicar sobre o marcador, o documento
especi cado será exibido.
Como exemplos, podemos analisar as seguintes sintaxes:
<A HREF= [Link] > Praias </A> - Faz com que a palavra `Praias'
torne-se o marcador de um link para uma nova página, denominada [Link]
no mesmo diretório do documento corrente.
<A HREF= [Link] > Praia </A> - Faz com que a palavra `Praia'
torne-se o marcador de um link para uma imagem, denominada [Link] no
mesmo diretório do documento corrente.
<A HREF= [Link] > <IMG SRC=[Link] > </A> - Faz com
que a imagem `[Link]' torne-se o marcador de um link para uma nova
página, denominada [Link] no mesmo diretório do documento corrente.
UFF PET-TELE))) 35
Para visualizar o funcionamento de um link, crie os documentos abaixo.
Documento 1:
<HTML>
<HEAD>
<TITLE> Links 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 1 </H1>
<BR>
Clique <A HREF=[Link] > aqui </A> para acessar o documento 2.
</CENTER>
</BODY>
</HTML>
Salve-o com o nome de `[Link]'.
Documento 2:
<HTML>
<HEAD>
<TITLE> Links 2 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1> Documento 2 </H1>
<P> Notou o funcionamento do link? </P>
</CENTER>
</BODY>
</HTML>
Salve-o com o nome de `[Link]' no mesmo diretório em que foi salvo
o primeiro documento.
Abra o documento `[Link]' e teste o link criado.