{"id":66,"date":"2009-07-21T02:42:00","date_gmt":"2009-07-21T06:42:00","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/cari22\/?p=66"},"modified":"2009-07-21T02:42:00","modified_gmt":"2009-07-21T06:42:00","slug":"tutorial-html-10-lista-de-elementos","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/cari22\/2009\/07\/21\/tutorial-html-10-lista-de-elementos\/","title":{"rendered":"TUTORIAL HTML: 10. LISTA DE ELEMENTOS"},"content":{"rendered":"<p>Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando n\u00fameros, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres <strong><a id=\"num\" name=\"num\"><\/a><\/strong>tipos:<\/p>\n<ul>\n<li>Numeradas<\/li>\n<li>Sin numerar<\/li>\n<li>De definici\u00f3n<\/li>\n<\/ul>\n<p align=\"justify\"><strong>1. -Listas numeradas<\/strong>:<\/p>\n<p align=\"justify\">Cada elemento va precedido por un n\u00famero.                    Para este tipo de lista se utiliza   la etiqueta <strong>&lt;ol&gt;&lt;\/ol&gt; <\/strong>. Cada uno de los elementos   de la lista ir\u00e1 precedido de la etiqueta <strong>&lt;li&gt; <\/strong>.<\/p>\n<p>Ejemplo:<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img98.imageshack.us\/img98\/857\/dibujoolc.png\" alt=\"http:\/\/img98.imageshack.us\/img98\/857\/dibujoolc.png\" \/><\/p>\n<p align=\"justify\">Si queremos utilizar letras para ordenar nuestra lista (por defecto siempre utiliza HTML n\u00fameros), debemos a\u00f1adir a la etiqueta <strong>&lt;ol&gt; <\/strong>el atributo <strong>type<\/strong> con los siguientes valores:<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img140.imageshack.us\/img140\/9986\/dibujolud.png\" alt=\"http:\/\/img140.imageshack.us\/img140\/9986\/dibujolud.png\" \/><\/p>\n<p align=\"justify\">Ejemplos<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img140.imageshack.us\/img140\/9665\/dibujoamf.jpg\" alt=\"http:\/\/img140.imageshack.us\/img140\/9665\/dibujoamf.jpg\" \/><\/p>\n<p align=\"justify\">Si queremos empezar nuestra lista por cualquier otro n\u00famero o letra (que no sean el 1 o la \"a\"), deberemos indicarlo con el atributo <strong>start<\/strong>.<\/p>\n<p align=\"justify\"><img decoding=\"async\" src=\"http:\/\/img229.imageshack.us\/img229\/8554\/dibujoybl.png\" alt=\"http:\/\/img229.imageshack.us\/img229\/8554\/dibujoybl.png\" \/><\/p>\n<p align=\"justify\">\n<p align=\"justify\">\n<p align=\"justify\">\n<p><strong>2.- Listas sin numerar.<\/strong><\/p>\n<p align=\"justify\">En ellas, cada elemento va precedido por  un \"bullet\" o punto. Se utiliza la etiqueta <strong>&lt;ul&gt;&lt;\/ul&gt; <\/strong>para delimitar la lista, y <strong>&lt;li&gt; <\/strong>para indicar cada uno de los elementos.<\/p>\n<p>Ejemplo:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img229.imageshack.us\/img229\/9330\/dibujogsc.png\" alt=\"http:\/\/img229.imageshack.us\/img229\/9330\/dibujogsc.png\" \/><\/p>\n<p>Con   el par\u00e1metro <strong>type <\/strong>podemos indicar la forma del \"bullet\". Los valores de <strong>type <\/strong>pueden ser <strong>disc <\/strong>(disco) , <strong>circle <\/strong>(c\u00edrculo vac\u00edo) o <strong>square <\/strong>(cuadrado). Si no indicamos nada, apacer\u00e1 por defecto el disco.<\/p>\n<p>Ejemplo:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img136.imageshack.us\/img136\/3681\/dibujohuhfxh.png\" alt=\"http:\/\/img136.imageshack.us\/img136\/3681\/dibujohuhfxh.png\" \/><\/p>\n<p><strong>3.- Listas de definici\u00f3n<\/strong><\/p>\n<p>Las listas de definici\u00f3n se tratan de listas a dos niveles. Es decir, muestran los elementos tipo glosario o diccionario. Sirven para distinguir entre una palabra a definir y su definici\u00f3n. Para este tipo de lista se utiliza la etiqueta <strong>&lt;dl&gt;&lt;\/dl&gt; <\/strong>. El elemento marcado como palabra a definir viene marcado por la etiqueta <strong>&lt;dt&gt; <\/strong>, y la definici\u00f3n   por  la etiqueta <strong>&lt;dd&gt; <\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img268.imageshack.us\/img268\/5283\/dibujodeu.png\" alt=\"http:\/\/img268.imageshack.us\/img268\/5283\/dibujodeu.png\" \/><\/p>\n<p><strong>Listas de varios niveles o Listas anidadas <\/strong><\/p>\n<p>Podemos construir listas anidadas, es decir, listas que incluyen otras listas.<\/p>\n<p>Todas las listas se pueden \"anidar\", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo \"indice de materias\".<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img216.imageshack.us\/img216\/9625\/dibujoczt.png\" alt=\"http:\/\/img216.imageshack.us\/img216\/9625\/dibujoczt.png\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Podemos organizar nuestro texto haciendo uso de las llamadas listas de elementos, que consisten en esas enumeraciones utilizando n\u00fameros, letras o simplemente puntos para separar los diferentes apartados a tratar. Existen tres tipos: Numeradas Sin numerar De definici\u00f3n 1. -Listas numeradas: Cada elemento va precedido por un n\u00famero. Para este tipo de lista se utiliza [&hellip;]<\/p>\n","protected":false},"author":1937,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[9755,2205,1503],"class_list":["post-66","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-elementos-html","tag-html","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/66","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/users\/1937"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/comments?post=66"}],"version-history":[{"count":1,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/66\/revisions"}],"predecessor-version":[{"id":67,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/66\/revisions\/67"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/media?parent=66"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/categories?post=66"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/tags?post=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}