Cor, tamanho e tipo de letra
Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos são controlados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existe uma forma clássica e direta de definir cor, tamanho e tipo de letra de um determinado texto.
Isto se faz a partir da etiqueta <font> e seu fechamento correspondente. Dentro desta etiqueta devemos especificar os atributos correspondentes a cada um destes parâmetros que desejamos definir. A seguir comentamos os atributos principais desta etiqueta:
Atributo face
Define o tipo de letra. Este atributo é interpretado por versões do Netscape a partir da 3 e de MSIE 3 ou superiores. Outros navegadores as ignoram completamente e mostram o texto com a fonte que utilizam.
Deve-se ter cuidado com este atributo já que cada usuário, dependendo da plataforma que utilize, pode não dispor dos mesmos tipos de letra que nós com o que, se nós escolhemos um tipo do que não dispõe, o navegador se verá forçado a mostrar o texto com a fonte que utiliza por padrão (que costuma ser Times New Roman). Para evitar isso, dentro do atributo costuma-se selecionar vários tipos de letras separados por vírgulas. Neste caso, o navegador comprovará que dispõe do primeiro tipo numerado e se não for assim, passará para o segundo e assim sucessivamente até encontrar um tipo que possua ou então, até acabar a lista e colocar a fonte padrão. Vejamos um exemplo:
<font face="Comic SansMS,arial,verdana">Este texto tem outra tipografia</font>
Que se visualizaria assim em uma página web:
Este texto tem outra tipografia
Nota: Aqui temos um exemplo de atributo cujo valor deve estar limitado entre aspas (").
Havíamos dito que as aspas eram opcionais nos atributos, entretanto isto não é assim sempre. Se o valor do atributo contém espaços, como é o caso de:
face="Comic Sans MS,arial,verdana"
devemos colocar as aspas para limitá-lo. Em caso de não ter aspas
face=Comic Sans MS,arial, verdana
se entenderia que face=Comic, mas não se levaria em conta tudo o que segue, porque o HTML não o associaria ao valor atributo. Neste caso o HTML pensaria que as seguintes palavras (depois do espaço) são outros atributos, mas como não os conhece como atributos simplesmente iria ignorá-los. |
Atributo size
Define o tamanho da letra. Este tamanho pode ser absoluto ou relativo.
Se falarmos em términos absolutos, existem 7 níveis de tamanhos distintos numerados de 1 a 7 por ordem crescente. Escolheremos portanto um valor size="1" para a menor letra ou size="7" para a maior.
<font size=4>Este texto é maior</font>
Que se visualizaria assim em uma página web:
Este texto é maior
Podemos também modificar o tamanho de nossa letra em relação ao do texto mostrado anteriormente definindo o número de níveis que queremos subir ou descer nesta escala de tamanhos por meio do signo + ou - . Desse modo, se definimos nosso atributo como size="+1" o que queremos dizer é que aumentamos um nível o tamanho da letra. Se estávamos escrevendo previamente em 3, passaremos automaticamente a 4.
Os tamanhos reais que vermos na tela dependerão da definição e do tamanho da fonte escolhido pelo usuário no navegador. Este tamanho de fonte pode ser definido no Explorer indo ao menu superior, Exibir/Tamanho da fonte. No Netscape escolheremos View/Text Size. Esta flexibilidade pode acabar sendo embaraçosa para nós em mais de uma ocasião, já que em muitos casos desejaremos que o tamanho do texto permaneça constante para que este caiba em um determinado espaço. Veremos em seu momento que esta pré-fixação do tamanho pode ser realizada pelas folhas de estilo em cascata.
Atributo cor
A cor do texto pode ser definida através do atributo cor. Cada cor é por sua vez definida por um número hexadecimal que está composto por três partes. Cada uma destas partes representa a contribuição do vermelho, verde e azul à cor em questão.
Por outro lado é possível definir de uma maneira imediata algumas das cores mais freqüentemente usadas para as que se criaram um nome mais memotécnico:
| Nombre |
Color |
| Aqua |
|
| Black |
|
| Blue |
|
| Fuchsia |
|
| Gray |
|
| Green |
|
| Lime |
|
| Maroon |
|
| Navy |
|
| Olive |
|
| Purple |
|
| Red |
|
| Silver |
|
| Teal |
|
| White |
|
| Yellow |
|
<font color="red">Este texto está em vermelho</font>
Que se visualizaria assim em uma página web:
Este texto está em vermelho
Com tudo isso, já somos capazes de criar um texto formatado de uma forma realmente elaborada.
Colocamos então em prática tudo o que aprendemos nestes capítulos fazendo um exercício consistente em uma página que tenha as seguintes características:
- Um título com cabeçalho de nível 1, em itálico e na cor verde oliva.
- Um segundo título com cabeçalho de nível 2, também na cor verde oliva.
- Todo texto da página deverá apresentar-se com uma fonte diferente da fonte padrão. Por exemplo, "Comic Sans MS" e no caso de que esta não esteja no sistema, que se coloque a fonte "Arial".
Pode-se ver
uma possível solução do exercício neste link.
Comentários do artigo