Tutorial de HTML

Lição 2 - Tags avançadas para edição de texto

Agora você já sabe as tags básicas, e se conferiu o exemplo como recomendei na lição 1, já viu a estrutura básica de um arquivo HTML:
<HTML>
   <HEAD>
      (aqui vão tags especiais, como a TITLE (ver exemplo da lição 1) )
   </HEAD>
   <BODY>
      (aqui vai o texto e tudo que aparece na tela do browser )
   </BODY>
</HTML>
Mas como nosso curso tem fins obviamente práticos, acho mais urgente passar mais algumas tags para que se possa começar já uma página apresentável. Lá vai:

<BR> - já visto no exemplo 1, indica quebra de linha. É o "Enter" do HTML. Não é necessário </BR>.

<HR> - traça uma linha horizontal. Não é necessário </HR>.
Algumas opções são:
COLOR - escolher a cor, por números RGB, ou por nomes como "WHITE" ou "LIGHTGREEN"
NOSHADE - sem efeito de relevo.
WIDTH - largura, pode-se indicar por tamanho em pixels ou pelo percentual relativo à largura da tela.
SIZE - a altura, em pixels, para-se gerar uma pequena barra ao invés de uma linha.

<P> - parágrafo. Adiciona um pequeno espaçamento no começo e no fim do bloco. Útil para formatar o alinhamento do texto. A principal opção é ALIGN, na qual você pode especificar LEFT, RIGHT, CENTER ou JUSTIFY.

<STRIKE>, <SUB>, <SUP> - similares às tags <B>, <I>, e <U>, estas mostram o texto riscado, subscrito ou sobrescrito, respectivamente.
Exemplo: A fórmula da água é H<SUB>2</SUB>O.

<TT> - para exibir o texto com fonte de largura fixa (Courier).

<UL>, <LI> - para definir uma lista numerada ou de marcadores (bullets). Para definir uma lista numerada, especifique a opção TYPE na tag <UL>, por exemplo:
<UL TYPE=I> (o TYPE I fará uma lista de números romanos maiúsculos, experimente os TYPEs i, a, A, 1)

<OL> - a tag <OL> é similar à <UL>, mas não gera lista de marcadores, e permite escolher o primeiro item da lista, com a opção START. O padrão da <UL> é lista de bullets, da <OL> é a lista numerada.

<DL>, <DT>, <DD> - para fazer uma lista de definições, gerando as propícias tabulações.

<BLOCKQUOTE> - o texto incluso entre estas tags aparecerá tabulado, como uma citação.

<PRE> - texto pré-formatado. Às vezes não vale a pena formatar o texto usando tags de HTML, como por exemplo, quando queremos inserir numa página listagens de programas de computador. Para isto existe a tag <PRE>. Tudo que estiver entre <PRE> e </PRE>, aparecerá sem alterações, incluindo espaçamentos, tabulações e quebras de linha. A única exceção são as tags HTML, que são processadas. Para exibir uma tag escrita na tela, sem que o browser processe-a, é necessário substituir os sinais < e > por &lt; e &gt;. Mas isso é outro assunto que veremos mais tarde.
A listagem em HTML que apareceu no começo desta página foi feita usando <PRE>. Perceba que este comando muda a fonte para Courier, por isso tive que inserir uma tag <FONT> para "corrigir" esta alteração.

Bem, aí está um monte de tags, e existem várias outras, mas estas são praticamente as únicas que eu uso. São de longe as mais úteis para se montar uma página HTML de texto. Veja o arquivo de exemplo, ele monta uma página de demonstração completa, usando praticamente todas as tags listadas aqui. Procure examinar e entender o código fonte desta página-exemplo. Salve a página em disco, e abra-a novamente. Experimente alterar as opções das tags, e ver os diferentes resultados. Lembre-se de salvar o arquivo, e de clicar em "Atualizar" (ou "Reload", ou "Refresh", conforme seu navegador), se o manteve aberto, para que as alterações tenham efeito.

Ah, sobre o exercício da lição 1... A opção para definir um gráfico de fundo deve ser definida na tag BODY, bem como a cor do texto, do fundo (se não tiver gráfico), dos links:
BACKGROUND - arquivo de papel de parede, em geral GIF ou JPEG.
BGCOLOR - cor de fundo da tela, se não usar papel de parede (o padrão é WHITE);
TEXT - cor do texto (o padrão é BLACK);
LINK - cor do link (o padrão é BLUE);
VLINK - cor do link já visitado (o padrão é DARKMAGENTA ?! ).

E lá vai o exercício para esta lição: crie uma "escada" de tabulações usando tags HTML! Este será um bom teste para que você se familiarize com as particularidades da linguagem. O resultado esperado é algo assim (aqui eu fiz usando <PRE>, isto é, sem tags): 
nivel 1
        nivel 2
                nivel 3
                        nivel 4
                                nivel 5
                                        nivel 6
Bem, agora já vimos as principais tags para edição de texto em HTML, e você tem uma bela trívia para solucionar. Na próxima lição, veremos a inclusão de imagens e de tabelas. Tabelas invisíveis são a alma da diagramação de uma página HTML, elas estão presentes em lugares que você nem imagina. Até lá!

Prosseguir para a lição 3: imagens e tabelas