7/26/2019 Js e Insertar Una Imagen

1/9

1

3. Js e insertar una imagen en html.

Antes de comenzar a insertar la imagen y

el Js, crea una carpeta con el nombreTrabajo 2.

Dentro de la carpeta de Trabajo 2crea los siguientes archivos.

Estilo.css

Index.htmlInteractividad.js

No recuerdocomo se crea esos

archivos?

7/26/2019 Js e Insertar Una Imagen

2/9

2

Clic derecho dentro de la carpeta de Trabajo 2 Seleccionas Nuevo Documento de texto .

Recuerda que debes de poner el nombre correspondiente al tema.

Al cambiar de formato te muestra el siguiente mensaje, donde debesaceptar.

7/26/2019 Js e Insertar Una Imagen

3/9

3

Luego de tener los archivos creados, ejecutael programa

Presiona sobre los archivos y jala sobre el programa como muestra lasiguiente imagen.

7/26/2019 Js e Insertar Una Imagen

4/9

4

Selecciona el archivo index.html como muestra la siguiente imagen.

Donde digitaremos el siguiente cdigo, para la conexin con los estilos yJavaScript.

Guarda para que te muestre los cambios. Pestaa Archivo Guardar.

7/26/2019 Js e Insertar Una Imagen

5/9

5

Haciendo clic en el siguiente icono del programa.

O haciendo doble clic sobre el archivo index.html

No recuerdo comovisualizar la pgina

web?

Recuerda que debesde guardar cada vez

que haces unamodificacin.

7/26/2019 Js e Insertar Una Imagen

6/9

6

Insertando imagen.

Debes de traer una imagen a la carpeta de trabajo, en este ejemplo este

es mi imagen. Con el nombre de imagen.png

Debes de aumentar el siguiente cdigo en el archivo index.html

Para seguir avanzadodebes de visualizar

tu pgina web.

7/26/2019 Js e Insertar Una Imagen

7/9

7

Insertando JavaScript.

Seleccionamos el archivo Interactividad.js en el programa Brackets.

Debemos digitar el siguiente cdigo al finalizar se guarda.

Para poder visualizareste cdigo,

debemos de realizarcambios en el

archivo index.html

7/26/2019 Js e Insertar Una Imagen

8/9

8

Al archivo index.html el aumentamos el siguiente cdigo.

Que se muestra as.

Al finalizar no te olvides de visualizar tu pgina web.

Recuerda que debesde comprimir la

carpeta de trabajo 2,para enviar al

docente.

7/26/2019 Js e Insertar Una Imagen

9/9

9

Comprimiendo la carpeta.

Seleccionamos la carpeta a comprimir, clic derecho.

Debe de quedar as, listo para enviar.