{"id":3722,"date":"2014-10-19T09:00:47","date_gmt":"2014-10-19T07:00:47","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=3722"},"modified":"2014-10-19T13:24:20","modified_gmt":"2014-10-19T11:24:20","slug":"html-listas","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2014\/10\/19\/html-listas\/","title":{"rendered":"HTML: listas"},"content":{"rendered":"

Un nuevo v\u00eddeo de iDESWEB<\/a>\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa Act\u00edvate<\/a> patrocinada por Google.<\/p>\n

[kml_flashembed movie=”http:\/\/www.youtube.com\/v\/V2ImdQdPqNE” width=”560″ height=”315″ wmode=”transparent” \/]<\/p>\n

Transcripci\u00f3n:<\/p>\n

Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo que forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d, te voy a explicar c\u00f3mo se escriben las listas en HTML.<\/p>\n

El lenguaje HTML, ya sea la versi\u00f3n HTML4 o la versi\u00f3n HTML5, posee tres tipos de listas.<\/p>\n

Las listas no ordenadas, las listas ordenadas y las listas de descripci\u00f3n.<\/p>\n

Cada una de estas listas se crea con una etiqueta espec\u00edfica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada y <dl> para la lista de descripci\u00f3n.<\/p>\n

Los elementos de las listas se definen de la siguiente forma.
\nPara la lista no ordenada y la lista ordenada se emplea el elemento <li>.
\nPara la lista de descripci\u00f3n se emplean los elementos <dt> y <dd>.
\nVamos a verlo con detalle.<\/p>\n

Ul es el acr\u00f3nimo de unordered list, lista no ordenada.
\nEn una lista no ordenada, el orden de aparici\u00f3n de los elementos no es importante.
\nCada elemento de la lista se define con <li>, que es el acr\u00f3nimo de list item.
\nLos elementos de la lista se indican con s\u00edmbolos, como c\u00edrculos, cuadrados o rombos.
\nPor ejemplo, todo esto es una lista no ordenada.<\/p>\n

En el siguiente ejemplo, a la izquierda tenemos el c\u00f3digo HTML que produce como resultado la lista no ordenada que aparece a la derecha.<\/p>\n

El estilo de una lista se puede cambiar, para que en vez de un c\u00edrculo relleno, un disco, sea el contorno del c\u00edrculo o un rect\u00e1ngulo el elemento marcador.<\/p>\n

Antiguamente exist\u00eda el atributo type en HTML que permit\u00eda cambiar el estilo de una lista no ordenada. Pero ese atributo ahora est\u00e1 obsoleto y no se debe de usar.
\nEn su lugar se debe emplear CSS, pero eso se ver\u00e1 en otro v\u00eddeo.<\/p>\n

Ol es el acr\u00f3nimo de ordered list, lista ordenada.
\nEn una lista ordenada, el orden de aparici\u00f3n de los elementos es importante.
\nCada elemento de la lista se define con <li>, que es el acr\u00f3nimo de list item.
\nLos elementos de la lista se indican con n\u00fameros o letras.
\nPor ejemplo, todo esto es una lista ordenada.<\/p>\n

En el siguiente ejemplo, a la izquierda tenemos el c\u00f3digo HTML que produce como resultado la lista ordenada que aparece a la derecha.<\/p>\n

Una lista ordenada puede hacer uso de los siguientes atributos que modifican su comportamiento.
\nEn HTML4 y HTML5 se puede emplear el atributo start que permite indicar el valor inicial en el que debe comenzar la lista. Tambi\u00e9n est\u00e1 el atributo type que permite indicar el tipo de numeraci\u00f3n, como por ejemplo letras o n\u00fameros romanos.
\nEn HTML5 se ha a\u00f1adido el atributo booleano reversed, que permite indicar que la numeraci\u00f3n debe ser descendente.<\/p>\n

En el siguiente ejemplo se muestran cinco listas ordenadas.
\nEn la primera lista simplemente se ha empleado la etiqueta <ol> para definir la lista ordenada.
\nEn las otras cuatro listas, se ha empleado el atributo type para modificar la numeraci\u00f3n de las listas: letras may\u00fasculas, letras min\u00fasculas, n\u00fameros romanos en may\u00fasculas y n\u00fameros romanos en min\u00fasculas.<\/p>\n

En el siguiente ejemplo se muestra el uso del atributo reversed para invertir el orden de numeraci\u00f3n de las listas.
\nEl atributo reversed es un atributo booleano, lo que significa que s\u00f3lo puede tomar un valor que es el mismo nombre del atributo.<\/p>\n

En este ejemplo se muestra el efecto del atributo reversed combinado con el atributo type.<\/p>\n

Dl es el acr\u00f3nimo de description list, lista de descripci\u00f3n, que se compone de t\u00e9rminos. Cada t\u00e9rmino puede poseer cero o m\u00e1s descripciones.
\nCada t\u00e9rmino de la lista se define con <dt>.
\nCada descripci\u00f3n de un t\u00e9rmino se define con <dd>.
\nY los elementos no se indican con s\u00edmbolos, n\u00fameros o letras, sino con un aumento del margen izquierdo, de la sangr\u00eda izquierda.<\/p>\n

La lista de descripci\u00f3n se emplea normalmente para definir un glosario o un diccionario.
\nEn el siguiente ejemplo, este c\u00f3digo genera la lista que se muestra a la derecha.
\nPodemos apreciar como las definiciones de cada t\u00e9rmino poseen una sangr\u00eda o margen izquierdo.<\/p>\n

En una lista de descripci\u00f3n, un t\u00e9rmino puede tener cero o varias descripciones.
\nPor ejemplo, este c\u00f3digo genera la lista de descripci\u00f3n que se muestra en la parte superior de la pantalla. En esta lista de descripci\u00f3n hay tres t\u00e9rminos, el primero y el tercero poseen dos descripciones, pero el segundo una sola descripci\u00f3n.<\/p>\n

Por \u00faltimo, en HTML tambi\u00e9n se pueden crear listas anidadas.
\nUna lista anidada es simplemente una lista dentro de otra, y se pueden combinar de cualquier forma. La lista que est\u00e1 dentro de otra se llama sublista.<\/p>\n

En el siguiente ejemplo, este c\u00f3digo genera la lista que se muestra en la parte superior de la imagen. Esta lista posee tres niveles de anidamiento y est\u00e1 formada por tres listas no ordenadas.
\nEn el primer nivel se emplea como s\u00edmbolo un disco, en el segundo un c\u00edrculo y en el tercero un cuadrado solido.<\/p>\n

Y en este \u00faltimo ejemplo, se ha anidado una lista ordenada dentro de una lista no ordenada.
\nA la derecha se muestra el resultado.<\/p>\n

Ya para terminar, me gustar\u00eda recordarte algunos de los sitios web en los que puedes encontrar m\u00e1s informaci\u00f3n sobre m\u00ed y sobre mi trabajo, y dos formas de contactar conmigo, a trav\u00e9s de mi correo electr\u00f3nico sergio.lujan@ua.es y a trav\u00e9s de mi cuenta en Twitter @sergiolujanmora.<\/p>\n

Recuerda que este v\u00eddeo forma parte del curso \u201cIntroducci\u00f3n al desarrollo web\u201d que est\u00e1 disponible en la direcci\u00f3n idesweb.es.<\/p>\n

Muchas gracias por tu atenci\u00f3n.<\/p>\n","protected":false},"excerpt":{"rendered":"

Un nuevo v\u00eddeo de iDESWEB\u00a0que se ofrecer\u00e1 a trav\u00e9s de la iniciativa Act\u00edvate patrocinada por Google. [kml_flashembed movie=”http:\/\/www.youtube.com\/v\/V2ImdQdPqNE” width=”560″ height=”315″ wmode=”transparent” \/] Transcripci\u00f3n: Hola, soy Sergio Luj\u00e1n Mora, profesor de inform\u00e1tica de la Universidad de Alicante, y en este v\u00eddeo …<\/p>\n

HTML: listas<\/span> Leer M\u00e1s »<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[160020,411],"class_list":["post-3722","post","type-post","status-publish","format-standard","hentry","category-general","tag-idesweb","tag-video"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3722","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=3722"}],"version-history":[{"count":1,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3722\/revisions"}],"predecessor-version":[{"id":3723,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3722\/revisions\/3723"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=3722"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=3722"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=3722"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}