Ejemplo de Frames En HTML
Los frames en HTML son una forma de dividir la ventana del navegador en múltiples secciones, cada una de las cuales puede cargar y mostrar un documento HTML diferente. En este artículo veremos ejemplos prácticos de frames en HTML.
Aunque su uso ha disminuido en los últimos años debido a la adopción de técnicas más modernas y flexibles, como CSS y JavaScript, aún pueden encontrarse en algunos sitios web, especialmente aquellos creados en la década de 1990 y principios de la de 2000.
Contenido del artículo
- • ¿Cómo funcionan los frames o marcos en HTML?
- • Cómo Hacer Frames en HTML
- • Atributos de Frame en HTML
- • Ejemplo de uso:
- • Cómo enlazar a un frame específico
- • Ejemplo para dividir la pantalla en dos columnas con frames
- • Ejemplo para dividir la pantalla en filas y columnas
- • Ejemplo de navegación superior con frames en HTML
¿Cómo funcionan los frames o marcos en HTML?
Los frames se componen de dos elementos:
Frameset: El elemento
<frameset>se utiliza para dividir la ventana del navegador en secciones rectangulares, cada una de las cuales puede cargar su propio documento HTML.Frame: El elemento
<frame>se utiliza dentro de un<frameset>para definir cada una de las secciones individuales. Y manda a llamar algún otro documento que se carga dentro del frameset.
- Sigue con: Ejemplos de iFrames
Cómo Hacer Frames en HTML
Para crear un documento HTML con frames se siguen dos pasos muy sencillos:
1. Crear un documento HTML que defina la estructura de los frames utilizando el elemento <frameset>. Por ejemplo:
<!-- Archivo 1: frameset.html --><html> <head> <title>Mi Página con Frames</title> </head> <frameset cols="50%,50%"> <frame src="frame1.html"> <frame src="frame2.html"> </frameset></html>
2. Crear uno o más documentos HTML que se cargarán dentro de los frames.
<!-- Archivo 2: frame1.html --><html> <body> <h1>Este es el Frame 1</h1> </body></html>
<!-- Archivo 3: frame2.html --><html> <body> <h1>Este es el Frame 2</h1> </body></html>
Atributos de Frame en HTML
Algunos de los atributos más importantes del elemento <frame> son:
scrolling:Este atributo se utiliza para controlar la aparición de las barras de desplazamiento en el frame. Puede tener los valores "auto", "yes" o "no".noresize:Este atributo se utiliza para evitar que el usuario cambie el tamaño del frame.name:Este atributo se utiliza para dar un nombre al frame, lo que puede ser útil para referenciar el frame en los enlaces y scripts.src:Este atributo se utiliza para especificar la URL del documento HTML que se cargará en el frame.frameborder: Este atributo especifica si los marcos deben tener bordes o no. Los valores posibles son "1" (para mostrar bordes) o "0" (para no mostrar bordes). Por ejemplo,<frameset frameborder="1">.border: Este atributo define el ancho del borde entre los marcos en píxeles. Por ejemplo,<frameset border="5">creará un borde de 5 píxeles entre los marcos.framespacing: Este atributo es similar aborder. También define el espacio entre los marcos en píxeles. Por ejemplo,<frameset framespacing="10">establecerá un espacio de 10 píxeles entre los marcos.bordercolor: Este atributo permite cambiar el color del borde de los marcos. Se puede especificar cualquier color válido. Por ejemplo,<frameset bordercolor="#FF0000">hará que el borde de los marcos sea rojo.
Ejemplo de uso:
<html><head> <title>Página con Frames</title></head><frameset cols="20%,*" frameborder="1" border="5" framespacing="10" bordercolor="#FF0000"> <frame src="navegacion.html" name="navegacion"> <frame src="contenido.html" name="contenido"></frameset></html>
Cómo enlazar a un frame específico
Podemos hacer que un enlace se abra en un frame específico utilizando el atributo target en la etiqueta <a>. El valor de target debería ser el mismo que el nombre del frame (name atributo del <frame>). Por ejemplo:
<frameset cols="25%,75%"> <frame src="menu.html" name="menu"> <frame src="contenido.html" name="contenido"></frameset>
<!-- En menu.html --><a href="pagina1.html" target="contenido">Página 1</a><a href="pagina2.html" target="contenido">Página 2</a>
En este caso, al hacer clic en los enlaces "Página 1" o "Página 2" en el frame de menú, la página correspondiente se cargará en el frame "contenido".
Cómo romper los frames
Si quieres que un enlace abra una página fuera del conjunto de frames (es decir, que reemplace todo el conjunto de frames), puedes usar el valor especial _top para el atributo target. Por ejemplo:
<!-- En menu.html --><a href="paginaFueraDeFrames.html" target="_top">Salir de los frames</a>
Al hacer clic en "Salir de los frames", el navegador cargará "paginaFueraDeFrames.html" en la ventana completa, reemplazando el conjunto de frames.
Ejemplo para dividir la pantalla en dos columnas con frames
Este ejemplo divide la pantalla en dos columnas de igual tamaño. Cada columna carga una página HTML diferente.
<frameset cols="50%,50%"> <frame src="pagina1.html"> <frame src="pagina2.html"></frameset>
Ejemplo para crear una columna lateral de navegación con frames
Este ejemplo crea una columna lateral que ocupa el 25% de la pantalla y se utiliza para la navegación. El resto de la pantalla se utiliza para mostrar el contenido principal.
<frameset cols="25%,75%"> <frame src="navegacion.html"> <frame src="contenido.html"></frameset>
Ejemplo para dividir la pantalla en filas y columnas
Este ejemplo más complejo divide la pantalla en cuatro partes iguales. Cada sección carga una página HTML diferente.
<frameset rows="50%,50%"> <frameset cols="50%,50%"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset> <frameset cols="50%,50%"> <frame src="pagina3.html"> <frame src="pagina4.html"> </frameset></frameset>
Ejemplo de navegación superior con frames en HTML
Crea un archivo que define dos marcos en una fila. Los dos archivos que define son: uno para la navegación (que ocupa el 20% del ancho de la ventana) y uno para el contenido principal (que ocupa el resto del ancho de la ventana).
<html><head> <title>Página con Frames</title></head><frameset cols="20%,*"> <frame src="navegacion.html" name="navegacion"> <frame src="contenido.html" name="contenido"></frameset></html>
Luego, necesitarías crear los archivos "navegacion.html" y "contenido.html". Por ejemplo, "navegacion.html" podría lucir así:
<html><body> <a href="pagina1.html" target="contenido">Página 1</a><br> <a href="pagina2.html" target="contenido">Página 2</a><br> <a href="pagina3.html" target="contenido">Página 3</a><br></body></html>
Y "contenido.html" podría ser algo como esto:
<html><body> <h1>Bienvenido a nuestra página web!</h1> <p>Aquí irá el contenido de la página seleccionada en la navegación.</p></body></html>
En este caso, cuando haces clic en un enlace en "navegacion.html", la página correspondiente se carga en el marco "contenido".
¿Cómo citar? & Del Moral, M. (s.f.). Ejemplo de Frames En HTML.Ejemplo de. Recuperado el 31 de Agosto de 2023 de https://www.ejemplode.com/17-html/640-ejemplo_de_frames_en_html.html