HTML5 Para Crianças - Hiperligações

Introdução às Hiperligações

As hiperligações ou, como já deves ter ouvido antes, links, são usadas para ligar páginas do mesmo entre si mas também podem ser usadas para ligar a conteúdos dentro de uma mesma página. Podem ainda servir para ligar a páginas de outros sites, abrir aplicações, etc.

Os links são criados usando a tag <a>, na qual temos que colocar pelo menos um parâmetro - aquele que define a que página é que o link deve ligar - com o nome href. Para além deste parâmetro, temos que colocar o conteúdo da tag, que é o texto que vai ser mostrado ao utilizador. Parece difícil, mas é fácil. Vamos ver um exemplo.

Para acederes ao Google <a href="https://google.com">clica aqui</a>.

Vês como é simples? O conteúdo está no seu sítio habitual - entre as tags - e o valor do parâmetro é o endereço da página a que queremos ligar. Quer isto dizer que, à semelhança dos outros elementos, os links são introduzidos da seguinte forma:

Mas este elemento permite usar mais do que um parâmetro. Aliás, são vários que podes usar dependendo das tuas necessidades. Na tabela seguinte mostro-te quais são.

Ligação Externa

Como viste mais acima quando criámos um link para o Google, é muito simples criar uma ligação para outro site. Mas agora que já conheces outros parâmetros, conseguimos melhorar um pouco esse link. Já sabemos o endereço alvo https://google.com, sabemos que é um site externo e não uma página do nosso site, sabemos que título lhe podemos dar e, o melhor de tudo, sabemos que o utilizador pode aceder ao link sem perder rasto à nossa página se o fizermos abrir o link noutro separador ou janela.

Vamos lá então escrever este link mais completo.

Para acederes ao site do Google <a href="https://google.com" rel="external" title="Página inicial do Google" target="_blank">clica aqui</a>.

Vamos dissecar este link para perceberes melhor o que aqui fizémos:

1. href="https://google.com" - Com este parâmetro estamos a definir que o alvo/destino deste link é o endereço "https://google.com".
2. rel="external" - Com este parâmetro estamos a definir que este link é para uma página externa ao nosso site.
3. title="Página inicial do Google" Com este parâmetro estamos a definir um título para o link. Para um motor de busca é essencial saber que este link é a "Página inicial do Google" e não a página "clica aqui" que é o conteúdo do nosso elemento. Experimenta colocar o ponteiro do teu rato por cima do link e vê o que aparece.
4. target="_blank" - Com este parâmetro estamos a definir que queremos que esta ligação abra noutra janela ou separador. Clica no link e vê como ele abre noutro separador. A vantagem deste parâmetro é que assim o utilizador não perdeu o acesso à nossa página porque ainda a tem disponível no separador anterior.

Assim, se quisesses aconselhar este tutorial a um amigo teu, podias criar uma página a explicar-lhe o que é este tutorial, o que é que ele pode aprender, e no fim juntavas ao teu conteúdo uma hiperligação deste tipo:

<a 
  href=  "https://alexandrefigueiredo.com/html5-para-criancas/"
  title= "Tutorial de HTML para iniciantes"
  rel=   "external"
  target="_blank"
>
  HTML5 para Crianças
</a>

Isto foi só para te relembrar que os espaços a mais e as mudanças de linha não são processados pelo HTML. Por isso, o que eu escrevi acima é igual a isto:

<a href="https://alexandrefigueiredo.com/html5-para-criancas/" title="Tutorial de HTML para iniciantes" rel="external" target="_blank">HTML5 para Crianças</a>

Ligação Dentro da Mesma Página

As ligações dentro da mesma página são úteis para saltar para tags dessa mesma página. Eu estou a usar várias nesta para poder saltar de título para título.

Para usares este tipo de link tens que criar um parâmetro, chamado id, à tag para onde queres que o link aponte. Depois, basta referires esse id no href do link. Parece difícil mas vou-te mostrar como é fácil com o exemplo desta página.

Nesta página tenho 5 títulos de nível h2. A todos eles, atribuí, um id diferente como podes ver aqui:

<h2 id="introducao">Introdução às Hiperligações</h2>
  ...
<h2 id="pag-ext">Ligação Externa</h2>
  ...
<h2 id="mesma-pag">Ligação Dentro da Mesma Página</h2>
  ...
<h2 id="mesmo-site">Ligação para uma Página do Mesmo Site</h2>
  ...
<h2 id="email">Ligação para um Endereço de Email</h2>
  ...

As reticências representam os parágrafos todos que estão entre os títulos e que, por razões de poupança de espaço e para manter o código limpo, não incluí neste exemplo.

Para criar as ligações internas que me levam directamente a estes elementos h2 basta usar os ids dos títulos como valores do parâmetro href, precedidos do símbolo #:

