Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Curso de HTML - Aula 7 - Hyperlinks
Aldeia RPG :: Centro de aprendizagem :: Programação :: Web
Página 1 de 1
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
Pagina de Links
_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.
Exercicio 6
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:
Exercício 7
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.
Exercício 8
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:
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
Clique aqui Clique aqui para visitar o site oficial
Tópicos semelhantes
» Curso de HTML - Aula 2 – HTML X Linguagens Web Dinâmicas
» Curso de HTML - Aula 1 - Conhecendo o HTML
» Curso de HTML - Aula 6 - Frames
» Curso de HTML - Aula 8 - Tabelas - Final
» Curso de HTML - Aula 5 - Inserindo Imagens
» Curso de HTML - Aula 1 - Conhecendo o HTML
» Curso de HTML - Aula 6 - Frames
» Curso de HTML - Aula 8 - Tabelas - Final
» Curso de HTML - Aula 5 - Inserindo Imagens
Aldeia RPG :: Centro de aprendizagem :: Programação :: Web
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos