HTML BASICO II

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.

---

Titulos

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

<h1>Mucha importancia</h1>

Mucha importancia

<h2>Menos importancia</h2>

Menos importancia

<h3>Mucha menos importancia</h3>

Mucha menos importancia

---

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>

Este será un texto normal (párrafo 1, línea 1).
El primer párrafo estará formado por 2 líneas (párrafo 1, línea 2).

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

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>

Texto preformateado
---------------------
|  1 |  2 |  3 |  4 |
|  5 |  6 |  7 |  8 |
|  9 | 10 | 11 | 12 |
---------------------

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>

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.
(Gabriel García Márquez, Cien años de soledad)

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

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

Esto en negrita y esto en cursiva

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

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

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

<center>Verde que te quiero verde</center>

Verde que te quiero verde 

---

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

Un glosario está formado por una serie de parejas de término (marcado con <dt> al principio de línea) y definición (con <dd>). Por ejemplo, podríamos crear un pequeño diccionario con los términos perro, gato y pescadilla, de la siguiente manera:

<dl>
<dt>Perro (<i>n. masc.</i>)
<dd>Animal de cuatro patas que ladra.
<dt>Gato (<i>n. masc.</i>)
<dd>Animal de cuatro patas que maúlla y se lleva muy mal con el perro.
<dt>Pescadilla (<i>n. fem.</i>)
<dd>Animal que vive en el mar y está recubierto de escamas.
</dl>

Perro (n. masc.)

Animal de cuatro patas que ladra.

Gato (n. masc.)

Animal de cuatro patas que maúlla y se lleva muy mal con el perro.

Pescadilla (n. fem.)

Animal que vive en el mar y está recubierto de escamas.