0

La idea es muy sencilla a la par que imposible. No se si lo que pido se puede hacer, imagino que no pero por preguntar que no falte. Veamos mi idea es la siguiente ...

Me gustaría crear una página web con sus secciones; sobre mi, galería, código, contacto, etc. pero la cosa es que solo quiero crear un único documento html, la razón de querer hacer esto no la se ni yo pero me surgió la duda y me puse a pensar en como hacerlo todo en un mismo documento. Como al cabo de los días no se me ocurría nada he decidido preguntar ¿Como crear varias páginas web en un mismo documento html? Lo único que se me ha ocurrido es hacer que se muestre la homepage y cuando navegamos se modifique el css para ocultar el contenido de la homepage y mostrar el contenido de la de contacto, por ejemplo, pero la cuestión es que no se como hacer esto o si hay alguna formas mas efectiva de hacer lo que yo quiero.

Me gustaría que el documento fuera algo asi ...

<!DOCTYPE html>
<html lang="es">
    <head>
        <title> titulo de la web </title>
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <meta name="author" content="andresbarrones">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
                <style>
                        @import url('https://fonts.googleapis.com/css?family=Comfortaa');
                         * {
                                padding: 0px;
                                margin: 0px;
                        }
                        body {
                                font-size: 18px;
                        }
                        #homepage {

                        }
                </style>
    </head>
        <body>
                <div id="homepage">
                        Contenido HOMEPAGE        
                </div>

                <div id="sobremi">
                       Contenido Sobre Mi      
                </div>

                <div id="contacto">
                        Contenido Contacto     
                </div>
    </body>
</html>

Bueno creo que eso es todo lo que puedo decir.

Muchas gracias a tod@s de antemano.

6
  • Consideraste usar iframes: developer.mozilla.org/es/docs/Web/HTML/Elemento/iframe
    – Juan
    el 21 jul. 2019 a las 13:06
  • Bastaría con usar display: none por defecto para todo bloque que no quieras mostrar de inicio e ir ocultando/mostrando las distintas secciones según la sección del usuario. No obstante, por razones obvias de legibilidad, mantenimiento, escalabilidad, rendimiento, etc. es mejor separar las distintas secciones en ficheros independientes.
    – Vicente
    el 21 jul. 2019 a las 14:08
  • No es lo que busco pero gracias por tu aportación. el 21 jul. 2019 a las 15:00
  • Primero gracias por tu respuesta. Segundo se los problemas de hacer esto pero no va a ser una web que se tenga que escalar y sera relativamente pequeña. el 21 jul. 2019 a las 15:01
  • Se puede perfectamente. Tendrías que utilizar la opción display:none y con JavaScript mostrar o ocultar el contenido deseado llamando a través del id. Te dejo un ejemplo w3schools.com/css/tryit.asp?filename=trycss_display_js
    – Martin aet
    el 21 jul. 2019 a las 15:09

1 respuesta 1

1

Es posible crear todas las secciones dentro de un solo html, pero además de tener las secciones debes contar con un menú de navegación para que puedas desplazarte a traves de la página.

HTML

Solo he considerado la estructura dentro del body para no hacerlo demasiado largo, asimismo he puesto varios párrafos para que puedas apreciar el funcionamiento de la propiedad CSS scroll-behavior.

<body>
<header>
    <h1>Mi página</h1>
    <nav>
        <ul>
            <li><a href="#sobre-mi">Sobre mí</a></li>
            <li><a href="#servicios">Servicios</a></li>
            <li><a href="#contacto">Contacto</a></li>
        </ul>
    </nav>
</header>
<main>
    <section id="sobre-mi">
        <h2>Sobre mí</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
    </section>
    <section id="servicios">
        <h2>Servicios</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
    </section>
    <section id="contacto">
        <h2>Contacto</h2>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos ipsam iure quisquam optio fugit perferendis
            soluta nesciunt saepe cupiditate officia magni assumenda porro, dignissimos maxime dolores
            exercitationem molestiae odio. Commodi.</p>
    </section>
</main>

CSS

html {
    /*
    scroll-behavior = Habilita el comportamiento del desplazamiento
    smooth = El efecto que realizará durante el desplazamiento
    */
    scroll-behavior: smooth;
}
/*Colores básicos para hacer el ejemplo mas intuitivo*/
#sobre-mi {
    background: red;
}

#servicios {
    background: greenyellow;
}

#contacto {
    background: green;
}

La magia sucede usando la propiedad scroll-behavior donde le asignaremos el valor de smooth el cual será aplicado a la etiqueta html ya este es el contendedor de todo el contenido. Lo que hace esta propiedad es cambiar el comportamiento de desplazamiento hacia el elemento en referencia, el valor smooth es el efecto que queremos que realize durante su desplazamiento.

Si deseas más información sobre esta propiedad puedes revisar este link.

3
  • Aunque la propiedad scroll-behavior no es compatible con IE o Safari, yo recomiendo usar javascript o JQuery para realizar el smooth
    – Jose
    el 21 jul. 2019 a las 18:04
  • Claro aquello es algo a tener en cuenta, por ello puse un link donde se ve con más detalle acerca de esta propiedad para que pueda ver la compatibilidad con los navegadores. el 21 jul. 2019 a las 19:46
  • Creo que lo que busca el OP es que sólo se muestre una sección por página, que las demás secciones se encuentren "ocultas" mientras sólo una es visible. el 22 jul. 2019 a las 14:35

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.