HTML PARA INICIANTES |
Um endereço relativo é do tipo cuecas.html enquanto um endereço absoluto é do tipo http://www.homensquentes.hpg.ig.com.br/cuecas.html, neste caso é uma URL completa. Você pode criar um link relativo para página que está em outro diretório desde que crie um endereço relativo que apresente o nome do diretóorio e o nome da página. Por exemplo, um link para a página jpg.html que pertence ao diretório fotos e um link para a página gif.html que pertence também ao diretório fotos. Portanto o diretório fotos contém uma página "jpg" contendo apenas fotos no formato jpg e uma outra página "gif" contendo apenas fotos no formato gif.
Separou-se assim uma página apenas com fotos em formato jpg (chamando-se esta página de jpg.html) de outra página gif.html onde o internatura só encontrará fotos em formato gif. O diretório serve assim para que se possa alocar arquivos distintos, separadamente.
Para que o visitante veja fotos em formato jpg a codificação do endereço relativo seria como se vê a seguir:
Você poderia fazer estes mesmos links usando endereços absolutos, devendo digitar toda a URL.
Em termos de acesso e rapidez de carregamento da sua página o endereço relativo é mais eficiente. No Windows e no DOS os nomes de diretórios e arquivos não são sensíveis a minúsculo e maiúsculo, mas no sistema operacional UNIX sim, e como muitos programas de ftp (usados para enviar arquivos para sites de hospedagem) usam UNIX, recomendo que você digite tudo minúsculo.
Os endereços relativos podem receber uma outra sintaxe ainda, no caso de haver subdiretórios, sintaxe esta baseada no uso de pontos-barra, ou seja ./ ou ../ ou .../, vamos dar um exemplo práatico do uso dessa sintaxe.
Eu imagino um computador com o seguinte:
C:
Meus Sites
- site 1
- paginaA.html
- imagem.jpg (uma foto da Praia do Morro)
- site 2
- paginaB.html
Temos portanto dois diretórios: site1 e site2.
Digamos que eu estou na páginaB.html e eu quero criar nesta páginaB um link que me permita ver a imagem.jpg que está na páginaA.html, como ficaria o endereço relativo se eu quisesse criar este link?
<A HREF="../site1/paginaA.html/imagem.jpg">Praia do Morro</A>
Em geral, você deve usar endereço relativo sempre que possível por que:
O endereço absoluto presta-se mais para ligar documentos que não estão diretamente relacionados ao diretóorio e dogumentos que fazem parte de outro site. Talvez você tenha em seu site na Internet um arquivo de áudio ou imagem que para ser visto ou ouvido pelo visitante desde que ele possua de antemão um programa de audio ou video. Mas você quer disponibilizar um link em sua página para um site de download para que o visitante que não tenha esse programa possa baixá-lo e usufluir o material do seu site. Neste caso você cria um link para o site de download usando um endereço absoluto.
Uma vantagem do endereço absoluto é que ele não tem que ser corrigido se você muda o link de uma página para outra página, ou se você o retirar de um diretório para outro diretório, como acontece com o endereço relativo.
O melhor do html é a habilidade de ligar uma página a uma outra página ou mesmo sair de uma posição em uma página para uma outra posição nesta mesma página. Quando se cria um link comumente ele recebe um enfoque diferenciado dos outros textos, recebendo uma cor específica ou um traço sublinhando. A cor diferente e o traço sublinhando são bons indicativos que temos ali um hypertext link, ou simplesmente link. Em português a tradução para link é âncora, termo pouco usado.
A tag para um link em um texto para levar o visitante a uma outra página é:
<A HREF=" "> </A>
Para incluir um link em um texto:
Aqui vai um exemplo simples de lincagem para uma página, o internauta deve clicar sobre a palavra cuecas:
AVISO - Visite a nova galeria com fotos de cuecas e clique sobre a foto em miniatura para vê-la em tamanho grande. |
Supondo que você hospedou seu site no HPG (http://www.hpg.ig.com.br) e seu site chama-se "Homens Quentes", e na página inicial você colocou este aviso mostrado acima, a codificação html ficaria:
AVISO - Visite a nova galeria com fotos de <A HREF="http://www.homensquentes.hpg.ig.com.br/cuecas.html">cuecas</A> e clique sobre a foto em miniatura para vê-la em tamanho grande. |
No presente caso a página a ser aberta chama-se cuecas.html e está no mesmo diretório que a página inicial, página inicial esta que acredito você deve ter chamada por index.html. Não se preocupe sobre diretórios, eles só existem se você criar, portanto, todos os arquivos do seu site estarão em um único diretório. Se você sabe como criar diretórios, deve então escrever o endereço incluindo nele o diretório, caso contrário o link não funcionará.
Em verdade, você poderia simplificar o endereço, eliminando a parte de http://www.homensquentes.hpg.ig.com.br, ficando como se mostra a seguir:
AVISO - Visite a nova galeria com fotos de <A HREF="cuecas.html">cuecas</A> e clique sobre a foto em miniatura para vê-la em tamanho grande. |
Links também são usados para mover o visitante para uma seção particular dentro da página atualmente visitada. O internauta, contudo, não terá como saber visualmente se este link o levará à uma posução outra nesma mesma página ou se este link o levará à uma outra página na Internet. Isto porque em nada difere estes tipos de links, embora produzam resultados diferenciados.
Esta página em que você está eu uso este tipo de link, permitindo que eu leve você aos vários itens, tornando a leitura mais agradável e veiculando a informação de forma mais pedagógica. Este tipo de link é por alguns webmasters chamado de link interno.
Links internos fazem com que o internauta "suba" e "desça" pela página, o que nem sempre é algo agradável se os itens a serem lidos estão muito longe uns dos outros, por causarem a perda do sentido de conjunto da página, o que pode ser contornado usando-se no topo da página uma tábua de conteúdo, como a que você pode ver que eu disponibilizei. Se o internauta ficar "subindo" e "descendo" pela página, ele sempre encontrará o contexto geral na tábua de conteúdo.
A tag para link interno é denotada assim:
Coloque A HREF no local de saída e A NAME no local de chegada.
Um caso particular de link interno é aquele link que uma vez clicado pelo internauta abre o programa de e-mail existente no computador deste visitante. Você coloca um link na sua página chamado e-mail, e se o visitante clicar neste link ele poderá lhe enviar um e-mail. Veja como se cria este link:
Use uma imagem como link do mesmo modo como usa um texto como link, porém deve ser escolhida uma imagem em formato gif ou jpg de tamanho (altura e largura) reduzido, para que seja carregado rápida e facilmente. Imagens grandes podem demorar a carregar fazendo o link passar desapercebido, e caso não carregue aparecerá um box com um X, prejudicando o entendimento de sua página pelo internauta.
O código html acima faz visualizar a seguinte imagem:
Note que não foi mostrada nenhuma imagem mas um X com um texto ao lado, porque não existe, no presente caso, uma imagem chamada cuecas_logo.gif. Mas eu tenho uma imagem chamada logo.gif que você vê a seguir, que serve de link para o visitante ir para a página cuecas.html.
Visite a nova galeria
|
Eu substitui a (inexistente) imagem cuecas_logo.gif pela imagem logo.gif e veja que agora pôde ser visualizada, com uma borda ao redor, indicando que trata-se de um link. Contudo pode-se obrigar a borda a não aparecer, incluindo-se aos códigos o atributo BORDER="0", assim a imagem aparecerá com um aspecto normal, veja:
Visite a nova galeria
|
Para não mostrar a borda a codificação html correspondente é esta aqui:
O atributo ALIGN pode ser empregado para links contendo imagens para alinhar esta imagem ao texto, texto este anterior ou posterior à imagem, porém o alinhamento irá aplicar-se tão somente ao texto que couber na mesma linha em que está a imagem.
alinhamento ao topo do texto com a imagem:
HOMENSQUENTES
clique na bandeira para entrar
<FONT FACE="verdana" SIZE="5">HOMENS</FONT><A HREF="homensquentes.html"><IMG SRC="bandeira.gif" BORDER="0" ALIGN="TOP" ALT="[Homens Quentes]"></A><FONT FACE="verdana" SIZE="5">QUENTES</FONT>
alinhamento ao centro do texto com a imagem:
HOMENSQUENTES
clique na bandeira para entrar
<FONT FACE="verdana" SIZE="5">HOMENS</FONT><A HREF="homensquentes.html"><IMG SRC="bandeira.gif" BORDER="0" ALIGN="CENTER" ALT="[Homens Quentes]"></A><FONT FACE="verdana" SIZE="5">QUENTES</FONT>
alinhamento inferior do texto com a imagem:
HOMENSQUENTES
clique na bandeira para entrar
<FONT FACE="verdana" SIZE="5">HOMENS</FONT><A HREF="homensquentes.html"><IMG SRC="bandeira.gif" BORDER="0" ALIGN="BOTTOM" ALT="[Homens Quentes]"></A><FONT FACE="verdana" SIZE="5">QUENTES</FONT>
Foto 2 | ||
| ||