IMAGENES

Imagen<img>:

El uso de imágenes es uno de los factores que ha popularizado tanto World Wide Web. Incluir imágenes en una presentación web es muy sencillo, solo debe de tener en cuenta que las imágenes tienen que tener los formatos GIF, JPEG o PNG. Las imágenes en línea, se especifican a partir de la tag <img> que no tiene una tag correspondiente de cierre pero que puede acompañarse de los siguientes atributos:

1. SRC= Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL que se va a representar.
2. ALIGN= Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los tres valores posibles son los ya conocidos left, right, top, middle y bottom.
3. WIDTH= Este atributo es opcional pero es recomendable ponerlo para ayudar al navegador a representar la imagen, significa el ancho de la imagen que vamos a representar.
4. HEIGHT= Al igual que el atributo WIDTH, es opcional y recomendable ponerlo, este significa el alto de la imagen.
5. BORDER= Con BORDER especificamos el ancho de un borde que rodea la imagen.

En el navegador se vería de la siguiente manera:

Formatos de Imagen:

Tener algunas imágenes en un sitio Web lo hace más atractivo e intuitivo. Sin embargo, es importante no excederse ya que las imágenes pueden llevar mucho tiempo en cargarse y, en algunos casos, pueden hacer que un documento sea más difícil de leer.

La etiqueta IMG se usa para insertar imágenes en páginas HTML. La imagen puede ubicarse en el mismo servidor que la página en la que se inserta, pero también puede ubicarse en un servidor diferente si se especifica la dirección URL completa.

Solamente se admiten los siguientes formatos de imagen en los estándares W3C: 

• imágenes JPEG (.JPG): Imágenes con un gran número de colores que han sido comprimidas en un alto grado para reducir su tamaño, de modo que requieren menos tiempo para la descarga,
• imágenes PNG: Tienen un tamaño más pequeño cuando la imagen tiene un número reducido de colores sólidos. Este formato permite también imágenes entrelazadas (que aparecen progresivamente) con colores de 24 bits e imágenes en las que uno de los colores se ha definido como transparente.
• imagen GIF: Tienen las mismas ventajas que las imágenes PNG, aunque el formato GIF se limita a 256 colores y sea un formato no completamente abierto.

Texto Alternativo:

El texto alternativo que  en la etiqueta IMG se reconoce o representa por ALT sirve para dar una referencia a la imagen cuando esta haya sufrido algún error de carga o quizá la ruta hacia la imagen no sea la correcta, a continuación mostraremos unas imágenes con el ejemplo anterior aplicando el texto alternativo.

Forzaremos un error en la ruta de la imagen para que se muestre el texto alternativo.

En el navegador se vería de la siguiente manera:

Como se ve cada espacio contiene el nombre de la imagen que debería ir en el recuadro.

Ahora les dejo un vídeo para que puedan comprender quizás de una manera mucho mejor como insertar imágenes en HTML.