AULA 4: Links, listas de correio, favoritos, etc

Separadores primários


AULA 4: Links, listas de correio, favoritos, etc


Vamos aprender a utilizar os links, e como mudar as suas cores. Vamos também aprender como criar links para e-mail, listas, e vamos elaborar uma lista de favoritos.


Os links


Os links são aquelas palavras (ou imagens) que quando clicamos em cima nos levam para outra página. É isto que mantém a web unida e nos permite navegar. Eles são a base de todo o conceito de hipertexto.

O tag do link é o <a> e tem como parâmetro o href.
Assim funcionará da seguinte forma:

<a href="endereço do destino">Palavra a aparecer linkada</a>

Então, para fazer um link para uma página onde tenha, por exemplo, mais informações sobre o autor e se chama autor.html podemos fazer:

Clique <a href="autor.html">aqui</a> para saber mais sobre o autor.

Repare:
-Apenas a palavra 'aqui' aparecerá sublinhada.
-O endereço da página de destino teria de estar na mesma directoria (pasta) da página actual, portanto, nao necesitará de ter um endereço tipo 'http://www...' , podemos indicar apenas o nome do ficheiro html. Se experimentar acrescentar este bocado de html ao que tem vindo a criar, e clicar sobre a palavra linkada, irá ver uma mensagem de erro. Isto porque teria que criar um outro ficheiro de nome autor.html para que tudo funcionasse na perfeição. No entanto o principal é que tenha retido a ideia.


Côres dos links


Por defeito, os links são sempre a azul, enquanto não forem clicados, e ficam vermelho escuro depois de visitados. Estas podem não ser as cores desejadas e se, por exemplo, o fundo da sua página for também azul, convém alterá-las.

Como definir as côres dos links?

A definição da côr do link é feita uma vez, e fica logo definida para todo o html. Para isto utiliza-se o já nosso conhecido tag <body>. Nesta altura já deve ter reparado que o <body> serve para definir o aspecto geral de todo o conteúdo da página. Adiante:

As côres dos links são definidas com os mesmos códigos hexadécimais que usámos para o fundo e para o texto.

Parâmetro para côr de link:
link="#BB1A02"
Parâmetro para côr de link já visitado:
vlink="#800000"

Como exemplo, poderíamos considerar uma página que tem como côr de link um vermelho escurecido, e os links já visitados são acastanhados. Para isso usamos:

<body link="#BB1A02" vlink="#800000">

Todos os links contidos nessa página terão essas côres.

Existem ainda outros tags que permitem defenir o aspecto geral da sua página.
Lembra-se quando no <font> definia a côr do texto? Imagine que o queria cinza, no <body> pode definir também a côr de todo o texto da página (excepto nos sítios em que isto for contrariado com um <font color="">) Isto faz-se com o parâmetro text .

<body link="#BB1A02" vlink="#800000" text="#262626">

Teremos então definidas as côres gerais para os textos e links da nossa página.

Está então na altura de pegar em tudo que já foi falado até aqui e criar uma nova página. Isto servirá para rever todos os assuntos aqui tratados e vê-los já exemplificados num html acabado. Use-o como comparação ao html que poderá (deverá) estar a desenvolver paralelamente e ver os tags em acção.


Este será o código html possível, usando tudo que se aprendeu até este momento:
------------------------------------------------

<HTML>
<TITLE>A minha primeira página</TITLE>
<BODY bgcolor="#FFFF00" text="#0000FF" link="#FF0000" vlink="#808000">


<center>
<h1>A minha primeira página</h1>
</center>

<b>
<font face="arial, helvetica" size="3" color="#000000">
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html, mas entretanto já compilei
alguns dos meus sites preferidos que poderá visitar.
</font>
</b>


<br><br>
<font face="arial, helvetica" size="3" color="#000000">
<a href="http://www.aminharadio.com">
<b>AMINHARADIO</b>
</a> - O site português dedicado à rádio e ao seu restauro
Sons, fotos, música antiga, etc.
<br>
<a href="http://www.sapo.pt">
<b>Sapo</b>
</a> - O mais famoso dos índices de sites portugueses.
<br>
<a href="http://www.negocios.pt">
<b>Canal de Negócios</b>
</a> - Onde eu vou para saber como estão as minhas acções da bolsa.
<br>
<a href="autor.html">
<b>Acerca de mim</b>
</a> - Um pouco sobre o autor desta página.
</font>

</BODY>
</HTML>
-----------------------------------------------------------


Confuso? Depois de tudo aplicado, o html pode-se tornar já bastante denso, mas repare que:

