HTML: marcos

Los marcos HTML se utilizan para dividir la ventana de su navegador en varias secciones donde cada sección puede cargar un documento HTML separado. Una colección de marcos en la ventana del navegador se conoce como conjunto de marcos. La ventana está dividida en marcos de manera similar a las tablas organizadas: en filas y columnas.

Desventajas de los marcos

Hay algunos inconvenientes con el uso de marcos, por lo que nunca se recomienda usar marcos en sus páginas web:

Algunos dispositivos más pequeños no pueden hacer frente a los marcos a menudo porque su pantalla no es lo suficientemente grande para dividirse.
A veces, su página se mostrará de manera diferente en diferentes computadoras debido a la diferente resolución de pantalla.
Es posible que el botón de retroceso del navegador no funcione como espera el usuario.
Todavía hay pocos navegadores que no admitan la tecnología de marcos.

Crear marcos

Para usar marcos en una página, usamos la etiqueta <frameset> en lugar de la etiqueta <body>. La etiqueta <frameset> define cómo dividir la ventana en marcos. losrows atributo de la etiqueta <frameset> define marcos horizontales y colsatributo define marcos verticales. Cada marco se indica con la etiqueta <frame> y define qué documento HTML se abrirá en el marco.

Note- La etiqueta <frame> en desuso en HTML5. No utilice este elemento.

Ejemplo

A continuación se muestra el ejemplo para crear tres marcos horizontales:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

Esto producirá el siguiente resultado:

Ejemplo

Pongamos el ejemplo anterior de la siguiente manera, aquí reemplazamos el atributo de filas por columnas y cambiamos su ancho. Esto creará los tres marcos verticalmente:

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

Esto producirá el siguiente resultado:

Los atributos de etiqueta <frameset>

Los siguientes son atributos importantes de la etiqueta <frameset>:

No Señor	Atributo y descripción
1	cols Especifica cuántas columnas contiene el conjunto de marcos y el tamaño de cada columna. Puede especificar el ancho de cada columna de una de las cuatro formas: Valores absolutos en píxeles. Por ejemplo, para crear tres marcos verticales, use cols = "100, 500, 100" . Un porcentaje de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = "10%, 80%, 10%" . Usando un símbolo comodín. Por ejemplo, para crear tres marcos verticales, use cols = "10%, , 10%"* . En este caso, el comodín ocupa el resto de la ventana. Como anchos relativos de la ventana del navegador. Por ejemplo, para crear tres marcos verticales, use cols = "3 , 2 , 1 "* . Esta es una alternativa a los porcentajes. Puede utilizar anchos relativos de la ventana del navegador. Aquí la ventana se divide en sextos: la primera columna ocupa la mitad de la ventana, la segunda ocupa un tercio y la tercera ocupa un sexto.
2	rows Este atributo funciona igual que el atributo cols y toma los mismos valores, pero se usa para especificar las filas en el conjunto de marcos. Por ejemplo, para crear dos marcos horizontales, use filas = "10%, 90%" . Puede especificar la altura de cada fila de la misma manera que se explicó anteriormente para las columnas.
3	border Este atributo especifica el ancho del borde de cada fotograma en píxeles. Por ejemplo, border = "5". Un valor de cero significa que no hay borde.
4	frameborder Este atributo especifica si se debe mostrar un borde tridimensional entre los marcos. Este atributo toma el valor 1 (sí) o 0 (no). Por ejemplo, frameborder = "0" no especifica ningún borde.
5	framespacing Este atributo especifica la cantidad de espacio entre cuadros en un conjunto de cuadros. Esto puede tomar cualquier valor entero. Por ejemplo, framespacing = "10" significa que debe haber un espacio de 10 píxeles entre cada fotograma.

Los atributos de etiqueta <frame>

Los siguientes son los atributos importantes de la etiqueta <frame>:

No Señor	Atributo y descripción
1	src Este atributo se utiliza para dar el nombre del archivo que se debe cargar en el marco. Su valor puede ser cualquier URL. Por ejemplo, src = "/html/top_frame.htm" cargará un archivo HTML disponible en el directorio html.
2	name Este atributo le permite dar un nombre a un marco. Se utiliza para indicar en qué marco se debe cargar un documento. Esto es especialmente importante cuando desea crear enlaces en un marco que carguen páginas en otro marco, en cuyo caso el segundo marco necesita un nombre para identificarse como el destino del enlace.
3	frameborder Este atributo especifica si se muestran o no los bordes de ese marco; anula el valor dado en el atributo frameborder en la etiqueta <frameset> si se da uno, y esto puede tomar valores de 1 (sí) o 0 (no).
4	marginwidth Este atributo le permite especificar el ancho del espacio entre la izquierda y la derecha de los bordes del marco y el contenido del marco. El valor se da en píxeles. Por ejemplo, marginwidth = "10".
5	marginheight Este atributo le permite especificar la altura del espacio entre la parte superior e inferior de los bordes del marco y su contenido. El valor se da en píxeles. Por ejemplo, marginheight = "10".
6	noresize De forma predeterminada, puede cambiar el tamaño de cualquier marco haciendo clic y arrastrando los bordes de un marco. El atributo noresize evita que un usuario pueda cambiar el tamaño del marco. Por ejemplo, noresize = "noresize".
7	scrolling Este atributo controla la apariencia de las barras de desplazamiento que aparecen en el marco. Esto toma los valores "sí", "no" o "auto". Por ejemplo scrolling = "no" significa que no debería tener barras de desplazamiento.
8	longdesc Este atributo le permite proporcionar un enlace a otra página que contiene una descripción larga del contenido del marco. Por ejemplo, longdesc = "framedescription.htm"

Soporte del navegador para marcos

Si un usuario está usando un navegador antiguo o cualquier navegador que no admita marcos, entonces el elemento <noframes> debe mostrarse al usuario.

Por lo tanto, debe colocar un elemento <body> dentro del elemento <noframes> porque se supone que el elemento <frameset> reemplaza al elemento <body>, pero si un navegador no comprende el elemento <frameset>, entonces debería comprender qué hay dentro del <body> elemento que está contenido en un elemento <noframes>.

Puede poner un mensaje agradable para su usuario que tiene navegadores antiguos. Por ejemplo, ¡¡Lo siento !! su navegador no admite marcos. como se muestra en el ejemplo anterior.

Nombre del marco y atributos de destino

Uno de los usos más populares de los marcos es colocar barras de navegación en un marco y luego cargar las páginas principales en un marco separado.

Veamos el siguiente ejemplo donde un archivo test.htm tiene el siguiente código:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Aquí, hemos creado dos columnas para llenar con dos marcos. El primer marco tiene 200 píxeles de ancho y contendrá la barra de menú de navegación implementada pormenu.htmarchivo. La segunda columna llena el espacio restante y contendrá la parte principal de la página y está implementada pormain.htmarchivo. Para los tres enlaces disponibles en la barra de menú, hemos mencionado el marco de destino comomain_page, así que cada vez que haga clic en cualquiera de los enlaces en la barra de menú, el enlace disponible se abrirá en la página principal.

A continuación se muestra el contenido del archivo menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

A continuación se muestra el contenido del archivo main.htm:

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Cuando cargamos test.htm archivo, produce el siguiente resultado:

Ahora puede intentar hacer clic en los enlaces disponibles en el panel izquierdo y ver el resultado. El atributo target también puede tomar uno de los siguientes valores:

No Señor	Opción y descripción
1	_self Carga la página en el marco actual.
2	_blank Carga una página en una nueva ventana del navegador. Abriendo una nueva ventana.
3	_parent Carga la página en la ventana principal, que en el caso de un único conjunto de marcos es la ventana principal del navegador.
4	_top Carga la página en la ventana del navegador, reemplazando los marcos actuales.
5	targetframe Carga la página en un marco de destino con nombre.

↰ Previous page Next page ↱