Iniciando no HTML: Cor, tamanho e tipo de letra


Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/21.php



Digg del.icio.us

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>

Rode e veja o resultado.

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>

Rode e veja o resultado.

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:

Aqua - Azul piscina;
Black - Preto;
Blue - Azul
Fuchsia - Rosa;
Gray - Cinza
Green - Verde;
Lime - Verde limão;
Maroon - Marrom;
Navy - Azul escuro;
Purple - Roxo;
Red - Vermelho;
Silver - Cinza claro;
White - Branco;
Yellow - Amarelo.

Exemplo:

<font color="red">Este texto está em vermelho</font>

Rode e veja o resultado.

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".

Que seria algo como:

<html>
<head>
<title>Home de cozinha para todos</title>
</head>
<body>
<font color="Olive" face="Comic Sans MS,arial">
<h1 align="center"><i>Cozinha para Todos</i></h1>
<h2 align="center">A cozinha ao seu alcance</h2>
</font>
<font face="Comic Sans MS,arial">
Descubra os pratos mais saborosos, fáceis e econômicos que você possa imaginar.
<br>
Dentro deste site você poderá ter acesso a grande variedade de <b>receitas</b> de preparação simples, 
aprenderá como realizar <b>atividades comuns</b> dentro de una cozinha e poderá expor suas perguntas 
em nossa <b>oficina</b> gourmet onde nosso cozinheiro virtual poderá ajudar-lhe em seus projetos culinários. 
Também lhe será possível adquirir os <b>livros</b> gastronômicos mais populares ao preço mais acessível... 
<br>
Mergulhe nos mistérios da cozinha sem queimar mais panelas, nem ligar para o disk-pizza.
</font>
</body>
</html>




Enviado por xKuRt em 11/11/2006 às 10:58


Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Segunda, 24 de Novembro de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Shell Script Profissional


Capa do livro
Construindo Aplicações Web com PHP e MySQL


Capa do livro
Informática FGV





Hostnet

IMD