Una web sin fotos es aburrida
Piensa en la web de tu bar favorito. Sin la foto del bocadillo, da menos hambre.
Pero hay personas que no pueden ver la foto. Una persona ciega usa un programa que lee la página en voz alta.
Hoy aprendes a poner imágenes, y a describirlas para todos.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Imagen | Una foto o un dibujo dentro de la página. Se escribe con img. | <img> |
| src | Atributo que dice dónde está el archivo de la imagen. | src="tortilla.jpg" |
| alt | Atributo con un texto que describe la imagen. Es el texto alternativo. | alt="Una tortilla de patatas" |
| Lector de pantalla | Un programa que lee la página en voz alta. | lo usan las personas ciegas |
| Píxel | Un puntito de la pantalla. El tamaño de una imagen se mide en píxeles. | width="200" |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La etiqueta img
Una imagen se escribe con la etiqueta img. Lleva el atributo src.
El atributo src dice dónde está el archivo: src="tortilla.jpg".
La etiqueta img es distinta: no tiene cierre. No hay nada que meter dentro.
Pruébalo: un balón
<h1>Mi equipo</h1>
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><circle cx='100' cy='100' r='90' fill='%23ffffff' stroke='%23222222' stroke-width='6'/><polygon points='100,60 135,85 122,125 78,125 65,85' fill='%23222222'/></svg>" alt="Un balón de fútbol">
<p>El balón del partido.</p>
Esa dirección tan larga
Nota
Aquí el dibujo va metido dentro de src, porque en esta lección no podemos subir fotos. En una web de verdad escribirías solo el nombre del archivo, como balon.png.
El texto alternativo: alt
El atributo alt guarda una frase que describe la imagen.
Sirve a tres personas. A quien no ve la foto, porque su programa la lee en voz alta. A quien tiene internet lento y no la carga. Y a ti, si te equivocas de nombre de archivo.
Pruébalo: una imagen que no existe
<p>Esta imagen no existe, pero mira qué pasa:</p>
<img src="foto-que-no-existe.jpg" alt="Un bocadillo de tortilla con tomate">
<!-- Borra el atributo alt y pulsa Ejecutar. -->
Ejemplo resuelto: textos alt buenos y malos
| Imagen | alt malo | alt bueno |
|---|---|---|
| Foto de la tortilla | foto1 | Una tortilla de patatas cortada en trozos |
| Escudo del equipo | imagen | Escudo del Club Deportivo Los Pinos |
| Mapa del barrio | mapa.png | Mapa con el instituto y la parada del autobús |
| Un dibujo de adorno | bonito | (vacío: alt="") |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido
Inténtalo
Repaso rápido
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.