Listas

Progreso de Lección:

Información Adicional

No existe información adicional para este video tutorial.

Transcripción

En este video aprenderemos sobre 3 etiquetas de HTML que nos ayudarán a crear listas
Estas listas pueden ser, una lista de tus 10 canciones preferidas, una lista de compras, o de lo que tú desees.
Vamos a crear nuestra primera lista usando la etiqueta ol, que es la etiqueta usada para crear listar ordenadas
La etiqueta ol, se usa cuando quieres crear una lista cuyos elementos tienen un orden específico, que es contrario a una lista donde los elementos no tienen orden, o un lista sin orden.
Vamos a ver cómo funciona
Colocamos primero nuestra etiqueta ol y la cerramos
No podemos usar únicamente la etiqueta ol para crear nuestra lista
Para crear cada elemento de la lista usaremos la etiqueta li que viene de list ítems, o elementos de la lista en español
Así que vamos a añadir una etiqueta li
Colocamos un texto que sería el primer elemento de nuestra lista, y cerramos la etiqueta li ya que aquí es donde este elemento termina
Vamos a crear más elementos en esta lista para ver una mejor demostración cuando nos dirijamos hacia el navegador
Así que voy a copiar este elemento tres veces y luego simplemente cambiaremos su contenido
Una vez editado, guardamos nuestro documento, regresamos al navegador
Y al refrescar el navegador, puedes observar que ahora tenemos nuestra lista con todos los elementos ordenados
Observa como todos los elementos de nuestra lista han sido numerados automáticamente
No hemos tenido la necesidad de añadirlos manualmente
También observa como la lista tiene una pequeña sangría, un pequeño margen hacia la izquierda del navegador
Ahora intentemos cambiar la posición de nuestros elementos en la lista para ver qué es lo que sucede
Vamos a regresar a nuestro editor de texto
Así que vamos a mover el tercer elemento de nuestra lista y lo coloremos arriba, al inicio de la lista
Si regresamos al navegador y refrescamos la página
Podrás ver que ahora el tercer elemento se encuentra al inicio de nuestra lista, pero la numeración que tienen no ha cambiado
Lo que esto significa es que la numeración automática se añadir a la lista de elementos no importando lo que diga tu texto, la numeración se colocará en base al orden en el que nosotros colocamos los elementos, y no en base a lo que el texto del elemento diga
Ahora vamos a ver cómo realizar listas desordenadas
Es una etiqueta similar a la etiqueta ol, la etiqueta para las listas desordenadas se llama ul
Ul viene de unorder list, o lista sin orden, tal y como lo indica su nombre, con la etiqueta ul podremos crear listas en las que los elementos no tienen un orden específico
Así que regresemos al editor y veamos cómo funciona
Todo lo que necesitamos hacer es cambiar nuestra etiqueta ol por ul
Así que cambiamos la etiqueta de apertura y la de cierre
Y podemos dejar todos los otros elementos de la lista tal y como están, ya que la etiqueta li únicamente representa elementos de una lista, pero puede ser usada en ambos tipos de lista
Tanto en las listas ordenadas como en las listas sin orden
Vamos a guardar nuestro documento, regresamos al navegador y refrescamos la página
Y podrás notar que los números que teníamos anteriormente ahora han cambiado por estas viñetas circulares
De modo que no se aplica un orden específico de forma automática a esta lista
Las listas sin orden pueden encontrarse anidadas, es decir que pueden encontrarse una dentro de otra
Vamos a regresar al editor de texto para ver de lo que estamos hablando
Lo que haremos es simplemente copiar toda la lista
Y la vamos a pegar justo dentro del primer elemento de nuestra lista, vamos a pegarlo después del texto del elemento de la lista
Regresemos al navegador, refrescamos la página
Y como puedes ver ahora tenemos otra lista sin orden, la cual tiene un margen un poco mayor que la lista principal y se encuentra abajo del primer elemento de nuestra lista principal
Regresemos al editor de texto, y lo que haremos es intentar anidar o crear más sublistas
Y dentro de la lista que ya tenemos anidad a la lista principal
Vamos a añadir otra lista más
Lo vamos a hacer en el segundo elemento esta vez
Y además añadiremos otras listas en el tercer elemento de la lista principal
Ahora guardamos el documento, regresamos al navegador y refrescamos la página
Y como puedes ver tenemos un conjunto de listas y sublistas con un formato correcto,
Por cada subnivel de las listas, se añade un mayor margen que la anterior, el cuál es aplicado automáticamente por el navegador
El estilo para la lista principal es diferente al de las primeras sublistas y este a su vez es diferente que el usado para la segunda sublista
Esto, combinado con los márgenes, nos ayudan a rápidamente identificar las listas padre y las listas hijas
Las listas son usadas muy regularmente en HTML
Y cuando veamos CSS, aprenderemos como usarlas para otros propósitos, como la navegación de nuestro sitio web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Crea tu sitio web con diseño profesional en menos de 15 minutos
Ver Tutorial
close-image