Ejercicios resueltos HTML

Después de haber completado el tutorial de HTML, es hora de poner a prueba tus conocimientos y habilidades. En este artículo, te presentamos una serie de ejercicios resueltos sobre HTML que te ayudarán a consolidar lo que has aprendido.

Contenidos del artículo

Ejercicios resueltos HTML

Los siguientes ejercicios resueltos te proporcionarán la práctica necesaria para crear y estructurar páginas web utilizando etiquetas HTML, así como para comprender cómo se construyen los elementos clave de un sitio web.

1. Ejercicio resuelto HTML: Crea una página con las siguientes etiquetas

Para este ejercicio necesitas estudiar las tres primeras secciones del tutorial HTML.

Crea una página web HTML que cumpla con las siguientes especificaciones:

Estructura Básica: Crea la estructura básica de un documento HTML con las siguientes etiquetas:

<!DOCTYPE html>
<html lang="es">
<head> con:
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Mi Página Web</title>
<body> que contenga:
- <header> con:
- <h1>Bienvenidos a Mi Página Web</h1>
- <p>Esta es una página de ejemplo para el ejercicio.</p>

Secciones: Agrega dos secciones a tu página:

Una sección principal <main> con:
- <h2>Acerca de Nosotros</h2>
- <p>Somos una empresa dedicada a ofrecer soluciones web.</p>
Una sección <section> con:
- <h2>Nuestros Servicios</h2>
- Una lista ordenada <ol> con tres elementos <li> que describan los servicios que ofrece tu empresa. Las viñetas deben ser de tipo abecedario.
- Un enlace <a> con el texto «Ver más servicios» que lleve a https://www.ejemplo.com. Abre el enlace en una nueva ventana o pestaña del navegador.

Pie de Página: Crea un pie de página <footer> con dos enlaces:

Un enlace <a> con el texto «Enviar correo electrónico» que tenga href="mailto:info@miempresa.com".
Un enlace <a> con el texto «Llamar por teléfono» que tenga href="tel:+1234567890".
Incluye el carácter especial «©» seguido del nombre de tu empresa para indicar «Todos los derechos reservados». Utiliza entidades, código hexadecimal o decimal para incluir el carácter especial

Ejercicio resuelto:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Página Web</title>
</head>
<body>
  <header>
    <h1>Bienvenidos a Mi Página Web</h1>
  </header>
  <p>Esta es una página de ejemplo para el ejercicio.</p>
  <main>
    <h2>Acerca de Nosotros</h2>
    <p>Somos una empresa dedicada a ofrecer soluciones web.</p>
  </main>
  <section>
    <h2>Nuestros Servicios</h2>
    <ol type="a">
      <li>Diseño Web</li>
      <li>Desarrollo de Aplicaciones</li>
      <li>Marketing Digital</li>
    </ol>
  <p><a href="https://www.ejemplo.com" target="_blank">Ver más servicios</a></p>
  </section>
  <footer>
    <a href="mailto:info@miempresa.com">Enviar correo electrónico</a><br>
    <a href="tel:+1234567890">Llamar por teléfono</a><br>
    &#169; Mi Empresa, Todos los derechos reservados
  </footer>
</body>
</html>

Ejemplo en CodePen

2. Ejercicio resuelto HTML: Crea un formulario de registro

Para este ejercicio necesitas estudiar la cuarta sección del tutorial HTML.

Crea una página de registro en HTML que recoja información detallada de los usuarios. La página debe contener los siguientes campos:

Información Personal:

Nombre (Campo de texto, requerido)
Apellido (Campo de texto, requerido)
Fecha de Nacimiento (Campo de fecha, requerido)
Género (Selector de tipo radio: Masculino, Femenino, Otro, requerido)

Información de Contacto:

Dirección de Correo Electrónico (Campo de correo electrónico, requerido)
Número de Teléfono (Campo de teléfono, requerido)
Dirección (Campo de texto de varias líneas)

