Tipos y cuerpos

Una vez que empezamos a escribir en nuestra página necesitaremos modificar algunas características de alguna palabra o párrafo para resaltar visualmente la información. Las primeras operaciones sobre las que podríamos practicar serían las referentes a la modificación del tipo de letra y su tamaño (al que se denomina cuerpo)

En ambos programas disponemos de un menú desplegable en el que podemos elegir el tipo de letra con el que escribir.

¿Cuántos tipos de letra tienes instalados en tu ordenador? ¿Cincuenta?...¿Ochenta?... ¿Más de cien?...

Seguramente estarás pensando que tienes un montón de posibilidades a la hora de diseñar tus páginas... pero, ¿qué ocurrirá cuando un visitante de tu página no tenga en su ordenador esa fuente caligráfica tan maravillosa con la que tu página lucía tan espectacular?

Lo que sucederá es que el navegador del visitante volverá a darle formato a toda la página utilizando la fuente por defecto, que habitualmente suele ser Times New Roman, ... y adios a tu preciosa composición de la página.

Teniendo en cuenta lo anterior la recomendación es que te ciñas a las fuentes que están instaladas en la mayoría de los equipos: Times New Roman, Arial y Comic Sans MS

Tras esta recomendación funcional vamos a entrar en una segunda anotación de claro matiz estético:

Times New Roman : Se llama así por haber sido popularizada por el diario "The Times". Pertenece a la familia de las fuentes de tipo serif o "con tacón" (por las curvas que rematan los extremos). Suele dar un tono más formal a los escritos. Es de buena legibilidad en papel y algo menos en pantalla.

Arial : Es la fuente de mayor uso de la familia de las helvéticas, sans-serif o "de palo seco". Su carácter es algo más informal y moderno que el de la Times. Su legibilidad en pantalla es algo más alta que la de la Times, ya que es ligeramente mayor a igualdad de cuerpo.

Comic Sans MS : Pertenece al grupo de las fuentes de tipo caligráfico, pero al tratarse de una fuente sin ligazón entre los caracteres es muy legible. Es, entre las tres, la que aporta un caracter más ligero e informal al texto, con un alto grado de legibilidad.

Y ahora una pregunta: ¿has visto alguna vez una de esas cuartillas de publicidad de una imprenta que acaba de comprar un nuevo ordenador? Digo lo del ordenador porque es sorprendente la cantidad de fuentes diferentes que caben en tan poco papel,... al fin y al cabo lo importante es lo potente que es el ordenador, no que podamos enterarnos de lo que pone. Así que ya sabes, una de las formas de conseguir que tu página resulte impresentable es mezclar diez o doce tipos de letra,...aunque puede que tengas la suerte de que el navegador del visitante las sustituya por la fuente por defecto :-)

Además del tipo de letra podemos jugar con el cuerpo de las mismas, esto es, su tamaño. Si te fijas en ambos programas verás que los iconos o cajas con los que manejamos el cuerpo de letra son diferentes.

Si estás utilizando Front Page Express no hay mucho que pensar sobre el cuerpo de la letra, pero si estabas trabajando con Composer tal vez te haya llamado la atención que no hay otras posibilidades de tamaño que no sean las que aparecen en el menú desplegable. En otros programas la escala de tamaños es mucho más amplia, e incluso podemos teclear una medida si no aparece en la lista. Sin embargo, no es así cuando estamos creando un documento HTML.

En lenguaje HTML existen siete tamaños de letra. El tamaño mayor sería equivalente a los 36 puntos de un procesador de textos y el menor a un cuerpo de 8 puntos.

La forma de reflejarlo según el programa con el que trabajemos es diferente. Mientras que Front Page Express los numera correlativamente de 1 a 7, Composer toma como punto neutro el tercer nivel y numera como pasos negativos o positivos a partir de ese tamaño. Encontraremos pues etiquetas de los siguientes tipos.

<font size="1"> y sucesivas
<font size="-2"> hasta <font size="+4">

Además del tipo y el cuerpo podemos modificar el color de la letra y aplicarle cualquiera de los atributos clásicos de enfatización: negrita, cursiva o subrayado.

• Crear un nuevo documento con el editor que se prefiera.
• Escribir un texto en el que se incluya un título y, al menos, un par de párrafos de más de un renglón.
• Modificar zonas del texto variando el tipo de letra, el cuerpo, el color y los atributos de enfatización.
• Utiliza la opción correspondiente a cada programa para intentar localizar los códigos que reflejan los cambios que vas introduciendo.
• Guardar con el nombre practica9.htm

Cada vez es más habitual que se utilicen recursos para que los enlaces no aparezcan subrayados. Sin embargo, la opción que utilizan los navegadores como alternativa predetereminada es mostrar el enlace en color azul y subrayado. Eso hace que se haya creado un aprendizaje condicionado en el que hemos asociado esas características.

Por cierto, a pesar de que ya has visto que los enlaces entre las páginas de este curso no aparecen subrayados ¿no has intentado pinchar en la palabra enlace para ver a dónde te llevaba? Está claro que no deberíamos, bajo ningún concepto, utilizar el color azul y el subrayado para resaltar algún término, ya que inducimos a error al visitante al alterar el esquema perceptivo propio de la WEB.

