Crea tu Web: Indice de diseño

El manual completo HTML en formato PDF
¡ sólo
4 €!
Tras confirmar el pago recibirá
el archivo en su email
  • Introducción al curso
    • Introducción
    • Requisitos
    • Agradecimiento
  • El HTML
    • Versiones de HTML
    • HTML 2.0
    • HTML 3.0 y 3.2
    • HTML 4.0
    • Estándares en este curso
  • Mi primera página
    • La primera página
    • El código
    • La explicación
    • El cuerpo del documento
  • El documento HTML
    • La página
    • La cabecera
    • El cuerpo
  • Formato del texto
    • Formato básico
    • Formato del párrafo
    • Las 6 cabeceras
    • Cambiando el tipo de letra
    • Formato de frase
    • Otros elemento
  • Tipos de letras
    • Formateo de texto
    • Cambio de color
    • Tamaños del texto
    • Tipo de letra
  • Caracteres especiales
    • Caracteres especiales
    • Caracteres extendidos
    • Caracteres de control
  • Enlaces web
    • Los enlaces
    • La etiqueta <A>
    • Las URLs
    • Anclas
  • Listas
    • Listas
    • Listas desordenadas
    • Listas ordenadas
    • Listas de definiciones
  • Imágenes
    • Imágenes
    • Imágenes y enlaces
    • Alineación respecto al texto
  • Formularios
    • Formularios
    • Cajas de texto
    • Opciones
    • Botones del formulario
    • Otros elemento
  • Formularios avanzados
    • Controles avanzados
    • Etiquetas
    • Agrupación de elementos
    • Desactivación de elementos
  • Mapas
    • Mapas
    • Mapas lado cliente
    • Cómo usar un mapa
  • Tablas
    • Tablas
    • Definir las filas
    • Definir las celdas
    • Título de la tabla
  • Marcos
    • Marcos
    • Etiqueta <FRAMESET>
    • Etiqueta <FRAME>
    • Acceso a otros marcos
  • Hojas de estilo (1)
    • Estilos CSS
    • Clases
    • Etiquetas <SPAN> y <DIV>
  • Hojas de estilo (2)
    • Referencia CSS
    • Propiedades de bloque
    • Propiedades de tipo de letra
    • Propiedades de formato del texto
    • Propiedades de color y fondo
    • Propiedades de clasificación
  • Los scripts
    • Los Scripts
    • Javascript
  • Capas
    • Las capas
    • Definición
    • Propiedades
  • Sonido
    • Sonido en la página
    • Sonido manual
    • Sonido de fondo
  • Trucos
    • Guía de estilo
      • Guía de estilo
      • Contenido
      • Navegación
      • Estructura de las páginas
      • Accesibilidad
      • Diseño
      • Mantenimiento y prueba
    • Enlaces de interés
      • Más HTML
      • Más JavaScript
      • HTML dinámico
      • Otras tecnologías
      Marcos o frames
      Marcos

      Denodados por unos y adorados por otros los marcos o frames son una forma de insertar varias páginas web en una sola. Mal utilizados pueden arruinar la mejor página web, pues no hemos de olvidar que la pantalla del monitor está físicamente limitada. Cada marco que compone la página poseerá sus propios bordes y barras de scroll, comportándose como ventanas independientes. Su situación en la página es rígida, no podemos colocarlos en las posiciones que deseemos, si tenemos cuatro marcos se situarán en cada uno de los cuatro cuadrantes de la pantalla. Si tenemos dos la pantalla se dividiré en dos filas o en dos columnas para alojarlos. Pueden ser útiles para compartir un cierto contenido por todo el sitio web, por ejemplo para una barra de navegación.

      Su uso puede parecer algo compeljo pero es muy simple. Básicamente se trata de definir una página contenedora de los marcos y de colocar en cada uno de ellos la página cuyo contenido mostrarán. Por supuesto también concretaremos el tamaño y posición y otros atributos de cada marco. Pueden existir navegadores que no puedan manejar los marcos, por ello colocamos un texto alternativoa explicando la situación. Mira el siguietne código y ve los resultados en este ejemplo.

      <HTML>
      <HEAD>
        <TITLE>Los frames: páginas multiventana</TITLE>
      </HEAD>
      <FRAMESET COLS="20%,80%">
        <FRAME NAME="indice" SRC="indice.htm">
        <FRAME NAME="principal" SRC="principal.htm">
        <NOFRAMES>
          <P align="center">Al parecer tu navegador 
          no soporta marcos, actualízate.</P>
        </NOFRAMES>
      </FRAMESET>
      </HTML>

      Fíjate las diferencias y coincidencias con una página HTML habitual: en lugar de BODY ahora tenemos una etiqueta FRAMESET. Cada una de estas FRAMESET son una página o ventana dentro de la página contenedora que estará compuesta por varias zonas definidas con los parámetro COLS o ROWS. En el ejemplo se trata de dos marcos uno junto al otro: uno ocupa el 20% de la ventana del explorador y el otro el 80% restante.

      Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción alternativa para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un nombre y especificamos qué página HTML se mostrará en él (etiqueta <FRAME>). Sólo queda definir lo que verá el usuario en el supuesto de que su navegador no soporte frames (etiqueta <NOFRAMES>).

      arriba


      Etiqueta FRAMESET

      Los parámetros COLS y ROWS nos permiten controlar el tamaño de los marcos presentados en la ventana del navegador. Existen tres formas de establecer estos tamaños:

      • Porcentajes: podemos definir el tamaño de un marco como un porcentaje del espacio total disponible (el ancho o alto de la ventana del navegador)
      • Absolutos: Podemos especificar el ancho o alto del marco en pixels.
      • Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo calcule el navegador, usando apra ello un asterisco en lugar de un valor o porcentaje. Por ejemplo si tenemos tres marcos y colocamos cols=" 10%, 30%, *", el último ocupará el 60% (el espacio sobrante 100 - 10 -30). Si colcoamos el * varios marcos se repartirán el espacio equitativamente, pero podemos también hacer que un marco sea doble o triple de otro. Así, un marco con un espacio de 3* será tres veces más grande que el que contenga un asterisco.

      Se pueden combinar los tres métodos. Por ejemplo:

      <FRAMESET COLS="10%,*,300,3*">

      Supongamos que el ancho total de la ventana son 800 pixels. El primer marco ocupará el 10%, es decir, 84 pixels. El tercero necesita 300, en total tenemos 384 ocupados luego quedan 800-384, 416 pixels libres. Los otros se repartirán este espacio en función de los asteriscos: 416/4 = 104 pixels para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 pixels. Lo más recomendable es dejar un marco con tamaño calculado, o sea, con el asterisco para.

      Y bueno si queremos que los marcos se distribuyan de una forma algo más irregular podemos aprovechar la posibilidad de anidarlos, en otras paralbras: un marco puede contener una página que a su vez ontenga otros marcos. Esto se hace poniendo otro <FRAMESET> donde normalmente colocamos las etiquetas <FRAME> tal que así:

      <FRAMESET COLS="20%,80%">
        <FRAME NAME="indice" SRC="indice.htm">
        <FRAMESET ROWS="*,80">
          <FRAME NAME="principal" SRC="superior.htm">
          <FRAME NAME="ejemplos" SRC="principal.htm">
        </FRAMESET>
      </FRAMESET>

      El resultado del anidamiento lo podréis contemplar aquí.

      Frameset tiene aún dos parámetros extras: frameborder y framespacing, el primero permite eliminar los bordes que separan a todos los marcos, mientras que el segundo permite controlar el ancho del espacio que separa los marcos

      arriba


      Etiqueta FRAME

      Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que soporta son:

      NAME Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
      SRC Indica la URL del documento HTML que ocupará el marco.
      NORESIZE Evita que el usuario pueda cambiar el tamaño del marco.
      FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los contiguos tienen borde éste se verá).
      SCROLLING Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
      MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
      MARGINHEIGHT Igual al anterior pero con márgenes verticales.
      arriba


      Marcos flotantes <IFRAME>

      Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma: incluir una página externa dentro de otra, pero en este caso el marco puede quedar totalmente integrado en la página contenedora. Es como un include. La descripción de este elemento es muy parecida a los frames: es necesario decir de donde viene la página y como se ha de ver el marco (bordes, márgenes scroil...) Esto se hace mediante los parámetros ya vistos:

      NAME Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
      ALIGN Alineación del marco respecto al texto que lo rodea (botton, right, left, middle)
      SRC Indica la URL del documento HTML que ocupará el marco.
      HEIGHT Altura del marco
      WIDTH Anchura del marco
      FRAMEBORDER Ssi lo igualamos a cero el borde de este marco desaparece
      SCROLLING Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
      MARGINWIDTH Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
      MARGINHEIGHT Igual al anterior pero con márgenes verticales.
      allowtransparency Si es true La página origen puede tener como color de fondo transparent.
      arriba


      Acceso a otros marcos

      Si leístes la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la ventanda del navegador aparecerá otra página, pero podíamos colocar el atributo target para hacer que la nueva página se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. Así en un marco puedo colocar un enalce que abra la página en otro marco de la misma página.

      Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:

      <A HREF="pagina.html" TARGET="principal">

      También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:

      _top
      Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.
      _blank
      Muestra la nueva página en una ventana nueva y sin nombre del navegador.
      _self
      Muestra la nueva página en el marco donde está declarado el enlace.
      _parent
      Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplo cuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.
      arriba


      Comunidad Virtual. Alojamiento gratis