Tutorial de HTML y principalmente su version 5

Imágenes expandido

Imagenes JPG

Imagenes GIF

Imagenes PNG

Sintaxis

En HTML, las imágenes se definen con la etiqueta <img>.

El elemento <img> es una elemento vacio, no tiene una etiqueta de final. Lo único que contiene, dentro de la etiqueta <a>, son atributos.

El atributo src especifica el URL (dirección web) de la imagen:

Ejemplo:

<!DOCTYPE html>
<html>
 <body>
  <h2>Una Montaña Espectacular</h2>
  <img src="foto_montaña.jpg" alt="Panorama montañoso" style="width:304px;height:228px;">
 </body>
</html>

El atributo alt

El atributo alt provee un texto alternativo para una imagen, si el usuario por alguna razón no puede visualizarla (a causa de una conexión lenta, un error en el atributo src, o si el usuario un lector de pantalla).

Si un navegador no puede encontrar una imagen, mostrara el valor del atributo alt:

El atributo alt se requiere para que una pagina web sea validada correctamente.

Lectores de pantalla

Un lector de pantalla es un programa software que lee el código HTML, convierte el texto, y hace posible que el usuario “escuche” el contenido. Los lectores de pantalla son útiles para personas ciegas, con problemas visuales, o sin capacidad de aprendizaje.

El tamaño de la imagen – ancho y alto

Puede usar el atributo style para especificar el ancho y el alto de una imagen.

Los valores se pueden especificar en pixeles, colocando px luego del valor:

Alternativamente, puedes usar los atributos width y height. Con estos, la medida por defecto es el pixel:

Nota: siempre especifica el ancho y el alto de una imagen. Si el ancho y el alto no se especifican, la pagina parpadeara (se reajustara) al cargar las imágenes.

Los atributos width y height, o el atributo style?

Ambas formas son validas en HTML5.

Sin embargo, te sugiero usar el atributo style. Esto previene que las hojas de estilo internas o las externas cambien el tamaño actual u original de las imágenes:

<!DOCTYPE html>
<html>
 <head>
  <style>
   img { 
    width:100%; 
   }
  </style>
 </head>
 <body>
  <img src="html5.gif" alt="Icono de HTML5" style="width:128px;height:128px;">
  <img src="html5.gif" alt="Icono de HTML5" width="128" height="128">
 </body>
</html>

Cuando las imágenes están dentro de otra carpeta

Si no se especifica lo contrario, el navegador espera encontrar dicha imagen en la misma carpeta en donde se encuentra la pagina web del momento.

Sin embargo, es común almacenar las imágenes en una subcarpeta. En tal caso, debes incluir el nombre de la carpeta en el atributo src:

Cuando las imágenes están en otro servidor.

Algunos sitios web almacenan sus imágenes en servidores de imágenes…

Pero lo importante en cuanto a este otro tema es que tienes acceso a imágenes de cualquier dirección web del mundo:

Podrás leer mas sobre las rutas de archivo en una sección posterior dedicada a las rutas de archivo en HTML.

Imágenes animadas

El estándar GIF es tanto para imágenes como para animaciones:

PARTE 2, a continuación...

Por una Web con equidad...

lunes, 27 de febrero de 2017

Atributos básicos de una Imagen HTML, esta se enlaza no se inserta