Los frames o marcos consisten en la posibilidad de que en un mismo documento podemos alojar varias páginas HTMl. ya que estos no son más que divisiones de una misma página y en cada una de estas divisiones se cargará otra.

La finalidad y utilidad de esta posibilidad, es que podemos dejar una barra de navegación fija, el logo de una empresa, ...etc. mientras, que por otro lado cargamos deferentes opciones, con esto se logra mayor rapidez a la hora de cargar las páginas ya que el marco esta guardado, lo cual agiliza la navegación.

Por otro lado en la creación de la página, no es necesario repetir las la barra de navegacion o el titulo ...etc. lo cual nos ahorra tiempo a la hora de desarrollar el trabajo.

Pero también tiene algunos inconvenientes que vale la pena tener en cuenta a la hora de decidir crear una página con marcos como por ejemplo, que algunos navegadores no soportan marcos, esto no es algo habitual pero puede llegar a ocurrir y si queremos que nuestra página sea totalmente accecible aquí tenemos un inconveniente.

Por otro lado tenemos el problema de promocion de la página, ya que solo podemos promocionar la página inicial, porque si promocionamos las demas podria ocurrir que alguien llegará a un contenido en el interior de la página en la que no aparecen los recuadros y por tanto puede dificultar la navegación. (Los marcos solo se cargan en el navegador si se abre la página que los contiene. )

En caso de bookmarks o favoritos , si queremos incluir una página que no sea la principal puede no llegar a comportarse de la manera esperada.

Por tanto concluiremos esta breve introducción diciendo que la utilización de frames o no, debe de ser analizada teneiendo en cuenta los pro y los contra, ya que en algunos casos pueden llegar a ser de gran utilidad y en otros no lo son tanto.

Para crear una página con marcos debemos crear un documento especial en el que los definiremos. Este documento no debe contener la etiqueta BODY.

Y crearemos los marcos utilizando las siguentes etiquetas <FRAMESET> y </FRAMESET>, Por tanto nuestra página se vera de la siguente manera:

<HTML>

<HEAD>

<TITLE> PAGINA FRAMES</TITLE>

</HEAD>

<FRAMESET>--------</FRAMESET>

</HTML>

Dentro de las etiquetas <FRAMESET> y </FRAMESET> desarrollaremos las propiedades de los marcos, estas etiquetas cuentan con los siguentes atributos:

COLS : Este atributo define el tamaño y el número de columnas que queremos poner en nuestro documento tanto en porcentaje como en pixeles, escribiremos el número correspondiente entre comillas y lo separaremos por comas, podemos utilizar también el asterisco para definir una columna que ocupe el espacio que le permita la ventana del navegador, esta ultima opción es bastante recomendable si tenemos en cuenta que no todos los ordenadores tienen la misma resolución de pantalla.

Acontinuación veremos un ejemplo en el que definiremos dentro de las etiquetas <FRAMESET> y </FRAMESET> una página con dos columnas, una ocupando el 20% y otra con el comodin, ocupando el resto de la pantalla.

<FRAMESET COLS="20%,*">

</FRAMESET>

ROWS: Pracicamente de la misma forma que vimos anteriormente con el atributo COLS, utilizaremos el atributo ROWS para definir las filas del documento, así, entre comillas y separando por comas, veremos en el siguente ejemplo la creación de dos filas, la primera será del 20% y la siguente será del 80%. (Recordemos que estos valores también se pueden expresar en pixeles)

<FRAMESET ROWS="10%,90%">

</FRAMESET>

Ahora para que los marcos queden organizados debemos proceder a anidarlos, ya que si lo expresamos uno despues del otro no conseguiremos el objetivo deseado. En los ejemplos anteriores, hemos visto dos marcos uno en el que definimos las columnas que tendra nuestro documento y otro en el que definimos las filas que tendra nuestro documento, procederemos a anidarlo y a ilustrar el ejemplo anterior de manera que podamos así facilitar su comprención.

<FRAMESET COLS="20%,*">(En la imagén se veran las definiciones correspondientes a las columnas en color morado)

<FRAMESET ROWS="10%,90%">(Las correspondientes a las

filas de la primera columna en color fuccia)

</FRAMESET>

