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
Julho 2018
SegTerQuaQuiSexSabDom
      1
2345678
9101112131415
16171819202122
23242526272829
3031     

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