Formatando textos com HTML

Hoje vou ensinar a vocês como formatar textos em HTML. Lembrando que utilizaremos algumas tags de formatação padrão dos navegadores e não utilizaremos CSS ainda, este será o assunto de outra postagem.
Anteriormente, aprendemos como criar uma página HTML e inserir um texto ou uma frase que apareceria no navegador Web de forma não formatada. Então chegamos ao seguinte código:
<!DOCTYPE html>
<html>
           <head>
                     <title>Digite seu título aqui!</title>
           </head>
           <body>
                     Esta é minha primeira página HTML!
           </body>
</html>
Agora abra o arquivo index.html, que criamos na postagem N° 1, com o Notepad++ e começaremos a editar o mesmo. Não esquecendo de que todas as tags abaixo devem ser aplicadas somente entre <body> e </body>, ou seja, no corpo da página HTML.

Títulos:

As tags padrão para títulos que já estão pré-formatadas nos navegadores Web são: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>. Estas tags já estão formatadas em negrito e com uma letra maior do que a do texto convencional. A única diferença entre estas tags é que a <h1> possui a maior tamanho de letra e a letra vai diminuindo de tamanho até chegar até a <h6>, que possui o menor tamanho de letra.
A sua utilização é comum a das tags explicadas na postagem N°1, devendo ser abertas e fechadas com a utilização de uma barra (/).
Veja os exemplos:
<h1>Seu título aqui!</h1>
<h2>Seu título aqui!</h2>
<h3>Seu título aqui!</h3>
<h4>Seu título aqui!</h4>
<h5>Seu título aqui!</h5>
<h6>Seu título aqui!</h6>

Quebras de linha:

Você já deve ter percebido que não importa à quantidade de enters que você aplica a uma determinada linha de seu texto a quebra de linha nunca acontece. Isso ocorre porque esta função de quebra de linha é designada a tag <br />, cuja a sua utilização é diferenciada, pois a mesma indica uma tag "completa", aberta e fechada.
Exemplo:
Este é o meu texto <br /> com quebra de linha.
Note que mesmo digitando tudo em uma única linha, a hora que o arquivo é aberto no navegador a quebra de linha acontece aonde a tag <br /> foi colocada.

Parágrafos:

A tag que tem a função de formatar um bloco de texto como parágrafo é a tag <p>. Ela é utilizada da mesma forma que as tags dos títulos.
Exemplo:
<p>Este é o meu parágrafo em HTML que aprendi a formatar utilizando a linguagem de programação HTML, explicada nos artigos do site do Maik Basso.</p>

Outras tags para a formatação de textos:

