Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de HTML

HTML: lenguaje básico para crear páginas web

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.

9. Frames

9.4 Etiqueta iframe

Definición

El trabajo con frames obliga a crear una estructura diferente para la página de lo que suele ser lo habitual. Sin embargo con la etiqueta iframe es distinto.

Esta etiqueta inserta una ventana en la que podemos ver el contenido de otra página sin necesidad de utilizar la estructura de página impuesta por los frames. Así dentro de una página normal nos crea una ventana en la que podemos ver otro archivo html, con lo que no necesitamos que todas las partes de la página sean parte de otros archivos.

Estructura de la etiqueta iframe

El comportamiento de la etiqueta iframe es parecido al de la etiqueta image respecto de su posición en la página. Ambas son etiquetas en línea y admiten el atributo align para su posicionamiento, o pueden ser posicionadas de la misma manera mediante el código CSS.

para su correcto funcionamiento la etiqueta iframe debe tener su correspondiente etiqueta de cierre, aunque entre estas dos etiquetas no se escriba nada:

<iframe ....></iframe>

Los atributos de la etiqueta iframe son:

• src="ruta_de_la_página": atributo obligatorio para indicar la página que se debe cargar en esta ventana.
• height ="altura": altura en píxeles de la ventana donde se muestra el iframe.
• width ="anchura": anchura en píxeles de la ventana donde se muestra el iframe. El valor puede ponerse también en tantos por ciento. Si no se ponen los atributos de anchura y altura, el documento se mostrará en una pequeña ventana cuyas medidas pueden variar dependiendo del navegador. También podemos definir la anchura y la altura mediante el código CSS.
• scrolling = "yes | no | auto": Barras de desplazamiento. El valor yes las muestra siempre, el valor no nunca las muestra, y el valor auto las muestra sólo si son necesarias. El valor por defecto es auto.
• name="nombre" Este atributo da un nombre a la etiqueta, y es imprescindible, si queremos direccionar los enlaces hacia la ventana del iframe. Para ello se utiliza el mismo mecanismo que para los frames (atributo target="nombre" en el enlace, y atributo name="nombre" en el iframe).

La ventana de la etiqueta iframe se comporta de la misma manera que si fuera una imagen, en cuanto a posicionamiento. Al igual que éstas, es un elemento en línea y admite el atributo align, tambien podemos posicionarla mediante código CSS.

Los atributos height y width marcan la anchura y la altura de la ventana. debemos ponerlos si queremos que la ventana tenga una anchura y altura determinadas, aunque también podemos definir esas medidas mediante el código CSS.

Los enlaces en la página principal, actualizan la página principal, y en la ventana iframe, actualizan la propia ventana. Si queremos cambiar esto debemos usar el atributo target. Un enlace dentro del iframe con el atributo target="_parent" actualizará la ventana principal.

Ejemplo de etiqueta iframe

Veamos cómo insertar un iframe en esta misma página que nos muestre la página principal de la wikipedia. el código que hemos insertado es el siguiente:

<iframe src="http://www.es.wikipedia.org" width="400" height="300" name="ventana"></iframe>

y lo veremos así en el navegador:

Para ver otra página en la ventana del iframe insertaremos un enlace redireccionadola mediante el atributo target, por ejemplo, insertamos el siguiente enlace (este es un enlace interno al inicio de este manual)

<a href="index.php" target="ventana">Página de inicio del manual</a>

Página de inicio del manual

Podemos poner también otro enlace externo para poder volver a ver la página de wikipedia:

<a href="http://www.es.wikipedia.org" target="ventana">Ver wikipedia</a>

Ver wikipedia

Observa cómo en la etiqueta iframe hemos puesto el atributo name="ventana", y luego hemos redireccionado la página del enlace hacia el iframe mediante el atributo target="ventana".

---

Tanto si seguimos sólo el manual de HTML como si seguimos los manuales de HTML y CSS al mismo tiempo contiuaremos en el siguiente tema donde veremos cómo podemos insertar sonidos, videos, y enlaces para descarga de archivos en nuestra página.

Video y sonido.

---

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com