COLOR, TAMAÑO Y TIPO DE LETRA

Seguimos con etiquetas que nos sirven para formatear el texto. Hasta ahora todos los ejercicios han sido en blanco y negro.

A pesar de que por razones de homogeneidad y sencillez, pero sobre todo por la necesidad del código con responsabilidades, este tipo de etiquetas para definir formatos deben realizarse exclusivamente por medio de las hojas de estilo en cascada. Sin embargo, en HTML tradicional, existe una forma clásica y directa de definir color, tamaño y tipo de letra de un documento.

Esto se hace a partir de la etiqueta <font>…</font>. Dentro de esta etiqueta, debemos especificar los atributos correspondientes a cada uno de los parámetros que deseamos definir.

NOTA: los colores no son responsabilidad de HTML, puesto que pertenecen al estilo y no al contenido. Por lo tanto, todo lo que vamos a ver en este punto está en desuso. Esto te puede venir bien como practica cuando estas empezando con HTML. Sin embargo, en un proyecto real, usa CSS. Incluso en el estándar HTML5, que es el más actual, etiquetas como <font> se han eliminado por lo que no deberían usarse.

ATRIBUTO “FACE”

Define el tipo de letra. Muy probablemente tu navegador no le haga caso al atributo, puesto que está totalmente en desuso.

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 letras que nosotros, con lo que, si nosotros elegimos un tipo del que él no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Román). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobara que dispone del primer tipo enumerado y si no es así pasara al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto.

NOTA: en el ejercicio veremos un ejemplo de atributo cuyo valor debe estar limitado por comillas. Habíamos dicho que las comillas eran opcionales en los atributos, sin embargo, esto no es así siempre. Si el valor del atributo contiene espacios, <font face=’comic sans ms, arial, verdana’>, se entenderá que no tendrá en cuenta “face”, porque HTML pensara que las siguientes palabras son otros atributos, pero como no los conoce como atributos, simplemente los desestimara.

ATRIBUTO “SIZE”

Define el tamaño de letra. Este tamaño puede ser absoluto o relativo.

Si hablamos en términos absolutos, existen 7 niveles de tamaños distintos, numerados del 1 al 7 por orden creciente. Elegiremos por tanto un valor de “1” para la letra más pequeña, y “7” para la más grande.

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

Los tamaños reales que veremos en pantalla dependerán de la definición y el tamaño de fuente elegido por el usuario en el navegador. Este tamaño de fuente, puede ser definido en el “Explorer” yendo al menú superior, ver/tamaño fuente. Esta flexividad 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 este quede en un espacio determinado. 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 está compuesto a su vez por tres partes. Cada una de estas tres partes representa la continuación del rojo, verde y azul al color en cuestión.

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

Ejercicio-1

Ejercicio-2

Ejercicio-3