Este documento resume um curso de HTML básico sobre como criar listas e formatar texto. Ele explica como usar as tags <ol>, <ul> e <li> para criar listas ordenadas e não ordenadas e como usar as tags <font> e seus atributos size, face e color para controlar o tamanho, fonte e cor do texto. Ele também explica como usar o atributo align em parágrafos e cabeçalhos para alinhar texto e o atributo bgcolor para definir cores de fundo.

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

2. Aula-004
Criando Listas
Tamanho do Texto
Alinhando Texto
Cores de Texto
Cores de Fundo
2011.1 Curso de HTML Básico – Derlival Barros 2

3. Criando Listas
2011.1 Curso de HTML Básico – Derlival Barros 3

4. Criando Listas
• Uma lista é uma coleção de itens relacionados;
• Você usa uma lista para organizar dados como
sequência de passos ou itens em um grupo;
• Nesta aula, você aprenderá sobre os tipos de listas do
HTML e também a criar diferentes tipos de listas em
uma página Web.
2011.1 Curso de HTML Básico – Derlival Barros 4

5. Tipos de Listas
• O HTML fornece quatro tipos:
• Ordenadas ou Numeradas
• Marcadores ou Não Numeradas
• Definição
• Intercaladas
2011.1 Curso de HTML Básico – Derlival Barros 5

6. Listas Ordenadas (Numeradas)
• Uma lista ordenada é usada para exibir um conjunto de
itens depois de um número ou letra;
• Uma lista ordenada é também chamada de lista
numerada
• As tags responsáveis por esta função são: <ol> e </ol>;
• Para especificar os itens da lista utiliza-se a tag <li>.
Obs.: A tag <li> não necessita de uma correspondente </li> para fechamento e é usada para
definir os itens de todos os tipos de listas.
2011.1 Curso de HTML Básico – Derlival Barros 6

7. Listas Ordenadas (Exemplo)
2011.1 Curso de HTML Básico – Derlival Barros 7

8. Marcadores (Não Ordenadas)
• Uma lista com marcadores ou não ordenadas é usada
para exibir um conjunto de itens depois de uma
marcação;
• Uma lista com marcadores é chamada também de lista
de marcação, não numerada ou ainda não ordenada;
• As tags responsáveis por esta função são: <ul> e </ul>.
2011.1 Curso de HTML Básico – Derlival Barros 8

9. Marcadores (Exemplo)
2011.1 Curso de HTML Básico – Derlival Barros 9

10. Tamanho do
Texto
2011.1 Curso de HTML Básico – Derlival Barros 10

11. A tag <font>
• Como vimos até agora, a formatação que você pode
fazer com o conjunto básico de tags HTML é bem
limitado;
• Uma maneira de controlar o tamanho do texto é feito
com a tag <FONT>;
• As tags responsáveis por esta função são: <font> e
</font>.
2011.1 Curso de HTML Básico – Derlival Barros 11

12. Atributo Size (Tamanho)
• O atributo SIZE dentro da tag <font> controla o tamanho
do texto incluso;
• Infelizmente a tag <font> não permite que você
especifique o tamanho em pixels ou pontos.
Obs.: O * é uma variável, representa um valor numérico que varia de 1 até 7.
2011.1 Curso de HTML Básico – Derlival Barros 12

13. Atributo Face
• O atributo FACE dentro da tag <font> é usado para
especificar uma face de tipos para o texto;
• A face de tipos selecionada será usada apenas se ela
for encontrada na máquina do usuário.
Obs.: O * é uma variável, representa o nome da fonte que será utilizada e deverá ser escrito
entre aspas.
2011.1 Curso de HTML Básico – Derlival Barros 13

14. Alinhando Texto
2011.1 Curso de HTML Básico – Derlival Barros 14

15. Alinhando Texto
• O HTML dá aos designers controle sobre o alinhamento
de texto;
• O texto pode ser alinhado na margem esquerda, na
margem direita ou centralizado;
• O atributo ALIGN pode ser usado nas tags de parágrafo
e cabeçalho.
Obs.: O * é uma variável, representa o nome do atributo de alinhamento, pode ser
representado por: left, right ou center.
2011.1 Curso de HTML Básico – Derlival Barros 15

16. Alinhamento a Esquerda
• Quando você definir o valor ALIGN para left, o texto
ficará alinhado na margem esquerda.
2011.1 Curso de HTML Básico – Derlival Barros 16

17. Alinhamento Centralizado
• Quando você definir o valor ALIGN para center, o texto
ficará alinhado no centro da página.
2011.1 Curso de HTML Básico – Derlival Barros 17

18. Alinhamento a Direita
• Quando você definir o valor ALIGN para right, o texto
ficará alinhado na margem direita.
2011.1 Curso de HTML Básico – Derlival Barros 18

19. Cores de Texto
2011.1 Curso de HTML Básico – Derlival Barros 19

20. Atributo Color (Cor)
• O atributo COLOR dentro da tag <font> é usado para
especificar uma cor para o texto;
• Você pode especificar cores usando um dos 140 nomes
de cores.
Obs.: O * é uma variável, representa o nome da cor em inglês ou seu código
correspondente em hexadecimal.
2011.1 Curso de HTML Básico – Derlival Barros 20

21. Tabela de Cores
Cor HTML Tom Mais Claro/Escuro
Preto Black Darkgrey
Branco White Ghostwhite
Verde Green Lime
Amarelo Yellow darkgoldenrod
Azul Blue Aqua
Vermelho Red Darkred
Rosa Pink Crimson
Roxa Violet Lavander
Laranja Orange Darkorange
Cinza Gray Lightgray
2011.1 Curso de HTML Básico – Derlival Barros 21

22. Cores de Fundo
2011.1 Curso de HTML Básico – Derlival Barros 22

23. Atributo Background
• O atributo BGCOLOR é utilizado para definir a cor de
fundo de várias tags como <body>, <table>, <td>, entre
outras do documento HTML;
Obs.: O * é uma variável, representa o nome da cor em inglês ou seu código
correspondente em hexadecimal.
2011.1 Curso de HTML Básico – Derlival Barros 23

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