ESTILOS Y EFECTOS BÁSICOS

Como ya hemos dicho, la estructura lógica del texto y los diferentes efectos que se le apliquen se especifican mediante directivas. En este punto vamos a repasar algunas de las más importantes. En cada uno de los casos que veremos, primero se presenta el texto original HTML, es decir, lo que nosotros editamos, con las directivas situadas en los lugares adecuados; y después se presenta el efecto que dicho texto fuente produce una vez que se interpreta y se representa con el programa adecuado.

TÍTULOS

Mediante los títulos, en sus diferentes niveles de importancia, podemos definir el esqueleto del documento, su estructura básica.

<h1>Mucha importancia</h1>

<h2>Menos importancia</h2>

<h3>Mucha menos importancia</h3>

ATRIBUTOS DEL TEXTO

Mediante estos atributos determinamos el estilo y el tipo de letra que tendrá la presentación del documento final.

El primero en el que nos deberíamos detener es el texto normal entendiendo como tal el que no tiene ninguna característica especial. Para definir un párrafo como normal no es necesario poner ninguna etiqueta. Lo único que hay que tener en cuenta, como ya se ha dicho antes, es que al presentar el documento se hace caso omiso de los espacios, tabulaciones y retornos de carro que se encuentren en el texto fuente. Por ello cuando se quiera forzar un final de línea es necesario utilizar dos directivas especiales: <p> para marcar un fin de párrafo, y <br> para un único retorno de carro. La diferencia entre ambas es que la separación de líneas que provoca <p> es algo mayor que la de <br>, para que los párrafos se distingan bien entre sí. Las dos directivas mencionadas se sitúan en el punto en que queremos poner la separación. Por ejemplo:

Este será un texto normal (párrafo 1, línea 1).<br>

El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).<p>

Este ya es el segundo párrafo (párrafo 2, línea 1).<p>

Por supuesto, estas dos etiquetas se puede aplicar donde queramos, no sólo en el texto normal.

El texto preformateado (etiqueta <pre>) se aplica cuando queremos que en la presentación final del documento se respeten los espacios y retornos de carro que hayamos puesto en el texto fuente. Además se utilizará un tipo de letra de espaciado fijo, parecido al de una máquina de escribir, más pequeño que el del texto normal. Este estilo de texto puede ser adecuado, por ejemplo, para una tabla numérica sencilla:

<pre>

Texto preformateado

---------------------

|  1 |  2 |  3 |  4 |

|  5 |  6 |  7 |  8 |

|  9 | 10 | 11 | 12 |

---------------------

</pre>

Para hacer una cita textual dentro de nuestro documento, se puede utilizar la directiva <blockquote>:

<blockquote>Muchos años después, frente al pelotón de fusilamiento,

el coronel Aureliano Buendía había de recordar aquella tarde remota

en que su padre lo llevó a conocer el hielo.<br>

(Gabriel García Márquez, Cien años de soledad)</blockquote>

Las direcciones de correo electrónico se suelen marcar con esta directiva:

<address>Dirección: webmaster@etsit.upm.es</address>

Se pueden dar también los atributos más tradicionales: negrita y cursiva:

<b>Esto en negrita</b> y <i>esto en cursiva</i>

Se puede utilizar un tipo de letra similar al de una máquina de escribir:

<tt>Máquina de escribir</tt>

Para centrar texto (o, en general, cualquier cosa: un gráfico, por ejemplo) se usa la directiva <center>:

<center>Este texto va centrado </center>

LISTAS

Las listas se definen de forma muy sencilla: se dice dónde empieza la lista, dónde empieza cada punto y dónde acaba la lista. Las etiquetas que se utilicen en cada caso deben aparecer al principio de línea, o al menos sin texto por delante (sólo espacios o tabulaciones).

Podemos recurrir a tres tipos distintos de listas, cada una con una presentación diferente: no numeradas, numeradas y listas de definiciones (glosarios).

Las listas se pueden anidar, es decir, en el lugar donde debería ir uno de los términos de la lista se pone una nueva lista, que por supuesto no tiene porqué ser del mismo tipo.

Esto es una lista no numerada:

<ul>

<li>Tomates

<li>Zanahorias

<li>Puerros

</ul>

• Tomates
• Zanahorias
• Puerros

Esto una lista numerada:

<ol>

<li>Miguel Induráin

<li>Tony Rominger

<li>Eugeni Berzin

</ol>

1. Miguel Induráin
2. Tony Rominger
3. Eugeni Berzin

VARIOS

La directiva <hr> sitúa en el documento una línea horizontal de separación. En este documento, por ejemplo, se han utilizado líneas horizontales para separar las diferentes secciones:

<hr>

Para poner un comentario en un documento HTML, es decir, una aclaración que no aparece en la presentación final del documento, se encierra el texto que formará el comentario entre los símbolos <!-- y -->. Por ejemplo, un caso típico podría ser:

<!-- Modificado por José el viernes 2 de julio -->