Menú

Enlaces

Futbol Online

3.4. Listas

3.4.1. Listas desordenadas o Listas con viñetas

Listas desordenadas (unordered list) <ul> o Listas con viñetas. Cada uno de los elementos de la lista es citado por medio de una etiqueta <li> (Sin cierre, aunque no hay inconveniente en colocarlo </li>). Los tipos de viñeta pueden ir tanto dentro de <ul> como de <li> con el atributo type.

Nota: En algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar y por mucho que nos empeñemos, siempre saldrá el redondel negro. En caso de que no funcione siempre podemos construir la lista a mano con la viñeta que queramos utilizando las tablas de HTML. Veremos más adelante cómo trabajar con tablas. Por defecto type="disc", sin colocar el type=" disc".

Está delimitado por las etiquetas:

Ejemplo:

<ul>
<li>Por defecto. Sin colocar el type="disc". Disco.
<li type="circle">type="circle". Círculo.
<li type="disc">type="disc". Disco.
<li type="square">type="square". Cuadrado.
</ul>

Resultado:

Por defecto. Sin colocar el type=disc.
type="circle". Círculo.
type="disc". Disco.
type="square". Cuadrado.

3.4.2. Listas ordenadas o Listas numeradas

Listas ordenadas (ordered list) <ol> o Listas numeradas. Cada elemento será igualmente precedido de su etiqueta <li> (Sin cierre, aunque no hay inconveniente en colocarlo </li>). Los tipos de viñeta pueden ir tanto dentro de <ol> como de <li> con el atributo type. Si queremos que el orden empiece por otro lugar que no sea el primero hay que añadir el atributo start. Sería Start="5". Es un número. el navegador ya traducirá en el caso de las letras.
Nota: Recordamos que en algunos navegadores no funciona la opción de cambiar el tipo de viñeta a mostrar. Por defecto type="1", sin colocar el type="1"

Está delimitado por las etiquetas:

Ejemplo:

<ol>
<li>Por defecto. Sin colocar el type="1".
<li type="1">type="1". Para ordenar por números.
<li type="a">type="a". Por letras del alfabeto.
<li type="A">type="A". Por letras mayúsculas del alfabeto.
<li type="i">type="i". Por números romanos en minúsculas.
<li type="I">type="I". Por números romanos en mayúsculas.
</ol>

<ol type="1" start="8">
<li>Texto
<li>Texto
</ol>

Resultado:

Por defecto. Sin colocar el type="1".

type="1". Para ordenar por números.

type="a". Por letras del alfabeto.

type="A". Por letras mayúsculas del alfabeto.

type="i". Por números romanos en minúsculas.

type="I". Por números romanos en mayúsculas.

Texto
Texto

3.4.3. Listas de definición (definition list)

Listas de definición (definition list) <dl>. La etiqueta del elemento es <dt> (definition term) y la etiqueta de su definición es <dd> (definition definition).

Está delimitado por las etiquetas:

Ejemplo:

<p>Diccionario de la Real Academia</p>

<dl>
<dt>Libertad.
<dd>Es la capacidad del ser humano de obrar o no obrar a lo largo de su vida por lo que es responsable de sus actos.
<dt>Dictadura.
<dd>Gobierno que en un país impone su autoridad violando la legislación anteriormente vigente.
</dl>

<dl><dd>Primer nivel de desplazamiento.
<dl><dd>Segundo nivel de desplazamiento.
<dl><dd>Tercer nivel de desplazamiento.
</dl></dl></dl>

Resultado:

Diccionario de la Real Academia

Libertad.: Es la capacidad del ser humano de obrar o no obrar a lo largo de su vida por lo que es responsable de sus actos.
Dictadura.: Gobierno que en un país impone su autoridad violando la legislación anteriormente vigente.

Primer nivel de desplazamiento.

Segundo nivel de desplazamiento.

Tercer nivel de desplazamiento.