MANEJO DE LISTAS EN HTML
Objetivo: Aprender a crear listas ordenadas y
desordenadas en HTML, así como listas anidadas.
Las listas en
HTML son una forma de organizar y presentar información de forma estructurada y
legible. Te permiten agrupar elementos relacionados en una secuencia lógica, ya
sea con viñetas o con números.
Tipos de
listas en HTML:
·
Listas
Desordenadas (<ul>): Estas listas se representan con viñetas, y no hay un
orden específico entre los elementos. Se utilizan para mostrar grupos de
elementos donde el orden no es importante.
·
Listas
Ordenadas (<ol>): Estas listas se representan con números o letras, y el
orden de los elementos es significativo. Se utilizan para mostrar secuencias,
pasos o listas numeradas.
Ejemplo de lista desordenada: CLIC AQUI PARA DESCARGAR EJEMPLO
<!DOCTYPE
html>
<html>
<head>
<title>Ejemplo de lista
desordenada</title>
</head>
<body>
<h1>Frutas</h1>
<ul>
<li>Manzana</li>
<li>Pera</li>
<li>Banana</li>
</ul>
</body>
</html>
Ejemplo de lista ordenada: CLIC AQUI PARA DESCARGAR EJEMPLO
<!DOCTYPE
html>
<html>
<head>
<title>Ejemplo de lista
ordenada</title>
</head>
<body>
<h1>Pasos para hornear un
pastel</h1>
<ol>
<li>Precalentar el horno.</li>
<li>Mezclar los ingredientes
secos.</li>
<li>Añadir los ingredientes
húmedos.</li>
<li>Hornear hasta que esté
dorado.</li>
</ol>
</body>
</html>
·
Listas
anidadas: Se pueden crear listas dentro de otras listas para organizar la
información en niveles.
CCLIC AQUI PARA DESCARGAR EJEMPLO
Ejemplo de
lista anidada:
<!DOCTYPE
html>
<html>
<head>
<title>Ejemplo de lista
anidada</title>
</head>
<body>
<h1>Tipos de animales</h1>
<ul>
<li>Mamíferos
<ul>
<li>Perro</li>
<li>Gato</li>
<li>Elefante</li>
</ul>
</li>
<li>Aves
<ul>
<li>Águila</li>
<li>Pájaro carpintero</li>
<li>Pingüino</li>
</ul>
</li>
</ul>
</body>
</html>