<FRAMESET ROWS="10%,90%"> (Las correspondientes a las filas de la segunda columna en color naranja)

</FRAMESET>

cols de 20% rows de 10%	cols de *---rows de10%
rows de 90%	rows de 90%

En el ejemplo anterior lo que hemos expresado es lo siguiente:

Hemos creado dos columnas con el atributo COLS,de 20% y *, en la primera columna hemos creado dos filas con el atributo ROWS, una de 10% y otra 90, aquí hemos cerrado esta primera definición para la primera columna.

En el siguente apartado hemos expresado lo que queremos hacer con la columna que nos queda por definir, para lo cual hemos creado dos filas con el atributo ROWS, una de 10% y la otra de 90.

Como se puede observar, la mecanica de este proceso es definir la primera columna con las filas que deseamos poner en esta, luego cerrar y definir las filas que queremos poner en la segunda columna que habiamos definido al principio de todo. La tecnica de los frames puede llegar a ser un poco dificil de comprender, pero no hay que desanimarse, con un poco de practica se puede llegar a dominar.

Acontinuación los demás atributos que puede tener la etiqueta <FRAMESET></FRAMESET>:

ATRIBUTO FRAMEBORDER: Define si queremos hacer visible el borde del marco o no, su especificación seía así:

<FRAMESET FRAMEBORDER="YES"> : Si queremos o no que se vea el borde, en el caso de que no deseamos que sea visible cambiaremos la expresión "YES", por "NO".

ATRIBUTO BORDER: Define el grosor del borde, esta definición se puede expresar en pixeles o en porcentaje. Ejemplo:

<FRAMESET BORDER="5"> Si fuese en Pixeles.........</FRAMESET>

<FRAMESET BORDER="5%"> Si fuese en porcentaje..........</FRAMESET>

ATRIBUTO BORDERCOLOR: Define el color del borde, con un número exadecimal, precedido por la almohadilla. Ejemplo:

<FRAMESET BORDERCOLOR="#FFFFFF">..........</FRAMESET>

FRAMESPACING: Este atributo permite definir la separecion entre los marcos, esta se expresa en pixeles. Ejemplo:

<FRAMESET FRAMESPACING="5">...............</FRAMESET>

Una vez tenemos definidas las propiedades del marco a traves de la etiqueta <FRAMESET></FRAMESET>, tendremos que cargar las páginas que tenemos listas para este fín, recordemos que el concepto de los frames es crear un documento con distintas divisiónes y en cada una de ellas colocar diferentes documentos HTML independientes uno del otro, que se complementan en la información.

ETIQUETA <FRAME> :A traves de esta etiqueta cargaremos las paginas creadas para ser cargadas en cada uno de las divisiones del marco que tenemos listo, esta etiqueta no posee etiqueta de cierre, pero si podemos definir algunas especificaciones a traves de sus distintos atributos.

ATRIBUTO FRAMEBORDER: Con este atributo, definimos si se verá el borde del marco o no, en este caso estariamos hablando de la división que enmarcaria la ventana especifica de este y no el marco en general, tiene tres valores:

-YES: Se veran el borde del marco

-NO: No se verá el borde del marco

-O: Ocultará el borde del marco.

ATRIBUTO NORESIZE: Si agregamos este atributo, el usuario no podrá redimensionar la ventana.

ATRIBUTO MARGIN WIDTH: Con este atributo podemos estipular una medida para los margenes o separaiones que tendrá el texto del borde del marco con respecto del lado izquierdo y derecho de la ventana, este valor debe asignar en pixeles.

ATRIBUTO MARGIN HEIGHT: Con este atributo podemos estipular una medida con respecto a los margenes de altura o separación que tendrá el texto del borde superior de la ventana, este valor se debe asignar en pixeles.

ATRIBUTO SCROLLING: Con este atributo determinaremos si deseamos que se vean las barras de navegación o no, tiene tres valores :

-AUTO: Se verán las barras de navegación solo en el caso de que el contenido no se pueda visualizar correctamente, siendo este el valor por defecto.

-YES: Aparecerán siempre las barras de navegación

-NO: En ningún caso se verán las barras de navegación aunque no se pueda visualizar el contenido completamente.

