hecho con NvuCreación de Páginas Web con Nvu/KompoZer
Página de inicio                                                                                                                                                                  Curso de Formación TIC 2007-2008

Establecer el formato en una página web

1. Formatos de texto

Leer en una pantalla de ordenador no es muy cómodo que digamos, por eso deberemos darle el aspecto más atractivo y equilibrado posible, es decir, le daremos el "formato" más adecuado. Existen dos formatos principales, el de párrafo que como su nombre indica abarcará a uno, varios, o todos los párrafos del documento, y el formato de caracteres. Vamos a empezar por el primero de ellos.

Los formatos de párrafo son varios: opciones de Justificación, estilos de títulos y los elementos de Listas que afectarán a todos los párrafos del bloque de texto que seleccionemos.
 
Las opciones de Justificación está situadas en y contienen cuatro posibilidades, según deseemos poner el texto alienado a la izquierda, centrado, a la derecha o justificada en los dos márgenes de la página web, tal como se indica en la siguiente ilustración.

2. Titulos 

Son estilos a nivel de bloque (párrafos) para delimitar en el texto diferentes secciones o apartados, y resaltar así la importancia de determinados títulos. En el lenguaje HTML sólo hay seis niveles, que se diferencian unos de otros por el tamaño de la letra, van en grado descendente, desde el nivel 1 que es el mayor, hasta el nivel 6, el más pequeño, tal y como podemos observar en la imagen. Ojo, estos estilos pueden redefinirse usando estilos CSS.

Podemos aplicar este formato seleccionando el texto que deseamos resaltar con este estilo, luego desplegamos la lista que se encuentra en la barra de formato, marcando uno de los seis tipos de título que nos ofrece. El aspecto que ofrecerán los párrafos con estos estilos de títulos podemos verlo en ilustración que está a continuación.



También podemos acceder a traves del menú Formato --> Párrafo. Ese menú también nos ofrece los seis estilos de título, ofreciendose también la posiblidad de incrementar o disminuir su tamaño de acuerdo a nuestros gustos. A la derecha tienes el menú de formato al que nos referimos más arriba, a través de él también puedes aplicar los seis diferentes estilos de títulos. Si miras el código fuente verás que estos estilos corresponden a las etiquetas H1 a H6. Todo el texto encerrado entre esas etiquetas aparecerán con el tamaño, grosor, color correspondientes a los estilos título 1 a título 6.

3. Listas

El formato de lista es útil para que nuestros párrafos presenten el de una lista (ordenada o no) por ejemplo al crear un índice para nuestra página. Podemos acceder a ella desde el menú Formato, y en éste seleccionando el apartado Lista, vemos que nos presenta 4 opciones:
  • No numerada.
  • Numerada.
  • Término.
  • Definición.


En los siguientes apartados veremos estos diferentes tipos de lista de manera más detallada.
Listas no numeradas
    • Arquitectura
      • Bernini
      • Borromini
    • Escultura
      • Bernini
    • Pintura
      • Caravaggio
Se llama también lista de viñetas; en ella los elementos que forman la lista van precedidos de un símbolo (viñeta) que puede ser elegido de entre los tres que nos ofrece el programa: círculo sólido, circunferencia y cuadrado sólido. Accederemos a ellos con la opción propiedades de la lista, que vemos en la imagen precedente.  Este tipo de lista está también accesible desde el botón Viñetas de la barra de formato.
Lista numerada
Como su nombre indica los elementos de la lista van precedidos de números o letras que podemos elegir en la ventana propiedades de la lista, desplegando el apartado Estilos de numeración. Estas listas también se las conoce como desordenadas.

Las propiedades e incluso el tipo de la lista puede cambiarse en cualquier momento. Basta seleccionar el o los elementos que queramos cambiar y elegir en el menú de Formato --> Listas la opción propiedades, o bien usando el menú del botón secundario del ratón.

La numeración de las listas ordenadas puede hacerse con números árabes, romanos o letras.
      1. Redes
        1. Lan
        2. Wan
      2. Topologías
        1. Bus
        2. Anillo
        3. Estrella

Definiciones y términos
Las listas tipo Definiciones, van estrechamente relacionadas, se utilizan para dar al texto el formato similar al de una definición, el formato Término lo aplicaremos a la palabra que encabeza o da título al elemento de la lista, mientras que el formato Definición lo aplicaremos al texto que sigue al término. Si hemos aplicado el formato término, tras escribir éste, y de forma automática, al pulsar Intro, el cursor se desplaza al punto de inserción correspondiente a la definición adquiriendo el texto que introduzcamos a continuación este formato.
HTML
Pseudo lenguaje para la creación de páginas WEB
WWW
World Wide Web
Podemos elegir las lista de términos y de definiciones desde el menú Formato, y seleccionando el apartado Lista o también con sus correspondientes botones de la barra de formato. El izquierdo da formato término y el derecho da formato de definición.
Listas definiciones

4. Formatos de caracteres 

