Ordenadores y Portátiles
Posicionar marco HTML
Posicionar marco HTML

Añadir el origen del marco HTML

Si no lo has hecho aun, crea los documentos html que ocuparán cada uno de los marcos como se ha explicado en el anterior artículo sobre marcos html. Puedes crear un documento cualquiera como se explicó al principio del tutorial. Se trata de incluir estos documentos en uno solo con marcos haciendo un solo documento html formado por todos los creados. Lo haremos con la etiqueta “frame src” que significa básicamente ‘origen del marco’, y que le dirá al navegador qué documentos html debe poner en cada marco. Para ello, utilizaremos el ejemplo siguiente donde mostramos el código que vamos a utilizar:

<html>
<head><title>Prueba de marcos HTML</title></head>  
<frameset cols="200, *">   
<frame src="enlaces.html">   
<frame src="contenido.html">  
</frameset>  </html>

Este ejemplo muestra una configuración de marcos que dividirá el documento html en dos columnas o marcos. En el marco de la izquierda, se utilizarán 200 píxeles de espacio para mostrar el documento ‘enlaces.html’. El resto de la página, la columna derecha, mostrará el documento ‘contenido.html’. Puedes también ver las etiquetas  que se usan para cerrar un documento de origen de marcos: </frameset>  </html>


Normalmente, una página Web contiene marcos para poder mostrar o enlazar a información adicional localizada en el mismo sitio. En un menú de enlaces generado con marcos, cuando se pulsa uno de los enlaces, la información es conseguida y enviada al marco central de la página Web sin alterar los otros marcos de la página.

Para poder decirle al navegador el marco donde la información del enlace debe ser puesto, hay que ‘nombrar’ los marcos. Si no se especifica el marco que tiene que recibir la nueva información, el marco del menú de enlaces será reemplazado con la del enlace que hemos pulsado en ese mismo marco, acabando con el propósito del documento de marcos en si.

Para nombrar un marco, solo tienes que poner una etiqueta “name” dentro de la etiqueta ‘frame src” en el documento de configuración de marcos. Puedes dar a cada marco el nombre que tú quieras. Un ejemplo sería el siguiente:

  • <frame src="enlaces.html" name="menu">
  • <frame src="contenido.html" name="informacion">

Después de nombrar un marco, puedes especificar el marco donde te gustaría que apareciera la información, añadiendo la etiqueta “target”, seguida por el nombre de la trama. Siguiendo con el ejemplo que estamos siguiendo:

  • <a href="http://www.ordenadores-y-portatiles.com/prueba.html" target="informacion">

Esto le dirá al navegador que la información que se pulse, aparecerá en el marco llamado ‘informacion’. Al igual que los documentos HTML convencionales, los documentos de marcos se salvan de la misma manera, ya sea con las extensiones .htm o .html. Asegúrate de mantener el archivo ‘frameset’ en la misma carpeta que los documentos HTML que aparecerán en los marcos. Cuando abres el documento ‘frameset’’ en el navegador, deberías poder ver la pantalla dividida con un documento HTML separado dentro de cada marco.

En la siguiente sección del tutorial, veremos como quitar las barras de desplazamiento y los bordes para limpiar nuestra página y dejarla más vistosa. Lo puedes ver pulsando aquí.

Leer mas artículos relacionados