P a t r o c i n a d o p o r : |
|
|
La etiqueta para incluir una imagen es la siguiente:
<IMG SRC="URL"> (no tiene etiqueta de cierre)
donde URL es la dirección de la
imagen. La URL puede ser relativa o absoluta. Unos ejemplos
aclararán este concepto:
<IMG
SRC="gifs/nido.gif">
se verá como: . Esta es una dirección
relativa.
<IMG
SRC="http://spaceart.com/solar/raw/sat/saturn4.jpg">
insertaría en el lugar del
documento donde hubieras puesto la etiqueta una bonita foto de Saturno con
dos de sus lunas (Tetis y Dione), siempre que estuvieras conectado a
Internet. Esta es una dirección absoluta, ya que la dirección
no depende del directorio donde esté ubicada la página que
la contiene.
Atributos de
IMG
Los atributos de la imagen
pueden ser los siguientes:
- ALT="Texto que aparece
al situar el cursor sobre la imagen"
- También muestra este mismo texto en caso de que el
navegador no cargue la imagen.
- ALIGN=
- Nos indica la posición de la imagen respecto del
texto. Después del signo igual, pueden ir los
valores:
TOP si queremos que el
texto esté alineado con la parte superior de la
imagen
MIDDLE alinea el texto
con la parte central de la imagen
BOTTOM alinea el texto
con la parte inferior de la imagen
LEFT alinea la imagen a
la izquierda de la página forzando la colocación
del texto en la parte derecha y arriba
RIGHT alinea la imagen
en la derecha de la página forzando la colocación
del texto en la parte izquierda y arriba.
Si se quiere interrumpir el proceso de
rellenado del texto a los lados de la imagen, para
que salte hasta debajo de ella, es decir, dejar un
espacio en blanco parcialmente, se pueden emplear las
siguientes extensiones de la etiqueta <br>:
<br clear
=left > Busca el primer
margen libre (clear) a la izquierda.
<br clear =
right> Busca el primer
margen libre a la derecha.
<br clear
=all > Busca el primer
margen libre a ambos lados.
- WIDTH=80, HEIGTH=100
- Indican la anchura y altura de la imagen en píxels,
en este caso 80x100 píxels.
-
Si
especificamos las dimensiones de las imágenes, las
páginas se cargan más rápido, debido a que el
navegador reserva el espacio para ellas y sigue
cargando el texto
- BORDER=2
- Añade un borde, a modo de marco, a la imagen. En
este caso de 2 píxels.
- HSPACE=10 , VSPACE=15
- Especifican el espacio horizontal y vertical que
separa la imagen del texto que la rodea, en este caso
10 píxels horizontales y 15 verticales
Formatos de imágenes
Existen muchos formatos para guardar imágenes que tienen
diferentes extensiones bmp, tiff, dib,
wmf, etc. En internet se usan básicamente dos: GIF y JPG. Ambos formatos comprimen las imágenes para
reducir su tamaño, de este modo se asegura una transferencia
más rápida por la red. Esto es importante, ya que si la
imagen se tarda en cargar, es posible que el visitante de
nuestra pàgina la abandone por ello. En los casos en que es
necesario poner una imagen con una resolución elevada para
ver los detalles, es mejor colocar una imagen pequeña y
usarla como enlace que nos conduzca a la imagen final. De ese
modo el visitante ya sabe la imagen que va a cargar y puede
ser más paciente.
Esto se hace como vimos en la página de enlaces
<a href="URL de la
imagen final"><img src="URL de la imagen que
se ve con la página"></a>
Formato GIF
El formato GIF usa
256 colores y se emplea sobretodo con imágenes pequeñas como iconos. No se
suele usar con fotos porque da más calidad el formato JPG. Aunque el
formato GIF no tiene pérdidas de calidad en la compresión, es decir
muestra la imagen tal como es en formato bmp por ejemplo, pero reduciendo su
tamaño considerablemente.
Tiene dos características que lo hacen muy atractivo para el
diseño de las páginas Web.
Una de
ellas, es que uno de sus colores se puede hacer transparente
(en el subformato Gif89a), no mostrándose en la pantalla. Si
se elige el color que bordea el motivo principal da la
sensación de que la imagen tiene la forma de ese motivo ( en
realidad todas las imágenes son rectangulares). Puedes ver
ese efecto en las pequeñas imágenes que adornan este
manual.
Para hacer transparente un color hay que usar editores de
imágenes, como por ejemplo:
LView en http://www.lview.com (Shareware, 21 días de prueba, 1.36 Mb)
Paint
Shop Pro en http://www.jasc.com
(Shareware, 30 días, 3.1 Mb)
o el más profesional Adobe Photoshop
Otra
característica, es que se pueden ensamblar varias imágenes,
que se muestran como si fuera una sola, de modo que da la sensación
de movimiento. Estas imágenes se llaman Gifs
animados y como ves también se pueden hacer
transparentes. Hay programas específicos para hacer Gifs
animados, algunos son:
GIF Construction Set en http://www.mindworkshop.com/alchemy/gifcon.html (1.46 Mb, Shareware)
WWW
Gif Animator en http://stud1.tuwien.ac.at/~e8925005/ (277 Kb, Shareware)
También puedes encontrar imágenes ya creadas de todos
los tipos en algunas páginas de Internet, que son como
bibliotecas de imágenes. Puedes mirar en
Icon Bazaar (http://www.iconbazaar.com/)
Rose's Backgrounds Archive (http://www.wanderers2.com/rose/animate.html)
Free graphics wonderland (http://www.jetlink.net/~gini/)
Rainfrog's Web Art (http://www.rainfrog.com/webart)
Fairy's Free Icons (http://www.dewa.com/freeicon)
GIF Animation Designs (http://www.webpromotion.com/stock.html
Icon Gallery (http://cool.deu.net/galerie/icon/menue_noframe.htm)
Over the Rainbow (http://www.geocities.com/SiliconValley/Heights/1272/rainbow.html)
Formato JPG
El formato JPG
usa 16.7 millones de colores, por lo que se emplea con
imágenes de alta resolución. Con este formato se obtiene un
grado de compresión más alto que con el GIF y además ésta
se puede regular: Cuanto mayor sea la compresión, más
pérdida de calidad, respecto de la imagen original.
De hecho cada vez que abrimos y guardamos de nuevo una imagen en formato JPG,
distorsionamos un poco la imagen.
Todas las fotos de buena
calidad usan este formato.
Imágenes entrelazadas (GIF) y
progresivas (JPG)
Cuando se carga una imagen normal en el navegador, éste
va mostrándola de arriba a abajo . Se puede conseguir que se
visualize por capas. En la primera capa vemos la imagen de un
modo borroso y luego se va haciendo cada vez más nítida.
Esto tiene la ventaja de que se da uno cuenta enseguida, del
tema de la imagen y si no es lo que buscas, puedes interrumpir
la descarga. Se puede conseguir en los dos formatos y es una
característica muy conveniente en las imágenes web
Ejemplos
Esta imagen tiene los
atributos: align=left , hspace=10 ,
width=250 , hight=170 , border=1 , alt="Mono" y
como quiero que después de estos comentarios el texto salte
debajo de la imagen escribo:
<br clear=all>
Como ves, ésto está debajo de la foto
Esta otra tiene
los atributos: align=right , hspace=1 ,
border=5 , alt=" Aguila" width=250 , height=165.
También debería de escribir <br
clear=all > para que el final de página aparezca en su
sitio. Como no lo hago queda a la izquierda de la imagen. Fíjate
en el borde
|