Para incluir una imagen en un documento web, utilizamos la etiqueta <img> junto con algunos atributos
  • La etiqueta <img> tiene dos atributos requeridos: src y alt.

Nota: Las imágenes no se insertan técnicamente en una página HTML, las imágenes están vinculadas a las páginas HTML. La etiqueta <img> crea un espacio de contención para la imagen de referencia.

 

Ejemplo

<img src="atencion.gif" width="28" height="25" alt="marca de aviso">
 
 
Para incluir líneas horizontales utilizamos la etiqueta <hr> junto con algunos atributos
  • La etiqueta <hr> define una ruptura temática en una página HTML (por ejemplo, un cambio de tema).
  • El elemento <hr> se utiliza para separar el contenido (o definir un cambio) en una página HTML.
 Ejemplo
<hr size="4" align="right" width=40%>

 

¿Cómo se construye la imagen? 

  • Pantalla del ordenador como un panal formado por celdas cuadradas
    • Mostrará uno u otro color según las cantidades de rojo, verde y azul que correspondan a cada punto
    • Cada celdilla se las denomina píxel

 

Funcionamiento pantalla LCD

Animación del principio de funcionamiento de una pantalla LCD.

Fuente: http://www.informaticamoderna.com/Pantalla_LCD.htm

 

Representación de la imagen en el monitor

Tipos de imagen

  • Vectoriales
    • cada uno de los puntos se recoge en forma de ecuación matemática
      • Ventaja: la calidad de la imagen no varía al modificar el tamaño y apenas ocupa espacio
      • adecuado para el diseño de líneas y figuras

 

  • Mapa de bits o bitmap
    • Cada uno de los puntos lleva información acerca de la posición absoluta y el color que componen la imagen
      • Ventaja :recoge una amplísima gama tonal (real)
      • Desventaja: el tamaño (formatos de comprensión)

Resolución del monitor 

  • Viene determinada por dos variables:
    • El tamaño de la "celda", al que se denomina dot pitch  (0,14 a 0,28 mm)
    • El número de puntos que es capaz de enviar a la pantalla la tarjeta gráfica del ordenador.  Para pantallas de 17" 1024x768

 

Resolución Monitor

 Fuente:Imágenes Google

 

Tabla de Resolución Monitor LCD

 

Resolución de la imagen

Son los píxeles por pulgada (ppp)

Resolución de la Imagen

 

Profundidad de color

Viene dado por el número de bits utilizados para representar el color de un píxel

  • Con un bit sólo podemos
    representar Blanco y Negro (1, 0)
  • Con 8 bits → 256 colores
  • Con 24 bits → 16.777.216 colores
  • Con 32 bits → 4.294.967.296
    • (canal  alfa, transparencia)

 

Profundidad del color

 

Formatos gráficos para la WEB

  • Se utilizan tres formatos archivos GIF,  JPEG/JPG y PNG
    • GIF solo soporta 256 colores
    • JPEG puede presentar 16,7 millones.
    • PNG imágenes indexadas con paletas de 256 colores o bien color real con 16,7 millones.

       

JPEG - 5,3KB

GIF - 14,5KB

PNG -88,4 KB

Formato JPEG Formato GIF Formato PNG

16,7 millones de colores

256 colores

256 o 16,7 millones de colores

 

 

Recomendaciones

Las imágenes que incluyamos en nuestras páginas deben llevar los atributos de tamaño:
  • WIDTH y HEIGHT
  • El navegador  sabrá el espacio que debe adjudicarle a la imagen y podrá ir cargando texto
 
Si agrandamos la imagen perdemos calidad y si la empequeñecemos no disminuimos el tamaño del fichero
  • es preferible que editemos la imagen original al tamaño deseado si es más pequeño, así modificamos el espacio que ocupa y aceleramos la descarga.

 

Modificar imágenes para su utilización en la WEB

Utilizaremos Gimp

  • Para escalar imágenes
    • Ver tutorial y hacer actividades 28 y 29
  • Para recortar imágenes
    • Ver en tutorial y hacer actividad 30
  • Para crear rótulos
    • Ver en tutorial y hacer actividad 31
  • Para rotar textos
    • Ver tutorial y hacer actividad 32

Tutorial del ITE

 

http://www.ite.educacion.es/formacion/materiales/48/cd/html2005/3multimedia.htm