Aqui em baixo citarei várias outras tags para a formatação de textos em HTML, e em seguida seus respectivos exemplos de utilização.
1- Estilos de texto:
Tag
Função
Exemplo
<b>, <strong>
Colocam o texto em negrito. <b>Texto em negrito.</b>
<strong>Texto em negrito.</strong>
<i>
Coloca o texto em itálico. <i>Este texto está em itálico.</i>
<u>
Coloca um sublinhado no texto. <u>Texto sublinhado.</u>
<sub>
Coloca o texto como subscrito. Texto <sub>subscrito.</sub>
<sup>
Coloca o texto como sobrescrito. Texto <sup>sobrescrito.</sup>
2- Fontes:
Em HTML é possível alterar o tipo da fonte, a sua cor e o seu tamanho, tudo com a tag <font>.
>>>Tipo da fonte:
Usa-se o comando face para designar o tipo da fonte dentro da tag <font>.
Os valores a serem aplicados no comando face são: Arial, Verdana entre outros nomes de letras.
Exemplo:
<font face="Arial">Texto com fonte do tipo Arial."</font>
>>>Cor da fonte:
Usa-se o comando color para designar a cor da fonte dentro da tag <font>.
Seus possíveis valores são: nome de cores em inglês (blue, black, yellow, ...), cores representadas por códigos hexadecimais (#FF0000 (código da cor vermelha em hexadecimal)), entre outras formas. Mas não é preciso sair decorando números de cores, para isto existem tabelas e softwares que auxiliam no processo.
Exemplo:
<font color="red">Texto com fonte em cor vermelha.</font>
>>>Tamanho da fonte:
Usa-se o comando size para designar o tamanho da fonte dentro da tag <font>.
Os possíveis valores são: valores em Pixel (exemplo: 12px); valores em Keyword (xx-small, small, medium, large, x-large, e xx-large); valores EM (1em (lembrando que 1em=16px)); valores em Porcentagem (15%); valores em PT (12pt (usado somente para páginas que serão impressas)).
Exemplo:
<font size="20px">Texto com fonte em tamanho de 20 píxeis.</font>
>>>Combinação de comandos:
Também à possibilidade de se combinar comandos dentro de tags, sem a necessidade de uma ordem específica.
Exemplo:
<font color="blue" face="Verdana" size="12px">Texto com fonte azul do tipo Verdana e tamanho de 12 píxeis.</font>
3- Tags pré-formatadas de tamanho do texto:
<small> - Coloca o texto em uma letra de menor tamanho.
Exemplo:
<small>Texto com letra reduzida.</small>
<big> - Coloca o texto em uma letra de maior tamanho.
Exemplo:
<big>Texto com letra grande.</big>
4- Alinhamento de texto:
>>>Tag pré-formatada:
<center> - Centraliza o texto.
Exemplo:
<center>Texto centralizado.</center>
>>>Alinhando com as tags <p> ou <div>:
Como eu já havia explicado acima é possível inserir comandos dentro de tags.
O comando responsável pelo alinhamento é o comando align que pode assumir quatro valores: center (alinhar no centro); left (alinhar à esquerda); right (alinhar a direita); justify (texto justificado).
Para alinhar textos geralmente utilizamos o comando align nas tags <p> e <div> (div vem de divisão, ou seja, tag que cria blocos.).
Exemplos:
<p align="center">Texto centralizado.</p>
<div align="right">Texto alinhado à direita.</div>
5- Outros:
<hr /> - Cria um separador, ou seja, uma linha horizontal.
Exemplo:
Aqui embaixo aparecerá um separador.<hr />

Combinação de tags:

Também temos a possibilidade de combinar quaisquer tipos de tags, gerando estilos diferenciados. As tags podem ser abertas e fachadas sem a necessidade de uma ordem.
Exemplo:
<center><font color="red" size="15px"><b><i>Texto centralizado com letra vermelha, tamanho 15px, negrito e itálico.</i></b></font></center>
Ou:
<font color="red" size="15px"><b><center><i>Texto centralizado com letra vermelha, tamanho 15px, negrito e itálico.</font></center></i></b>



Postagens relacionadas:

43 comentários:

Santos disse...

Olá, estou fazendo o curso de webmaster,atualmente lidando com linguagem de computação, para a criação de sites. A pedido de meu professor, estou tentando compreender essa linguagem que não dominava. Resolvi fazer pesquisa e entrei neste site. Para minha surpresa, as explicações que encontrei aqui, são simples e claras. Com certeza, encontrei uma parceria ótima para o meu aprendizado. Voces estão de parabéns. Continuem assim, ok?

Brasil Top Pet disse...

Daora

Brasil Top Pet disse...

legal

Marcos disse...

Obrigado pela ajuda!
Esses códigos em HTML disponíveis no site me ajudaram muito.
Precisei formatar textos em HTML para inserir no site.

Anônimo disse...

parabems

Guia Blogger disse...

Obrigado por compartilhar seus conhecimentos.

Abraço

Anônimo disse...

valeu mesmo

lili disse...

eu estou fazendo um curso disso

Unknown disse...

to apredendo a desenvolver site e adorei essas explicações. sao claras e faceis de entender

Anônimo disse...

fiz uma pagina em html com fundo azul e letras brancas. porém, quando algumas pessoas leem não veem nada porque o fundo sumiu. Por que será?

Ricardo
rr.c@uol.com.br

abs

Maik Basso disse...

Entre em contato comigo pela página de contato acrescentando seu código para que eu possa identificar seus possíveis erros.

William Barbosa disse...

Quebrou o galho de muita gente, vlw

Unknown disse...

olá qual seria o comando para alinha o titulo do texto eu não estou conseguindo please me ajudem......

Maik Basso disse...

O comando é align, porém está pratica hoje em dia deve ser feita usando CSS.

Unknown disse...

Preciso fazer uma torre de hanoi de dois pinos, em codigo html.
ta dificil.
Alguem pode ajuadr?

Maik Basso disse...

Você deverá utilizar algumas div's para construir o corpo da torre e depois utilizar CSS para alinhá-las e atribuir os estilos e formar a torre, ou então utilizar um software gráfico para desenhar a torre, então fatiá-la e depois inserir as imagens com HTML e usar o CSS para alinhar.

Silvio Cesar disse...

Bom dia, você pode me ajudar?

Preciso colocar um vídeo em uma página (com execução na própria página) ao lado do texto, na direita. Qual comando tenho que usar?

silviocesar8@hotmail.com
Obrigado desde já.

Maik Basso disse...

Você pode utilizar Div's para separar o conteúdo do vídeo e utilizar CSS para posicionar tais elementos na página.

Dr Miguel Lopes disse...

Muito bom parabéns o design do site está um espectacular!Também sou web designer se quiserem conhecer o meu trabalho visitem imagingsitesworldwide.com obrigado!

J. Bazilio disse...

Transmitir o conhecimento de forma simples e clara é uma arte dos mestres!

Anônimo disse...

Exemplos simples, e simplesmente "FUNCIONAIS". Parabéns.

Anônimo disse...

Parabéns pela atitude, site muito bom me ajudou muito você tem muito talento cara vlw por ta compartilhando com nós! muito bom mesmo tudo que eu precisei estava ia RECOMENDO!

Unknown disse...

Muito obrigado mano me ajudou muito

Rubens disse...

Parabéns pelo tutorial, muito bem explicado

Unknown disse...

naice

Tiago disse...

Top, curti muito, me foi útil.

Anônimo disse...

im so happy for those es

Davi disse...

Otimo de novo

Anônimo disse...

Quebrou o galho de muita gente, vlw

Anônimo disse...

Muito bom me ajudou muito parabéns

Anônimo disse...

Finalmente, um tutorial inteligente. Obrigado e parabéns.

Anônimo disse...

Parabéns pelo excelente trabalho! O seu blog é demais!

Anônimo disse...

muito bom

Unknown disse...

me ajudou a diminuir a burrice

Rosa disse...

Achei muito legal esse site, aproveito para pedir sua ajuda: como faço redação (sinopse de filme) em HTML? Estou começando um trabalho e tenho dificuldades. Desde já,obrigada!

Unknown disse...

valeu cara !! ajudou bastante

EuMesmo disse...

Explicação muita boa

Anônimo disse...

Explicação muita boa

Unknown disse...

muito bom!!!! ajudou muito!

Unknown disse...

Boa tarde,

Valeu amigo, me ajudou aqui.

Sucesso!

Anônimo disse...

Sinceramente ajudou muito:)

Cristóvão Camunato disse...

É muito útil este site, poiscom ela aprendi a utilizar o HTML, algo que parecia ser muito dificil para mim.

Angelo disse...

Minha Mãe falava, não complica, faz o simples depois vai avançando.

Está página é perfeita. Obrigado maikbasso.

;)

Postar um comentário

Deixe um comentário referente ao assunto do post, compartilhe seu conhecimento, sua dúvida ou deixe uma sugestão.