APARÊNCIA

A aparência de uma página, ou melhor, da disposição de um texto em uma página é importantíssima. Temos quatro formas de dispor um texto: alinhando à esquerda, alinhando à direita, centralizando, justificado ou usando o comando de pré-formatação (faz com que o texto fique disposto na página exatamente como você escreveu).

Alinhando à esquerda: Usa-se <ALIGN="LEFT">, dentro do tag que você está querendo alinhar.

Alinhando à direita: Usa-se <ALIGN="RIGHT">, dentro do tag que você está querendo alinhar.

Centralizando: Usa-se <ALIGN="CENTER">, dentro do tag que você está querendo centralizar.

Justificando: Usa-se <ALIGN="JUSTIFY">, dentro do tag que você está querendo justificar.

Pré-formatação: Usa-se o par de tags <PRE> e </PRE>, com eles todos os espaços e entradas de parágrafos (resultado da tecla ENTER) são respeitados, ou seja, você coloca o texto praticamente em qualquer lugar da página. Não esquecendo do seguinte: quando utilizamos o tag <PRE> o tipo de caractere muda para um tipo de fonte monoespaçada.

Margem: Além do alinhamento do texto, podemos também modificar a margem, geralmente modificamos a margem de uma página, quando queremos que o texto corra um pouco mais para o lado direito. Para isso utilizamos o par de tags <BLOCKQUOTE> e </BLOCKQUOTE>.
Exemplo:
<BLOCKQUOTE>texto com mais margem</BLOCKQUOTE>
<BLOCKQUOTE>se quisermos mais margem ainda</BLOCKQUOTE>
<BLOCKQUOTE>texto com mais margem ainda</BLOCKQUOTE>

Formatação de texto:

É muito comum, ao usar um processador de texto - O microsoft Word, por exemplo - você querer mudar o formato do texto em um determinado momento.
Isso também acontece com as páginas construídas em HTML. Existem tags exclusivos para a colocação de negrito, itálico e sublinhado e tags que aumentam e reduzem fontes, como é mostrado a seguir:

• <B> ... </B> - Transforma o texto em negrito.
  
• <I> ... </I> - Transforma o texto em itálico.
  
• <U> ... </U> - Sublinha o texto.
  
• <BIG> ... </BIG> - Aumenta o tamanho da fonte e coloca o texto em negrito.
  
• <SMALL> ... </SMALL> - Diminui o tamanho da fonte.
  
• <FONT> ... </FONT> - Permite alterar o tamanho, o tipo e a cor da fonte.
  Exemplo do tag FONT:
  <FONT FACE="ARIAL" SIZE="7" COLOR="FF00FF">
  Onde:
  
  • FACE = Determina o tipo da fonte.
    
  • SIZE = Determina o tamanho da fonte, que varia de 1 a 7, o tamanho normal do texto nos navegadores é equivalente a 3. Uma dica é experimentar todos os tamanhos e avaliar o resultado.
    <FONT SIZE="1">Texto com FONT SIZE=1</FONT> ... e assim por diante.
    
  • COLOR = define a cor do texto, aqui é definido pelo padrão de cor RGB (em hexadecimal), pode ser usado também o nome da cor.

(Clique aqui para ver uma listagem de cores e seus códigos em hexadecimal)

Títulos:
No corpo do texto podem ser colocados até seis níveis de títulos. A hierarquia começa em <H1>, como o maior título, e termina com <H6>, como o menor. Os títulos <H6> e <H5> aparecem tão pequenos no navegador que provavelmente nunca serão usados.

Parágrafos:
Os parágrafos são digitados normalmente. O tag <P> serve para indicar o início de um novo parágrafo. Se o tag <P> for colocado antes de um título (<H1> por exemplo), a marca de parágrafo é ignorada. Nesse caso, o próprio título se encarrega de colocar o espaço necessário.

Linhas:
Assim como as marcas de parágrafo, as quebras de linha são indicadas por um tag simples. Para abrir uma nova linha, usa-se o tag <BR>, este tag não necessita de finalização.

Traço Horizontal:
Comando muito usado em páginas HTML é o tag <HR>.
Ele traça uma linha horizontal na posição em que for solicitado, separando uma informação da outra. Assim como o tag <BR> visto anteriormente, o <HR> não necessita de finalização.

Listas:
Muito utilizadas em páginas Web, as listas (quando bem aplicadas) estruturam e padronizam as informações que colocamos no site.
Existem diversas aplicações para as listas. Normalmente as vemos simulando um menu de opções, um resumo ou mesmo um sumário.
Na linguagem HTML você encontrará diversos tipos de listas, a seguir veremos alguns tags de lista:

• <UL> ... </UL> - Cria um lista não numerada, mas com marcadores.
  
• <LI> ... </LI> - Trabalha entre os tags <UL> e <OL> e tem a finalidade de criar as linhas de textos das listas.
  
• <OL> ... </OL> - Cria uma lista numerada.
  
  

  Ex.1: Lista não numerada, mas com marcadores.
  <UL>  <LI> Item 1  <LI> Item 2  <LI> Item 3 </UL>	Item 1 Item 2 Item 3
  Ex.2: Lista numerada.
  <OL>  <LI> Item 1  <LI> Item 2  <LI> Item 3 </OL>	Item 1 Item 2 Item 3

  
  - Você pode controlar a numeração do tag <OL>, com o atributo TYPE (que diz que tipos de numerais são usados para ordenar os itens, como, letras em caixa alta, letras em caixa baixa, algarismos romanos em caixa alta e algarismos arábicos) e START (diz onde começa a numeração do primeiro item da lista).
  - O tag <UL> recebe o atributo TYPE que também pode ser usado, só que com os valores, CIRCLE, SQUARE ou DISC, que modifica o tipo dos marcadores.
  
  Com estes poucos comandos e bastante atenção na digitação dos tags, podemos fazer as mais diversas listas.