Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Tema 4 Lenguaje HTML Parte 4
2
Marcos (frames)
3
TARGET Este atributo permite crear enlaces y su función es indicar el objetivo en el que se debe cargar la página. <A HREF="URL" TARGET="nombre_ventana"> ... </A>
4
Ejemplo de uso de target
5
La etiqueta BASE En los hipervínculos se puede utilizar la dirección relativa (se asume que el archivo al que se vincula está en la misma carpeta). <A HREF="pag.html"> ... </A> Una segunda forma para enlazar esta misma página es poniendo la dirección completa (URL). <A HREF="
6
<BASE HREF="http://www.tiendaonline.com/index.htm">
La dirección que es añadida a las direcciones relativas para obtener la dirección completa recibe el nombre de dirección base. La etiqueta BASE permitirá cambiar esa dirección base, pudiendo elegir cualquier dirección del WWW como base para todos los enlaces con direcciones relativas de la página. Esta etiqueta debe ser usada en la cabecera del documento (HEAD). <HEAD> <BASE HREF=" </HEAD> En los ejemplos vistos la dirección base coincidía con la dirección de la página actual. Las direcciones que pongamos como valor del atributo HREF de la etiqueta BASE deben ser siempre absolutas (completas). La dirección base afecta a todas aquellas etiquetas en las que debemos especificar una dirección y podemos hacerlo de forma relativa, como por ejemplo en las imágenes. Es necesaria en el uso de frames
7
Uso de frames Crear esta estructura
8
Documento de definición de frames
Para definir la estructura. En ella se observa claramente como la etiqueta FRAMESET sustituye a BODY. Se podría decir que estas dos etiquetas son exclusivas, cuando esté una no puede estar la otra.
9
División en columnas Se usará el atributo COLS de la etiqueta FRAMESET, que toma como valores separados por comas el ancho de los diferentes frames: <FRAMESET COLS="ancho_col1, ancho_col2, .."> Especificar el ancho en porcentajes No se tiene un límite, lo recomendable es tener máximo 4 columnas. <FRAMESET COLS="20%,80%"> El siguiente paso en la creación de nuestra página con frames será decidir cuantos queremos crear como serán. Aunque posteriormente veremos cómo se pueden crear divisiones tan complejas como queramos, por ahora crearemos páginas en las que la ventana del navegador está dividida en filas o en columnas.
10
División en columnas Especificar el ancho en pixeles
Se puede definir el ancho de las columnas en pixeles directamente. Ya que existen resoluciones de pantalla distintas se utiliza el * para que use todo el espacio sobrante para ese frame. <FRAMESET COLS="100,300,*"> Si el navegante usa una configuración de 640x480 es de esperar que la ventana de su navegador tenga un ancho entre 600 y 640 pixeles y la tercera columna tendría una anchura de pixeles. Si tiene una configuración de 800x600 el ancho será pixeles y por tanto la tercera columna ocuparía en este caso pixeles de ancho.
11
División en columnas Se pueden combinar los métodos:
<FRAMESET COLS="100,*,*"> <FRAMESET COLS="200,2*,*"> <FRAMESET COLS="100,50%,*"> <FRAMESET COLS="100,*,*"> : Divide la ventana en tres columnas. La primera de 100 pixeles y entre las otras dos divide a partes iguales el espacio sobrante (700 pixeles) con lo que (suponiendo el ancho total de 800 pixeles) cada una tendrá un ancho de 350 pixeles. FRAMESET COLS="200,2*,*">: La primera columna ocupará un tamaño absoluto de 200 pixeles. El resto (600 pixeles) es divido entre las dos siguientes columnas, pero ahora no será a partes iguales, sino que la columna central debe ser el doble que la columna izquierda (este detalle se indica anteponiendo un 2 al asterisco). Por tanto del espacio sobrante, dos tercios (que equivalen a 400 pixeles en este caso), serán para la columna central y un tercio (200 pixeles) será para la tercera. Si hubiésemos querido que una columna fuese el triple de la otra deberíamos haber usado el código COLS="200,3*, *". Y si quisiéramos una relación 4:5 no tendríamos más que escribir COLS="200,4*,5*". 4. <FRAMESET COLS="100,50%,*">: La primera columna ocupa 100 pixeles, la segunda la mitad del ancho de la pantalla (400 pixeles) y la tercera el resto, que en este caso será 300 pixeles. En la figura 8.11 podemos ver un ejemplo en el que se realiza esta división de columnas en un ordenador con configuración 800x600:
12
<FRAMESET COLS="100,50%,*">: La primera columna ocupa 100 pixeles, la segunda la mitad del ancho de la pantalla (400 pixeles) y la tercera el resto, que en este caso será 300 pixeles. En la figura 8.11 podemos ver un ejemplo en el que se realiza esta división de columnas en un ordenador con configuración 800x600:
13
División en filas Se utiliza el atributo ROWS.
<FRAMESET ROWS="alto_fila1, alto_fila2, ..."> El uso de tamaños relativos o del asterisco (*) es más usual. <FRAMESET ROWS="200,*,100"> <FRAMESET ROWS="15%,*,3*"> <FRAMESET ROWS="200,*,100">: Divide la ventana en tres filas: una superior de 200 pixeles en la que se podría poner un encabezado; una inferior de 100 pixeles en la que puede ponerse una coletilla o una barra de navegación; y una central que ocupa el espacio sobrante y donde se podría situar el contenido principal. 2. <FRAMESET ROWS="15%,*,3*">: Se divide la ventana en una primera fila que ocupa el 15% de la altura; la siguiente fila ocupará un cuarto del resto y la tercera tres cuartos.
14
División en columnas y filas
Los atributos COLS y ROWS pueden ser usados simultáneamente en una misma etiqueta FRAMESET. Cada una de las filas definidas por ROWS es subdividida en el número de columnas que indica COLS.
15
Ejemplo <FRAMESET COLS="*,*" ROWS="*,*">
16
La etiqueta FRAME Es usada para insertar el contenido en las filas o columnas. Debe ser usada en cada una de las divisiones creadas con el atributo SRC, que servirá para indicar el documento HTML donde se encuentre el contenido a insertar en esa división. Con el atributo NAME se dará un nombre al frame para poder referirse a él con el atributo TARGET. <FRAME SRC="docum.htm“ NAME="primer_frame"> Si posteriormente se va a crear un enlace a este frame desde otro de la misma página habrá que escribir: <A HREF="otro.htm“ TARGET="primer_frame">
17
Atributos de la etiqueta FRAME
SCROLLING: Este atributo controla la aparición o no de barras de desplazamiento. Los valores del atributo son: "auto": Es el valor por defecto y provoca que el navegador sólo inserte barras de desplazamiento si el contenido del frame ocupa más del espacio dedicado para él. "yes": Las barras de desplazamiento aparecerán siempre. "no": Las barras de desplazamiento no aparecerán nunca.
18
Atributos de la etiqueta FRAME
NORESIZE: este atributo evita rque el borde de ese frame pueda ser movido. Es necesario notar que este atributo no toma ningún valor. MARGINHEIGHT: Ajusta el margen superior que debe respetar el contenido de ese frame. El tamaño debe ser dado en pixeles. MARGINWIDTH: Ajusta el margen lateral que debe respetar el contenido del frame. El margen debe ser dado en pixeles. Por defecto los usuarios pueden mover los bordes de los frames situar el ratón sobre ellos y arrastrarlos.
19
Cambio de los bordes del marco
Atributo BORDERCOLOR. Permite definir el color del borde. Atributo FRAMEBORDER. Permite activar y desactivar los bordes (YES, NO). Ejemplo: <FRAME FRAMEBORDER=YES BORDERCOLOR=blue SRC=“derecha.html”>
20
Framesets más utilizados
21
Ejemplo Crear el documento de definición de frames.
Crear los archivos izquierdo.html y derecho.html
Presentaciones similares
