Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • 06 PracticaVI

    Încărcat de

    nelsonneyman
    7 vizualizări12 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    7 vizualizări12 pagini

    06 PracticaVI

    Încărcat de

    nelsonneyman

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 12

    H T M L

    Prcticas

    U.A.C.M
    COMPUTACIN II

    Marcos

    Prctica

    VI
    HTML Bsico
    El primer objetivo de esta prctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos mostrar en un marco informacin dinmica y esttica.

    Fundamentos Tericos.
    MARCOS
    Los marcos tambin conocidos como (frame), tienen como objetivo dividir la ventana del navegador en la que se despliega el contenido, creando distintas reas para visualizar diferente informacin. Un factor importante a ser considerado para su uso es tener en cuenta que ser necesario crear varias pginas web separadas con el fin de componer la pgina final. Una de las ventajas que ofrece el uso de marcos es que nos permite disear sitios con una estructura compleja de forma simplificada, el nico inconveniente es que su impresin es difcil al existir varios archivos que se visualizan simultneamente en la ventana de visualizacin del navegador. Los marcos son muy utilizados debido a que es cmodo situar un men en un lugar que siempre va a ser visible y estar disponible, mientras que simultneamente otra rea de nuestro sitio web es completamente dinmica, es decir, constantemente cambia. La etiqueta que se utiliza para definir la pgina principal que utilizara los marcos es <FRAMESET>: Etiqueta de comienzo .............................. <FRAMESET> Etiqueta de cierre .................................. </FRAMESET> En cuanto a los atributos con los que cuenta la etiqueta FRAMESET, se encuentran: Atributo COLS ROWS BORDER FRAMESPACING="n". BORDER=0 BORDERCOLOR Descripcin Columnas en las que se divide el frame Filas en las que se divide el frame Atributo para aumentar o disminuir el tamao del borde Valor del espacio entre frames en pixels. Elimina el borde Cambia el color del borde.

    VI.1

    La etiqueta que se utiliza para definir que va a haber en los marcos es <FRAME>: Etiqueta de comienzo.............................. <FRAME> Atributo que despliega las pgina html asociadas al frame SRC (source). En cuanto a los atributos con los que cuenta la etiqueta FRAME, se encuentran: Atributo SRC="ruta del documento html" NAME="nombre". SCROLLING SCROLLING=auto SCROLLING="yes" SCROLLING="no" NORESIZE MARGINHEIGHT MARGINWIDTH FRAMEBORDER Descripcin Indica el documento que se mostrar en el frame. Indicaremos la direccin, URL, del documento que debe mostrarse en la zona. Si no se pone este atributo el rea reservada estar vaca. Asigna un nombre al marco, es un atributo importante puesto que cuando queramos cargar una pgina en un marco mediante un enlace, tendremos que especificar el nombre del marco. Controla la aparicin o no de barras de desplazamiento Valor por defecto, provoca que el navegador slo inserte barras de desplazamiento si el contenido del frame ocupa ms del espacio dedicado para l. Las barras de desplazamiento aparecern siempre. Las barras de desplazamiento no aparecern nunca. Si usamos esta opcin, si la pgina ocupa ms que el espacio de la ventana dedicado al frame la informacin que no quepa en un principio no podr ser vista. Por defecto los usuarios pueden mover los bordes de los frames, situando el ratn sobre ellos y arrastrarlos. Si incluimos este atributo evitaremos que el borde del frame pueda ser movido. Ajusta el margen superior que debe respetar el contenido de ese frame. El tamao debe ser dado en pixeles. Ajusta el margen lateral que debe respetar el contenido del frame. Al igual que antes, el margen debe ser dado en pixeles. Con el valor cero quita las lneas del marco

    Los atributos tendrn asignados valores en pxeles, porcentajes o un asterisco.


    Nota: El asterisco es un carcter que indica al navegador que utilice el resto del espacio que queda libre, es decir si existen 2 columnas por ejemplo y la primera ocupa 20%, si el segundo valor es un asterisco, esto quiere decir que la segunda columna ocupara el 80%. Uno de los aspectos ms importantes a ser considerados, cuando hacemos uso de los marcos, es el hecho de que la etiqueta <FRAMESET> sustituye a <BODY>, la cual no formar parte del cdigo incluido en la pgina web. Para el caso especfico de estas prcticas, vamos a utilizar los marcos en el primer ejercicio solo para conocer como se divide la ventana para desplegar diferente informacin en ella, pero lo ms importante es solo ubicar las zonas. Para el segundo ejercicio nos interesa ubicar el tipo de informacin que queremos colocar en las diversas zonas de la ventana, ya sea informacin esttica o dinmica (informacin que continuamente se modifica).

    VI.2

    Ejercicio VI.1. Prctica Paso a Paso. Parte I.( Zonas de los Marcos o Frames)
    Paso 1. Dentro del directorio computacionII, copia la carpeta practicaVIa del CD. Paso 2. Dentro de la carpeta practicasVIa, crea tres pginas web con los nombres:walle.html, bicentenario.html y r23po.html. Paso 3.Es necesario que en cada pgina incluyas la imagen que corresponda al ttulo de cada pgina web, recuerda que esto debes realizar utilizando la siguiente etiqueta: <IMG src> como ya lo has realizado en prcticas anteriores. Nota: Recuerda que las imgenes puedes cambiarlas, para ello debers buscarlas en internet y posteriormente guardarlas con el nombre de walle.jpg, bicentenario.jpg o r23po.jpg, bajo la ruta que guarda la carpeta de imgenes. Revisa con tu profesor como realizar este procedimiento.

    Paso 4. Crea una cuarta pgina web llamada robots.html, en la cual construirs un marco con 3 columnas. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS=33%,34%,33%> <FRAME SRC="walle.html"> <FRAME SRC="r23po.html"> <FRAME SRC="bicentenario.html"> </FRAMESET> </HTML>

    Observa en el cdigo de esta pgina que al utilizar los marcos o frames no se utiliza la etiqueta <body>, es por ello que debers eliminar la etiqueta cuando ests construyendo la pgina robots.html. Al realizar el ejercicio es necesario ajustar las imgenes con los siguientes atributos Imagen r23po heigth=120% width=120% Imagen bicentenario heigth=550 width=365 Imagen walle heigth=200% width=200

    VI.3

    Una vez terminado el ejercicio podrs observar en pantalla la siguiente imagen.

    Figura VI.1 Ahora vamos a recordar brevemente el tema de hiperenlaces, y anexaremos un nuevo elemento a la pgina web que vamos a crear (cuadro alrededor del texto). Paso 5. Finalmente para esta prctica genera una nueva pgina llamada practicaVIa.html. Dentro de la etiqueta <body> teclea el siguiente cdigo.

    <BR><BR><BR> <FIELDSET> <LEGEND ALIGN=center><FONT COLOR= blue SIZE=20 > R O B O T S </FONT> </LEGEND> <center> En este espacio agrega el texto que se encuentra en la carpeta practicaVIa\archivos\robots.doc <BR> <a href=practicaVIa/robots.html> Pelculas de ROBOTS </a><br> <center> </FIELDSET>
    Observemos que la etiqueta <fieldset> crea un cuadro alrededor del texto.

    VI.4

    Figura VI.2

    Ejercicio VI.2 Prctica Paso a Paso. Parte II. (Zonas estticas y dinmicas en los Marcos)
    Paso 1. En el directorio computacionII, realiza una copia de la carpeta practicaVIb del CD. Paso 2. Crea las pginas de los tipos de robots, las cuales contienen texto y una imagen, el nombre de los archivos ser robotI.html, robotII.html, robotIII, etc. Paso 3. Crea tres pginas web llamadas: derecho.html, izquierdo.html y encabezado.html Paso 4. Crea una pgina llamada practicaVIb.html y despliega los tipos de robots como se observa a continuacin.

    VI.5

    Figura VI.3

    Observa que cada grupo alimenticio despliega la informacin respectiva.

    rea Esttica

    rea Esttica

    rea Dinmica

    Figura VI.4

    VI.6

    Paso 5. Revisaras con tu profesor en que consisten las reas estticas y dinmicas en una pgina web. Paso 6. Ahora vamos a construir el ejercicio.

    CDIGO HTML DE LAS PGINAS.


    derecho.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor=#F8E0F7> <H2 align=center><font color="#380B61">HABLANDO DE ROBOTS</H2> <center><img src="imagenes/portada.bmp" height=50% width=30%> </center> <H1 align=center>PLANTEL SAN LORENZO TEZONCO </H1> <BR> <H2 align=center>COMPUTACIN II </H2> <H2 align=center>COLEGIO DE CIENCIAS SOCIALES Y HUMANIDADES</H2> <BR> <BR> </FONT> </BODY> </HTML>

    izquierdo.html <HTML> <HEAD> <TITLE>indice</TITLE> </HEAD> <BODY bgcolor="#E0ECF8"> <FONT COLOR="#0B0B61"><H3>&nbsp&nbsp&nbsp&nbsp&nbsp TABLA DE <BR> ALIMENTACION</H3></FONT> <A HREF="robotI.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados adaptablemente</FONT></H4> <A HREF="robotII.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados por visin </FONT></H4> <A HREF="robotIII.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots con inteligencia artificial </FONT></H4> <A HREF="robotIV.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots mdicos </FONT></H4> <A HREF="robotV.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados por sensores </FONT></H4> <A HREF="robotVI.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots androides</FONT></H4> </BODY> </HTML>

    VI.7

    encabezado.html <html> <head> </head> <body bgcolor=#F5EFFB> <table border=1 cellpadding=0 style='marginleft:80.25pt;background:#E0E0F8'> <tr> <td width=116 style='width:350.0pt;border:solid #380B61 3.0pt'> <p align=center style='text-align:center'><Font color=#4B088A size=5> <MARQUEE BEHAVIOR=left >U A C M, &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp C o m p u t a c i n &nbsp&nbsp I I</MARQUEE> </font></p> </td> </tr> </table> </body> </html>

    practicaVIb.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <Frameset rows=17%,*> <frame src="practicaVIb/encabezado.html" NORESIZE > <frameset cols=23%,77%> <frame src="practicaVIb/izquierdo.html" NORESIZE> <frame src="practicaVIb/derecho.html" name="principal" NORESIZE> </frameset> </frameset> </HTML>

    VI.8

    Ejercicio VI.3. Ejercicio Propuesto.


    Actividad 1. Disea un frame horizontal en donde se muestren tres virus comunes.

    Figura VI.6

    VI.9

    Actividad 2. Realiza una pgina web que contenga un encabezado que como ttulo tenga el nombre de astrologa. Del lado izquierdo contenga una lista de los 4 elementos a los que puede pertenecer un signo zodiacal: tierra, fuego, aire y agua. Finalmente crea una pgina que conforme se consulte el elemento despliegue una pgina que muestre los signos asociados al elemento.

    Figura VI.7

    VI.10

    Ejercicio VI.4. Investigacin.


    1. Qu implica numerar una lista de opciones, que opciones tienes para hacerlo? 2. Qu implica no numerar una lista de opciones, que opciones tienes para hacerlo? 3. Para qu se utiliza una marquesina en una pgina web?

    VI.11

    S-ar putea să vă placă și