Sea protagonista de la Web

Virtualnauta > Tutorial HTML > Frames - Marcos

Frames en HTML

<<< Enlaces - Links en HTML Las tablas de HTML >>>

¿Qué son los frames?

Los frames(marcos en español) permiten a los autores presentar documentos con vistas múltiples. Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen.

Cada vista es un documento independiente de los otros.

La etiqueta frameset

La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos que pueden ser de diferentes medidas.

Cada frameset define un grupo de filas y columnas.

<frameset rows="30%,70%" cols="33%,34%,33%">
...el resto de la definición...
</frameset>

Este ejemplo crea una cuadrícula de 2x3 subespacios.

La etiqueta frame

La etiqueta <frame> define que documento colocaremos en cada marco.

En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%.
La primer columna contiene el documento "frame1.html" y la segunda columna el documento "frame2.html".
La etiqueta <frame> no debe llevar etiqueta de cierre

La etiqueta noframes

La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.

<noframes> se coloca dentro de la etiqueta frameset
si el navegador soporta frames, el texto del <noframes> no se mostrará
si usamos la etiqueta <noframes> el texto debe ir entre las etiquetas <body> </body>

<frameset rows="25%,75%">
   <noframes>
      <body>
      Su navegador no soporta frames
      </body>
   </noframes>
   <frame src="cabezapag.htm">
   <frame src="cuerpopag.htm">
</frameset>

La etiqueta iframe

La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento.
Es decir, que puedo mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando

Código

<iframe src="http://www.virtualnauta.com" width="100%">
</iframe>

Resultado

En este ejemplo podemos observar que la ventana del resultado nos está mostrando la página principal de Virtualnauta.com.

Etiquetas y atributos de los marcos

Etiquetas	Atributos	Valor	Descripción
<frameset>			Organiza ventanas múltiples.
	cols	pixels	Asigna el número y el tamaño de las columnas.
		%
		*
	rows	pixels	Asigna el número y el tamaño de las filas.
		%
		*
<frame>			Define una subventana.
	frameborder	0	Especifica si se mostrará o no el borde alrededor del frame.
	frameborder	1
	longdesc	URL	URL con una larga descripción del contenido del frame (se usa para navegadores que no soportan frames).
	marginheight	pixels	Define el margen superior e inferior del frame.
	marginwidth	pixels	Define el margen izquierdo y derecho del frame.
	name	frame_name	Define un nombre para el frame.
	noresize	noresize	No le permite al usuario modificar el tamaño del frame.
	scrolling	yes	Determina la acción de la barra de desplazamiento.
		no
		auto
	src	URL	Archivo que va a ser mostrado en el frame.
<noframes>			Muestra un texto para los navegadores que no soportan frames.
<iframe>			Crea un frame en línea que contiene otro documento.
	align	left	Alineación del iframe con respecto al texto.
		right
		top
		middle
		bottom
	frameborder	0	Especifica si se mostrará o no el borde alrededor del iframe.
	frameborder	1
	height	pixels	Define la altura del iframe.
	height	%	Define la altura del iframe.
	longdesc	URL	URL con una larga descripción del contenido del iframe (se usa para navegadores que no soportan frames).
	marginheight	pixels	Define el margen superior e inferior del iframe.
	marginwidth	pixels	Define el margen izquierdo y el derecho del iframe.
	name	nombre	Define un nombre para el iframe.
	scrolling	yes	Determina la acción de la barra de desplazamiento.
		no
		auto
	src	URL	Archivo que va a ser mostrado en el iframe.
	width	pixels	Define el ancho del iframe.
	width	%	Define el ancho del iframe.

Atributos estándard

id, class, title, style, lang

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Si desea una descripción completa, diríjase a: eventos intrínsecos.

¿No encuentras lo que buscas?

<<< Enlaces - Links en HTML Las tablas de HTML >>>

Búsqueda

Otros tutoriales

CSS
Herramientas Utiles
Diseño de formularios

Diseño Web

Sitios amigos

LaWebdelProgramador
Desarrolloweb
Frogx.three

Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.

webmaster@virtualnauta.com

Mapa del sitio

HTML

Básico

Colores

Avanzado

Ejemplos y Examen

Guías de referencia