Forums » HTML & HTML 5

Criando Hyperlinks

    • 11496 posts
    12 de junho de 2013 18:08:46 ART

    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.
    Código:
    <P ALIGN=CENTER>


    Uma ligação de hipertexto:
    Código:
    </P>
    <P ALIGN=CENTER>
    <A HREF=http://www.seed.net.tw/~milkylin/
    htmleasy.html>HTML Easy! Pro home page</A>
    </P>


    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 servidorhttp://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.
    Código:
    <b>Lista de recursos sobre HTML</b>
    <UL>
    <LI><A HREF = "http://www.willamette.edu/html-composition/
    strict-html.html">Composing Good HTML</A>
    <LI><A HREF = "http://www.w3.org/hypertext/WWW/Provider/Style/
    Introduction.html">CERN's style guide for online hypertext</A>
    <LI><A HREF = "http://www.ucc.ie/info/net/
    htmldoc.html">How to Write HTML Files</A>
    <LI><A HREF = "http://melmac.corp.harris.com/
    about_html.html">Introduction to HTML</A>
    <LI><A HREF = "http://kuhttp.cc.ukans.edu/
    lynx_help/HTML_quick.html">The HTML Quick Reference Guide</A>
    <LI><A HREF = "http://www.w3.org/hypertext/WWW/
    MarkUp/MarkUp.html">The official HTML specification</A>
    </UL>


    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.
    Código:
    <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.
    Código:
    <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.
    Código:
    <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.
    Código:
    <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:
    Código:
    <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:
    Código:
    <A HREF=#cap1>Capítulo 1</A>


    Enquanto o alvo do link fica desta forma:
    Código:
    <A NAME=cap1>Capítulo 1</A>


    Neste exemplo, quando o usuário clicar sobre o link
    Código:
    <A HREF=#cap1>Capítulo 1</A>,
    ele será remetido ao ponto onde está a referência
    Código:
    <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
    Código:
    <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 é:
    Código:
    <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
    Código:
    <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.


    Este post foi editado por Oliveira Dario em 15 de julho de 2013 01:49:24 ART"