30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 1/6
HTML
Fontes: T...
30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 2/6
Mas os comando...
30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 3/6
Com o texto pr...
30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 4/6
Se desejar usa...
30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 5/6
Portanto, se f...
30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos
http://cultura.ufpa.br/dicas/htm/htm-font.htm 6/6
Este "site", d...
Próximos SlideShares
Carregando em…5
×

Html fontes tipos, cores, tamanhos e estilos

221 visualizações

Publicada em

Html fontes tipos, cores, tamanhos e estilos

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
221
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Html fontes tipos, cores, tamanhos e estilos

  1. 1. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 1/6 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: <font face=*> </font> ou <span style="font-family: *;"></span>: O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> 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. <font color="#000000"> </font> ou <span style="color: rgb(0, 0, 0);"> ** </span> O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> 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. <font size=*> </font>: O texto que estiver entre os tags <font...> e </font> ou entre <span...> e <span> 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><font color="#FFFF66" face="verdana" size="3"></center> O menu formatar Clicando no menu "Format" tem-se acesso aos menus referentes à formatação: Traduzindo: .Sumário a. Introdução b. Editores c. NVU-Aparência d. Estrutura e. Cores f. Cores: Códigos g. Fontes h. Listas i. Imagens j. Imagens/Textos k. Tabelas l. Links m. Java Script n. Sons o. Frames p. Animação q. Publicação r. Estilo (CSS) s. Extensões FF t. Pecados... Tabela de cores 1 Tabela de cores 2 Tabela de cores 3
  2. 2. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 2/6 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"
  3. 3. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 3/6 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.
  4. 4. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 4/6 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.
  5. 5. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 5/6 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)
  6. 6. 30/3/2014 HTML - Fontes: Tipos, Cores, Tamanhos e Estilos http://cultura.ufpa.br/dicas/htm/htm-font.htm 6/6 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

×