¿Cómo Abrir una Página HTML Dentro de un DIV?



Abrir página HTML dentro de DIV?


Tenemos una página dividida por varios <div> cada uno creado con su id o class, para abrir la página HTML dentro de un DIV por ejemplo en el principal, creamos un iframe dentro asignándole un nombre por ejemplo name="formularios" para utilizar en el enlace de menu donde realizaremos la llamada de la página con el parámetro TARGET.


Lo he trabajado de esta manera:


Supongamos que el siguiente código hace uso del archivo index.html, y también tres páginas más:



principal.html

ejercicio1.html

ejercicio2.html


Al cargar la página index.html en el DIV principal se mostrará por defecto la pagina principal.html, pero al hacer clic en los enlaces del menu, mostramos las páginas ejercicio1.html ó ejercicio2.html siempre en el DIV principal.

Eso se logra con el iframe y referenciandolo con:

target = "formularios"

 

El código es solo un segmento del archivo index.html


<div class="encabezado">
<img src="img-encabezado.png" alt="image" height="100px" width="1152px">
</div>
 
<div class="contenido">

              <div class="menu">
              <ul>
              <li><a href="ejercicio1.html" target="formularios">Ejercicio1</a></li>
              </ul>  
              <ul>
              <li><a href="ejercicio2.html" target="formularios">Ejercicio1</a></li>
              </ul>  
              </div>
   
              <div class="principal">
              <h2>Div de contenido, aqui se mostraran las paginas HTML</h2>
<iframe src="principal.html" style="width: 90%; height: 80%" name="formularios"></iframe>
              </div>

</div>


Ejemplo de Plantilla con CSS y Formularios HTML con PHP

 
Mi plantilla de ejemplo, un poco mas desarrollado que el mostrado en este post




También espero publicar la plantilla de ejemplo....Pero en el siguiente POST.




Share on Google Plus

About Tecnología, Ingeniería en Sistemas

maestria-web.com Es un blog de programación y desarrollo web utilizando lenguajes de programación HTML, CSS,Java Script, PHP y framework para desarrollo web.
Visita y comparte nuestras publicaciones.
Ver perfil ?

4 Comentarios:

  1. Hola, quisieramos saber como se aumenta el tamaño del DIV, ya que cuando enlazamos la pagina queda de un tamaño muy reducido y no hemos encontrado la manera de cambiarle el tamaño. Te agradeceriamos mucho si nos puedes colaborar

    ReplyDelete
  2. gracias hermano me ha servido de mucho lo que publicaste bendiciones

    ReplyDelete
  3. Hola me ayudaste mucho!! Excelente aporte!!

    ReplyDelete

Gracias por tu comentario