Un documento web podrá contener imágenes si hacemos uso de la
etiqueta <img> (no tiene etiqueta de cierre).
Con el atributo src (que proviene de SouRCe) podemos indicarle la
URL del fichero de imagen que tomará como fuente.
<img src="imagenes/paisajes.jpg"> aquí debajo veremos lo que se
muestra con este comando con su tamaño real en píxeles:
Imágenes con la ruta absoluta.
Con este comando <img align="right" src="paisajes.jpg"/> También
podemos poner la ruta absoluta de la imágenes teniendo la paginas HTML
y la imágenes en el mismo lugar en el escritorio o en una carpeta los
dos juntos.También con el eXcale podemos definir el tamaño aquí a la
derecha veremos como se muestra la imagen escalada 200px por 200px.
images
Aquí esta el eXcale
Este es el programa de Excale
Excale
Las imágenes con el tamaño que queremos que se muestre en la pagina
HTML.
Si no especificamos nada la imagen se mostrará con su tamaño real
pero podemos cambiarlo con los atributos width y height indicando
al navegador el ancho y alto respectivamente de la imagen tanto
en píxeles como en porcentaje con respecto al elemento que lo
contiene aquí debajo se muestra como quedará:
<img src="imagenes/paisajes" width="350px" height="200px"/>
Podemos asignarle un borde a la imagen de un determinado grosor
mediante el atributo border o incluso hacer que se muestre un texto
alternativo con alt , para que cuando la imagen no pueda ser cargada,
nos hagamos una idea de su contenido con las etiquetas y atributos.
<img src="imagenes/paisajes.jpg border="4px" alt="Paisaje"/>
La alineación del texto con respecto a la imagen también es posible
mediante align tanto horizontalmente a la izquierda (left)
o derecha (right) como verticalmente arriba (top) , abajo (bottom)
o en medio (middle):
<img src="imagenes/paisajes" align ="middle"/>
Cuando tenemos más de una imagen podemos determinar el espacio horizontal
y vertical entre ellas con los respectivos atributos hspace y vspace.
Especificando la separación entre ellas:
<img src="../imagenes/imagen1.jpg" hspace="10px"/>
<img src="../imagenes/imagen2.jpg" hspace="10px"/>
<img src="../imagenes/imagen3.jpg"/>
Se mostrara como ésta aquí abajo.
