Manual de HTML para principiantes - Marcos interiores (in-line frames o iframes)

18 - Marcos interiores (in-line frames o iframes)

[editar]
Tutorial creado por t0m|ta. Extraido de: http://www.tomatoma.ws/manuales.php
07 de Marzo de 2006
Los marcos interiores o IFRAMES nos permiten mostrar una página html directamente dentro otra.
Por supuesto a algunos autores les parece la solución de todos sus problemas y a otros, en cambio, les parece que presentan demasiados inconvenientes.
Esta etiqueta, introducida por iExplorer 3, ha sido añadida a las especificaciones de HTML en la versión 4.0. Se ve en Netscape 6 y en Opera 4 y siguientes.
LA ETIQUETA BÁSICA
Los marcos interiores o flotantes nos permiten introducir en mitad de un documento html, otro documento html, como si fuera una imagen o una tabla. Vamos a ver un ejemplo simple.
|| Código: ||
|| <html>
<head>
<title>colores</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600">
Vamos a ver un ejemplo estupendo de cómo se pone un iframe,  exactamente en mitad de
nuestra página.<br />
<iframe src="externo.html" width="70%" height="90"></iframe> <br /><br />
Y seguimos tranquilamente escribiendo en nuestra página.
</body>
</html> ||



ATRIBUTOS
src="archivo": establecemos la ubicación del archivo externo que queremos incluir.
width: Establecemos el ancho del iframe, en píxeles o en tantos por ciento.
height: Establecemos el alto del iframe, en píxeles o en tantos por ciento.
frameborder="0" Determinanos si queremos que tenga borde nuestro iframe o no.
marginwidth="x" Añade un margen a los lados del iframe.
marginheight="x" Añade un margen encima y debajo del iframe.
scrolling="no" Establecemos si aparece o no la barra de scroll.
align="right" Alineamos el iframe a un lado o a otro. Se comporta exactamente igual que en el caso de las imágenes, es decir cuando utilizamos align="right|left" el texto externo se ordena a su alrededor.
hspace="x" Establece un margen a los lados.
vspace="x" Establece un margen encima y debajo del iframe.
NOTA: Cómo siempre, repetimos: las características visuales deben establecerse con CSS y no con HTML.
|| Código: ||
|| <html>
<head>
<title>IFRAME</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFCC99" text="#CC3300" link="#666633" vlink="#669999" alink="#FF6600">
<iframe src="externo1.html" width="20%" height="100%" border="0" align="left" hspace="10" vspace="0"></iframe>Los marcos interiores o IFRAMES nos permiten mostrar una página html directamente dentro otra.
Por supuesto a algunos autores les parece la solución de todos sus problemas y a otros, en cambio, les parece que presentan demasiados inconvenientes.
Esta etiqueta, introducida por iExplorer 3, ha sido añadida a las especificaciones de HTML en la versión 4.0. Se ve en Netscape 6 y en Opera 4 y siguientes.
LA ETIQUETA BÁSICA
Los marcos interiores o flotantes nos permiten introducir en mitad de un documento html, otro documento html, como si fuera una imagen o una tabla. Vamos a ver un ejemplo simple.
Y seguimos tranquilamente escribiendo en nuestra página.
</body>
</html> ||



LOS ENLACES
Los enlaces en los iframes funcionan exactamente igual que en los frames, tal y cómo vimos en el tema 13.
Esto nos permite jugar con los distintos iframes, si incluimos varios, veamos un ejemplo. Os propongo un ejercicio. Tenéis que hacer un documento html que contenga 2 iframes, uno encima de otro. En el iframe superior tenéis que poner dos enlaces con los que controlaréis lo que sucede en el iframe inferior.
Suerte!
[editar]

30 opiniones

www.poderparavencer.com

explendido
T.T

necesito crear una pagina web para aprobar programacion... ayuda!!!
enlases pagina web

porfis ehenme la mano para hacer mi pagina web
enlases

no de como hacer uno para empesar que sea de lo mas sencillo plis
buscando

busca
1 2 3 4 5 6 | siguiente >

Tutoriales relacionados con 'Manual de HTML para principiantes'

¿Quieres hacerte una página web y no sabes ni por dónde empezar? Aquí tienes lo... Más »
El principal objetivo es introducir y discutir el modo principal[2] PSGML de Emacs y las... Más »
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es... Más »
ASP (Active Server Pages) es la tecnología para la creación de páginas dinámicas del lado... Más »
El Jargon File contiene un montón de definiciones del termino "hacker", la mayoría basadas en... Más »

Autor y licencia de 'Manual de HTML para principiantes'


Tutorial de t0m|ta. Extraido de: http://www.tomatoma.ws/manuales.php CopyLeft
Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.