Site hosted by Angelfire.com: Build your free website today!

Menu De Html

imagen en la web <img>:

Sin duda uno de los aspectos más vistosos y atractivos de las páginas web es el grafismo. La introducción en nuestro texto de imágenes puede ayudarnos a explicar más fácilmente nuestra información ydarle un aire mucho más estético. El abuso no obstante puede conducirnos a una sobrecarga que se traduce en una distracciónpara el navegante, quien tendrá más dificultad en encontrar lainformación necesaria, y un mayor tiempo de carga de la página loque puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexión o si es un poco impaciente.

Las imágenes son almacenadas en forma de archivos, principalmente GIF (para dibujos) o JPG (para fotos). Estos archivos pueden ser creados por nosotros mismos o pueden ser descargados gratuitamente en sitios web especializados. En desarrolloweb contamos con la mayor base de datos de gifs animados e imágenes de todo tipo en castellano, que nos provee el sitio internacional GOgraph.

La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo grafico mediante el atributo src (source).

por ejemplo <img src=http://es.geocities.com/k_herretes/rosada.gif>

Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pixels.
Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas dimensiones pueden obtenerse a partir del propio diseñador grafico o bien haciendo clic con el botón derecho sobre la imagen vista por el navegador para luego elegir propiedades sobre el menú que se despliega.
por ejemplo
<img src=http://es.geocities.com/k_herretes/rosada.gif width=50 height=20>

ATRIBUTO DE ALINEACION:

Se hace con el align como lo haciamos con el texto ya veremos como se escribe y existen varios valores , como top ,left , right middle ,bottom.si quiere centrar la imagen debe usar la etiqueta <center><img>
<img src=http://es.geocities.com/k_herretes/rosada.gif align=right>

atributo border:

Definen el tamaño en pixels del cuadro que rodea la imagen.

De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es particularmente útil cuando deseamos eliminar el borde que aparece cuando la imagen sirve de enlace. En dicho caso tendremos que especificar border="0".
un ejemplo de esto es:
<img src=http://es.geocities.com/k_herretes/rosada.gif border=5>
asi se verá

Atributos vspace y hspace

Sirven para indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la rodean, como texto, otras imágenes, etc.
por ejemplo: <img src=http://es.geocities.com/k_herretes/rosada.gif hspace=5 vspace=10> hola a todos esto es una rosa

así se verá:

hola a todos esto es una rosa

ya que leimos las propiedades ahora usemoslas en un ejemplo:
<html>
 <head>
  <title> imagen en html </title>
 </head>
 <body bgcolor=black text=yellow>
 <center><img src=http://es.geocities.com/k_herretes/sun_03.gif>

bienvenidos a esta pagina web</center> <img src=http://es.geocities.com/k_herretes/sun_03.gif><br>

<img src=rainbarb.gif width=100%><br> <p> imagenes alineada a la izquierda</p> <img src=sun_37.gif><br> imagen centrada <br> <center><img src=sun_37.gif></center></br> imagen a la derecha <br> <img src=sun_37.gif align=right> </body> </html>


asi se verá ejemplo de imagenes


atras siguiente indice