Sei sulla pagina 1di 4

3.

18 Creando un ejemplo con frames


Con tu Block de Notas de Microsoft Windows vamos a copiar el siguiente código
HTML en un documento nuevo al que vamos a "guardar" con el nombre de
frames.html

<HTML>
<HEAD>

<TITLE>Pagina Web con FRAMES por: JHM </TITLE>


</HEAD>

<FRAMESET COLS="25%, 75%">


<FRAME SRC="izquierda.html">
<FRAME SRC="derecha.html" NAME="principal">
</FRAMESET>

</HTML>

Donde:
<FRAMESET COLS="25%, 75%"> Determina el tamaño de cada división o
Columna (COLS=) hecha en la ventana de tu navegador. 25% para la parte
izquierda y 75% para la derecha.

Cada <FRAME SRC=> determina qué documento mostrará cada columna. En el


ejemplo, la parte izquierda mostrará el documento "izquierda.html", y el derecho,
"derecha1.html".

NAME="principal" Significa que el marco de la derecha de la pantalla va a ser


identificado con el nombre "principal".

Con el Block de Notas de Microsoft Windows vamos a copiar el siguiente código


HTML en un documento nuevo al que vamos a "guardar" con el nombre de
izquierda.html

<HTML>
<HEAD>
<TITLE> Índice de contenido </TITLE>
</HEAD>
<BODY>

<B> Opciones: </B>


<OL>
<LI> <A HREF="derecha1.html" TARGET="principal"> 1er. Pagina </A>
<LI> <A HREF="derecha2.html" TARGET="principal"> 2a. Pagina </A>
<LI> <A HREF="derecha3.html" TARGET="principal"> 3er. Pagina </A>
</OL>

</BODY>
</HTML>

Para entender como funciona cada <A HREF> sirve para establecer el llamado a
otro documento html mediante un vinculo o link.

Los documentos señalados desde la parte izquierda aparecerán en el sector derecho


según se aplique el respectivo link.

Copia y guarda los siguientes códigos HTML:

derecha1.html

<HTML>
<HEAD>
<TITLE> Pagina 1 </TITLE>
</HEAD>

<BODY>
<CENTER>
<B> Negocios </B>
</CENTER>
<BR>
<P>
"Usted debe tener su propio NEGOCIO, nunca
se hará rico trabajando para otro".
</P>
Jean Paul Getty
</BODY>
</HTML>

derecha2.html

<HTML>
<HEAD>
<TITLE> Pagina 2 </TITLE>
</HEAD>

<BODY>
<CENTER>
<B> Éxito y fracaso </B>
</CENTER>
<BR>
<P>
"No experimentaras el fracaso si
tu determinación por alcanzar el
Éxito es lo suficientemente poderosa".
</P>
O.G. Mandino

</BODY>
</HTML>

derecha3.html

<HTML>
<HEAD>
<TITLE> Pagina 3 </TITLE>
</HEAD>

<BODY>
<CENTER>
<B> Suerte, Futuro, Destino, Circunstancias </B>
</CENTER>
<BR>
<P>
"Suerte?, no existe tal cosa.. El éxito depende de
un plan perfectamente ejecutado"
</P>

<P>
"Hasta esta fecha te des cuenta o no, el tipo de
tus pensamientos y actitudes se ha materializado
en lo que eres."
</P>

<P>
"Nadie planea su fracaso pero si puede planear su éxito"
</P>

<P>
La mejor forma de predecir el futuro es creándolo"
</P>
</BODY>
</HTML>

frames.html es el documento principal o inicial de este ejemplo de pagina web con


frames. Los archivos izquierda.html, derecha1.html, derecha2.html y
derecha3.html forman el grupo de documentos complementarios de este diseño.

Nota Importante: Es necesario indicar que llegado el momento de publicar


nuestra pagina web en la Internet el nombre del archivo .html principal deberá ser
index.html debido a que se trata de un estandar, para identificar el documento
principal de la publicación.

<html>
<head>
<title>Mi p&aacute;gina web</title>
<head>
<frameset rows="20%,*" border="0" frameborder="0" framespacing="0">
<frame src="encabezado.html">
<frameset cols="20%,*,5%" border="0" frameborder="0" framespacing="0">
<frame src="menu.html">
<frame src="cuerpo.html" name="contenedor">
</frameset>
</frameset>
</html>

Potrebbero piacerti anche