UAJMS Ejercicios HTML

GUIA DE LABORATORIO #5

1.- Imágenes.
Las imágenes son un elemento esencial para diseñar páginas atractivas. No
obstante, un excesivo número de imágenes en una página pueden hacer que
sea lento el proceso de visualización de la página.
La marca <IMG> no necesita cierre y su sintaxis correcta es:

Taller I - Lic. Octavio Aguilar M. 1

UAJMS Ejercicios HTML

Tamaño de las Imágenes

Con el uso de estos modificadores podemos ampliar, reducir las imágenes sin
deformarlas.
Ejemplo:

El atributo ALT.
El atributo ALT=”texto de sustitución” fue previsto en su origen para
proporcionar un texto de sustitución a los navegadores no gráficos o a aquellos
que tuvieran desactivada la opción de mostrar imágenes.
Ejemplo:

Bordes de la imagen.
Mediante el modificador BORDER se puede añadir bordes a nuestras
imágenes.
Ejemplo:

Taller I - Lic. Octavio Aguilar M. 2

UAJMS Ejercicios HTML

Alineación de texto con las imágenes.

La etiqueta de imagen cuenta también con atributos específicos para su
alineación respecto al texto o a otros elementos de la página.
La alineación se la realiza mediante el atributo ALIGN=”TIPO” donde tipo
tiene los siguientes valores:
 top alinea la imagen con la parte superior del elemento.
 texttop que alinea la imagen con la parte superior del texto de la línea.
 absmiddle que centra la imagen en la mitad del elemento más grande.
 middle que centra sobre la línea base.
 absbottom que alinea la parte inferior de la imagen con la parte inferior
del elemento más grande.
 bottom alinea la parte inferior de la imagen con la parte inferior del
texto.
 baseligne que alinea la parte inferior de la imagen con la línea base.
 Left alinea a la izquierda del texto.
 Right alinea a la derecha del texto.
Ejemplo:

Ahora probamos las siguientes opciones:

Taller I - Lic. Octavio Aguilar M. 3

UAJMS Ejercicios HTML

Espacio alrededor de una imagen.

Se puede agregar una zona (en blanco) alrededor de una imagen para evitar
que se quede pegada al texto o a cualquier otro elemento de la página.
El atributo de la etiqueta de imagen HSPACE=”x” donde “x” se expresa en
pixeles, añade un espacio horizontal a izquierda y derecha de la imagen.
El atributo de la etiqueta VSPACE=”x”, añade espacio vertical encima y
debajo de la imagen.

Taller I - Lic. Octavio Aguilar M. 4

UAJMS Ejercicios HTML

Ejercicios:
2.- Realizar los siguientes Ejercicios:
a)

b)

Taller I - Lic. Octavio Aguilar M. 5

UAJMS Ejercicios HTML

c)

d)

e)

Taller I - Lic. Octavio Aguilar M. 6

UAJMS Ejercicios HTML

f)

h)

Taller I - Lic. Octavio Aguilar M. 7