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>