HTML

Imágenes <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Para insertar una imagen es necesario insertar la etiqueta <img> . Dicha etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src .

Por ejemplo, para insertar la siguiente imagen

Habría que escribir:

<img src= "animales.gif" >

Para trabajar de una forma más sencilla y ordenada, es recomendable que todos los documentos html se encuentren en un mismo directorio, y que dentro de este directorio existan diferentes carpetas para agrupar otros objetos, como puede ser una carpeta destinada a almacenar imagenes, o una carpeta destinada a almacenar archivos de audio, etc.

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.

Por ejemplo, si queremos poner una imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:


<img src="mifoto.jpg" width="100" height="100">

EJERCICIOS:

1.- Con la ayuda de tu maestro, diseña en Notepad++ 10 páginas de tema libre que contengan lo siguiente:

- Color de fondo.
- Título de la página.
- Texto.
- 5 imágenes para cada página. Cada imagen deberá presentarse en tres tamaños diferentes: chico, mediano y grande. Por lo consiguiente, cada página contendrá 15 imágenes en total.
- Tus páginas y las imágenes que ocupes deberás guardarlas en una carpeta llamada imagenes.




Cuando termines avisa a tu maestro para que te califique.



Profr. Pedro Manelich Osorio Montes