Saltar al contenido principal

Ejercicio práctico HTML 11

Objetivo​

Enlaces de Anclaje

Actividad​

Crea un documento HTML con enlaces de ancla que permitan desplazarse dentro de la misma página.

Solución​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Enlaces de Ancla</title>
  </head>
  <body>
    <h1>Índice</h1>
    <ul>
      <li><a href="#seccion1">Sección 1</a></li>
      <li><a href="#seccion2">Sección 2</a></li>
      <li><a href="#seccion3">Sección 3</a></li>
    </ul>
    <div
      style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
    >
      <h2 id="seccion1">Sección 1</h2>
      <p>
        Contenido de la sección 1. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
        doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
        labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
        inventore quia ratione quis facilis earum praesentium quaerat, alias
        excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
        exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
        Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
        corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
        Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
      </p>
    </div>
    <div
      style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
    >
      <h2 id="seccion2">Sección 2</h2>
      <p>
        Contenido de la sección 2. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
        doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
        labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
        inventore quia ratione quis facilis earum praesentium quaerat, alias
        excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
        exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
        Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
        corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
        Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
      </p>
    </div>
    <div
      style="padding-left: 20px; padding-right: 20px; padding-bottom: 140px; padding-top: 140px;"
    >
      <h2 id="seccion3">Sección 3</h2>
      <p>
        Contenido de la sección 3. Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Aut ab soluta animi odit delectus praesentium atque
        doloremque quas eum! Consectetur provident autem ad impedit quas dolorem
        labore eligendi quos expedita! A, in? Perspiciatis, pariatur accusamus
        inventore quia ratione quis facilis earum praesentium quaerat, alias
        excepturi reiciendis nulla, incidunt esse. Voluptatum, nulla quia
        exercitationem doloribus numquam nam reprehenderit eos aliquid illum!
        Omnis aut magnam voluptatibus placeat facilis eos, molestiae fugit ex
        corrupti ipsa eum laborum esse dolorum suscipit culpa deserunt vel iure.
        Totam, labore? Praesentium odio cupiditate sint quisquam, totam itaque.
      </p>
    </div>
  </body>
</html>