imagenes en html (viernes 25 de enero 2019)

La etiqueta para mostrar una imágen en una página web: <IMG SRC="nombre y dirección de la imagen" WIDTH="XX" HEIGHT="XX">
A diferencia de las que hemos visto hasta ahora, no tiene una etiqueta de cierre.
SRC="nombre y dirección de la imagen" que viene de image source, indica qué imagen se mostrará en la página, y dónde está.
Si la imagen está en la misma carpeta que el documento html, entonces basta con escribir el nombre de la imágen: SRC="nombre de la imagen"	Por ejemplo, si queremos incluir una imágen que se llama 'chapelcircle.jpg' escribiremos: <IMG SRC="chapelcircle.jpg"> Resultado:
Si la imagen está en una subcarpeta de la carpeta del documento actual, indique el nombre de dicha subcarpeta, seguido de una barra diagonal (/) y del nombre de la imagen: SRC="carpeta/imagen"	Por ejemplo, si tenemos una imagen llamada 'cooper.gif' dentro de una carpeta llamada 'images' la forma de referirse a ella sería: <IMG SRC="images/cooper.gif">
Para mostrar una imagen situada en la carpeta padre de la carpeta del documento html, introduzca ../ delante del nombre del de la imagen(donde ".." significa "un nivel por encima en la jerarquía de carpetas"): SRC="../imagen"	Por ejemplo, en este caso la forma de referirse a la imagen sería: <IMG SRC="../cooper.gif">
Si la imagen está situada en otro sitio de Internet hay que indicar la dirección de dicho sitio de Internet. SRC="http://dirección/imagen"	Por ejemplo, si tenemos una imagen que se encuentra en la siguiente dirección: http://www.duke.edu/imagen.gif para que aparezca en la página, deberemos escribir: <IMG SRC="http://www.duke.edu/imagen.gif">
WIDTH y HEIGHT permiten establecer la anchura y la altura con la que la imagen aparecera en la página web. Cuando no las especificamos, como en el ejemplo anterior, el navegador utiliza el tamaño original de la imagen. Las unidades que se utilizan son pixels.	Por ejemplo, si queremos que la imagen que vimos antes, 'chapelcircle.jpg', aparezca más pequeña, podemos escribir: <IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100"> Resultado:
Una imagen puede ser también un enlace. Para conseguirlo basta con colocar la etiqueta de la imagen dentro de la etiqueta para enlaces/hacer lo siguiente: <A HREF="dirección"><IMG SRC="imagen"></A>	<A HREF="http://www.duke.edu><IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100"></A> Resultado: Como se puede ver, al convertir una imagen en un enlace aparece un borde azul que la rodea. Si no queremos que tenga dicho borde hay que escribir: <IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" BORDER="0">
Posición de texto e imagen.
Para situar una imagen con respecto al texto que la acompaña tenemos la propiedad ALIGN <IMG SRC="imagen" WIDTH="XX" HEIGHT="XX"ALIGN="valor">
Estos son sus valores básicos: <IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" ALIGN="top">  Texto alineado arriba
<IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" ALIGN="middle">  Texto en el medio
<IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" ALIGN="bottom">  Texto abajo
<IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" ALIGN="right"> Esto hace que la imagen se sitúe en la parte derecha de la página.. El texto se colocará a la derecha del mismo. A diferencia de los otros casos (top, bottom, middle) podemos escribir varias líneas al lado de la imagen, que rodearan a la misma. Texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto textoTexto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto xx texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto xx texto Texto texto texto texto texto texto texto texto
<IMG SRC="chapelcircle.jpg" WIDTH="100" HEIGHT="100" ALIGN="right"> A diferencia de la anterior, esta propiedad sitúa la imagen a la izquierda, y el texto a su derecha. Texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto textoTexto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Texto texto texto texto texto texto texto texto texto texto texto texto texto texto xx