Saltar al contenido principal
Codigo Heroe
Tarea anterior
Introducción a HTML y CSS7/13
A la lista de tareas
  1. 1. ¡Vamos!
  2. 2. CSS en acción
  3. 3. Repaso
  4. 4. Fundamentos de HTML
  5. 5. Etiquetas HTML individuales
  6. 6. Atributos de las etiquetas HTML
  7. 7. Busquemos errores en HTML
  8. 8. Fundamentos de CSS
  9. 9. Otras formas de incluir CSS
  10. 10. Selectores en CSS
  11. 11. Clases en CSS
  12. 12. Propiedades y valores de CSS
  13. 13. Busquemos errores en CSS
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Busquemos errores en HTML

Vamos a revisar algunos errores frecuentes para no repetirlos más adelante.

HTML permite anidar etiquetas unas dentro de otras, y uno de los errores más comunes es hacerlo en el orden incorrecto. Por ejemplo:

<p>Texto <strong>destacado</p> en negrita</strong>

En este ejemplo, la etiqueta <p> se cierra antes que <strong>, y eso es un error.

Otro tipo de error aparece por descuidos y errores de escritura: cuando se olvidan los espacios entre atributos o se escriben mal sus nombres.

El instructor Cupcake decidió actualizar su currículum por la noche. Quiso hacerlo más breve y jugar un poco con el diseño, pero un descuido arruinó el plan. Por suerte, ustedes pueden practicar buscando y corrigiendo esos errores.

Si se pierden por completo, abajo tienen una pista. Pero no la miren de inmediato.

1. Fíjense en el orden en que se cierran las etiquetas.

2. ¿Están todos los espacios necesarios?

3. Revisen si los atributos están escritos correctamente. No son muchos.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Busquemos errores en HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake [v.2]</h1> <!-- En este bloque se escondió el primer error --> <div class="error1"> <p> <em>En los siguientes cursos, los ayudarán a entender mejor los detalles de HTML y CSS</p> instructor Cupcake.</em> </div> <!-- Aquí está escondido el segundo error --> <div class="error2"> <imgsrc="photo-2.jpg" class="photocard"> </div> <!-- Y aquí está el tercero --> <div class="error3"> <blockquote clas="nice-cite"> <p>¡Hola! Me llamo Cupcake y seré su próximo instructor. Soy desarrollador web.</p> <p>¡Nos vemos en los próximos cursos!</p> </blockquote> </div> </body> </html>
CSS
body { font-family: "Georgia", serif; } .photocard { display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #e7471e; } .nice-cite { margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background-color: #f5f5f5; border-left: 5px solid #e7471e; }

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

    Ayuden a Cupcake a corregir los errores del código HTML de su nuevo currículum:

    1. el primer error, con una línea vacía de más,
    2. el segundo error, con la imagen que no aparece,
    3. y el tercer error, con el estilo perdido de la cita.
    Codigo Heroe

    © 2023-2026, codigoheroe.com