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:




  

Sexta, 24 de Outubro de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Questões Comentadas de Informática para Concurso Público na Área de Tecnologia da Informação


Capa do livro
Informática Para Concursos


Capa do livro
Objetos, Abstração, Estrutura de Dados e Projetos Usando Java





Hostnet

IMD