Lección 5: Imagenes

Una página web sin imágenes es aburrida y difícil de masticar. Por ello vamos a aprender a insertar imágenes con diferentes formatos y escenarios.

Etiqueta	`<img>`
Descripción	Insertar imagen.
Atributos	`src`: Ruta de la imagen. `alt`: Texto alternativo si la imagen no es cargada, errónea o esta siendo visualizada por un navegador especial. `height`: Altura de la imagen en píxeles, `width`: Anchura de imagen en píxeles.
Tipo	En línea

Etiqueta	`<source>`
Descripción	Vincula contenido multimedia (imágenes, audio y vídeo).
Atributos	`srcset`: Ruta del contenido multimedia. `type`: Tipo de contenido (MIME).
Tipo	En línea

Etiqueta	`<picture>`
Descripción	Contenedor de `<source>` y `<img>`.
Atributos	Globales
Tipo	Bloque

Etiqueta	`<figure>`
Descripción	Contenedor autorepresentativo de una imagen, ilustración, diagrama, fragmento de código, etc. Con posibilidad de añadir un pie a la imagen con `<figcaption>`.
Atributos	Globales
Tipo	Bloque

Los formatos admitidos y sus recomendaciones son variados.

WEBP: Para navegadores actuales.
JPEG: Muchos colores.
PNG: Se necesita transparencias.
APNG: Animaciones en bucle.
GIF: Animaciones en bucle para navegadores obsoletos.
SVG: Vectorial.
BMP: Nunca recomendado.

Imagen individual

<img src="oveja-zombie-blog.svg" alt="Oveja zombie">

Imagen que es un hipervínculo

<a href="#">
    <img src="oveja-zombie-blog.svg" alt="Oveja zombie">
</a>

Cambiando imagen dependiendo de la resolución

<picture>
  <source srcset="oveja-smartphone.png" media="(max-width: 800px)">
  <img src="oveja.png" alt="Oveja">
</picture>

Redimensiona el navegador a menos de 800px de ancho y la imagen cambiará.

Diferentes formatos de imagen

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>

Autocontenedor con y sin pie

Solo una imagen.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Oveja simpática"
  >
</figure>

Imagen con pie.

<figure>
  <img
    src="oveja-zombie-blog.svg"
    alt="Oveja simpática"
  >
  <figcaption>Oveja desafiando con la mirada</figcaption>
</figure>

Oveja desafiando con la mirada

Actividad 1

Realiza la siguiente página web.

Actividad restaurante de gatos

Actividad 2

Realiza la siguiente página web.

Actividad redes sociales

Actividad 3

Realiza la siguiente página web con varios artículos inventados por ti. Intenta ser lo más pirata posible.

Actividad tienda de electrónica

Actividad 4

Monta una web donde describas los pasos para cocinar tu mejor receta. Acompaña con imágenes y una pizca de perejil.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café — Pulsa sobre la imagen

1 café: Se mantiene el dominio durante 4 meses.
2 cafés: Se liquida 1 mes del Servidor Web.
3 cafés: Se paga 1 mes de Newsletter.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario