Completo tutorial de HTML - Color, tamaño y tipo de letra

A pesar de que por razones de homogeneidad y sencillez de codigo este tipo de
formatos son controlados actualmente por hojas de estilo en cascada (de las
cuales ya tendremos tiempo de hablar), existe una forma clásica y directa de
definir color tamaño y tipo de letra de un texto determinado.

Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro
de esta etiqueta deberemos especificar los atributos correspondientes a cada uno
de estos parámetros que deseamos definir. A continuación os comentamos los
atributos principales de esta etiqueta:



Atributo face

Define el tipo de letra. Este atributo es interpretado por versiones de Netscape
a partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran
completamente y muestran el texto con la fuente que utilizan.

Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la
plataforma que utilice, puede no disponer de los mismos tipos de letra que
nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el
navegador se verá forzado a mostrar el texto con la fuente que utiliza por
defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo
suelen seleccionarse varios tipos de letra separados por comas. En este caso el
navegador comprobará que dispone del primer tipo enumerado y si no es así,
pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien
acabar la lista y poner la fuente por defecto. Veamos un ejemplo.

<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografía</font>

Que se visualizaría así en una página web.

Este texto tiene otra tipografía

Atributo size

Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.
Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos
numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1"
para la letra más pequeña o size="7" para la más grande.

<font size=4>Este texto es más grande</font>

Que se visualizaría así en una página web.

Este texto es más grande

Podemos asimismo modificar el tamaño de nuestra letra con respecto al del texto
mostrado precedentemente definiendo el número de niveles que queremos subir o
bajar en esta escala de tamaños por medio de un signo + o -. De este modo, si
definimos nuestro atributo como size="+1" lo que queremos decir es que
aumentamos de un nivel el tamaño de la letra. Si estabamos escribiendo
previamente en 3, pasaremos automáticamente a 4.

Los tamaños reales que veremos en pantalla dependerán de la definición y del
tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente
puede ser definido en el Explorer yendo al menu superior, Ver/Tamaño de la
fuente. En Netscape elegiremos View/Text Size. Esta flexibilidad puede en más de
una ocasión resultarnos embarazosa ya que en muchos casos desearemos que el
tamaño del texto permanezca constante para que éste quepa en un determinado
espacio. Veremos en su momento que esta prefijación del tamaño puede ser llevada
a cabo por las hojas de estilo en cascada.



Atributo color

El color del texto puede ser definido mediante el atributo color. Cada color es
a su vez definido por un número hexadecimal que esta compuesto a su vez de tres
partes. Cada una de estas partes representa la contribución del rojo, verde y
azul al color en cuestión.

Por otra parte, es posible definir de una manera inmediata algunos de los
colores más frecuentemente usados para los que se ha creado un nombre más
memotécnico:

<font color="red">Este texto está en rojo</font>

Que se visualizaría así en una página web.

Este texto está en rojo

Con todo esto estamos ya en disposicion de crear un texto formateado de una
forma realmente elaborada.

Pongamos pues en practica todo lo que hemos aprendido en estos capitulos
haciendo un ejercicio consistente en una página que tenga las siguientes
características:

• Un titular con encabezado de nivel 1, en itálica y color verde oliva.
  
• Un segundo titular con encabezado de nivel 2, también de color verde oliva.
  
  
• Todo el texto de la página deberá presentarse con una fuente distinta de
  la fuente por defecto. Por ejemplo "Comic Sans MS" y en caso de que ésta no
  esté en el sistema que se coloque la fuente "Arial".