Compito precedente
Introduzione a HTML e CSS7/13
Torna all'elenco delle attività
  1. 1. Andiamo!
  2. 2. CSS in azione
  3. 3. Consolidamento
  4. 4. Nozioni di base di HTML
  5. 5. Singoli tag HTML
  6. 6. Attributi dei tag HTML
  7. 7. Ricerca di errori in HTML
  8. 8. Le basi dei CSS
  9. 9. Altri modi per collegare il CSS
  10. 10. Selettori CSS
  11. 11. Classi in CSS
  12. 12. Proprietà e valori CSS
  13. 13. Ricerca di errori nei CSS
Compito successivo
  • Corsi
  • Registrazione
  • Accedi

Caricamento...
In pochi secondi sarà pronto.

  • Teoria
  • Teoria

Ricerca di errori in HTML

Vediamo di conoscere alcuni errori comuni per evitare di commetterli in futuro.

L'HTML consente di annidare i tag l'uno nell'altro e uno degli errori più comuni è quello di annidarli in modo errato, ad esempio:

<p>Il <strong>testo</p> è in grassetto</strong>

In questo esempio, il tag <p> si chiude prima del tag <strong> e questo è un errore.

Un altro tipo di errore è dovuto a errori di battitura e disattenzione, quando si dimenticano gli spazi tra gli attributi dei tag o si sbaglia il loro nome.

Così l'istruttore Cupcake ha deciso di aggiornare il suo CV a tarda notte. Voleva renderlo più conciso, giocare con l'impaginazione. Ma la sua disattenzione lo ha deluso. Ma può esercitarsi a trovare e correggere gli errori.

Se vi perdete, in fondo c'è un indizio. Ma non guardatelo subito!

1. Osservare l'ordine di chiusura dei tag.

2. Ci sono spazi sufficienti?

3. Controllare che gli attributi siano scritti correttamente. Non ce ne sono molti.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Ricerca di errori in HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Istruttore Cupcake [v.2]</h1> <!-- Il primo errore si perde in questo blocco --> <div class="error1"> <p> <em>Nei corsi futuri, sarete spesso aiutati a padroneggiare le complessità di HTML e CSS</p> dall'istruttore Cupcake.</em> </div> <!-- C'è un secondo errore nascosto qui --> <div class="error2"> <imgsrc="keks-macho.jpg" class="photocard"> </div> <!-- Ed ecco il terzo --> <div class="error3"> <blockquote clas="nice-cite"> <p>Ciao, mi chiamo Cupcake e sono il tuo futuro istruttore. Sono una sviluppatrice web.</p> <p>Ci vediamo nei prossimi corsi!</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; }

Il codice è cambiato, fai clic su "Aggiorna" o attiva l'esecuzione automatica.

Sei passato a un'altra pagina

Fare clic all'interno del mini-browser per evidenziare questa finestra.

100%
ObiettiviFatto
0

    Aiutate Cupcake a correggere gli errori nel codice HTML del suo nuovo CV:

    1. Il primo errore con la riga vuota in più,
    2. il secondo errore con l'immagine mancante,
    3. un terzo errore con il disegno della citazione mancante.

    © 2023-2024, codegym.study