por Marshall Brain – traduzido por HowStuffWorks Brasil

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>

Não perca a próxima parte deste tutorial. Até a próxima!

Tomás Vásquez
http://www.tomasvasquez.com.br