Listas numeradas y listas de viñetas

Avanzaremos ahora un paso más en la panorámica sobre los recursos para organizar y dar formato visual al texto. 

Las listas nos van a servir para ir organizando la información de acuerdo con alguno de los siguientes formatos: 

Listas ordenadas  Los elementos se presentan numerados	Listas desordenadas  Los elementos van precedidos por un "bolo"	Listas de definición  Presentan términos y definiciones con diferente tabulación
Elemento nº 1  Elemento nº 2  ...	Elemento nº 1  Elemento nº 2  ...	Término nº 1 Definición del término 1  Término nº 2 Definición del término 2

Veremos en primer lugar los dos primeros tipos, cuya única diferencia estriba en el símbolo que precede a cada elemento. Si estamos utilizando Composer obtendremos este tipo de listas directamente con la simple pulsación de un botón. 

Junto a ellos aparecen otros dos iconos que nos van a permitir ir aumentando o disminuyendo los niveles dentro de la lista. Llamamos nivel a la tabulación que se aplica a cada ítem de la lista y que nos va a permitir establecer visualmente las categorías y las dependencias de unos elementos respecto a los otros.

La forma de introducir nuevos elementos en la lista, una vez que la hemos empezado consiste sencillamente en pulsar la tecla INTRO, con lo que se nos añade otro ítem del mismo nivel que el precedente. (Si queremos variar el nivel, hacia la derecha o hacia la izquierda pulsaremos el icono correspondiente) 

Para finalizar la introducción de elementos en la lista volveremos a pulsar el botón con el que la iniciamos, que hasta ese momento habrá permanecido "presionado". 

• Abre una nueva ventana del editor utilizando la opción Archivo / Nuevo / Página en blanco 
• Crea una lista numerada que esté formada por dos elementos del primer nivel, de uno de los cuales colgarán dos elementos de segundo nivel. (Llamamos primer nivel al que está más próximo al margen izquierdo y 2º, 3º o sucesivos a los que se encuentran más alejados, en la 2ª, 3ª y sucesivas tabulaciones)
   Observarás que en lugar de los números aparece en cada uno de los ítems el signo #. Ten en cuenta que no estás viendo la versión definitiva y lo único que aparece es un testigo que te indica que estás utilizando una lista numerada, ya que el # es el símbolo anglosajón para indicar número.
• Cierra la lista y escribe un renglón de texto normal. 
• Guarda el trabajo pulsando en el icono que tiene el disquete con el nombre practica10.htm 
• Pulsa en el icono con el timón de presentación preliminar para ver el resultado (Ahora sí que se deberán ver los números que corresponden a cada ítem de la lista)

También en el caso de Front Page Express disponemos de los botones para crear de forma inmediata las listas. E igualmente aparecen a su lado los iconos para aumentar o reducir los niveles.

En el caso de Front Page Express podemos también recurrir a la primera caja desplegable que aparece en la barra de herramientas de texto. Al desplegar lo que en un procesador de texto sería la lista de estilos encontramos la Lista con viñetas y la Lista numerada.

• Abre una nueva ventana del editor utilizando la opción Archivo / Nuevo / Página normal 
• Crea una lista numerada que esté formada por dos elementos del primer nivel, de uno de los cuales colgarán dos elementos de segundo nivel. (Llamamos primer nivel al que está más próximo al margen izquierdo y 2º, 3º o sucesivos a los que se encuentran más alejados, en la 2ª, 3ª y sucesivas tabulaciones)
  Al pulsar la tecla INTRO cuando me encuentro en el primer nivel aparece un salto de párrafo pero sin numeración. Si realmente quiero añadir un nuevo ítem tengo que pulsar una segunda vez la tecla INTRO.
  
• Cierra la lista y escribe un renglón de texto normal.
• Guarda el trabajo pulsando en el icono que tiene el disquete con el nombre practica10.htm 
• Abre la página en el navegador para comprobar el resultado

• Volvemos a la ventana del editor en la que teníamos el documento que acabamos de crear y seleccionamos todo el contenido con el ratón. Borramos para dejar la página en blanco. 
• Creamos ahora una lista de viñetas con características semejantes a la anterior. 
• Guardamos el trabajo como practica11.htm, para lo que usaremos la opción y Archivo / Guardar como, y comprobamos los resultados. 

Listas de definiciones

Las listas de definiciones no tienen un icono específico para su creación, aunque podemos emplear un truco para no tener que recurrir a escribir las etiquetas a mano. Para ello utilizaremos la primera caja desplegable que aparece en la barra de herramientas de texto. Esta caja corresponde a lo que en un procesador de texto conocemos como caja de estilos. Una vez desplegada:

Si estamos trabajando con Composer:

Seleccionar la opción Título desc. (Título de descripción) para el término que deseamos definir y Texto desc. (Texto de descripción) para la definición del mismo.  Comprobaremos que mientras que el título permanece alineado en el margen izquierdo el texto salta a la primera tabulación.

