A fin de mostrar contenido organizado mediante páginas
web, crearemos listas en un documento
HTML, según las recomendaciones oficiales de este lenguaje de marcado. A veces el creador de proyectos para internet pasa
largas horas en la especificación de estilos a un proceso, para mostrarlo
organizadamente. A fin de sortear retrasos de esta índole, identificaremos los
tipos de listas disponibles en el lenguaje HTML.
La información visualizada en páginas
web generalmente suele ser extensa. Por
ende, mediante listas es posible proporcionar mejor organización a un texto,
debido a la oportunidad de crear un diseño intuitivo y claro para el usuario,
cuando mostramos procedimientos. En la imagen, vemos dos recuadros con
información repetida; sin embargo, cuando es mostrada mediante una lista, se
aprecia con facilidad el concepto explicado.
061-01_0901_ilu01. Comparación de información con y sin lista
Los tipos de listas disponibles en
el lenguaje HTML son:
- Listas
desordenadas: son utilizadas para representar un contenido, sin tener en cuenta
una secuencia u orden.
- Listas
ordenadas: son utilizadas para representar un contenido donde es necesario mostrar
una secuencia. Por lo tanto, se marcan los elementos con números o letras, para
definir el orden.
- Listas de
definiciones: utilizadas para representar un contenido donde se explica el
significado de una serie de términos.
061-01_0901_ilu02. Tipos de listas
Cada ítem de la lista se marca con
la etiqueta li, creándose el inicio y
el cierre correspondiente en cada línea. De esta forma, el navegador web las muestra una debajo de la otra.
Esta etiqueta es utilizada en listas ordenadas y desordenadas.
- Unordered lists es el término en inglés de listas
desordenadas, y la etiqueta para marcarlas es ul, la cual delimita el bloque marcado con los elementos li. En la vista del usuario, observamos
cómo se crea un margen de separación en el lado izquierdo y, por defecto, un círculo
negro en cada elemento.
061-01_0901_ilu03. Código de HTML con
lista desordenada
- Ordered lists es el término en inglés de listas ordenadas,
la etiqueta para marcarlas es ol, y cada
elemento lineal se identifica con li,
a fin de separarlos entre sí. El usuario observará una lista como la de la
imagen siguiente, la cual se enumera, por defecto, con decimales.
061-01_0901_ilu04. Código de HTML con lista
ordenada
Ambos tipos de listas son de gran
importancia para ordenar datos, bien sea para mostrarlos sin especificar orden,
mediante la etiqueta ul; o bien especificar
un orden, mediante la etiqueta ol.
Ambas etiquetas pertenecen a la clasificación Etiquetas Agrupación de Contenido,
llamadas así en el estándar oficial de HTML.
Keynotes
- La información visualizada en páginas web generalmente suele ser extensa. Por
ende, mediante listas es posible proporcionar mejor organización a un texto,
debido a la oportunidad de crear un diseño intuitivo y claro para el usuario,
cuando mostramos procedimientos.
- Listas desordenadas: son utilizadas para
representar un contenido, sin tener en cuenta una secuencia u orden.
- Listas ordenadas: son utilizadas para
representar un contenido donde es necesario mostrar una secuencia. Por lo
tanto, se marcan los elementos con números o letras, para definir el orden.
- Listas de definiciones: utilizadas para
representar un contenido donde se explica el significado de una serie de
términos.
- Unordered
lists es el término en inglés de listas desordenadas, y la etiqueta para
marcarlas es ul, la cual va a
delimitar el bloque marcado con los elementos.
- Ordered
lists es el término en inglés de listas ordenadas, la etiqueta para
marcarlas es ol, y cada elemento
lineal se identifica con li, a fin de
separarlos entre sí
Reto
Crea una lista ordenada y desordenada en un
documento HTML, según las recomendaciones oficiales de este lenguaje.
¡Comparte el resultado final de tu reto en vPages y pide a tus compañeros ingresar
sus procedimientos!
Tiempo disponible: entre 15 y 30 minutos.
CierreMediante la creación de listas en un documento
HTML, según las recomendaciones oficiales de este lenguaje, optimizamos el
tiempo cuando sea necesario especificar estilos a una información organizada.
Además, representamos correctamente los pasos de un proceso para páginas web. Con disciplina y determinación,
recordaremos con éxito los tipos de listas ofrecidos por el lenguaje HTML.
