Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guia 1 Once Virtual

    Cargado por

    Martha c
    10 vistas5 páginas

    Título original

    GUIA_1_ONCE_VIRTUAL

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    10 vistas5 páginas

    Guia 1 Once Virtual

    Cargado por

    Martha c

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 5

    COLEGIO INTEGRADO NUESTRA SEÑORA DE LAS MERCEDES LEBRIJA

    VERSIÓN: 01
    AREA DE TECNOLOGÍA E INFORMÁTICA – ASIGNATURA: TECNOLOGIA
    GUÍA 1- SEGUNDO PERIODO GRADO:
    PÁGINAS: 1

    EJE CONCEPTUAL: Los frameset en la construcción de una pagina web

    LOGRO DE DESEMPEÑO GENERAL DE LA UNIDAD: Reconoce las Normas en el diseño de una Pagina Web.
    INDICADORES DE DESEMPEÑO: Orientado a lo cognitivo (conocer y saber hacer, Personal (ser) y lo social (convivir).

     Reconoce los diferentes tipos de frameset.


     Diseña y construye una página web haciendo uso de los frameset e incluyendo elementos multimedia

    Qué son los frames


    Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado
    por Netscape, que permite dividir la pantalla en varias áreas independientes unas de
    otras, y por tanto con contenidos distintos, aunque puedan estar relacionados. No hay
    límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que
    la pantalla completa normal, tal y como la conocemos. No hay que confundir los frames
    con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la
    celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se
    dispone de todos los recursos del HTML. Es una zona viva.

    Las páginas que contienen una definición de FRAME no pueden contener el elemento


    BODY ni ninguno de los elementos que habitualmente aparecen en el BODY antes del
    elemento FRAMESET que es el que define la creación del FRAME. Si esto no se cumple,
    el FRAME será ignorado.

    Algunos visualizadores no soportan los frames. Para que nuestra página con frames no
    resulte opaca a ellos, se utilizará el elemento NOFRAMES que permite ofrecer un texto
    alternativo en entorno normal.

    Los frames permiten una flexibilidad de presentación extraordinaria, y para contenidos


    muy complejos, de difícil estructura por los medios convencionales del HTML, son casi
    insustituibles.

    Por supuesto, los frames son parametrizables en cuanto a tamaño y número de áreas, si
    éstas se pueden redimensionar por el usuario o son fijas, si tienen o no barras de
    scrolling, se pueden anidar, relacionar sus contenidos, etc. Veamos algunos ejemplos
    prácticos y su sintaxis:

    Un frame básico. Sintaxis general


    En general, todas las páginas que contengan definiciones de frames, se comportan como
    si fuesen llamadores o "lanzaderas", y deberán ser más o menos así:
    <HTML>
    <HEAD><TITLE> Mi titulo ></TITLE></HEAD>

    <FRAMESET>
    <NOFRAMES>
    <BODY>
    Su visualizador no soporta frames. Pulse
    <A HREF="indice.htm">aqui </A> para volver.
    </BODY>
    </NOFRAMES>

    <FRAME SRC="pagina1.htm" >


    <FRAME SRC="pagina2.htm" >

    </FRAMESET>

    </HTML>
    Fíjate en que no aparece el elemento <BODY> en su posición habitual, sino dentro de un
    elemento especial que se activa sólo cuando el visualizador no soporta los
    frames: NOFRAMES. Si no declaras el área NOFRAMES y el visualizador no soporta este
    efecto, no se verá nada. Obviamente, los visualizadores que sí soportan frames ignorarán
    el contenido del área NOFRAMES.

    Hasta aquí ya podemos hacernos una idea de cómo funcionan los frames: Lo primero es
    crear una mini página con la definición del frame, viene a ser algo así como una
    "lanzadera" y sólo contiene la definición del frame. Y por último, crear las páginas que
    constituirán el contenido de cada una de las áreas definidas en la "lanzadera". Ese será
    nuestro trabajo en este curso virtual.

    Actividad:

    Escribe el siguiente código:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset= "utf-8"/>
    <title>Tecnologia Grado 11</title>
    </head>
    <frameset rows="18%,*" frameborder= "yes"bordercolor="#333" marginwidth="10%" marginheight="10
    %" scrolling="no">
    <frame src="superior.html" name="sup"></frame>
         <frameset cols="20%,*"frameborder= "yes"bordercolor #333 marginwidth="10%" marginheight="
    30%" scrolling="yes">
         <frame src="izquierdo.html" name="izq"></frame>
         <frame src="derecho.html" name="der"></frame>
         </frameset>
     </html>

    Haciendo uso de un editor de código puede ser Atom, o Visual Code, muchos equipos no
    soportan atom, entonces descarga visual code en el siguiente Link,
    https://code.visualstudio.com/docs/?dv=win Cuando ingrese a la página de Visual Studio code
    deberás elegir el que diga Windows. La descarga durara dependiendo de tu equipo y la
    velocidad del Internet. Una vez descargado procederán a la descarga. En el escritorio de
    su equipo, Crear la carpeta de trabajo con el nombre de Mi página Web. Luego abrirán el
    editor Visual Code y arrastrar la carpeta, una vez allí deberás crear el Index.html donde
    digitaras el código y lo guardara en la opción file save.

    Primero Abrir el
    Programa Visual Studio
    code. Luego arrastra y
    suelta tu carpeta al área
    de Trabajo

     
    En esta opción New file,
    hacemos clic y creamos el
    Index.html

    Aquí escribimos
    Index.html y damos
    enter.
    Se nos despliega el área
    de trabajo. Digitamos
    html y elegimos la opción
    html :5 y damos enter. Se
    crea la estructura basica
    de html ahí empezamos a
    trabajar. Guardar file
    save

    Luego crea el siguiente html debe escribir: Izquierdo.html Enter y digite el siguiente
    código.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css/cajas.css">
        <title>Frame</title>
    </head>
    <body bgcolor="orange">
        <div id= "menu">
            <ul>
            <li><a href="derecho.html" target="der">INICIO</a></li>
                
            </ul>
            </div>
    </body>
    </html>

    Tambien crea el siguiente html debe escribir: superior.html Enter y digite el


    siguiente código.
    <!DOCTYPE html>
    <html lang= "en">
    <head>
    <meta charset= "UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css/estilos.css">
    <title> Frame </title>
    </head>
    <body bgcolor="black>">
    <img src= "img/Banner.jpg" width="100%">
    <div class ="caja">COLEGIO INTEGRADO NUESTRA SEÑORA DE LAS MERCEDES</div>
    <div class="centrado"><div style="color:#FF0000;"> <h1><marquee direction="right"> TECNOLOGIA 
    GRADO 11 </div></marquee><h1></div>
    </div>
    </body>
    </html>

    El siguiente html, debes escribir: derecho.html Enter y digite el siguiente código.

    <!DOCTYPE html>
    <html lang= "en">
    <head>
    <meta charset ="UTF-8"/>
    <meta name="viewport" content="width-device-width">
    <meta name="description" content="publicidad y ventas">
    <title> Frame </title>
    </head>
    <body color= "#333">

         
                   <center><h1>Qué son los frames<h1></h1></center>

         <p>Los frames (en inglés frame = cuadro, bastidor o marco) es un elemento implementado po
    r Netscape, que permite
          dividir la pantalla en varias áreas independientes unas de otras, y por tanto con conten
    idos distintos,
           aunque puedan estar relacionados. No hay límites para el contenido de cada una de estas 
    áreas: tienen las 
           mismas propiedades que la pantalla completa normal, tal y como la conocemos. No hay que 
    confundir los frames
            con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido 
    de la celda de una tabla
            es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los r
    ecursos del HTML. Es una
             zona viva.
         </p>   

    <img src= "img/maxter.jpg" width="100%">

          
         </body>
         </html>

    También debes crear la capeta img y dentro de la carpeta img otra carpeta que diga
    Multimedia.

    También podría gustarte