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

La etiqueta img: imágenes

En nuestro sitio de principiante todavía no hay imágenes. Y unas imágenes bien elegidas, del tamaño adecuado y que se vean bien son esenciales para un negocio exitoso. Así que Cupcake nos dio otra tarea: aprender para qué sirven los distintos formatos de imagen.

Nos envió un diseño del blog con imágenes. Ya las recortamos y las guardamos en la carpeta correspondiente; solo falta añadirlas a la página.

Para insertar imágenes usamos la etiqueta <img>. Es una etiqueta vacía: no necesita etiqueta de cierre. El atributo src indica la ruta de la imagen que debe mostrar.

<img src="logo.png">

Añadamos un avatar a la página principal.

  • 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> <!-- Añade la imagen aquí --> <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. Añade el avatar <img src="img/raccoon.jpg"> al inicio del contenido principal de la página de inicio.
    Codigo Heroe

    © 2023-2026, codigoheroe.com