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:
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Resumen con ejemplos de como acceder de forma relativa y con enlaces a los distintos archivos de un proyecto web dado un html referencia.
El uso de tablas html es un clásico dentro del mundo web. Se usan como recurso para introducir datos en un documento web y nunca para maquetar. ¡O así debería ser! Veamos thead, tbody, tfoot, caption...
Ejercicio html dónde practicarás primero con el word de Office y después mediante html el estructurado correcto de los encabezados de un documento web mediante h1, h2 y h3
Anteriormente hemos visto que es un enlace y como se construye mediante una etiqueta y cuales son los atributos más importantes que lo acompañan. Hoy vamos a ver una de las utilidades más prácticas d...
Ejercicio html en el que se resuelve un formulario html a partir de unas especificaciones determinadas. 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!
Ion Galletero
Posted at 11:09h, 02 agostoBuen post.
Una duda me surge respecto a ese código. Si quisiera aplicarle un estilo con CSS (por ejemplo, una negrita para estos elementos de la lista (Inicio, sobre mí, servicios, testimonios y contacto) pero NO para (Fontanería, Electricidad, Pintura) NI a los subelementos de Pintura (Parkings, Trabajos en altura, Domicilios privados), cómo se podría hacer? He probado esto pero aparecen todos los items y los subitems en negrita: (te pregunto esto pues estoy haciendo un curso de Google Activate y dicen que esto funciona pero yo veo todos los items y subitems en negrita.)
Lista de servicios profesionales
Inicio
Sobre mí
servicios
Fontanería
Electricidad
Pintura
Parkings
Trabajos en altura
Domicilios privados
Testimonios
Contacto
El CSS:
ul#lista > li {font-weight: bold; }