12.212 cursos gratis
8.338.568 alumnos
Facebook Twitter YouTube
Busca cursos gratis:

Curso de HTML

Autor: Felipe Javier Mckeever
Curso:
9,20/10 (15 opiniones) |33367 alumnos|Fecha publicación: 20/10/2006
Envía un mensaje al autor

Capítulo 33:

 Frames o marcos

Los frames o cuadros son divisiones que se le pueden dar a una página Web. En cada uno de los frames se pueden cargar una página diferente que actúan independientemente una de otra.

El uso más común del empleo de los frames es en la aplicación de menús.

En el cual se divide la pantalla en dos frames, uno estrecho (en la parte superior o al lado izquierdo) y otro mayor. Dentro del frame estrecho, se carga la pagina con un menú conteniendo los enlaces a otras paginas, al pulsar uno de estos enlaces, se carga la pagina dentro del frame. Mayor.

De manera que el menú siempre estará visible en la parte superior o izquierda, y los contenidos se estarán cambiando dentro del frame principal.

Ejemplo: Menú Horizontal

Ejemplo: Menú Vertical

Para crear frames se utilizan las directivas cerradas <FRAMESET>..... </FRAMESET>

Esta directiva indica inicio y final de los frames o cuadros.Dentro de ella se colocan   todos los frames que se van a emplear.

La directiva FRAMSET se coloca en lugar de BODY.

Se coloca una directiva  <FRAME> por cada cuadro que se quiera tener.

La directiva <FRAME> indica el archivo que va a contener ese cuadro o frame.

Ejemplo: <FRAME SRC="archivo.html">

La directiva  FRAMESET, nesesita los parametros ROWS ó COLS, que indican si la pantalla se va a dividir en filas o columnas.

Ejemplos:

Crear dos marcos o frames horizontales

<html>

<head>

<title>Frame 1</title>

</head>

<frameset ROWS="50%,50%">

<frame src="reglaoro.html">

<frame src="bienpormal.html">

</frameset>

</html>

Resultado

Crear dos marcos o frames Verticales

<html>

<head>

<title>Frame 2</title>

</head>

<frameset COLS="50%,50%">

<frame src="reglaoro.html">

<frame src="bienpormal.html">

</frameset>

</html>

Reslultado

Crear dos marcos o frames Horizontales de 20 % la primera columna y 80% la segunda columna.

<html>

<head>

<title>frame 3</title>

</head>

<frameset rows="20%,80%">

<frame src="banner1.htm">

<frame src="inmortalidad.html ">

</frameset>

</html>

Reslultado

Crear dos marcos o frames Verticales de 20 % la primera columna y 80% la segunda

<html>

<head>

<title>Frame 4</title>

</head>

<frameset cols="20%,80%">

<frame src="reglaoro.html">

<frame src="bienpormal.html">

</frameset>

</html>

Resultado

Crear dos marcos o frames horizontales fijando el tamaño por medio de pixels

En el siguiente ejemplo se da un tamaño de 100 pixels al frame superior y el resto de la altura para el área inferior.

<html>

<head>

<title>frame 5</title>

</head>

<frameset ROWS="100,400">

<frame src="banner1.htm">

<frame src="inmortalidad.html">

</frameset>

</html>

Reslultado

Frames o cuadros iteractivos

Para que puedas controlar y decidir en que frame  se carga una mueva página es nesesario dar un nombre al FRAME, y referir a el, la pagina a cargar.

El atributo  NAME, es el que permite darle un nombre a cada   frame, el cual es referido por el atributo TARGET="nombre del frame". El atributo TARGET, se coloca dentro de un enlace, el cual al ser activado el enlace carge la página en el otro frame referido por TARGET en lugar de cargarlo en el   propio frame.

Ejemplos:

Frames o cuadros verticales iteractivos

Para crear frames iteractivos, es nesesario nombrar el frame con el attributo  NAME.

Este atributo se coloca dentro del frame.

<frameset cols="20%,80%">

<frame src="menu2-v.html">

<frame src="reglaoro.html" NAME="principal">

</frameset>

Ver codificación completa

Resultado

Notese que el segundo frame se llama principal.

Para que funcione el frame iteractivo es nesesario que los enlaces esten relacionados con el frame, por medio del atributo TARGET, el cual se coloca dentro de los enlaces.

Para que funcione el programa frame 6 es nesesario que el programa menu2-v.html, contenga el atributo TARGET encada uno de  los enlaces. A continuación damos la codificación de dicho programa.

Extracto del archivomenu2-v.html

<a HREF="reglaoro.html" TARGET="principal">La regla de oro</a>

<a HREF="unidad.html" TARGET="principal">La unidad de la religión</a>

<a HREF="cosecha.html" TARGET="principal">La cosecha de los hechos</a>

<a HREF="lavenida.html" TARGET="principal">La venida de los profetas</a>

Ver codificación completa

Notese que cada enlace se le agrego el atributo TARGET="principal", este atriibuto le indica al browser que la pagina enlazada se debe de cargar en el frame principal, y no en el frame desde el que se esta activando.

También se puede utilizar división horizontal de frames iteractivos

Ejemplo

UILIZANDO  BASE TARGET

Otro método para relacionar varios enlaces con un frame, es utilizando BASE TARGET, con esta directiva, nos ahorramos el tener que especificar TARGET en cada uno de los enlaces, y en su lugar solo basta con especificar una sola vez al principio de BODY el atributo <BASE TARGET>. para ilustrar esto a continuación le presentamos el siguiente ejemplo:

Extracto del archivomenu3-v.html

<BASE TARGET="principal">

<a HREF="reglaoro.html">La regla de oro</a>

<a HREF="unidad.html">La unidad de la religión</a>

<a HREF="cosecha.html">La cosecha de los hechos</a>

Ver la codificación completa

Compare la codificación del programa menu2-v.html con menu3-v.html, y notese que nos ahorramos escribir TARGET en cada enlace, al especificar BASE TARGET al inicio.

El programa anterior (menu3-v.html) nesesita el programa frame7.html

Ver codificación

Resultado

Directiva NOFRAMES

Esta se utiliza para advertir a los visitantes que no cuenten con un browser actualizado, ya que los browsers viejos no manejan  frames.

Dentro de la sección NOFRAMES, se coloca un mensaje advirtiendo al visitante que nesesita un browser actualizado para poder ver la pagina con frames, o para dar un enlace a una versión sin frames.

<frameset cols="20%,80%">

   <frame src="menu3-v.html">

   <frame src="reglaoro.html" NAME="principal">

</frameset>

<NOFRAMES>

   <body>

   Esta página utiliza frames, pero su browser no los maneja.

   </body>

</NOFRAMES>

</html>

Ver codificación completa

Resultado

Nuestras novedades en tu e-mail

Escribe tu e-mail:

Al presionar "Recibir" estás dándote de alta y aceptas las condiciones legales de mailxmail

Cursos similares a Curso de HTML


  • Vídeo
  • Alumnos
  • Valoración
  • Cursos
1. HTML para principiantes
HTML para principiantes , aprende a hacer tus propias páginas web. Programar en un... [15/09/09]
9.836  
2. HTML, CSS. Menú horizontal
Aprende a utilizar los elementos básicos de HTML y CSS , y crea un menú sencillo... [12/04/11]
436
Curso con video
3. HTML. Cómo crear imagen
Sigue este tutorial de informática y aprende a crear banners con links en tu... [31/03/11]
985
Curso con video

¿Qué es mailxmail.com?|ISSN: 1699-4914|Ayuda
Publicidad|Condiciones legales de mailxmail


¿Quieres recibir más cursos de Programación? ¡Son gratis!