Formatação de texto em HTML e CSS

Tutorial que mostra passo a passo como é feito a estruturação de texto em HTML e formatação com CSS. Isto de acordo com os padrões web de criação de páginas web.

A formatação de texto em HTML e CSS visa um melhor resultado para a apresentação das suas páginas. Primeiro é preciso entender que a estruturação do texto é geito emm HTML e a formatação é feita em CSS, salvo em alguns casos onde algumas formatações podem ser feitas em HTML. 

Veremos inicialmente as tags que podemos usar para trabalhar com textos em HTML. Essas tags são usadas para fazer a estruturação e formatação de textos. Outras tags também trabalham com texto, porém dentro de outro contexto.

Tags <h1>, <h2>, <h3>, <h2>, <h5>, <h6>

São tags usadas para criar títulos, sendo o <h1> o maior título e o <h6> o menor. Por padrão essas tags vem com formatação em negrito e com fonte maior que o texto normal.

Exemplos:

<h1>Exemplo de texto com H1</h1>
<h2>Exemplo de texto com H2</h2>
<h3>Exemplo de texto com H3</h3>
<h2>Exemplo de texto com H4</h2>
<h5>Exemplo de texto com H5</h5>
<h6>Exemplo de texto com H6</h6>

Tags <p> parágrafos, <span> textos em linha e <br> quebra de linha

  • A tag <p> é usada para criar textos em parágrafos.
  • A tag <span> é usada para criar um texto em linha. Ela é usada quando queremos diferenciar parte do texto de um parágrafo.
  • A tag <br> é usada para criar uma quebra de linha em um parágrafo.

Exemplo

<p>Este texto é um parágrafo </p>

<p>Este texto irá <span>destacar</span> uma palavra e para isto usou o span </p>

<p>Este texto terá uma quebra de linha <br>Esta parte do texto já estará na linha abaixo</p>

Tags de formatação: <b> <strong> <i> <small>

Apesar de não ser recomendado, é possível fazer formatação com HTML. No entanto o correto é usar CSS para fazer a formatação.

  • <b> e <strong> fazem a mesma coisa, ou seja, coloca o texto em negrito.
  • <i> é usada para colocar o texto em itálico
  • <small> é usado para colocar um texto em fonte reduzida.

Exemplos:

<p>Este <b>texto</b> está com algumas <strong>palavras</strong> em negrito</p>

<p>Este <i>texto</i> está com duas <i>palavras</i> em itálico</p>

<p>Este texto contém palavras com <small>tamanho reduzido</small></p>

Estruturando  textos com HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Estruturação e formatação de textos</title>
</head>
<body>
    <h1>Desenvolvimento web</h1>
    <h2>HTML - HyperText Markup Language (Linguagem de Marcação de Hipertexto)</h2>
    <p>
        É uma linguagem de marcação de texto para ser interpretada pelos navegadores.
        Sua principal finalidade é fazer a estruturação das&nbsp; páginas através de
        um conjunto de tags <span>(etiquetas)</span> que servem para definir a forma
        na qual se apresentará o texto e outros elementos da página.
    </p>
    <h2>CSS - Cascading Style Sheets (Folha de Estilos em Cascata)</h2>
    <p>
        É uma linguagem de estilo utilizada para definir a apresentação de documentos
        escritos em uma linguagem de marcação, como <span>HTML ou XML</span>.
        Seu principal benefício é prover a separação entre o formato e o conteúdo de
        um documento.
    </p>
    <h2>XML - eXtensible Markup Language</h2>
    <p>
        É uma recomendação da <span>W3C</span> para gerar linguagens de marcação para
        necessidades especiais. Capaz de descrever diversos tipos de dados.
        Seu propósito principal é a facilidade de compartilhamento de informações
        através da Internet.
    </p>
</body>
</html>

Analisando o código:

  • Na linha 7 fazemos um link com um arquivos CSS externo, neste exemplo estamos usando o CSS de forma linkado, conforme visto anteriormente.
  • Na linha 11 eu uso a tag <h1> para definir o título principal do documento.
  • Nas linhas 13, 21 e 29 é usado a tag <h2> para definir subtítulos do documento.
  • Nas linhas 14, 22 e 30 é usado a tag <p> para definir os parágrafos de textos.
  • Observe nas linhas 17, 24 e 31 o uso da tag <span> no meio do texto. Esta tecnica é usada quando queremos dar uma formatação especial para algumas palavras, então usamos o <span> que não desqualifica o parágrafo e permite modificar apenas parte do texto.

Formatando textos com CSS