Información de Cuenta:

Nombre de Usuario (Campo de texto, requerido)
Contraseña (Campo de contraseña, requerido)
Confirmación de Contraseña (Campo de contraseña para confirmar, requerido)

Preferencias:

Seleccionar un Color Favorito (Selector de tipo select: Rojo, Azul, Verde, Amarillo)
Aceptar Términos y Condiciones (Selector de tipo checkbox, requerido)

Utiliza etiquetas fieldset y legend para agrupar y describir secciones de formulario. Asegúrate de que los campos marcados como «requeridos» deben ser completados antes de enviar el formulario. Enlaza cada etiqueta <label> con su campo de entrada correspondiente utilizando los atributos for e id para mejorar la accesibilidad.

Ejercicio resuelto:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Usuario</title>
</head>
<body>
    <h1>Registro de usuario</h1>
    <form action="#" method="post">
        <fieldset>
            <legend>Información Personal</legend>
            <label for="nombre">Nombre:</label>
            <input type="text" id="nombre" name="nombre" required><br><br>

            <label for="apellido">Apellido:</label>
            <input type="text" id="apellido" name="apellido" required><br><br>

            <label for="fechaNacimiento">Fecha de Nacimiento:</label>
            <input type="date" id="fechaNacimiento" name="fechaNacimiento" required><br><br>

            <legend>Género:</legend>
            <input type="radio" id="masculino" name="genero" value="Masculino" required>
            <label for="masculino">Masculino</label><br>

            <input type="radio" id="femenino" name="genero" value="Femenino">
            <label for="femenino">Femenino</label><br>

            <input type="radio" id="otro" name="genero" value="Otro">
            <label for="otro">Otro</label><br><br>
        </fieldset>

        <fieldset>
            <legend>Información de Contacto</legend>
            <label for="email">Correo Electrónico:</label>
            <input type="email" id="email" name="email" required><br><br>

            <label for="telefono">Número de Teléfono:</label>
            <input type="tel" id="telefono" name="telefono" required><br><br>

            <label for="direccion">Dirección:</label><br>
            <textarea id="direccion" name="direccion" rows="4" cols="50"></textarea><br><br>
        </fieldset>

        <fieldset>
            <legend>Información de Cuenta</legend>
            <label for="usuario">Nombre de Usuario:</label>
            <input type="text" id="usuario" name="usuario" required><br><br>

            <label for="contrasena">Contraseña:</label>
            <input type="password" id="contrasena" name="contrasena" required><br><br>

            <label for="confirmacionContrasena">Confirmar Contraseña:</label>
            <input type="password" id="confirmacionContrasena" name="confirmacionContrasena" required><br><br>
        </fieldset>

        <fieldset>
            <legend>Preferencias</legend>
            <label for="colorFavorito">Seleccionar un Color Favorito:</label>
            <select id="colorFavorito" name="colorFavorito">
                <option value="Rojo">Rojo</option>
                <option value="Azul">Azul</option>
                <option value="Verde">Verde</option>
                <option value="Amarillo">Amarillo</option>
            </select><br><br>

            <input type="checkbox" id="aceptarTerminos" name="aceptarTerminos" required>
            <label for="aceptarTerminos">Acepto los Términos y Condiciones</label><br><br>
        </fieldset>

        <input type="submit" value="Registrarse">
    </form>
</body>
</html>

Ejemplo en CodePen

3. Ejercicio resuelto HTML: Crea una tabla de contenido en HTML5

Para este ejercicio necesitas estudiar las secciones 6 y 7 del tutorial HTML.

Imagina que estás creando una página web para un libro en línea y necesitas crear una tabla de contenido para mostrar los capítulos del libro. Debes usar las siguientes etiquetas HTML: <table>, <caption>, <tr>, <td>, <th>, <colgroup>, <col>, <tbody>, <thead>, <tfoot> y los atributos rowspan y colspan según sea necesario.

