Manual de HTML: Frames (marcos)

Frames (marcos)

Un frame es una especie de marco en el que podemos cargar una página web. Los frames permiten dividir una página en varias ventanas, cada una con sus propios bordes y barras de desplazamiento, pudiendo cargar dentro de cada una de ellas una página externa diferente.

Los frames se definen en una página que en su código sólo tiene la definición de los mismos y la página que va a cargar cada uno de ellos. A diferencia de una página normal, una página de frames no contiene la etiqueta <body>, sino que utiliza la etiqueta frameset.

Veamos un ejemplo: el siguiente código define dos marcos horizontales 20%-resto, y el de abajo dividido en tres marcos verticales 20%-60%-resto.

<html>
  <head>
  </head>
  <frameset rows="20%,*">
    <frame name="top" src="top.html">
    <frameset cols="20%,60%,*">
      <frame name="menu" src="menu.html">
      <frame name="central" src="central.html">
      <frame name="dcho" src="dcho.html">
    </frameset>
    <noframes>
      <p>Su navegador no soporta frames.</p>
    </noframes>
  </frameset>
</html>

… siendo el resultado:

top
menu central dcho
  • <frameset></frameset>

    La etiqueta <frameset> define la disposición de los marcos en la ventana y se ubica entre </head> y </html>, sin utilizar <body></body>.

    Atributos:

    • cols: determina el ancho de las columnas (marcos verticales). El ancho se puede definir en pixels (valor absoluto), en porcentaje o con asterisco "*", en cuyo caso el ancho será el que quede después de definir los demás marcos. Ejemplos:
      • cols="100,700": dos columnas de 100 y 700 pixels.
      • cols="10%,*": una columna del 10% y otra con el resto (90%).
      • cols="20%,*,*": una columna del 20% y otras dos que se reparten el resto (40% y 40%).
    • rows: determina el alto de las filas (marcos horizontales).
  • <frame />

    Se utiliza para definir cada uno de los marcos del conjunto definidos con <frameset>. Debe haber tantas etiquetas como marcos hayamos definido con cols y rows.

    Atributos:

    • src: especifica la URL que va a cargar el marco.
    • name: asigna un nombre al frame de modo que pueda ser utilizado como destino de los hipervínculos con el atributo target del enlace.
    • scrolling: habilita la barra de desplazamiento. Valores:
      • yes: la barra deslizadora siempre aparecerá.
      • no: la barra deslizadora nunca aparecerá.
      • auto: sólo aparecerá el scroll si es necesario para visualizar el contenido (por defecto).
    • noresize: impide que el usuario pueda redimensionar el marco arrastrando su borde.
  • <noframes></noframes>

    Texto a mostrar si el navegador no es capaz de mostrar marcos.

Frames flotantes

Los iframes o frames flotantes (inline frame), al igual que los frames normales, pueden cargar una página externa, pero a diferencia de aquellos, pueden ser situados en cualquier posición de la página posicionando mediante coordenadas su vértice superior izquierdo.

  • <iframe></iframe>

    La etiqueta <iframe></iframe> define un marco flotante. El texto entre los tags se mostrará si el navegador no soporta iframes.

    Ejemplo:

    <iframe src="intro.html" width="100" height="300">
      <p>Su navegador no soporta iframes.</p>
    </iframe>

Recursos

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web