Curso HTML - Parte 02 - LISTAS

En esta segunda parte del Curso de HTML vamos a ver uno de los elementos más populares de HTML, además de ser de los que se implementó en las primeras versiones, me estoy refiriendo a las LISTAS, las cuales, a su vez, puede ser de tres tipos: No Ordenadas, Ordenadas o numeradas y De descripción. Estas últimas, también llamadas Listas de Definición, se emplean para mostar términos con sus correspondientes definiciones, como si se tratese de un glosario o diccionario. También veremos el concepto de Listas Anidadas, que son listas incluidas unas dentro de otras. Veamos el vídeo...

     
     

HTML: listas

     
Principales ETIQUETAS relativas a las LISTAS en HTML

• ul - Lista No Ordenada (unordered list)
• ol - Lista Ordenada (ordered list)
• dl - Lista de Descripción (description list)
• li - Elemento de Lista Ordenada ó No Ordenada (list ítem)
• dt - Término de Lista de Descripción (definition term)
• dd - Descripción de Término de Lista de Descripción  (definition description)

    

Con tan sólo este puñado de etiquetas relativas a las Listas ya podemos realizar un ejercicio de escritura del código necesario para crear un ejemplo con los tres tipos de listas disponibles en HTML. Para ello utilizaremos el editor web NOTEPAD++ del que ya vimos sus características en el capítulo anterior y que ya deberíamos haber descargado e instalado en nuestro sistema operativo. De todas formas, y para los rezagados que aún no lo hayaís instalado, aquí tenéis el enlace de descarga.
     

Código HTML escrito en el editor web NOTEPAD++ que incluye los tres tipos de Listas en HTML

Una vez escrito el código, o según lo vayamos escribiendo en Notepad++, podemos ver como se visualizaría la página en un navegador determinado. Para ello nos vamos al Menú Ejecutar del programa y en el desplegable que se abrirá nos aparecerá una lista de los Navegadores Web que tenemos instalados en nuestro sistema operativos para que elijamos desde cuál queremos "lanzar" la página para visualizarla. En mi caso la he lanzado desde el navegador Mozilla Firefox y la vista previa de la página es la siguiente...
     

Vista Previa en el navegador Mozilla Firefox de la página escrita en el editor web Notepad++

Como veis en la imagen anterior, en el caso de las Listas No Ordenadas, los elementos aparecen marcados mediante unos pequeños símbolos, llamados en inglés bullet. También observamos en las Listas de Definición que las descripciones de cada término de la lista aparecen en una línea nueva con una sangría hacia la derecha.

    

Posibles ATRIBUTOS de LISTA ORDENADA

• En HTML4 y HTML5:
• start - Permite indicar el valor inicial para comenzar la lista
• type - Permite indicar el tipo de numeración (p.ej. letras ó números romanos)
• En HTML5:
• reversed - Permite indicar que la numeración sea descendente. Es un atributo booleano, es decir, sólo puede tomar un valor, que es el mismo nombre que el atributo

     

LISTAS ANIDADAS
Una lista dentro de otra lista (llamada sublista). Las listas se pueden anidar entre sí, incluso si son de distinto tipo. Si anidamos listas no numeradas, cada nivel de anidamiento tendrá un tipo de símbolo distinto.
     

FIN Curso HTML - Parte 2 - LISTAS

Este curso es un resumen personalizado del Curso de Introducción al Desarrollo Web: HTML y CSS de la plataforma de formación Google Actívate, al que podrás acceder desde el siguiente enlace si es que quieres realizarlo completo y así conseguir la certificación oficial de Google. Espero que os sirva de ayuda...