Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Principal »  » Tutoriais » Tutoriais sobre programação

#1
 D'Leandro™

avatar
Fundador
Olá, 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 URL's. A frase "Aqui um link para HTML.net" é o texto mostrado no navegador como link.
Lembre-se de fechar a tag com um </a>.

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

Ver perfil do usuário