Links são normalmente utilizados para direcionar o usuário para outras páginas, ou para outras partes da mesma página. Nos dois casos, utilizamos a tag a, que possui o atributo href no qual indicamos o destino daquele link.
O seguinte código mostra como adicionar um link para outra página, neste caso, indicada pelo arquivo pagina2.html.
<a href="pagina2.html">Página 2</a>
Já o código abaixo mostra como adicionar um link para um elemento na mesma página. Nesse caso, ao clicar no link o browser mudará o foco para o elemento que possui o atributo id igual àquele indicado no href.
<a href="#paragrafo3">Ir para o parágrafo 3</a>
<!--outros elementos-->
<p id="rodape">Parágrafo no rodapé.</p
Note também que nesse caso o href requer ainda o sinal de cerquilha (#) antes do id do elemento que será o foco do link.
Criando Links em Páginas HTML
Um Link é um elemento (texto ou imagem) que ao ser clicado leva o internauta para outra página. Ao passar o ponteiro do mouse sobre um link, o cursor fica no formato de uma mão branca.
A Tag <a> serve para criar links na Linguagem HTML. Normalmente, essa tag vem acompanhada do parâmetro href que serve informar qual o endereço o link deve apontar.
Para entender bem como criar links em HTML, vamos criar dois arquivos: “pagina1.html” e “pagina2.html”. Cada um terá um link apontado para o outro.
Para entender os exemplos abaixo, é importante ter um conhecimento mínimo da Linguagem HTML. Se você não tem, sugiro que antes de continuar, leia os posts Introdução ao HTML e Parâmetros das Tags HTML.
Digite o código abaixo em um editor de textos (o Bloco de Notas por exemplo):
<html>
<head>
<title>Criação de Links (Página 1)</title></head>
<body>
<h3>Página 1</h3>
<p><a href=”pagina2.html”>Clique aqui</a> para ir para a Página 2.</p></body></html>Salve o arquivo em seu computador com o nome “pagina1.html” (Sem aspas).
Ao abrir o arquivo com um clique duplo no ícone, teremos o seguinte resultado:
Se clicarmos no link, não iremos obter o resultado desejado. Isso ocorre pois ainda não existe o arquivo “pagina2.html” (Dizemos que é um Link Quebrado). Então, vamos criar o outro arquivo.
Abra uma nova janela do Editor de Textos e digite o código abaixo:
<html>
<head>
<title>Voltando para a página anterior</title></head>
<body>
<h3>Página 1</h3>
<p>Quer voltar para a página anterior? <a href=”pagina1.html”>Clique aqui</a>.</p></body></html>
Salve o arquivo no mesmo local onde você salvou o arquivo anterior com o nome “pagina2.html” (Sem aspas).
Pronto, agora basta abrir um dos arquivos criados com um clique duplo e clicar nos links para testar.
Nota: Esse exemplo só funciona se os dois arquivos estiverem no mesmo diretório.
Links Relativos e Absolutos
Ao incluir hyperlinks, dois fatores devem ser considerados: se eles estão definidos como relativos ou absolutos no salvamento e se o arquivo está ou não presente.
Diferença entre um Absoluto e um URL relativo
Um Absoluto versus um URL relativo
O Localizador Uniforme de Recursos (URL) é um endereço que especifica onde um determinado documento ou um recurso está localizado na World Wide Web (WWW). O melhor exemplo de URL é o endereço de uma página da Web, como // www. cnn. com /. O URL absoluto, também chamado de link absoluto, é um endereço de internet completo que leva um usuário ao diretório ou arquivo exato de um site. Um URL relativo ou um endereço de internet parcial, aponta para um diretório ou um arquivo relativo ao diretório atual ou a um arquivo.
O que é o URL absoluto?
URL absoluta, que fornece um endereço completo de uma página da Web ou um recurso na WWW, geralmente possui o formato abaixo.
protocolo: // hostname / other_details
Geralmente, o Hyper Text Transfer Protocol ( //) é usado como a seção de protocolo. Mas o protocolo também pode ser ftp: //, gopher: //, ou arquivo: //. O nome do host é o nome do computador que o recurso está residindo. Por exemplo, o nome do host do servidor web central da CNN é www. cnn. com. A seção other_details inclui informações sobre diretório e o nome do arquivo. O significado exato da seção other_details depende do protocolo e do host. O recurso que é apontado pelo URL absoluto é normalmente residido em um arquivo, mas também pode ser gerado na marcha.
O que é o URL relativo?Como mencionado anteriormente, um URL relativo aponta para um recurso relativo ao diretório ou arquivo atual. Um URL relativo pode assumir várias formas diferentes. Ao se referir a um arquivo que reside no mesmo diretório que a página atualmente referida, o URL relativo pode ser simples como o nome do próprio arquivo. Como exemplo, se você precisa criar um link em sua página inicial para um arquivo chamado my_name. html, que reside no mesmo diretório que a sua página inicial, você pode simplesmente usar o nome do arquivo da seguinte forma:
<< a href = "my_name. html "> Meu nome a > Se o arquivo que você precisa vincular estiver dentro de um subdiretório do diretório da página de referência, você deve incluir o nome do subdiretório eo nome do arquivo no parente URL. Por exemplo, se estamos tentando vincular um arquivo my_parents. html que está dentro de um diretório chamado pais, que realmente reside dentro do diretório que contém sua página inicial, o URL relativo parecerá o seguinte. << a href
= "pais / meus_parents. html "> Meus pais
a > Além disso, se você deseja se referir a um recurso que reside em um diretório que esteja em um nível superior na estrutura do diretório do que o diretório que contém o referencial página, você pode usar dois pontos consecutivos. Por exemplo, se você quiser se referir a um arquivo chamado casa.html que em um diretório acima de sua página inicial, você pode usar uma URL relativa da seguinte maneira. << a href = "... / home. Html "> Home a >
Diferença entre URL Absoluto e URL relativa
A principal diferença entre um URL absoluto e um URL relativo é que, um URL absoluto é um endereço completo que aponta para um arquivo ou um recurso, enquanto um URL relativo aponta para um arquivo relativo ao diretório ou arquivo atual. O URL absoluto contém mais informações do que um URL relativo, mas usar URLs relativas são muito mais fáceis, pois são mais curtos e mais portáteis. Mas URLs relativos só podem ser usados para se referir a links que residem no mesmo servidor que a página que os remete.
Caminhos absolutos:
Os caminhos absolutos fornecem o endereço ou URL completo do documento vinculado, incluindo: protocolo que está sendo utilizado, nome do domínio, e caminho do arquivo. Em geral, não devemos utilizar caminhos absolutos quando estamos nos referindo a arquivos que estão hospedados no mesmo servidor e no mesmo projeto (e que utilizam o mesmo domínio). Os caminhos absolutos são úteis para referenciar sites, ou arquivos que estão hospedados em outro servidor, ou que dizem respeito a outro projeto de um outro domínio. Por que eu recomendo que não seja utilizado para referenciar arquivos de um mesmo projeto/domínio? Muito simples. Caso você decida mover o seu projeto para um outro domínio ou servidor, ou mudar de nome, por exemplo, você terá que sair caçando nos arquivos de seu projeto todos os lugares que você utilizou caminhos absolutos, o que não é legal.
Exemplo de caminhos absolutos:http://www.geovanneborges.com.br/wp-content/uploads/2013/09/facebook1.png http://www.geovanneborges.com.br/caminhos-absolutos-relativos-e/ http://www.lojaninha.com.br/
Caminhos relativos:
Na maioria dos sites essa é a maneira mais adequada para representar caminhos a arquivos ou endereços que são locais, ou seja, encontram-se no mesmo domínio, hospedados fisicamente no mesmo servidor, no mesmo contexto de seu projeto. A ideia desses caminhos é omitir parte dos endereços absolutos, como protocolo utilizado e dominio, fornecendo apenas a parte diferente do caminho. Veja a figura abaixo, retirada do site da Adobe:
Para vincular conteúdo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html.
Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em cada barra (/), você desce um nível na hierarquia de pastas.
Para vincular de contents.html a index.html (na pasta pai, um nível acima de contents.html), use o caminho relativo ../index.html. Dois pontos e uma barra (../), move um nível acima na hierarquia de pastas.
Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo ../products/catalog.html. Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos.
Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os mesmos caminhos relativos entre si), você não precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover um arquivo individual que contém links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, você precisa atualizar esses links. (Se você mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizará todos os links relevantes automaticamente.) [trecho retirado do site da adobe]
Exemplo de caminhos relativos:uploads/2013/09/facebook1.png caminhos-absolutos-relativos-e/
Caminhos relativos à raiz do site:
Os caminhos relativos à raiz do site descrevem o caminho completo do arquivo, á partir da raiz do seu site. Um caminho relativo à raiz de um site vai sempre começar com um barra “/” na frente do endereço. Eu gosto desse método, pois essa é a melhor maneira de referenciar arquivos nos quais você move com frequência, mesmo estando hospedado no mesmo projeto. Desse modo, mesmo que eu tenha movido um arquivo html que referenciava muitas images com caminhos relativos, tudo continuará funcionando.
Exemplo de caminhos relativos à raiz:/wp-content/uploads/2013/09/facebook1.png /caminhos-absolutos-relativos-e/
Um Link é um elemento (texto ou imagem) que ao ser clicado leva o internauta para outra página. Ao passar o ponteiro do mouse sobre um link, o cursor fica no formato de uma mão branca.
A Tag <a> serve para criar links na Linguagem HTML. Normalmente, essa tag vem acompanhada do parâmetro href que serve informar qual o endereço o link deve apontar.
Para entender bem como criar links em HTML, vamos criar dois arquivos: “pagina1.html” e “pagina2.html”. Cada um terá um link apontado para o outro.
Para entender os exemplos abaixo, é importante ter um conhecimento mínimo da Linguagem HTML. Se você não tem, sugiro que antes de continuar, leia os posts Introdução ao HTML e Parâmetros das Tags HTML.
Digite o código abaixo em um editor de textos (o Bloco de Notas por exemplo):
<html>
<head>
<title>Criação de Links (Página 1)</title></head>
<body>
<h3>Página 1</h3>
<p><a href=”pagina2.html”>Clique aqui</a> para ir para a Página 2.</p></body></html>Salve o arquivo em seu computador com o nome “pagina1.html” (Sem aspas).
Ao abrir o arquivo com um clique duplo no ícone, teremos o seguinte resultado:
Se clicarmos no link, não iremos obter o resultado desejado. Isso ocorre pois ainda não existe o arquivo “pagina2.html” (Dizemos que é um Link Quebrado). Então, vamos criar o outro arquivo.
Abra uma nova janela do Editor de Textos e digite o código abaixo:
<html>
<head>
<title>Voltando para a página anterior</title></head>
<body>
<h3>Página 1</h3>
<p>Quer voltar para a página anterior? <a href=”pagina1.html”>Clique aqui</a>.</p></body></html>
Salve o arquivo no mesmo local onde você salvou o arquivo anterior com o nome “pagina2.html” (Sem aspas).
Pronto, agora basta abrir um dos arquivos criados com um clique duplo e clicar nos links para testar.
Nota: Esse exemplo só funciona se os dois arquivos estiverem no mesmo diretório.
Links Relativos e Absolutos
Ao incluir hyperlinks, dois fatores devem ser considerados: se eles estão definidos como relativos ou absolutos no salvamento e se o arquivo está ou não presente.
- Escolha Arquivo - Preferências - Symphony - Carregar e Salvar - Geral e especifique no campo Salvar URLs Relativas em se o Lotus® Symphony™ criar hyperlinks relativos ou absolutos. O link relativo é possível apenas quando o documento no qual você está trabalhando e o destino do link estão na mesma unidade.
- Você deve criar uma estrutura de diretório em seu disco rígido igual à existente no espaço da Web hospedado por seu provedor de Internet. Por exemplo, chame o diretório-raiz para a página inicial em seu disco rígido de "homepage". O arquivo inicial é "index.html", o caminho completo é "C:\homepage\index.html" (supondo que seja o sistema operacional Windows). A URL no servidor de seu provedor de Internet pode ser semelhante à seguinte: "http://www.myprovider.com/mypage/index.html". Com o endereçamento relativo, você indica o link relativo à localidade do documento de saída. Por exemplo, se você colocou todos os gráficos para sua página inicial em uma subpasta chamada "C:\homepage\images", precisará especificar o seguinte caminho para acessar o gráfico "picture.gif": "images\picture.gif". Este é o caminho relativo, começando da localidade do arquivo "index.html". No servidor do provedor, você coloca a figura na pasta "mypage/images"
- Um caminho absoluto como "C:\homepage\graphics\picture.gif" não funcionaria mais no servidor do provedor. Nem um servidor nem o computador de um leitor precisam ter uma unidade de disco rígido C: sistemas operacionais como o Unix ou MacOS não reconhecem letras da unidade e, mesmo que a pasta homepage\graphics existisse, sua figura não estaria disponível. É recomendável usar endereçamento relativo para links do arquivo.
- Um link para uma página da Web, por exemplo, "www.sun.com" ou "www.myprovider.com/mypage/index.html" é um link absoluto.
- O Lotus Symphony também reage de forma diferente, caso o arquivo referido no link exista e dependendo de onde está localizado. O Lotus Symphony verifica cada novo link e define um destino e um protocolo automaticamente.
- As seguintes regras se aplicam: Uma referência relativa ("graphic/picture.gif") é possível apenas quando os dois arquivos existem na mesma unidade. Se os arquivos estiverem em unidades diferentes em seu sistema de arquivos local, a referência absoluta seguirá o protocolo "file:" ("file:///data1/xyz/picture.gif"). Se os arquivos estiverem em servidores diferentes ou se o destino do link não estiver disponível, a referência absoluta usará o protocolo "http:" ("http://data2/abc/picture.gif").
- Certifique-se de organizar todos os arquivos para sua página inicial na mesma unidade que o arquivo inicial da página inicial. Dessa forma, o Lotus Symphony pode definir o protocolo e o destino para que a referência no servidor esteja sempre correta.
Diferença entre um Absoluto e um URL relativo
Um Absoluto versus um URL relativo
O Localizador Uniforme de Recursos (URL) é um endereço que especifica onde um determinado documento ou um recurso está localizado na World Wide Web (WWW). O melhor exemplo de URL é o endereço de uma página da Web, como // www. cnn. com /. O URL absoluto, também chamado de link absoluto, é um endereço de internet completo que leva um usuário ao diretório ou arquivo exato de um site. Um URL relativo ou um endereço de internet parcial, aponta para um diretório ou um arquivo relativo ao diretório atual ou a um arquivo.
O que é o URL absoluto?
URL absoluta, que fornece um endereço completo de uma página da Web ou um recurso na WWW, geralmente possui o formato abaixo.
protocolo: // hostname / other_details
Geralmente, o Hyper Text Transfer Protocol ( //) é usado como a seção de protocolo. Mas o protocolo também pode ser ftp: //, gopher: //, ou arquivo: //. O nome do host é o nome do computador que o recurso está residindo. Por exemplo, o nome do host do servidor web central da CNN é www. cnn. com. A seção other_details inclui informações sobre diretório e o nome do arquivo. O significado exato da seção other_details depende do protocolo e do host. O recurso que é apontado pelo URL absoluto é normalmente residido em um arquivo, mas também pode ser gerado na marcha.
O que é o URL relativo?Como mencionado anteriormente, um URL relativo aponta para um recurso relativo ao diretório ou arquivo atual. Um URL relativo pode assumir várias formas diferentes. Ao se referir a um arquivo que reside no mesmo diretório que a página atualmente referida, o URL relativo pode ser simples como o nome do próprio arquivo. Como exemplo, se você precisa criar um link em sua página inicial para um arquivo chamado my_name. html, que reside no mesmo diretório que a sua página inicial, você pode simplesmente usar o nome do arquivo da seguinte forma:
<< a href = "my_name. html "> Meu nome a > Se o arquivo que você precisa vincular estiver dentro de um subdiretório do diretório da página de referência, você deve incluir o nome do subdiretório eo nome do arquivo no parente URL. Por exemplo, se estamos tentando vincular um arquivo my_parents. html que está dentro de um diretório chamado pais, que realmente reside dentro do diretório que contém sua página inicial, o URL relativo parecerá o seguinte. << a href
= "pais / meus_parents. html "> Meus pais
a > Além disso, se você deseja se referir a um recurso que reside em um diretório que esteja em um nível superior na estrutura do diretório do que o diretório que contém o referencial página, você pode usar dois pontos consecutivos. Por exemplo, se você quiser se referir a um arquivo chamado casa.html que em um diretório acima de sua página inicial, você pode usar uma URL relativa da seguinte maneira. << a href = "... / home. Html "> Home a >
Diferença entre URL Absoluto e URL relativa
A principal diferença entre um URL absoluto e um URL relativo é que, um URL absoluto é um endereço completo que aponta para um arquivo ou um recurso, enquanto um URL relativo aponta para um arquivo relativo ao diretório ou arquivo atual. O URL absoluto contém mais informações do que um URL relativo, mas usar URLs relativas são muito mais fáceis, pois são mais curtos e mais portáteis. Mas URLs relativos só podem ser usados para se referir a links que residem no mesmo servidor que a página que os remete.
Caminhos absolutos:
Os caminhos absolutos fornecem o endereço ou URL completo do documento vinculado, incluindo: protocolo que está sendo utilizado, nome do domínio, e caminho do arquivo. Em geral, não devemos utilizar caminhos absolutos quando estamos nos referindo a arquivos que estão hospedados no mesmo servidor e no mesmo projeto (e que utilizam o mesmo domínio). Os caminhos absolutos são úteis para referenciar sites, ou arquivos que estão hospedados em outro servidor, ou que dizem respeito a outro projeto de um outro domínio. Por que eu recomendo que não seja utilizado para referenciar arquivos de um mesmo projeto/domínio? Muito simples. Caso você decida mover o seu projeto para um outro domínio ou servidor, ou mudar de nome, por exemplo, você terá que sair caçando nos arquivos de seu projeto todos os lugares que você utilizou caminhos absolutos, o que não é legal.
Exemplo de caminhos absolutos:http://www.geovanneborges.com.br/wp-content/uploads/2013/09/facebook1.png http://www.geovanneborges.com.br/caminhos-absolutos-relativos-e/ http://www.lojaninha.com.br/
Caminhos relativos:
Na maioria dos sites essa é a maneira mais adequada para representar caminhos a arquivos ou endereços que são locais, ou seja, encontram-se no mesmo domínio, hospedados fisicamente no mesmo servidor, no mesmo contexto de seu projeto. A ideia desses caminhos é omitir parte dos endereços absolutos, como protocolo utilizado e dominio, fornecendo apenas a parte diferente do caminho. Veja a figura abaixo, retirada do site da Adobe:
Para vincular conteúdo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html.
Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em cada barra (/), você desce um nível na hierarquia de pastas.
Para vincular de contents.html a index.html (na pasta pai, um nível acima de contents.html), use o caminho relativo ../index.html. Dois pontos e uma barra (../), move um nível acima na hierarquia de pastas.
Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo ../products/catalog.html. Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos.
Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os mesmos caminhos relativos entre si), você não precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover um arquivo individual que contém links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, você precisa atualizar esses links. (Se você mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizará todos os links relevantes automaticamente.) [trecho retirado do site da adobe]
Exemplo de caminhos relativos:uploads/2013/09/facebook1.png caminhos-absolutos-relativos-e/
Caminhos relativos à raiz do site:
Os caminhos relativos à raiz do site descrevem o caminho completo do arquivo, á partir da raiz do seu site. Um caminho relativo à raiz de um site vai sempre começar com um barra “/” na frente do endereço. Eu gosto desse método, pois essa é a melhor maneira de referenciar arquivos nos quais você move com frequência, mesmo estando hospedado no mesmo projeto. Desse modo, mesmo que eu tenha movido um arquivo html que referenciava muitas images com caminhos relativos, tudo continuará funcionando.
Exemplo de caminhos relativos à raiz:/wp-content/uploads/2013/09/facebook1.png /caminhos-absolutos-relativos-e/
/
Note a “/” sempre antes dos caminhos. Essa barra significa “volte para a raiz do site”.
Note a “/” sempre antes dos caminhos. Essa barra significa “volte para a raiz do site”.
