Tags de formatação básica de HTML

A grande lista!
Confira a Grande lista de tags de HTML(em inglês). É um guia de referência em uma única página para impressão com todas as tags de HTML apresentadas neste artigo - de fácil acesso e em formato PDF para impressão mais fácil!
Você vai usar o tempo todo as tags básicas de HTML aqui listadas - elas são responsáveis por 90% de toda a formatação que você vê na maioria das páginas de internet. Quando você aprendê-las, estará a caminho de se tornar um profissional em HTML!

Existe uma maneira de você experimentá-las enquanto estiver aprendendo:

  • Se você gostou do arquivo "primeiro.htm" que criamos na página anterior, você pode inserir código HTML e criar páginas completas. Lembre-se de colocar toda a informação que você quiser exibir na página entre as tags <body> e </body>. Faça experiências com sua página, adicionando novas tags e conferindo os resultados.
Vamos lá!

Negrito, itálico e sublinhado

  • Coloque qualquer texto em negrito, adicionando a tag:

    <b>

    no início do texto, e a tag de fechamento:

    </b>

    no início do texto, e a tag de fechamento:

    </b>

    onde você quiser que o atributo negrito termine.

    Isto é <b>negrito</b>.
    		Isto é negrito.

  • Para deixar o texto em itálico, use as seguintes tags da mesma maneira:

    <i>.....</i>

    Isto é <i>itálico</i>.
    		Isto é itálico.

  • Para sublinhar, use as seguintes tags:

    <u>.....</u>

    Isto é <u>sublinhado</u>. Isto é sublinhado.

Quebras de linha e parágrafos
Apesar de um texto digitado ter marcas de parágrafo, tabulações e espaços extras, os navegadores não os enxergam. Você terá que usar tags para criar espaços em branco nos seus documentos HTML.

<br> cria uma quebra de linha. Você pode usar várias destas tags juntas para criar espaço em branco.

    Esta linha está <br> quebrada. Esta linha está
    quebrada.

<p> cria um espaço a mais entre duas linhas de texto. Se você colocar <br> em uma linha de texto, ela irá somente quebrar a linha; se você usar <p>, ela vai quebrar a linha e criar um espaço extra.

    Esta linha está <p> com um espaço a mais. Esta linha está

    com um espaço a mais.

<hr>cria um separador, ou linha horizontal.

    Este é um separador: <hr> Este é um separador:

Tabulações
Não existe uma tag HTML especificamente para criar uma "tabulação" dentro de um documento. Muitos web designers criam tabelas ou usam imagens em branco para criar espaço (tabelas e imagens serão explicados mais adiante neste artigo). Uma maneira de recuar texto é usar a tag <ul> para fazer o navegador pensar que você vai criar uma "lista". A lista recua o texto automaticamente. Feche com </ul> para "encerrar" o recuo. As tags <blockquote>...</blockquote> também recuam texto.

Outra alternativa é a tag <pre>. Esta tag é usada para exibir texto pré-formatado - texto exibido "como ele é". Qualquer espaço criado dentro das tags <pre> e </pre> vai aparecer no navegador como aparece no código.


Alterando a cor, o tipo e o tamanho das fontes

  • Altere a cor de qualquer texto, usando as tags: onde você substitui "cor" pelo nome da cor desejada em inglês.

    <font color="cor">...</font> 

    Isto é <font color="#000099">vermelho</font>. Isto é vermelho.
    Isto é <font color="green">verde</font>. Isto é verde.

A maioria das cores padrão vai funcionar. Experimente também os "lights" (claros) e "darks" (escuros) como em "lightblue" ou "darkgreen". Você também pode especificar um número de cor hexadecimal, como: <font color="#864086">. Uma lista de códigos de cores hexadecimais pode ser encontrado em December.com: HTML (em inglês).

Se você quiser especificar a cor para o texto inteiro da sua página, coloque o atributo text="cor" dentro da tag <body>.

Exemplo: <body text="blue">

