Curso de HTML - Aula 7 - Hyperlinks

[Autor: Gleison]
O que é um Hiperlink? Hiperlink nada mais é do que uma maneira de ligar uma página a outra, o conceiro é simples ao invés de colocarmos todas as informações em uma única página, podemos dividi-la em várias partes menores e ligarmos ela utilizando um Hiperlink.

Criando um Hiperlink
Para criarmos um Hiperlink devemos utilizar a tag , além do atributo HREF que irá indicar a pagina a ser aberta pelo link, opcionalmente pode se usar o atributo Target para indicar a forma com que a página será aberta.
Ex.:
Descrição do link
Neste caso o Href indica o site que será aberto e a descrição do link é o texto que o usuário irá ver na página
Usando trajetos de link
Ao criarmos um link podemos definir como esse link será aberto, para tal devemos adicionar o atributo Target ao link, o atributo Target pode conter os seguintes valores:

_top: Abre a página do link na mesma janela (janela complete)
_parent: Abre a página do link no frame pai
_self: Abre a página do link no mesmo frame
_blank: Abre a página do link em uma nova janela.
OBS.: no atributo Href você deve informar o link absoluto ou relativo da página.

Crie um novo documento com o nome ex6.html e digite os seguintes códigos






_blank”>Clique aqui



Salve a página e teste-a no navegador. Com este código ao clicar no link irá abrir o site Bing em outra janela do navegador.

---

USANDO TRAJETOS DE LINK PARA INDICAR O FRAME.

Até agora criamos um link simples que abre a página em uma janela diferente, entretanto quando utilizamos a estrutura com frames podemos definir como os link irão abrir nos frames.

Vamos ao exemplo prático. Abra o arquivo Ex6.html e modifique o código para que ele fique como o abaixo.





Clique aqui



Depois salve-a e feche-a.

Agora crie um novo arquivo com o nome EX7.html e coloque os códigos para criar a estrutura de frames de forma que a página seja exibida dividida ao meio, além disso, do lado esquerdo do frame deverá abrir a página Ex6.html, e do lado direito a página do google. Seu código deverá ficar semelhante ao abaixo:








</strong><strong>Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR></strong><strong><br />Aconselhamos que atualizasse seu navegador por uma versão mais recente.</strong><br />


Esse código irá abrir a página Ex6.html do lado esquerdo e a página do Google do lado direito. Porém ao clicarmos no link da página esquerda ele irá abrir o site do Bing do lado direito.


Vamos analisar o código dos frames.








</strong><strong>Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR></strong><strong><br />Aconselhamos que atualizasse seu navegador por uma versão mais recente.</strong><br />


Quando nós inserimos o código Name no código do frame nós demos um nome a ele, no caso a parte que abre a página Ex6.html ficou com o nome esquerdo, já a página do Google ficou com o nome direito.



Quando nós modificamos a página Ex6.html nós dissemos para o link que ele deveria ser aberto em uma página chamada direito.

Clique aqui

Como esse é o nome do frame direito, ao clicar no link ele abre a página do lado direito onde estava a página do Google.

---

CRIANDO LINK PARA E-MAIL

Da mesma forma que podemos criar links para sites também podemos criar links que direcionem diretamente para um endereço de e-mail. Para tal também utilizamos a tag entretanto devemos informar o e-mail precedido de mailto:. Veja o exemplo.
Clique aqui

---

CRIANDO LINK PARA E-MAIL COM ASSUNTO PRÉ-DEFINIDO
Para enviar-mos um E-mail com o assunto predefinido basta acrescentar o código ?subject:Assunto na frente do e-mail. Veja o exemplo
Clique aqui

O código acima cria um link que ao ser clicado abre o programa padrão de envio de e-mail já com o assunto preenchido.

---

CRIANDO LINK PARA A MESMA PÁGINA
É possível inserir um link dentro da mesma página, neste caso nós chamamos de ancoras. Ancoras nada mais são do que links predefinidos dentro de uma página um exemplo de ancoras são aqueles links que ao serem clicados voltam para o topo da pagina. Para que possamos usar esse tipo de link primeiro devemos criar a ancora para isso usamos a tag junto com o atributo name. Após isso devemos criar o link e inserir como endereço do link o nome da página precedido de # e depois o nome da ancora. Veja o exemplo abaixo.


O código acima cria a ancora.

Clique aqui para ir para to topo da página.

O código acima direciona o usuário para o topo da página.

Vamos ao exemplo prático. Crie um novo arquivo com o nome EX8.html e digite o código abaixo.

Esse é um treino de ancoras

Clique aqui para ir para o topo da página



Esse código irá criar uma página longa que ao clicar no link ela volta ao início da página

---

Perdeu alguma aula?, Quer saber qual é a proxima? Visite o Indice
Clique aqui Clique aqui para visitar o site oficial