O documento discute formatação de texto em HTML5, incluindo formatação de parágrafos e cabeçalhos, uso de elementos como <p> e <h1-6>, e tags para negrito, itálico e sublinhado.
Formatação de texto
•Formatação de parágrafos
<!DOCTYPE html>
<html>
<body>
<p>Um parágrafo de texto em HMTL</p>
</body>
</html>
3.
Formatação de texto
Formataçãode cabeçalhos (Headings)
• Não deve utilizar os elementos heading para tornar o seu
texto maior ou simplesmente negrito
• Os motores de busca utilizam os headings para indexar a
estrutura e o conteúdo de uma página web.
• É importante a utilização correcta dos elemento heading para
criar uma estrutura de informação hierárquica.
• Os elementos <h1> devem ser os cabeçalhos principais,
seguidos dos elementos <h2>, depois os menos importantes
<h3> e assim sucessivamente até ao <h6>.
4.
Formatação de texto
•Formatação de cabeçalhos (Headings)
<!DOCTYPE html>
<html>
<body>
<h1>Um Título de Nível 1 em HMTL</h1>
<p>Um parágrafo de texto em HMTL</p>
</body>
</html>
5.
Formatação de texto
•Os Cabeçalhos têm 6 níveis de importância. Do maior para o menor:
<!DOCTYPE html>
<html>
<body>
<h1>Um Título de Nível 1 em HMTL</h1>
<h2>Um Título de Nível 2 em HMTL</h2>
<h3>Um Título de Nível 3 em HMTL</h3>
<h4>Um Título de Nível 4 em HMTL</h4>
<h5>Um Título de Nível 5 em HMTL</h5>
<h6>Um Título de Nível 6 em HMTL</h6>
</body>
</html>
6.
Formatação de texto
•Os parágrafos são definidos com o elemento <p>
<!DOCTYPE html>
<html>
<body>
<p>Isto é um parágrafo</p>
<p>Isto também é um parágrafo</p>
</body>
</html>
7.
Formatação de texto
•O fecho do elemento <p> não é obrigatório mas é
aconselhável.
<!DOCTYPE html>
<html>
<body>
<p>Isto é um parágrafo</p>
<p>Isto também é um parágrafo</p>
</body>
</html>
8.
Formatação de texto
•O atributo title
<!DOCTYPE html>
<html>
<body>
<p title=“Sobre o ISTEC”>ISTEC - Instituto Superior de Tecnologias
Avançadas</p>
<p>Isto também é um parágrafo</p>
</body>
</html>
9.
Formatação de texto
•Codificação de caracteres
<!DOCTYPE html>
<html>
<head>
<meta charset=“Latin-1”>
</head>
<body>
<p>Isto é um parágrafo</p>
<p>Isto também é um parágrafo</p>
</body>
</html>
10.
Formatação de texto
•Line Breaks
<p>The Earth<br>gets one hundred tons
heavier every day<br>due to falling space dust.</p>
11.
Formatação de texto
•O problema do poema
Escrever:
As armas e os barões assinalados
que da ocidental praia lusitana
por mares nunca dantes navegados
passaram inda além da Taporbana
12.
Formatação de texto
•O problema do poema
Se escrevermos tudo utilizando o elemento <p>, ou não colocamos
nenhum espaço:
<p>As armas e os barões assinalados,
Que da ocidental praia Lusitana,
Por mares nunca de antes navegados,
Passaram ainda além da Taprobana,
Em perigos e guerras esforçados,
Mais do que prometia a força humana,
E entre gente remota edificaram
Novo Reino, que tanto sublimaram;</p>
13.
Formatação de texto
•O problema do poema
Se escrevermos tudo utilizando o elemento <p>, ou
não colocamos nenhum espaço:
14.
Formatação de texto
•O problema do poema
Ou ficamos com espaços a mais
<p>As armas e os barões assinalados,</p>
<p>Que da ocidental praia Lusitana,</p>
<p>Por mares nunca de antes navegados,</p>
<p>Passaram ainda além da Taprobana,</p>
<p>Em perigos e guerras esforçados,</p>
<p>Mais do que prometia a força humana,</p>
<p>E entre gente remota edificaram</p>
<p>Novo Reino, que tanto sublimaram;</p>
Formatação de texto
•Solução
Texto Pré-Formatado - mantém os ENTER e os ESPAÇOS escritos em texto dentro do elemento <PRE>
<pre>
As armas e os barões assinalados,
Que da ocidental praia Lusitana,
Por mares nunca de antes navegados,
Passaram ainda além da Taprobana,
Em perigos e guerras esforçados,
Mais do que prometia a força humana,
E entre gente remota edificaram
Novo Reino, que tanto sublimaram;
</pre>
Formatação de texto
•<abbr title="Professor">Prof</abbr> Stephen
Hawking is a theoretical physicist and cosmologist.
• <acronym title="National Aeronautics and Space
Administration">NASA</acronym> do some crazy
space stuff.
22.
Formatação de texto
•address
• bold
• cite
<p><cite>A Brief History of Time</cite> by Stephen
Hawking has sold over ten million copies
worldwide.</p>
23.
Formatação de texto
•Defenitions
<p>A <dfn>black hole</dfn> is a region of space from
which nothing, not even light, can escape.</p>
24.
Formatação de texto
•Emphasis
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
25.
Formatação de texto
•Headings
<h1>This is a Main Heading</h1>
<h2>This is a Level 2 Heading</h2>
<h3>This is a Level 3 Heading</h3>
<h4>This is a Level 4 Heading</h4>
<h5>This is a Level 5 Heading</h5>
<h6>This is a Level 6 Heading</h6>
26.
Formatação de texto
•Linhas Horizontais - Horizontal Rules
• O elemento <hr> cria uma linha horizontal na página HMTL.
• Este elemento deve ser utilizado para separa conteúdos.
<p>Venus é o único planeta do sistema solar que
roda no sentido dos ponteiros do relógio.</p>
<hr>
<p>Jupiter é maior do que todos os outros planetas
juntos.</p>
27.
Formatação de texto
•Insert e Delete
<p>
It was the <del>worst</del> <ins>best</ins>
idea she had ever had.
</p>
28.
Formatação de texto
•Italic
<p>This is how we make a word appear
<i>italic</i>.</p>
<p>It's a potato <i>Solanum
teberosum</i>.</p>
<p>Captain Cook sailed to Australia on the
<i>Endeavour</i>.</p>
29.
Formatação de texto
•Paragrafos
<p>A paragraph consists of one or more
sentences that form a self-contained unit of discourse. The
start of a paragraph is indicated by a new line.</p>
<p>Text is easier to understand when it is split
up into units of text. For example, a book may have
chapters. Chapters can have subheadings. Under each
heading there will be one or more paragraphs.</p>
30.
Formatação de texto
•Blockquote
<blockquote
cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
<p>Did you ever stop to think, and
forget to start again?</p>
</blockquote>