Cargando...


¿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.






Haga clic aquí para ver los comentarios 4 Comentarios:

Gracias por tu comentario

Gracias por sus comentarios


Etiquetas

Abrir HTMl dentro de DIV addthis.com app nativas App para moviles Bases de Datos MySql Botones de Compartir Cajas CSS Cascading Style Sheets CHECKBOX Clasificacion CSS CMS Comentarios en PHP comparacion prestashop y magento Conectar con Base De Datos MySql Convenciones de PHP Creación de Formularios css Declarar Estilos CSS Desventajas de Magento Desventajas de Prestashop Diseño paginas web en barcelona Diseño y Desarrollo Web DIV y SPAN Documento Hojas de Estilo ejemplo css ejemplo estilo css Ejemplo Etiquetas Form Ejemplos HTML Ejercicio CSS El Sistema ha Devuelto: (111) Error de Conexión a::1 Fallida Estilos CSS Estructura de HTML Etapas del Diseño Web Etiqueta DIV Etiqueta SPAN Etiquetas HTML Eventos de Formularios HTML Fases del Desarrollo Web Fases del Diseño Web FORM formulario de contacto Formulario de Contacto HTML Formularios HTML framework móviles Framework para Móviles Funcion mail() de PHP Funciones Mysql PHP Glosario de Términos Guia Basica CSS Guia CSS Hoja de Estilo en Cascada hojas de estilo Hojas de Estilo Externas HTML HTML a Texto Plano HTML y PHP HTTP HTTPS Ingeniería Web INPUT Introducción HTML JavaScrip Javascript jquery touch jquerymovile Lenguaje HTML Lenguaje PHP Magento Manejadores de Contenido Marketing Web Marqueting web barcelona Mysql Mysql_Connect Mysql_Query Mysql_Select_Db Objeto Button Objeto Checkbox Objeto Form Objeto Hidden Objeto Password Objeto Radio Objeto Select Objeto Text Objeto Textarea Objetos de Formularios HTML phoneGap PHP plantilla css Plantilla Web con CSS Posicionamiento con Hojas de Estilo Posicionamiento CSS position: static position:absolute position:relative Prestashop Prestashop vs Magento Programación Web Propiedades CSS Propiedades de Formularios Propiedades Y Métodos Puertos para Apache Qué es HTML Que es PhoneGap RADIO Reglas CSS Reglas de PHP Segundo Ejemplo CSS Selectores CSS sencha touch SEO Servidor Web shareaholic.com Sintaxsis PHP Stylesheet TEXTAREA Tiendas En Linea Tipos de CSS titanium appcelerator Uso de los DIV Variables PHP Ventajas de Magento Ventajas de Prestashop Webmaster Widget Xampp Conexión Refused

Hosting y Alojamiento

MBA Ranking

Online Forex Trading