Uneweb Instituto: Cómo crear un frame en HTML

Para crear un frame se utiliza la etiqueta <FRAME> y </FRAME>. Un frame es la división de la pantalla en varias zonas o ventanas que pueden actuar de forma independiente las unas de las otras. Los navegadores que reconocen las etiquetas para realizar frames son Netscape y Explorer 2.0 y en adelante. A continuación vamos a ver como definir frames o ventanas y las peculiaridades que hay que tener en cuenta a la hora de cargar nuestras páginas en cada uno de ellos.

< frames cols="30%,70%"> Esta etiqueta divide la pantalla en dos columnas que actuan como ventanas. Una de ellas ocupará el 30% de la pantalla y la otra ocupará el 70% de la pantalla.

< frames rows="30%,70%"> Con esto dividiríamos la pantalla en filas en la misma proporción anterior.

< frames cols="40,600"> La ventana de la izquierda ocupará 40 pixels y la de la derecha 600.

< frameset rows="80,400"> La ventana superior ocupará 80 pixels y la ventana inferior 400.

<frameset rows="20,100,*"> Habrá 3 ventanas. La primera tendrá 20 puntos, las segunda 100 y la tercera el resto de la pantalla.

< frameset cols="2*,*" > Dividiría la pantalla en tres partes y la primera columna ocuparía dos tercios de la pantalla.

< framaset rows="*,3*"> Divide la pantalla verticalmente en 2 partes. La primera fila obtendría un cuarto de espacio de la pantalla mientras que la segunda fila obtendría los otros tres cuartos restantes.

< frame src="documento.htm"> Con esta etiqueta indicamos que documento se va a cargar en cada ventana.

Veamos un ejemplo:

<HTML>

<HEAD>

<TITLE> FRAMES </TITLE>

</HEAD>

</FRAMESET>

</HTML>

Como insertar el contenido

Una vez que tenemos el frame principal hecho el sigiente paso seria introducir el contenido en el, lo cual se hace de la siguiente manera:

1. Debemos crear un nuevo archivo en el editor que estemos utilizando y lo guardamos con el nombre de izquierda.html (o el nombre que uno quiera pero siempre y cuando coordine con el que pusimo en el ejemplo anterior <FRAME SRC="derecha.html">, suponiendo que lo se guardo como der.html. Dentro de este marco yo puedo utilizar todos los elementos que hemos vistos anteriormente.

EJEMPLO:

<html>

<head>

<TITLE>Ejemplos Con Frames</TITLE>

</head>

<h1> <font color=red>Este es el marco que me servira como portada</font> </h1>

</html>

2. Debemos crear otro archivo y colocarle el nombre que uno quiera, para este caso se llamara izquierda.html

EJEMPLO:

<html>

</html>

Navegadores que no soportan frame

<HTML>

<HEAD>

<TITLE> FRAMES </TITLE>

</HEAD>

</FRAMESET>

Lo siento, tu navegador no soporta frame

debes actualizarte

</NOFRAMES>

</HTML>

El algoritmo elaborado anteriormente funciona tanto para navegadores que soportan FRAMES como para aquellos que no.

<NOFRAMES>...</NOFRAMES>, dentro de estas etiquetas se escribe el mensaje que uno quiere que aparesca al momento de entrar un usuario cuyo navegador no acepta FRAMES. Es como una forma de validacion.

Dentro de las etiquetas <NOFRAMES>...</NOFRAMES> tambien podemos colocar el contenido de los dos frames que definimos, de manera que cuando una persona cuyo navegador no acepte frames entre, le sea totalmente transparente.

ATRIBUTOS

NAME

Indica el nombre de la frame, este nombre es importante ya que se usará en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento. Si no se indica el nombre solo se podrá mostrar el documento actual, sin que sea posible cambiarlo mediante hiperenlaces.

_blank

Siempre carga en una nueva ventana, sin nombre.

_self

Siempre carga esta ventana sobre la del usuario.

_parent

Siempre carga esta ventana sobre su padre o sobre la del usuario si no hay padre definido.

_top

Siempre carga esta ventana en el nivel mas alto o sobre la del usuario si estas en el nivel superior.

ROWS

Este atributo es utilizado cuando queremos hacer un corte horizontal y no uno vertical. En ese caso, lo unico que deberiamos cambiar seria el atributo COLS de la etiqueta <FRAMESET> por dicho atributo. El resto seria igual:

<HTML>

<HEAD>

<TITLE> FRAMES </TITLE>

</HEAD>

</FRAMESET>

</HTML>

Pulsa para ver un ejemplo

MARGINWIDTH y MARGINHEIGHT

El primer atributo nos permite controlar la cantidad de espacio horizontal entre los contenidos y las paredes del marco. El valor mínimo permitido es 1. El segundo atributo nos permite controlar el espacio vertical entre los contenidos y los márgenes superior e inferior.

EJEMPLO:

</FRAMESET>

NORESIZE

El usuario puede tomar el borde del marco con el mouse y moverlo a su gusto. Para que esto no ocurra utiliza este atributo que al ingles traduce NO-RESIZE "sin cambiar el tamaño"). Hay que saber usar este atributo ya que todas las personas que visitan nustra pagina WEB no tienen configurado su monitor a la misma resolucion.

SCROLLING

Este atributo es utilizado para indicar si el frame tendrá o no una barra de scroll, la barra de scroll se muestra en el lateral y permite desplazarse por el documento, pulsando con el ratón en ella. Si toma el valor YES, siempre se mostrará esta barra, para el valor AUTO solo se mostrará si el documento no cabe en la frame, si es necesaria. Y por último NO indica que en ningún caso se muestre la barra de scroll. Si no se indica nada se toma por defecto el valor AUTO.

</FRAMESET>

TARGET

Este atributo es usado para hacer que el resultado de un enlace se origine en otro frame de la misma ventana, pondriamos TARGET=nombre, siendo "nombre" el nombre de un segundo frame. Pero hay que tener cuidado al utilizarlo ya que no se pueden utilizar nombres reservados

_self

Hace que el enlace se cargue en el propio frame. (default)

blank

Hace que se abra una nueva ventana y el enlace activado se carga en ella, a pantalla completa.

_top

Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se cargue una nueva ventana.

Sigue aprendiendo con los siguientes: tutoriales1 , tutoriales2

lunes, 19 de agosto de 2013

Cómo crear un frame en HTML

No hay comentarios:

Publicar un comentario

Entradas populares