Google Chrome
Mozilla Firefox
Internet Explorer 9+Formatação dos Textos
Agora que conhecemos algumas das principais tags da estrutura básica de HTML, que tal fixar o que aprendemos por meio de um infográfico? Clique nas tags.
<html>
Envolve praticamente todo o conteúdo da página e informa ao navegador que o conteúdo dentro dela é HTML.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
</body>
</html>
<title>
Informa o título da página para o navegador, auxiliando os motores de busca a encontrarem seu site quando é feita uma pesquisa sobre determinado assunto.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
</body>
</html>
<head>
Corresponde ao cabeçalho. Dentro dela, inserimos as informações que o navegador vai ler, como títulos, descrições, palavras-chaves e outras.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
</body>
</html>
<meta>
Fornece dados aos navegadores e motores de busca sobre o documento HTML em que estão inseridas. Também é utilizada na formatação de caracteres especiais.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
</body>
</html>
<body>
É responsável por expor o conteúdo para o usuário final.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
</body>
</html>
<br>
Corresponde a uma quebra de linha. Por ser uma tag nula, não precisa do </br> para o fechamento.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br>
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s,<br> when an unknown printer took a galley of type and scrambled it to
make a type specimen book.<br> It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchanged.<br>
It was popularised in the 1960s with the release<br> of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing<br>
software like Aldus PageMaker including versions of Lorem Ipsum.
</body>
</html>
<p>
Significa parágrafo e tem a função de separar blocos de texto.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p>Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of
a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on purpose (injected humour and the like)
.</p>
</body>
</html>
<hr>
Gera uma linha horizontal, acarretando a quebra do texto. É uma tag nula, o que elimina a necessidade de fechá-la.
exemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<hr>
<p>Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of
a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on purpose (injected humour and the like)
.</p>
</body>
</html>
<h>
Representa os títulos no HTML.
exemplo
abertura da tag <h1>
fechamento da tag <h1>
abertura da tag <h2>
fechamento da tag <h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum?</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took
a galley of type and scrambled it to make a type specimen book. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.</p>
<p><h2>Why do we use it?</h2>
It is a long established fact that a reader will be distracted by the readable content of
a page when looking at its layout. The point of using Lorem Ipsum is that it has a
more-or-less normal distribution of letters, as opposed to using 'Content here, content
here', making it look like readable English. Many desktop publishing packages and web
page editors now use Lorem Ipsum as their default model text, and a search for 'lorem
ipsum' will uncover many web sites still in their infancy. Various versions have evolved
over the years, sometimes by accident, sometimes on purpose (injected humour and the like)
.</p>
</body>
</html>
<b>
Aplica negrito ao texto. É usada para destacar uma palavra.
exemplo
aplicação de negrito utilizando a tag <b>
aplicação de negrito utilizando a tag <strong>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting <strong>industry
</strong>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<strong>
Aplica negrito ao texto. É usada para representar algo importante, sério, urgente.
exemplo
aplicação de negrito utilizando a tag <b>
aplicação de negrito utilizando a tag <strong>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting <strong>industry
</strong>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<i>
Aplica itálico ao texto. É usada em termos técnicos.
exemplo
itálico aplicado com a tag <i>
itálico aplicado com a tag <em>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<i>Lorem Ipsum</i> is simply dummy text of the printing and typesetting <em>industry
</em>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<u>
Adiciona sublinhado ao texto.
exemplo
inserção de sublinhado com a tag <u>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<u>Lorem Ipsum</u> is simply dummy text of the printing and typesetting <sub>industry
</sub>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<sub>
O texto dentro da tag <sub> se torna subscrito.
exemplo
inserção de subscrito com a tag <sub>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<u>Lorem Ipsum</u> is simply dummy text of the printing and typesetting <sub>industry
</sub>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<sup>
Coloca o texto como sobrescrito.
exemplo
inserção de sobrescrito com a tag <sup>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<u>Lorem Ipsum</u> is simply dummy text of the printing and typesetting <sub>industry
</sub>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. <sup>It</sup>
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>
<em>
Aplica itálico ao texto. É usada para dar ênfase a uma palavra.
exemplo
itálico aplicado com a tag <i>
itálico aplicado com a tag <em>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Título da página</title>
</head>
<body>
<p><h1>What is Lorem Ipsum??</h1>
<i>Lorem Ipsum</i> is simply dummy text of the printing and typesetting <em>industry
</em>.<br> Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer<hr> took a galley of type and scrambled it to make a type
specimen book. <br>It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<hr>
</body>
</html>