PROGRAMACIÓN HTML I

SEMANA 8
Frames

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE
utilizarDOCUMENTO
los contenidos paraCONTIENE LAdeSEMANA
fines comerciales 8
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 8
ÍNDICE

FRAMES ............................................................................................................................................... 4
OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. CONJUNTO DE MARCOS (FRAMES) SENCILLOS ........................................................................... 5
2. CONJUNTO DE MARCOS EN COLUMNAS .................................................................................... 7
2.1. MARCOS EN FILAS Y COLUMNAS ........................................................................................ 7
2.2. MARCO INCRUSTADO.......................................................................................................... 8
2.3. COMBINAR CONJUNTOS DE MARCOS................................................................................. 9
2.4. OPCIONES DE MARCOS ..................................................................................................... 10
2.4.1. HIPERVÍNCULO PARA CARGAR UNA PÁGINA EN UN FRAME .................................... 10
2.5. AJUSTE DE TAMAÑO EN EJECUCIÓN ................................................................................. 11
COMENTARIO FINAL.......................................................................................................................... 12
REFERENCIAS........................................................................................................................................ 13

3
ESTE DOCUMENTO CONTIENE LA SEMANA 8
FRAMES

OBJETIVOS ESPECÍFICOS
 Comprender la relevancia de los marcos dentro de la estructura de una página web.
 Crear marcos dentro de la estructura de una página web.
 Aplicar las diversas funciones de los marcos al interior de una página web.

INTRODUCCIÓN
Esta semana seguiremos conociendo elementos de HTML que permitirán la creación de páginas
web acordes a lo que se espera.

Por tal motivo, esta semana se conocerá un elemento llamado frame. Partiendo del significado en
español de esta palabra, se puede decir que un frame no es más que un marco, y al hablar de
marco puede venir a la menta un rectángulo dentro del cual se colocan varios elementos; este
pensamiento no se aleja de la realidad, ya que estos elementos en HTML permiten la creación de
varias secciones dentro de las cuales se pueden incluir diversos elementos.

A continuación se aprenderá cómo funciona un marco y se verán ejemplos de estos para código
HTML.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 8
1. CONJUNTO DE MARCOS (FRAMES) SENCILLOS

Ferrer, García y García (s. f.) definen un marco como las divisiones que puede contener una página
web y donde se pueden diversos elementos.

Fuente: http://www.pcweb.es/manual_html/mostrar.php?opcion=Frames:_estructura

A su vez, Ferrer, García y García (óp. cit.) mencionan que en cada frame se cargará una página
distinta. Estos tienen sus propias barras de desplazamiento, de esta forma se podrán ocupar para
diseñar, por ejemplo, páginas iniciales de sitios web:

Fuente: http://ibiblio.org/pub/linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/img/fig8-19.png

5
ESTE DOCUMENTO CONTIENE LA SEMANA 8
Para comenzar la definición de frames, se debe crear la que será la “página maestra”, es decir la
página HTML que va a contener los frames. Esto permitirá establecer el diseño o la distribución
que se dará a los frames que se crearán. Además se debe contar con las páginas web que serán
desplegadas dentro de cada frame de la página maestra.

Fuente: http://ibiblio.org/pub/linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x3857.html

La estructura para la página maestra (es decir la que contiene los frames) en HTML para este
ejemplo es:

Fuente: http://ibiblio.org/pub/linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-html/x3865.html

6
ESTE DOCUMENTO CONTIENE LA SEMANA 8
Si se observa la imagen anterior, la primera diferencia con la estructura de una página HTML
normal es la ausencia del elemento <body>, el cual se reemplaza por el elemento <frameset> que
será el que permitirá definir el grupo de frames o marcos que serán contenidos en la página
maestra.

2. CONJUNTOS DE MARCOS EN COLUMNAS

A continuación se conocerá el manejo de marcos en filas y columnas y se verán ejemplos para

cada uno:

2.1. MARCOS EN FILAS Y COLUMNAS

Es posible presentar los marcos en columnas (divisiones verticales) o filas (divisiones horizontales)
en la ventana.

Para presentarlos en filas se usará el atributo “rows” en el elemento “frameset”, y si se desea

presentar en columnas se usará el atributo “cols”.

En el siguiente ejemplo se observará el uso de frames tanto para columnas como para filas:

COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera.

COLS=150,*,150 tres columnas, la primera y tercera de 150 píxeles, la segunda ocupa el resto.

ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

A continuación se presenta un ejemplo para frames en filas:

Fuente: material elaborado para esta asignatura.

7
ESTE DOCUMENTO CONTIENE LA SEMANA 8
Para frames en columnas, la visualización sería tal como se presenta a continuación:

Fuente: material elaborado para esta asignatura.

Los elementos que se pueden apreciar en la imagen anterior son los siguientes:

 Dentro del elemento <frameset> se encuentra el elemento <frame>. Existe un elemento

de este tipo en cada frame que se ha definido en el elemento <frameset>.
 Dentro del elemento <frame> se encuentra el atributo “src” (source=fuente=origen), que
indica la ubicación de la página que será cargada en dicho frame.
 Otro atributo que se puede ver es “marginwidth”, que especifica en píxeles o porcentaje el
