Scribd
Cargar
218 vistas3 páginas

Taller de Frames en HTML

Este documento proporciona instrucciones paso a paso para crear una página web con marcos (frames) utilizando HTML. Explica cómo dividir la ventana del navegador en dos columnas, agregar enlaces hipertextuales para que apunten a la columna derecha, y cambiar la disposición de las columnas a filas.

Cargado por

Ivan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
218 vistas3 páginas

Taller de Frames en HTML

Este documento proporciona instrucciones paso a paso para crear una página web con marcos (frames) utilizando HTML. Explica cómo dividir la ventana del navegador en dos columnas, agregar enlaces hipertextuales para que apunten a la columna derecha, y cambiar la disposición de las columnas a filas.

Cargado por

Ivan
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 3

TALLER FRAMES

1. Abra el bloc de notas


2. Escriba el siguiente código.
<Html>
<head>
<title> frames
</title>
</head>
<frameset cols="20%,80%">
<frame name="izquierdo" src="uno.html">
<frame name="derecho" src="dos.html">
</frameset>
</html>

3. Guarde el archivo con el nombre de frames.html


4. Pase a google chrome y abra el archivo. La ventana debe aparecer dividida en dos sin
información.

Al crear los frames utilizamos dos archivos (Uno.html y dos.html), como no los hemos creado por
eso no aparece nada de información. Entonces:
1. Pase al bloc de notas

2. En el menú archivo elija nuevo


3. Escriba el siguiente código
<Html>
<head>
<title> columna izquierda
</title>
<body bgcolor="blue">
</body>
</html>

4. Grabe el archivo con el nombre de uno.html


5. En el menú archivo elija nuevo.
6. Escriba el siguiente código
<Html>
<head>
<title>columna derecha
</title>
<body bgcolor="green">
</body>
</html>

7. Grabe el archivo con el nombre de dos.html


8. Pase a google chrome
9. Abra el archivo frames.html (ahora la ventana aparece dividida en dos: la columna izquierda
azul y la columna izquierda verde)
10. Pase al bloc de notas y abra el archivo frames.html borre el archivo uno.html y escriba
hipervínculos.html
<Html>
<head>
<title> frames
</title>
</head>
<frameset cols="20%,80%">
<frame name="izquierdo" src="hipervínculos.html">
<frame name="derecho" src="dos.html">
</frameset>
</html>
11. Guarde los cambios.
12. Pase a google chrome y de clic al botón actualizar. ( En la columna izquierda aparece ahora el
archivo de hipervínculos.)

13. De clic sobre cualquiera de los dos hipervínculos. (observe que aparece el archivo del vinculo
en la misma columna izquierda, de clic al botón atrás)

Necesitamos que al dar clic sobre el hipervínculo al lado izquierdo la información


aparezca al lado derecho entonces:
14. Pase al bloc de notas y abra el archivo hipervínculos.html agregue el código que haga falta
para que quede así:
<Html>
<head>
<title> hipervínculos
</title>
</head>
<body>
<body link="green" vlink="blue">
<p><a href="imágenes.html" target="derecho"> documento imágenes</a></p>
<p><a href="listas.html" target="derecho"> Numeración y viñetas</a></p>
</body>
</html>

Con el comando target estamos direccionando la información a la columna de la


derecha. Recuerde que cuando creamos el archivo frames. Html se utilizó el
comando frame name y se dio el nombre de izquierdo a la columna de la izquierda y
derecho a la columna de la derecha.

15. Guarde cambios.


16. Pase a google chrome y actualice.
17. De clic sobre el primer hipervínculo. (al lado derecho debe aparecer el contenido del archivo
imágenes.html)
18. Ahora de clic al segundo hipervínculo (al lado derecho aparece el contenido del archivo
listas.html)
19. Pase al bloc de notas y cambie target=”derecho” por target=”_blank”
20. Guarde los cambios.
21. Pase a google chrome y actualice. De clic al primer hipervínculo.
22. Pase al bloc de notas y cambie target=”_blank” por target =”_top”
23. Guarde los cambios.
24. Pase a google chrome y actualice. De clic al primer hipervínculo.

Target=”_ blank” hace que se abra una nueva copia del explorer, y el enlace se cargue en
ella.
Target=”top” hace que el enlace se cargue en una pantalla completa suprimiendo los
frames.

25. Pase al bloc de notas. Abra el archivo frames.html.


26. Cambie la palabra cols por rows.
27. Guarde cambios.
28. Pase a google chrome y actualice. (Ahora la pantalla está dividida en filas)

También podría gustarte