Unidad 5. Imágenes (I)



Las imágenes son un elemento esencial en las páginas web. Hasta la versión 5 de HTML se utilizaba la etiqueta <img> para incluirlas en una página web. Pero debido a la necesidad de crear páginas web que se adapten a dispositivos de diferente tamaño se ha incorporado la etiqueta <picture>.

Antes de ver cómo incluir imágenes en una página web conviene distinguir los diferentes tipos de imágenes que existen: mapas de bits, vectoriales y generadas dinámicamente. Las imágenes más comunes son las de mapa de bits que están formadas por puntos de colores, por ejemplo una cámara de fotos digital utiliza imágenes de este tipo, los tipos de archivos más usados son .jpg, y .png; también se utilizan mucho para gráficos y animaciones las de tipo .gif. Para crear imágenes de mapa de bits puedes utilizar programas como Photoshop y Gimp (gratis)

Las imágenes vectoriales están definidas por fórmulas matemáticas en base a vectores y permiten ampliarlas sin perder resolución. Suelen ser gráficos, esquemas, logos, etc. Uno de los tipos de archivos usados en la web es .svg. Para crear imágenes vectoriales se utilizan programas como CorelDraw, Illustrator y Inkscape (gratis).

Las imágenes generadas dinámicamente se crean en el mismo momento de cargarse la página web y pueden modificarse en tiempo real por intervención del usuario o por eventos, por ejemplo, en videojuegos. Para este tipo de imágenes se utilizan las tecnologías Canvas y SVG.

Si quieres saber un poco más sobre formatos de imagen visita este tema básico y te lo explicamos: Formatos de imágenes .

En esta unidad veremos las etiquetas <img> y <picture>, las imágenes generadas dinámicamente las veremos más adelante, en las unidades 15 y 16.

En este vídeo puedes ver la etiqueta <img>:Videotutorial

En este vídeo puedes ver la etiqueta <picture>:Videotutorial

5.1. Etiqueta <img>

Con la etiqueta <img> representamos imágenes en una página web. Esta etiqueta no tiene etiqueta de cierre, se cierra con el carácter >, aunque también se puede cerrar con />. Para indicar el origen de la imagen se utiliza el atributo src="ruta_imagen". Por ejemplo:

<img src="graficos/logoAulaclic.jpg"/>

Que produce el siguiente resultado:

La etiqueta img es una etiqueta con el atributo display de tipo inline, es decir, no incluye un salto de línea. Esto permite colocar imágenes pequeñas o iconos dentro de una línea de texto. Si queremos que una imagen ocupe toda la línea podemos colocarla dentro de una etiqueta p, div o figure que tienen display de tipo block. También podemos cambiarle el display a block desde la hoja de estilo. El atributo display lo veremos más en profundidad en la unidad 10 de las hojas de estilo.


Enero-2019 (V 2.2)
Pág. 5.1
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.