Formatação e Aspecto

Todas os sites que vemos na net têm algo mais que texto corrido e monótono. Vamos ver alguns desses aspectos analisando o código seguinte:

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

Este será o resultado:

Foram acrescentados três parâmetros adicionais ao ‘tag’ <BODY>:

BGCOLOR define a cor de fundo da página,
TEXT a cor por defeito 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 activa (quando se clica sobre ela) e a cor de uma ligação que já foi visitada.

Os parâmetros passados para dentro destas tags estão em hexadécimla, ficam alguns exemplos de cores para usar na tabela seguinte:

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

O código hexadecimal é dividido em 3 partes RGB (Red, Green, Blue), em que os 2 primeiros números equivalem à quantidade de Vermelho, os 2 seguintes à quantidade de Verde, e os 2 últimos à quantidade de Azul.

Por exemplo para obtermos o vermelho #FF0000, temos O valor de R no valor máximo, e G e B no mínimo.

No entanto, muitas vezes muito mais importante que as cores, é o alinhamento dos elementos da página. Por defeito 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, esse código provocará o seguinte:

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>

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 vários parâmetros 
</BODY>

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

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.

Veja a 1ª parte, Tutorial HTML - Parte1

Translate

Tutorial HTML - Parte 2

Formatação e Aspecto