Cómo cargar una página web interna en un iFrame

Escrito por lizzie flynn | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cargar una página web interna en un iFrame
Los marcos flotantes o iframes, permiten que una página se muestre dentro de otra. (Comstock/Comstock/Getty Images)

Un iframe es una sección de un documento HTML que carga otra página web en línea. La carga de una página web interna en un iframe es útil cuando un desarrollador o diseñador quiere mostrar contenido como formularios de contacto, descripción de productos o galerías de fotos dentro de la página que lo contiene. Iframes permite una fácil edición de los contenidos insertados, lo cual es útil si el contenido cambia de manera regular, como las galerías de fotos en los sitios web de inmobiliarias.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Editor HTML
  • Programa FTP
  • Servidor web

Lista completaMinimizar

Instrucciones

  1. 1

    Ejecuta un editor de texto y abre el documento HTML que contiene el iframe. Notepad es un editor de texto instalado con los sistemas operativos Windows y TextEdit es el editor por defecto de Mac. Ambos son gratis y fáciles de usar.

  2. 2

    Determina dónde se encuentra el iframe en la página. Esto depende del diseño de la página. Un pequeño iframe, tal como el que para un canal RSS, puede estar situado en una barra lateral. Una página más grande, tal como un formulario de contacto, requiere más espacio y debe estar en el centro de la página. Las dimensiones del recipiente deben permitir todo el documento iframe.

  3. 3

    Inserta la apertura y cierre de etiquetas iframe con el mensaje de error dentro de las etiquetas: <iframe> Tu navegador no soporta Frames. </iframe>. Las etiquetas cargan el iframe en la página. Los atributos de la etiqueta van dentro de la etiqueta de apertura. El mensaje de error aparecerá si el navegador del usuario no soporta iframes y es importante para los usuarios saber que algo ha ido mal.

  4. 4

    Busca el nombre del archivo de iframe e insértalo en el atributo de fuente de la etiqueta iframe. Se parece a esto: <iframe src="/filename.htm"> Tu navegador no soporta Frames. </iframe>, donde "/filename.html" es el nombre y la ubicación de tu archivo de iframe. La barra diagonal indica que el archivo se almacena en el mismo directorio que la página web actual.

  5. 5

    Determina la altura y la anchura de la zona iframe luego añade eso a la etiqueta de apertura. Se parece a esto: <iframe src=”/filename.html” width=”100px” height=”100px”> Tu navegador no soporta Frames </iframe>, donde "100px" es la altura o la anchura del iframe . Los porcentajes también se pueden utilizar en la altura y los atributos de anchura. Cambia eso a las dimensiones requeridas para el diseño de la página. Si la página dentro del iframe es más grande que los atributos de tamaño en la etiqueta, el usuario verá las barras de desplazamiento en ambos lados del iframe.

  6. 6

    Guarda el archivo y ábrelo con un navegador web. Prueba la página y luego haz cambios a la estructura, según sea necesario. Si todo se ve bien, súbelo al directorio en el servidor web donde se encuentra la página iframe. Coloca el archivo en el mismo directorio que el archivo de iframe. Esto asegura que el iframe no cargue un mensaje de error "Página no encontrada" si el navegador no puede encontrar el archivo referenciado por el atributo "src".

  7. 7

    Inicia un navegador y ve a la página web que acabas de cargar. El iframe se carga automáticamente cuando se carga la página.

Consejos y advertencias

  • Los editores premium de HTML, como Dreamweaver, pueden ser utilizados para agregar el iframe. Estos programas destacan las etiquetas de apertura y cierre, por lo que puede ser preferible para los diseñadores novatos.
  • Haz clic derecho en el archivo para abrirlo en un navegador. Serás capaz de depurar cualquier defecto de diseño que descubras antes de subirlo a un sitio en vivo.
  • Asegúrate de que la ruta de acceso al documento HTML iframe sea la correcta en el atributo src.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles