Projetista Digital

Olá Pessoal,

Conforme adiantado no último post, hoje falaremos sobre links e atributos XHTML. Até agora criamos documentos XHTML com títulos, parágrafos, estilos em textos, listas etc. Contudo, esses documentos não estão ligados entre si e por esse motivo não podemos navegar entre eles. Não é exagero dizer que os links foram a base de toda a web. Com eles podemos interconectar todas as nossas páginas, criando sites tais como conhecemos. E mais do que interligar documentos, os links hoje possuem valor semântico, são critérios extremamente relevantes para posicionamento de sites em buscadores etc. Aprender a explorar ao máximo possível o uso de links é indispensável para essa nossa área, portanto estudem com atenção e afinco.

Criando Links

Podemos converter vários elementos HTML em links: textos, imagens, áreas etc. Esses links podem apontar para dentro da própria página (são os links âncoras) ou para documentos externos. Links para páginas externas ao próprio documento podem apontar para páginas fora do servidor, onde o site está hospedado, ou dentro do próprio servidor. Podemos também linkar outros arquivos de outros formatos, tais como: DOC, PDF, MP3, imagens em geral, XLS etc.

Para criar um link usaremos a tag <a></a>. Veja como fica o código abaixo:

1
2
3

<h4>Criando um link</h4>
 
<a>Link</a>

Ok, acabamos de marcar um link, porém como definir a página de destino, ou seja, a página para onde o link me levará, assim que eu clicar nele? Para adicionar essa funcionalidade à tag <a>, será necessário utilizar…

Atributos HTML, Atributos HREF e TARGET

Os atributos HTML são características de uma tag que adicionam funcionalidades a ela. Por exemplo: não basta criar um link, é preciso definir uma página destino. Como já vimos, a tag usada para linkar é <a></a>, para adicionar à essa tag a página de destino do link, usaremos um atributo dessa tag, chamado HREF. Todo atributo XHTML segue as seguintes regras:

1. É escrito em letras minúsculas;
2. É escrito dentro da tag de abertura;
3. Respeita a seguinte sintaxe: nome_do_atributo=”valor_do_atributo”.

Vejamos como ficaria nosso link, usando o atributo HREF:

1
2
3
4
5

<h4>Link para uma página externa</h4>
<a href=”http://www.google.com.br”>Link</a>
 
<h4>Link para uma página dentro do próprio servidor</h4>
<a href=”pagina.html”>Link Interno</a>

Resultado:

Link para uma página externa

Link

Link para uma página dentro do próprio servidor
Link Interno

Perceberam que páginas dentro do nosso próprio servidor não precisam do caminho completo (http://www.dominio.com.br/etc…)? Basta apenas declarar o nome do arquivo, e sua hierarquia de pastas (quando necessário). O tema caminho de arquivos será tratado mais a frente.

Outra funcionalidade importante sobre links: escolher em qual janela o link será aberto. Temos duas opções: abrir links na mesma janela, obrigando o usuário a utilizar o botão VOLTAR, do navegador, para retornar a nossa página; abrir links em uma nova janela. Por padrão os links abrem na mesma janela, para forçar a abertura de links em uma nova janela precisaremos do atributo TARGET. Veja como funciona:

1 2 3 4 5

<h4>Link abrindo na mesma janela</h4> <a href=”pagina.html”>Link</a>   <h4>Link abrindo em uma nova janela</h4> <a href=”pagina.html” target=”_blank”>Link</a>

Basta adicionar o atributo TARGET com o valor “_blank” e o link abrirá em uma nova janela. Outra coisa importante a ser observado: se preciso utilizar mais de um atributo por tag, basta separá-los por um espaço em branco e escrevê-los normalmente, seguindo as regras expostas acima. Nesse exemplo utilizamos os atributo HREF e TARGET simultaneamente, mas da mesma forma podemos ter dez atributos (exagero meu em uma mesma tag, a lógica da sintaxe é a mesma.

Links âncoras

Vimos como criar links para documentos externos (dentro e fora do nosso servidor), agora iremos criar links para dentro do próprio documento. Imagine uma página enorme, cheia de conteúdo dividido em seções e subseções: não seria útil criar um índice para o usuário avançar pela página sem precisar acionar a barra de rolagem indefinidamente? Facilitaria, e muito, a vida do internauta. Para isso criaremos links âncoras, ou seja, links que apontem para o próprio documento.

Para criar uma âncora precisamos de dois fatores:

1. Definir um pedaço da página para ser o destino do link;
2. Criar um link apontando para o pedaço da página selecionado como destino.

Para definir um trecho da página como destino do link âncora, será preciso envolvê-lo com as tags <a></a> acrescentando o atributo NAME. Veja como funciona:

1
2

<h4><a name=”ancora1”>Título 1</a></h4>
<p>Parágrafo 1...</p>

Bem, definimos um parágrafo de nossa página como uma âncora, agora é preciso criar um link apontando para essa âncora. Para isso basta criar um link normalmente, e no caminho da página de destino colocar o seguinte valor: #nome_da_ancora. Veja como ficará o nosso exemplo:

1
2
3
4
5
6

<h4><a name=”topo”>Topo</a></h4>
<a href=”#ancora1”>Parágrafo 1</>
 
<h4><a name=”ancora1”>Título 1</a></h4>
<p>Parágrafo 1...</p>
<a href=”#topo”>Voltar para o topo</a>

E se eu quiser criar um link para uma âncora que se encontra em outra página?

Simples! Basta criar um link como o especificado abaixo:

1

<a href=”pagina.html#nome_ancora”>Link para âncora em outra página</a>

Viram só, como é fácil trabalhar com links e âncoras? Agora é só praticar e criar suas primeiras páginas web linkadas entre si. Aproveitem e estudem bastante. No próximo tutorial falaremos sobre como inserir imagens em nossas páginas.

Forte abraço,
Diego.