HTML - Marcos

Los marcos o frames se utilizan para mostrar más de un documentos HTML en una sola ventana. Eso significa que tendrá una pagina sin contenido, que tendrá la función de decir al navegador que paginas tiene que mostrar. Con el uso masivo de PHP y CSS, esta técnica se esta utilizado cada vez menos.

HTML - Marcos, uso general

Generalmente, los marcos son utilizados para visualizar un menú en una parte y el contenido en otra parte. Cuando alguien hace click desde el menú, otra página se abrirá en la parte del contenido, sin cargar de nuevo toda la pagina.

Vamos a ejemplificar esto usando el siguiente código:

html<html>
	<head></head>

	<frameset cols="30%,*">
		<frame src="menu.html">
		<frame src="content.html">
	</frameset>

</html>
  • frameset - la etiqueta que determina las características del marco. Los marcos individuales serán definidos por ella.
  • frameset cols="#%, *" - Cols establece la altura que cada marco tendrá. En el ejemplo anterior establecimos que el primer marco (menú) ocupará el 30% del area mostrada, y usamos el signo " * " para indicarle al buscador que el resto en el resto de la página será el contenido mostrado.
  • frame src="" - la dirección de los archivos que será visualizada como menú y contenido.

HTML - Marco - Añadir un baner o un título

Usa el siguiente código:
html<html>
	<head></head>
	
	<frameset rows="20%,*">
		<frame src="title.html">
		<frameset cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

frameset rows="#%, *" - "rows" determina la altura de cada marco que será visualizado. En el ejemplo anterior escogimos que el primer marco sería del 20%, y el espacio sobrante será dividido entre menu.html y content.html

HTML - Marcos - Bordes y Espacios

Debes haber notado que entre los marcos hay algunas lineas grises que la mayoría de las veces no son deseadas. Borrarlas es posible usando las etiquetas de frameborder y framespacing. Estos atributos serán introducidos bajo la etiqueta frameset.

**Nota: Frameset y frameborder son el mismo atributo. Hay algunos buscadores que no los reconocen a ambos, tan sólo a uno. Con esto queremos decir, que lo mejor sería utilizarlos ambos para mayor seguridad.

  • frameborder"#" - El valor 0 significa que no habrá ningún borde.
  • border="#" - modifica el grosor del borde (usado antiguamente por Netscape y algunos otros)
  • framespacing="#" - modifica el grosor del borde (usado por Internet Explorer)

Aquí hay un ejemplo prático:

html<html>
	<head></head>

	<frameset border="0" frameborder="0" framespacing="0" rows="20%,*">
		<frame src="title.html">
		<frameset border="0" frameborder="0" framespacing="0" cols="30%,*">
			<frame src="menu.html">
			<frame src="content.html">
		</frameset>
	</frameset>
</html>

HTML - "Frame name" y "Frame target"

Para mantener el menú en su posición actual y cuando demos click en la página de contacto, por ejemplo, abrirla en el lugar del contenido de la página, nombraremos cada marco y especificaremos el lugar donde se abrirá utilizando la etiqueta base target.

Aquí está nuestro código para la página:

html<html>
	<head>
		<base target="content">
	</head>

	<frameset rows="20%,*">
		<frame name="title" src="title.html">
		<frameset cols="30%,*">
			<frame name="menu" src="menu.html">
			<name="content" src="content.html">	
		</frameset>
	</frameset>
</html>

Noresize y scrolling

Puedes continuar personalizando los marcos usando el noresize y el scrolling

html<html>
	<head></head>
	
	<frameset border="2" frameborder="1" framespacing="2" rows="20%,*">
		<frame src="title.html" noresize scrolling="no">
		<frameset border="4" frameborder="1" framespacing="4" cols="30%,*">
			<frame src="menu.html" scrolling="auto" noresize>
			<frame src="content.html" scrolling="yes" noresize>
		</frameset>
	</frameset>
</html>
  • no resize - no deja que el marco cambie su dimensión basándose en la pantalla del usuario.
  • scrolling="(yes/no)" - permite, o no permite, usar el desplazamiento en un marco.