HTML - Fontes e Cores

HTML

Fontes e Cores

Na linguagem HTML estão disponíveis formatos envolvendo fontes, tamanho, cores, estilo, alinhamento, fundos e vários outras opções.

Fontes

Para saber mais detalhes sobre as fontes, clique aqui.

Cores

Para entender como são disponibilizadas as cores nas telas e os seus respecivos códigos RGB, clique aqui.

Para ver duas tabelas de cores, em base 10 e em 16:

Tabela1

Tabela2

Tabela 3

Fontes e Cores em HTML

Texto: fonte, tamanho, estilo e cor

Os comandos são:

 : O texto que estiver entre os tags <font...> e terá a formatação de fonte determinada pelo "*" que deverá ser substituído pelo nome da fonte escolhida. É importante lembrar que essa fonte só poderá ser visualizada em outro computador se ele possuir essa fonte instalada. Portanto, é interessante que se use as fontes padrões, são elas: Arial, Helvetica, Sans, Times, Verdana, Courrier e Georgia.

 : O texto que estiver entre os tags <font...> e terá a cor ali especificada. Note-se que o código poderá ser substituído pelo nome de uma cor em inglês, ou ainda, pelo código em RGB em base 16 que, nesse caso (#000000) é preta.

 : O texto que estiver entre os tags <font...> e terá o tamanho expressado pelo "*". O asterisco poderá ser substituído pelos números de 1 a 7, onde 1 representa o menor tamanho de fonte e 7 o maior.

Deve ficar claro que os três atributos que complementam o elemento "font" podem ser usados dentro de um mesmo tag.

Exemplo:
A palavra Exemplo (acima) está entre <center></center>

O menu formatar

Clicando no menu "Formatar" tem-se acesso aos menus referentes à formatação:

Mas os comandos mais utilizados de formatação também estão na barra de formatação:

a. Abrir o Mozilla Composer clicando em e digitar um texto, ou

copiar um texto previamente digitado em qualquer programa editor de textos.
No final, selecionar tudo. e copiar. Abrir o composer e colar.

b. Selecionar o texto todo ou apenas a parte que deseja formatar

c. No menu "Formatar", clicar em "Fonte" e clicar sobre a fonte desejada.
    As fontes existentes no Windows estarão disponíveis.

d. Novamente, no menu "Formatar", clicar em "Tamanho do texto" e clicar no tamanho desejado
    Muito pequeno, Pequeno, Médio, Grande, Muito grande, Maior
    Também podem ser usados os comandos Diminuir e Aumentar no menu ou
    na barra, presionando os botões

e. Novamente, no menu "Formatar", clicar em "Estilo do texto"
    Várias opções estão disponíveis, como Negrito, Itálico, Sublinhado, Tachado, Sobreescrito, Subescrito estão presentes.
    Algumas dessas opções também estão presentes na forma de botões:
    Negrito, Itálico, Sublinhado:

f. Novamente, no menu "Formatar", clicar no quadrado superior de "Cor do texto" ou
na barra, pressionando o quadrado superior do botão

Abre-se a janela "Cor do texto"

Com o texto previamente selecionado, basta clicar sobre a cor desejada para aplicá-la.

Também pode ser colocado o código da cor no campo inferior à esquerda. Para entender esses números clicar em Tabela de cores.
Para alterar a cor do fundo do texto pressionar o botão

Novamente a cor poderá ser escolhida na janela de cores.

Texto: alinhamento, recuo e marcadores

g. Novamente, no menu "Formatar", clicar em Alinhamento
   Quatro opções estão disponíveis: direito, centralizado, esquerdo e justificado

h. Novamente, no menu "Formatar", clicar em Aumentar recuo"
   O texto selecionado irá para a direita.
   Se for clicado "Diminuir recuo" o texto voltará para a esquerda.

i. No menu "Formatar", clicar em "Lista"
   Algumas opções também estão presentes na forma de botões:

Página: Plano de fundo e cores da página

No menu "Formatar", clicar em "Plano de fundo e cores..."

Na janela que se abre clicar no pequeno retângulo após "Plano de fundo" e na janela de cores, escolher a cor desejada.

Se desejar usar uma imagem como plano de fundo deve-se clicar em "Selecionar arquivo" e procurar o arquivo desejado. O caminho do local onde está o arquivo aparecerá em "Imagem do plano de fundo".

Além do plano de fundo nesta janela também pode-se escolher todas as cores dos textos da página: do texto normal, do link, do link ativo, do link visitado, e do plano de fundo (background). Se desejar ver mais detalhes sobre links clique aqui.

Ao se clicar em cada retângulo ao lado do que se queira especificar abre-se uma janela de cores, semelhante à vista anteriormente.

Se desejar que uma imagem seja utilizada como plano de fundo, clicar em "Selecionar arquivo" e procurar a imagem desejada. Ao encontrá-la, clicar em "Abrir" e o caminho aparecerá no campo sob "Imagem do plano de fundo".

Para se escolher somente a cor do plano de fundo também pode-se pressionar o quadrado inferior do botão

Visulizando a página no navegador

Assim que o arquivo for salvo, pode-se visualizá-lo em um navegador.

Para abrir o arquivo, abrir o Mozilla Composer

, abrir o arquivo e clicar no botão "visualizar" na barra de menus ou

- Abrir o Windows explorer
- Localizar o arquivo no disquete
- Dar um duplo clique no arquivo ou

- Abrir o navegador

- Clicar em Arquivo / File - Abrir arquivo / Open file
- Localizar o arquivo no disquete. Clicar em Abrir / Open

Outras opções

a. Posicionar o cursor em um local conveniente do texto e
    clicar no menu Inserir / Linha horizontal - "Horizontal Line"

b. Posicionar o cursor em um local conveniente do texto e
    clicar no menu Inserir / Caracteres e símbolos
    clicar no botão Caracter
    e inserir um símbolo especial.

Exercícios

2.1. Abrir o arquivo A:\htm1-5a.html. Criar uma página, onde deve ser colocado título,
      autor e descrição, incluindo esse texto, cuja cor é: a. Clara, em fundo em cor escura. Salvar em A:\htm2-1a.html
b. Escura, em fundo em cor clara, com outra fonte e estilo. Salvar em A:\htm2-1b.html
c. Clara, em fundo com arquivo escuro, com outra fonte e estilo. Salvar em A:\htm2-1c.html
d. Escura, em fundo com arquivo claro, com outra fonte e estilo. Salvar em A:\htm2-1d.html.
    Acessar a hp Tabela de cores1
e. mudar a cor clara de htm1a.htm para "Light Wood".
    Salvar em A:\htm2-1e.html
f. mudar a cor escura de htm1b.htm para "Indian Red". Salvar em A:\htm2-1f.html

2.2. Abrir o arquivo A:\htm1.5b.html. Repetir o procedimento descrito no item 2.1.
      Salvar os arquivos resultantes como A:\htm2-2a.html, A:\htm2-2b.html,..., A:\htm2-2g.html.

2.3. Abrir o arquivo A:\htm1-5c.html.Repetir o procedimento descrito no item 2.1.
       Salvar os arquivos resultantes como A:\htm2-3a.html, A:\htm2-3b.html,..., A:\htm2-3g.html.

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
disponível sob FDL (Free Documentation Licence),
pretende auxiliar quem esteja começando a se interessar por internet,
computadores e programas, estando em permanente construção.
Sugestões e comentários são bem vindos.
Se desejar colaborar, clique aqui.

Agradeço antecipadamente.

Deseja enviar essa página?

Se você usa um programa de correio eletrônico devidamente configurado e tem
um e-mail pop3, clique em "Enviar página" (abaixo) para abrir o programa.
Preencha o endereço do destinatário da mensagem.
E pode acrescentar o que quiser.
(Se não der certo, clique aqui para saber mais).

Enviar página

Última alteração: 5 fev 2006