Antes de empezar a decirte como se inserta una imágenen en tu pagina WEb primero te enseñare como esta la puedes guardar en tu
dísco duro.
1.Hacer click con el botón derecho sobre la imagen.
2.Elija "guardar como..." (save as...) del menú archivo
3.Darle la dirección de el directorio donde lo quiere guardar y salve.
Las imágenes son un elemento muy importante para nuestra pagina WEB, ya que la adornan y la
enbellécen, pero hay dos aspectos que debemos tener en cuenta:
La primera es que el tiempo de descarga de una imagen es lento, lo cual quiere decir que si llenamos nuestra pagina de
imágenes va a demorar mucho en descargarse completamente lo cual puede hacer que la persona si salga sin llegar a ver el contenido de esta. Es por esto que se dice que las imágenes en la Web son un arma de doble filo. Una buena imagen puede llamar la atención y ser de gran utilidad para ilustrar o para atraer visitantes, pero una imagen mala o muy pesada (es decir, un archivo de muchos kilobytes de tamaño) puede espantar hasta al más voluntarioso de los navegantes.
La segunda es que el visitante haya deshabilitado la carga automática de imágenes lo cual podría ser muy perjudicial si hemos escogido imagenes para explicacion de algo, o como link,etc.
En cuanto a las imagenes existen dos formatos fundamentales que nos proporcionan el mejor uso: GIF (llamado así por sus siglas en inglés, Graphic Interchange Format) y JPEG (iniciales del grupo que lo desarrolló, el Joint Photograph Expert Group).
El formato GIF fue creado por la empresa CompuServe, para que sus usuarios pudieran intercambiar imágenes entre sí a través de la Red. Para almacenar la información, el GIF utiliza 8 bits (unidades de información) por cada pixel . Como cada bit tiene dos estados posibles (uno o cero), la imagen puede desplegar hasta 256 colores. Como la mayoría de los monitores tienen capacidad para representar por lo menos 256 colores en pantalla , el formato GIF funciona de manera razonable.
Por otro lado, el formato JPG fue creado especialmente para almacenar imágenes con calidad fotográfica. Cumple con su tarea sacrificando calidad de imagen a cambio de una paleta de colores más extensa. Utiliza 24 bits por pixel, lo que le permite albergar hasta 16.777.216 colores en cada imagen. A diferencia de lo que se puede llegar a pensar, el jpg no necesariamente es más pesados, ya que posee un mecanismo de compresión que reduce el tamaño del archivo mediante cierta pérdida en la información.
Como regla general, conviene utilizar archivos con extensión JPG cuando la imagen a insertar sea una foto. Si, en cambio, nuestra imagen contiene un logo o un dibujo de pocos colores o con grandes superficies cubiertas por colores parejos, es conveniente utilizar un
GIF.
Insertar una imágen
La etiqueta utilizada para agregar imágenes a una página Web es <IMG> y va acompañada de un atributo fundamental "SCR", que indica la ruta donde se encuentra el archivo que contiene la imagen a insertar.
Es decir:
<IMG SRC="lugar donde guardo la imagen">
Supongamos que tengo la imagen stopfasc.gif, que está presente en el mismo directorio donde está la página y que la quiero insertar. La etiqueta apropiada sería:
<IMG SRC="stopfasc.gif">
Y el usuario verá en el browser:
EL ATRIBUTO ALT
Otro atributo importante de la etiqueta <IMG> es "ALT". Este atributo permite complementar la imagen con un texto alternativo, utilizado principalmente para aquellos browsers que no permiten mostrar imágenes, ya sea porque son navegadores que sólo soportan texto (como Lynx), porque el usuario tiene desactivada esta opción o porque se produjo un accidente que impidió la llegada del gráfico a la PC del usuario. El texto aparecerá en el espacio correspondiente a la imagen, y también cuando el usuario pase el mouse por arriba de la imagen, incluso si ésta bajó normalmente a la computadora del navegante.
Ejemplo:
<IMG SRC="stopfasc.gif" ALT= "contra la intolerancia">
El usuario verá (pasar el mouse arriba del texto):
Imágenes como enlaces
Otra característica interesante de las imágenes insertadas es que permiten ser utilizadas como hipervínculos. Para esto, es necesario crear un enlace y en vez de encerrar el texto dentro la etiqueta <A> hay que encerrar una imagen.
Ejemplo:
<A HREF="http://www.mazosoft.net/mazolandia/abandoware.htm"> <img
src="anop.gif" alt="Click aqui para descargarte un videojuego
gratis en esta web"> </A>
Resultado:
Tambien podemos enlacer una imagen con nuestra direccion de correo electronico.
Ejemplo:
<A HREF=mailto:canomazo@hotmail.com;img src="buzon12.gif" alt="Click aqui para mandarme un mail" >
El usuario verá
BORDES:
El atributo utilizado para establecer un borde en una imagen es BORDER= #, dónde # es un número de 0 a 99.
Ejemplo de una imagen sin especificar borde
<img scr="dancer.gif">
Ejemplo de imágenes con el atributo
BORDER
<border=5 img scr="dancer.gif">
O sino
<border=15 img scr="dancer.gif">
Cada vez que utilizamos una imagen para establecer un
hipervínculo, de manera automática el browser agrega un borde a la imagen. Si queremos eliminarlo, deberemos indicarlo con
el atributo BORDER=0.
Alineando la imagen
El atributo utilizado para alinear una imagen es ALIGN
Si quiere insertar una imagen a la izquierda de la pantalla
<img align=left src="dancer.gif">
Si prefiero insertarla a la derecha:
<img align=right src="dancer.gif">
Como todavía hay browsers que no soportan la etiqueta
<img align=center>, para centrar una imagen hay que recurrir a un pequeño truco: primero centramos un párrafo
(tengamos o no texto) y luego insertar la imagen
Para centrar una imagen, entonces:
<P ALIGN=CENTER> <img src="dancer.gif"> </P>
Alinear el texto después de la imagen
Para esto se utiliza el atributo ALIGN.Este es un
parámetro opcional usado para alinear la imagen respecto al texto que la acompañ en la misma
línea convirtindola en lo que se llama una imagen flotante. Hay dos tipos basicos de alineacion:
Vertical:
TOP(ARRIBA), MIDDLE(MEDIO) y
BOTTOM(ABAJO).El valor que utiliza este atributo por defecto es BOTTOM. Este atributo tambien es utilizado cuando queremos insertar dos
imágenes en una misma linea.
Horizontal:
LEFT(IZQUIERDO), RIGHT(DERECHO),
TEXTTOP, ABSMIDDLE, BASELINE y ABSBOTTOM
EJEMPLO:
Atributos HEIGHT(altura) y WIDTH (ancho)
Permiten cambiar el tamaño de una imagen. Un ejemplo sin estos atributos
<IMG SRC="dancer.gif">
El usuario verá:
Debido a que este atributo falsea la imagen es logico que esta se distorcione
