Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Listas III


Vemos las listas de definición y aprendemos a anidar listas para crear estructuras lista más complejas.


11/10/01 - 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

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 3 comentarios (Añadir)
+ 1 comentario no revisado

 Autoría, licencia y acciones sobre este artículo

Informe de Rubén Alvarez*

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Manual de HTML
Anterior: Listas II

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Manuales de HTML


 Comentarios de los visitantes
Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar.
Se muestran 3 comentarios revisados

 Comentario de Néstor
30/11/03 
En el articulo donde aparece la definicion de listas de definicion, creo que en la explicacion despues del ejemplo donde explica el funcionamiento de
....dice que se desplaza a la izquierda, si no lo he entendido mal, su funcionamiento es hacia la derecha.

 Comentario de Jose Luba
06/12/04 
He visto el uso de las etiquetas <DL> y <DD>, para desplazar párrafos a la derecha. Pero también me gustaría saber cómo introducir párrafos con sangría francesa, es decir, cuando sólo se desplaza la primera línea de cada párrafo.

 Comentario de Luis
07/6/06 
He leido sobre las listas de definicion, mi pregunta es: ¿se puede hace que los despazamientos sean dentro de la misma linea?
gracias

RESPUESTA

Esta pregunta la tenemos respondida en algunos artículos de CSS que tenemos en el manual Taller de CSS.


Añadir un comentario al artículo Añadir un comentario del artículo
 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se ha encontrado un comentario sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Manual de HTML
Categorías
+Manuales de HTML

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia