Manual de HTML

 
 
 

Mapa Web

 
borde   borde
Portada arrow Imágenes

 

Imágenes Imprimir E-mail
Hasta el momento hemos visto como se puede escribir texto en una página Web, así como sus posibles formatos.
 
Para incluir una imagen en nuestra página Web utilizaremos la etiqueta <img>.

Hay tres formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF , JPG y PNG .

Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el navegador, a no ser que disponga de un programa externo que permita su visualización.

La etiqueta <img> tiene varios parámetros:

src="imagen" Indica el nombre del fichero gráfico a mostrar.

alt="Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen.

lowsrc="imagen" Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga la página. Este parametro no es reconocido por la totalidad de los navegadores ya que esta en estudio su aplicacion, asi que en la mayoria de los casos sera ignorado mostrandose solo la primera imagen ( src ). En Netscape muestra la imagen indicada por lowsrc en primer lugar, y posteriormente muestra la imagen indicada por src . Si las imagenes son iguales pero tienen distinta "resolucion" se conseguirá un efecto tipo "Fade". Si las imagenes son de distinto tamaño la imagen indicada en src se redimensionara al tamaño indicado por la imagen indicada en lowsrc

align="top / middle / bottom" Indica como se alineará el texto que siga a la imagen. top alinea el texto con la parte superior de la imagen, middle con la parte central, y bottom con la parte inferior.


border="tamaño" Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hyperenlace.

height="tamaño" Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
width="tamaño" Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original.
hspace="margen" Indica el numero de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda.

vspace="margen" Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda.

ismap / usemap Indica que la imagen es un MAPA. Veremos estos parametros más adelante en este manual.


Ejemplo

Se vería como
<img src="caution.gif" alt="Cuidado !!" > Cuidado!!
Si el navegador no pudiese visualizar el gráfico..... Cuidado!!

La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen.


Ejemplo


<img src="http://www.microsoft.com/iexplorer.gif">


Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos.


(Recuerde que en función del navegador que vd. utilize pueden verse o no los efectos de cada parametro).

Ejemplo Se vería como
<img src="caution.gif"
width="100">
Cuidado!!
<img src="caution.gif"
height="20">
Cuidado!!
<img src="caution.gif"
align="top"> Atencion !!!
Cuidado!!Atencion !!!
<img src="caution.gif"
align="middle">Atencion !!!
Cuidado!!Atencion !!!
<img src="caution.gif"
align="bottom"> Atencion !!!
Cuidado!!Atencion !!!
Tenga en cuenta <img src="caution.gif"
hspace="20"> esta indicación.
Tenga en cuenta Cuidado!!esta indicacion
Tenga en cuenta <img src="caution.gif"
vspace="40"> esta indicación.
Tenga en cuenta Cuidado!!esta indicacion.

 Practicar con esta lección

Capítulo anterior:
Listas

Capítulo siguiente:
Enlaces

 

 
Portada
Capítulos del Manual de HTML
Introducción
Estructura básica
Cabecera
Cuerpo
Juego de caracteres HTML
Espacios y saltos de línea
Cabeceras
Atributos del texto
Listas
Imágenes
Enlaces
Tablas
Mapas
Formularios
Applet
Marquee
Sonidos
Frames
Scripts
Practicar en línea
Lista de prácticas en línea
FAQ
Preguntas frecuentes
Códigos HTML
Lista de Códigos HTML
Foros
Foros HTML
Otros Manuales
Manuales de otros lenguajes
 
   
 
 
Alojamiento web en Hostalia