body{
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
    color: #333333;
    font-size: 12px;
}
p{
    line-height: 20px;
    text-align: justify;
}
h1{
    font-size: 24px;
    color: #003366;
    text-transform: uppercase;
}
h2{
    font-size: 14px;
    padding: 5px;
    background-color: #E3E3E3;
    color: #4C4C4C;
}
span{
    font-weight: bold;
    color: #FF0000;
    background-color: #FFFF00;
}

Analisando as propriedades usadas acima:

  • font-family: Define a família de fontes que serão usadas para formatar o texto. Na formatação da tag body a fonte principal é a Arial, se não tiver Arial, troca por verdana, se não tiver verdana, troca por tahoma e não existindo também a tahoma será substituída por qualquer fonte sem serifa (sans-serif).
  • O Browser usa as fontes do micro do usuário, portanto seria arriscado definirmos apenas uma fonte para a formatação, pois não sabemos quais fontes o usuário dispõe na sua máquina.
  • font-size: Define o tamanho da letra. A medida que usamos foi o px (pixel), mas outras medidas podem ser consideradas.
  • color: Define a cor do texto. Formas possíveis de expressar o valor da cor:
  • hexadecimal - (#ff00ff)
  • nome da cor - red, blue, green, etc
  • valor RGB - (100, 255, 204)
  • line-height: Define a altura da linha. Esta propriedade é importante para deixarmos o textos um pouco mais espaçado entre as linhas, tornando a leitura mais agradável.
  • text-transform: Valores possíveis:
  • uppercase (caixa alta)
  • lowercase (caixa baixa)
  • capitalize (primeira letra maiúscula e o restante minúscula)
  • none (o texto é mostrado como foi digitado.
  • text-align: Define o alinhamento do texto dentro do parágrafo. Valores possíveis:
  • left - texto alinhado a esquerda
  • center - texto centralizado
  • right - texto alinhado a direita
  • justify - texto justificado
     



 

Veja também:




// Comentários

Pedjah // Pereira Barreto // 11/08/2009 09:06:00

Nossa, me ajudou muito esse artigo. Ants eu quebrava a cabeça para tentar ficar legal o html. Fazia muitas gambiarras. Mas agora deu certo de uma forma simples.

Tenho apenas outras dúvida: quando passo o mouse sobre o botão do menu horizontal, tem como ele ficar com um efeito, tipo que stá pressionado.

Seria nesse blog: pedjah.blogspot.com e o botão seria a data de atualização.

Muito obrigado

Jacqueline // Recife // 28/05/2010 22:25:00

Essa questão é bom vc dar uma olhada em códigos css , java script tenho essa home aqui com esse efeito www.narotadoturismo.freeoda.com n sei se é isso q vc fala! se for, da uma lida no q eu te falei ^^

Junior // São Paulo // 30/07/2010 12:04:00

Muito obrigado pelo artigo Luis! Muito obrigado mesmo. Eu estava com muita dificuldade em fazer com que a formatação de meu blog:

http://dicasdedecoracoes.com/guarda-moveis/

ficasse em ordem, mas agora consegui. Ainda tenho algumas dúvidas, mas vou continuar fuçando pra ver se consigo resolver

Henrique Pacheco // São Paulo // 05/01/2011 16:50:00

Uma correção no texto:

"Apesar de não ser recomendado, é possível fazer formatação com HTML. No entanto o correto é usar CSS para fazer a formatação.

<b> e <strong> fazem a mesma coisa, ou seja, coloca o texto em negrito.

<i> é usada para colocar o texto em itálico

<small> é usado para colocar um texto em fonte reduzida."

a tag <strong> é recomendada pelo W3C, pois ela serve para dar destaque ao texto(e dessa forma sistemas computacionais compreendem que esta parte é de maior relevância), não para formatá-lo(mudaria apenas o visual, onde apenas humanos compreenderiam). As outras apenas para formatação mesmo.

Lembrando que no html5 as tags <b> e <i> voltam a ser recomendados como destaques alternativos(e não necessariamente negrito ou itálico, vide algarimos orientais onde estes não são possíveis).

João Paulo Tinoco Alavrenga // Campos dos Goytacazes // 11/02/2011 19:12:00

Eu estava procurando alguma tag, que faz com que um texto fique dentro de um determinado objeto, porque eu fiz uma caixa, porém, se você digitar:

"aaaaaa" (maior, é claro) sem espaços, ele continua, sem se importar com o tamanho da página, queria saber como faz pra que quando texto chegue na parede, haja uma quebra de linha.





 

2007-2012   //   Blog do Luis   //   Política de Privacidade   //   Eu creio em Deus