AULA 03

Data de publicação: Nov 26, 2012 8:32:36 AM

1.4 Hiperligações

A internet não faria sentido sem o conceito de hiperligação (Hyperlink). Os hiperlinks permitem-nos navegar na Internet de página em página, figura em figura, vídeo em vídeo e muito mais. Na linguagem HTML, existem dois tipos de Hiperlinks, embora os dois utilizem a tag <a>. Esta tag tem obrigatoriamente de ser fechada.

Hiperlinks externos

Para inserirmos um Hiperlink para o exterior em HTML é obrigatório que a referência http:// esteja presente.

Exemplo:

(...)

<body>

<a href="http://www.google.pt"> Site de pesquisa Google </a>

</body>

(...)

No exemplo anterior a frase "Site de pesquisa Google" será o Hiperlink. No entanto, em vez de texto, o Hiperlink poderia ser uma imagem ou vídeo, bastava para isso substituir a frase "Site de pesquisa Google" pelo código de uma imagem ou vídeo, tal como mostra no exemplo seguinte:

Exemplo (com imagem):

(...)

<body>

</body>

(...)

AULA 3 - EXERCÍCIO 1

Com base no código anterior, tente alterá-lo para criar um link para a página do Colégio de Lamas (www.colegiodelamas.com), tanto com texto como, também, com a imagem do logotipo do Colégio (descarregar imagem em http://www.entreaspas.info/wp-content/uploads/2011/10/clsml-1024x323.png.

Grave a página como AULA3_1.html e abra-a no seu browser para verificar o resultado.

Hiperlinks internos

Existem dois tipos de Hiperlinks internos. Quando pretendemos aceder a uma outra página, imagem ou vídeo presente no nosso Web site, isto é, aceder a ficheiros que se encontram no nosso servidor, a forma de o fazer é similar ao exemplo de cima, apenas com uma ligeira diferença, como se pode verificar no exemplo seguinte:

Exemplo:

(...)

<body>

<a href="outra_pagina"> Outra página </a>

<a href="dir/imagem.jpg"> Imagem num directório diferente </a>

</body>

(...)

No exemplo anterior, encontram-se dois Hiperlinks. O primeiro para uma página que se encontra no mesmo directório que contém este código HTML. O seguinte para uma imagem que se encontra num directório chamado dir. A raiz será sempre onde se encontra gravada a página que se está a desenvolver. Quando pretendemos Hiperlinks para outras páginas ou ficheiros, que não se encontrem na mesma pasta que a nossa página, é necessário preceder o nome dessa página ou ficheiro com o caminho até ele (path).

AULA 3 - EXERCÍCIO 2

Tendo em conta o código anterior, tente alterá-lo no GEDIT para criar um link para uma página que tenha feito anteriormente, por exemplo, para a ficha de avaliação realizada na última aula.

Grave a página como AULA3_2.html e abra-a no seu browser para verificar o resultado.

Os tipos de Hiperlinks internos são os que nos levam para diferentes partes do mesmo documento. Este tipo de Hiperlinks é muito utilizado para páginas muito extensas em que os links nos transportam directamente para a zona do documento que pretendemos.

Exemplo:

(...)

<body>

<a href="#texto"> Clicar para ir para a zona da página pretendida </a>

<a name="texto"> Colocar na zona da página que se pretende aceder </a>

</body>

(...)

Como se pode verificar no exemplo anterior é necessário criar uma referência para uma zona algures da página. Assim o atributo href da primeira tag <a> contém o nome da referência onde se encontra a informação pretendida. Esta é precedida de # que indica que esta referência aponta para uma zona na própria página e não para o exterior. Mais abaixo é necessário colocar de novo uma tag <a> com o atributo name igual ao da referência criada (neste caso texto)

Ao clicar no Hiperlink "Clicar para ir para zona da página pretendida" somos levados automaticamente para a zona da página onde diz "Colocar na zona da página à qual se pretende aceder".

AULA 3 - EXERCÍCIO 3

Em GEDIT crie uma página como um texto muito extenso. Use o código anterior para aceder a uma parte desse texto através de um link interno.

Grave a página como AULA3_3.html e abra-a no seu browser para verificar o resultado.

1.5 Outras etiquetas

Existem algumas tags que não se enquadram em nenhuma das categorias anteriores mas que merecem algum destaque pela importância que apresentam.

Embed

Esta tag está particularmente na moda. Será suficiente copiar o código de um web site que o disponibilize (ex: youtube, miniclip) e colar juntamente com o vosso código para terem vídeos, jogos ou música no vosso Web site.

Exemplo

(...)

<body>

</embed>

</body>

(...)

Resultado

Linhas horizontais

A tag responsável por criar linhas horizontais é a <hr>. Servem principalmente para dividir os conteúdos de uma página.

Aceita os atributos width, height, size, color e align.

Exemplo:

(...)

<body>

</body>

(...)

Resultado