Capítulo 6: Formatação de Texto

Formatação de Texto em HTML

Formatação de Texto: HTML oferece várias maneiras de destacar e estilizar texto, desde tags simples até CSS para controle completo da aparência. Isso torna as páginas mais atrativas e legíveis.

As formatações que podemos aplicar aos textos incluem:

Negrito e Ênfase

Destacar palavras importantes usando ou

Cores de Fonte

Colorir texto usando com CSS

Itálico

Inclinar texto com ou

Sublinhamento

Sublinhar texto importante com

1. Negrito - Tags e

O negrito é usado para enfatizar palavras ou frases importantes, destacando-as do restante do texto.

- Indica importância semântica (recomendado)

- Aplica apenas formatação visual em negrito

<p>A região <strong>Nordeste</strong> possui características únicas.</p>
<p>As <b>plantas xerófitas</b> são adaptadas ao clima seco.</p>
            

A região Nordeste possui características únicas.

As plantas xerófitas são adaptadas ao clima seco.

2. Cor da Fonte - Tag com CSS

Para destacar palavras com cores diferentes, usamos a tag combinada com CSS.

<p>Os animais podem ser <span style="color: red;">carnívoros</span>, 
<span style="color: green;">herbívoros</span> ou 
<span style="color: blue;">onívoros</span>.</p>
            

Os animais podem ser carnívoros, herbívoros ou onívoros.

3. Itálico - Tags e

O itálico inclina as letras e é principalmente usado para nomes científicos em latim ou para dar ênfase sutil.

- Indica ênfase semântica (recomendado)

- Aplica apenas formatação visual em itálico

<p>O nome científico do mandacaru é <em>Cereus jamacaru</em>.</p>
<p>Esta é uma palavra em <i>itálico</i> para destaque.</p>
            

O nome científico do mandacaru é Cereus jamacaru.

Esta é uma palavra em itálico para destaque.

4. Sublinhamento - Tag

O sublinhamento adiciona uma linha reta abaixo da palavra ou frase para destacá-la.

<p><u>A cadeia alimentar da Caatinga é um intrincado sistema 
que reflete a adaptabilidade e resiliência das espécies 
deste bioma único</u>.</p>
            

A cadeia alimentar da Caatinga é um intrincado sistema que reflete a adaptabilidade e resiliência das espécies deste bioma único.

5. Estilizando Parágrafos com CSS

Para aplicar formatações mais avançadas a todos os parágrafos, usamos CSS dentro da tag <style> no <head>.

Estrutura CSS Básica

<head>
  <style>
    p {
      text-align: justify;
      font-size: 20px;
      text-indent: 30px;
      margin-right: 10px;
      margin-left: 10px;
    }
  </style>
</head>
                

Sintaxe CSS: Cada propriedade CSS segue o padrão propriedade: valor; e deve terminar com ponto e vírgula (;).

text-align: justify; - Alinha o texto nas duas margens

font-size: 20px; - Define o tamanho da fonte

text-indent: 30px; - Cria espaçamento no início do parágrafo

margin-left/right: 10px; - Define margens laterais

🎯 Prepare-se para os Exercícios!

Agora você vai praticar:

Exercício 1: Formatações básicas (negrito, itálico, sublinhado)
Exercício 2: Texto colorido com diferentes cores
Exercício 3: Página completa com CSS para estilizar parágrafos

Prática: Formatando Texto

Vamos praticar as diferentes formas de formatar texto! Experimente cada formatação e veja o resultado instantaneamente.

Aula Atual: Formatações Básicas
💡 Dica: Combine diferentes formatações para criar textos mais expressivos!
⚠️ Importante: As tags html e body não podem ser usadas nos exercícios abaixo.

Capítulo 6: Formatação de Texto

Formatação de Texto em HTML

1. Negrito - Tags <strong> e <b>

2. Cor da Fonte - Tag <span> com CSS

3. Itálico - Tags <em> e <i>

4. Sublinhamento - Tag <u>

5. Estilizando Parágrafos com CSS

Prática: Formatando Texto

📝 Editor de Código

🌟 Resultado