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

Separadores primários

Submetido por aminharadio em Sáb, 2006-05-27 08:15

Read time: 9 mins

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



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.



 

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


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

Texto

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.

texto em negrito

é precisamente igual a:


texto em negrito


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

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



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.



 


<UL>

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

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

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

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

</UL>


Envie-me um

<a href="mailto:a.silva@xpto.pt">e-mail</a>




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

Está aqui

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

Separadores primários

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

Os links

Côres dos links

Um tag útil

Listas