TECNOSOLUTION: Tutorial HTML - Formatação e aspecto

sábado, 27 de outubro de 2012

Tutorial HTML - Formatação e aspecto - Parte 04

Todas as páginas que vemos na Internet têm algo mais que texto corrido e monótono. Antes de mais, podemos mudar a cor de uma página:

<HTML><HEAD><TITLE>Página com cor</TITLE></HEAD>
<BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#FF0000">
Texto normal <A HREF="outra.htm">Texto com link</A>
</BODY>
</HTML>

O resultado será o seguinte:

Aqui foram acrescentados três parâmetros adicionais ao ‘tag’ <BODY>. BGCOLOR define a cor de fundo da página, TEXT a cor por default (padrão) do texto, LINK a cor de uma hiper-ligação.

Existem ainda os parâmetros adicionais ALINK e VLINK que definem, respectivamente, a cor de uma ligação ativa (quando se clica sobre ela) e a cor de uma ligação já vista previamente.

O que está dentro destes parâmetros? O código hexadecimal correspondente à cor (mais informação sobre isto encontra-se no artigo sobre o uso da cor, na seguinte tabela podemos ver alguns dos mais importantes:

Dicas:

	Branco: #FFFFFF	Amarelo: #FFFF00
	Preto: #000000	Magenta: #FF00FF
	Cinza: #999999	Azul claro: #00FFFF
	Vermelho: #FF0000	Laranja: #FF6600
	Verde: #00FF00	Verde escuro: #006600
	Azul: #0000FF	Azul escuro: #000066

No entanto, muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por default (padrão) tudo fica alinhado à esquerda, mas é possível mudar isso:

<BODY>
<DIV ALIGN="CENTER">TEXTO CENTRADO</DIV>
<DIV ALIGN="RIGHT">TEXTO À DIREITA</DIV>
Texto à esquerda
</BODY>

O texto em maiúsculas tem o seu alinhamento alterado, a utilização do ‘tag’ <DIV> também provoca quebras de linha:

Porquê? O ‘tag’  é utilizado para a definição de parágrafos, como o seguinte exemplo o demonstra:

<BODY>
Bloco de texto
Outro bloco de texto com mudança de linha
</BODY>

Existe uma diferença clara entre o espaçamento introduzido por uma mudança de parágrafo e aquele que surge através do ‘tag’  , de quebra de linha:

Além do aspecto global do texto, podemos também escolher o tipo de letra que utilizamos. Antes de mais, temos os ‘tags’ ,  e , respectivamente para letra carregada, em itálico e sublinhada:

<BODY>
Normal 
Carregado 
Italico 
Sublinhado 
Carregado e Italico
</BODY>

Obtemos este resultado:

Além disto, também podemos escolher a fonte, o seu tamanho e cor com:

<BODY>
Letra normal
Letra com a fonte Arial

Tamanho 5
Tamanho 2

Azul T.5
Vermelho T.5



Podemos combinar varios parametros
</BODY>

Este já está um pouco mais complicado. Existem várias maneiras de fazer isto, mas esta demonstra como se devem hierarquizar os ‘tags’ corretamente. Bem executado, teremos este resultado:

O parâmetro COLOR, que já vimos aplicado no ‘tag’ <BODY>, contém a cor do texto no seu código hexadecimal. O parâmetro SIZE contém o tamanho do tipo de letra, que é um algarismo entre 1 (mais pequeno) e 7 (maior). Finalmente, FACE contém o nome do tipo de letra a utilizar.

Dica:

Apesar de existirem inúmeros tipos de letra, é aconselhável que uma página apenas utilize o Arial ou o Times New Roman, visto que com outros existe uma grande possibilidade que quem vai visitar a página não tenha essa fonte instalada no seu computador.