Este documento apresenta uma aula sobre formatação de páginas web usando HTML. A aula ensina como formatar texto em negrito, itálico e sublinhado usando tags apropriadas, como criar parágrafos e quebras de linha, inserir linhas horizontais, títulos e subtítulos, adicionar comentários, e como lidar com acentos e caracteres especiais usando entidades.

1. Faculdade Paraíso do
Ceará - FAP
Curso de Web e Design
HTML Básico
2011.1 1

2. Aula-003
Formatando Páginas Web
Inserindo Parágrafos e Quebras de Linhas
Linhas Horizontais, Títulos e Subtítulos
Comentários em Páginas Web
Acentuação e Caracteres Especiais
2011.1 Curso de HTML Básico – Derlival Barros 2

3. Formatando
Páginas Web
2011.1 Curso de HTML Básico – Derlival Barros 3

4. Formatando Páginas Web
• Na aula anterior, aprendemos a criar um documento
HTML simples;
• Agora iremos aprender a formatar uma página Web
usando tags;
• Primeiro iremos formatar uma página exibindo:
• Texto em negrito
• Texto em itálico
• Texto sublinhado
2011.1 Curso de HTML Básico – Derlival Barros 4

5. Exibindo Texto em Negrito
• Para exibir uma palavra ou parte de um texto em
negrito, utiliza-se a tag Bold (negrito);
• As tags responsáveis por esta função são: <b> e </b>.
• Ex.: <b>Bem Vindos ao Curso de HTML Basico</b>
2011.1 Curso de HTML Básico – Derlival Barros 5

6. Exibindo Texto em Itálico
• Para exibir uma palavra ou parte de um texto em itálico,
utiliza-se a tag Italic (itálico);
• As tags responsáveis por esta função são: <i> e </i>.
• Ex.: <i>Bem Vindos ao Curso de HTML Basico</i>
2011.1 Curso de HTML Básico – Derlival Barros 6

7. Exibindo Texto Sublinhado
• Para exibir uma palavra ou parte de um texto em
sublinhado, utiliza-se a tag Underline (sublinhado);
• As tags responsáveis por esta função são: <u> e </u>.
• Ex.: <u>Bem Vindos ao Curso de HTML Basico</u>
2011.1 Curso de HTML Básico – Derlival Barros 7

8. Parágrafos e
Quebras de
Linhas
2011.1 Curso de HTML Básico – Derlival Barros 8

9. Criando Parágrafos
• Você pode utilizar a tag Paragraph para agrupar linhas
de texto em uma página Web;
• O browser irá exibir o texto em um único parágrafo se
você não criar outros;
• As tags responsáveis por esta função são: <p> e </p>.
2011.1 Curso de HTML Básico – Derlival Barros 9

10. Quebras de Linhas
• Por padrão, os browsers automaticamente encaixam o
texto de uma página Web na janela do navegador;
• Se você precisar exibir uma parte do texto em uma nova
linha, você pode inserir uma quebra de linha utilizando a
tag Break;
• O browser exibe a parte do texto escrito após a tag
Break em uma nova linha;
• As tag responsável por esta função é: <br>.
2011.1 Curso de HTML Básico – Derlival Barros 10

11. Linhas
Horizontais
2011.1 Curso de HTML Básico – Derlival Barros 11

12. Linhas Horizontais
• Você usa linhas horizontais para dividir a informação
exibida em blocos diferentes;
• As tag responsável por esta função é: <hr>;
• O browser exibe uma linha horizontal na página Web no
ponto que você especificou a tag. Automaticamente é
inserida uma linha em branco antes da linha horizontal.
2011.1 Curso de HTML Básico – Derlival Barros 12

13. Títulos e
Subtítulos
2011.1 Curso de HTML Básico – Derlival Barros 13

14. Título e Subtítulos (Cabeçalhos)
• Vamos aprender como adicionar título e subtítulo em
uma página Web;
• Você pode inserir título e subtítulo em diferentes blocos
de texto, a fim de aumentar a legibilidade;
• Existem seis níveis de cabeçalho e eles são exibidos em
negrito;
• As tags responsáveis por esta função são: <h#> e
</h#>.
2011.1 Curso de HTML Básico – Derlival Barros 14

15. Comentários em
Páginas Web
2011.1 Curso de HTML Básico – Derlival Barros 15

16. Comentários
• Os comentários são usados para incluir notas,
sugestões e explicações que não fazem parte do
documento;
• Web browsers ignoram texto, tags e outros objetos que
estão entre a tag Comment (comentário);
• As tag responsável por esta função é: <!-- xxxxxx -->.
2011.1 Curso de HTML Básico – Derlival Barros 16

17. Acentos e
Caracteres
Especiais
2011.1 Curso de HTML Básico – Derlival Barros 17

18. Acentos e Caracteres Especiais
• Ao usar um editor de texto que permita acentuação para
criar um página, corremos o risco dos acentos não
serem interpretados corretamente por alguns browsers,
em especial browsers instalados em países onde não se
utiliza acentuação, como os Estados Unidos, por
exemplo;
• Se quisermos garantir que a acentuação da nossa
página será universalmente entendida devemos usar as
entities;
• Nas entities faz diferença usar caracteres maiúsculos ou
minúsculos;
2011.1 Curso de HTML Básico – Derlival Barros 18

19. Acentos e Caracteres Especiais
• Na verdade entities é o único caso onde a HTML é case-
sensitive;
• É verdade que é muito trabalhoso colocar as entities ao
invés de usar diretamente os caracteres acentuados;
• Alguns editores permitem que digitemos os acentos e
eles se encarregam de converter para as entities;
• A tabela a seguir especifica as entities usadas para
conseguir letras acentuadas, e alguns caracteres
especiais como c cedilha, símbolo de copyright,
caracteres nórdicos, etc.
2011.1 Curso de HTML Básico – Derlival Barros 19

20. Tabela de Caracteres Especiais
Nome Código Caractere
Agudo &*acute; á
Circunflexo &*circ; ê
Acento Grave &*grave; à
Cedilha &*cedil; ç
Til &*tilde; ã
Trema &*uml; ü
Copyright &copy; ©
Marca Registrada &reg; ®
Espaço &nbsp; Espaço em Branco
Obs.: O * é uma variável, representa o caractere que você irá utilizar, devendo ser
substituído por uma letra maiúscula ou minúscula.
2011.1 Curso de HTML Básico – Derlival Barros 20

21. Perguntas?
2011.1 Curso de HTML Básico – Derlival Barros 21