Página inicial  

Ejercicio paso a paso. Insertar una imagen


Objetivo.

 

Practicar las operaciones que hay que realizar para insertar una imagen.

Si no tienes abierto el Bloc de notas, ábrelo para realizar el ejercicio.

Ejercicio 1.

 

1 Abre el archivo inicio.htm, que se encuentra en la carpeta ejercicios_html/animales.

2 Sustituye la línea

<b> visita aulaclic </b>

que está incluida dentro de un hiperenlace, por la línea

<img src="imagenes/aulaclic.jpg" alt="visita aulaclic" width="90" height="32" border="4">

Con este código estarás asociando el enlace con la imagen aulaclic.jpg que se encuentra en la directorio imagenes dentro de la carpeta animales (la carpeta donde se encuentra el archivo inicio.htm.

La imagen medirá 90 píxeles de ancho, y 32 píxeles de alto (atributos width y height).

Tendrá un borde de 4 píxeles (atributo border), que aparecerá de color rojo, al ser este color el definido para los enlaces de esta página.

En el caso de que la imagen no pueda ser visualizada, o se situe el puntero sobre ella, se mostrará el texto visita aulaclic (atributo alt).

3 Haz clic sobre la opción Guardar del menú Archivo.

4 Abre el documento inicio.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí.

 

Ejercicio 2.

 

1 Abre el documento menu.htm, de la carpeta originales/animales del curso.

2 Guarda la página con el mismo nombre en tu directorio de ejercicios Mis documentos/ejercicios_html/animales

2 Añade delante de la primera etiqueta <p ... la siguiente línea:

<p align="center"><img src="imagenes/logo_animales.gif" width="122" height="85"> </p>

El párrafo se añade para centrar la imagen.

3 Haz clic sobre la opción Guardar del menú Archivo.

4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí.

 

Ejercicio 3.

 

1 Abre el archivo gatos.htm, que se encuentra en la carpeta animales.

2 Añade detrás de la etiqueta </ul> la línea:

<img src="imagenes/gatito.gif" alt="gatito" border="0">

3 Haz clic sobre la opción Guardar del menú Archivo.

4 Abre el documento menu.htm, que acabas de guardar, en un navegador, y comprueba que obtienes una página como la que aparece si pulsas aquí.

No te preocupes por la disposición de la imagen, en el tema de tablas lo arreglaremos.

   
Aviso legal: Uso off-line autorizado a alumnos de aulaClic exclusivamente. No está permitido utilizar estos cursos en academias o centros privados.
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.
Enero-2004. aulaClic.es