Formatação de texto
HTML 5
Formatação de texto
• Formatação de parágrafos
<!DOCTYPE html>
<html>
<body>
<p>Um parágrafo de texto em HMTL</p>
</body>
...
Formatação de texto
Formatação de cabeçalhos (Headings)
• Não deve utilizar os elementos heading para tornar o seu
texto m...
Formatação de texto
• Formatação de cabeçalhos (Headings)
<!DOCTYPE html>
<html>
<body>
<h1>Um Título de Nível 1 em HMTL</...
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>...
Formatação de texto
• Os parágrafos são definidos com o elemento <p>
<!DOCTYPE html>
<html>
<body>
<p>Isto é um parágrafo<...
Formatação de texto
• O fecho do elemento <p> não é obrigatório mas é
aconselhável.
<!DOCTYPE html>
<html>
<body>
<p>Isto ...
Formatação de texto
• O atributo title
<!DOCTYPE html>
<html>
<body>
<p title=“Sobre o ISTEC”>ISTEC - Instituto Superior d...
Formatação de texto
• Codificação de caracteres
<!DOCTYPE html>
<html>
<head>
<meta charset=“Latin-1”>
</head>
<body>
<p>I...
Formatação de texto
• Line Breaks
<p>The Earth<br>gets one hundred tons
heavier every day<br>due to falling space dust.</p>
Formatação de texto
• O problema do poema
Escrever:
As armas e os barões assinalados
que da ocidental praia lusitana
por m...
Formatação de texto
• O problema do poema
Se escrevermos tudo utilizando o elemento <p>, ou não colocamos
nenhum espaço:
<...
Formatação de texto
• O problema do poema
Se escrevermos tudo utilizando o elemento <p>, ou
não colocamos nenhum espaço:
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...
Formatação de texto
• O problema do poema
Ou ficamos com espaços a mais
Formatação de texto
• Solução
Texto Pré-Formatado - mantém os ENTER e os ESPAÇOS escritos em texto dentro do elemento <PRE...
Formatação de texto
• Texto Negrito
• Texto Itálico
• Texto Sublinhado
Formatação de texto
• O Elemento Font
Formatação de texto
• strike
• big
• small
• tt
• address
• strong
• Blockquote
• Cite
• Code
Formatação de texto
• nobr
• center
• div
• span
Formatação de texto
• <abbr title="Professor">Prof</abbr> Stephen
Hawking is a theoretical physicist and cosmologist.
• <a...
Formatação de texto
• address
• bold
• cite
<p><cite>A Brief History of Time</cite> by Stephen
Hawking has sold over ten m...
Formatação de texto
• Defenitions
<p>A <dfn>black hole</dfn> is a region of space from
which nothing, not even light, can ...
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 ...
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 He...
Formatação de texto
• Linhas Horizontais - Horizontal Rules
• O elemento <hr> cria uma linha horizontal na página HMTL.
• ...
Formatação de texto
• Insert e Delete
<p>
It was the <del>worst</del> <ins>best</ins>
idea she had ever had.
</p>
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...
Formatação de texto
• Paragrafos
<p>A paragraph consists of one or more
sentences that form a self-contained unit of disco...
Formatação de texto
• Blockquote
<blockquote
cite="http://en.wikipedia.org/wiki/Winnie-the-Pooh">
<p>Did you ever stop to ...
Formatação de texto
• StrikeThrough <strike>
• Strong <strong>
• Superscript <sup>
• Subscript <sub>
• Emphasis <em>
Próximos SlideShares
Carregando em…5
×

02 a formatação de texto em HTML

210 visualizações

Publicada em

Formatar texto em HTML

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
210
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
6
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

02 a formatação de texto em HTML

  1. 1. Formatação de texto HTML 5
  2. 2. 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. 3. Formatação de texto Formatação de 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 13. Formatação de texto • O problema do poema Se escrevermos tudo utilizando o elemento <p>, ou não colocamos nenhum espaço:
  14. 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>
  15. 15. Formatação de texto • O problema do poema Ou ficamos com espaços a mais
  16. 16. 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>
  17. 17. Formatação de texto • Texto Negrito • Texto Itálico • Texto Sublinhado
  18. 18. Formatação de texto • O Elemento Font
  19. 19. Formatação de texto • strike • big • small • tt • address • strong • Blockquote • Cite • Code
  20. 20. Formatação de texto • nobr • center • div • span
  21. 21. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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>
  31. 31. Formatação de texto • StrikeThrough <strike> • Strong <strong> • Superscript <sup> • Subscript <sub> • Emphasis <em>

×