Imágenes en HTML



Actualmente, es posible incluir, no solo imágenes estáticas como dibujos o fotografías, sino animaciones 3D e incluso películas. Esto todavía no está muy implantado debido sobre todo a la lentitud de Internet.
Para incluir una imágen (fotografía o dibujo) utilizamos <img alt=”" /> de esta forma:
<img src=”nombre de la imagen.ext” alt=”" />
Casi todos los navegadores admiten muchos formatos distintos de imágenes, pero los más utilizados son JPG y GIF, ya que son los que ocupan menos espacio y, por lo tanto, tardan menos en ser enviados de un ordenador a otro.
Normalmente verás imágenes de tipo GIF cuando se trata de dibujos pequeños (iconos, etc)
Las imágenes grandes (fotografías, por ejemplo) suelen estar en formato JPG, ya que es el formato que comprime más los archivos
Por ejemplo:
<img src=”mifoto.jpg” alt=”" />
insertaría la imagen mifoto.jpg a la página. Si pruebas este ejemplo en tu ordenador, probablemente no te saldrá bien, ya que seguramente no tienes ningún archivo que se llame ‘mifoto.jpg’ ¿o si?
Prueba con alguna imagen que tengas en tu disco pero recuerda que debe estar en el mismo lugar donde estás creando el documento html (en la misma carpeta).
También si vas a utilizar muchas imágenes en tu página web, es una buena idea guardarlas todas en una carpeta especial que podría llamarse ‘imagenes’ o algo así. En este caso, tienes que indicarlo de la siguiente forma …
<img src=”imagenes/mifoto.jpg” alt=”" />
… para que el navegador sepa donde tiene que buscarla
Podemos incluir varias imágenes en la misma página de esta forma:
<img src=”mifoto.jpg” alt=”" /> <img src=”miperro.jpg” alt=”" />
Esto haría que ambas imágenes (mifoto.jpg y miperro.jpg) aparecieran juntas, pero muy pegadas unas con otras.
Podemos indicar que queremos una separación de la siguiente forma:
<img src=”mifoto.jpg” alt=”" hspace=”25″ /> <img src=”miperro.jpg” alt=”" />
Al añadir hspace=25, lo que estamos haciendo es indicar que queremos 25 espacios de separación después de mifoto.jpg, es decir, que entre ambas imágenes habría 25 espacios (cada espacio es muy pequeño, por eso aparecen 25)
Añadir un borde a la imagen
Para añadir un borde alrededor de la imagen utilizamos ‘border’ :
<img src=”mifoto.jpg” border=”1″ alt=”" />
Esto haría que la imagen mifoto.jpg apareciera con una línea fina alrededor
Modificar la imagen
Podemos modificar el tamaño y la posición de la imagen de la siguiente forma:
Para modificar el tamaño:
Podemos modificar el tamaño de la imagen utilizando ‘width’ y ‘heigh’. El primero modificará el ancho de la imagen y el segundo el alto. Por ejemplo:
<img src=”mifoto.jpg” alt=”" width=”50″ />
haría que la imagen se presentara con un tamaño de 50 de ancho por 15 de alto. Claro que, si la imagen no tiene este tamaño originalmente, puede aparecer deformada (alargada a lo alto o a lo ancho).
Por este motivo, hay que tener cuidado al modificar el tamaño de las imágenes y procurar mantener la misma relación ancho/alto.
Por ejemplo, una imagen, que originalmente tiene ancho=100 y alto= 120 podría reducirse a la mitad: ancho=50 y alto=60. De esta forma se mantiene la relación entre ancho y alto y la imagen no se deforma
Si una imagen de ancho=100 y alto=120 es modificada solo en anchura, por ejemplo a 50, la imagen se distorsiona.
Modificar la posición
Podemos modificar la posición de una imagen simplemente especificando si la queremos alineada a la izquierda, a la derecha o al centro.
Para ello utilizamos align:
<img src=”mifoto.jpg” alt=”" align=”right” />
alinea la imagen a la derecha
<img src=”mifoto.jpg” alt=”" align=”center” />
alinea la imagen al centro
<img src=”mifoto.jpg” alt=”" align=”left” />
alinea la imagen a la izquierda