Los signos que forman el texto: letras, números, signos ortográficos, matemáticos, etc. pueden aparecer en la página con el aspecto que definamos mediante los diferentes formatos, algo que haremos fundamentalmente mediante los atributos de estilo, color y tipo de letra.
a) Estilos
Los estilos de texto son diferentes formas en las que puede verse el texto en la página web. Algunos estilos llevan un nombre alusivo al uso para el que se crearon (y pueden ser redefinidos). Los estilos de carácter se pueden aplicar de dos maneras:

  • Seleccionamos primero el texto y después desplegamos el menú Formato y en él elegimos Estilos de Texto.
  • O bien tras seleccionar el texto, pulsamos en algunos de los botones de la barra de herramientas de Formato usados para los estilos más frecuentes: la negrita (B), la cursiva (I), y el subrayado (U).


Aquí tienes una descripción de los diferentes estilos que podremos aplicar al texto a nivel de carácter:
  • Negrita: Letras con trazo grueso
  • Cursiva: llamado también Itálica, de ahí su símbolo, inclina el texto a la derecha.
  • Subrayado: Pues eso, texto subrayado
  • Tachado: El texto aparece con una línea horizontal.
  • Superíndice: Posición elevada del texto
  • Subíndice: Posición del texto más baja.
  • Anchura Fija: En este estilo todos los caracteres tendrán el mismo ancho aunque sean bastante dispares como una "m" o una "i". En otros editores aparece como "teletipo".
  • Sin romper: El texto se muestra en una sola línea, sin romper por ninguna tabulación.
  • El resto de estilos, los utilizaremos cuando queramos introducir un tipo de texto de características especiales como pueden ser: citas, abreviaturas, acrónimos, código de programación, variables, ejemplos, etc.
b) Texto en colores
Para aplicar color a un texto, primero lo seleccionamos y luego elegimos Color del texto... en el menú Formato de la barra de menús. Nos aparecerá una nueva ventana como la que muestra la imagen.



El color debemos usarlo con mesura, lee este artículo para orientarte en el uso de los colores en las páginas web.
c) Tipos de letras 
Cuando se trabaja con procesadores de textos tenemos a nuestra disposición una innumerable cantidad de fuentes o tipografías para usar en los documentos. Al igual que ocurre con el color, los tipos de letra deben combinarse con cierto cuidado, el uso uniforme de un mismo tipo de fuente, da coherencia al documento, permite al lector localizar la información que necesita y facilita la legibilidad. El uso de una tipografía heterogénea dificulta a los usuarios identificar los bloques informacionales y navegar por el contenido del documento.

En una página web aparentemente tenemos las mismas posibilidades, pero solo aparentemente. El explorador usa las fuentes que le decimos en la página web siempre y cuando el ordenador del visitante disponga de esas fuentes. Es decir, además de usar tipos de fuentes homogéneos debemos mantenernos dentro de las fuentes instaladas en la mayoría de los sistemas operativos usados por los internautas.
Elegir tipos 

Para aplicar la fuente basta con seleccionar el texto previamente mecanografiado y después pasar a la elección del tipo de letra, o también tener ya seleccionado el tipo de letra antes de comenzar la escritura del texto, en ambos casos, para acceder a la fuente o tipo de letra, tenemos dos caminos:

Los tipos de letras los encontraremos en el menú Formato y seleccionado la opción Tipo de letra, con lo que se desplegará una lista con los tipos de letra que tenga nuestro sistema.



Otra forma es desplegando la lista de fuentes del menú que nos nuestra la barra de herramientas de formato. Se desplegará una lista similar a la del método anterior.


 
En estas listas se nos ofrecen los tipos de letra que podemos usar en nuestra página web:

  • En primer lugar se nos muestra la tipología que presenta el texto que previamente hayamos seleccionado.
  • En segundo lugar, los dos formatos de escritura de los que ya hemos hablado, el fijo donde todos los caracteres ocupan el mismo espacio, y el variable donde caracteres como la "i" ocupan menos espacio que la "m".
  • El siguiente grupo lo ocupan las familias de fuentes que NVU adopta como predeterminadas según el estandard de la W3C, organismo encargado de señalar las normas de accesibilidad a las páginas web. Al usar estas familias conseguiremos que la página se ve por igual en cualquier navegador.
  • Por ultimo, y por orden alfabético, aparece el listado de todas las fuentes que tengamos instaladas en nuestro equipo, listado que variará sustancialmente de unos ordenadores a otros.

5. Sangrado de párrafos


Para sangrar párrafos puede utilizar la tecla Tab de su teclado (al igual que ocurre con el procesador de textos), o el botón Sangrar texto de la barra de herramientas.



También podemos tabular “artificialmente” un párrafo mediante espacios sin salto. Es, como su nombre indica, un espacio que no produce salto (es un tipo particular de espacio que está considerado un carácter en sí mismo en lugar de ser, simplemente, un espacio entre caracteres). Para ser más específico, los espacios simples que se obtienen con la barra espaciadora no son considerados esenciales por la mayoría de los navegadores; si coloca un puñado de espacios en blanco, uno tras otro, para intentar dar formato a un texto, en algunos navegadores sólo se mostrará un espacio.


[ir arriba]

José Manual Lara Fuillerat - 2008 - I.E.S. Carbula (Almodóvar del Río, Córdoba)