CURSO BÁSICO DE HTML
Caíque Severo
Hyperlinks
Até agora produzimos apenas um documento bastante
simples, que poderia ser composto com recursos muito
mais sofisticados em qualquer processador de texto.
Mas neste livro estamos falando de documentos de
hipertexto, que podem fazer ligações com outros textos.
Os pontos que ligam esses hipertextos são chamados de
hyperlinks, links ou âncoras de hipertexto. O tag que
indica a região a ser tratada como um hyperlink é o par
<A> e </A>. Dentro desse tag, na forma de atributo, é
colocada a referência ao arquivo ligado. A referência
indica a URL do documento. Quando o usuário clicar
sobre o trecho realçado pela âncora de hipertexto, o
arquivo ligado será requisitado ao servidor e mostrado
na janela do navegador.
<P ALIGN=CENTER>
Uma ligação de hipertexto:</P>
<P ALIGN=CENTER>
<A HREF=https://www.seed.net.tw/~milkylin/
htmleasy.html>HTML Easy! Pro home page</A>
</P>
Exemplo 9: link simples
Neste exemplo, o texto HTML Easy! Pro home page
aparece no navegador realçado de alguma forma,
normalmente em uma cor diferente e sublinhado. O
cursor do mouse se transforma em uma mãozinha
quando colocado sobre o texto realçado. Ao clicar no
link, o arquivo htmleasy.html, do diretório /~milkylin/ do
servidor www.seed.net.tw será transmitido pela rede e
mostrado na tela.
Colocando uma URL no atributo HREF do tag <A>,
pode-se ligar uma página com qualquer outro documento
disponível na Internet. Pode-se fazer uma página com
uma lista de páginas preferidas da rede com suas devidas
ligações de hipertexto.
<b>Lista de recursos sobre HTML</b>
<UL>
<LI><A HREF =
"https://www.willamette.edu/html-composition/
strict-html.html">Composing Good HTML</A>
<LI><A HREF =
"https://www.w3.org/hypertext/WWW/Provider/Style/
Introduction.html">CERN's style guide for online
hypertext</A>
<LI><A HREF = "https://www.ucc.ie/info/net/
htmldoc.html">How to Write HTML Files</A>
<LI><A HREF = "https://melmac.corp.harris.com/
about_html.html">Introduction to HTML</A>
<LI><A HREF = "https://kuhttp.cc.ukans.edu/
lynx_help/HTML_quick.html">The HTML Quick
Reference Guide</A>
<LI><A HREF = "https://www.w3.org/hypertext/WWW/
MarkUp/MarkUp.html">The official HTML
specification</A>
</UL>
Exemplo 10: uma lista de âncoras de hipertexto
Neste exemplo, as URLs estão entre aspas. Isso significa
que o servidor vai considerar a diferença entre
maiúsculas e minúsculas (o que se chama de sensitivo à
caixa) na hora de localizar o arquivo. Se no exemplo
acima o arquivo HTML_quick.html estiver gravado no
servidor como html_quick.html, o documento não será
localizado e o usuário receberá uma mensagem de erro.
Nem sempre é necessário colocar uma URL completa
em uma âncora de hipertexto. É possível indicar apenas
o nome do servidor.
<UL>
<LI><A HREF=www.apple.com>Apple Computer</A>
<LI><A HREF=www.thespot.com>The Spot</A>
</UL>
Neste exemplo, os servidores da Apple e do The Spot
se encarregarão de indicar qual é a página que deve ser
carregada. Essa página principal é chamada normalmente
de home page.
Quando a âncora apontar para uma página armazenada
no mesmo servidor, não é necessário colocar o endereço
da máquina. Se o documento estiver no mesmo
diretório, basta indicar o nome do arquivo.
<A HREF=exemplo1.htm>Exemplo 1</A>
O link acima chama o arquivo exemplo1.htm, que deve
estar no mesmo diretório da página. Se o documento
estiver em um subdiretório de onde está o arquivo que
contém a âncora, é preciso indicá-lo.
<A HREF=exemplos/exemplo1.htm>Exemplo1</A>
Digamos que agora seja necessário traçar o caminho de
volta, colocando uma âncora no arquivo exemplo1.htm
para a página anterior.
<A HREF=../ancora.htm>Volta para exemplo de
âncora</A>
A referência cruzada entre arquivos armazenados no
mesmo computador mas em diretórios diferentes merece bastante atenção. Digamos que existam dois diretórios
colocados no mesmo nível. Um chamado musica e
outro, comida. Um arquivo chamado rock.htm, do
diretório musica deve fazer uma referência ao arquivo
feijoada.htm, do diretório comida. A âncora de
hipertexto do documento rock.htm deve ficar assim:
<A HREF=../comida/feijoada.htm>Tudo sobre
feijoada</A>
Também pode-se fazer uma referência a uma outra parte do mesmo documento. Isso é particularmente útil
quando se está fazendo um índice de um texto. A âncora
para um texto no mesmo documento fica assim:
<A HREF=#cap1>Capítulo 1</A>
Enquanto o alvo do link fica desta forma:
<A NAME=cap1>Capítulo 1</A>
Neste exemplo, quando o usuário clicar sobre o link <A
HREF=#cap1>Capítulo 1</A>, ele será remetido ao
ponto onde está a referência <A NAME=cap1>Capítulo
1</A>. A parte do texto que é referenciada (o alvo de
um link) não fica realçada como os hyperlinks. Além de
ser invisível, não é obrigatório que exista um link
apontando para ela.
Pode-se colocar referências do tipo <A NAME> em um
documento longo apenas para que outras pessoas
produzindo páginas Web possam fazer ligações para
determinadas partes do texto.
Para citar uma determinada parte de um outro texto, a
referência é:
<A HREF=exemplo.htm#capitulo1>Capítulo 1 do
Exemplo</A>
Sendo que exemplo.htm é o nome do arquivo
referenciado e capítulo1 é a referência a uma parte
daquele texto.
Cores dos hyperlinks
Da mesma forma que é possível definir cores diferentes
para o fundo e o texto, pode-se mudar a cor dos links.
As cores das âncoras de hipertexto variam de acordo
com a sua condição: visitados, nunca visitados e ativos.
Os navegadores sabem quais foram os hyperlinks já
visitados pelo usuário em um determinado período de
tempo. Por isso, a cor dos links já visitados deve ser
diferente da cor das referências nunca visitadas. Além
disso, o link pisca em uma cor ainda diferente dessas
duas logo depois que é clicado pelo usuário. A cor dos
links é definida no tag <BODY>.
<BODY LINK=RED ALINK=BLUE VLINK=GREEN>
Onde:
LINK determina a cor dos links não visitados
ALINK determina a cor que os links devem piscar
quando clicados
VLINK determina a cor dos links já visitados
Neste exemplo, os links nunca visitados ficam em
vermelho, os ativos (quando clicados) em azul, e os
visitados em verde. Para não confundir os usuários, a
cor dos links já visitados deve ser uma versão mais clara
da cor das ligações ainda não visitadas.
» Imagens »