<a href="#introducao">Introdução às Hiperligações</a><br>
<a href="#pag-ext">Ligação Externa</a><br>
<a href="#mesma-pag">Ligação Dentro da Mesma Página</a><br>
<a href="#mesmo-site">Ligação para uma Página do Mesmo Site</a><br>
<a href="#email">Ligação para um Endereço de Email</a>

Repara no resultado deste código e experimenta clicar nos links do resultado para veres o que acontece.

Vou-te dar mais um exemplo de uma ligação dentro da mesma página que dá muito jeito. Experimenta descer até ao fim desta página e, no rodapé dela, procura um link que diz "voltar ao topo da página". Está mesmo na última linha. Clica nele para veres o que faz, apesar de já saberes o que vai acontecer. :-)

Ligação para uma Página do Mesmo Site

Ali em cima, na tabela em que descrevi os parâmetros dos links, disse-te que mais à frente te ia falar em endereços absolutos e endereços relativos. Chegou essa altura.

Para criares ligações de uma página para outra dentro do teu site, podes usar dois tipos de endereços. Vamos ver a diferença entre eles.

Endereços Absolutos

Endereços absolutos - são atalhos que têm o endereço completo da localização do ficheiro no computador ou servidor.

No caso desta página que estás a ler agora, como podes ver na barra de endereços do teu navegador, o endereço absoluto é https://alexandrefigueiredo.com/html5-para-criancas/hiperligacoes.php. Este é o endereço completo ou absoluto do ficheiro hiperligacoes.php. Ou seja, este ficheiro está numa pasta chamada "html5-para-criancas" e essa pasta está na pasta raíz do servidor.

No caso do teu computador, vamos imaginar que tens as tuas páginas pagina.html e pagina2.html dentro de uma pasta "sites" que, por sua vez, está dentro do disco "C", assim:

Disco C:
    ↳ sites
        ↳ pagina.html
        ↳ pagina2.html

Os endereços absolutos para os teus ficheiros, que podes usar para acederes a eles no teu navegador, são: C:\sites\pagina.html
C:\sites\pagina2.html

Atendendo a isto, aposto que chegaste à conclusão de que já sabes como criar ligações com endereços absolutos. No fundo, é o tipo de endereços que usámos até agora em exemplos anteriores.

Vamos experimentar criar ligações entre as nossas duas páginas?

No gestor de ficheiros do teu computador, abre a pasta onde colocaste os ficheiros pagina.html e pagina2.html. Espero que tenhas colocado os dois na mesma pasta. Se o teu sistema operativo é Windows, clica agora com o botão direito do rato em cima de um deles e escolhe a opção "Propriedades". Nessa janela que abriste, vê qual é o caminho absoluto para esse ficheiro.

No meu caso, é C:\sites. No teu caso vai ser outro caminho, por isso a seguir tens que usar o teu.

Copia esse caminho que te leva aos teus ficheiros, e coloca-o no teu ficheiro pagina.html a seguir ao último parágrafo que lá tens. No meu caso fica assim:

<body>
  <h1>Olá!</h1>
  ...
  <p>C:\sites</p>
</body>

Agora, coloca o nome do teu ficheiro a seguir a esse caminho. Não te esqueças de colocar uma barra \ a separar o nome da última pasta e o nome do ficheiro.

<body>
  <h1>Olá!</h1>
  ...
  <p>C:\sites\pagina.html</p>
</body>

Este é o caminho ou endereço absoluto para o teu ficheiro pagina.html. Experimenta copiá-lo e colá-lo na barra de endereços do teu navegador. Se a tua página carregou no browser, fizeste tudo bem.

Agora que já descobrimos o endereço absoluto das nossas páginas, vamos colocar um link na primeira página que aponta para a segunda, e vice-versa. Ou seja, vamos abrir o ficheiro pagina.html no editor de texto e colocar lá, antes da tag que fecha o </body> o link que abre a pagina2.html desta maneira. NOTA que tens que usar o teu endereço absoluto e não o meu, senão não funciona! Não te esqueças também que tens que ter o <!DOCTYPE html> e o resto do código que aprendemos no primeiro capítulo. Eu estou só a colocar partes do conteúdo do <body> porque são as únicas partes que estamos a alterar.

<body>
  <h1>Olá!</h1>
  ...
  <p><a href="C:\sites\pagina2.html">Clica aqui</a> para acederes à minha segunda página2.</p>
</body>

Agora faz o mesmo na pagina2.html, mas não te esqueças de, na hiperligação, trocares o nome do ficheiro para pagina.html.

<body>
  <h1>A Minha Segunda Página</h1>
  ...
  <p><a href="C:\sites\pagina.html">Clica aqui</a> para acederes à minha primeira página.</p>
</body>

Grava as alterações em ambos os ficheiros, abre um deles no teu navegador, e experimenta clicar nos links.

