1

tengo una consulta. estoy realizando una pagina, tengo HTML diferentes( index.html - proceso.html - productos.html -contacto.html), lo que tengo que hacer es vincular los HTML con el HTML principal que seria index.html donde tengo los button

        <div>
        <nav class="tab">
            <button type="button" class="boton"> <i class="fas fa-home"></i> Home</button>
            <button type="button" class="boton"> <i class="fas fa-beer"></i> Proceso</button>
            <button type="button" class="boton"> <i class="fab fa-product-hunt"</i>Productos</button>
            <button type="button" class="boton"><i class="fas fa-address-book"></i> Contacto</button>
        </nav>
        </div>

como podría realizar ese método que cuando le de un clip a la pestaña "contacto" me tome el HTML que realice con ese nombre

introducir la descripción de la imagen aquí

por que use href=>contacto.html pero estoy vinculando una pagina me sale de esta forma

introducir la descripción de la imagen aquí

la idea que me saliera algo así( realice una edición de imagen para que puedan apreciar mi ejemplo)

introducir la descripción de la imagen aquí

si pudieran ayudarme con algún ejemplo que podría aplicar o orientarme, llevo mi primer año de estudio la universidad método online igual no apoyan mucho con material de estudio , me la he rebuscado para poder aprender, agradecería su apoyo, saludos

5
  • No termino de entender, ¿quieres que el contenido de los demás .html se incruste dentro del actual o que se abra en una nueva pestaña?
    – user128299
    Commented el 14 nov. 2020 a las 2:18
  • exacto quiero que el contenido de los demás HTML se incruste dentro del actual , disculpa por no poder explicar bien , saludos Commented el 14 nov. 2020 a las 2:19
  • ¿Usas algún lenguaje de programación?.... PHP, JS o algo por el estilo
    – user128299
    Commented el 14 nov. 2020 a las 2:20
  • ahora estoy con js Commented el 14 nov. 2020 a las 2:21
  • No se que tan necesario sea para tu proyecto que todas las páginas carguen en el mismo index.html, a menos que tenga algún objetivo específico, yo recomendaría que cargue cada una de sus páginas, aparte de mejorar el SEO del sitio, pero si es necesario creo que el uso de modales solucionaría tu problema, pero es mas elaborado. Yo te recomendaría que incrustes el menú en cada página para que al moemento de cargarla, esta cargue completa. puedes incrustar el menú por medio de php, y renombrar tus archivos principales a ,php. Además te recomiendo cambiar tus botones a enlaces <a href="" ></a>
    – Elboy
    Commented el 14 nov. 2020 a las 14:07

1 respuesta 1

0

Hay una forma muy sencilla... muy poco flexible, pero sólo se hace con HTML, sin código.

Podés usar un <iframe> como contenedor de cada una de las páginas.
Un enlace puede usar el atributo target para que muestre en un iframe:

 <a href="tupagina.html" target="tu-iframe">

Ejemplo:

<p>
  Abrir abajo<br>
  <a href="https://es.wikipedia.org" target="iframe-contenido">Wikipedia en español</a><br>
  <a href="https://www.wikipedia.org" target="iframe-contenido">Wikipedia en inglés</a><br>
</p>
<iframe name="iframe-contenido" style="width: 100%">
</iframe>

Fijate que dentro del <a>, el target apunta al name del <iframe>.

5
  • iframe es un elemento el cual su uso esta desaconsejado, no solo porque puede llegar a consumir muchisimos recursos dependiendo de cuantos tengas, si no que los iframes, la mayor parte de las veces tendras problemas de seguridad por ellos, de todas maneras la respuesta es acertada, pues el iframe permite incrustar paginas web enteras.
    – Layer
    Commented el 14 nov. 2020 a las 4:22
  • @Riven yo no lo usaría, pero para el contexto de la pregunta es una buena opción. La mayoría de las desventajas que mencionás de un iframe están asociadas a insertar una página externa. Para un caso de HTML puro obtenido local, son muchas menos las contras.
    – Pollo
    Commented el 14 nov. 2020 a las 5:51
  • @Pollo gracias por tu ayuda me ayudo usar iframe, netamente no es un proyecto para vender u otro fines , solo es un examen que estoy haciendo, entre probando métodos me quedo como esperaba, gracias Commented el 14 nov. 2020 a las 18:10
  • ahora tengo un pequeño detalle, al ingresar a la pagina todo bien , me sale el texto que tengo puesto, pero el error ocurre cuando selecciono otra pestaña por que me aparece el texto de inicio al momento de seleccionar otra pestaña y me sale todo junto enzima, tratare de subir un parte del código , para ver si se entiende mejor, saludos Commented el 14 nov. 2020 a las 18:11
  • @Benjamin entiendo que sería un problema diferente, probablemente porque tengas que referenciar a Bootstrap o lo que uses de nuevo, pero en ese caso podés publicar como una nueva pregunta (... o esperar a que alguien te responda cómo incluir con código de JavaScript -que yo no tuve muchas ganas de ponerme a escribir)
    – Pollo
    Commented el 14 nov. 2020 a las 20:39

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.