Curso completo de HTML - Creación del documento de definición de frames (I)
(126 opiniones)
Curso gratis de
Jorge Ferrer, Víctor García y Rodrigo García - 23 de Febrero de 2006
La estructura del documento de definición de frames es parecida a la estructura de las páginas creadas hasta ahora. La principal diferencia será que este documento no tendrá contenido y por tanto no debe usarse la etiqueta BODY. A cambio ha de usarse una nueva etiqueta: FRAMESET. Esta será la etiqueta clave en la creación de los frames. La estructura básica del documento de definición será por tanto la que observamos en la figura 8.8:
Figura 8.8. La estructura de las páginas con frames es diferente a las que no tienen. La principal diferencia es la sustitución de BODY por FRAMESET.
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.
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.
División en columnas
Para crear una página Web formada por varios frames que dividen la ventana del navegador en columnas usamos el atributo COLS de la etiqueta FRAMESET. Este atributo toma como valores separados por comas la anchura de los diferentes frames:
<FRAMESET COLS="ancho_col1, ancho_col2, ...">
|
Existen diversas formas de indicar el ancho de las columnas, una de ellas es usando porcentajes. Con este método podríamos dividir la ventana en dos columnas usando el siguiente código:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS="20%,80%">
</FRAMESET>
</HTML>
|
En la que estamos diciendo que la primera columna (la de la izquierda) ocupará el 20% del ancho de la ventana del navegador y la segunda ocupará el 80% (ver figura 8.9).
Figura 8.9. Como vemos la ventana del navegador ha quedado dividida en dos columnas con un ancho del 20% y del 80% del ancho total de la ventana.
|
Si el lector decide probar el ejemplo anterior probablemente no obtenga el resultado deseado en su navegador. Esto es así porque por ahora sólo hemos dicho que queremos que la ventana del navegador se divida en dos columnas pero para indicar que serán frames (lo cual es necesario para obtener el resultado de la figura 8.9) será necesario añadir algo más de código que veremos un poco más adelante. |
Si quisiéramos dividir la ventana en 5 columnas simplemente deberíamos especificar cinco valores separados por comas, por ejemplo:
<FRAMESET COLS="10%,50%,15%,20%,5%">
|
Por supuesto la suma de todos los porcentajes debe ser igual a 100.
|
El lenguaje HTML no fija ningún límite en el número de filas, columnas o frames en general en que puede dividirse una página. Sin embargo no es recomendable crear más de 4 frames en total, porque si no el espacio dedicado a cada uno de ellos será muy pequeño. Debemos recordar que muchos de los navegantes verán nuestras páginas con un monitor de 14 pulgadas y una resolución de 640x480. |
El método de especificar los tamaños de las columnas en porcentajes es sencillo de entender, sin embargo no siempre es útil. Por ello existen otros métodos que es importante comentar.
Uno de ellos consiste en especificar el ancho de las columnas en su tamaño absoluto en pixeles directamente. Sin embargo existe un problema: existen varias resoluciones de pantalla distintas y sería muy extraño que todos los navegantes que visiten nuestras páginas tengan una misma anchura de pantalla. Por esta razón no podemos saber cuál será el ancho total de la ventana del navegador y esto sería imprescindible para poder indicar el ancho de las columnas en pixeles. Para solucionar este problema Netscape invento el asterisco (*). Cuando se pone un asterisco como ancho de una columna estamos indicando al navegador que use todo el espacio sobrante para ese frame. Por ejemplo si escribimos:
<FRAMESET COLS="100,300,*">
|
se crearán tres columnas, la primera de 100 pixeles, la segunda de 300 y la tercera ocupará todo el espacio que reste y que dependerá del tamaño de la ventana del navegador con el que se visualicen las páginas. 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 200-240 pixeles. Si tiene una configuración de 800x600 el ancho será 760-800 pixeles y por tanto la tercera columna ocuparía en este caso 360-400 pixeles de ancho. Esta es la resolución que hemos usado para obtener la figura 8.8.
Figura 8.10. Las dos primeras columnas ocupan un ancho absoluto de 100 y 300 pixeles. La tercera al haber usado el asterisco ocupará el resto, que en este ejemplo son 372 pixeles.
Estas son las dos configuraciones más extendidas y las que por tanto debemos tener en cuenta. Si queremos cuidar mucho estos detalles debemos tener en cuenta las configuraciones de 1024x800 o mayores y el hecho de que los usuarios pueden cambiar el tamaño de la ventana del navegador a su antojo. Sin embargo, por lo general, no es en absoluto necesario llegar hasta esos extremos de cuidado.
El siguiente método para especificar el ancho de las columnas consiste en combinar todos los anteriores. La mejor forma de repasarlos es estudiando unos cuantos ejemplos. Para ellos vamos a suponer un navegador de 800 pixeles de ancho:
-
<FRAMESET COLS="*,*"> : Al usar dos veces el asterisco se divide el resto entre las dos columnas a partes iguales. Es decir, cada una ocupará la mitad de la ventana del navegador (unos 400 pixeles cada una). Este ejemplo es idéntico a usar < FRAMESET COLS="50%,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.
Algunos de estos ejemplos requieren algún tiempo de práctica. En caso de tener alguna dificultad entendiendo alguno de ellos es mejor seguir practicando con frames usando los métodos algo menos complejos. Una vez hayamos adquirido más práctica trabajando con frames podremos volver sobre estos ejemplos y para practicar con ellos.
-
<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*".
-
<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:
Figura 8.11. En esta ocasión vemos un ejemplo del uso de FRAMESET combinando los distintos modos de indicar el tamaño y el ancho resultante de cada uno para una ventana con 800 pixeles de ancho.
Los tamaños absolutos deben usarse sólo en ocasiones que realmente lo requieran y siempre que los utilicemos debe haber al menos una de las otras columnas con un tamaño definido usando un asterisco (*).
- 1 - Introducción al lenguaje HTML
- 2 - Primeros pasos con HTML
- 3 - Parrafos en HTML
- 4 - Cómo insertar imagenes en una pagina
- 5 - Cómo crear enlaces hipertexto
- 6 - PRÁCTICA 1: La pagina web de "La chistera"
- 7 - Anclas (I)
- 8 - Anclas (II)
- 9 - Formato de texto
- 10 - La etiqueta FONT
- 11 - Texto preformateado
- 12 - Acentos y otros caracteres especiales
- 13 - Listas en HTML (I)
- 14 - Listas en HTML (II)
- 15 - Comentarios en HTML
- 16 - Practica 2: Un sitio web completo
- 17 - Usando color en el WWW
- 18 - Cómo cambiar la apariencia de una pagina
- 19 - Imagenes en las paginas Web (I)
- 20 - Imagenes en las paginas Web (II)
- 21 - Imagenes en las paginas Web (III)
- 22 - Cómo cambiar la apariencia de las imagenes
- 23 - Alternativas a las imagenes inline (I)
- 24 - Alternativas a las imagenes inline (II)
- 25 - Mejoras en las imagenes
- 26 - Cómo se crea una tabla HTML (I)
- 27 - Cómo se crea una tabla HTML (II)
- 28 - Alineamiento de tablas
- 29 - Alineamiento de celdas y filas
- 30 - Ancho de tablas y celdas
- 31 - Celdas que abarcan varias filas o columnas
- 32 - Margenes y separación de celdas
- 33 - Anidamiento
- 34 - Practica 3 - Tabla de Datos
- 35 - Practica 4 - Pagina Web con una estructura creada con tablas
- 36 - Practica 4 - Pagina Web con una estructura creada con tablas
- 37 - Practica 4 - Pagina Web con una estructura creada con tablas
- 38 - Estandares y extensiones del lenguaje HTML (I)
- 39 - Estandares y extensiones del lenguaje HTML (II)
- 40 - Extensiones a las listas (I)
- 41 - Extensiones a las listas (II)
- 42 - Alineamiento
- 43 - La etiqueta META
- 44 - Otras etiquetas del lenguaje HTML 3.2
- 45 - El atributo TARGET
- 46 - La etiqueta BASE
- 47 - Creación de paginas con frames
- 48 - Creación del documento de definición de frames (I)
- 49 - Creación del documento de definición de frames (II)
- 50 - Pagina completa con frames
- 51 - Atributos de la etiqueta FRAME
- 52 - Compatibilidad: NOFRAME
- 53 - Anidamiento de framesets
- 54 - Bordes de los frames
- 55 - Valores especiales del atributo TARGET
- 56 - Practica 5: Web de Los Alpes con frames
- 57 - Frames flotantes
- 58 - Sonido vídeo y otros ficheros externos
- 59 - Multimedia Inline (I)
- 60 - Multimedia Inline (I)
- 61 - Plug-ins y objetos incrustados
- 62 - Java en las Paginas Web
- 63 - Inserción de Applets Java (I)
- 64 - Inserción de Applets Java (II)
- 65 - Inserción de Applets Java (III)
- 66 - ActiveX, la tecnología del futuro
- 67 - Formularios en HTML
- 68 - Controles de Formularios (I)
- 69 - Controles de Formularios (II)
- 70 - Controles de Formularios (III)
- 71 - Controles de Formularios (IV)
- 72 - Otros controles
- 73 - Practica 6-Formulario para "Los Alpes"
- 74 - COMO USAR LOS DATOS DE UN FORMULARIO
- 75 - Envío De Ficheros Usando Formularios
|
Wikis relacionados con 'Curso completo de HTML - Creación del documento de definición de frames (I)'
