INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML

Tutorial Uso de Marcos en HTML

La mayora de las pginas Web que usas cuando accedes a Internet contienen marcos (en ingls Frames), es una forma fcil de involucrar varias pginas en una sola, nuestro objetivo es crear una pgina Web con 3 marcos: el marco superior, el marco central y el marco inferior, tal como se muestra en la siguiente imagen:

Marco superior

Marco central

Marco inferior

Comnmente en el marco superior se coloca un banner (informacin publicitaria), en el marco inferior se coloca un ndice que en la mayora de los casos contiene varios botones los cuales permiten establecer enlaces a otras pginas Web las cuales son presentadas en el marco central, esto significa que los marcos superior e inferior nunca cambian de contenido
Responsable: Prof. Carlos Montiel Rentera Email: ke.tranza.mongol@hotmail.com 1

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML siempre mostrarn lo mismo. En cambio, el marco central contendr de manera dinmica las diferentes pginas que se irn llamando a travs de los botones contenidos en el ndice (marco inferior). Bien, sin ms prembulo iniciamos: Paso 1. Habilitar la opcin de ver extensiones de archivos. Es siempre importante que al manejar diferentes tipos de archivos podamos observar sus extensiones, para evitar confusiones. En el explorador de Windows localiza el men Organizar haz clic en l y elige la opcin Opciones de carpeta y bsqueda, tal como se muestra enseguida:

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML Debiendo aparecer la siguiente ventana:

Haz clic en la cejilla Ver y desplzate hasta la parte inferior y elimina la pequea flecha que se tiene en la opcin: Ocultar las extensiones de archivo para tipos de archivo conocidos. Y finalmente haz clic en el botn Aplicar y enseguida haz clic en el botn Aceptar.

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML Paso 2. Creacin de la estructura de marcos. Antes que nada crea una carpeta en el escritorio con nombre: Frames, y enseguida con el block de notas (notepad.exe) captura el siguiente cdigo:

Guarda el archivo en la carpeta Frames y ponle de nombre: index.html. La etiqueta FRAMESET permite establecer tres renglones (ROW), el primero ocupara el 20% de la pgina, el segundo 70% y el tercero el 10%, formando as el marco superior, el marco central y el marco inferior respectivamente, el borde es cero, significa que no sern visibles los bordes de dichos marcos, y en las etiquetas FRAME se especifican las pginas Web iniciales para cada marco, observa bien: el nico marco que se le adjudico un nombre fue al marco central (datos) ya que en ste se publicarn o mostrarn las diferentes pginas que se irn llamando a travs de los botones de la pgina indice.html.

Paso 3. Creacin de la pgina banner.html.

En el block de notas captura el siguiente cdigo:

Guarda el archivo en la carpeta Frames y ponle de nombre: banner.html, la etiqueta embed nos obliga a definir los atributos width (ancho de 1000 pixeles) y height (alto de 80 pixeles), la animacin banner.swf te la proporcionara tu profesor.

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML Paso 4. Creacin de la pgina inicio.html. En el block de notas captura el siguiente cdigo:

Guarda el archivo en la carpeta Frames y ponle de nombre: inicio.html, el archivo imagen1.jpg te lo proporcionara tu profesor. Paso 5. Creacin de la pgina indice.html. En el block de notas captura el siguiente cdigo:

Cabe sealar que se emple la etiqueta FORM (formulario) con el nico propsito de manejar botones y cada botn ha sido colocado en cada una de las celdas de la tabla definida (1 rengln y 5 columnas), adems se est usando el atributo
Responsable: Prof. Carlos Montiel Rentera Email: ke.tranza.mongol@hotmail.com 5

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML onClick el cual nos permitir invocar o llamar una pgina Web (p1.html, p2.html, etc.) al hacer clic sobre el botn y publicarla o mostrarla en el marco central llamado datos. Guarda el archivo con el nombre de: indice.html.

Paso 6. Creacin de la pgina p1.html. En el block de notas captura el siguiente cdigo:

Cabe sealar que la etiqueta bgsound nos permite manejar archivos de sonido, en este caso de formato MP3, y el atributo LOOP con valor -1 permite repetir la meloda de manera indefinida. Guarda el archivo y ponle de nombre: p1.html. La imagen y la meloda te las proporcionara tu profesor.

Paso 7. Creacin de la pgina p2.html. En el block de notas captura el siguiente cdigo:

Guarda el archivo y ponle de nombre: p2.html.

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML Paso 8. Creacin de la pgina p3.html. En el block de notas captura el siguiente cdigo:

Guarda el archivo y ponle de nombre: p3.html. Paso 9. Creacin de la pgina p4.html. En el block de notas captura el siguiente cdigo:

Cabe sealar que el rea de color azul corresponde a un solo rengln, es decir captralo sin oprimir la tecla Enter. Guarda el archivo y ponle de nombre: p4.html.

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com

INSTITUTO POLITCNICO NACIONAL

INTRODUCCIN A HTML

Paso 10. Creacin de la pgina p5.html. En el block de notas captura el siguiente cdigo:

Las animaciones Flash: adivinador.swf y simplificarFracciones.swf, as como las imgenes te las proporcionara tu profesor. Guarda el archivo y ponle de nombre: p5.html. Paso 11. Probar la pgina index.html. Simplemente colcate en la carpeta Frames y dale doble click al archivo index.html. Hemos terminado, seguramente no te va a funcionar correctamente a la primera y todo esto es debido a la mala captura del cdigo, te sugiero revisar carcter por carcter.

Espero les haya sido de utilidad, hasta la prxima

Responsable: Prof. Carlos Montiel Rentera

Email: ke.tranza.mongol@hotmail.com