Buscar

Completo tutorial de HTML - Listas III

11 - Listas III


Tutorial creado por Indaya.com . Extraido de: http://www.indaya.com
11 Septiembre 2005
< anterior | 1 .. 9 10 11 12 13 .. 44 | siguiente >
Terminamos el tema de listas estudiando las listas de definición. Veremos
también la anidación de listas.
Listas de definición
Cada elemento es presentado junto con su definición. La etiqueta principal es
<dl> y </dl> (definition list). La etiquetas del elemento y su definición son <dt>
(definition term) y <dd> (definition definition) respectivamente.
Aquí os proponemos un código que podrá aclarar este sistema:
<p>Diccionario de la Real Academia</p>
<dl>
    <dt>Brujula
    <dd>Señórula montada en una escóbula
    <dt>Oreja
    <dd>Sesenta minutejos
</dl>

El efecto producido: 


Diccionario de la Real Academia


Brujula
Señórula montada en una escóbula
Oreja
Sesenta minutejos





Fijaos en que cada línea <dd> esta desplazada hacia la izquierda. Este tipo
de etiquetas son usadas a menudo con el propósito de crear textos más o menos
desplazados hacia la izquierda.

El código:

<dl>
<dd>Primer nivel de desplazamiento
    <dl>
       <dd>Segundo nivel de desplazamiento
       <dl>
          <dd>Tercer nivel de desplazamiento
       </dl>
    </dl>
</dl>
El resultado:


Primer nivel de desplazamiento
Segundo nivel de desplazamiento
Tercer nivel de desplazamiento




Anidando listas
Nada nos impide utilizar todas estas etiquetas de forma anidada como hemos visto
en otros casos. De esta forma, podemos conseguir listas mixtas como por ejemplo:

<p>Ciudades del mundo</p>
<ul>
    <li>Argentina
    <ol>
       <li>Buenos Aires
       <li>Bariloche
    </ol>
    <li>Uruguay
    <ol>
       <li>Montevideo
       <li>Punta del Este
    </ol>
</ul>
De esta forma creamos una lista como esta:

Ciudades del mundo




~- Argentina



~~1) Buenos Aires

~~1) Bariloche


~- Uruguay



~~1) Montevideo

~~1) Punta del Este

< anterior | 1 .. 9 10 11 12 13 .. 44 | siguiente >

Anuncios Google

Autor y licencia de 'Completo tutorial de HTML'


Tutorial de Indaya.com . Extraido de: http://www.indaya.com CopyLeft
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.