Mesmo que você atribua uma cor para o texto inteiro, ainda assim pode mudar a cor de qualquer parte do texto usando as tags acima.

  • Altere o tipo de fonte de qualquer texto, usando as tags:

    <font face="tipo de fonte"> ... </font>

    Isto é <font face="arial">arial</font>. Isto é Arial.
    Isto é <font face="geneva">geneva</font>. Isto é Geneva.

    (Observação: Se o tipo de fonte que você especificar não estiver instalado no computador do usuário, o padrão do navegador será usado, geralmente Courier ou Times New Roman; então é melhor escolher os tipos de fonte padrão se você quiser controlar o que é exibido no navegador do usuário.)

  • Altere o tamanho da fonte de qualquer texto, usando as tags:

    <font size=valor>...</font>

    Exemplo: <font size=4>

    O tamanho de fonte padrão na maioria dos navegadores é "3", então quaisquer valores acima de 3 vão deixar o texto maior, e quaisquer valores menores que 3 vão deixá-lo menor.

    Você também pode mudar o tamanho de fonte ao somar ou subtrair números do tamanho padrão.

    Exemplo: <font size=+4>, ou <font size=-2>

    A esta fonte <font size=+2>somamos 2</font>. A esta fonte somamos 2.
    A esta fonte <font size=+1>somamos 1</font>. A esta fonte somamos 1.
    Desta fonte <font size=-2>subtraímos 2</font>. Desta fonte subtraímos 2.
    Desta fonte <font size=-1>subtraímos 1</font>. Desta fonte subtraímos 1.

    Você também pode mudar o tamanho de fonte, usando as tags <small> (pequeno) e <big> (grande):

    Este texto é <small>pequeno</small>. Este texto é pequeno.
    Este texto é <big>grande</big>. Este texto é grande.

    Tags de título também mudam o tamanho de uma fonte, criando um "título" em negrito para um parágrafo ou texto:

    <h1>Este é um título H1.</h1>

    Este é um título H1.

    <h2>Este é um título H2.</h2>

    Este é um título H2.

    <h3>Este é um título H3.</h3>

    Este é um título H3.

    Encerre qualquer mudança de fonte com a tag:

      </font>

    Ou com o fechamento das tags específicas que você usou:
      Exemplo: </small>, </big>, </H2>

Criando cor de plano de fundo
Mude a cor do plano de fundo da sua página, colocando bgcolor="cor" dentro da tag <body>.

Exemplo: <body bgcolor="yellow">

Conforme falamos na seção sobre mudança de cor de fonte, você pode usar as cores padrão ou um Código de Fonte Hexadecimal (em inglês).

Criando listas
Há três tipos de lista que você pode criar: desordenada, ordenada e descritiva

Uma lista lista desordenada é assim:

  • São Paulo
  • Rio de Janeiro
  • Mato Grosso
Uma lista desordenada tem marcadores e começa com a tag <ul> (abreviação de unordered list). A tag <li> (abreviação de List Item, ou item da lista) é usada antes de cada item da lista. A tag de fechamento </ul> encerra a lista.

Exemplo:

<ul>
<li>São Paulo
<li>Rio de Janeiro
<li>Mato Grosso
</ul>

O tipo de marcador pode ser trocado por "circle" (círculo), "square" (quadrado) ou "disc" (disco), adicionando uma especificação dentro da tag <ul>

<ul type="circle">
<li>São Paulo
<li>Rio de Janeiro
<li>Mato Grosso
</ul>
  • São Paulo
  • Rio de Janeiro
  • Mato Grosso

<ul type="square">
<li>São Paulo
<li>Rio de Janeiro
<li>Mato Grosso
</ul>
  • São Paulo
  • Rio de Janeiro
  • Mato Grosso

Uma lista lista ordenada é assim:

  1. laranjas
  2. maçãs
  3. bananas
Uma lista ordenada é uma lista de itens em uma ordem lógica numérica. Use as tags <ol> (abreviação de ordered list) e </ol> para começar e terminar este tipo de lista. A tag <li> também é usada na frente de cada item.

Exemplo:

<ol>
<li>laranjas
<li>maçãs
<li>bananas
</ol>

O tipo de organização pode ser alterado, adicionando uma designação de "tipo" dentro da tag <ol>.

<ol type="A"> ordena a lista com letras maiúsculas: (A, B, C...)

<ol type="a"> ordena a lista com letras minúsculas: (a, b, c...)

<ol type="I"> ordena a lista com números romanos: (I, II, III...)

<ol type="i"> ordena a lista com números romanos minúsculos: (i, ii, iii...)

Se você quiser começar sua lista com um valor específico, como "6", use as tags "start" (começar) e "value" (valor) a seguir:

<ol start=5>
<li value=6>

Uma lista descritiva cria uma lista de itens de texto com a segunda linha recuada:

Marshall Brain
Fundador da HowStuffWorks

Use as seguintes tags assim:

<dl>
<dt>Marshall Brain
<dd>Fundador da HowStuffWorks
</dl>

A tag <dt> (abreviação de descriptive list) corresponde ao texto que você quer que fique alinhado à margem e <dd> corresponde à linha que você quer que seja recuada.

Links para outros sites
Uma das melhores coisas das páginas de internet é a possibilidade de criar links para outras páginas na internet. Usando as tags âncora, você pode citar trabalhos de outras pessoas, apontar para outras páginas que você gosta, etc:

<a href="endereço">

