HTML - Formatação
Formatação de Texto
Texto em Negrito
Em HTML, você pode deixar o texto em negrito usando a tag <b> ou <strong>. A tag <b> é usada para chamar a atenção para o texto sem dar importância extra, enquanto a tag <strong> indica que o texto é importante ou urgente.
Exemplo: Texto em Negrito
<p>Este é um <b>texto em negrito</b> usando a tag b.</p>
<p>Este é um <strong>texto em negrito</strong> usando a tag strong.</p>Texto em Itálico
Para deixar o texto em itálico, você pode usar a tag <i> ou <em>. A tag <i> é usada para indicar um tom ou qualidade diferente do texto, como um termo técnico ou uma frase em outro idioma. A tag <em> é usada para enfatizar o texto.
Exemplo: Texto em Itálico
<p>Este é um <i>texto em itálico</i> usando a tag i.</p>
<p>Este é um <em>texto em itálico</em> usando a tag em.</p>Texto Sublinhado
Para sublinhar o texto, use a tag <u>.
Exemplo: Texto Sublinhado
<p>Este é um <u>texto sublinhado</u> usando a tag u.</p>Texto Riscado
Para criar texto riscado, você pode usar a tag <s> ou <del>. A tag <s> indica texto que não é mais correto ou relevante, enquanto a tag <del> representa texto que foi deletado.
Exemplo: Texto Riscado
<p>Este é um <s>texto riscado</s> usando a tag s.</p>
<p>Este é um <del>texto riscado</del> usando a tag del.</p>Subscrito e Sobrescrito
Para texto subscrito, use a tag <sub>. Para texto sobrescrito, use a tag <sup>.
Exemplo: Subscrito e Sobrescrito
<p>Este é um <sub>texto subscrito</sub> usando a tag sub.</p>
<p>Este é um <sup>texto sobrescrito</sup> usando a tag sup.</p>Texto Destacado
Para destacar texto, use a tag <mark>. Isso é útil para marcar palavras-chave ou frases importantes.
Exemplo: Texto Destacado
<p>Este é um <mark>texto destacado</mark> usando a tag mark.</p>Texto Pequeno
Para deixar o texto menor, use a tag <small>. Esta tag é usada para comentários laterais, letras pequenas ou avisos legais.
Exemplo: Texto Pequeno
<p>Este é um <small>texto pequeno</small> usando a tag small.</p>Alinhamento de Texto
Em HTML, você pode alinhar texto usando o atributo align. Esse atributo pode ser adicionado a várias tags, como <p>, <h1> a <h6>, <div>, entre outras. O atributo align aceita três valores: "left", "center" e "right".
Para alinhar o texto à esquerda, use align="left". Este é o alinhamento padrão para a maioria dos elementos.
Exemplo: Texto Alinhado à Esquerda
<p align="left">Este texto está alinhado à esquerda.</p>Para centralizar o texto, use align="center". Isso exibirá o texto no meio do elemento que o contém.
Exemplo: Título Centralizado
<h2 align="center">Este título está centralizado.</h2>Para alinhar o texto à direita, use align="right". Isso exibirá o texto no lado direito do elemento que o contém.
Exemplo: Texto Alinhado à Direita
<div align="right">Este texto está alinhado à direita.</div>É importante observar que, embora o atributo align ainda seja suportado em HTML5, é recomendado usar CSS para alinhamento de texto e outros propósitos de estilo. CSS oferece mais flexibilidade e controle sobre o layout e a aparência da sua página web.
Formatação de Fonte
Tamanho da Fonte
Em HTML, você pode alterar o tamanho da fonte usando o atributo size dentro da tag <font>. O atributo size aceita valores de 1 a 7, sendo 1 o menor e 7 o maior. O tamanho padrão é 3.
Exemplo: Código HTML para tamanho de fonte
<p>Este é um texto <font size="1">tamanho 1</font>.</p>
<p>Este é um texto <font size="3">tamanho 3</font>.</p>
<p>Este é um texto <font size="7">tamanho 7</font>.</p>No entanto, é importante notar que a tag <font> está obsoleta no HTML5 e deve ser evitada. Em vez disso, use CSS para controlar os tamanhos de fonte para maior flexibilidade e melhores práticas de design.
Exemplo: Estilos CSS para tamanho de fonte
<p style="font-size: 12px;">Este texto tem um tamanho de fonte de 12 pixels.</p>
<p style="font-size: 1.2em;">Este texto tem um tamanho de fonte de 1.2em.</p>Cor da Fonte
Para mudar a cor do texto em HTML, você pode usar o atributo color dentro da tag <font>. O atributo color aceita nomes de cores, valores hexadecimais ou valores RGB.
Exemplo: Código HTML para cor de fonte
<p>Este é um texto <font color="red">vermelho</font>.</p>
<p>Este é um texto <font color="#0000FF">azul</font>.</p>
<p>Este é um texto <font color="rgb(0, 128, 0)">verde</font>.</p>Assim como no tamanho da fonte, a tag <font> está obsoleta, e recomenda-se usar CSS para controlar as cores das fontes.
Exemplo: Estilos CSS para cor de fonte
<p style="color: red;">Este texto é vermelho.</p>
<p style="color: #0000FF;">Este texto é azul.</p>
<p style="color: rgb(0, 128, 0);">Este texto é verde.</p>Tipo de Fonte
Para especificar o tipo ou família da fonte em HTML, você pode usar o atributo face dentro da tag <font>. O atributo face aceita o nome da fonte que você deseja usar.
Exemplo: Código HTML para tipo de fonte
<p>Este é um texto em <font face="Arial">Arial</font>.</p>
<p>Este é um texto em <font face="Verdana">Verdana</font>.</p>
<p>Este é um texto em <font face="Courier New">Courier New</font>.</p>Mais uma vez, a tag <font> está obsoleta, e é melhor usar CSS para definir tipos de fonte.
Exemplo: Estilos CSS para tipo de fonte
<p style="font-family: Arial;">Este texto usa a fonte Arial.</p>
<p style="font-family: Verdana;">Este texto usa a fonte Verdana.</p>
<p style="font-family: 'Courier New';">Este texto usa a fonte Courier New.</p>Ao usar CSS, você pode especificar vários tipos de fonte na propriedade font-family, separados por vírgulas. Isso permite que o navegador use a primeira fonte disponível da lista.
Texto Pré-formatado
Em HTML, você pode mostrar texto pré-formatado usando a tag <pre>. A tag <pre> mantém espaços, quebras de linha e outras formatações dentro de seu conteúdo. Isso é útil quando você quer mostrar o texto exatamente como está escrito, como trechos de código, arte ASCII ou poesia.
Exemplo: Usando a Tag <pre>
<pre>
Este é um exemplo
de texto pré-formatado.
Ele mantém espaços,
quebras de linha,
e outras formatações.
</pre>No exemplo acima, o texto dentro da tag <pre> será mostrado com sua formatação original, incluindo múltiplos espaços e quebras de linha.
Por padrão, o texto dentro da tag <pre> é mostrado usando uma fonte monoespaçada, o que lhe dá uma aparência semelhante a código ou texto simples. O texto também tem uma largura fixa, o que significa que não se ajusta ao tamanho da janela do navegador.
É importante notar que, como a tag <pre> mantém a formatação, quaisquer tags HTML dentro de seu conteúdo serão mostradas como texto simples em vez de serem lidas como HTML. Se você quiser incluir tags HTML dentro de texto pré-formatado, precisa usar entidades HTML para representar os caracteres especiais, como < para < e > para >.
Exemplo: Entidades HTML em Texto Pré-formatado
<pre>
<p>Este é um exemplo de texto pré-formatado com entidades HTML.</p>
</pre>No exemplo acima, as tags HTML <p> e </p> são mostradas como texto simples usando suas entidades HTML correspondentes.
Usar a tag <pre> é uma maneira simples de mostrar texto pré-formatado mantendo sua formatação original, tornando-a uma ferramenta útil para apresentar trechos de código, arte ASCII ou qualquer outro conteúdo que dependa de espaçamento e quebras de linha específicos.
Formatação de Código
Em HTML, você pode formatar código usando a tag <code> para código em linha e uma combinação das tags <pre> e <code> para blocos de código.
Para mostrar código em linha, envolva o trecho de código com a tag <code>. Esta tag é usada para representar uma parte do código de computador dentro de uma frase ou parágrafo.
Exemplo de Código em Linha
Para criar um novo parágrafo em HTML, use a tag <p>.
No exemplo acima, a tag <p> está envolvida com tags <code> para mostrá-la como código em linha. Observe que os caracteres < e > são substituídos por suas entidades HTML (< e >) para evitar que sejam lidos como HTML.
Para blocos de código ou várias linhas de código, use a tag <pre> com a tag <code>. A tag <pre> mantém a formatação, enquanto a tag <code> dentro dela indica que o conteúdo é código.
Exemplo de Bloco de Código
<pre><code>
function greet(name) {
console.log("Hello, " + name + "!");
}
greet("John");
</code></pre>O uso da tag <code> para código em linha e das tags <pre> e <code> juntas para blocos de código ajuda a separar o código do texto regular, tornando seu documento HTML mais fácil de ler. Também permite que você estilize o código de maneira diferente usando CSS, se desejar.
Ao mostrar código em HTML, é importante usar entidades HTML para caracteres especiais como <, > e & para evitar que sejam lidos como HTML. Você também pode considerar o uso de uma biblioteca ou realçador de sintaxe para formatar e estilizar automaticamente seus blocos de código para uma melhor apresentação.
Citações em bloco
Em HTML, você pode criar citações em bloco usando a tag <blockquote>. Citações em bloco são usadas para indicar que o texto incluído é uma citação extensa de outra fonte. Os navegadores geralmente exibem citações em bloco com margens recuadas em ambos os lados para separá-las do conteúdo ao redor.
Exemplo: Criar uma citação em bloco
<blockquote>
"A única maneira de fazer um ótimo trabalho é amar o que você faz." - Steve Jobs
</blockquote>No exemplo acima, o texto citado está dentro da tag <blockquote>, que o renderizará com margens recuadas.
Você também pode incluir a fonte da citação usando o atributo cite dentro da tag <blockquote>. O atributo cite deve conter uma URL que aponte para a fonte da citação.
Exemplo: Citação em bloco com atributo cite
<blockquote cite="https://www.example.com/quotes">
"A inovação distingue um líder de um seguidor." - Steve Jobs
</blockquote>Para estilizar ainda mais as citações em bloco, você pode usar CSS. Algumas opções comuns de estilização incluem alterar o estilo da fonte, tamanho ou cor, ajustar o recuo ou adicionar uma cor de fundo ou borda.
Exemplo: Estilizar citações em bloco com CSS
<style>
blockquote {
font-style: italic;
font-size: 1.2em;
color: #333;
margin-left: 30px;
padding: 10px;
border-left: 5px solid #ccc;
background-color: #f9f9f9;
}
</style>
<blockquote>
"Design não é apenas como se parece e como se sente. Design é como funciona." - Steve Jobs
</blockquote>O uso de citações em bloco com formatação e estilização adequadas pode ajudar você a apresentar citações de maneira clara e atraente em seus documentos HTML. Elas fornecem uma maneira de indicar citações extensas e podem ser personalizadas para combinar com o design do seu site.