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

Formatos de imagen: SVG

Cupcake nos pidió que revisáramos el formato del avatar. Vamos a conocer los formatos disponibles y a elegir uno adecuado para este dibujo.

Hay muchos formatos de imagen. En estos ejercicios veremos cuatro muy conocidos: JPEG, PNG, SVG y GIF.

Empecemos por SVG, abreviatura de «Scalable Vector Graphics», o gráficos vectoriales escalables. Estas imágenes conservan su nitidez al cambiar de tamaño y suelen ocupar poco espacio cuando el dibujo es sencillo. SVG es muy útil para diagramas con pocos colores, logotipos e iconos.

Además, SVG se parece un poco a HTML: se describe con texto que podemos leer. ¡Incluso puedes escribir el código de una imagen SVG a mano!

SVG resulta útil cuando necesitas:

  • cambiar el tamaño de una imagen sin perder nitidez;
  • modificar el color de sus elementos;
  • animar partes de la imagen.

En los próximos ejercicios veremos los demás formatos. Ahora cambiemos el avatar del blog por su versión SVG.

  • 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> <h1>Sitio de un principiante en desarrollo web</h1> </header> <main> <!-- Cambia la dirección de esta imagen --> <img src="img/raccoon.jpg"> <nav> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día uno. Cómo olvidé darle de comer al gato</a></li> <li><a href="day-2.html">Día dos. Quiero crear páginas web</a></li> <li><a href="day-3.html">Día tres. Mi gato se enojó conmigo</a></li> <li><a href="day-4.html">Día cuatro. Casi me enfermo</a></li> <li><a href="day-5.html">Día cinco. Un descanso</a></li> <li><a href="day-6.html">Día seis. No entendí nada</a></li> <li><a href="day-7.html">Día siete. Cupcake me dio una tarea</a></li> <li><a href="day-8.html">Día ocho. Un asunto muy serio</a></li> <li><a href="day-9.html">Día nueve. O más bien, noche</a></li> <li><a href="day-10.html">Día diez. Un repaso</a></li> <li><a href="day-11.html">Día once. Sin exagerar</a></li> </ul> </nav> <section> <p>¡Hola! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no tenía idea de cómo se creaba una página web, pero ahora encontré <a href="https://htmlacademy.org/courses">ejercicios interactivos de HTML y CSS</a> y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar la guardia y estará pendiente de mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todo lo que vaya logrando.</p> </section> <section> Sección de habilidades </section> </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: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

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. Cambia el avatar a su versión SVG: sustituye img/raccoon.jpg por img/raccoon.svg.
    Codigo Heroe

    © 2023-2026, codigoheroe.com