Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en aula : Navegando entre paginas

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Navegando entre páginas y actividad Haga lo que hicimos en aula

por Erika Dayana Sánchez Sepúlveda
| 24.7k xp | 46 posts
Asesor de seguros 
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Erika Sánchez</title>
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <script src="https://kit.fontawesome.com/yourkit.js" crossorigin="anonymous"></script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
             <li><a href="habilidades.html">Habilidades</a></li>
            <li><a href="#">Experiencia</a></li>
            <li><a href="#">Certificaciones</a></li>
            <li><a href="#">Contáctame</a></li>
        </ul>
    </nav>

    <main>
        <section class="presentacion">
            <div class="info">
              
                <h1>Hola soy <span>Erika Sánchez</span></h1>
                <h2>Ingeniero de sistemas</h2>
                <h2>Técnico en sistemas - Técnico en seguridad y salud en el trabajo - Técnico en habilidades de programación</h2>
                <h2>Desarrolladora de Software</h2>
                <h3>Especialista en backend</h3>
                <p>Experiencia en desarrollo de aplicaciones escalables, con pasión por crear soluciones innovadoras.</p>
                <a href="#" class="btn">Contáctame <i class="fas fa-arrow-right"></i></a>
                <div class="redes-inferiores">
                    <a href="https://github.com/ERISANCHEZ1" class="btn">GITHUB
                        <img src="img/logogit.jpg" alt="GitHub Logo" width="20">
                    </a>
                
                    <a href="https://www.instagram.com/" class="btn">
                        INSTAGRAM
                        <img src="img/logoinstagram.jpg" alt="GitHub Logo" width="20">
                    </a>
                </div>
                

                
                 </div>
            <div class="imagen">
                <div class="fondo"></div>
                <img src="img/imagen.jpg" alt="Erika Sánchez">
            </div>

           </section>

    </main>


    <footer>
        <p>&copy; 2025 Erika Sánchez - Todos los derechos reservados.</p>
    </footer>
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio de Erika Sánchez</title>
    <link rel="stylesheet" href="./styles/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <script src="https://kit.fontawesome.com/yourkit.js" crossorigin="anonymous"></script>
</head>
<body>
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
             <li><a href="habilidades.html">Habilidades</a></li>
            <li><a href="#">Experiencia</a></li>
            <li><a href="#">Certificaciones</a></li>
            <li><a href="#">Contáctame</a></li>
        </ul>
    </nav>

    <main>
        <section class="presentacion">
            <div class="info">
              
                <h1>Estas son mis habilidades</h1>
                <h2>1. Habilidades Técnicas:</h2>
                <p>lenguajes de Programación: Conocimiento profundo de uno o más lenguajes de programación. Algunos ejemplos comunes incluyen:</p>
                <p>Backend: Java, jsf, webservice, servlet, cobol.</p>
                <p>Frontend: HTML, css, Javascript</p>
                <p>Bases de datos: SQL (MySQL, PostgreSQL) y NoSQL (MongoDB).</p>
                
                 </div>
            <div class="imagen">
                <div class="fondo"></div>
                <img src="img/imagen.jpg" alt="Erika Sánchez">
            </div>

           </section>

    </main>


    <footer>
        <p>&copy; 2025 Erika Sánchez - Todos los derechos reservados.</p>
    </footer>
</body>
</html>
1 respuesta
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

Hola Erika, espero que estés bien

Parece que estás trabajando en un proyecto de portafolio personal y tienes algunas dudas sobre cómo navegar entre páginas HTML y asegurarte de que todo esté correctamente enlazado y estilizado. Basado en el contexto de la actividad, aquí te dejo algunos pasos que podrían ayudarte:

  1. Crear la página "Sobre mí": Debes crear un nuevo archivo HTML llamado about.html. Asegúrate de que este archivo esté en la misma carpeta que tus otros archivos HTML para facilitar la navegación.

  2. Configurar el enlace en el menú de navegación: En tu archivo index.html, necesitas agregar un enlace en el menú de navegación que apunte a tu nueva página "Sobre mí". Por ejemplo:

    <li><a href="about.html">Sobre mí</a></li>

  3. Estructurar la página "Sobre mí": Copia el <nav> y el <footer> de tu index.html y pégalos en el about.html. Luego, agrega un <main> con un <h1> que diga "Sobre mí":

    <main>
    <h1>Sobre mí</h1>
    <!-- Aquí puedes agregar más contenido sobre ti -->
</main>

  4. Actualizar la ruta del archivo CSS: Asegúrate de que el about.html esté enlazando correctamente a tu archivo CSS. La ruta debería ser algo como:

    <link rel="stylesheet" href="./styles/style.css">

  5. Verificar la navegación: Una vez que hayas hecho estos cambios, abre tu index.html en un navegador y verifica que el enlace "Sobre mí" te lleve a la nueva página. También asegúrate de que los estilos se estén aplicando correctamente y que los enlaces en el encabezado no estén subrayados.

Espero que estos pasos te ayuden a navegar correctamente entre tus páginas y a mantener un estilo coherente en tu proyecto. ¡Bons estudos!