Arena RPG Maker
Olá, visitante!
Seja bem-vindo ao fórum Arena RPG Maker, caso queira aprender sobre criação de jogos, está no fórum certo. Esperamos que possa aprender tanto quanto possa nos ensinar aqui.

Atenciosamente,
Equipe Arena RPG Maker.
Arena RPG Maker

Estamos de volta o/ ... Ou não.Eu amo a -Dark
Doações para o fórum abertas, clique aqui e saiba mais.
Últimos assuntos
» Pokémon Genesis Online! (PGO)
Qua 05 Jul 2017, 17:08 por Lexar

» Tileset Converter to MV
Sex 12 Maio 2017, 13:07 por Douggi

» [Dúvida] Como tirar a porcentagem de esquiva
Ter 09 Maio 2017, 22:15 por Neil Flame Runner

» Pack Resources, Sprites e etc
Qua 23 Dez 2015, 09:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Ter 22 Dez 2015, 08:14 por ::KimMax::

» Fantasy Art Online
Dom 18 Out 2015, 16:42 por daviih123

» Você vai ter medo do Nerve gear?
Sab 25 Jul 2015, 16:02 por Kirito-kun

» O Barato é louco
Sab 27 Jun 2015, 15:26 por Halt

» Download RPG Maker 2000 + RTP em português
Qui 21 Maio 2015, 19:28 por Wismael

» Divulgando meu grupo e página do Facebook
Ter 19 Maio 2015, 13:06 por Halt


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1Tutorial Curso de HTML - Aula 7 - Hyperlinks em Qui 20 Dez 2012, 17:31

Halt

avatar
Administrador
Administrador
[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 <a></a>, 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.:
<a href=”Site a ser aberto”>Descrição do link</a>
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

<html>
<head>
<title>Pagina de Links</title>
</head>
<body>
<a href=”http://www.bing.com.br” target=”_blank”>
Clique aqui</a>
</body>
</html>

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.
<html>
<head>
<title>Exercicio 6</title>
</head>
<body>
<a href=”http://www.bing.com.br” target=”direito”>
Clique aqui</a>
</body>
</html>

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:

<HTML>
<head>
<title>Exercício 7</title>
</head>
<frameset cols="50%,50%" frameborder=”no”>
<frame src=”ex6.html” name=”esquerdo” noresize=”noresize” scrolling=”yes”>
<frame src=”http://www.google.com” name=”direito”>
<body><noframes>Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR>
Aconselhamos que atualizasse seu navegador por uma versão mais recente.

</noframes>
</body></HTML>

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.

<HTML>
<head>
<title>Exercício 7</title>
</head>
<frameset cols="50%,50%" frameborder=”no”>
<frame src=”ex6.html” name=”esquerdo” noresize=”noresize” scrolling=”yes”>
<frame src=”http://www.google.com” name=”direito”>
<body><noframes>Esta pagina usa o recurso de frames, porém seu navegador não suporta este recurso.<BR>
Aconselhamos que atualizasse seu navegador por uma versão mais recente.

</noframes>
</body></HTML>

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.

<frame src=”ex6.html” name=”esquerdo” noresize=”noresize” scrolling=”yes”>
<frame src=”http://www.google.com” name=”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.

<a href=”http://www.bing.com.br” target=”direito”>Clique aqui</a>

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 <a></a> entretanto devemos informar o e-mail precedido de mailto:. Veja o exemplo.
<a href=”mailto:email@email.com”>Clique aqui</a>




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
<a href=”mailto:email@email.com?subject=Assunto”>Clique aqui</a>

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 <a></a> 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.
<a name=”topo”></a>

O código acima cria a ancora.

<a href=”pagina.html#topo”>Clique aqui para ir para to topo da página.</a>

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.

<HTML>
<head>
<title>Exercício 8</title>
</head>
<body>
<a name=”topo”><h6>Esse é um treino de ancoras</h6></a>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<p>
<a href EX8.html#topo>Clique aqui para ir para o topo da página</a>
</body>
</HTML>

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


__________________________________________

Ei Convidado, sim você mesmo! Ajude o fórum à crescer postando coisas úteis, dê sugestões para melhorar-mos e divulgue o fórum.

Step inside, see the devil in I.

Gifts-
Fantasy - Fantasy - Fantasy - ~Razor - Darkmel

Zerei a internet
Ver perfil do usuário http://arenarpgmaker.eclipserpg.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum