E continuando nosso curso, vamos a sétima aula.
Links são os elementos diagramáticos que diferenciam um documento Web de um impresso.
URL (Uniform Resource Locator ou Localizador Uniforme de Recursos), é um protocolo de comunicação associado a um endereço virtual que identifica um documento em um computador qualquer.
A URL pode ser relativa ou absoluta.
URL RELATIVA = Pode ser usada para fazer referência a um arquivo que esteja no mesmo servidor do documento atual.
URL ABSOLUTA = É usada para fazer referência a um arquivo que esteja em algum outro servidor.
Formato geral de um endereço HTML:
protocolo://dominio/arquivo
Protocolo = É utilizado na Internet para acessar um recurso computacional ligado na rede.
Domínio = É o endereço Internet da página a ser acessada.
Arquivo = É o nome do documento ou arquivo que se esteja tentando acessar.
Protocolos Internet Mais Comuns
| http:// | acesso às páginas Web |
| ftp:// | acesso a arquivos contendo programas |
| gopher:// | servidores de arquivos e informações |
| telnet:// | conexão a hosts remotos |
| wais:// | acesso a servidores WAIS |
| news: | acesso a grupos de notícias |
| mailto: | acesso a caixas postais eletrônicas |
Para estabelecer ligações internas em uma página, você precisa criar uma âncora no início de cada tópico que será referenciado por uma ligação (link).
Esta âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é usada dentro de um documento para marcar o início de uma seção do documento. Essa âncora recebe um nome que será mencionado pelo link que a acessará.
O ELEMENTO A
A tag <a> possui mais de uma função, ela pode ser usada tanto para sinalizar um link para algum documento, quanto para definir uma posição que será o destino de algum outro link (âncora).
Atributos para A
HREF = Permite fazer uma referência a algum outro documento, que deve receber o valor da URL do documento que se deseja referenciar.
NAME = Em um documento muito grande, dividido em seções distintas, este atributo permite que se especifique exatamente a parte do documento a que o link levará o usuário.
TARGET = Especifica o carregamento de um link em uma janela de destino. Esse atributo pode assumir como parâmetros: _top que carrega o link na mesma janela e _blank que carrega o link em uma outra janela.
MAILTO = Abre o programa de correio eletrônico com o destinatário da mensagem já definido pela tag.
MODIFICANDO A COR DOS LINKS
As cores dos links podem ser mudadas utilizando-se os seguintes atributos dentro da tag <body>:
| link="rrggbb" | define a cor a ser utilizada em textos que representam hiperlinks para outros documentos ou seções do mesmo texto |
vlink="rrggbb"
|
define a cor de links visitados
|
alink="rrggbb"
|
define a cor do link enquanto o mouse está pressionado sobre ele
|
Exercícios
1) link1.html
<html>
<head>
<title>Links</title>
</head>
<body bgcolor="white" text="#000000">
Esta página se chama "Link 1".<br>
Esta página utiliza o parâmetro "_top".<br>
Para ir à página "Link 2", clique na URL abaixo:<br><br>
<a href="link2.html" target="_top">Clicando aqui, vou para a página "Link 2"</a>
</body>
</html>
2) link2.html
<html>
<head>
<title>Link 2</title>
</head>
<body bgcolor="white" text="#000000" link="pink" vlink="green" alink="red">
Esta é a página "Link 2".<br>
Esta página utiliza o parâmetro "_blank".<br>
Para ir à página "Link 3", clique na URL abaixo:<br><br>
<a href="link3.html" target="_blank"_>Clicando aqui, vou para a página "Link 3"</a>
</body>
</html>
3) link3.html
<html>
<head>
<title>Link 3</title>
</head>
<body bgcolor="white" text="#000000" link="green" vlink="blue"
alink="magenta">
Esta é a última página.<br>
Esta página se chama "Link 3".<br>
Com o atributo "mailto", você pode colocar uma opção na sua página para que as pessoas enviem um e-mail à você.<br><br>
<a href="mailto:e_mail@dominio.com.br">Clique aqui para enviar um e-mail</a>
<br><br>
<a href="link1.html" target="alvo">Para voltar a página "Link 1" com o parâmetro "_blank", clique aqui.</a><br><br>
</body>
</html>
4) link4.html
<html>
<head>
<title>Name</title>
</head>
<body bgcolor="white" text="#000000" link="red" vlink="gray" alink="yellow">
<a name="topo"></a>Esta é uma página muito grande e por isso está dividida em capítulos. Este é o "topo" da página.<br><br>
<a href="#cap1">Clique aqui para ir ao Capítulo 1</a><br>
<a href="#cap2">Clique aqui para ir ao Capítulo 2</a><br>
<a href="#cap3">Clique aqui para ir ao Capítulo 3</a><br>
<a href="#cap4">Clique aqui para ir ao Capítulo 4</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="cap1">Este é o Capítulo 1</a><br>
<a href="#topo">Clicando aqui você tem a opção de voltar ao topo da página</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="cap2">Este é o Capítulo 2</a><br><a href="#topo">
Clicando aqui você tem a opção de voltar ao topo da página</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="cap3">Este é o Capítulo 3</a><br>
<a href="#topo">Clicando aqui você tem a opção de voltar ao topo da página</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="cap4">Este é o Capítulo 4</a><br>
<a href="#topo">Clicando aqui você tem a opção de voltar ao topo da página</a>
</body>
</html>
true comentários:
Postar um comentário