5.5 Ejercicios sobre listas

Ahora toca hacer ejercicios de listas, pero también mezclando algunas cosillas que vimos en las unidades anteriores.

Ejercicio número 1

Ejemplo de lista anidada simple de dos niveles

Veamos la respuesta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio número 1 de listas</title>
</head>
<body>
    <h1>Menú del Sitio web</h1>
    
    <ul>
      <li>Nuevos cursos (próximamente)</li>
      <li>
        <strong>Posteos</strong>
        <ul>
          <li><a href="#" title="Posts de Marketing">Posts de Marketing</a></li>
          <li><strong><a href="#" title="Posts de Programación">Posts de Programación</a></strong></li>
          <li><a href="#" title="Posts de SEO">Posts de SEO</a></li>
        </ul>
      </li>
    </ul>
</body>
</html>

Ejercicio número 2

Vamos a complicarlo un poco

Ejemplo de lista anidada compleja de dos niveles

Bien, veamos la respuesta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio número 2 de listas</title>
</head>
<body>
    <h1>Menú del Sitio web</h1>
    
    <ul>
      <li>Nuevos cursos (próximamente)</li>
      <li>
        <strong>Posteos</strong>
        <ul>
          <li><a href="#" title="Posts de Marketing">Posts de Marketing</a></li>
          <li><strong><a href="#" title="Posts de Programación">Posts de Programación</a></strong></li>
          <li><a href="#" title="Posts de SEO">Posts de SEO</a></li>
        </ul>
      </li>
    </ul>
      </li>
      <li>
        Posts de Programación
        <ol>
          <li><strong>HTML</strong></li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Phyton</li>
        </ol>
      </li>
      <li>
        Contacto
        <dl>
          <dt><em>Email</em></dt>
          <dd><strong>pepefrog@tupacbruch.com</strong></dd>
          <dt><em>Contacto</em></dt>
          <dd>+54 9 11 tiki taka</dd>
          <dt><em>Dirección</em></dt>
          <dd>Calle falsa 123</dd>
        </dl>
      </li>
    </ul>
    
</body>
</html>
error: Content is protected !!
Ir arriba