Posteado por: joacosoft | 11 agosto 2009

Insertar Imagenes 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 imagen (fotografía o dibujo) utilizamos <img> de esta forma:

<IMG SRC=”nombre de la imagen.ext”>

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”>

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 ‘imágenes’ o algo así. En este caso, tienes que indicarlo de la siguiente forma …

<IMG SRC=”imagenes/mifoto.jpg”

… 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”> <IMG SRC=”miperro.jpg”>

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” hspace=25> <IMG SRC=”miperro.jpg”>

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>

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:

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” width=50 heigh=150>

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.

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” align=right>

alinea la imagen a la derecha

<IMG SRC=”mifoto.jpg” align=center>

alinea la imagen al centro

<IMG SRC=”mifoto.jpg” align=left>

alinea la imagen a la izquierda

Aviso: Esta informacion la obtuve de un trabajo de la escuela si alguno de ustedes reconoce esta informacion como suya favor de comentarlo y poner el enlace.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: