HTML

Fontes: Tipos, Cores, Tamanhos

Na linguagem HTML estão disponíveis formatos envolvendo fontes: tamanho, cores, estilo, alinhamento, fundos etc, possibilitando inúmeras possibilidades de apresentação do texto.

Fontes

Para saber mais detalhes sobre as fontes, clique aqui.

Cores

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

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

Tabela1 - Tabela2 - Tabela 3

Texto: fonte, tamanho, estilo e cor

Note-se que para aplicar uma formatação, após selecionar o texto desejado, pode-se utilizar os botões das barras de ferramentas ou clicar em "Format" e em algumas das opções como "Text style", "Text color", "Paragraph". Ou seja, pode-se combinar parãmetros.

O parâmetro COLOR contém a cor do texto.

O parâmetro SIZE contém o tamanho. Se for de uma fonte é um algarismo entre 1 (menor) e 7 (maior).

Quando se lida com fontes FACE contém o nome do tipo de letra

Por exemplo:

  ou :

O texto que estiver entre os tags <font...> e ou entre <span...> 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.

  ou  ** 

O texto que estiver entre os tags <font...> e ou entre <span...> e terá a cor especificada pelo "*".

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. Nesse caso (#000000) ou rgb(0, 0, 0) corresponde ao preto.

 :

O texto que estiver entre os tags <font...> e ou entre <span...> 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 único tag.

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

O menu formatar

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

Traduzindo:

Mas os comandos mais utilizados de formatação também estão nas barras de formatação:

a. Abrir o kompozer e digitar um texto, ou copiar um texto previamente digitado em qualquer programa editor de textos.
b. Selecionar o texto todo ou apenas a parte que deseja formatar

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

d. Novamente, no menu "Format", clicar em "Size" ("Tamanho") e clicar no tamanho desejado
Muito pequeno, Pequeno, Médio, Grande, Muito grande, Maior (x-small, small, medium, large, x-large, xx-large)
Também podem ser usados os comandos Smaller ( <Ctrl>- Diminuir ou <Ctrl>+ Aumentar) no menu ou na barra, presionando os botões

e. Novamente, no menu "Format", 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 "Format", 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, no lado superior esquerdo pode-se escolher o tom desejado clicando-se sobre a figura, no lado direito basta clicar sobre a cor desejada para aplicá-la. Em baixo aparecerá ocódigo da cor no sistema RGB e no Hex.

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 "Format", clicar em "Align" ("Alinhamento")
Quatro opções estão disponíveis: Left, Center, Right e Justify (à esquerda, centralizado, à direita e justificado)

h. Novamente, no menu "Format", clicar em "Increase Indent" ("Aumentar recuo")
O texto selecionado irá para a direita.
Se for clicado "Decrease Indent" ("Diminuir recuo") o texto voltará para a esquerda.

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

Entre outras, poderá ser escolhida uma lista com números ou com "bullets"

Página: Plano de fundo e cores da página No menu "Format", clicar em "Page colors and Background..." ("Plano de fundo e cores..." )

Na janela que se abre clicar no pequeno retângulo após "Background" ("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 "Choose File" ("Selecionar arquivo") e localizar o arquivo desejado. O caminho do local onde está o arquivo aparecerá em "Background Image" ("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:
- Clicar bo btão "Browse"

na barra de Composição ou

- Abrir o gerenciador de arquivos
- Localizar o arquivo desejado
- Dar um duplo clique no arquivo recém salvo ou

- Abrir o navegador (no LabInfo é o Firefox)
- Clicar em Arquivo / File - Abrir arquivo / Open file
- Localizar o arquivo desejado. Clicar em Abrir / Open

Outras opções

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

b. Posicionar o cursor em um local conveniente do texto e
clicar no menu "Insert" ("Inserir") - "Characters and Symbols" ("Caracteres e símbolos")
clicar no botão "Character"
selecionar o símbolo desejado
e clicar no botão "Insert" e inserir um símbolo especial.
Fechar, clicando em "X" ou em "Close"

Todos os navegadores exibem a fonte?

Primeiramente, é preciso decidir a qual fonte vai ser utilizada.

Pode-se, teoricamente, escolher qualquer fonte existente, mas, na verdade, a fonte só aparecerá em computadores que também tiverem tal fonte.

Portanto, se for escolhida uma fonte pouco utilizada, há poucas chances de que os outros irão poder vê-la.

Fontes livres semelhantes a fontes proprietárias

Há várias fontes proprietárias. Ou seja, uma empresa possui todos os direitos sobre elas.

Por exemplo, a Microsoft possui todos os direitos sobre as fontes "Arial", "Courier" e "Times New Roman".

Inesperadamente, a ABNT recomenda o uso de fontes Arial ou Times New Roman para trabalhos acadêmicos, monografias, dissertações e teses de doutorado. Então, o que fazer?

Em maio de 2007 a RedHat desenvolveu um conjunto de fontes chamado de "Liberation", com a intenção de substituir fontes proprietárias em ambientes Linux, pois são extremamente metricamente compatíveis com as fontes proprietárias, não interferindo diretamente em espaçamento horizontal e vertical ou na quantidade de linhas e páginas.

Há um pacote de fontes chamado Liberation que inclui:

Liberation Sans - em substituição à Arial

Liberation Serif - em substituição à Times New Roman

Liberation Mono - em substituição à Courier New

Liberation Sans Narrow - em substituição à Arial Narrow

Para efetuar o download do pacote de fontes Liberation, acessar

https://fedorahosted.org/liberation-fonts/

http://packages.debian.org/lenny/ttf-liberation/

Exercícios

2.1. Abrir o arquivo html / 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 html / htm2-1a.html
b. Escura, em fundo em cor clara, com outra fonte e estilo. Salvar em html / htm2-1b.html
c. Clara, em fundo com arquivo escuro, com outra fonte e estilo. Salvar em html / htm2-1c.html
d. Escura, em fundo com arquivo claro, com outra fonte e estilo. Salvar em html / htm2-1d.html.

Acessar a hp Tabela de cores1
e. mudar a cor clara de htm1a.htm para "Light Wood". Salvar em html / htm2-1e.html
f. mudar a cor escura de htm1b.htm para "Indian Red". Salvar em html / htm2-1f.html

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

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

Referências Bibliográficas
(topo)

Este "site", destinado prioritariamente aos alunos de Fátima Conti,
está 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

Se você usa webmail copie o endereço abaixo

http://www.ufpa.br/dicas/htm/htm-font.htm

Acesse a página do seu provedor. Abra uma nova mensagem.
Cole o endereço no campo de texto.
Preencha o endereço do destinatário.
E também pode acrescentar o que quiser.

Última alteração: 21 abr 2012