FRAMES

 EJEMPLO    http://bgmarzo2020.atwebpages.com/ 


Lo que estáis viendo es una página con marcos. En la izquierda hay una parte fija que la he llamado “índice” y a la derecha una parte más grande que la he llamado “principal”. Esta parte de la página cambia de color según pulse los enlaces del índice, es decir puede ser roja, verde o amarilla.

La página primera se tiene que llamar index.html (el navegador es lo que va a buscar, index.html). Como veis esta página no tiene “body” lo que se está viendo son dos páginas independientes, la página indice.html y principal.html. Por lo tanto, la página index.html contiene dos páginas independientes. A la zona de la derecha tengo que ponerle (luego explicaré el motivo) un nombre “name”, la llamo “principal”.

ndex.html

<html>

                        <frameset cols="15%,85%" frameborder="no">

                        <frame src="indice.html">

                        <frame src="principal.html" name="principal">

            </frameset>

</html>

 

La etiqueta <frameset cols="15%,85%" quiere decir que hay dos columnas y ocupan el 15 y 85 % respectivamente. Y no tiene borde la división, frameborder="no">

</frameset> Fin de la etiqueta.

 

 

 Tengo que crear las siguientes páginas:

1.- index.html (la de arriba)

2.- indice.html

3.- principal.html

4.- verde.html

5.- amarilla.html

 

Continúo con las más fáciles, verde.html y amarilla.html

 

<html>

 

<body bgcolor="green">

 

</body>

</html>

 

<html>

 

<body bgcolor="yellow">

 

</body>

</html>

 

principal.html

<html>

<body bgcolor="red">

</body>

</html>

 

Ya tengo 4 de las 5 páginas necesarias, me queda la más complicada, indice.html

<html>

<body bgcolor="white">

<h1><font color="red"><a href="principal.html"target="principal">ROJA</a></font></h1><br>

<h1><font color="red"><a href="verde.html"target="principal">VERDE</a></font></h1><br>

<h1><font color="red"><a href="amarilla.html"target="principal">AMARILLA</a></font></h1><br>

</body>

</html>

Vamos a ver el enlace que nos lleva a la página verde.html. Cuando pulsamos VERDE aparece la verde.html en el lado derecho que yo llamé previamente “principal” (el name de arriba). La etiqueta target (objetivo) específica dónde quiero que asome la página solicitada.