Espero que o teu resultado tenha sido parecido com este senão tens que voltar atrás e tentar perceber o que é que fizeste mal. Tenho a certeza que, com um bocadinho de paciência, vais descobrir o que é que está errado. Se mesmo assim não conseguires, podes contactar-me que eu ajudo-te a perceber o que está errado. Não te esqueças de colocar na mensagem o código que usaste.

Endereços Relativos

Ao contrário dos endereços absolutos, em que colocas no link o caminho completo para o ficheiro, nos endereços relativos colocas o caminho do ficheiro a que queres ligar, relativamente ao ficheiro em que te encontras.

Para te ajudar a perceber melhor o que referi, imagina que tens a seguinte estrutura no teu computador:

Disco C:
    ↳ sites
            ↳ imagens
                    ↳ fortnite.jpg
            ↳ pagina.html
            ↳ pagina2.html

No disco C: tens uma pasta "sites". Dentro da pasta "sites", tens outra pasta "imagens" e os dois ficheiros html. Dentro da pasta "imagens" tens uma imagem do Fortnite.

Agora vamos imaginar que na tua primeira página, queres criar 2 ligações: uma para a tua segunda página e outra para a imagem do fortnite. Se fosse com endereços absolutos, era fácil, já dominas este tipo de endereços e por isso sabes que são os seguintes:

C:\sites\pagina2.html
C:\sites\imagens\fortnite.jpg

Os relativos são igualmente simples e até mais curtos porque se escrevem apenas relativamente à página em que estás a criar os links, ou seja na pagina.html. Quer isto dizer que, como o ficheiro pagina2.html está ao mesmo nível que a tua primeira página, o endereço relativo é apenas o nome do ficheiro a que queres ligar, ou seja, o endereço relativo é escrito assim no link:

Já a imagem está dentro de outra pasta, mas sabes que essa pasta está no mesmo nível que a tua pagina.html. Por isso é fácil. Tal como no caso anterior, como a pasta está ao mesmo nível, o endereço relativo da imagem, relativamente à tua primeira página começa com o nome da pasta "imagens", assim:

Para finalizar esta parte dos endereços relativos, que já vai longa, vamos abrir os nossos dois ficheiros no editor de texto e, abaixo dos links absolutos que criámos antes, vamos criar também os nossos links relativos e ver como fazem exactamente a mesma coisa.

pagina.html

<body>
  <h1>Olá!</h1>
  ...
  <p><a href="C:\sites\pagina2.html">Clica aqui</a> para acederes à minha segunda página com um endereço absoluto.</p>
  <p><a href="pagina2.html">Clica aqui</a> para acederes à minha segunda página com um endereço relativo.</p>
</body>

pagina2.html

<body>
  <h1>A Minha Segunda Página</h1>
  ...
  <p><a href="C:\sites\pagina.html">Clica aqui</a> para acederes à minha primeira página com um endereço absoluto.</p>
  <p><a href="pagina.html">Clica aqui</a> para acederes à minha primeira página com um endereço relativo.</p>
</body>

Conseguiste? Parabéns! Agora já te deves estar a começar a aperceber que o HTML não é nenhum bicho de 7 cabeças e que até é relativamente simples. Vamos então terminar este capítulo com uma explicação rápida sobre como se cria uma ligação para um endereço de email.

Ligação para um Endereço de Email

Se quiseres permitir que os teus leitores te contactem, podes criar um link que abre o cliente de emails deles e coloca automaticamente o teu endereço de email no campo do destinatório.

A sintaxe que deves usar é a seguinte:

<a href="mailto:[email protected]">Contacta-me</a>

Repara que a única coisa que muda é o valor do atributo href, ou seja, em vez de um endereço, colocas "mailto:" seguido do teu endereço de email.

Abre o ficheiro pagina.html no teu editor de texto e, logo antes da tag que fecha o body, cria o link com o teu endereço de email. Depois abre a página no navegador, e experimenta clicar nele.

<body>
  <h1>Olá!</h1>
  ...
  <a href="mailto:[email protected]">Contacta-me</a>
</body>

Espero que tenhas aprendido a criar hiperligações e que, acima de tudo, tenhas gostado deste capítulo que te abriu as portas para novos ficheiros. :-)

Não acredito que não tenhas conseguido acompanhar mas, se por alguma razão isso aconteceu, deixo aqui os links para que possas descarregar os dois ficheiros que já criámos desde o início do tutorial.

• pagina.html
• pagina2.html

O que se segue? Vamos aprender a fazer listas iguais a esta que eu criei agora para colocar os links para os dois ficheiros que criámos?
Vamos a isso. Clica aí em baixo no botão que diz "HTML5 para Crianças - Listas" para ires para o Capítulo 4 - Listas deste tutorial.