Frames en HTML

Dividimos la página en partes más pequeñas y en cada una de ellas visualizamos documentos diferentes.


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 y a cada uno asignarle una medida distinta.
Cada frameset define un grupo de filas y columnas.

Sintaxis

<frameset rows="valor1, valor2, valor_n" cols="valor3, valor4, valor_n">
...el resto de la definición...
</frameset>

Los posibles valores para definir el tamaño de las filas y de las columnas

pixels | % | *

La etiqueta frame

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

Sintaxis

<frameset cols="25%,75%"> <!-- Dividimos la pantalla en una columna de 25% y otra de 75%-->
<frame src="/URL_1">
<frame src="/URL_2">
</frameset>

Nota: 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 de la misma debe ir entre las etiquetas <body> </body>
<frameset rows="25%,75%">
<noframes>
<body>
Su navegador no soporta frames
</body>
</noframes>
<frame src="/frame1.htm">
<frame src="/frame2.htm">
</frameset>

La etiqueta iframe

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

Sintaxis

<iframe src="/URL del sitio que desea mostrar">

Ejemplo

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

EtiquetasAtributosValorDescripciónEj
<frameset> Organiza ventanas múltiples.
cols pixels Asigna el número y el tamaño de las columnas. Ejemplo que divide una página en columnas por pixels
% Ejemplo que divide una página en columnas por porcentajes
* Ejemplo que divide una pígina en columnas con el uso del asterisco
rows pixels Asigna el número y el tamaño de las filas. Ejemplo que divide una página en filas por pixels
% Ejemplo que divide una página en filas por porcentajes
* Ejemplo que divide una página en filas con el uso del asterisco
<frame> Define una subventana.
frameborder 0 Especifica si se mostrará o no el borde alrededor del frame. Ejemplo del atributo frameborder sin el borde alrededor
1 Ejemplo del atributo frameborder con el borde alrededor
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. Ejemplo que deja un margen inferior y superior en el frame
marginwidth pixels Define el margen izquierdo y derecho del frame. Ejemplo que deja un magen izquierdo y derecha en el frame
name frame_name Define un nombre para el frame. Ejemplo que define un nombre para un frame
noresize noresize No le permite al usuario modificar el tamaño del frame. Ejemplo que define un frame que no puede ser modificado
scrolling yes Determina la acción de la barra de desplazamiento. Ejemplo que muestra el comportamiento de la barra de desplazamiento
no Ejemplo que muestra el comportamiento de la barra de desplazamiento
auto Ejemplo que muestra el comportamiento de la barra de desplazamiento
src URL Archivo que va a ser mostrado en el frame. Ejemplo que muestra como llamar al documento a mostrar dentro del frame
<noframes> Muestra un texto para los navegadores que no soportan frames. Ejemplo mostrando el uso de noframes para 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. Ejemplo que alínea el iframe a la izquierda
right Ejemplo que alínea el iframe a la derecha
top
middle
bottom
frameborder 0 Especifica si se mostrará o no el borde alrededor del iframe. Ejemplo que oculta el borde alrededor del iframe
1 Ejemplo que muestra el borde alrededor del iframe
height pixels Define la altura del iframe. Ejemplo que define la altura del iframe en pixels
%
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. Ejemplo que define un nombre para el iframe
scrolling yes Determina la acción de la barra de desplazamiento. Ejemplo que habilita la barra de desplazamiento para el iframe
no Ejemplo que deshabilita la barra de desplazamiento para el iframe
auto Ejemplo acciona la barra de desplazamiento segתn se necesite o no para el iframe
src URL Archivo que va a ser mostrado en el iframe. Ejemplo que muestra como llamar al documento a mostrar dentro del iframe
width pixels Define el ancho del iframe. Ejemplo que define el ancho del iframe en pixels
% Ejemplo que define el ancho del iframe en porcentaje

Atributos estándard

id, class, title, style, lang

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

Eventos intrínsecos

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

Si deseas una descripción completa, dirígete a: eventos intrínsecos.



<<< Enlaces - Links Las tablas >>>

Alojamiento Web

¡OFERTA ESPECIAL! . COM SOLO $ 7.99 * por año. ¡Registrarse suyo hoy y por varios años!