ATRIBUTO SRC: Con este atributo indicaremos el documento que se cargara en la ventana del marco, definiendo la ruta y nombre del documento.

ATRIBUTO NAME: Con este atributo se le asigna un nombre a la celda o ventana que estamos definiendo exactamente, y no al marco en general, este atributo es muy importante que lo tengamos en cuenta, ya que nos permitira vincular una ventana con otra a traves de los enlaces, se puede asignar como nombre cualquier valor, sin embargo recomendamos que sea algo facil de manipular a la hora de trabajar en el código.

Ya que este atributo es fundamental para crear una página con enlaces que se carguen en la ventana que hemos elegido para tal finalidad ( ventana principal ) y no en la ventana donde hemos creado la barra de navegación, que sería lo que sucedería si no lo definimos claramente mediante el atributo NAME. y el atributo TARGET de la etiqueta <A> </A>, que como recordaremos es la etiqueta que nos permite crear enlaces.

El procedimiento sería el siguiente:

1- Daremos nombre al frame donde queremos que se carguen las paginas, por ejemplo "PRINCIPAL"

</FRAMESET>
</FRAMESET>

2- En la página en donde creamos los enlaces, daremos el ATRIBUTO TARGET, indicando la página donde queremos que se carguen los enlaces, en este caso hemos indicado para tal fin, la página que hemos llamado PRINCIPAL CON EL ATRIBUTO NAME.

De modo que el documento que contiene los enlaces nos quedaría de la siguente manera:

<A HERF="PAG-1.HTML"TARGET="PRINCIPAL">ENCABEZADO</A>
<A HERF="PAG-2.HTML"TARGET="PRINCIPAL"a href=">LATERAL</A>
<A HERF="PAG-3.HTML"TARGET="PRINCIPAL">PRINCIPAL</A>
<A HERF="PAG-4.HTML"TARGET="PRINCIPAL">ENLACES</A>
<A HERF="PAG-5.HTML"TARGET="PRINCIPAL">FINAL</A>

Para ver la página como quedaría especificada de la manera indicada anteriormente pulsa AQUI

Solo nos resta por decir, que al ATRIBUTO TARGET, le podemos asignar cualquier valor de los que hemos estudiado en el tema ENLACES dedicado a este fín. con la única variante que el atributo TOP, que nos permite cargar una página en la ventana completa no esta recomendado en la utilización de frames, ya que si creamos un vinculo a una página externa, esta se cargará en la ventana del marco que hemos destinado para este fin (PRINCIPAL), dejando fijos las otras ventanas de nnuestro documento con frames, dando muy mal aspecto.

Con la intención de practicar un poco y mejorar la comprensión de este tema que como dijimos antes en principio parece un poco díficil, hemos creado una página con frames en la que hemos hecho algunas divisiones más de las que vimos anteriormente, aquí también podremos apreciar como las paginas se cargan en la ventana Nº 3, que hemos lamado "ventana principal".

En este caso hemos creado un marco con cinco divisiones.

En la primera parte enontramos un marco contenedor de dos filas:

En la primera fila contiene una pagina que hemos llamado "VENTANA -1".
En la segunda fila contiene anidado un marco de dos filas que....

En la primera fila tiene anidado un marco de dos columas, y en cada columna de este, estan los documentos correspondientes :

En la primera columna"VENTANA-2"
En la segunda columna"VENTANA-3-PRINCIPAL".

En la segunda fila, contiene anidado otro marco de dos filas, en las que estan los documentos correspondientes:

En la primera fila "VENTANA-4"
En la segunda fila "VENTANA- 5"

El codigo del ejemplo citado anteriormente es el siguiente:

<FRAMESET ROWS="80,*"FRAMEBORDER="YES"FRAMESPACING=

"5"BORDERCOLOR="#2F4F2F">
<FRAME SRC="PAG-1.HTML"FRAMEBORDER="YES"SCROLLING="NO"NORESIZE>

<FRAMESET ROWS="60%,*"FRAMEBORDER="YES"FRAMESPACING=

"5"BORDERCOLOR="#2F4F2F">

<FRAMESET COLS="20%,*"FRAMEBORDER="YES"FRAMESPACING=

