Entrada al curso

 

   
Configuración: Edición, espacio y controles

Práctica 5:

Para realizar esta práctica bastará usar el navegador, si éste dispone de la opción de edición del código, pero si no la tiene habrá que usar, además, algún editor de texto. 

En esta página se supone que se usa el Bloc de notas de Windows que es el editor que suele usar Internet Explorer, al que se accede con la opción Código fuente del menú Ver

Crear el fichero del proyecto

  • En primer lugar se abre con el navegador la página ejercicio_3.htm, que es la página donde se encuentra toda la información que va a ser tratada en el Proyecto de esta práctica.  El archivo se encuentra en la carpeta Ejercicios de este Curso Básico.

  • A continuación, desde el menú Archivo de la barra de herramientas, se selecciona Guardar como... y se guarda el archivo en la misma carpeta pero con el nombre Proyecto_p3 y tipo Página Web completa (*.htm, *.html). Puede comprobarse que se ha creado en la carpeta Ejercicios el fichero Proyecto_p3.htm y la subcarpeta correspondiente Proyecto_p3_archivos que contiene todos las imágenes que lleva incorporadas la página.

 

Abrir el fichero del proyecto

  • A continuación se abre con el navegador la página Proyecto_p3.htm que es sobre la que se realizarán las modificaciones citadas en el Proyecto de esta práctica con el objeto de dejar inalterada la página ejercicio_3.htm que solo sirve de modelo.

  • Una vez realizadas las acciones anteriores, será cuando se abra el código HTML bien con la opción Código fuente desde el menú Ver del navegador, con lo que se abrirá el Bloc de notas que mostrará el código HTML de la página activa, o usando cualquier otro editor de texto TXT.

Si el navegador que se está utilizando no permite editar el código de la página debe usarse un editor de texto que permita guardarlo en modo TXT, es decir sólo los códigos de los caracteres, sin atributos (color, tamaño...).
   

Modificar el nombre de la página HTML

  • Se modificará  la etiqueta <TITLE> en el código HTML de la página. Dentro de la etiqueta  debe sustituirse Ejercicio 3 por Proyecto Práctica 3. Es fácil de localizar pues se haya al principio del texto dentro de la estructura de cabecera <HEAD> </HEAD>

  • Es aconsejable que, cada vez que se realice una modificación, y no se desee perderla, se guarde acudiendo al menú Archivo y a Guardar, sin necesidad de cerrar el Bloc de notas en caso de desear continuar realizando modificaciones.

La selección horizontal de una pequeña cantidad de texto se realiza haciendo "clic izquierdo" con el ratón  exactamente en el comienzo del texto y sin levantar el dedo del pulsador arrastrar horizontalmente hasta cubrirlo todo.

Modificar algunas expresiones de texto

  • A continuación se localiza el texto del encabezado "Teorema de Pitágoras" y se sustituye por el de "Triángulos rectángulos: Teorema de Pitágoras".

 

De la misma manera se sustituye el sub-encabezado Geometría  por  Primer Ciclo ESO.

  • Casi al final del archivo de texto HTML se pueden localizar los lugares en los que aparecen: Fecha, Autor/a, Curso y CCAA.

También procedemos a su localización con la herramienta de búsqueda del Bloc de Notas. Las imágenes sucesivas muestran sus localizaciones:

En esta parte debe aparecer: la fecha en la que se haya empezado a realizar las modificaciones, en el formato dd/mm/aaaa; el nombre y apellidos de la persona que realice las modificaciones, el nombre del curso y el nombre de la Comunidad Autónoma donde se realiza el curso.

  • A continuación se puede cerrar el Bloc de notas, guardando los cambios, y se regresa a la ventana del navegador, se actualiza la vista de la página y se observarán los cambios efectuados. Comprobar que el aspecto de la página que se ve en el navegador corresponde con las imágenes mostradas en el apartado Proyecto de esta Práctica.

El Bloc de Notas permite localizar fácilmente  la información del fichero HTML utilizando la herramienta de búsqueda de que dispone. Es lo que se aconseja para la localización de texto dentro de la estructura <BODY> </BODY>.

