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 (CSS) 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 vemos los atributos principales de esta etiqueta:
Atributo face
Define el tipo de letra. 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
debemos colocar las comillas para limitarlo. En caso de no tener comillas
se entendería que face=Comic, pero no se tendría en cuenta todo lo que sigue, porque HTML no lo asociaría al valor del atributo. En este caso HTML pensaría que las siguientes palabras (después del espacio) son otros atributos, pero como no los conoce como atributos simplemente los desestimará.
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.
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 (RGB) 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:
| Nombre | Color |
| Aqua | |
| Black | |
| Blue | |
| Fuchsia | |
| Gray | |
| Green | |
| Lime | |
| Maroon | |
| Navy | |
| Olive | |
| Purple | |
| Red | |
| Silver | |
| Teal | |
| White | |
| Yellow |
<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».