Actualmente, es posible incluir, no solo imágenes estáticas como dibujos o fotografías, sino animaciones 3D e incluso películas. Esto todavía no está muy implantado debido sobre todo a la lentitud de Internet.
Para incluir una imágen (fotografía o dibujo) utilizamos <img alt=”" /> de esta forma:
<img src=”nombre de la imagen.ext” alt=”" />
Casi todos los navegadores admiten muchos formatos distintos de imágenes, pero los más utilizados son JPG y GIF, ya que son los que ocupan menos espacio y, por lo tanto, tardan menos en ser enviados de un ordenador a otro.
Normalmente verás imágenes de tipo GIF cuando se trata de dibujos pequeños (iconos, etc)
Las imágenes grandes (fotografías, por ejemplo) suelen estar en formato JPG, ya que es el formato que comprime más los archivos
Por ejemplo:
<img src=”mifoto.jpg” alt=”" />
insertaría la imagen mifoto.jpg a la página. Si pruebas este ejemplo en tu ordenador, probablemente no te saldrá bien, ya que seguramente no tienes ningún archivo que se llame ‘mifoto.jpg’ ¿o si?
Prueba con alguna imagen que tengas en tu disco pero recuerda que debe estar en el mismo lugar donde estás creando el documento html (en la misma carpeta).
También si vas a utilizar muchas imágenes en tu página web, es una buena idea guardarlas todas en una carpeta especial que podría llamarse ‘imagenes’ o algo así. En este caso, tienes que indicarlo de la siguiente forma …
<img src=”imagenes/mifoto.jpg” alt=”" />
… para que el navegador sepa donde tiene que buscarla
Podemos incluir varias imágenes en la misma página de esta forma:
<img src=”mifoto.jpg” alt=”" /> <img src=”miperro.jpg” alt=”" />
Esto haría que ambas imágenes (mifoto.jpg y miperro.jpg) aparecieran juntas, pero muy pegadas unas con otras.
Podemos indicar que queremos una separación de la siguiente forma:
<img src=”mifoto.jpg” alt=”" hspace=”25″ /> <img src=”miperro.jpg” alt=”" />
Al añadir hspace=25, lo que estamos haciendo es indicar que queremos 25 espacios de separación después de mifoto.jpg, es decir, que entre ambas imágenes habría 25 espacios (cada espacio es muy pequeño, por eso aparecen 25)
Añadir un borde a la imagen
Para añadir un borde alrededor de la imagen utilizamos ‘border’ :
<img src=”mifoto.jpg” border=”1″ alt=”" />
Esto haría que la imagen mifoto.jpg apareciera con una línea fina alrededor
Modificar la imagen
Podemos modificar el tamaño y la posición de la imagen de la siguiente forma:
Para modificar el tamaño:
Podemos modificar el tamaño de la imagen utilizando ‘width’ y ‘heigh’. El primero modificará el ancho de la imagen y el segundo el alto. Por ejemplo:
<img src=”mifoto.jpg” alt=”" width=”50″ />
haría que la imagen se presentara con un tamaño de 50 de ancho por 15 de alto. Claro que, si la imagen no tiene este tamaño originalmente, puede aparecer deformada (alargada a lo alto o a lo ancho).
Por este motivo, hay que tener cuidado al modificar el tamaño de las imágenes y procurar mantener la misma relación ancho/alto.
Por ejemplo, una imagen, que originalmente tiene ancho=100 y alto= 120 podría reducirse a la mitad: ancho=50 y alto=60. De esta forma se mantiene la relación entre ancho y alto y la imagen no se deforma
Si una imagen de ancho=100 y alto=120 es modificada solo en anchura, por ejemplo a 50, la imagen se distorsiona.
Modificar la posición
Podemos modificar la posición de una imagen simplemente especificando si la queremos alineada a la izquierda, a la derecha o al centro.
Para ello utilizamos align:
<img src=”mifoto.jpg” alt=”" align=”right” />
alinea la imagen a la derecha
<img src=”mifoto.jpg” alt=”" align=”center” />
alinea la imagen al centro
<img src=”mifoto.jpg” alt=”" align=”left” />
alinea la imagen a la izquierda





Responder:

Tutorial HTML November 27, 2010 11:21 am