Marcos con editor de Texto
Anuncio
Actividad: Segundo laboratorio: páginas de marcos usando notepad Título de la actividad: Tablas, ligas y marcos Duración: 105 minutos Objetivo: Crear una página Web con marcos utilizando el editor de texto. Materiales: Una computadora con sistema operativo Windows, block de notas, navegador (Explorer, Firefox o Google Chrome) y una USB (para guardar tus laboratorios). Tarea previa: Haber realizado el laboratorio 1 para saber crear páginas web con tan sólo el block de notas Páginas web de referencia: http://www.pagetutor.com http://www.pagetutor.com/table_tutor/index.html http://www.pagetutor.com/frames_tutor/index.html http://www.pagetutor.com/colorpicker/index.html http://www.mcescher.com Ligas. Empecemos por las ligas a otros documentos o páginas web. Dentro de una página web normal escribamos el texto que vamos a hacer “sensible” para que nos lleve a otra página. Tomaremos nuestra página de “hola mundo” para no volver a escribir desde cero. <html> <head> <title> Mi primer p&aacute;gina Web </title> </head> <body> Hola Mundo. </body> </html> Escribiremos ahora el texto que nos va a servir de liga. (Recuerda, por facilidad he omitido las instrucciones básicas y sólo presento el cuerpo del documento. <body> Hola Mundo.<P> Ahora escribir&eacute; el texto que queremos hacer sensible. </body> El siguiente paso es introducir la instrucción para las ligas. <body> Hola Mundo.<P> <a href=””> Ahora escribir&eacute; el texto que queremos hacer sensible. </a> </body> Y por supuesto tengo que ponerle una dirección. <body> Hola Mundo.<P> <a href=”http://www.mcescher.com”> Ahora escribir&eacute; el texto que queremos hacer sensible. </a> </body> Claro que se vería mejor si les dijera cómo se llama la página a la que los voy a referir: <body> Hola Mundo.<P> <a href=”http://www.mcescher.com”> La p&aacute;gina del artista M. C. Escher </a> </body> Ahora sí guarda y prueba. Si no funcionó, revisa tu trabajo, asegúrate de no haber utilizado comas en vez de puntos, que los caracteres y las instrucciones sean como en el ejemplo. Intenta hacer ligas para: Facebook: http://www.facebook.com Google: http://www.google.com Yahoo: http://www.yahoo.com ¿Cuál es tu página favorita? Haz una liga a ella. Tablas. Ahora vamos a crear una tabla en nuestro documento. La instrucción básica para crear una tabla es: <table>, y en html las tablas se arman primero en renglones (<tr>) y después en celdas (<td>) contenidas en cada renglón. Así que vamos a crear una tabla de un renglón y una columna o celda. Para dejar en blanco una celda tenemos que colocar un espacio en blanco, como siempre, no basta con apretar la barra espaciadora para crearlo, por lo que utilizaremos el código especial para este carácter: &nbsp; . Regresemos a nuestra primer página: <body> Hola Mundo.<P> <table> <tr> <td> &nbsp; </td> <tr> </table> </body> Si guardas tu trabajo y lo visualizas en tu navegador, descubrirás que no se ve nada. <body> Hola Mundo.<P> <table border=“1”> <tr> <td> Gabriel</td> <tr> </table> </body> Ahora sí, guarda y revisa tu trabajo. ¿Qué sucede si cambiamos el ancho del borde? <body> Hola Mundo.<P> <table border=“25”> <tr> <td> Gabriel</td> <tr> </table> </body> Ahora vamos a crear una tabla con un renglón y dos columnas. <body> Hola Mundo.<P> <table border=“1”> <tr> <td> Gabriel</td> <td> Tomich</td> <tr> </table> </body> Checa tu trabajo. Ahora una tabla de dos renglones y una columna en la que cada una de las celdas contenga una liga a una página. <body> Hola Mundo.<P> <table border=“1”> <tr> <td> <a href=“http://www.google.com”>Google</a> </td> <tr> <tr> <td> <a href=“http://www.facebook.com”>Facebook</a> </td> <tr> </table> </body> Guarda y verifica tu trabajo. Marcos. Llegamos a la recta final del laboratorio. Como sugerencia vamos a crear un esqueleto de una página genérica de html, el cuál utilizaremos como “machote” y así no tendrás que crear desde cero cada página. Por cierto, además de programas como el “Dream Weaver” hay otros programas para la creación de páginas. Uno de ellos es gratuito y funciona en Windows, Mac, Linux, etc. Se llama “Arachnophilia” y lo puedes encontrar en: http://www.arachnoid.com/arachnophilia/ aunque sí tienes que escribir código. <html> <head> <title> Machote </title> </head> <body> Este es un documento base. </body> </html> Guárdalo como html en una carpeta que se llame “marcos”. ¿Has visto que utilizo la página de M. C. Escher como referencia? Bueno, no es coincidencia, ésta es un claro ejemplo de lo que es una página de marcos. Quiero que te imagines los marcos como un desayuno. La mesera o mesero te traen lo que pediste, un desayuno universitario: Jugo o fruta, molletes y café. El problema es que no tienes mesa. ¿Cómo le vas a hacer para comer? Ahora te explico la analogía. Si cada cosa de las que te llevan es una página web separada, ¿cómo las puedes presentar todas al mismo tiempo? Es fácil, como el desayuno te lo sirven en una mesa, la página de marcos es “la charola” en la que te presentarán todas las páginas a la vez. Ahora vamos a crear cuatro documentos separados. 1. <html> <head> <title> Marco izquierdo </title> </head> <body> Aqu&iacute; presentaremos la “barra de navegación”. </body> </html> Guárdala como “left.html” 2. <html> <head> <title> Banner </title> </head> <body> Aqu&iacute; presentaremos el encabezado. </body> </html> Guárdala como “banner.html” 3. <html> <head> <title> Main frame </title> </head> <body> Aqu&iacute; presentaremos la “P&aacute;gina principal”. </body> </html> Guárdala como “main.html” 4. <html> <head> <title> Frames </title> </head> <body> Esta página la vamos a modificar para contener a las otras tres. </body> </html> Guárdala como “frames.html” Elimina las etiquetas de “body” y sustitúyelas por <frameset> <html> <head> <title> Frames </title> </head> <frameset> </frameset> </html> Ahora le vamos a pedir trabajar con dos columnas. <frameset cols=”50%,*”> <frame src=”left.html”> <frame src=”banner.html”> </frameset> Guarda y ve lo que hiciste. <frameset cols=”250,*”> <frame src=”left.html”> <frame src=”banner.html”> </frameset> Guarda y ve los cambios realizados. Cuando utilizas el % estás distribuyendo en porcentajes, mientras que si utilizas un número estás utilizando pixeles. * representa “el resto” o “lo que falta”. Bien, ahora utilicemos 3 columnas. <frameset cols=”33%,33%,*”> <frame src=”left.html”> <frame src=”banner.html”> <frame src=”main.html”> </frameset> Nuevamente guarda tu trabajo y verifícalo en el navegador. Ahora cambiaremos columnas por filas: <frameset rows=”33%,33%,*”> <frame src=”left.html”> <frame src=”banner.html”> <frame src=”main.html”> </frameset> Otra vez, guarda y verifica. Ya casi terminamos… Lo que falta sería hacer una combinación de columnas y filas para obtener algo similar a la página de Escher. <frameset cols=”300,*> <frame src=”left.html”> </frameset> Continuamos con los cambios. Dividiremos la columna derecha en dos filas. <frameset cols=”300,*> <frame src=”left.html”> <frameset rows=“200,*”> </frameset> </frameset> Ahora llamaremos a las páginas de la columna derecha <frameset cols=”300,*> <frame src=”left.html”> <frameset rows=“200,*”> <frame src=”banner.html”> <frame src=”main.html”> </frameset> </frameset> Guarda y verifica el resultado. Hasta aquí el laboratorio de marcos. Esta es una tarea opcional. Te reto: Crea una bandera de México utilizando exclusivamente el block de notas. Temas de expansión: • • • • • • • • • Ligas al marco principal Ligas a documentos dentro de la misma carpeta Ligas a una nueva ventana Ligas fuera de la página actual Cambiar el color de las ligas Botones mágicos Java Script Mapas en html Consultar código de las páginas en Internet Autoevaluación: ¿Puedes crear una tabla? ¿Puedes crear ligas a otras páginas? ¿Puedes crear una página de marcos en columnas? ¿Puedes crear una página de marcos con filas? ¿Puedes crear una página de marcos con filas y columnas?
