Aldeia RPG

Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Suporte ao desenvolvimento de jogos


    Curso de HTML - Aula 7 - Hyperlinks

    Lief
    Lief
    Desenvolvedor
    Desenvolvedor


    Mensagens : 833
    Créditos : 50

    Curso de HTML - Aula 7 - Hyperlinks Empty Curso de HTML - Aula 7 - Hyperlinks

    Mensagem por Lief Ter Dez 25, 2012 8:20 pm

    [Autor: Gleison]
    Curso de HTML - Aula 7 - Hyperlinks Aulcj0



    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




    </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.



    Exercício 7




    </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.



    Exercício 8


    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


    _________________
    A cidade tem medo de mim. Eu vi sua verdadeira face. As ruas são sarjetas dilatadas cheias de sangue e, quando os bueiros transbordarem, todos os vermes vão se afogar. A imundice de todo sexo e matanças vai espumar até a cintura e as putas e os políticos vão olhar para cima gritando "salve-nos"... e eu vou olhar para baixo e dizer "não".

      Data/hora atual: Qui Mar 28, 2024 9:52 am