freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-ca.../5dc23f9bf86c76b9248c6eba.md

1.4 KiB

id title challengeType dashedName
5dc23f9bf86c76b9248c6eba Step 7 0 step-7

--description--

Puoi aggiungere immagini al tuo sito web utilizzando l'elemento img. Gli elementi img hanno un tag di apertura senza un tag di chiusura. Il tag di un elemento senza un tag di chiusura è detto self-closing tag.

Aggiungi un elemento img sotto l'elemento p. A questo punto, nessuna immagine verrà visualizzata nel browser.

--hints--

L'elemento img dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: <nomeElemento>.

assert(document.querySelector('img'));

L'elemento img non dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere / subito dopo il carattere <.

assert(!code.match(/<\/img\>/));

Dovresti avere un solo elemento img. Rimuovi gli altri.

assert(document.querySelectorAll('img').length === 1);

L'elemento img dovrebbe essere al di sotto dell'elemento p. Sono nell'ordine sbagliato.

const collection = [...document.querySelectorAll('p,img')].map(
  (node) => node.nodeName
);
assert(collection.indexOf('P') < collection.indexOf('IMG'));

--seed--

--seed-contents--

<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
--fcc-editable-region--
      <p>Click here to view more cat photos.</p>
--fcc-editable-region--
    </main>
  </body>
</html>