Digite o título da página depois da tag âncora e feche com:

</a>

Exemplo:

<a href="http://www.hsw.com.br"> HowStuffWorks </a>

Vai ficar assim na sua página:

HowStuffWorks

Você também pode combinar listas com marcadores e links para criar uma lista de links.

Nova janela
Se você não quiser que os visitantes abandonem sua página quando clicarem em um link para outro site, adicione esta tag à sua tag âncora. Quando o visitante clica no link, ao invés de ele sair do seu site e entrar em outro, uma nova janela será aberta para mostrar o destino do link:

target="_blank"

Exemplo:
<a href="http://www.hsw.com.br" target="_blank">

Cor do link
Azul é a cor padrão para links. Mas você pode alterar as cores dos seus links, inserindo estas tags dentro da tag <body>:

  • link="cor"
  • vlink="cor"
Vlink são os "links visitados". Os links mudam de cor quando foram visitados. Se você não quiser que os links visitados mudem de cor, basta atribuir a mesma cor ao links e vlinks.

Exemplo: <body link="green" vlink="green">

Link para receber e-mail
Se você quiser receber e-mails das pessoas que visitarem seu site, use a tag âncora a seguir:

<a href="mailto:seu_endereco_de_email">

Digite novamente seu endereço de e-mail (ou o texto que você quiser para seu link) depois da tag. Feche a tag com:

</a>

Exemplo:

<a href="mailto:exemplo@howstuffworks.com"> Envie-me um e-mail </a>

Vai ficar assim na sua página:

Envie-me um e-mail

Criando links que levam para seu próprio site
As tags âncora não são usadas somente para criar links para outros sites na internet. Você também pode usá-las para exibir links que levam a informações localizadas dentro do seu próprio site. Neste caso, você pode omitir o prefixo "http://www" e incluir somente o nome do arquivo html:

Exemplo: <a href="empresa.htm"> Sobre a Empresa </a>

Para criar um link para uma parte específica da página, você precisará dar um nome às seção à qual está se referindo e colocar este nome dentro da tag âncora do link. Assim:

Dê um nome para qualquer seção do seu site, inserindo a tag a seguir imediatamente antes da seção específica à qual você quer que o link se refira. Você pode escolher qualquer palavra, letra ou caractere para usar como nome:

<a name="nome">

Exemplo: <a name="5">

Na tag âncora, você vai se referir a esta parte da página ao inserir um sinal de "#" na frente do nome. Se o link se referisse a um lugar dentro da página onde o link está, a tag âncora que liga à parte nomeada seria assim:

<a href="http://www.hsw.com.br/#5"> Sobre a Empresa </a>

Se o link se refere a um documento html que não a página onde o link está, inclua o nome do arquivo html também.

Exemplo: <a href="http://www.hsw.com.br/company.htm#5"> Sobre a Empresa </a>

Adicionando imagens e gráficos
Coloque qualquer imagem digital na sua página com a tag a seguir:

<img src="nome do arquivo de imagem.extensão">

As imagens na internet são ou arquivos GIF (pronuncia-se "guif") ou arquivos JPG (pronuncia-se "jota peg"). Qualquer imagem terá uma destas duas extensões, portanto se sua imagem chama "logo", será ou "logo.gif" ou "logo.jpg".

Não se esqueça de armazenar as imagens e gráficos que vão aparecer na sua página na mesma pasta onde está seu arquivo "html". Do contrário, seu computador não conseguirá encontrar a imagem que você quer exibir. Também não se esqueça de digitar o nome da imagem exatamente como ele está salvo na pasta - nomes de arquivo diferenciam maiúsculas e minúsculas.

Justificação
Por padrão, seu texto e suas imagens serão justificados à esquerda quando exibidos no navegador, o que significa que eles serão automaticamente alinhados à margem esquerda. Se você quiser "centralizar" qualquer parte da sua página, pode usar a tag a seguir:

<center>

Finalize a centralização com a tag de fechamento correspondente:

</center>

Você também pode criar códigos de "divisão"; uma palavra, uma linha de texto, ou uma página inteira podem ser justificados do jeito que você quiser.

Comece a divisão com a tag de divisão de alinhamento, incluindo a justificação que você quer para o texto ou imagem - ou seja, direita (right), esquerda (left), centro (center):

Exemplo: <div align="center">

Encerre a divisão de justificação de alinhamento com a tag:

</div>

Com o que acabou de aprender neste artigo, você pode começar a criar páginas de internet bem interessantes e atraentes. Tente criar uma página ou duas usando as ferramentas e tags que discutimos. Se você estiver ansioso para que o mundo veja sua obra de arte, então pule para o capítulo "Colocando sua página no ar" para aprender a publicar sua nova página.