07 Nov Ejercicios resueltos sobre listas anidadas (encapsuladas) de html
En este ejercicio encontrarás el enunciado y la solución de 3 ejercicios sobre listas anidadas (encapsuladas) ordenados por dificultad creciente.
Antes de resolverlos te sugiero leer esta entrada dónde se explica la teoría y encontrarás ejemplos.
Vamos a repasarlo mediante un ejercicio.
Enunciado 01
Transcribe la siguiente imagen en lenguaje html.
Solución del ejercicio 01
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 01 - Listas anidadas</title>
<meta charset="UTF-8">
<meta name="author" content="Francesc Ricart"/>
</head>
<body>
<ul>
<li>Nadadores</li>
<li>Ciclistas</li>
<li>Atletas</li>
<li>Futbolistas
<ul>
<li>Messi</li>
<li>Cr7</li>
<li>Joao</li>
</ul>
</li>
</ul>
</body>
</html>Enunciado 02
Transcribe la siguiente imagen en lenguaje html.
Solución del ejercicio 02
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 02 - Listas anidadas</title>
<meta charset="utf-8"/>
<meta name="author" content="Francesc Ricart"/>
</head>
<body>
<ul>
<li>Barcelona
<ul>
<li>Mataró</li>
<li>Sabadell</li>
</ul>
</li>
<li>Tarragona
<ul>
<li>Reus</li>
<li>Salou</li>
<li>Cambrils</li>
</ul>
</li>
<li>Lleida</li>
<li>Girona</li>
</ul>
</body>
</html>Enunciado 03
Transcribe la siguiente imagen en lenguaje html.
Solución del ejercicio 03
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio 03 - Listas anidadas</title>
<meta charset="utf-8">
<meta name="author" content="francesc ricart">
</head>
<body>
<ul>
<li>Sobre mi</li>
<li>Servicios</li>
<li>Tutoriales
<ul>
<li>Tutorial html
<ul>
<li>Enlaces</li>
<li>Imágenes</li>
<li>Listas</li>
</ul>
</li>
<li>Tutorial css</li>
<li>Tutorial javascript</li>
<li>Tutorial wordpress</li>
</ul>
</li>
<li>Contacto</li>
</ul>
</body>
</html>¡Hola!
Querido lector,
Una vez resueltos los ejercicios la recomendación es ahora que los vuelvas a hacer pero esta vez a bolígrafo y papel.
¿Eres capaz de tabular correctamente sobre el papel las soluciones?
Si la respuesta es que si, ¡enhorabuena, ya sabes encapsular listas correctamente!
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio html de nivel básico para practicar con el espacio en blanco de HTML. Incluye solución.
Ejercicio html dónde se practica un ejemplo de uso de un mapa de imagen. Incluye solución.
En esta entrada hago un ejercicio mental repasando el conjunto de atributos típicos usados en HTML. ¿Cuantos dirías que salen? ¿20, 30, 40, más?
Ejercicio html5 dónde transformamos un documento web realizado con capas html . Incluye solución.
¿Por qué se escapan los caracteres en html? ¿Que utilidad tiene complicarse con símbolos estraños? ¿Como los usamos? Apuntes de alumno HTML.
Conceptos mínimos que debes aprender sobre doctype ¿Cómo y cuándo debemos usar la instrucción doctype? ¿Tienes claro si es en minúscula o mayúscula. ¿Qué es el DTD?
No hay comentarios