30 Ene Ejercicio html sobre listas anidadas para un menú de navegación
En este ejercicio vamos a repasar como anidar listas correctamente.
Puedes repasar la teoría en esta publicación.
La idea de este ejercicio es simular la estructura html del menú de navegación de una página web.
Enunciado
Anida correctamente la lista no ordenada que se muestra en la imagen.
Solución del ejercicio
El concepto más importante a retener es evitar el típico error de escribir
<!--MAL-->
<ul><li></li>
<ul>
<li></li>
</ul>
</ul>y en su lugar escribir
<!--BIEN--!
<ul><li>
<ul>
<li></li>
</ul>
</li>
</ul>Fijaros que el cierre </li> se desplaza hasta finalizar la lista anidada.
<!DOCTYPE html>
<html>
<head>
<title>Lista de servicios profesionales</title>
<meta charset="utf-8"/>
<meta name="author" content="Francesc Ricart" />
<meta name="description" content=""/>
</head>
<body>
<ul>
<li>Inicio</li>
<li>Sobre mí</li>
<li>servicios
<ul>
<li>Fontanería</li>
<li>Electricidad</li>
<li>Pintura
<ul>
<li>Parkings</li>
<li>Trabajos en altura</li>
<li>Domicilios privados</li>
</ul>
</li>
</ul>
</li>
<li>Testimonios</li>
<li>Contacto</li>
</ul>
</body>
</html>¡Hola!
Querido lector,
En HTML en muchas ocasiones es difícil apreciar si una lista está correctamente anidada o no.
Parece que lo estás haciendo bien hasta que te fijas con detenimiento.
Dirás…. ¡si no pasa nada!
Bien. Cuando estés intentando dar estilos mediante CSS a menús desplegables palparás las consecuencias si no anidas bien.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Entradas relacionadas:
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Existen 2 formas de aprender el html. Uno es ir desde las etiquetas más antiguas y obsoletas hacia las más modernas del html5 o viceversa. Yo soy partidario de aprender html5 directamente y hacer borr...
Ejercicios html sobre listas ordenadas y listas no ordenadas y el uso de los atributos que pueden acompañar una lista. Inlcuye solución.
¿Quieres evitar que tus páginas web sean invisibles en internet? Entonces la etiqueta title es para ti y esta entrada te interesa.
Renfe en huelga. Una historia que se repite y un programador algo cansado de escribir siempre el mismo código. ¡Con capturas de pantalla!
¿Como crear y organizar capas html en un documento web? En este ejercicio lo harás de 0. Se incluye propuesta de solución. Es un paso previo a html5.
Cesar Octavio
Posted at 01:45h, 04 eneroMuchas gracias, me sirvió de mucho, saludos.
Francesc Ricart
Posted at 22:22h, 04 enero¡Muchas gracias!