Crea una tabla <table> que contendrá la tabla de contenido del libro.
Agrega una fila de encabezado <thead> a la tabla con una fila <tr>.
En la fila de encabezado, agrega celdas de encabezado <th> para las siguientes columnas: Capítulo, Título del Capítulo y Páginas.
Utiliza el atributo colspan para combinar las tres celdas de encabezado en una sola celda de encabezado que tenga el texto «Contenido del Libro».
Ahora, agrega tres filas <tr> en la sección del cuerpo <tbody> de la tabla para representar los primeros tres capítulos del libro.
Dentro de cada fila, agrega una celda de datos <td> para cada columna (Capítulo, Título del Capítulo y Páginas). Llena estas celdas con información de ejemplo para los primeros tres capítulos del libro.
Utiliza el atributo rowspan para combinar las celdas de datos de los capítulos en una sola celda para cada capítulo. Esto indicará cuántas filas ocupa cada capítulo.
Luego, agrega una fila <tr> adicional para representar el cuarto capítulo del libro. En este caso, el cuarto capítulo debería ocupar solo una fila.
Completa la tabla agregando más filas y celdas de datos para representar más capítulos del libro, manteniendo la estructura de la tabla de contenido.

Ejercicio resuelto:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tabla de Contenido - Libro</title>
</head>
<body>
  <table>
    <caption>Contenido del Libro</caption>
    <thead>
      <tr>
        <th colspan="3">Capítulo</th>
      </tr>
      <tr>
        <th>Capítulo</th>
        <th>Título del Capítulo</th>
        <th>Páginas</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">1</td>
        <td>Introducción</td>
        <td>1-5</td>
      </tr>
      <tr>
        <td>Primeros Pasos</td>
        <td>6-12</td>
      </tr>
      <tr>
        <td rowspan="3">2</td>
        <td>Conceptos Básicos</td>
        <td>13-20</td>
      </tr>
      <tr>
        <td>Avanzado</td>
        <td>21-35</td>
      </tr>
      <tr>
        <td>Ejemplos Prácticos</td>
        <td>36-45</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Conclusiones</td>
        <td>46-50</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Ejemplo en CodePen

4. Ejercicio resuelto HTML. Crea una página web utilizando contenido incrustado y marcadores

Para este ejercicio necesitas estudiar las quinta sección del tutorial HTML.

Crea una página web que incluya las siguientes características:

Utiliza la etiqueta <img> para mostrar una imagen en tu página. Debes incluir los siguientes atributos:

src: Especifica la URL o la ruta de la imagen que deseas mostrar.
alt: Proporciona un texto alternativo para la imagen en caso de que no se cargue correctamente.
width: Establece el ancho de la imagen en píxeles.
height: Establece la altura de la imagen en píxeles.

Inserta un video de YouTube en tu página. Para ello, debes utilizar la etiqueta <iframe>. Asegúrate de seguir estos pasos:

Ve al video de YouTube que deseas insertar.
Haz clic en el botón «Compartir» debajo del video.
Selecciona la opción «Insertar».
Copia el código HTML proporcionado por YouTube y pégalo en tu página.

Agrega un título o encabezado a tu página utilizando la etiqueta <h1>. Elige un título relevante para tu página.

Utiliza marcadores para crear enlaces internos que permitan a los usuarios navegar rápidamente entre la imagen y el video. Para ello, utiliza la etiqueta <a> con el atributo href que apunte a los marcadores.

Incluye las etiquetas para la metainformación, como <meta name="description" content="Descripción de la página"> y <meta name="author" content="Tu Nombre">.

Puedes agregar cualquier otro contenido o texto que desees en tu página para darle contexto.

Solución:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Descripción de la página">
    <meta name="author" content="Tu Nombre">
    <title>Ejercicio de Imagen y Video</title>
</head>
<body>
    <h1>Mi Página con Imagen y Video</h1>
    <h2 id="imagen">Imagen</h2>
    <p>Aquí se muestra una imagen interesante.</p>
    <img src="https://www.eniun.com/wp-content/uploads/eniun-icono-detalle.svg" alt="Descripción de la imagen" width="300" height="200">
    <h2 id="video">Video</h2>
    <p>A continuación, puedes ver un video de YouTube.</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/09839DpTctU?si=1HYzdFGaa6L9gQx8" title="YouTube video player" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

    <p><a href="#imagen">Ir a la Imagen</a> | <a href="#video">Ir al Video</a></p>
</body>
</html>

Ejemplo en CodePen

5. Ejercicio resuelto HTML. Crea una página HTML a partir de un wireframe dado

Para este ejercicio necesitas estudiar las primeras secciones del tutorial HTML.

Imagina que te han proporcionado un wireframe (boceto de diseño) para crear una página web. Debes crear la estructura HTML de la página web siguiendo las buenas prácticas y estándares de HTML, incluyendo etiquetas semánticas y considerando recomendaciones de SEO. No se deben aplicar estilos CSS en este ejercicio, solo se espera la estructura HTML.

El wireframe que se te ha proporcionado es el siguiente:

Asegúrate de utilizar etiquetas apropiadas para cada una de las secciones:

Un encabezado (<header>) con un título principal (<h1>) y un menú de navegación (<nav>) con enlaces de navegación (<a>) y un botón.
Un área de contenido principal (<main>) con dos secciones (<section>) dentro de ella.
Un pie de página (<footer>).

Comprueba que tu código sea válido y cumpla con las mejores prácticas de estructura HTML. Utiliza un validador HTML en línea para verificar la validez de tu código.

Solución:

<header>
    <h1>TRADE</h1>
    <nav>
      <ul>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <button>Sign up</button>
      </ul>
    </nav>
</header>
<main>
    <section>
        <h2>Ready to get started?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
       <button>Start free trial</button>
    </section>
    <section>
        <h2>Your Best Value Proposition</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
        <div class="gallery">
          <div class="gallery-individual-container">
            <img src="img.jpg" alt="Description" width="300" height="300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">Learn more</a>
          </div>
          <div class="gallery-individual-container">
            <img src="img.jpg" alt="Description" width="300" height="300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">Learn more</a>
          </div>
          <div class="gallery-individual-container">
            <img src="img.jpg" alt="Description" width="300" height="300">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#">Learn more</a>
          </div>
        </div>
    </section>
</main>
<footer>
    <div>
      <h2>TRADE</h2>
      <small>&#169; 2010 -2020</small>
      <small>Privacy - Terms</small>
    </div>
    <div>
      <h3>Product</h3>
      <p>Product</p>
      <p>Product</p>
      <p>Product</p>
    </div>
    <div>
      <h3>Features</h3>
      <p>Feature</p>
      <p>Feature</p>
      <p>Feature</p>
    </div>
    <div>
      <h3>Resources</h3>
      <p>Resource</p>
      <p>Resource</p>
      <p>Resource</p>
    </div>
    <div>
      <h3>Company</h3>
      <p>Company</p>
      <p>Company</p>
      <p>Company</p>
    </div>
</footer>

Ejemplo en CodePen

6. Ejercicio resuelto HTML. Completa los huecos

Completa los huecos para conseguir un documento HTML válido.

7. Ejercicio resuelto HTML. Contesta a las siguientes preguntas tipo test

Pregunta 1: ¿Qué significa HTML?

a) Hyper Text Markup Language
b) High Tech Modern Language
c) Hyperlink and Text Markup Language
d) Home Tool Markup Language

Pregunta 2: ¿Cuál es la etiqueta HTML para crear un hipervínculo?

a) <link>
b) <a>
c) <href>
d) <url>

Pregunta 3: ¿Cuál es la etiqueta HTML para insertar una línea horizontal?

a) <line>
b) <hr>
c) <linebreak>
d) <horizontal>

Pregunta 4: ¿Qué etiqueta HTML se utiliza para crear una lista numerada?

a) <ul>
b) <li>
c) <ol>
d) <dl>

Pregunta 5: ¿Cuál es la etiqueta HTML para crear un salto de línea?

a) <br>
b) <nl>
c) <lb>
d) <newline>

Pregunta 6: ¿Cuál es la versión más reciente de HTML?

a) HTML4
b) HTML5
c) XHTML
d) HTML6

Pregunta 7: ¿Qué elemento HTML se utiliza para definir encabezados de nivel 1?

a) <header>
b) <h1>
c) <heading>
d) <h>

Pregunta 8: ¿Cuál es la etiqueta HTML para crear una imagen?

a) <img>
b) <picture>
c) <image>
d) <imgsrc>

Pregunta 9: ¿Cuál es la etiqueta HTML para crear un párrafo?

a) <p>
b) <paragraph>
c) <text>
d) <para>

Pregunta 10: ¿Cuál es la etiqueta HTML para crear una tabla?

a) <table>
b) <tab>
c) <data>
d) <tb>

Pregunta 11: ¿Cuál de los siguientes elementos HTML se utiliza para definir el contenido de un formulario que se enviará al servidor?

a) <input>
b) <form>
c) <button>
d) <label>

Pregunta 12: ¿Cuál es la diferencia clave entre las etiquetas <div> y <span> en HTML?

a) <div> se utiliza para elementos en línea, mientras que <span> se utiliza para elementos de bloque.
b) <div> se utiliza para agrupar elementos en bloque, mientras que <span> se utiliza para elementos en línea.
c) <div> se utiliza para crear vínculos, mientras que <span> se utiliza para crear divisiones de texto.
d) <div> se utiliza para agregar imágenes, mientras que <span> se utiliza para agregar videos.

Pregunta 13: ¿Cuál de las siguientes etiquetas HTML se utiliza para crear una lista de elementos desplegables?

a) <list>
b) <menu>
c) <select>
d) <dropdown>

Pregunta 14: ¿Cuál es la forma correcta de comentar múltiples líneas en HTML?

a) // Este es un comentario
b) <!– Este es un comentario –>
c) * Este es un comentario *
d) # Este es un comentario

Pregunta 15: ¿Cuál es el propósito de la etiqueta <iframe> en HTML?

a) Mostrar imágenes en una página web.
b) Reproducir videos en una página web.
c) Incrustar contenido externo, como otro sitio web, en una página web.
d) Crear formularios en una página web.

Pregunta 16: ¿Cuál es la función del atributo «alt» en la etiqueta <img>?

a) Define el estilo de la imagen.
b) Proporciona una descripción de la imagen para usuarios con discapacidades visuales y se muestra si la imagen no se carga.
c) Enlaza la imagen a otro recurso web.
d) Establece la posición de la imagen en la página.

Pregunta 17: ¿Cuál es la etiqueta HTML para insertar un video en una página web?

a) <video>
b) <media>
c) <movie>
d) <embed>

Pregunta 18: ¿Cuál de los siguientes elementos HTML se utiliza para agrupar elementos de nivel de encabezado?

a) <group>
b) <header>
c) <nav>
d) <section>

Pregunta 19: ¿Cuál es la etiqueta HTML para crear una línea de separación temática entre contenidos en una página?

a) <separator>
b) <div>
c) <hr>
d) <line>

Pregunta 20: ¿Cuál de las siguientes afirmaciones sobre las etiquetas <header>, <nav>, <main>, <article>, <section>, <aside>, y <footer> en HTML5 es correcta?

a) Todas estas etiquetas son obsoletas y no se deben usar en el desarrollo web moderno.
b) Estas etiquetas son opcionales y no tienen un propósito claro en la estructura de una página web.
c) Estas etiquetas son elementos semánticos utilizados para definir la estructura y el significado de una página web.
d) Solo se deben usar estas etiquetas en páginas web en inglés.

Soluciones:

Pregunta 1: ¿Qué significa HTML?

Respuesta Correcta: a) Hyper Text Markup Language

Pregunta 2: ¿Cuál es la etiqueta HTML para crear un hipervínculo?

Respuesta Correcta: b) <a>

Pregunta 3: ¿Cuál es la etiqueta HTML para insertar una línea horizontal?

Respuesta Correcta: b) <hr>

Pregunta 4: ¿Qué etiqueta HTML se utiliza para crear una lista numerada?

Respuesta Correcta: c) <ol>

Pregunta 5: ¿Cuál es la etiqueta HTML para crear un salto de línea?

Respuesta Correcta: a) <br>

Pregunta 6: ¿Cuál es la versión más reciente de HTML?

Respuesta Correcta: b) HTML5

Pregunta 7: ¿Qué elemento HTML se utiliza para definir encabezados de nivel 1?

Respuesta Correcta: b) <h1>

Pregunta 8: ¿Cuál es la etiqueta HTML para crear una imagen?

Respuesta Correcta: a) <img>

Pregunta 9: ¿Cuál es la etiqueta HTML para crear un párrafo?

Respuesta Correcta: a) <p>

Pregunta 10: ¿Cuál es la etiqueta HTML para crear una tabla?

Respuesta Correcta: a) <table>

Pregunta 11: ¿Cuál de los siguientes elementos HTML se utiliza para definir el contenido de un formulario que se enviará al servidor?

Respuesta: b) <form>

Pregunta 12: ¿Cuál es la diferencia clave entre las etiquetas <div> y <span> en HTML?

Respuesta: b) <div> se utiliza para agrupar elementos en bloque, mientras que <span> se utiliza para elementos en línea.

Pregunta 13: ¿Cuál de las siguientes etiquetas HTML se utiliza para crear una lista de elementos desplegables?

Respuesta: c) <select>

Pregunta 14: ¿Cuál es la forma correcta de comentar múltiples líneas en HTML?

Respuesta: b) <!– Este es un comentario –>

Pregunta 15: ¿Cuál es el propósito de la etiqueta <iframe> en HTML?

Respuesta: c) Incrustar contenido externo, como otro sitio web, en una página web.

Pregunta 16: ¿Cuál es la función del atributo «alt» en la etiqueta <img>?

Respuesta: b) Proporciona una descripción de la imagen para usuarios con discapacidades visuales y se muestra si la imagen no se carga.

Pregunta 17: ¿Cuál es la etiqueta HTML para insertar un video en una página web?

Respuesta: a) <video>

Pregunta 18: ¿Cuál de los siguientes elementos HTML se utiliza para agrupar elementos de nivel de encabezado?

Respuesta: d) <section>

Pregunta 19: ¿Cuál es la etiqueta HTML para crear una línea de separación temática entre contenidos en una página?

Respuesta: c) <hr>

Pregunta 20: ¿Cuál de las siguientes afirmaciones sobre las etiquetas <header>, <nav>, <main>, <article>, <section>, <aside>, y <footer> en HTML5 es correcta?

Respuesta: c) Estas etiquetas son elementos semánticos utilizados para definir la estructura y el significado de una página web.

Ejercicios propuestos HTML

8. Ejercicio propuesto HTML

A partir del wireframe dado debes crear la estructura HTML de la página web siguiendo las buenas prácticas y estándares de HTML, incluyendo etiquetas semánticas y considerando recomendaciones de SEO. No se deben aplicar estilos CSS en este ejercicio, solo se espera la estructura HTML.

El wireframe que se te ha proporcionado es el siguiente:

9. Ejercicio propuesto HTML

Partiendo del wireframe dado debes crear la estructura HTML del sitio web siguiendo las buenas prácticas y estándares de HTML, incluyendo etiquetas semánticas y considerando recomendaciones de SEO. No se deben aplicar estilos CSS en este ejercicio, solo se espera la estructura HTML.

10. Ejercicio propuesto HTML