Mejor que escribir todo el texto a localizar, como expresión de búsqueda es preferible poner una o dos de las palabras contiguas  más características ya que el texto en el fichero HTML suele estar fraccionado y muchas palabras seguidas pueden encontrarse separadas en líneas distintas de código. También hay que tener en cuenta que el texto suele ir entre etiquetas para producir sobre él un formato especial.

Pulsando sucesivamente el botón rotulado 'Buscar siguiente' se está forzando al buscador a seguir buscando en la misma dirección (hacia abajo o hacia arriba).

Cambiar una imagen por otra

  • El sello dedicado a Pitágoras ha de cambiarse por una imagen de su busto esculpido.

 

Fichero: pitsello.jpg

Fichero: pytagoras.jpg

Si ambos archivos se encontraran en la misma carpeta solamente cambiamos en el lugar correspondiente del código HTML el nombre Pitsello.jpg por el de pytagoras.jpg. Una vez guardado el cambio, se cierra el Bloc de Notas y se comprueba desde el navegador que dicho cambio se ha producido.

Pero este no es el caso. Cuando se creó el fichero proyecto_p3.htm, utilizando la opción Guardar como... del menú Archivo del navegador se creó simultáneamente la carpeta proyecto_p3_archivos pero esta carpeta sólo contiene las imágenes insertadas en la página. En la página que se guardó no estaba la imagen pytagoras.jpg. Es más conveniente desde el punto de vista organizativo que esta imagen esté en la carpeta proyecto_p3_archivos por lo que será necesario que hagamos una copia de pytagoras.jpg desde la carpeta ejercicio_3_archivos a la carpeta proyecto_p3_archivos.

Una vez echa la copia se, en la ventana del navegador se selecciona la opción Código fuente del menú Ver. Una vez abierto el Bloc de Notas se busca el término pitsello.jpg y una vez localizado se cambia por Pytagoras.jpg

 

 

Cambiar una imagen de lugar

  Los dos cuadrados que aparecen en el apartado de la demostración del teorema de Pitágoras son un único archivo de imagen llamado Pitagoras.gif. Se desea cambiar la posición de dicha imagen para colocarla a continuación de la primera línea de texto del citado apartado.

  En este caso se abre el Bloc de Notas con el código HTML de la página correspondiente y  se siguen los pasos siguientes:

  • Se selecciona el texto que corresponde a la imagen. Se necesita mantener la información en código HTML, para mantener las propiedades de la imagen y su alineación.

  • Se corta esta selección (se manda al portapapeles). Esto puede hacerse desde el menú Edición del Bloc de notas y seleccionarse la opción cortar, o bien pulsando el botón derecho del ratón cuando se tenga el cursor sobre el texto seleccionado y seleccionando cortar en el menú emergente que aparece.

  • Una vez realizado lo anterior, se coloca el cursor en el lugar donde se desea insertar el texto seleccionado y cortado. Se elige Pegar en el menú Edición, o bien se pulsa el botón derecho del ratón y se elige Pegar del menú emergente que aparece.

Para localizar el lugar exacto donde se debe de pegar el código HTML que representa la imagen pitágoras.gif, basta observar con el navegador este sitio y fijarnos en algún texto del entorno que sirva de expresión de búsqueda, por ejemplo, "se demuestra".

A continuación seleccionamos la opción Código fuente en el menú Ver del navegador y una vez abierto el Bloc de Notas buscamos el lugar

El código que se encuentra en el portapapeles tiene que ser pegado en una línea abierta después del primer párrafo de la demostración. Los pasos a seguir son:

  1. Situar el cursor después del punto y aparte del primer párrafo.

  2. Pulsar la tecla <Intro> o de retorno del teclado. El cursor pasa a la línea siguiente y la abre dejando un espacio libre.

  3. En el menú Edición del Bloc de notas se selecciona la opción Pegar.

  • Finalmente se guardan los cambios y se actualiza la vista de la página desde el navegador para comprobar que dichos cambios han surtido efecto.

 

     
© Ministerio de Educación y Ciencia. Año 2004