Para cambiar de una a otra posibilidad hay que hacerlo manualmente. A cambio de esta pequeña incomodidad me permite que una definición esté formada por varios párrafos que permanecerán alineados en el mismo nivel.

Si estamos trabajando con Front Page Express:

Seleccionar la opción Término definido para el término que deseamos definir y Definición para la definición del mismo.  Observa que, si pulsas la tecla INTRO cuando acabas de escribir el termino que pretendes definir, el siguiente renglón se coloca de forma automática en la alineación correspondiente a definición.

El inconveniente de este salto automático es que cuando pulso INTRO al final de una definición vuelve automáticamente a la categoría de término definido. Si quiero que una definición esté formada por más de un párrafo tengo que mantener pulsada la tecla Mayúsculas mientras presiono INTRO.

• Crea un documento que contenga tres términos con sus correspondientes definiciones utilizando el procedimiento descrito según el editor que estés usando
• Resalta utilizando la negrita cada uno de los términos (Señalaremos el texto arrastrando el ratón y pulsaremos el icono que se presenta en la barra de formato con una letra A en negrita) 
• Si los párrafos quedan demasiado ajustados al margen izquierdo puedes utilizar los botones de salto de nivel para modificar su posición. 
• Guarda el documento como practica12.htm y comprueba el resultado. 

Profundizando en las listas

Habrás comprobado que en las listas con viñetas iba variando la viñeta que precedía a cada uno de los niveles. Sin embargo, en  las numeradas vemos que los diferentes niveles se van alineando con un mayor grado de tabulación a la derecha, pero no cambian el símbolo que los precede. Es posible que nos resulte útil para presentar la información con mayor claridad que dicho símbolo se modifique en cada nivel. 

Vamos a verlo con un ejemplo práctico. 

• Abrimos una nueva ventana del editor utilizando la opción Archivo / Nuevo / Página en blanco 
• Iniciamos la creación de una Lista ordenada en la que incluiremos tres ítems del primer nivel. En dos de ellos añadiremos dos ítems de segundo nivel y en uno de estos añadiremos un ítem de tercer nivel. 
• Pulsamos el icono con el timón que simboliza el navegador y cuando nos informe de que debemos guardar el archivo aceptamos y le damos el nombre practica13.htm
• Comprobamos en el navegador cómo todos los niveles llevan el mismo tipo de numeración. 

• Abrimos una nueva ventana del editor utilizando la opción Archivo / Nuevo / Página normal 
• Iniciamos la creación de una Lista ordenada en la que incluiremos tres ítems del primer nivel. En dos de ellos añadiremos dos ítems de segundo nivel y en uno de estos añadiremos un ítem de tercer nivel. 
• Guardamos la página con el nombre practica13.htm
• Comprobamos en el navegador cómo todos los niveles llevan el mismo tipo de numeración. 

• Vuelve a la ventana del editor y abre el archivo practica13.htm si lo habías cerrado.
• Pulsa con el botón derecho sobre uno de los párrafos del segundo nivel (vale cualquiera). 
• Elige Propiedades del párrafo/lista y seleccionamos en el campo Estilo de número las letras mayúsculas. (Comprueba cuáles son los niveles que se han visto afectados por el cambio) 
• Modifica el tercer nivel eligiendo letras minúsculas y salva el trabajo como practica14.htm para poder verlo en el navegador. 
• Puedes realizar un trabajo similar con una lista de viñetas y salvarlo como practica14b.htm

• Vuelve a la ventana del editor y abre el archivo practica13.htm si lo habías cerrado.
• Pulsa con el botón derecho sobre uno de los párrafos del segundo nivel (vale cualquiera). 
• Elige Propiedades de lista y selecciona las letras mayúsculas. (Comprueba cuáles son los niveles que se han visto afectados por el cambio) 
• Modifica el tercer nivel eligiendo letras minúsculas y salva el trabajo como practica14.htm para poder verlo en el navegador. 
• Puedes realizar un trabajo similar con una lista de viñetas y salvarlo como practica14b.htm

Es posible que la práctica anterior te haya suscitado algunas dudas acerca del comportamiento de los cambios de numeración cuando las condiciones de la lista se hacen algo más complejas... ¡Ánimo, dale rienda a tu espíritu de investigación! 

Vamos a ver ahora otra posibilidad interesante: combinar los diferentes tipos de listas entre sí. 

No es muy habitual mezclar la lista de definiciones con los otros tipos, pero sí puede resultar útil anidar listas desordenadas dentro de otras ordenadas o viceversa. 

Lo veremos con un ejercicio semejante al anterior. 

• Crea un documento nuevo y construye una lista ordenada suficientemente compleja. 
• Elige el nivel que desees modificar y pulsa el botón de las listas con viñetas. 
• Guarda el documento como practica15.htm y comprueba el efecto obtenido. 
• Podemos complicar algo más la situación combinando el cambio de tipo de lista y el de tipo de numeración... A estas alturas no te resultará dificil prever el resultado final de las acciones que vayas realizando.