11 - Listas III

[editar]
Tutorial creado por Indaya.com. Extraido de: http://www.indaya.com
11 de Septiembre de 2005
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
    2. Bariloche

  • Uruguay


    1. Montevideo
    2. Punta del Este

[editar]

30 opiniones

OCHOA

MUY BUENO
bastante buena

:D
mu weno

si señor esto si k mola
amilcar caamal

hasta que porfin alguien hace algo bien GGGGGGGGGG """"bravo""""
aza

muy bien
1 2 3 4 5 6 | siguiente >

Tutoriales relacionados con 'Completo tutorial de HTML'

Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »
ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas del lado... Más »
Este documento describe cómo usar el sistema de spooling para impresoras de líneas que provee... Más »
Hace tiempo que terminé la traducción de un excelente artículo sobre kde-kiosk, la tecnología que... Más »

Autor y licencia de 'Completo tutorial de HTML'


Tutorial de Indaya.com. Extraido de: http://www.indaya.com CopyLeft
Licencia GNU Free Documentation License: http://www.gnu.org/copyleft/fdl.html
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.