¡Descarga Tutorial para crear páginas Web - Frames y más Apuntes en PDF de Tecnologías de la Información y la Comunicación solo en Docsity!
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES
Tutorial #5 Creación de pagina Web - Frames
La mayoría de las páginas Web que visitas cuando accedes a Internet contienen marcos (en inglés Frames ), es una forma fácil de involucrar varias páginas en una sola , nuestro objetivo es crear una página Web con 3 marcos : el marco superior , el marco central y el marco inferior , tal como se muestra en la siguiente imagen: Comúnmente en el marco superior se coloca un banner (información publicitaria), en el marco inferior se coloca un índice que en la mayoría de los casos contiene varios botones los cuales permiten establecer enlaces a otras páginas Web las cuales son presentadas en el marco central, esto significa que los marcos superior e inferior nunca cambian de contenido Marco superior Marco inferior Marco central
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES siempre mostrarán lo mismo. En cambio, el marco central contendrá de manera dinámica las diferentes páginas que se irán llamando a través de los botones contenidos en el índice ( marco inferior ) y a esto se le conoce como “ navegar ” dentro del sitio Web que estemos visitando en ese momento. Bien, sin más preámbulo iniciamos: Paso 1. Habilitar la opción 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ú “ Vista ” haz clic en él y elige la opción “ Mostrar u ocultar ”, tal como se muestra enseguida y habilita las tres opciones, tal como se muestra en la siguiente imagen: Con esta acción podrás observar las extensiones de todos tus archivos, así como también los archivos “ ocultos ”, que muy de moda están los virus que ocultan archivos, confundiendo (a las grandes masas) que ya han sido borrados. Paso 2. Creación de la estructura de marcos. Antes que nada crea una carpeta en el escritorio con nombre: “ tema frames ”, y enseguida con el block de notas ( notepad.exe ) captura el siguiente código HTML:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Guarda el archivo en la carpeta “ tema 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 animación “ banner.swf ” te la proporcionaré en Classroom. La etiqueta **** no requiere etiqueta de “cierre”, además es muy versátil, ya que a través de esta, nos permite insertar un archivo de música , así como también, insertar un archivo de vídeo e insertar una animación flash en nuestras páginas Web, tal como es nuestro caso. Paso 4. Creación de la página “inicio.html”. En el block de notas captura el siguiente código HTML: Guarda el archivo en la carpeta “ tema frames ” y ponle de nombre: “ inicio.html ”, el archivo “ burro_IPN.jpg ” te lo proporcionaré en Classroom. Paso 5. Creación de la página “indice.html”. En el block de notas captura el siguiente código HTML:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Recuerda, al archivo llámale: “ indice.html ” y colócalo en la carpeta “ tema frames ”. Antes de continuar, quiero mostrarte la interpretación por parte del navegador Google Chrome del archivo que ya has tecleado, es decir del “ index.html ”, tu carpeta debe de mostrarse igual a la siguiente imagen, pero te aclaro, te compartiré todas las imágenes que se emplean en este Tutorial mediante Classroom:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES #3. Del panel que aparece, elige la opción “ Privacidad y Seguridad ”, tal como se muestra enseguida: #4. Aparecerá del lado derecho el panel “ Privacidad y seguridad ”, haz clic sobre el texto: “ Configuración de sitios web ”, tal como se aprecia enseguida: #5. El panel actual se reemplazará por otro, en el cual desplázate con el botón de desplazamiento vertical hasta llegar a la opción “ Flash ”, y da clic sobre este texto, tal como se muestra enseguida:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES #6. Del panel que aparecerá, cambia la opción: “ Impedir que los sitios web ejecuten Flash (recomendado) ” por “ Preguntar antes ”, “arrastrando” hacia la derecha el botón de la derecha (señalado), tal como se aprecia enseguida Y listo, ahora procede a cerrar Google Chrome. Ahora sí, estamos en condiciones de interpretar correctamente con Google Chrome a la página Web: index.html (en la siguiente hoja de este documento te muestro la interpretación):
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES En caso que nada funcione para poder interpretar correctamente la página Web: index.html , entonces recurrimos al navegador “ Internet Explorer ”, para ello da clic derecho al archivo “ index.html ” estando en el explorador de Windows (o tu carpeta) y de la pequeña ventana elige el navegador “ Internet Explorer ”, tal como se muestra en la siguiente imagen: Seguramente te mostrará el siguiente mensaje antes de interpretar:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Haz clic en el botón: “ Permitir contenido bloqueado ” y listo. La siguiente liga permite activar el vídeo que nos muestra la interpretación de la página Web index.html: Vídeo interpretación pagina Web: index.html Paso 6. Creación de la página Web: “pimagen.html”. En el block de notas captura el siguiente código: Recuerda, al archivo llámale: “ pimagen.html ” y colócalo en la carpeta “ tema frames ”, recuerda: la imagen te la proporcionaré mediante Classroom, además quiero mencionar que es muy recurrente el error de confundir la palabra “ SRC ” con la palabra “ SCR ”, atributo de la etiqueta ... , por favor tengan mucho cuidado al copiar los códigos HTML.
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Recuerda, al archivo llámale: “ pvideo.html ” y colócalo en la carpeta “ tema frames ”, recordando: cuando se emplea la etiqueta **** , es obligatorio declarar los atributos width y height. Paso 9. Creación de la página “pflash.html”. En el block de notas captura el siguiente código: Recuerda, al archivo llámale: “ pflash.html ” y colócalo en la carpeta “ tema frames ”. Recuerden, tanto archivos tipo imágenes como archivos tipo animaciones flash y archivos de sonido se los comparto mediante Classroom. Paso 10. Probar la página “index.html”. Simplemente colócate en la carpeta “ tema frames ” y dale doble clic al archivo “ index. html ”, y tienes la opción de interpretar éste archivo con diferentes navegadores, te recomiendo Google Chrome , Internet Explorer y Microsoft Edge. Enseguida te mostraré los diferentes modos de navegación de la página Web: index.html , y al final, la liga al vídeo que te mostrará lo mismo (interpretación de index.html).
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Modo #1:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Modo #3:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Modo #4:
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES Código HTML Interpretación con Navegador
< FRAMESET COLS=20%,*>
< FRAMESET ROWS=40%,*>
CECyT 6 - INTRODUCCIÓN A HTML - FRAMES < FRAMESET ROWS=50%,*>
< FRAMESET COLS=50%,*>
< FRAMESET ROWS=30%,*>
< FRAMESET COLS=33%,33%,*>
