Ordenadores y Portátiles
Marcos HTML
Marcos HTML

Creación de los marcos HTML

Algunos diseñadores Web usan marcos html en sus páginas, por motivos de encuadre del diseño y para hacer el sitio Web más amigable. Hay muchas opiniones sobre los marcos y que hay gente que los encuentra convenientes y otros que no, aunque los que los defienden creen que hace más fácil la navegación sin perdernos por todas las páginas existentes. Como quizá ya hayas visto, los marcos se usan para que una parte de la Web se quede estática mientras que la otra porción de las mismas páginas cambian cuando se hace clic en un enlace. Esto puede ocurrir con la parte superior, inferior o lateral de la página que estamos viendo, cambiando solo la parte central. Esto puede significar que una misma página puede separarse en varios marcos diferentes, siendo un documento html cada uno de ellos. Puedes decidir en cuantas secciones quieres tener dividida tu página y que documentos html quieres que aparezcan en cada una de ellas.

Lo primero es planificar bien el diseño que va a tener tu página. Considera la salida en términos de filas y columnas. ¿Cuántas secciones horizontales o filas quieres mostrar? ¿Cuántas secciones verticales o columnas? ¿Cuánto espacio estimas que necesita cada sección? Hay varias cosas que tener en cuenta, y lo primero con lo que nos tenemos que familiarizar es el documento llamado “frameset”. Es un documento html que le dice al navegador para que organice el contenido de la páginas Web de una manera particular. En un documento con ‘frameset’, una etiqueta ‘frameset’ reemplaza a la etiqueta ‘body’.


Se empezará el documento ‘frameset’ en un formato html normal de la siguiente manera:

  • <html><head><title>Título de la Web</title></head> y lo siguiente es insertar la etiqueta ‘frameset’ con este formato de ejemplo: <frameset rows="30%, 90%">. Esta etiqueta nos indica que la página se dividirá en dos partes, una superior y otra inferior, según los dos valores dentro de la etiqueta.
  • Si se necesitaran tres filas, se tendrían que incluir tres valores como en el ejemplo siguiente: <frameset rows="20%, 60%, 50%">.

Se pueden poner valores que le dicen al navegador la cantidad de espacio en la ventana del navegador que se muestra, y la sección que tiene que ocupar. Se pueden usar valores de porcentaje o valores de píxeles. Se pueden usar asteriscos en lugar de un valor, indicando que una sección en particular puede usar cualquier espacio que esté disponible en la ventana del navegador. Un ejemplo sería el siguiente:

  • <frameset rows="90, *, 40">

Esta etiqueta nos indica que la página estará dividida en tres filas. El primer marco (superior) ocupará 90 píxeles de espacio, el marco del fondo ocupará 40 píxeles y la del medio ocupará el espacio que quede en el navegador. So la página de divide en dos columnas, puedes usar la etiqueta ‘frameset’ para columnas con sus valores numéricos:

  • <frameset cols="225, *">

Esta etiqueta le dice al navegador dividir la página en dos columnas, donde la columna de la izquierda ocupará 225 píxeles. La columna de la izquierda ocupará el espacio que quede disponible en la ventana del navegador. También se pueden combinar las filas y columnas con documentos ‘frameset’ para crear diseños más complicados. En la siguiente parte del tutorial, veremos como posicionar los documentos html que queramos dentro de cada marco que hayamos creado. Puedes verlo pulsando aquí.

Leer mas artículos relacionados