Tutorial "Creando Marcos en HTML"

Tutorial para crear Marcos (Frames) en HTML.

Los marcos o frames nos permiten dividir una página web en varias ventanas que pueden cargar otras páginas webs. Se trata de ventanas independientes incorporadas en una misma página y que nos permiten distribuir la información de forma organizada. La ventana se puede dividir en marcos horizontales o verticales, o ambos.

La etiqueta FRAMESET permite establecer la cantidad de renglones (ROWS) o columnas (COLS), esto se refiere a marcos horizontales (renglones) o marcos verticales (columnas), comunmente para referirnos a sus dimensiones se emplea procentajes con respecto al ancho o altura de la ventana principal (página Web que albergará a todas las demás páginas Web que se insertarán) y la etiqueta FRAME permite establecer la página Web que se colocara ya sea en el marco horizontal o en el marco vertical, observa detalladamente el siguiente fragmento de código HTML y capturalo empleando el bloc de notas, al archivo llámalo: INDEX.HTML

Te explico: La etiqueta FRAMESET esta declarando 3 marcos horizontales, el primero con 20%, el segundo con 60% (representado por el asterisco) y el tercero por el 20%, sumando los tres nos debe dar el 100% de la altura de la página Web que los albergará. Además cabe señalar que en la página web que define los marcos NO DEBE EMPLEARSE LA ETIQUETA BODY, si la usas no podrás acceder a los marcos (frames).

La etiqueta FRAME permite declarar la página Web que debe colocarse en esa posición, por ejemplo la primera etiqueta FRAME indica que en el marco superior deberá de colocarse la página Web: "pagArriba.HTML", la segunda indica que en el marco central deberá de colocarse la página Web: "pagCentral.HTML" y la tercera indica que en el marco inferior deberá de colocarse la página Web: "pagMenu.HTML".

Además, cada marco puede asignarsele un nombre, pero comunmente se nombra sólo aquel que servirá como repositorio para otras página Web, en este ejemplo, el marco central se le asigno el nombre de "X" porque es el de mayor área y permitirá alojar otras páginas Web comodamente.

Captura el código HTML anterior y al ser interpretado por el navegador deberá de mostrarse somo sigue:

Como ya estarás observando, en cada marco aparece la leyenda: "No se puede acceder a esta página", esto se debe obviamente a que las páginas Web que deberían de aparecer aún no han sido creadas o son inexistentes, así que lo que sigue pues, es CREAR TRES PAGINAS WEB.

Por cuestiones practicas las tres páginas que vamos a crear solo se mostrarán con color de fondo diferente (para distinguirlas), asi que iniciamos con la página Web pagArriba.html: