Formatação e o aspeto da Página.

Todas as páginas que encontramos na Internet têm mais do que texto simples e monótono.

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="pagina1.htm">texto com link</a>
</body>
</html>

Aqui acrescentamos três parâmetros ao ‘tag’ <body>.

bgcolor que define a cor de fundo da página.
text que define a cor por defeito do texto.
link que define a cor de uma hiperligação.
Existem ainda os parâmetros alink e vlink que definem, a cor de uma ligação ativa (quando se clica sobre ela) e a cor de uma ligação já visitada previamente.

O que está dentro destes parâmetros?
O código hexadecimal correspondente à cor.

Vamos ver alguns dos códigos hexadecimais mais usados.

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

Nota: Existem vários programas que nos ajudam a encontrar o código hexadecimal da cor que desejamos, como por exemplo, o Colorcop que é bem simples, ou até mesmo o adobe Photoshop.

No entanto, mais importante que as cores, é o alinhamento dos elementos da página.
Por defeito fica tudo alinhado à esquerda, mas podemos mudar isso:

<body>
<div align="center">Texto centrado</div>
<div align="right">Texto à direita</div>
Texto à esquerda
</body>

A utilização do ‘tag’ <div> também provoca uma quebra de linha.
O ‘tag’ é utilizado para definir parágrafos, como o seguinte exemplo monstra:

<body>
 bloco de texto 
 outro bloco de texto com mudança de linha 
</body>

Existe uma diferença entre o espaço introduzido por uma mudança de parágrafo e o espaço introduzido por uma quebra de linha :

Vimos anteriormente que a tag é responsável por uma quebra de linha ou seja uma mudança de linha.
A esta tag podemos ainda juntar alguns atributos que podem ajudar a melhorar o visual da página, (quando colocamos uma imagem por exemplo).

 

Left Fará pular verticalmente até encontrar a lateral esquerda livre.
Right Fará pular verticalmente até encontrar a lateral direita livre
All Fará pular verticalmente até encontrar ambas as laterais livres

Voltando a tag podemos ainda acrescentar alguns atributos que permitem o alinhamento do texto:


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

<body>
Normal carregado itálico sublinhado
 carregado e itálico 
</body>

Outras tags de formatação

^{Texto sobrescrito.}

_{Texto subscrito.}

<tt>Texto com mono espaçamento.</tt>

<del>~~Texto riscado.~~</del>

<big>Aumenta o tamanho da fonte.</big>

<smal>Diminui o tamanho da fonte.</smal>

<h1></h1>até<h6></h6>,Define o tamanho da fonte em relação ao restante texto. Ideal para um título.

<h1></h1>

<h6></h6>

Fecha a área que não é visível. Ideal para deixar uma nota

<code>Formata o texto tipo código de programação.</code>

<pre>

Formata todo o texto automaticamente sem as tags de formatação.

</pre>

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

<body>
Letra normal
Letra com a fonte arial

 Tamanho 5 
 Tamanho 2 

 Azul 
 Vermelho 



Podemos combinar vários parâmetros 
realça o texto
</body>

Está um pouco mais complicado. Existem várias maneiras de fazer isto, mas esta mostra como se deve hierarquizar os ‘tags’ corretamente, e bem executado, temos um bom resultado:
O parâmetro color, que já vimos no ‘tag’ <body>, contém a cor do texto em código hexadecimal.
O parâmetro size contém o tamanho do tipo de letra, entre 1 (mais pequeno) e 7 (maior).
O parâmetro style="background-color:código hexadecimal da cor" contem a cor do realce do texto.
Finalmente face contém o nome do tipo de letra.
Apesar de existirem muitos tipos de letra, é aconselhável usar apenas Arial ou Times New Roman, porque com outros existe a possibilidade que quem visita a página não tenha essa fonte instalada no seu computador.

0|1|2|3|4|5|6 7|8|9|10|11|12|13|14