Marcadores:
HTML
Editar 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>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.
<html>
<head>
<title>Digite seu título aqui!</title>
</head>
<body>
Esta é minha primeira página HTML!
</body>
</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:
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?
Daora
legal
Obrigado pela ajuda!
Esses códigos em HTML disponíveis no site me ajudaram muito.
Precisei formatar textos em HTML para inserir no site.
parabems
Obrigado por compartilhar seus conhecimentos.
Abraço
valeu mesmo
eu estou fazendo um curso disso
to apredendo a desenvolver site e adorei essas explicações. sao claras e faceis de entender
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
Entre em contato comigo pela página de contato acrescentando seu código para que eu possa identificar seus possíveis erros.
Quebrou o galho de muita gente, vlw
olá qual seria o comando para alinha o titulo do texto eu não estou conseguindo please me ajudem......
O comando é align, porém está pratica hoje em dia deve ser feita usando CSS.
Preciso fazer uma torre de hanoi de dois pinos, em codigo html.
ta dificil.
Alguem pode ajuadr?
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.
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á.
Você pode utilizar Div's para separar o conteúdo do vídeo e utilizar CSS para posicionar tais elementos na página.
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!
Transmitir o conhecimento de forma simples e clara é uma arte dos mestres!
Exemplos simples, e simplesmente "FUNCIONAIS". Parabéns.
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!
Muito obrigado mano me ajudou muito
Parabéns pelo tutorial, muito bem explicado
naice
Top, curti muito, me foi útil.
im so happy for those es
Otimo de novo
Quebrou o galho de muita gente, vlw
Muito bom me ajudou muito parabéns
Finalmente, um tutorial inteligente. Obrigado e parabéns.
Parabéns pelo excelente trabalho! O seu blog é demais!
muito bom
me ajudou a diminuir a burrice
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!
valeu cara !! ajudou bastante
Explicação muita boa
Explicação muita boa
muito bom!!!! ajudou muito!
Boa tarde,
Valeu amigo, me ajudou aqui.
Sucesso!
Sinceramente ajudou muito:)
É muito útil este site, poiscom ela aprendi a utilizar o HTML, algo que parecia ser muito dificil para mim.
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.