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:
¿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.
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Tratamos las etiquetas que permiten preformatear el texto de un documento web. Como se escriben, para que sirven y sus peculiaridades con un ejemplo práctico. Veréis el código html y el resultado por ...
Ejercicio para practicar los frameset de html. Incluye solución.
El HTML es un lenguaje de marcado que constituye uno de los pilares de la web. Es un idioma que se caracteriza por etiquetar el contenido de una página web. El HTML nos ayuda a conferir contenido y es...
Ejercicio html para practicar las etiquetas html de texto. Tanto las más típicas como otras menos usadas igualmente importantes. Incluye solución.
Cesar Octavio
Posted at 01:45h, 04 eneroMuchas gracias, me sirvió de mucho, saludos.
Francesc Ricart
Posted at 22:22h, 04 enero¡Muchas gracias!