margen horizontal, es decir, la distancia del límite del frame y su contenido.
 Luego se tiene el atributo “marginheight” para establecer el margen vertical, es decir, la
distancia del límite al contenido.
 El atributo “scrolling” con valores que pueden ser “yes/no/auto”, para especificar si el
frame presentará barras de desplazamiento o si el contenido sobrepasa al tamaño del
mismo.

2.2. MARCO INCRUSTADO

Es posible incrustar un marco dentro de una página mediante el uso del elemento <iframe>.

Este elemento tiene la siguiente sintaxis:

<iframe src="URL"></iframe>

8
ESTE DOCUMENTO CONTIENE LA SEMANA 8
Donde el atributo “scr” (source=fuente, origen) especifica la URL de la página que será cargada en
frame o marco.

Ejemplo:

Fuente: material elaborado para esta asignatura.

Mediante el uso de los atributos “widht” y “height”, se establece el ancho y el alto en píxeles para
el frame donde será desplegada o cargada la página especificada en el atributo “scr”.

2.3. COMBINAR CONJUNTOS DE MARCOS

Es posible combinar los conjuntos de marcos incrustando el elemento <frameset> dentro de otro,
guardando la cohesión de los mismos.

A continuación se presenta un ejemplo de esto:

Fuente: material elaborado para esta asignatura.

9
ESTE DOCUMENTO CONTIENE LA SEMANA 8
 2.4. OPCIONES DE MARCOS

En el material elaborado por Ferrer, García y García (s. f.) se observan otros atributos del elemento
<frame>. Estos son:

 NORESIZE: Este atributo impide que el marco pueda ser redimensionado por el visitante
arrastrando su borde. Si no se indica este atributo, el marco podrá ser redimensionado.
 BORDECOLOR= " COLOR ": sustituyendo color por el nombre del color en inglés o en
hexadecimal. Sirve para definir el color del borde del marco concreto al que se aplica.
 FRAMEBORDER= " 1 / 0 ": Si se ha establecido BORDECOLOR y su valor es 0, se
mostrará el borde sin efecto 3D en el marco (se percibe mejor en Explorer), y si es 1, sí se
mostrará este efecto. Si lo igualamos a cero se eliminará el borde con todos los marcos
contiguos que tengan también este valor igual a cero.

2.4.1. HIPERVÍNCULO PARA CARGAR UNA PÁGINA EN UN FRAME

A veces es necesario desplegar una página vinculada a un frame en particular de una página
maestra.

A continuación se muestra un ejemplo de esto:

Fuente: material elaborado para esta asignatura.

10
ESTE DOCUMENTO CONTIENE LA SEMANA 8
Se desea desplegar la página “ejemplo.html” en el frame denominado “principal”. Cabe destacar
que al crear el frame, el atributo “name” se ha utilizado para denominarlo de esta forma.

Entonces el hipervínculo (que puede ser parte de un menú situado en la página que desplegará en
el frame de arriba) debería ser creado de la siguiente forma:

<a href=" ejemplo.html" target="principal"> ver ejemplo</a>

Ferrer, García y García (s. f.) exponen que el atributo “target” puede contener otros valores, que
tendrán resultados sobre el frameset:

_blank: la página se abre en una página nueva distinta a la página maestra.

_self: la página se carga en el frame donde se sitúa el hipervínculo (valor por defecto).

_parent: el enlace se actualiza sobre su padre o sobre la ventana que se está trabajando, si
es que no hay un padre.

_top: la página se carga en modalidad de ventana completa, no tomando las definiciones

de frames que puedan existir.

2.5. AJUSTE DE TAMAÑO EN EJECUCIÓN

Al utilizar en el elemento frameset, se logra la distribución para los marcos en base a porcentajes,
para que estos puedan ajustarse a distintos tamaños de pantalla en forma automática, siendo el
100% el tamaño de dicha pantalla.

Fuente: material elaborado para esta asignatura.

11
ESTE DOCUMENTO CONTIENE LA SEMANA 8
COMENTARIO FINAL
Al finalizar la semana se conoció acerca del uso de frames en HTML. Al utilizar frames dentro de
páginas web será posible mostrar varias “secciones” dentro de la misma página, en las cuales
podrán publicarse diversos elementos de HTML.

Su uso no tiene mayor complejidad. Conociendo los atributos con los cuales se puede trabajar, así
como los elementos de HTML aprendidos hasta esta semana, será posible personalizar la página
web.

Esta semana se compone de un elemento de gran importancia para el diseño de páginas web:
utilizándolo junto con los otros estudiados hasta el momento, se le otorgará mayor funcionalidad
a la página que se esté creando.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 8
REFERENCIAS
Ferrer, J.; García, V. y García, R. (s. f.). Curso completo de HTML. Recuperado de:

http://es.tldp.org/Manuales-LuCAS/doc-curso-html/doc-curso-html.pdf

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2016). Frames. Programación HTML I. Semana 8.

13
ESTE DOCUMENTO CONTIENE LA SEMANA 8
 14
ESTE DOCUMENTO CONTIENE LA SEMANA 8