Formatação de Texto em HTML e CSS

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.
Home » Tecnologia
Facebook Twitter WhatsApp
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>
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 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

Formatação de Texto em HTML e CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Formatação de Texto em HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

FORMATAÇÃO DE TEXTO EM

A formatação de texto em HTML e CSS visa um melhor

Veremos inicialmente as tags que podemos usar para trabalhar

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

<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

 A tag <span> é usada para criar um texto em linha. Ela é

 A tag <br> é usada para criar uma quebra de linha em um

 <b> e <strong> fazem a mesma coisa, ou seja, coloca o

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

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

<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

<title>Estruturação e formatação de textos</title>

<h2>HTML - HyperText Markup Language (Linguagem de Marcação de

É uma linguagem de marcação de texto para ser interpretada pelos

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.

<h2>CSS - Cascading Style Sheets (Folha de Estilos em Cascata)</h2>

É uma linguagem de estilo utilizada para definir a apresentação de documentos

escritos em uma linguagem de marcação, como <span>HTML ou

Seu principal benefício é prover a separação entre o formato e o conteúdo de

<h2>XML - eXtensible Markup Language</h2>

É uma recomendação da <span>W3C</span> para gerar linguagens de

necessidades especiais. Capaz de descrever diversos tipos de dados.

Seu propósito principal é a facilidade de compartilhamento de informações

 Na linha 7 fazemos um link com um arquivos CSS externo,

 Na linha 11 eu uso a tag <h1> para definir o título principal

 Nas linhas 13, 21 e 29 é usado a tag <h2> para definir

 Nas linhas 14, 22 e 30 é usado a tag <p> para definir os

 Observe nas linhas 17, 24 e 31 o uso da tag <span> no meio

Formatando textos com CSS

font-family: Arial, Verdana, Tahoma, Sans-Serif;

Analisando as propriedades usadas acima:

 font-family: Define a família de fontes que serão usadas para

 O Browser usa as fontes do micro do usuário, portanto seria

 font-size: Define o tamanho da letra. A medida que usamos

 color: Define a cor do texto. Formas possíveis de expressar o

 nome da cor - red, blue, green, etc

 valor RGB - (100, 255, 204)

 line-height: Define a altura da linha. Esta propriedade é

 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

 left - texto alinhado a esquerda

 center - texto centralizado

 right - texto alinhado a direita

 justify - texto justificado

Você também pode gostar

Sua principal finalidade é fazer a estruturação das páginas através de