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
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
» Ainda temos gente aqui?
Curso de HTML - Aula 7 - Hyperlinks EmptyQui 25 Nov 2021, 14:04 por Halt

» [Dúvida] Como tirar a porcentagem de esquiva
Curso de HTML - Aula 7 - Hyperlinks EmptySex 19 Nov 2021, 17:14 por Halt

» Pokémon Genesis Online! (PGO)
Curso de HTML - Aula 7 - Hyperlinks EmptyQua 05 Jul 2017, 18:08 por Lexar

» Tileset Converter to MV
Curso de HTML - Aula 7 - Hyperlinks EmptySex 12 maio 2017, 14:07 por Douggi

» Pack Resources, Sprites e etc
Curso de HTML - Aula 7 - Hyperlinks EmptyQua 23 Dez 2015, 12:30 por raydengv

» Download RPG Maker 2003 + RTP em português
Curso de HTML - Aula 7 - Hyperlinks EmptyTer 22 Dez 2015, 11:14 por ::KimMax::

» Fantasy Art Online
Curso de HTML - Aula 7 - Hyperlinks EmptyDom 18 Out 2015, 18:42 por daviih123

» Você vai ter medo do Nerve gear?
Curso de HTML - Aula 7 - Hyperlinks EmptySáb 25 Jul 2015, 17:02 por Kirito-kun

» O Barato é louco
Curso de HTML - Aula 7 - Hyperlinks EmptySáb 27 Jun 2015, 16:26 por Halt

» Download RPG Maker 2000 + RTP em português
Curso de HTML - Aula 7 - Hyperlinks EmptyQui 21 maio 2015, 20:28 por Wismael


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

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

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

Halt

Halt
Administrador
Administrador
[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 <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

https://arenarpgmaker.forumeiros.com

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

Permissões neste sub-fórum
Não podes responder a tópicos