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. Consolidación
  4. 4. Conceptos básicos de HTML
  5. 5. Etiquetas HTML individuales
  6. 6. Atributos de etiquetas HTML
  7. 7. Buscar errores en HTML
  8. 8. Conceptos básicos de CSS
  9. 9. Otras formas de conectar CSS
  10. 10. Selectores CSS
  11. 11. Clases en CSS
  12. 12. Propiedades y valores CSS
  13. 13. Buscar errores en CSS
Siguiente tarea
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Buscar errores en HTML

Familiaricémonos con algunos errores comunes para evitar cometerlos en el futuro.

HTML permite anidar etiquetas unas dentro de otras, y uno de los errores más comunes es anidarlas incorrectamente, por ejemplo:

<p>El <strong>texto</p> es negrita</strong>

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

Otro tipo de error se produce por errores tipográficos y falta de atención, cuando se olvidan los espacios entre los atributos de las etiquetas o se escriben mal sus nombres.

Así que el instructor Cupcake decidió actualizar su CV a altas horas de la noche. Quería hacerlo más conciso, jugar con el diseño. Pero su falta de atención le falló. Pero puede practicar encontrando y corrigiendo errores.

Si te pierdes, hay una pista al final. Pero no la mires de inmediato.

1. Observa el orden en que se cierran las etiquetas.

2. ¿Hay suficientes plazas?

3. Comprueba que los atributos están bien escritos. No son muchos.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>En busca de errores</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake [v.2]</h1> <!-- El primer error se pierde en este bloque --> <div class="error1"> <p> <em>En futuros cursos, a menudo será asistido en el aprendizaje de las sutilezas de HTML y CSS</p> por su instructor Cupcake.</em> </div> <!-- Hay un segundo error oculto aquí --> <div class="error2"> <imgsrc="keks-macho.jpg" class="photocard"> </div> <!-- Y aquí está la tercera --> <div class="error3"> <blockquote clas="nice-cite"> <p>Hola, me llamo Cupcake y soy tu futuro instructor. Soy desarrollador web.</p> <p>¡Nos vemos en futuros 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

    Ayuda a Kex a corregir los errores del código HTML de su nuevo CV:

    1. El primer error con la línea en blanco de más,
    2. el segundo error con la imagen que falta,
    3. un tercer error con el diseño de la cita que falta.

    © 2023-2025, codigoheroe.com