H T M L

Prácticas

U.A.C.M
COMPUTACIÓN II

Marcos

.. BORDER=0 BORDERCOLOR Descripción Columnas en las que se divide el frame Filas en las que se divide el frame Atributo para aumentar o disminuir el tamaño del borde Valor del espacio entre frames en pixels. Fundamentos Teóricos... se encuentran: Atributo COLS ROWS BORDER FRAMESPACING="n".. el único inconveniente es que su impresión es difícil al existir varios archivos que se visualizan simultáneamente en la ventana de visualización del navegador.. MARCOS Los marcos también conocidos como (frame). Un factor importante a ser considerado para su uso es tener en cuenta que será necesario crear varias páginas web separadas con el fin de componer la página final. VI........ </FRAMESET> En cuanto a los atributos con los que cuenta la etiqueta FRAMESET... Una de las ventajas que ofrece el uso de marcos es que nos permite diseñar sitios con una estructura compleja de forma simplificada.Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos mostrar en un marco información dinámica y estática... Los marcos son muy utilizados debido a que es cómodo situar un menú en un lugar que siempre va a ser visible y estar disponible..1 ................. es decir. La etiqueta que se utiliza para definir la página principal que utilizara los marcos es <FRAMESET>: Etiqueta de comienzo ........... mientras que simultáneamente otra área de nuestro sitio web es completamente dinámica...... Elimina el borde Cambia el color del borde.. tienen como objetivo dividir la ventana del navegador en la que se despliega el contenido. <FRAMESET> Etiqueta de cierre ......... constantemente cambia. creando distintas áreas para visualizar diferente información.....

. Si incluimos este atributo evitaremos que el borde del frame pueda ser movido............ se encuentran: Atributo SRC="ruta del documento html" NAME="nombre". Para el segundo ejercicio nos interesa ubicar el tipo de información que queremos colocar en las diversas zonas de la ventana. tendremos que especificar el nombre del marco.. esto quiere decir que la segunda columna ocupara el 80%... Las barras de desplazamiento no aparecerán nunca. Si usamos esta opción. si el segundo valor es un asterisco... En cuanto a los atributos con los que cuenta la etiqueta FRAME. Asigna un nombre al marco. URL... el margen debe ser dado en pixeles... provoca que el navegador sólo inserte barras de desplazamiento si el contenido del frame ocupa más del espacio dedicado para él. la cual no formará parte del código incluido en la página web. pero lo más importante es solo ubicar las zonas. VI... Indicaremos la dirección. porcentajes o un asterisco. Las barras de desplazamiento aparecerán siempre.. Ajusta el margen superior que debe respetar el contenido de ese frame.. del documento que debe mostrarse en la zona. ya sea información estática o dinámica (información que continuamente se modifica). SCROLLING SCROLLING=”auto” SCROLLING="yes" SCROLLING="no" NORESIZE MARGINHEIGHT MARGINWIDTH FRAMEBORDER Descripción Indica el documento que se mostrará en el frame.La etiqueta que se utiliza para definir que va a haber en los marcos es <FRAME>: Etiqueta de comienzo.. situando el ratón sobre ellos y arrastrarlos. Ajusta el margen lateral que debe respetar el contenido del frame. es un atributo importante puesto que cuando queramos cargar una página en un marco mediante un enlace. si la página ocupa más que el espacio de la ventana dedicado al frame la información que no quepa en un principio no podrá ser vista. es decir si existen 2 columnas por ejemplo y la primera ocupa 20%.. Para el caso específico de estas prácticas. es el hecho de que la etiqueta <FRAMESET> sustituye a <BODY>.. Nota: El asterisco es un carácter que indica al navegador que utilice el resto del espacio que queda libre.2 . Si no se pone este atributo el área reservada estará vacía. El tamaño debe ser dado en pixeles. vamos a utilizar los marcos en el primer ejercicio solo para conocer como se divide la ventana para desplegar diferente información en ella. Uno de los aspectos más importantes a ser considerados. Controla la aparición o no de barras de desplazamiento Valor por defecto.. Al igual que antes. Con el valor cero quita las líneas del marco Los atributos tendrán asignados valores en píxeles. cuando hacemos uso de los marcos. <FRAME> Atributo que despliega las página html asociadas al frame … SRC (source). Por defecto los usuarios pueden mover los bordes de los frames.

copia la carpeta practicaVIa del CD. crea tres páginas web con los nombres:walle.jpg.33%> <FRAME SRC="walle.html. Dentro del directorio computacionII. Paso 2.34%.html"> <FRAME SRC="bicentenario.( Zonas de los Marcos o Frames) Paso 1.html.jpg. recuerda que esto debes realizar utilizando la siguiente etiqueta: <IMG src> como ya lo has realizado en prácticas anteriores. bicentenario. es por ello que deberás eliminar la etiqueta cuando estés construyendo la página robots. Al realizar el ejercicio es necesario ajustar las imágenes con los siguientes atributos Imagen r23po heigth=120% width=120% Imagen bicentenario heigth=550 width=365 Imagen walle heigth=200% width=200 VI. Crea una cuarta página web llamada robots.html.1.jpg o r23po. Paso 4.html y r23po. Revisa con tu profesor como realizar este procedimiento.3 . bajo la ruta que guarda la carpeta de imágenes.html. Dentro de la carpeta practicasVIa.Ejercicio VI. Parte I. para ello deberás buscarlas en internet y posteriormente guardarlas con el nombre de walle. Práctica Paso a Paso. Nota: Recuerda que las imágenes puedes cambiarlas.html"> <FRAME SRC="r23po. Paso 3.html"> </FRAMESET> </HTML> Observa en el código de esta página que al utilizar los marcos o frames no se utiliza la etiqueta <body>.Es necesario que en cada página incluyas la imagen que corresponda al título de cada página web. en la cual construirás un marco con 3 columnas. bicentenario. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <FRAMESET COLS=33%.

