HTML: Primeros pasos 3/4

Si has leído la primera y segunda parte de este módulo introductorio al HTML ya conoces las ocho primeras etiquetas para escribir un texto comprensible. Ahora aprenderás unas etiquetas nuevas y también empezarás a usar los atributos. Si acabas de empezar o aun no has hecho nada de HTML te recomiendo que leas la entrada introductioria de este blog.

Las listas

Las listas sirven para estructurar diferentes datos (normalmente textos) que forman parte de un mismo contexto y ayudar a la comprensión del lector de una forma visual.

Hay tres tipos de listas: no ordenadas, ordenadas y de descripción.

Listas ordenadas

Ésto es una lista no ordenada:

• Cuadrado
• Triángulo
• Redonda

Como puedes comprobar en una lista no ordenada no hay ningún motivo para colocar un elemento antes que otro, por eso se simbolizan todos igual (en este caso con un disco negro).

Éste es el caso en que el orden de los factores no altera el producto.

Las etiquetas de las listas no ordenadas son <ul> y </ul>, que probiene de unordered list. En el contenido de este elemento pondremos cada uno de las partes de la lista.

Para definir cada una de esas partes usaremos las etiquetas <li> y </li>, que probiene de item list.

Es decir, la anterior lista no ordenada se escribiría en lenguaje HTML de la siguiente manera:

<ul>
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Pruébalo tú mismo.

Dentro de las listas no ordenadas hay tres tipos que se definen con CSS, pero también es posible usar el atributo style (aunque menos recomendado) del lenguaje HTML.

Disco "list-style-type:disc":

Es la lista que ya hemos visto. No necesita atributo, pero por si te interesa también puedes usarlo:

<ul style="list-style-type:disc">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

Círculo "list-style-type:circle":

<ul style="list-style-type:circle">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

• Cuadrado
• Triángulo
• Redonda

Cuadrado "list-style-type:square":

<ul style="list-style-type:square">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

• Cuadrado
• Triángulo
• Redonda

Nada (vacío) "list-style-type:none":

<ul style="list-style-type:none">
<li>Cuadrado</li>
<li>Triángulo</li>
<li>Redonda</li>
</ul>

• Cuadrado
• Triángulo
• Redonda

Listas ordenadas

Ésto es una lista ordenada:

1. Primero
2. Segundo
3. Tercero

Una lista ordenada es aquella que el orden sí es importante y además se usa para dejar clara la posición de los elementos de la lista.

Para ello utilizaremos las etiquetas <ol> y </ol>, que probiene de ordered list. Y los componentes de la lista se separarán también con las etiquetas "li".

En los lenguajes HTML4 y HTML5 hay dos atributos útiles, el atributo start que permite indicar el valor inicial en el que debe comenzar la lista y el atributo style que (al igual que las listas no ordenadas) permite indicar el tipo de numeración para la lista (1, 2, 3... ó bien I, II, II... etc...).

En HTML5 se ha añadido el atributo booleano reversed, y permite indicar que la numeración debe ser descendente.

Los diferentes tipos de estilo de las listas ordenadas son:

Números "1":

Es la lista que ya hemos visto. No necesita atributo, pero por si te interesa también puedes usarlo:

<ol type="1">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

Letras mayúsculas "A":

<ol type="A">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

1. Primero
2. Segundo
3. Tercero

Letras minúsculas "a":

<ol type="a">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

1. Primero
2. Segundo
3. Tercero

Números romanos "I":

<ol type="I">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

1. Primero
2. Segundo
3. Tercero

Números romanos (minúsculas) "i":

<ol type="i">
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
</ol>

1. Primero
2. Segundo
3. Tercero

Listas de descripción

Ésto es una lista de descripción:

Mesa

- Plancha de madera con patas para poner cosas encima

Cama

- Superficie acolchada para dormir

Estas listas lo único que hacen es desplazar las sangrías de sus componentes para crear una sensación de gerarquía. Es útil para formar descripciones como en un diccionario.

Utilizaremos las etiquetas <dl> y </dl> (que probiene de description list) para marcar donde irá la lista, luego cada término o sección de la lista se definirá con <dt> y </d>, y cada definición del término se definirá con <dd> y </dd>. No hay diferentes modalidades.

El código del ejemplo es el siguiente:

<dl>
  <dt>Mesa</dt>
    <dd>- Plancha de madera con patas para poner cosas encima</dd>
  <dt>Cama</dt>
    <dd>- Superficie acolchada para dormir</dd>
</dl>

Listas anidadas

Una lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que está dentro de otra se llama sublista.

Así de simple:

<ul>
<li>Primera lista</li>
    <ul>
    <li>Sub lista de la primera lista</li>
    <li>Sub lista de la primera lista</li>
    </ul>
<li>Segunda lista</li>
    <ul>
    <li>Sub lista de la segunda lista</li>
    <li>Sub lista de la segunda lista</li>
    </ul>
</ul>

Y el resultado es el siguiente:

• Primera lista
• Sub lista de la primera lista
• Sub lista de la primera lista
• Segunda lista
• Sub lista de la segunda lista
• Sub lista de la segunda lista

Pruébalo tú

Ahora toca hacer un ejemplo como mínimo de cada. Esta vez ha sido denso, lo se, pero recuerda que lo más importante es que memorices qué puedes hacer y las etiquetas siempre las puedes venir a ver luego.

Cuando hayas hecho un par de listas de teléfonos, de la compra, de amigos, de fechas importantes, etc. avanza a la última entrada de la parte introductoria al HTML.