¿Cómo crear enlaces a secciones dentro de una página HTML?

En este tutorial práctico crearemos enlaces dentro de una página HTML que estén vinculados a secciones específicas de la misma página.

Requisitos:

1. Visual Studio Code
2. HTML y CSS

Lo que veremos en este tutorial:

1. Atributo ID en HTML
2. Agregando ID a las secciones.
3. Agregando los enlaces en el menú.
4. Agregando el footer a la página web.

1. Atributo id en HTML

El atributo ID en HTML en general se utiliza para especificar una identificación única para un elemento HTML, teniendo en encuenta que no puede haber más de un elemento con el mismo ID en un documento HTML.

El atributo ID normalmente se utiliza para señalar las declaraciones de estilos CSS; sin embargo, también es posible utilizar enlaces específicos haciendo referencia a los ID de la secciones.

Recordemos que es posible manipular ID HTML desde JavaScript.

2. Agregando ID a las secciones.

Para agregar el ID en las secciones se considera todo los bloques desarrollados en el tutorial práctico del Cómo usar la etiqueta section en HTML y CSS:

        <section id="home">

            ...

        </section>

        <section id="about">

            ...

        </section>

        <section id="services">

           ...

        </section>

        <section id="projects">

            ...

        </section>

        <section id="contact">

            ...

        </section>

3. Agregando los enlaces en el menú.

Realizamos algunas modificaciones al menú de la página creada en nuestro tutorial práctico del Cómo usar la etiqueta section en HTML y CSS, en este bloque agreganos  los enlaces desde el menú para cada sección del sitio web:

    <header>        

        <nav class="menu">

            <div class="logo">

                <a href="section-link-html-css.html">Section Link - HTML & CSS</a>                

            </div>

            <ul>

                <li>

                    <a href="#home">Home</a>

                </li>

                <li>

                    <a href="#about">About</a>

                </li>

                <li>

                    <a href="#services">Services</a>

                </li>

                <li>

                    <a href="#projects">Projects</a>

                </li>

                <li>

                    <a href="#contact">Contact</a>

                </li>

            </ul>

        </nav>

    </header>

4. Agregando el footer a la página web.

El el código HTML, después del bloque de las secciones agreramos la etiqueta footer al sitio web.

        <!--FOOTER-->

        <footer>

            <div>

                <p>&copy; 2024 Section Link - HTML & CSS | All rights

                     reserved by <a class="link-dark" href="https://hadsonpar.com/"

                     target="_blank">Hadsonpar</a></p>

            </div>

        </footer>

Finalmente agregamos estilos CSS para el footer de la página web, y realizamos algunos ajustes de espacios al menú.

CSS Footer:

        /* 5. Definiendo estilos CSS para el footer sitio web */

        /* 5.1. Definiendo el espacio, tamaño y tipo de fuentes, y el color de fondo */

        footer {

            padding: 20px 0 20px 0;

            font-size: 20px;

            font-family:"Times New Roman", Times, serif;

            background-color: blueviolet;;

        }

        /* 5.2. Definiendo estilos CSS para el parráfo del footer del sitio web */

        footer p {

            text-align: center;

            color: #fff;

        }

MENÚ - Modificando espacios desde CSS:

        section {

            padding: 100px 0px 50px 0px;/* 5.3. Modificando los espacio de la secciones del sitio web */

        }

Generemos un imperio para el hoy, mañana y vuestro futuro.