Listas ordenadas en HTML
Uso de las listas ordenadas en HTML
Las listas ordenadas en HTML se pueden usar de múltiples maneras. Los siguientes cuatro ejemplos demostrarán algunos de sus escenarios de uso:
Ejemplo #1: Uso simple de las listas ordenadas
En este ejemplo, aprenderemos a crear una lista simple ordenada en HTML. Para hacerlo, tendrá que pasar por el script HTML que se muestra en la siguiente imagen:
Las listas ordenadas en HTML se pueden crear utilizando la etiqueta "OL". Una vez que aplica esta etiqueta, menciona todos los elementos de esta lista ordenada al encerrarlos dentro de la etiqueta "Li". En este ejemplo, creamos una lista ordenada de tres cursos. Por lo tanto, usamos la etiqueta "OL" seguida de las tres etiquetas "Li" en este script.
Luego, después de guardar este script y ejecutarlo dentro de nuestro navegador, la siguiente página web aparece en nuestra pantalla. Puede ver que nuestros cursos especificados se muestran en forma de una lista ordenada en esta página web.
Ejemplo #2: Listas ordenadas con letras mayúsculas
No es necesario tener solo la lista ordenada de números. También podemos tener las listas ordenadas de alfabetos. El script HTML que se muestra en la siguiente imagen demostrará cómo crear una lista ordenada con las letras de mayúsculas en HTML.
En este script HTML, mostramos las tres direcciones diferentes en forma de una lista ordenada. Sin embargo, esta vez, queremos una lista ordenada de las cartas de mayúsculas. Por lo tanto, utilizamos un atributo adicional de "tipo" con la etiqueta "OL" para mencionar el tipo exacto de la lista ordenada. Igualamos este atributo a "A" para crear una lista ordenada con los alfabetos de mayúsculas. Entonces, simplemente mencionamos todos los elementos de esta lista ordenada con la etiqueta "li".
Nuestra lista ordenada con los alfabetos de mayúsculas se muestra en la siguiente imagen:
Nota: Si reemplaza "A" en el guión anterior con "A", "I", "I" o "1", entonces nuestra lista ordenada tendrá cartas de casos pequeños, números romanos de mayúsculas, números romanos en minúsculas, o números romanos en minúsculas, o números romanos de minúsculas, o números romanos, o números romanos en minúsculas, o números romanos, o números romanos en minúsculas, Números, respectivamente. Sin embargo, por defecto, una lista ordenada en HTML comprende números. Por lo tanto, no necesita mencionar específicamente el tipo "1" en este caso.
Ejemplo #3: Listas ordenadas con un punto de partida aleatorio
A veces, no desea que su lista ordenada comience con "1". Más bien, quieres tener un punto de partida aleatorio para ello. Para hacer eso, puede usar el script HTML que se muestra en la siguiente imagen:
En este script, queremos que nuestra lista ordenada comience desde el número "10". Por lo tanto, usamos el atributo "Inicio" con la etiqueta "OL" y la iguala a "10". Entonces, mencionamos los tres elementos diferentes con la etiqueta "li".
Nuestra lista ordenada con un punto de partida de nuestra elección que no sea "1" se muestra en la siguiente imagen:
Ejemplo #4: listas ordenadas anidadas
En este ejemplo, aprenderemos a crear las listas ordenadas anidadas, yo.mi. Listas ordenadas dentro de una lista ordenada en HTML. El script HTML para este propósito se muestra en la siguiente imagen:
En este ejemplo, queremos tener una lista externa de las diferentes bebidas. Dentro de cada categoría, queríamos tener las listas ordenadas internas para mencionar las diferentes bebidas que pertenecen a cada una de estas categorías. Por lo tanto, anidamos las etiquetas "OL" y "Li" en consecuencia en el script HTML que se muestra en la imagen anterior.
La siguiente página web muestra nuestra lista anidada ordenada en HTML:
Conclusión
Este tutorial es para discutir el uso de las listas ordenadas en HTML. Le dimos una breve presentación de las listas ordenadas en HTML seguido de algunos ejemplos que estaban destinados a aportar más claridad a este concepto. Después de comprender bien estos ejemplos, podrá usar las listas ordenadas en HTML de manera bastante efectiva.