Saltar al contenido principal
Codigo Heroe
Tarea anterior
Enlaces e imágenes8/15
A la lista de tareas
  1. 1. Qué es un enlace: la etiqueta a
  2. 2. Direcciones relativas
  3. 3. Direcciones absolutas
  4. 4. Enlaces a archivos
  5. 5. Enlaces a anclas
  6. 6. La etiqueta img: imágenes
  7. 7. Formatos de imagen: SVG
  8. 8. El formato JPEG
  9. 9. El formato PNG
  10. 10. El formato GIF
  11. 11. Dimensiones de una imagen
  12. 12. El atributo alt
  13. 13. Imágenes como enlaces
  14. 14. Las etiquetas figure y figcaption
  15. 15. Enlaces sin href y el atributo title
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

El formato JPEG

Sigamos explorando los formatos de imagen. Queremos añadir imágenes al blog y elegir un formato adecuado para cada una. La primera es una fotografía: JPEG es una buena opción.

Este formato se creó para comprimir y guardar fotografías a todo color. Admite más de 16 millones de colores, pero su compresión pierde información de la imagen. Para reducir el tamaño del archivo suele ser necesario sacrificar algo de calidad. La clave es encontrar un equilibrio entre el peso y la calidad de la imagen.

JPEG es adecuado para:

  • fotografías e imágenes con muchos colores;
  • imágenes con transiciones suaves de color y luminosidad;
  • ilustraciones con muchos detalles de distintos colores.

Añadamos una imagen JPEG a la nueva entrada del blog.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> <a href="index.html">Volver al inicio</a> </nav> </header> <main> <article> <h1>Día catorce. Un nuevo formato</h1> <p>Ayer aprendí qué formato de imagen sirve para un avatar y añadí uno a mi blog. Me gustó. ¡Se ve muy bien! Decidí preparar una guía rápida para recordar qué otros formatos de imagen existen y para qué se usan.</p> <p>Aquí hay una imagen en formato JPEG:</p> <!-- Añade la imagen aquí --> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } aside { margin: 20px 0; color: #c4c4c4; } a[href] { color: #0099ef; text-decoration-line: underline; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Añade una imagen con la dirección files/instructor-keks.jpg al final de la entrada del blog.
    Codigo Heroe

    © 2023-2026, codigoheroe.com