Planeta Tutorial
Planeta Tutorial

Ola Visitante, Seja bem vindo(a) ao Planeta Tutorial, esta-mos em construção em breve estaremos prontos para lhe atender e fornecer-lhe tutoriais e dicas diversas para você aprimorar os seus conhecimentos e passar para outros. esperamos que você goste de nosso conteudo e se torne um Membro para poder participar ainda mais de nossas atividades. Vale também ressaltar que, Para você ter acesso aos links por ai , é necessário ser registrado, então se registre .
Se já tem uma conta no forúm,
Logue-se .
Painel de Usuario
Convidado
Mensagens: 0


Alterar
Ver
Tópicos e mensagens
Menu
Redes Sociais
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Translate
Últimos assuntos
» Regras da Área de pedidos
Ter 28 Jun 2011 - 17:31 por Admin

» Efeito Glow
Seg 27 Jun 2011 - 17:39 por Admin

» Efeito Brilho Suave nas fotos
Seg 27 Jun 2011 - 17:33 por Admin

» Arte geométrica com Photoshop
Seg 27 Jun 2011 - 17:31 por Admin

» Efeito Varinha Mágica no Photoshop
Sab 25 Jun 2011 - 15:20 por konan

» Montagem multicolorida com tintas e efeitos diversos
Sab 25 Jun 2011 - 15:18 por konan

» Linhas luminescentes no Photoshop
Sab 25 Jun 2011 - 15:17 por konan

» Segredos sobre design de site
Sex 24 Jun 2011 - 23:00 por konan

» Hardware para iniciantes, parte 5
Sex 24 Jun 2011 - 22:41 por konan

Estatísticas
Temos 26 usuários registrados
O último usuário registrado atende pelo nome de kaironborges

Os nossos membros postaram um total de 144 mensagens em 142 assuntos
Radio Jovem Pan
Relogio
Setembro 2018
SegTerQuaQuiSexSabDom
     12
3456789
10111213141516
17181920212223
24252627282930

Calendário Calendário

Visitou

Lição 8: Links

Ir em baixo

Tutoriais Lição 8: Links

Mensagem por luan em Qui 16 Jun 2011 - 12:25

Nesta lição você aprenderá como construir links entre páginas.
O que eu preciso para construir um link?

Para construir um link você usa o que tem usado até agora para codificar HTML: uma tag. Uma simples e pequenina tag com um elemento e um atributo é suficiente para você construir links para onde quiser. A seguir um exemplo de link para o site HTML.net:
Exemplo 1:
Código:

<a href="http://www.html.net/">Aqui um link para HTML.net</a>


Será renderizado no navegador assim:
Aqui um link para HTML.net

O elemento a refere-se a "anchor" - âncora . O atribuito href é abreviação para "hypertext reference" - referência a hypertexto - e especifica o destino do link - que normalmente é um endereço na Internet ou um arquivo.

No exemplo acima o atributo href tem o valor "http://www.html.net", que é o endereço completo do site HTML.net e é chamado de URL (Uniform Resource Locator). Notar que "http://" deve sempre ser incluido nas URLs. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como link. Lembre-se de fechar a tag com um .
Como são os links entre minhas próprias páginas?

Se você quer construir links entre páginas de um mesmo website você não precisa escrever o endereço completo de cada página (URL). Por exemplo, se você tem duas páginas (vamos chamá-las de pagina1.htm e pagina2.htm) e salvou as duas em um mesmo diretório você constrói um link de uma para a outra usando somente o nome do arquivo no link. Nestas condições, um link da página1.htm para a pagina2.htm é como mostrado abaixo:
Exemplo 2:
Código:

<a href="page2.htm">Aqui um link para a pagina 2</a>


Se a pagina2 for colocada em um subdiretório (chamado de "subdiretorio"), o link é como mostrado abaixo:
Exemplo 3:
Código:

<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>


Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 é como mostrado a seguir:
Exemplo 4:
[
Código:

<a href="../pagina1.htm">Aqui um link para a pagina 1</a>


"../" aponta para o diretório a um nível acima do arquivo onde foi feito o link. Seguindo o mesmo princípio você pode apontar para dois (ou mais) níveis acima, escrevendo "../../".

Você entendeu? Como alternativa você pode usar sempre o endereço completo do arquivo (URL).
Como são os links dentro de uma mesma página?

Você pode criar links internos, dentro da própria página - por exemplo, uma tabela de conteúdos ou índice com links para cada um dos capítulos em uma página. Tudo o que você precisa é usar o atributo id e o símbolo "#".

Use o atributo id para marcar o elemento que é o destino do link. Por exemplo:

Código:

<h1 id="heading1">Cabeçalho 1</h1>


Você agora pode criar um link que leve àquele elemento usando o símbolo "#" no atributo do link. O símbolo "#" informa ao navegador para ficar na mesma página que está. O símbolo "#" deve ser seguido pelo valor atribuido a id para onde o link vai. Por exemplo:

Código:

<a href="#heading1">Link para o cabeçalho 1</a>


Tudo fica claro com um exemplo:
Exemplo 5:

Código:

<html>
 
  <head>
  </head>
 
  <body>
 
    <p><a href="#heading1">Link para cabeçalho 1</a></p>
    <p><a href="#heading2">Link para cabeçalho 2</a></p>
 
    <h1 id="heading1">Cabeçalho 1</h1>
    <p>Texto texto texto texto</p>
 
    <h1 id="heading2">Cabeçalho 2</h1>
    <p>Texto texto texto texto</p>
 
  </body>
 
</html>


Será renderizado no navegador assim (clique nos dois links):

Link para cabeçalho 1

Link para cabeçalho 2
Cabeçalho 1

Texto texto texto texto
Cabeçalho 2

Texto texto texto texto

(Nota: O nome de um atributo id deve começar com uma letra)
Posso criar link para mais alguma coisa?

Você pode criar link para um endereço de e-mail. Isto é feito de modo semelhante aos links para documentos.
Exemplo 6:

Código:

<a href="mailto:nobody@html.net">Enviar e-mail para nobody em HTML.net</a>


Será renderizado no navegador assim:

Enviar e-mail para nobody em HTML.net

A única diferença é que no lugar do endereço do documento você escreve mailto: seguido pelo endereço de e-mail. Quando o link é clicado o programa de e-mail padrão do usuário é aberto com o endereço do link já digitado na linha para destinatário. Mas, atenção, isto só irá funcionar se o usuário tiver um programa de e-mail instalado na sua máquina. Faça uma experiência com este tipo de link clicando no exemplo acima.
Existem outros atributos que eu deva conhecer?

Par criar links você sempre usa o atributo href. Adicionalmente você pode usar um title (título) para seu link:
Exemplo 7:

Código:

<a href="http://www.html.net/" title="Visite HTML.net e aprenda HTML">HTML.net</a>


Será renderizado no navegador assim:

HTML.net

O atributo title é usado para fornecer uma breve descrição do link. Se você - sem clicar no link - colocar o cursor do mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e aprenda HTML".
avatar
luan
Newbie
Newbie

Respeito às regras : Respeito as regras 100%

Mensagens : 18
Reputação : 0
Data de inscrição : 14/06/2011
Idade : 23

Voltar ao Topo Ir em baixo

Voltar ao Topo


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