o Site | Básico | Avançado  

  

Home
Estrutura Básica
Cabeçalho
Formatação de Texto
Formatação Parágrafos
Linhas Horizontais
Imagem
Listas
Tabelas
Links
Frames
Música
Refresh
Marquee
Mapas Clicáveis
Formulários
    

Links


           Os links servem para acessar outros partes da página que estamos, uma outra página do nosso site ou acessar outro site.
           A marca para realizar isso é <a href = ...></a>, onde o valor de href é o endereço que vamos acessar. O que estiver entre <a href> e </a> será o nosso link. Links também podem ser utilizados em qualquer parte do documento entre <body> </body>.
Exemplo: pagina1.html
<html>
<head>
<title>Utilizando links</title>
</head>
<bodytext = lightgreen bgcolor = skyblue> <center>
<a href = pagina2.html> <h3>Clicando aqui, você irá para outra página </h3> </a> </center>
</body>
</html>

Exemplo: pagina2.html
<html>
<head><title>Utilizando links</title> </head>
<body text = lightgreen bgcolor = skyblue> <center>
<a href paginal.html><h3>Clicando aqui, você irá para a página 1 .</h3></a>
<a href = http://www.charges.com.br> <h3>Visite um lugar legal</h3>
</a>
</center>
</body>
</html>

           Um link para outra página é utilizado da seguinte forma: <a href = outrapagina.htm>, onde apenas usamos o nome do arquivo a ser visualizado pelo browser.
           Um link para outra parte da mesma página tem o seguinte formato: <a href = página.htm#destino), mas para que isso funcione devemos colocar no documento um nome para a parte que desejamos acessar. Para isso usamos <a name = destino> no local que desejamos acessar pelo link. Quando clicamos no link é exibido o parte do documento nomeado por <a name>.
           Para usarmos um link para outro site, devemos informar o endereço completo. Ex.; <a href http://www.outrosite.com>.
           Além de utilizarmos texto para criar links, podemos usar imagens paro referenciar outras páginas. Exemplo: <a href pagina2.html><img src = figura.gif></a>

A definição padrão das cores dos links e a seguinte:
· azul (blue) para links que não foram visitados;

· vermelho (red) para os links ativos;

· roxo (purple) para os links já visitados.

Para alterarmos as cores, devemos incluir na marca <body> os seguintes parâmetros:
· link = ... para configurar a cor do link não-visitado;

· alink = ... para configurar a cor do link ativo;

· vlink ... para configurar a cor do línk visitado;


Os valores recebidos pelos parâmetros acima são os nomes das cores.

<body link = yellow vlink = yellow alink = blue background = imagemlinks.gif>
<!-um link para e-mail->
Tire suas dúvidas mande um e-mail para HTML o Site
<a href = mailto: html@bol.com.br> <address> html@bol.com.br </address> </a> <br>
<br>
<p align = justify>
Vocês também podem visitar minha página, basta clicar <a href = http://www.dwerner.net>aqui</a>!
</p>
</body>
</html>

Link Ancora

           Links ancora servem para acessar conteudos em partes diferentes que se encontram numa mesma página. Devemos nomear a parte onde será acessado e colocar a referencia na tag <a href>.
           Onde na parte acessada usa-se <a name = nomelocal>, e para o link <a href = nomepag.html#nomedolocal>.

Exemplo: link1.html
<html>
<head>
<title> Link para a mesma página </title> </head>
<body link = yellow vlink = green alink = red >
<h2>Links Relativos</h2>
<a href = links1.html#estrutura>Estrutura do Documento</a><br>
<a href = links1.html#html>HTML</a> <br>
<a href = links1.html#head>HEAD</a> <br>
<a href = links1.html#body>BODY</a><br>
<a href = links1.html#links>LINKS</a> <br>
<a name = estrutura>
ESTRUTURA BÁSICA<br>
<br>
A estrutura básica de um documento HTML é a seguinte:<br>
<br>
< html ><br>
< head ><br>
...<br>
< title >Título do Documento< /title ><br>
< body ><br>
...<br>
< /body ><br>
< /html ><br>
<br>
Agora vamos ver cada um desses elementos:<br>
<br>
<a name = html>
< html >< /html ><br> <br>
Indica o início e fim do documento. Todo documento deve estar entre estas marcas. <br>
<br>
<a name = head>
< head >< /head > <br> <br>
           Esta é a seção de cabeçalho. Trata-se da primeira seção do documento onde encontra-se informações opcionais tais como autor da página, palavras-chave, descrição da página, etc. Isto será discutido mais adiante.<br>
<br>
<a name = body>
< body >< /body ><br> <br>
           A maior parte do conteúdo da sua página encontra-se entre estes marcadores, também conhecidos como tags ou elementos. O elemento < body >< /body > pode ter até cinco parâmetros opcionais: <br>
<br>
background: configura qual será a figura de fundo da página. Pode-se fazer a com-paração que o parâmetro de background será o "papel de parede" da sua página. A figura é carregada da esquerda para direita, de cima para baixo. É utilizado da seguinte maneira: < body background = nome da imagem >, onde nome-da-imagem é um arquivo .gif ou .jpg. <br>
<br>
text: define a cor do texto da página. À cor padrão é preto. Ex:< body text = blue >, define a cor do texto para azul.<br>
<br>
bgcolor: define a cor do fundo da página. À cor padrão é branco. Ex:< body bgcolor = gray >, define o cor de fundo para cinza.<br>
<br>
<a name = links>
link, vlink, alink: definem, respectivamente, as cores do link não-visitado, do link que foi visitado e do link ativo. Ex:< body link = lightgreen vlink = skyblue alink = red >, define a cor do link para verde claro, a cor do link visitado para azul celeste e vermelho para o link ativo.<br>
</body>
</html>
Veja o exemplo

Link para uma nova janela

           São links que abrem uma nova janela, mantendo a janela com o site onde se encontra o link. Para isso usamos o parâmetro target = _blank. Ex.: <a href = endereço.html target = _blank>
Exemplo: links2.html
<html>
<head>
<title>Links para nova janela</title>
</head>
<body>
<a href = http://www.dwerner.net target = _blank> Clique aqui para abrir nova janela</a>
</body>
</html>
Veja o exemplo

Imagem como Link

           Para colocar uma imagem como link, no lugar de um nome para a página utilize o comando img src. Para que não apareça uma borda na figura use o comando border = 0.
<a href = link.html><img src = foto.jpg border = 0></a>

Exemplo: links3.html
<html>
<head>
<title>Links com imagem</title>
</head>
<body>
<a href = http://www.dwerner.net><img src = imagem.gif border = 0></a>
</body>
</html>
Veja o exemplo

Algumas observações sobre este exemplo:
· O que estiver entre <! - - e - - > é chamado comentário. Entre estas marcas pode-mos fazer observações sobre o que estamos fazendo. O que estiver entre estas marcas não será interpretado pelo browser.
· Para fazermos um link para e-mail devemos usar <a href mailto:endereço de e-mail> link</a>.

Topo