"5"BORDERCOLOR="#2F4F2F">

</FRAMESET>
<FRAMESET ROWS="*,30%" FRAMEBORDER="YES"FRAMESPACING="5"BORDERCOLOR="#2F4F2F">
<FRAME SRC="PAG-4.HTML"FRAMEBORDER="YES"SCROLLING="NO"NORESIZE>
<FRAME SRC="PAG-5.HML"FRAMEBORDER="YES"SCROLLING="NO"NORESIZE>

</FRAMESET>
</FRAMESET>
</FRAMESET>

Con la intención de mejorar la comprención del anterior ejemplo hemos creado este grafico ilustrativo. Para ver el resultado del anterior documento pulsa sobre la imágen:

ETIQUETA IFRAME (FRAMES FLOTANTES) <IFRAME> </IFRAME> : Esta es una etiqueta que nos permite crear un espacio dentro de un documento HTML, quitando algunos de los inconvenientes que habiamos comentado que poseen los marcos, ya que en este caso con IFRAME solo estariamos hablando de un espacio que se inserta dentro del flujo del documento en el cual podemos cargar otra página proveniente de nuestro sitio o de un sitio externo, este documento se mostrará tal y como esta diseñado con sus atributos y enlaces, si posee scrpis o aplicaciones estas funcionarán de la manera como están diseñadas en la página cargada dentro de IFRAME.

Por ejemplo, podriamos tener banners cargados directamente desde un servidor de banners que se encuentre en otra red o publicar documentos de noticias o novedades provenientes de terceros...etc..

Para crear este espacio con IFRAME, dentro de la etiqueta debemos especificar las medidas a traves de los atributos WIDTH Y HEIGHT, a continuacón veremos a fondo los atributos y la aplicación de esta etiqueta:

ATRIBUTO SRC: Con este atributo cargaremos el documento que queremos mostrar dentro del marco

ATRIBUTO WIDTH: A traves de este atributo indicaremo es ancho en pixeles del documento

ATRIBUTO HEIGHT: Este atributo nos permitirá indicar el alto en pixeles de nuestro marco

ATRIBUTO NAME: Este nos permite adjudicarle un nombre, que mas adelante nos puede resultar muy útil para la aplicación del atributo target de los enlaces como lo hemos visto anteriormente.

ATRIBUTO ID: Este indicador nos permitirá referirnos al marco mediante el codigo Java Scrip.

ATRIBUTO FRAMEBORDER: Este como en los casos que hemos visto anteriormente, nos permite decidir si queremos que se visualice el borde o no del marco, los valores son:

0 : No se visualizará
1: Si se visualizará.

SCROLLING: Con este atributo indicaremos si queremos que aparezcan las barras de desplazamiento, tiene tres valores:

YES: Aparecerán siempre
NO: No se verán en ningún caso
AUTO: Solo se verán si es necesario en caso de que el el espacio destinado al marco no fuera suficiente para mostrar el contenido.( Este es el valor por defecto ).

MARGIN: Especifica la alineación que ha de tener el marco.

MARGINWIDTH: Define el argen de izquierda a derecha con respecto al borde del marco, sin embargo prevalecerá el margen qu se ha definido en el codigo del documento que estamos mostrando dentro del marco.

MARGINHEIHT: Define el margen respecto al borde superior e inferior del marco.

EJEMPLO DE ETIQUETA <IFRAME> </IFRAME> :

<IFRAME SRC="FRAMEPRBA.HTML" WIDTH="300" HEIGTH="250"> ESTE TEXTO SOLO SE VERÁ EN CASO DE QUE EL NAVEGADOR NO SOPORTE LOS FRAMES </IFRAME>

En el ejemplo anterior vemos como la pagina que esta dentro de nuestro marco flotante se ve tal y como la tenemos diseñada con todas sus propiedades, solo en caso de que el navegador no reconozca la etiqueta IFRAME, se verá un recuadro con el texto que hemos puesto dentro de la etiqueta.

RECOMENDACIÓN: Para dominar bien este tema es fundametal la practica de algunos ejercicios con frames, ya que más que memorizando este tema se domina practicando.

TUTORIAL HTML

FRAMES

(Hipertex markup language)