Saltar al contenido

Insertar una pagina web dentro de otra

julio 22, 2022

Html mostrar otro sitio web

Si quieres curar el contenido de otros en las redes sociales o simplemente hacer que tu propio contenido visual en las redes sociales funcione mejor para tu estrategia general de contenido, necesitas saber cómo incrustar código HTML en tu blog o sitio web.

Pero espera un segundo… antes de entrar en el meollo de este consejo, ¿qué diablos significa “incrustar”? ¿Y qué es HTML? Si no sabes nada de código, no te preocupes: incrustar contenido externo es muy fácil. Dediquemos un segundo a desglosar los conceptos básicos.

Incrustar significa integrar un contenido externo en otro sitio web o página. Para incrustar algo, se coloca un bloque de código -llamado código de incrustación- en el editor HTML de otro sitio web. Cuando se pulsa “Guardar” o “Publicar”, el contenido se muestra en la página publicada.

Al incrustar contenido externo en tus páginas y publicaciones, puedes aumentar la participación en tu sitio web y hacer que los visitantes de tu sitio interactúen con el contenido que publicas en las redes sociales. Lo mejor es que es fácil de hacer: simplemente genera el código de incrustación, pégalo en tu editor de HTML y observa cómo aumenta la participación de los usuarios.

Sitio web incrustado en Html

Si usted ha creado algunas hermosas animaciones HTML5 o contenidos web interactivos por Saola Animate y todavía lucha para mostrarlos en su sitio web, entonces ¡esté atento! Este tutorial le mostrará dos maneras de incrustar el proyecto HTML5 en una página web.

Pero primero, la carga de su proyecto completo a su servidor web es un paso previo para hacer más. Supongo que usted sabe cómo exportar su proyecto después de crear y editar con éxito en Saola Animate. La siguiente imagen describe la carpeta de salida adecuada de un proyecto de Saola Animate:

  Como registrar una pagina web en google

La forma más fácil de incrustar el proyecto HTML5 en su página web es utilizando un iframe (marco en línea). Iframe es sólo un código HTML muy simple que se utiliza para mostrar el contenido de otra fuente en una página web. Si sabes copiar y pegar, puedes hacerlo.

Como ya sabes, el div exterior en el código anterior con el estilo padding-bottom se utiliza para mantener la relación de aspecto para el contenido del iframe. Es necesario actualizar su estilo en función de la relación de aspecto de su contenido. Por favor, consulte este enlace para más detalles.

Html incluir contenido de otra página

Puede mostrar contenido en su página de SharePoint desde sitios que permiten la incrustación (como YouTube o Bing maps, por ejemplo). Para muchos sitios, puede utilizar la dirección web del sitio para el contenido o incrustar el código que el sitio proporciona.

El código de incrustación es una lista de instrucciones específicas de un sitio web que describe cómo mostrar ese contenido en otra página. Muchos sitios ofrecen códigos de incrustación en sus páginas para que los copies y pegues. Normalmente verás un botón llamado Embed code o </>. Esto abre un cuadro de texto con algún código en él.

Con la parte web de incrustación, puede introducir enlaces o código de incrustación que utilizan variables, lo que le permite mostrar una amplia variedad de elementos en función de lo que seleccione el espectador de la página. Por ejemplo, puede mostrar una imagen en función de lo que el usuario seleccione de una lista de URL de imágenes.

  Crear pagina web con dominio

Abrir otro sitio web en mi sitio web

Un IFrame es un código HTML que se puede utilizar para incrustar una página HTML, una página PDF, otro sitio web u otro archivo seguro en una página web dentro de una ventana. La ventana puede ser estilizada usando código css. Los IFrames no convierten una página web en un sitio “enmarcado” y no afectan al SEO. Este código funciona con HTML 4.01, HTML5 y también con el diseño web responsivo.

Seleccione, copie y pegue el siguiente css en la parte inferior de su archivo de estilo global .css de la plantilla. El alto y el ancho del css sobrescribirán el código HTML del IFrame. Edita lo siguiente con tus opciones de altura, anchura, borde y desbordamiento.

En el ejemplo anterior puedes cambiar la anchura y la altura a cualquier tamaño que desees para tu IFrame (utiliza el 100% de anchura para que sea responsivo y edita el max-width a un número fijo de px). Opcionalmente, edite el color y el ancho del borde.

En la página HTML a la que estás añadiendo el IFrame, puedes añadir enlaces para cambiar la página dentro del IFrame. Estos enlaces se dirigirán al nombre del IFrame (Framename en este ejemplo). Este es un ejemplo de enlace:

Para los enlaces que añada a la página dentro del IFrame puede querer orientar sus enlaces para que se abran dentro o fuera del IFrame. Consulte el soporte de enlaces de destino. El siguiente es un enlace de ejemplo que abre una página fuera del IFrame:

Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad