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:
Lo más importante que debéis aprender en este curso es como tabular correctamente vuestro código. Incluye imágenes de casos bien tabulados y mal tabulados.
Un error típico en muchos alumnos de web es no anidar bien las etiquetas. Te resumo como hacerlo y dónde se suele equivocar la gente.
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Ejercicio html en el que se practican los conceptos de listas anidadas ul, ol , li , anclas, enlaces, link y url relativas. Incluye solución. ¡Tu primer libro digital con html!
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
La web sería muy distinta a como la conocemos hoy de no ser por Tim Berners-Lee y la invención en 1989 de la etiqueta enlace. El hipervínculo hizo posible incorporar a documentos estructurados y marca...
Cesar Octavio
Publicado a las 01:45h, 04 eneroMuchas gracias, me sirvió de mucho, saludos.
Francesc Ricart
Publicado a las 22:22h, 04 enero¡Muchas gracias!