Antes de iniciar el turorial, te muestro las dos imagenes que se emplearán, con la intención de que las "bajes" y puedas emplearlas durante el tutorial:
Imagen: "img1.jpg":
Imagen: "img2.jpg":
En caso de que no sepas como "bajarlas" a tu PC, pues simplemente coloca el apuntador del mouse encima de la imagen a bajar, has clic derecho y del menú que aparecerá elige la opción: "Guardar imagen como..." y listo, además te sugiero crear una carpeta y ahí ve depositando todo los elementos que iremos tratando.
Paso #1. Para crear la página Web emplearemos el "Bloc de Notas", y para ello, se tienen varias formas de accederlo, una de ellas y es la que te aconsejo usar, es la siguiente: Oprime las teclas "Windows" y la tecla "R", debiendo aparecer una pequeña ventana llamada "Ejecutar" (parte inferior izquierda de la pantalla), en la cual teclea la palabra "notepad", tal como se observa en la siguiente imagen:
Enseguida aparecerá la ventana del Bloc de Notas, en la cual teclea el siguiente código (etiquetas del HTML), y llámale PAGWEB01.HTML:
Te recomiendo copies exactamente igual, para asegurar que todo funcione correctamente, enseguida te explicaré la función de cada una de las etiquetas empleadas.
La etiqueta <HTML>...</HTML>, indica el inicio y término de una página Web.
La etiqueta <HEAD>...</HEAD>, se refiere al encabezado de la página Web, y en el cual, se especifica el título de la página: <TITLE>...</TITLE>, que en nuestro caso, el título de la página Web es: "Página Web #1 -Reemplazo de imágenes".
La etiqueta <BODY>...</BODY>, nos indica el inicio del cuerpo de la página Web, es decir, donde se plasmarán la mayoría de las etiquetas HTML que iremos conociendo a lo largo del semestre.
La etiqueta <CENTER>...</CENTER>, permite centrar el texto definido entre esta etiqueta.
La etiqueta <IMG .../>, permite insertar una imagen en la página Web, el atributo SRC (Source), define la ubicación y nombre de la imagen a insertar, el atributo onMouseover permite reemplazar la imagen mostrada por la imagen que se especifica en el parámetro: this.src al momento de colocar el puntero del Mouse sobre la imagen previa, y el atributo onMouseout permite reemplazar la imagen del onMouseover por la imagen declarada en su this.src al retirar el puntero del Mouse de la imagen mostrada.
El par de etiquetas <P><BR>, permite insertar un renglón en blanco.
La etiqueta <FONT>...</FONT>, permite declarar diferentes atributos para el texto a utilizar. El atributo color permite definir el color de la fuente, el atributo size permite definir el tamaño de la fuente, y el atributo face permite establecer el tipo de la fuente.
Paso #2. Salvar o guardar el archivo. El guardado del archivo es muy importante, ya que es muy diferente como lo has estado haciendo. Al momento de definir el nombre del archivo es muy importante indicar que su extensión sea: ".HTML" y su tipo debe ser la 2a. opción: "Todos los archivos (*.*)", tal como se muestra enseguida:
Además, asegúrate de colocar la página Web en la misma carpeta donde tienes las imágenes involucradas, así que tu carpeta deberá de lucir tal como se muestra enseguida:
Tal ves, el icono de la página Web sea diferente, ya que depende del Navegador que tengas por omisión, en tu PC. Puede ser Google Chrome, o FireFox, o quizás otro:
Paso #3. Ejecutar la página Web. Para ejecutar la página Web, simplemente da doble clic encima del icono que la representa, debiendo mostrarse igual a la siguiente imagen:
Recuerda, para que la página Web pueda ser interpretada por un Navegador, no se requiere señal de Internet, basta que tengas instalados los Navegadores pertinentes en tu PC.
Y ahora, mueve el mouse y colócalo encima (onMouseover) de la imagen mostrada y observarás el reemplazo de la imagen, tal como se observa enseguida:
y ahora, mueve el apuntador del mouse fuera (onMouseout) de la imagen, y listo hemos terminado, espero te sea de utilidad todo este menjurje.
Paso #1. Para crear la página Web emplearemos el "Bloc de Notas", y para ello, se tienen varias formas de accederlo, una de ellas y es la que te aconsejo usar, es la siguiente: Oprime las teclas "Windows" y la tecla "R", debiendo aparecer una pequeña ventana llamada "Ejecutar" (parte inferior izquierda de la pantalla), en la cual teclea la palabra "notepad", tal como se observa en la siguiente imagen:
En caso de que no observes claramente las imágenes mostradas, puedes dar clic sobre de ellas y podrás observarlas mejor, ya que aumentan de tamaño.
Enseguida aparecerá la ventana del Bloc de Notas, en la cual teclea el siguiente código (etiquetas del HTML), y llámale PAGWEB01.HTML:
Te recomiendo copies exactamente igual, para asegurar que todo funcione correctamente, enseguida te explicaré la función de cada una de las etiquetas empleadas.
La etiqueta <HTML>...</HTML>, indica el inicio y término de una página Web.
La etiqueta <HEAD>...</HEAD>, se refiere al encabezado de la página Web, y en el cual, se especifica el título de la página: <TITLE>...</TITLE>, que en nuestro caso, el título de la página Web es: "Página Web #1 -Reemplazo de imágenes".
La etiqueta <BODY>...</BODY>, nos indica el inicio del cuerpo de la página Web, es decir, donde se plasmarán la mayoría de las etiquetas HTML que iremos conociendo a lo largo del semestre.
La etiqueta <CENTER>...</CENTER>, permite centrar el texto definido entre esta etiqueta.
La etiqueta <IMG .../>, permite insertar una imagen en la página Web, el atributo SRC (Source), define la ubicación y nombre de la imagen a insertar, el atributo onMouseover permite reemplazar la imagen mostrada por la imagen que se especifica en el parámetro: this.src al momento de colocar el puntero del Mouse sobre la imagen previa, y el atributo onMouseout permite reemplazar la imagen del onMouseover por la imagen declarada en su this.src al retirar el puntero del Mouse de la imagen mostrada.
El par de etiquetas <P><BR>, permite insertar un renglón en blanco.
La etiqueta <FONT>...</FONT>, permite declarar diferentes atributos para el texto a utilizar. El atributo color permite definir el color de la fuente, el atributo size permite definir el tamaño de la fuente, y el atributo face permite establecer el tipo de la fuente.
Paso #2. Salvar o guardar el archivo. El guardado del archivo es muy importante, ya que es muy diferente como lo has estado haciendo. Al momento de definir el nombre del archivo es muy importante indicar que su extensión sea: ".HTML" y su tipo debe ser la 2a. opción: "Todos los archivos (*.*)", tal como se muestra enseguida:
Además, asegúrate de colocar la página Web en la misma carpeta donde tienes las imágenes involucradas, así que tu carpeta deberá de lucir tal como se muestra enseguida:
Tal ves, el icono de la página Web sea diferente, ya que depende del Navegador que tengas por omisión, en tu PC. Puede ser Google Chrome, o FireFox, o quizás otro:
| Google Chrome | FireFox |
 |  |
Paso #3. Ejecutar la página Web. Para ejecutar la página Web, simplemente da doble clic encima del icono que la representa, debiendo mostrarse igual a la siguiente imagen:
Recuerda, para que la página Web pueda ser interpretada por un Navegador, no se requiere señal de Internet, basta que tengas instalados los Navegadores pertinentes en tu PC.
Y ahora, mueve el mouse y colócalo encima (onMouseover) de la imagen mostrada y observarás el reemplazo de la imagen, tal como se observa enseguida:
y ahora, mueve el apuntador del mouse fuera (onMouseout) de la imagen, y listo hemos terminado, espero te sea de utilidad todo este menjurje.
Atte. profmontiel
