Los frames (marcos, cuadros o paneles) nos dan la posibilidad de dividir nuestra página en ventanas más pequeñas. Cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una página externa independiente.
Puesto que esta función se incluyo con el HTML 4.0 (la última versión). Las versiones más antiguas de los navegadores no tienen implementada esta característica (posibilidad hoy en día bastante improbable)
Los frames o marcos son una herramienta que ofrece muchas posibilidades, con grandes inconvenientes. por ejemplo: división de la página en vario archivos, al tratarse de varios documentos, la carga puede demorarse. y su uso está actualmente sujeto a discusión ignorándose si en un futuro desaparecerán de la recomendación xhtml.
En resumen tendremos que valorar si los frames son realmente necesarios en nuestros diseños web. Como dato las casas de programación y diseño web están dejando de usar frames.
Estructura de los frames
Lo primero que tendremos que hacer es una pequeña organización para la realización de nuestra página con frames.Veamos los pasos ha seguir para la creación de una página con tres frames:
- Creación de un documento maestro en el cual estan definidos los frames.
- Creación de tres documentos más, que se cargarán cada uno en su respectivo frame.
Este documento no contendrá head y body sino que estará compuesto por head y frameset. Es dentro de la sección frameset y solamente si colocamos una subsección no frames donde insertaremos el body. Este body suele ser un texto alternativo que se visualizará en caso de que los navegadores que no soporten frames o tengan esta opción inactivada)
<html>
<head> <title> Título de la página </title> </head>
<frameset rows="75,*">
<frame src="pagina1.html" name="frame_izda"></frame>
<frame src="pagina2.html" name="frame_dch_arriba"></frame>
<frame src="pagina3.html" name="frame_dch_centro"></frame>
</frameset>
<noframes>
<body>
Lo siento,su navegador no soporta frames.
Pulse <a href="frames1.htm> aquí </A>
para acceder a los contenidos de estas páginas.
</body>
</noframes>
</html>
(2) Creación de tres documentos más, que se cargarán cada uno en su respectivo frame:
Estos documentos son archivos HTML exactamente iquales a los que hemos estado creando anteriormente. Podemos insertar en esto documentos los elementos HTML que deseemos como etiquetas de cabecera, imagenes etc..
------------ pagina1.html--------------:
<html> <head> <title> Página1 </title> </head> <body bgcolor="gray"> frame izquierdo </body> </html>------------ pagina2.html--------------:
<html> <head> <title> Página2 </title> </head> <body bgcolor="gray"> frame derecha arriba </body> </html>------------ pagina3.html--------------:
<html> <head> <title> Página3 </title> </head> <body bgcolor="gray"> frame derecha centro </body> </html>
En este apartado vamos ha estudiar las etiquetas y atributos que nos ayudarán a configurar los frames.
La etiqueta <frameset>.... </frameset>
Es gracias a esta etiqueta, donde definidos el número de frames que compondrán nuestra página.Atributos de <frameset>
col="x,y". Asignamos el número de frames verticales, en este caso dos frames, x e y. Donde x e y pueden ser pixels ("200,400"). Porcentaje ("20%,80%") o especificando un sólo frame y el otro en el porcentaje restante mediante el símbolo * ("250,*").
rows="x,y". Definimos el número de frames horizontales, en este caso dos frames. Donde x e y pueden ser pixels ("200,400"), porcentaje ("20%,80%") o especificando un sólo frame y el otro en el porcentaje restante mediante el símbolo * ("250,*").
frameborder="n". Define que se visualice el borde en los frames, donde n puede tomar los valores "yes","1","no","0".
framespacing="n". Valor del espacio entre frames en pixels. bordercolor="color". Definimos el color del borde separador, color asigna el color bien por medio de nombre predefinido "red" o por medio de un número heaxdecimal "#770033"
Ejemplo <html> <head> <title>Mi Pagina con Frames</title> </head> <frameset rows="20%,*"> < frame name="" src="izd.html" marginwidth="10" marginheight="10" scrolling="auto"> <frame name="" src="dcha.html" marginwidth="10" marginheight="10" scrolling="auto"> </frameset> </html>
La etiqueta <frame>
Define cada uno de los marcos que compondrán la página. Debemos de colocar la etiqueta <frame> entre <frameset> y </frameset>. Tendremos que poner tantas etiquetas <frame> como marcos queramos en nuestra página y tienen que estar definidos en cols y rows.Sus principales atributos son:
src="ruta del documento html". Indica el documento que se mostrará en el frame. Indicaremos la dirección, URL, del documento que debe mostrarse en la zona. Si no se pone este atributo el area reservada estará vacía.
name="nombre". Asigna un nombre al marco. es un atributo importante puesto que cuando queramos
cargar una página en un marco mediante un enlace, tendremos que especificar el nombre del marco.
Noresize. Este atributo no posee valores. Simplemente se coloca o no se coloca. Si lo insertamos impide que le frame se pueda redimensionar. Si no lo ponemos el marco se podrá redimensionar
scrolling="yes / no / auto". Asigna si el marco tendrá o no una barra de desplazamiento.
marginwidth="número de pixels". Indicaremos, en número de pixels, el tamaño de los márgenes izquierda y derecha.
marginheight="número de pixels". Indicaremos, en número de pixels, el tamaño de los márgenes superior e inferior.
<frame src="panel_titulo.html" scrolling="no"> <frame src="panel_menu.html" marginheight="50"> <frame src="panel_intro.html" name="texto"> En la zona superior, colocaremos el documento panel_titulo.html y no permitiremos barra de desplazamiento. En el área izquierda, destinaremos el documento panel_menu.html e indicamos un margen superior de 50 pixels. Por último, la derecha, destinaremos el documento panel_intro.html y la ponemos de nombre texto.
La etiqueta <noframes>
Esta etiqueta se utiliza para en el supuesto caso de que el navegador del usuario no soporte frames. Este mostrará el contenido entre estas etiquetas <noframes>...>/noframes>. En el caso de que el navegador soporte frames , este ignorará el contenido de esta etiqueta. Tenemos que señalar que esta etiqueta esta prácticamente en desuso, puesto que el 100% de los navegadores reconocen los frames.Un ejemplo de una página simple con frames sería:
<html>
<head>
<title>Mi Pagina con Frames</title>
</head>
<frameset rows="25%,*" frameborder="yes"
bordercolor="blue">
<frame name="uno" src="uno.html" marginwidth="60" marginheight="40">
<frame name="dos" src="dos.html" marginwidth="30"
marginheight="30">
</frameset>
<noframes>
<body>
Lo sentimos. Su navegador no soporta frames. Pulse <a href="noframes.html">no frames</a> para acceder a una pagina sinframes.
</body>
</noframes>
<html>
Esta ocasión se produce cuando estamos interesados en que al pulsar sobre un enlace este se abra en el marco (recuadro o panel) que nos interese.
Para conseguir esto , deberemos de insertar en la etiqueta <a> el atributo target="nombre_del_frame_donde_queremos_abrir_el_documento", que tendrá como objetivo el frame donde queremos que se abra.
Ejemplo:
<html>
<head>
<title>Página Con Marcos</title>
</head>
<frameset cols="20%, 80%"<
<frame src="pagina1.html" name="frame_izd"> </frame>
<frame src="pagina2.html" name="frame_dcha"> </frame>
<noframes<
<body<
Lo sentimos su navegador no soporta frames
</body<
</noframes>
</frameset>
</html<
En el frame de la izquierda se muestrará la pagina_1.html.Pensemos que queremos que el marco derecho se muestre la pagina_3.html al pulsar en un enlace.
Este enlace deberá de ser :
<a href="pagina_3.html" target="frame_dcha"> pagina 3</a>
El atributo target
El atributo target="nombre del marco de destino, _top / _blank/ _self / _parent"._top: muestra el documento enlazado ocupando toda la ventana del navegador. Sale de los frames.
_blank: abre un ventana nueva en el navegador(sin frames), en la cual carga el fichero.
_self : carga el documento en le marco desde donde pulsamos el enlace. Es la opción por defecto.
_parent: carga el documento en el frame anterior al que contine el enlace "padre". En caso de no haber lo muestra en una ventana completa.
<a href="http://www.innovanetworks.com" target="_top">
ir a Innova Networks
</a>
Hasta el momento, hemos visto características del HTML que permiten al usuario visualizar las diferentes
páginas Web con su contenido es decir el usuario se limita simplemente ha recibir información no
tiene la
posibilidad de interactuar con el sitio o autor Web. Los Formularios nos dan la
posibilidad comunicarnos
con el sitio web. Estos formularios se componen de tantos campos como queramos obtener. Una vez que los
datos han sido enviados a la URL estos serán procesados. Un ejemplo de esto son las encuestas online,
formularios de proceso de pedido, etc..
Empleando HTML solamente podremos enviar el formulario.
Para procesarlo tendremos que emplear un programas
especiales llamados CGI (Common Gateway Interface), estos programas los podemos encontrar en bastantes servidores,
si nuestra páginas están alojados en un servidor que no dispone de esta característica,
podremos encontrar en
otros servidores que nos ofrezcan este servicio. También es posible procesar los datos enviados por los
formularios a través de lenguajes como PHP o ASP.
La etiqueta <form>...</form>
Una vez dicho todo esto, no hay que olvidar que un formulario sigue siendo código HTML. Para iniciar un formulario utilizaremos la etiqueta <form>...</form>, englobando esta etiqueta todos los campos que pertenecen al formulario.La etiqueta <form>, deberá de obligatoriamente ir con los siguientes atributos:
- action="pepe@hotmail.com / cgi-bin/ encuesta ", definimos la acción que llevará a
cabo el formulario.
(lo enviamos a una dirección de correo URL mailto, o lo enviamos a un CGI)
- method="get / post" indicamos el método de transferencia de las variables que componen dicho
formulario.
Usando el método get, los datos se envían a través de la barra de direcciones, añadidos a la url especificada en el atributo action.
por ejemplo: http://www.encuentas?formulario_54a=encuesta_1
Este método tiene varias limitaciones:
- la longitud de la infomación transmitida esta limitada a 256 caracteres.
- deben usarse únicamente caracteres ascii
veamos ahora el atributo opcional y solamente se puede emplear cuando si hemos elegido el método post (method="post").
- enctype="text/plain", Especifica el sistema de encriptación. Por defecto, tiene el sistema MIME.
Si queremos
enviar el formulario sin ningún tipo de encriptación le daremos el valor "text/plain".
Si queremos enviar el formulario por correo electrónico, el valor de enctype deberá ser "text/plain". De esta manera enviamos el formulario y su contenido como texto plano formando parte del email.
Sin embargo si el destino del formulario es un programa que lo procese no incluiremos enctype dentro de la etiqueta form, así enctype tendrá su valor por defecto.
- la longitud de la infomación transmitida esta limitada a 256 caracteres.
<form action="mailto:direccion@correo.com (o nombre del programa CGI)" method="post" enctype="text/plain"> Entre esta etiqueta y su cierre deberemos de colocar el resto de etiquetas que componen el formulario.
ejemplos
- http://www.ibiblio.org/pub/linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x4095.html
- http://www.psicobyte.com/html/curso/html9.html
- https://tomatoma.wordpress.com/manual-de-html/tema-12-marcos-frames/
Las funciones de edición visual
de Dreamweaver CS4 permiten agregar rápidamente diseño y
funcionalidad a las páginas, sin la necesidad de programar manualmente
el código HTML.
