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