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.
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>
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>
Apesar de não ser recomendado, é possível fazer formatação com HTML. No entanto o correto é usar CSS para fazer a formatação.
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>
<!DOCTYPE html><html lang="en">
<head>
<title>Estruturação e formatação de textos</title>
<link rel="stylesheet" href="estilo.css">
</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:
Abaixo o resultado do HTML acima:
Perceba que o texto ficou sem formatação. Isto ocorre porque o HTML apenas faz a estruturação do conteúdo, já a formatação deve ser feita com CSS, como veremos abaixo.
body{font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 16px;
}
p{
line-height: 150%;
text-align: justify;
}
h1{
font-size: 30px;
color: #003366;
text-transform: uppercase;
}
h2{
font-size: 20px;
padding: 5px;
background-color: #E3E3E3;
color: #4C4C4C;
}
span{
font-weight: bold;
color: #FF0000;
background-color: #FFFF00;
}
Analisando as propriedades usadas acima:
Agora o resultado do HTML com a formatação em CSS, mostrado acima:
COMPARTILHE: Facebook Twitter WhatsApp