10/05/2005 - 19h45

Página na Web - 3 - Melhorando a aparência

Caíque Severo

ATENÇÃO: este tutorial foi publicado originalmente em 2002; algumas informações podem estar desatualizadas

TUTORIAL
Como criar sua página na Web
1	Introdução
2	Página simples
3	Melhorando a aparência
4	Hyperlinks
5	Imagens
6	Tabelas
7	Dicas em HTML
8	Mapas clicáveis
9	Erros comuns
10	Exemplos de páginas
11	Tabela de acentos
12	Lista de tags
13	Tabela de cores
Os direitos da versão em forma de livro são de L&PM Editores. Os direitos da versão eletrônica são do autor.

Com os tags básicos do primeiro exemplo já é possível criar páginas Web para colocar à disposição dos usuários. O exemplo mostrado há pouco é completo e, se colocado em um servidor Web, pode ser identificado com sua própria URL e acessado de qualquer lugar do mundo. Porém, o primeiro exemplo deixa muito a desejar em apelo visual. Vamos melhorar a aparência deste documento.

Alinhamento
A primeira providência para melhorar a aparência da página é modificar o alinhamento do texto. O alinhamento padrão (com o qual vêm configurados os navegadores) é à esquerda. Para mudar o alinhamento padrão deve-se adicionar o atributo ALIGN dentro dos tags que marcam os títulos e os parágrafos.

<H1 ALIGN=CENTER>Título</H1>

Este é um parágrafo centralizado.

Exemplo 2: alinhamento centralizado

Desta vez, o tag ganhou uma opção (ALIGN=CENTER). Por isso, é preciso utilizar um tag de fechamento () para indicar que apenas aquele parágrafo receberá um alinhamento diferente.

Margem
Outro controle sobre o alinhamento dos elementos da página pode ser conseguido através da mudança de margem. O texto sempre começa a uma determinada distância da janela do navegador (um pouco diferente em cada navegador). Às vezes, será necessário aumentar essa margem e fazer com que o texto comece mais para dentro da página. O par de tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito desse tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:

<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>

Exemplo 3: colocando margem adicional

Texto pré-formatado
Existe ainda uma terceira forma de modificar o alinhamento. É a utilização do par de tags <PRE> e </PRE>. Usando esses tags, todos os espaços e entradas de parágrafo (o resultado da tecla enter) são respeitados. Em um texto normal, qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a pré-formatação, pode-se controlar o espaçamento com a barra de espaço e colocar o texto em praticamente qualquer lugar da página.

Apesar da vantagem dessa forma de alinhamento arbitrário, o tag <PRE> muda o tipo de caractere para uma fonte monoespaçada. Uma fonte monoespaçada é aquela na qual todos os caracteres ocupam o mesmo espaço horizontal, ao contrário da fonte proporcional, na qual o “i” ocupa menos espaço do que o “a”, por exemplo.

<PRE>

Este texto está pré-formatado. A fonte é monoespaçada e as entradas de parágrafo,

assim como os espaços adicionais, são respeitadas.

Neste caso, a margem esquerda foi aumentada em cinco caracteres.

</PRE>

O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no meio do texto. Entradas de parágrafo adicionais também são ignoradas.

Exemplo 4: controle do alinhamento com pré-formatação

No Netscape, é possível colocar tags de título dentro do par <PRE> e </PRE>, permitindo a manutenção da fonte proporcional (Times New Roman, por exemplo). Na maioria dos navegadores, porém, os tags de título são ignorados e se sobrepõem aos tags de pré-formatação, eliminando o seu efeito.

Estilos de caracteres
Para dar ênfase em determinados trechos de texto, pode-se usar negrito, itálico ou mesmo a fonte monoespaçada citada há pouco.

Texto em negrito

Texto em itálico

<TT>Texto monoespaçado</TT>

Exemplo 5: modificando os estilos de texto

Ao contrário de <PRE>, o tag <TT> ignora espaços em branco adicionais e entradas de parágrafo no meio do texto. Em relação ao espaçamento, o tag <TT> funciona exatamente como texto normal.

Os tags de estilo podem ser usados uns sobre os outros, acumulando seus efeitos.

Texto em negrito e itálico

<TT>Texto monoespaçado em negrito</TT>

<TT>Texto monoespaçado em itálico</TT>

<TT>Texto monoespaçado em negrito e itálico</TT>

Exemplo 6: os estilos podem ser combinados

Tamanhos de caracteres
Alguns navegadores aceitam a modificação do tamanho do texto através do atributo SIZE do tag .

Texto

O tag pode ser atribuído a qualquer parte do texto, com exceção dos títulos (<H1>, <H2> etc.). Os valores do atributo SIZE variam de 1 a 7, O tamanho normal do texto nos navegadores é equivalente a SIZE=3. Não existe nenhuma relação entre os valores no atributo SIZE e o número de pontos (a unidade utilizada para medir os caracteres). Portanto o melhor é experimentar todos os tamanhos e avaliar o resultado.

Texto com FONT SIZE=7

Texto com FONT SIZE=6

Texto com FONT SIZE=5

Texto com FONT SIZE=4

Texto com FONT SIZE=3

Texto com FONT SIZE=2

Texto com FONT SIZE=1

Exemplo 7: mudando o tamanho dos caracteres

O tag também pode ser utilizado com um atributo diferente para cada letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em tamanho maior no início de um parágrafo.

Texto

Também é possível modificar o tamanho de todo o texto de uma vez só colocando o tag <BASEFONT> no topo do texto.

<BASEFONT SIZE=5>

Cores diferentes
Alguns navegadores também aceitam modificar a cor padrão do texto e do fundo da janela do documento. Essa definição é feita em atributos do tag <BODY>. Os atributos são BGCOLOR e TEXT.

<BODY BGCOLOR=FFFFFF TEXT=000000>

ou

<BODY BGCOLOR=WHITE TEXT=BLACK>

O exemplo acima produz uma página com fundo branco e texto na cor preta. Os valores dos atributos são definidos em uma tabela de cores no padrão RGB ou pelo nome da cor.

Pode-se definir ainda a cor de determinados trechos de texto, com o atributo color no tag .

Texto na cor branca

ou Texto na cor branca

Dessa forma, é possível ter texto de várias cores na mesma página.

Texto em branco
azul
verde
vermelho

Mudando o tipo de caractere
O Internet Explorer, navegador da Microsoft lançado no segundo semestre de 1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto. O autor de uma página Web pode definir qual será o tipo de determinada parte do texto, mas o usuário precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows.

<H1>Título principal</H1>

Este é o texto do primeiro exemplo. Para dividir os parágrafos, usa-se o tag .

Este é o segundo parágrafo. Para colocar um novo título depois de um parágrafo não é necessário (tampouco funciona) colocar o tag .

<H2>Título secundário</H2>

Para abrir uma linha, usa-se o tag , 

certo?

<H3>Uma lista</H3>
<UL>
<LI>Item 1
<LI>Item 2
<LI>Item 3
</UL>