{"id":2381,"date":"2011-11-15T21:43:44","date_gmt":"2011-11-15T20:43:44","guid":{"rendered":"http:\/\/elclubdelautodidacta.es\/wp\/?p=2381"},"modified":"2011-11-25T13:35:07","modified_gmt":"2011-11-25T12:35:07","slug":"listas-anidadas-en-html-1-de-2","status":"publish","type":"post","link":"http:\/\/elclubdelautodidacta.es\/wp\/2011\/11\/listas-anidadas-en-html-1-de-2\/","title":{"rendered":"Listas anidadas en HTML – 1 de 2"},"content":{"rendered":"

\"\"<\/a>En los \u00faltimos art\u00edculos de esta serie mostramos los tres tipos b\u00e1sicos de listas en HTML: ordenadas, no ordenadas y de defici\u00f3n<\/em>. Comprendidos estos conceptos, anidar listas ser\u00e1 una tarea realmente sencilla.<\/p>\n

Comencemos observando el aspecto de una lista anidada<\/a>.<\/p>\n

Date cuenta de que, en un primer nivel, nos encontramos con una lista ordenada. En un segundo aparecen distintas listas no ordenadas.<\/p>\n

Veamos c\u00f3mo dise\u00f1ar el conjunto.<\/p>\n

La forma de atacar una anidaci\u00f3n de listas es partiendo desde fuera hacia dentro. Comenzamos esquematizando el primer nivel y a \u00e9l le a\u00f1adimos las listas de segundo nivel.<\/p>\n

Antes de la lista ordenada de primer nivel nos encontramos con un simple encabezado que sirve de t\u00edtulo:<\/p>\n

<h2>Men\u00fa<\/h2><\/code><\/p>\n

Y comienza la fiesta:<\/p>\n

Vamos a crear la estructura de la lista ordenada exterior, pero sin rellenar los campos con los distintos elementos. Esto ayudar\u00e1 a que no nos perdamos en las mara\u00f1as.<\/p>\n

<ol>\n    <li>...<\/li>\n    <li>...<\/li>\n    <li>...<\/li>\n<\/ol><\/code><\/pre><\/p>\n
Se trata de una lista con tres elementos.<\/p>\n
Como si de un v\u00eddeo de cocina se tratase, vamos preparando las listas no ordenadas de segundo nivel para cuando llegue el momento de agregarlas al sofrito:<\/p>\n
Esta vez la detallaremos completas, pues no hay ning\u00fan nivel inferior:<\/p>\n
La primera:<\/p>\n
<ul>\n    <li>Macarrones<\/li>\n    <li>Gazpacho<\/li>\n    <li>Jud\u00edas pintas<\/li>\n<\/ul<\/code><\/pre><\/p>\n
Esto no tiene ning\u00fan misterio: una simple lista sin ordenar con tres elementos.<\/p>\n
La segunda:<\/p>\n
<ul>\n    <li>Pollo al ajillo<\/li>\n    <li>Merluza frita<\/li>\n<\/ul><\/code><\/pre><\/p>\n
Y, finalmente, la \u00faltima:<\/p>\n
<ul>\n    <li>Fruta<\/li>\n    <li>Yogur<\/li>\n    <li>Caf\u00e9<\/li>\n<\/ul><\/code><\/pre><\/p>\n
Hasta aqu\u00ed todo es muy sencillo. Presta atenci\u00f3n ahora, pues llega el momento cr\u00edtico.<\/p>\n
Vamos a analizar ahora los distintos elementos que componen la lista numerada de primer nivel.<\/p>\n
F\u00edjate en el primer elemento (\u00e9chale un vistazo nuevamente al fichero de ejemplo) y trata de responder a la siguiente pregunta:<\/p>\n
\u00bfDe qu\u00e9 est\u00e1 compuesto el primer elemento?<\/p>\n
La respuesta debe llegarte de un modo inmediato si comprendes que el primer elemento se compone de todo lo que hay entre el n\u00famero 1 y el n\u00famero 2.<\/p>\n
Es decir, nos encontramos, en primer lugar, con un encabezado:<\/p>\n
<h3>Primer plato<\/h3><\/code><\/p>\n
Puesto que para el t\u00edtulo empleamos un h2<\/strong>, parece l\u00f3gico utilizar aqu\u00ed otro de menor jerarqu\u00eda como un h3<\/strong>.<\/p>\n
Despu\u00e9s del encabezado, nos aparece la primera de las listas no ordenadas de segundo nivel que ya cocinamos hace un rato:<\/p>\n
<ul>\n    <li>Macarrones<\/li>\n    <li>Gazpacho<\/li>\n    <li>Jud\u00edas pintas<\/li>\n<\/ul<\/code><\/pre><\/p>\n
Por lo tanto, el primer elemento de la lista de primer nivel es, completo:<\/p>\n
<h3>Primer plato<\/h3>\n<ul>\n    <li>Macarrones<\/li>\n    <li>Gazpacho<\/li>\n    <li>Jud\u00edas pintas<\/li>\n<\/ul><\/code><\/pre><\/p>\n
Razonando del mismo modo, el segundo elemento de la lista de primer nivel se compone de todo lo que hay entre el 2 y el 3<\/strong>. Es decir:<\/p>\n
<h3>Segundo plato<\/h3>\n<ul>\n    <li>Pollo al ajillo<\/li>\n    <li>Merluza frita<\/li>\n<\/ul><\/code><\/pre><\/p>\n
Finalmente, el tercer elemento es:<\/p>\n
<h3>Postre<\/h3>\n<ul>\n    <li>Fruta<\/li>\n    <li>Yogur<\/li>\n    <li>Caf\u00e9<\/li>\n<\/ul><\/code><\/pre><\/p>\n
Ya s\u00f3lo falta el toque final. Volvemos al esqueleto de la lista de primer nivel y entre cada <li>…<\/li><\/strong> insertamos cada una de las piezas.<\/p>\n
He aqu\u00ed nuestro resultado final:<\/p>\n
<h2>Men\u00fa<\/h2>\n<ol>\n    <li>\n        <h3>Primer plato<\/h3>\n        <ul>\n            <li>Macarrones<\/li>\n            <li>Gazpacho<\/li>\n            <li>Jud\u00edas pintas<\/li>\n       <\/ul>\n    <\/li>\n    <li>\n        <h3>Segundo plato<\/h3>\n        <ul>\n        <li>Pollo al ajillo<\/li>\n        <li>Merluza frita<\/li>\n        <\/ul>\n    <\/li>\n    <li>\n        <h3>Postre<\/h3>\n        <ul>\n            <li>Fruta<\/li>\n            <li>Yogur<\/li>\n            <li>Caf\u00e9<\/li>\n        <\/ul>\n    <\/li>\n<\/ol><\/code><\/pre><\/p>\n
Ya sabes que la indentaci\u00f3n no es necesaria, pero ayuda a esclarecer la estructura del c\u00f3digo.<\/p>\n
Desc\u00e1rgate el c\u00f3digo fuente haciendo clic con el bot\u00f3n derecho sobre el enlace del comienzo del art\u00edculo si quieres ver fichero el fichero completo.<\/p>\n
Cuando hayas practicado esto un par de veces podr\u00e1s escribir directamente el c\u00f3digo con agilidad. T\u00f3mate, entre tanto, el tiempo que haga falta desglosando cada lista de fuera a dentro, tal como hemos hecho aqu\u00ed.<\/p>\n
En el pr\u00f3ximo art\u00edculo presentar\u00e9 un nuevo ejemplo, esta vez anidando listas ordenadas entre s\u00ed. Veremos las particularidades que tienen este tipo de estructuras.<\/p>\n
Javier Montero<\/span><\/strong><\/p>\n
\n
Art\u00edculos relacionados<\/em>:<\/p>\n
– Creaci\u00f3n de listas ordenadas en HTML<\/a>
\n– Listas no ordenadas en HTML<\/a>
\n– Listas de definici\u00f3n en HTML<\/a><\/p>\n
\n
Listas anidadas en HTML – 1 de 2<\/a><\/p><\/blockquote>\n