- Os tags funcionam de fora para dentro, o que quer dizer que se tiver dois tags que influenciam por exemplo a cor do texto, como é o caso no html acima, em que tem no body o atributo text que "diz" ao browser que o texto deve ser todo azul e depois no font tem o atributo color que diz ao browser que o texto deve ser preto, o que prevalece será o que está mais próximo do texto.
O que quer dizer que se tiver:

<font size="4"><font size="3">Texto</font></font>

O seu texto ficará com o tamanho 3.

-Os tags podem ser usados tanto em maiusculas como em minusculas, é indiferente.

-No código pode quebrar as linhas ou até meter linhas em branco. Isto não influenciará o resultado. Não deverá porém quebrar tags ou palavras a meio.

<b>texto em negrito</b>

é precisamente igual a:

<B>
texto em negrito
</B>

-Pode quebrar inclusivamente o texto, fazendo-o mudar de linha. No resultado final o texto só será quebrado se existir um <br> ou um <p>.

Todas estas dicas podem ajudar a tornar o código mais simples e mais organizado. A sua estrutura varia conforme as preferências do autor. No entanto aconselhamos a que mantenha o seu código o mais estruturado possível, e que insira espaços sempre que achar necessário, para poder compreender mais fácilmente o trabalho que está a executar.


Um tag útil


É sempre bom ter uma forma de contactar o autor da página. Os visitantes são os nossos melhores críticos e podem-nos ajudar bastante a resolver pequenos problemas. Aproveitando o facto de termos aprendido os tags de link, acrescentamos aqui um bastante útil que permite ao visitante enviar um mail ao autor: o 'mailto'.
Usa-se da seguinte forma:

<a href="mailto:a.silva@xpto.pt">Clique aqui</a> para me enviar um mail.

Como vê, é semelhante ao tag de link, mas com o parâmetro 'mailto' que indica o browser que se trata de um endereço de e-mail. Este chamará o seu programa de correio electrónico e inserirá automáticamente o endereço do destinatário no seu campo respectivo.


Listas


Deverá ter reparado que a sua lista de links está um pouco crua e sem piada. Isso tem solução e pode dar um aspecto melhor à sua lista.
Para isto usamos o tag <ul> ele diz que aqui começa uma lista com várias linhas. Cada linha é identificada com um <li>.

Assim:

<UL>
<LI> Esta é uma linha da minha lista
<LI> Esta é outra linha da minha lista
<LI> Esta é linha mais da minha lista
<LI> Cá está mais uma linha da minha lista
</UL>


No caso da página que fizemos há pouco, apenas temos que inserir o <UL> antes da zona de links e o </UL> no fim dela. Insira então um <LI> antes de cada linha. Aqui pode então tirar os <BR> que as quebram, já que os <LI> quebram automáticamente as linhas iniciando um novo ítem de lista.

Resultado, juntando as listas e o mailto:
---------------------------------------------

<HTML>
<TITLE>A minha primeira página</TITLE>
<BODY bgcolor="#FFFF00" text="#0000FF" link="#FF0000" vlink="#808000">


<center>
<h1>A minha primeira página</h1>
</center>

<b>
<font face="arial, helvetica" size="3" color="#000000">
Viva, esta é a minha primeira página.
Estou ainda a aprender como construir
uma página html, mas entretanto já compilei
alguns dos meus sites preferidos que poderá visitar.
</font>
</b>


<br><br>
<font face="arial, helvetica" size="3" color="#000000">

<UL>

<LI>
<a href="http://www.aminharadio.com">
<b>AMINHARADIO</b>
</a> - O site português dedicado à rádio, restauro
Sons, fotos, música antiga, etc.

<LI>
<a href="http://www.sapo.pt">
<b>Sapo</b>
</a> - O mais famoso dos índices de sites portugueses.

<LI>
<a href="http://www.negocios.pt">
<b>Canal de Negócios</b>
</a> - Onde eu vou para saber como estão as minhas acções da bolsa.

<LI>
<a href="autor.html">
<b>Acerca de mim</b>
</a> - Um pouco sobre o autor desta página.

</UL>

<p align="right">
Envie-me um
<b>
<a href="mailto:a.silva@xpto.pt">e-mail</a>
</b>
</p>


</font>
</BODY>
</HTML>
------------------------------------------

Depois desta aula você já tem conhecimentos suficientes para fazer uma página pessoal tão boa ou melhor do que a maioria das existentes (ok, ainda faltam as imagens, que serão dadas na próxima aula).
É necessário um pouco de gosto pessoal e bom senso, mas acredite, com o que já aprendeu e um bocado de prática (sim é necessário praticar), paciência, e a velha mas infalivel técnica "tentativa-erro" poderá criar verdadeiras obras de arte.

Por isso não tenha receio em experimentar, brincar, trocar tamanhos, cores, posições, etc. só assim poderá ter noção do que lhe parece melhor.