Introdução ao Web Design
Prof° Ms. Claudio Benossi
Aula 04
Design Gráfico
Formatação de Texto
• A partir da versão 5 o HTML parou de
prestar atenção em formatação, e
passa o foco na semântica, que é o
significado das coisas, e assim a CSS,
que uma outra tecnologia, vai se focar
em formatação e estilo da página.
Formatação de Texto
• Continuando ...
Formatação de Texto
• Resultado
Formatação de Texto
• <b> - Negrito
Formatação de Texto
• Resultado
Formatação de Texto
• <i> - Itálico
Formatação de Texto
• Resultado
Formatação de Texto
• <em> - Enfatizar
Formatação de Texto
• Para o HTML 5 <i> e <em>
visualmente tem o mesmo resultado,
porém com relação a semântica é
diferente; <i> você diz ao navegador
que a letra ou palavra deve ser
exibida inclinada, no caso do <em>
você quer informar aos navegadores
que você quer enfatizar a letra ou
palavra de forma inclinada.
Formatação de Texto
• Resultado
Formatação de Texto
• Tags que não existe no HTML 5 - <u>
Formatação de Texto
• Resultado – Funciona, porém...
Formatação de Texto
• <s> - Riscado
Formatação de Texto
• Resultado
Formatação de Texto
• Nova tag do HTML 5 <del> substitui
<s>
Formatação de Texto
• Resultado
Formatação de Texto
• <span> - tag para formatar pequenos
trechos de textos
Formatação de Texto
• Resultado
Formatação de Texto
• Outras opções:
Formatação de Texto
• Resultado
Formatação de Texto
• Outras opções:
Formatação de Texto
• Resultado
Formatação de Texto
• <span style="text-decoration: none;>
Formatação de Texto
• Outras opções: Negrito
Formatação de Texto
• Resultado
Formatação de Texto
• Alinhamento
Formatação de Texto
• Resultado
Formatação de Texto
• Alinhamento e texto Endentado
Formatação de Texto
• Resultado
Formatação de Texto
• Vamos ajustar todos os parágrafos
Formatação de Texto
• Formatação global – Folha de Estilo
CSS
Formatação de Texto
• Resultado
Formatação de Texto
• Outros Exemplos de formatação <sub>
Formatação de Texto
• Resultado
Formatação de Texto
• <sub> e <sup>
Formatação de Texto
• Resultado
Formatação de Texto
• Exemplo prático
Formatação de Texto
• Resultado
Formatação de Texto
• Inserir um código estranho ao HTML
Formatação de Texto
• Resultado
Formatação de Texto
• Corrigindo as tags < >
Formatação de Texto
• Resultado
Formatação de Texto
• <pre>
Formatação de Texto
• Resultado
Design Digital
• Dúvidas?