Logo

Hacer Listas en una pÁgina web


Como ya sabíamos el lenguaje html se creo para el tratamiento de textos, y en este aspecto es muy bueno. En lo que se refiere a las listas que utilizaremos para enumerar y definir sus elementos.

Podemos distinguir tres tipos de listas:

1. Listas desordenadas

Estas esta delimitadas por las etiquetas <ul> y </ul> (unordered list), cada elemento de esta lista le antecede la etiqueta <li> que se puede dejar sin cerrar. Por ejemplo:

<p>Países de Europa</p>
<ul>
    <li>Alemania
    <li>España
    <li>Reino Unido
</ul>
El resultado:

Países de Europa

Pero esto no es todo, podemos además definir el tipo de viñeta empleada para cada elemento. En este caso se usa el atributo type que va dentro de la etiqueta de apertura <ul> y es valido para toda la lista, o dentro de la etiqueta <li> para ese elemento.

Este atributo type, puede ser un círculo (circle), un cuadrado (square) o un disco (disc). Aunque algunos navegadores no soportan este tipo de atributo y siempre saldrá un circulo. Sería algo así:

<ul type="square">
<li>Elemento 1
<li>Elemento 2
<li>Elemento 3
<li type="circle">Elemento 4
</ul>
Y veríamos en el navegador:

2. Listas ordenadas

Para crearlas utilizaremos la etiqueta <ol> y </ol> (ordered list), cada elemento estar precedido de su correspondiente etiqueta <li>.

Por ejemplo:

<p>Reglas matemáticas</p>
<ol>
<li>Primero sumar
<li>Después de sumar, multiplicar
</ol>

El resultado en el navegador es:

Reglas matemáticas

  1. Primero sumar
  2. Después de sumar, multiplicar

Este tipo de lista también nos ofrece la posibilidad de modificar el estilo, por lo que podemos elegir entre números (1, 2, 3…), letras (a, b, c…) y sus respectivas en mayúsculas y números romanos en sus versiones minúsculas (i, ii, iii…) o mayúsculas (I, II, III…).

Al igual que sucedía anteriormente con las lista desordenadas el atributo type lo colocaremos dentro de la etiqueta <ol>.

Los valores que puede tomar en este caso el atributo type son 1 (para ordenar por números), a (para ordenar por letras del alfabeto en minúsculas, A (para ordenar por letras en mayúsculas), i (para ordenar la lista en números romanos en minúsculas y I (para ordenar por números romanos en mayúsculas).

Si queremos que la lista comience por número o letra determinado, utilizaremos un segundo atributo, start, que tiene como valor un número.

Un ejemplo de todo esto sería:

<p>Ordenamos por números</p>
<ol type="1">
<li>Componente 1
<li>Componente 2
</ol>
<p>Ordenamos por letras</p>
<ol type="a">
<li>Letra a
<li> Letra b
</ol>
<p>Ordenamos por números romanos empezando por el 10</p>
<ol type="i" start="10">
<li>Sección x
<li>Sección xi
</ol>
El resultado:

Ordenamos por números

  1. Componente 1
  2. Componente 2

Ordenamos por letras

  1. Letra a
  2. Letra b

Ordenamos por números romanos empezando por el 10

  1. Sección x
  2. Sección xi

Con respecto a las listas nos queda por último las listas de definición y aprender a anidar listas para crear listas más complejas.

3. Listas de definición

Las listas de definición nos muestran cada elemento junto a su definición. La principal etiqueta de este tipo de lista es <dl> y </dl> (definition list), luego para cada elemento <dt> (definition term) con su correspondiente definición <dd> (definition definition). Cada línea que crean las etiquetas <dd> se desplaza hacia la izquierda, este tipo de etiquetas son usadas a propósito para conseguir este efecto.

Todo esto se vera más claro con el siguiente ejemplo:

<p>Diccionario de la Real Academia</p>
<dl>
    <dt>Coche
    <dd>Automóvil, vehículo de motor, etc.
    <dt>Música
    <dd>Melodía, sonidos armónicos, etc.
</dl>

El resultado que veríamos en el navegador sería:

Diccionario de la Real Academia

Coche

Automóvil, vehículo de motor, etc.

Música

Melodía, sonidos armónicos, etc.

Por ultimo nos queda como conseguir estas listas algo más complejas que utilizan todas las etiquetas que hemos visto. Usan las etiquetas para listas desordenadas y la de listas ordenadas. Lo que se conoce como listas mixtas, veamos un ejemplo:

<p>Ciudades Europa</p>
<ul>
    <li>Alemania
    <ol>
       <li>Berlín
       <li>Munich
    </ol>
    <li>España
    <ol>
       <li>Barcelona
       <li>Madrid
    </ol>
</ul>
De esta forma creamos una lista como esta y se vería así en el navegador:

Ciudades de Europa

Siguiente Tema: Los Caracteres Especiales del HTML

PÁGINA PRINCIPAL DEL CURSO CREACIÓN DE PÁGINAS WEB EN HTML