|
En este ejercicio se agregarán imágenes a los documentos. Para hacerlo,
se utilizará la etiqueta <img> con uno o más
atributos. La forma básica de emplear esta etiqueta es: <img
src="url">. Donde el atributo src (del inglés
Source que significa fuente) contiene como valor un
url . Este url indica la dirección y el
nombre de la imagen que se desea insertar.Esta dirección puede ser
absoluta o relativa. La imagen puede estar en cualquiera de los formatos
que reconocen los navegadores (jpg, gif, png, etc.).
Existen otros atributos que no son obligatorios pero es recomendable usarlos
dentro de las etiquetas <IMG>. Estos atributos son:
-
El atributo alt (del ingles alternate que
significa alternativo) indica el texto que se observa cuando el
navegador no puede mostrar la imagen
-
Los atributos width y height (que
significan ancho y alto en inglés respectivamente) sirven para
especificar o modificar el tamaño de la imagen,. El siguiente es un
ejemplo completo:
|
<img
src="http://www.it.uc3m.es/pics/gif/c3mlogop.gif"
alt="Logotipo de la Universidad Carlos III de Madrid"
height="60" width="60">
|
|
Hay otros muchos atributos que se pueden aplicar a la etiqueta
<img> y que no son tan frecuentes:
-
El atributo align (que singnifica alinear en inglés)
permite especificar con detalle la forma de alinear las imágenes con
respecto al texto. Las imágenes por defecto están alineadas de
tal forma que la parte inferior de cada imagen coincide con la base
de la línea de texto (la línea sobre la que se situan los caracteres,
sin considerar los caracteres con trazos hacia abajo, como en el caso
de p, q, j, g, y), pero esto se puede modificar dando
distintos valores al atributo align.
-
El atributo border (que significa borde o margen en
inglés) sirve para cambiar el espacio que rodea a una imagen. Para
hacerlo se utiliza el atributo border=número, el
número indica el espacio de separación medido en pixels. En
particular, cuando la imagen es parte de un hiperenlace el borde que
se define con este atributo tendrá el mismo color que los
hiperenlaces. Este borde de color se puede eliminar danto al atributo
BORDER el valor cero.
A continuación mostramos una tabla resumen de los valores que pueden
tomar estos atributos y de su efecto sobre las imágenes. Hemos rodeado la
imagen de la carpeta de texto para que compruebes la alineación relativa.
| Atributo |
Valor del atributo |
Estilo |
Ejemplo |
| ALIGN |
<img ALIGN="texttop">
|
La parte superior de la imagen se alinea con la parte superior
del texto
|
pppp  dddd
|
| <img ALIGN="absmiddle"> |
El centro (en altura) de la imagen se alinea con el centro
(también en altura) del texto.
|
pppp dddd
|
| <img ALIGN="center"> |
La línea base del texto se alinea con el centro (en altura)
de la imagen
|
pppp dddd
|
| <img ALIGN="absbottom"> |
La parte inferior de la imagen se alinea con la parte inferior del
texto (incluyendo los trazos inferiores de letras como la
y o la p)
|
pppp dddd
|
| <img ALIGN="left"> |
La imagen aparece a la izquierda de la página, el texto
aparece a su derecha.
|
pppp dddd |
| <img ALIGN="right"> |
La imagen aparece a la derecha de la página, el texto aparece
a su izquierda.
|
pppp dddd |
| BORDER |
<img BORDER="0"> |
Anchura del marco exterior. Valor="0" indica que no hay
marco (coincide con el valor por defecto cuando no aparece el
atributo BORDER)
|
pppp dddd
|
| <img BORDER="3"> |
Anchura del marco exterior = 3 pixel . Puede tomar cualquier
valor numérico
|
pppp dddd
|
Ejercicio
Tarea
Practica la etiqueta <img> y sus atributos
alt, width y height con el editor interactivo.
Procedimiento
- Abre el editor interactivo pulsando aquí.
- Escribe en el lado izquierdo el siguiente código HTML:
<html>
<body>
<h3>Imágenes y sus atributos</h3>
<p>
Es posible insertar imágenes en los documentos HTML, para ello se utiliza
la etiqueta IMG:
<IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
alt="Un ejemplo de icono">.
</p>
<p>
Se puede modificar el tamaño de la imagen, para ello se emplean los
atributos <TT>HEIGHT</TT> y <TT>WIDTH</TT>:
<ul>
<li>
Esta imagen está en su tamaño real:
<IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
height="33" width="32"
alt="Un ejemplo de imagen">
</li>
<li>
Esta imagen está al doble de su tamaño:
<IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
height="66" width="64"
alt="Un ejemplo de imagen">
</li>
<li>
El tamaño de esta imagen no es proporcional a su tamaño real:
<IMG SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
height="33" width="70"
alt="Un ejemplo de imagen">
</li>
</ul>
</p>
<p>
Las imágenes se pueden alinear de distintas formas con el texto
utilizando el atributo <tt>ALIGN</tt>. Esta imagen está
alineada a la derecha<br>
<IMG ALIGN="right"
SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
height="33" width="32" alt="Un ejemplo de imagen">
</p>
<p>
Las imágenes pueden estar enmarcadas por un borde de distintos tamaños
utilizando el atributo <tt>BORDER</tt>.
Esta imagen tiene un borde de tamaño uno.
<IMG BORDER="1"
SRC="http://www.it.uc3m.es/pics/cartoons/bear1.gif"
height="33" width="32" alt="Un ejemplo de imagen">
</p>
</body>
</html>
- Guarda los cambios y vuelve a cargar la página en el navegador.
|
.
