Saltar al contenido principal
Codigo Heroe
Tarea anterior
Enlaces e imágenes10/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 GIF

El último formato que veremos en este capítulo es GIF.

Se creó para transmitir imágenes de mapa de bits por internet. Cada fotograma de un GIF puede usar una paleta de hasta 256 colores. Al preparar una imagen, se selecciona una paleta y los demás tonos pueden simularse combinando píxeles cercanos de distintos colores. Por eso GIF no es una buena opción para fotografías o imágenes con muchos colores, pero sí puede servir para animaciones sencillas.

GIF también admite transparencia: cada píxel puede ser transparente u opaco. No permite grados intermedios de transparencia.

Hoy también existen otros formatos que permiten crear animaciones con archivos más pequeños o con mayor calidad.

Así que GIF puede ser útil si:

  • necesitas una animación sencilla.
  • 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>Mi primer GIF:</p> <!-- Añade la imagen aquí --> <p>Aquí hay una imagen en formato PNG:</p> <img src="files/portrait.png"> <p>Aquí hay una imagen en formato JPEG:</p> <img src="files/instructor-keks.jpg"> </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. Inserta una imagen con la dirección files/gifka.gif en la entrada del blog.
    Codigo Heroe

    © 2023-2026, codigoheroe.com