Beholia Software: Frames en HTML

-->

Frames (en inglés, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras.

Ejemplo:

<HTML>

<HEAD>

<TITLE>Mi primera página con marcos</TITLE>

</HEAD>

<FRAMESET COLS="20%,80%">

<FRAME NAME="indice" SRC="indice.html">

<FRAME NAME="principal" SRC="introduccion.html">

<NOFRAMES>

<P>Lo siento, pero sólo podrás ver esta página

si tu navegador tiene la capacidad de visualizar

marcos.</P>

</NOFRAMES>

</FRAMESET>

</HTML>

Atributos del FRAMESET:

ROWS : Sirve para las filas del Frame
COLS : Sirve para las columnas del Frame

El número puede ser en: PORCENTAJE, NUMERO ABSOLUTO o VALOR RELATIVO.

EJEMPLO:

<FRAMESET COLS="%20, %80"> (la columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)
<FRAMESET COLS="40, 600"> (la columna de la izquierda tendrá 40 pixels de ancho y la de la derecha 600)
<FRAMESET ROWS="100,*,100"> (Habrá tres filas, la superior y la inferior de una altura fija de 100 pixels, y la del medio obtendrá el espacio restante).

Atributos del FRAME:

SRC: Indica la dirección del documento HTML que ocupará el marco
NAME: Asigna un nombre a un marco para que después podamos acceder a él.
MARGINWIDTH: Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT: Igual al anterior pero con márgenes verticales.
SCROLLING: Decide si se colocan o no barras de desplazamiento al marco para que podamos movernos por su contenido. Su valor es por defecto AUTO, que deja al navegador la decisión. Las otras opciones que tenemos son YES y NO.
NORESIZE: Si lo especificamos el usuario no podrá cambiar de tamaño el marco.
FRAMEBORDER: Al igual que su homónimo en la etiqueta , si lo igualamos a cero se eliminará el borde con todos los marcos contiguos que tengan también este valor a cero.

Atributo Target:

Es el blanco que apunta nuestra dirección URL, ya sea en una nueva página, dentro de la misma, o en un FRAME. Entre ellos tenemos:

_Blank: Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_Top: Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
_Self: Muestra la nueva página en el marco donde está declarado el enlace.
_parent: Muestra la nueva página en el que contiene al marco donde se declara el enlace. (Marco principal)

11.1.- FRAMES FLOTANTES

Es posible situar en nuestras páginas Web una especie de frames o marcos "flotantes", queriendo decir con esto que son como frames pero que podemos situarlos en la posición que queramos dentro de nuestra página, situando mediante coordenadas su vértice superior izquierdo. Estas ventanas son configurables, pudiendo definir además de su posición su tamaño y otra serie de propiedades.

Para crear estos Frames flotantes, se usan las etiquetas <IFRAME>...</IFRAME>. Estas etiquetas deben situarse dentro del cuerpo de la página que contiene al marco, es decir, entre <BODY> y </BODY>.

Los principales atributos de la etiqueta <IFRAME> son:

NAME: análogo al atributo de <FRAME>, sirve para identificar unívocamente al marco flotante, con vistas a referenciar su contenido mediante un enlace por medio del parámetro TARGET.
WIDTH: Con este atributo definimos la anchura que va a tener el marco flotante, en píxeles.
HEIGHT: Con este atributo definimos la altura que va a tener el marco flotante, en píxeles.
ALIGN: Va a definir si el marco va a estar alineado a la izquieda en la ventana del navegador, centrado o a la derecha. (left / center / right)
FRAMEBORDER:, Este atributo hace que el marco aparezca sin borde o con borde (valor por defecto) respectivamente. (0,1)
VSPACE: Nos sirve para posicionar el marco, y define la distancia entre el borde superior del marco y el límite superior de la ventana del navegador.
HSPACE: Nos sirve para posicionar el marco, y define la distancia entre el borde izquierdo del marco y el límite izquierdo de la ventana del navegador.
MARGINHEIGHT: Nos define el espacio en píxeles que va a haber entre el borde superior del marco y su contenido.
MARGINWIDTH: Nos define el espacio en píxeles que va a haber entre el borde izquierdo del marco y su contenido.
SCROLLING: (yes / no / auto), nos define si el marco va a tener barra deslizadora siempre, nunca o sólo cuando sea necesario por exceder el contenido al tamaño del mismo. Su valor por defecto es auto.
SRC: : Indica la dirección del documento HTML que ocupará el marco
STYLE: Este atributo es una aplicación directa de las Hojas de Estilo en Cascada (CSS), y nos permiten definir la posición y tamaño del marco en la ventana del navegador.
CLASS: "clase", Análogo al anterior, pero ahora refiriendo el estilo del marco flotante (posición y tamaño) de acuerdo con una clase de estilos definida en la sección de la página que contiene al marco o en un archivo externo de extensión ".css"
ID: "identificador", en todo semejante al anterior, pero con la diferencia que ahora el nombre de identificador asignado debe ser único para cada marco en concreto. También posibilita cambiar dinámicamente las propiedades del marco usando un lenguaje de Script, como JavaScript.

Ejemplo de Marco Flotante:

<html>

<head>

<title>Ejemplo de MARCO FLOTANTE</title>

</head>

<body>

<p align="center">

SCROLLING=yes>

</iframe></p>

</body>

</html>

Podemos ver un ejemplo de Frame Flotante:

Beholia Software

miércoles, 18 de abril de 2012

Frames en HTML

No hay comentarios:

Publicar un comentario