La etiqueta FONT y sus atributos. Formato de texto.
| La etiqueta <FONT> y </FONT>
En todo sitio web podemos ver cómo los diseñadores del mismo colocan diferentes tamaños, colores y tipos de letras a sus páginas. En la actualidad ya no es muy común formatear el texto mediante esta etiqueta incluida directamente en el código HTML de nuestra página. Todo lo que se refiere al formato de texto (y a muchas otras cosas más) se controlan mediante las Hojas de estilos en cascada (las veremos más adelante).
Igualmente es importante aprender el uso correcto de esta etiqueta para utilizarla en algunas páginas en las cuales no tengamos un control mediante una Hoja de Estilo.
Vamos a ver un ejemplo de cómo se define el tipo de letra en una página web.
| El atributo face
Permite cambiar el tipo de letra, es decir la fuente utilizada en el texto que esté encerrado entre las etiquetas <FONT> y </FONT>.
Todos los navegadores utilizan una fuente por defecto para el texto, que por lo general es la fuente Times New Roman. Si optamos por definir otro tipo de letra para nuestra página debemos tener mucho cuidado, ya que la fuente que elijamos puede NO estar presente en la computadora de nuestro visitante, por lo cual, el navegador de la persona que visita nuestro sitio, mostrará el texto con la fuente por defecto.
Esto nos puede traer serios problemas en el diseño y la estructura de nuestra página. Sabemos que no todas las fuentes son iguales, algunas son más cortas y altas que otras. Por este motivo puede pasar que al visualizar una página con un tipo de letra diferente a la definida por nosotros se produzcan errores de visualización y estructuración.
Para solucionar este inconveniente se definen varios tipos de letras similares, las fuentes a elegir para nuestra página deben ser conocidas, es decir, elegir fuentes que sabemos que estarán presentes en la mayoría de las computadoras del mundo.
A continuación se presentan las fuentes más utilizadas en la actualidad, con sus respectivas similitudes:
- Arial, Helvetica, sans-serif
- Times New Roman, Times, serif
- Courier New, Courier, mono
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
Ya sabemos qué tenemos que tener en cuenta a la hora de elegir un tipo de letra para nuestra página. Vamos
a ver un ejemplo del uso de la etiqueta <FONT> y el atributo face.
|| Ejemplo de la etiqueta <FONT> y el atributo face
<FONT face="Arial, Helvetica, sans-serif">Este es un ejemplo para cambiar el tipo de letra de nuestro texto</FONT>
IMPORTANTE: el valor de face debe ir encerrado sí o sí entre comillas ("). Si no lo hacemos así los navegadores podrían interpretar el valor como otro atributo de la etiqueta FONT y al no reconocer este texto como código HTML lo pasaría por alto.Podemos ir probando como cambia nuestro texto al modificar el valor del atributo con los diferentes valores.
Otro tema importante a la hora de definir la estructura y el diseño de nuestro sitio es elegir qué tamaño tendrá el texto general de nuestras páginas.
Hay dos maneras de cambiar el tamaño del texto en nuestro documento HTML:
El primero consiste en asignar mediante la etiqueta <BASEFONT> (que no tiene cierre)
un tamaño de texto base para todo nuestro documento HTML. Con el atributo SIZE de
esta etiqueta definimos el tamaño, que podrá tener un valor que va de 1 a 7 siendo el primero el de menor tamaño.
Esta etiqueta debemos insertarla justo después de <BODY>.
El tamaño del texto base que utilizan los navegadores es generalmente 3. Podemos cambiar este valor por el que
nosotros queramos mediante la etiqueta <BASEFONT>.|| Ejemplo de la etiqueta <BASEFONT>
<BODY><BASEFONT size="4">resto del documento HTML...
El segundo método nos permite cambiar el tamaño de texto de una letra, palabra o frase en nuestro documento. Todo esto lo conseguimos mediante la etiqueta <FONT> y su atributo size
explicado anteriormente.
| La etiqueta <FONT> y el atributo size
Dijimos que esta etiqueta permite cambiar el tamaño del texto de una parte del documento. A su vez existen 2 métodos. El primero es asignar un valor que va de 1 a 7, siendo el primero el que da menor tamaño a la fuente. Este sería el método absoluto ya que asigna un valor numérico absoluto al texto que está encerrado entre esta etiqueta. El segundo método (método relativo) consiste en asignar un valor numérico relativo al tamaño del texto base (el que asignamos con la etiqueta <BASEFONT>).
Vamos a ver un ejemplo para asignar un valor absoluto al tamaño del texto:
|| Ejemplo del atributo size de la etiqueta <FONT> (valor absoluto)
<FONT size="4">Con el atributo size asignamos un valor absoluto de 4</FONT>
El resultado sería:
Con el atributo size asignamos un valor absoluto de 4
De la misma forma podemos asignar tamaños de texto relativos al texto base del documento HTML. Esto lo hacemos con los valores (- +) 1 al (- +) 6 . Por ejemplo, si asignamos un valor de -1 este tendrá un punto menor que el texto predecesor que era de 4.
|| Ejemplo del atributo size de la etiqueta <FONT> (valor relativo)
Este texto tiene un valor de 4 definido con la etiqueta BASEFONT.<FONT SIZE="-1">y este otro un punto menos (es decir: 3)</FONT>
Utilizando estos dos métodos para asignar tamaño a nuestro texto podemos encontrarnos con un serio problema si la persona que visualiza nuestra página a definido un tamaño o resolución de pantalla diferente al que elegimos nosotros a la hora de diseñar nuestro sitio. Para resolver esto se utilizan las Hojas de estilo que veremos más adelante. En este sitio todos los tamaños de texto están asignados mediante Hojas de estilos en cascada. Podemos ver cómo se comporta el texto de este sitio cambiando en el menú VER --> Tamaño de texto otro valor diferente al que tenemos asignado por defecto.
| El atributo color
Podemos definir el color del texto mediante el atributo color.
|| Ejemplo del atributo color
<FONT color="#RRGGBB">Texto</FONT>
El valor #RRGGBB es un número hexadecimal que se caracteriza por tener 16 dígitos en vez de 10 como el sistema decimal. Estos dígitos son:
0 1 2 3 4 5 6 7 8 9 A B C D E F
Este valor se descompone en 3 partes: RR (Red), GG (Gren), BB (Blue). Donde cada uno de estos valores tomará 2 dígitos del sistema hexadecimal. Al igual que en el sistema decimal el menor valor es 0, y en este caso el mayor valor sería el F. Por ejemplo para formar el color verde deberíamos asignar a RR (rojo) y BB (azul) los dígitos 00 y a GG (verde) los dígitos FF.
Ejemplo:
<FONT color="#00FF00">Texto en color verde</FONT>
Resultado:
Texto en color verde
Para formar los colores primarios esto no sería muy difícil de recordar, pero qué pasaría si queremos un color especial para nuestro texto, imposible acordarnos de toda la combinación de valores para crear colores personalizados. Para esto existen programas diseñados en otros lenguajes algo más complejos que el HTML, que nos permiten "encontrar" los códigos de colores de una manera fácil y rápida. En la sección de Código JavaScript puedes encontrar algunos ejemplos de estos programas para mostrar los colores y su valor hexadecimal correspondiente.
Se puede definir el color base de nuestro texto para toda la página colocando el atributo text en la etiqueta <BODY>. También se pueden definir los colores de los enlaces (ver capítulo Crear enlaces de Hipertexto) mediante los siguientes atributos:
- link: cambia el color de los enlaces
- vlink: cambia el color de los enlaces visitados
- alink: cambia el color de los enlaces activos
El ejemplo para esto sería:
<BODY TEXT="#RRGGBB" LINK="#RRGGBB" VLINK="#RRGGBB" ALINK="#RRGGBB">
Vamos a ver un ejemplo práctico para repasar todo lo aprendido sobre la etiqueta <FONT> y sus atributos.
|| Ejemplo de código HTML sobre el uso de la etiqueta <FONT> y sus atributos
Información relativa al artículo.