doc <BR> <a href=practicaVIa/robots.html> Películas de ROBOTS </a><br> <center> </FIELDSET> Observemos que la etiqueta <fieldset> crea un cuadro alrededor del texto.1 Ahora vamos a recordar brevemente el tema de hiperenlaces.4 . <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. Paso 5.html. Figura VI. y anexaremos un nuevo elemento a la página web que vamos a crear (cuadro alrededor del texto). Finalmente para esta práctica genera una nueva página llamada practicaVIa. VI.Una vez terminado el ejercicio podrás observar en pantalla la siguiente imagen. Dentro de la etiqueta <body> teclea el siguiente código.

el nombre de los archivos será robotI. realiza una copia de la carpeta practicaVIb del CD.html Paso 4.html y despliega los tipos de robots como se observa a continuación. Paso 3.Figura VI. (Zonas estáticas y dinámicas en los Marcos) Paso 1. VI. Parte II. Paso 2. En el directorio computacionII.2 Ejercicio VI.html.html. Crea las páginas de los tipos de robots.5 .html y encabezado.html. Crea una página llamada practicaVIb. robotIII. izquierdo. robotII. Crea tres páginas web llamadas: derecho.2 Práctica Paso a Paso. las cuales contienen texto y una imagen. etc.

Figura VI.3 Observa que cada grupo alimenticio despliega la información respectiva.4 VI. Área Estática Área Estática Área Dinámica Figura VI.6 .

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. Revisaras con tu profesor en que consisten las áreas estáticas y dinámicas en una página web.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots médicos </FONT></H4> <A HREF="robotV.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots androides</FONT></H4> </BODY> </HTML> VI.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados adaptablemente</FONT></H4> <A HREF="robotII. CÓDIGO HTML DE LAS PÁGINAS. Paso 6.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY bgcolor=#F8E0F7> <H2 align=center><font color="#380B61">HABLANDO DE ROBOTS</H2> <center><img src="imagenes/portada.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots con inteligencia artificial </FONT></H4> <A HREF="robotIV.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados por sensores </FONT></H4> <A HREF="robotVI. Ahora vamos a construir el ejercicio. derecho.Paso 5.7 .bmp" height=50% width=30%> </center> <H1 align=center>PLANTEL SAN LORENZO TEZONCO </H1> <BR> <H2 align=center>COMPUTACIÓN II </H2> <H2 align=center>COLEGIO DE CIENCIAS SOCIALES Y HUMANIDADES</H2> <BR> <BR> </FONT> </BODY> </HTML> izquierdo.html" TARGET="principal"><h4><FONT COLOR="#0B3861">Robots controlados por visión </FONT></H4> <A HREF="robotIII.

html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <Frameset rows=17%.border:solid #380B61 3.*> <frame src="practicaVIb/encabezado.8 .html" NORESIZE> <frame src="practicaVIb/derecho.0pt.25pt.html <html> <head> </head> <body bgcolor=#F5EFFB> <table border=1 cellpadding=0 style='marginleft:80.html" NORESIZE > <frameset cols=23%.0pt'> <p align=center style='text-align:center'><Font color=#4B088A size=5> <MARQUEE BEHAVIOR=left >U A C M.encabezado.html" name="principal" NORESIZE> </frameset> </frameset> </HTML> VI.background:#E0E0F8'> <tr> <td width=116 style='width:350.77%> <frame src="practicaVIb/izquierdo. &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.

Figura VI.3. Actividad 1. Diseña un frame horizontal en donde se muestren tres virus comunes.Ejercicio VI.9 .6 VI. Ejercicio Propuesto.

Del lado izquierdo contenga una lista de los 4 elementos a los que puede pertenecer un signo zodiacal: tierra. fuego. Figura VI.10 . aire y agua. Finalmente crea una página que conforme se consulte el elemento despliegue una página que muestre los signos asociados al elemento.Actividad 2. Realiza una página web que contenga un encabezado que como título tenga el nombre de astrología.7 VI.

¿Qué implica no numerar una lista de opciones. que opciones tienes para hacerlo? 3. que opciones tienes para hacerlo? 2.11 . 1. Investigación. ¿Para qué se utiliza una marquesina en una página web? VI. ¿Qué implica numerar una lista de opciones.Ejercicio VI.4.

Sign up to vote on this title
UsefulNot useful