5.5 Ejercicios sobre listas • Tupac Bruch

Curso introductorio al HTML orientado al SEO 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>

Anterior Lección

Volver al Curso

Siguiente Lección