Etiquetas para el trabajo con Marcos Los marcos (frames) permiten dividir la pantalla en bloques de diferente tamaño, de modo que la información queda organizada de acuerdo con el gusto o las necesidades de quien diseñe la página Web.
Etiquetas para el trabajo con Marcos Una pantalla basada en marcos consta de varios documentos HTML, lo cual contrasta con las pantallas que hemos diseñado hasta el momento. Las páginas Web más simples hacen corresponder un solo documento HTML con la pantalla visualizada. Esta concepción se modifica con los marcos, ya que son necesarios varios documentos HTML para generar una pantalla en la ventana del navegador. Por ejemplo consideremos la siguiente figura.
Etiquetas para el trabajo con Marcos
Etiquetas para el trabajo con Marcos En el ejemplo anterior, cada zona es un marco. Para definir un marco es necesario disponer de una página HTML. Por este motivo, en la figura anterior se utilizan 3 documentos HTML para cada marco, además del documento HTML que define el conjunto de marcos
Atributo TARGET En particular nos interesa el atributo TARGET de la etiqueta <A> empleada para la gestión de hipervínculos. La sintaxis es la siguiente: TARGET=“nombre_de_la_ventana” El atributo TARGET le indica al navegador que debe presentar una nueva ventana cuyo nombre es “nombre_de_la_ventana”, y en cuyo interior se despliega la información señalada por el hipervínculo.
Atributo TARGET El nombre de la nueva ventana no debe de comenzar con el signo subrayado (_), debido a que este símbolo forma parte de ciertas palabras reservadas usadas con el comando TARGET. Un ejemplo de la utilización de este atributo es: <A HREF=“ventana2.html” TARGET=“ventana_dos”> Abrir </A>
Ejercicio: Cree los siguientes archivos HTML, como se muestra a continuación:
Ejercicio: A continuación cree el siguiente archivo HTML: La idea es que al click en el link abrir, se abra la página en otra venta, posteriormente al hacer click en cargar se abra sobre la ventana en el cual se cargo el link Abrir.
Atributo Base Es muy común que varios hipervínculos apunten a la misma página, en especial cuando se trabaja con marcos. Para esto, podemos utilizar el atributo <BASE>, ya que con éste, se pueden definir globalmente el destino de todos los hipervínculos de la página Web. En especial si se coloca el atributo <BASE> en la sección <HEAD>…</HEAD> del documento. En el siguiente ejemplo, los hipervínculos Productos y Servicios despliegan su contenido en la ventana “información”.
Ejemplo del atributo Base <HTML> <HEAD> <BASE TARGET=“información”> </HEAD> <BODY> <A HREF=“productos.html”> Productos</A> <A HREF=“servicios.html”> Servicios</A> <A HREF=“mantenimiento.html” TARGET=“mantenimiento>Mantenimiento</A> </BODY> </HTML>
Etiqueta <FRAMESET>…<FRAMESET> La etiqueta <FRAMESET> se utiliza para crear el documento de definición de marco. Es importante observar que esta etiqueta reemplaza a la etiqueta <BODY>, lo cual significa que ambas etiquetas son incompatibles. Un documento que contenga una etiqueta <FRAMESET> es un documento de definición de marcos, y no debe contener ninguna otra etiqueta de formato o hipervínculo, ni texto informativo de ninguna naturaleza.
Etiqueta <FRAMESET>…<FRAMESET> La etiqueta <FRAMESET> posee dos atributos esenciales, COLS y ROWS, utilizados para definir el número de marcos verticales (COLS) y el número de marcos horizontales (ROWS) que serán visualizados en la pantalla del navegador. El ancho de las columnas, o la altura de las filas se puede expresar de tres maneras diferentes: en píxeles, como porcentaje del ancho total, o con una asterisco (*). Cuando se usa el (*), el navegador asignará el ancho posible al marco especificado.
Etiqueta <FRAMESET>…<FRAMESET> <FRAMESET COLS=“80,50%,*”> La etiqueta mostrada crea una pantalla con tres marcos verticales, el primero de 80 píxeles, el segundo ocupa el 50% del ancho total de la ventana, y el último ocupa el espacio restante.
Etiqueta <FRAME> Una vez definido el conjunto básico de marcos, se requiere asociar un documento HTML con cada marco del documento de definición de marcos. Esto se consigue con la etiqueta <FRAME>, cuya sintaxis es la siguiente: <FRAME SRC=“URL del documento”>
Etiqueta <FRAME> Por cada marco definido con la etiqueta <FRAMESET> debe utilizar la correspondiente etiqueta <FRAME>. Para ilustrar el uso de estas etiquetas vamos a escribir un documento HTML que defina tres marcos horizontales, y en cada uno de ellos vamos a presentar el contenido de las páginas ventana1.html, ventana2.html y ventana3.html creadas anteriormente.
Ejemplo
Código del Ejemplo <HTML> <HEAD> <TITLE>Marcos </TITLE> </HEAD> <FRAMESET ROWS="50%,20%,30%"> <FRAME SRC="ventana1.html" SCROLLING="NO"> <FRAME SRC="ventana2.html" SCROLLING="NO"> <FRAME SRC="ventana3.html" SCROLLING="NO"> </FRAMESET> </HTML>
Atributos de la etiqueta Frame SCROLLING=“AUTO”. Es el valor predeterminado. Con este atributo se agregan barras de desplazamiento horizontal y vertical. SCROLLING=“NO”. Se desactivan las barras de desplazamiento del marco, tanto la horizontal como la vertical. NORESIZE. Con esta opción se impide que el usuario pueda modificar la posición del marco dentro de la pantalla. MARGINHEIGHT=píxeles. Permite ajustar el margen superior e inferior del marco dentro del documento. Su valor debe de darse en píxeles. MARGIINWIDTH=píxeles. Permite ajustar el margen superior e inferior del marco dentro del documento. Su valor debe de darse en píxeles. Los atributos FRAMEBORDER=YES | NO, y BORDERCOLOR=uncolor de la etiqueta FRAME determinan si un marco tiene o no borde y el color del mismo.
Atributos de la etiqueta Frame <NOFRAMES>… </NOFRAMES> Con esta etiqueta se garantiza que aquellos browser que no posean soporte para marcos, desplieguen una información descriptiva en relación con los marcos no visualizados.
Ejemplo <HTML> <HEAD> <TITLE> Ejemplo </TITLE> <FRAMESET ROWS=“20%,*”> <FRAME SRC=“menu.hml” NAME=“superior”> <FRAME SRC=“inicio.hml” NAME=“principal”> </HTML>
Ejemplo <HTML> <HEAD> <TITLE> Menu </TITLE> <BODY> <TABLE> <TR> <TD> <A HREF=“inicio.html” TARGET=“principal”>Inicio </A> </TD> <A HREF=“curriculum.html” TARGET=“principal”>Curriculum </A> <A HREF=“cursos.html” TARGET=“principal”>Cursos</A> </TR> </TABLE> </BODY> </HTML>
Ejercicio