Link

Não há nada mais fácil em HTML do que inserir um link na sua página. Utilize as tags <a> </a> acrescentando os atributos "href" e "target".

<a href="local" target="alvo"> âncora </a>

- âncora: palavra ou imagem que ira responder ao clique do visitante e abrir o link.
- local: qual página será aberta quando o link for clicado.
- alvo: em que janela do navegador a página será aberta.
       _blank: abre uma janela de navegador nova
       _self: abre na mesma janela
       (se você não indica o target ele também abre na mesma janela)

Abra o bloco de notas e digite o código abaixo.

<html>
<head>
<!—título da home page -->
<title>Trabalhando com links</title>
</head>
<body>
 <a href="primeira_pagina.htm"> link para nossa primeira página </a> 
 <a href="primeira_pagina.htm"> <img src="figuras/figura_morango.jpg"> </a> 
 <a href="http://www.emblema.art.br"> <img src="figura_ceu.jpg"> </a> 
</body>
</html>

Caso você ainda não tenha sua "primeira_pagina.htm"... Clique aqui!
Não possui nenhuma imagem? Aqui tem estas todas!

Salve seu arquivo como "tag_a.htm" na nossa pasta "html4blog". Visualize sua página no navegador.

Repare que em nenhum destes links eu coloquei o atributo "taeget", portanto todos abrem seus links na mesma janela. Vamos alterar apenas o link externo para abrir em uma janela nova de navegador.

Altere apenas esta linha do código, salve sua página e atualize o navegador. Clique agora neste link e perceba que uma nova janela do navegador é aberta para que seja visualizado a página da emblema.

Outra possibilidade é utilizar o link para abrir o programa de email do seu visitante (Microsoft Outlook ou Outlook Express). Assim ele poderá enviar mensagens para você.

<a href="mailto:html4blog@gmail.com"> escreva </a>

Acrescente estas linhas ao seu código, salve e atualize o navegador para testar e ver como funciona.

Só para não dizer que esta parte é "fácil demais", vamos colocar um pouquinho de tempero e criarmos um link horizontal. Estes são aqueles links que funcionam na mesma página, assim: um link no topo da página que envia você para o pé da mesma página. Mas pode funcionar com vários itens e vários lugares, você é quem escolhe! Para isso você precisa de um "ponto de ancoragem" e depois indicá-lo no seu link.

<a name="ponto_ancoragem"> artigo completo </a>

<a href="#ponto_ancoragem"> título do artigo </a>

Veja este exemplo:
(para este exercício, é melhor você selecionar o código todo, copiar e colar no seu bloco de notas).

<html>
<head>
<!—título da home page -->
<title>Trabalhando com links horizontais</title>
</head>
<body>
 <a name="topo">   </a> 
 <a href="#podcast"> Podcasts </a> 
   
 <a href="#jpg"> Vantagens do JPG </a> 
   
 <img src="figura_ceu.jpg"> 
 Para dar certo esta coisa de link horizontal 
 o ideal é ter uma página 
 bem 
 longa 
 de 
 navegador 
 portanto 
 aqui vai
 um texto 
 bem espixado 
 para criar 
 uma 
 barra 
 de 
 rolagem 
 no seu 
 navegador 
 !!!!!! 
   
<h2> <a name="podcast"> Podcast </a> </h2>
 O Link é a casa do podcast brasileiro. Criamos um diretrório para agrupar esses programas de rádio caseiros, que estão para o rádio tradicional assim como os blogs estão para os jornais. 
Se você já é um podcaster, pode cadastrar o seu programa nesta página. Para isso, é preciso ser membro da comunidade Link.O registro é gratuito. </a> 
   
 <a href="#topo"> voltar para o início </a> 
 <img src="figura_ceu.jpg"> 
   
   
   
   
<h2> <a name="jpg"> Vantagens do JPG </a> </h2>
 Hoje, o formato mais usado para gravar imagens é o JPEG. O motivo é simples: as imagens salvas nesse formato podem ser compactadas, o que facilita a transmissão de fotos pela internet e o uso das imagens em sites. 
Outra vantagem do JPEG é que é possível definir a qualidade da imagem. Uma mesma foto pode ser gravada com diferentes níveis de qualidade. Para imprimir uma foto, o ideal é preservar o máximo de qualidade. Mas se a idéia é enviar a foto pela internet, salve a imagem com qualidade média para mandar por e-mail para os amigos. Quem vai utilizar a foto em páginas web pode usar uma qualidade baixa. 
   
 <a href="#topo"> voltar para o início </a> 
 <img src="figura_ceu.jpg"> 
   
   
   
   
 textos extraídos do site: <a href="http://www.link.estadao.com.br" target="_blank"> "link.estadão.com.br" </a> 
   
   
   
   
</body>
</html>

Teste as âncoras de ida e volta. Dá um pouco de trabalho montar o quebra-cabeça mas o resultado é bem interessante.

fim