` per creare elementi separati in una pagina. Verranno creati una serie di elementi `

` che conterranno immagini. ### Immagini Un tag html che non necessita di un tag di chiusura è il tag ``, perché ha un elemento `src` che contiene tutte le informazioni di cui la pagina ha bisogno per eseguire il rendering dell'elemento. Creare una cartella nella propria app chiamata `images` e in quella aggiungere tutte le immagini nella [cartella del codice sorgente](../../solution/images); (ci sono 14 immagini di piante). ### Attività Aggiungere quelle immagini di piante nelle due colonne tra i tag ``: ```html

``` > Nota: Span contro Div. I div sono considerati elementi "blocco" e gli span sono "in linea". Cosa succederebbe se si trasformassero questi div in span? Con questo markup, le piante ora vengono visualizzate sullo schermo. Sembra piuttosto brutto, perché non hanno ancora lo stile utilizzando CSS e verrà fatto nella prossima lezione. Ogni immagine ha un testo alternativo che apparirà anche se non è possibile vedere o renderizzare un'immagine. Questo è un attributo importante da includere per l'accessibilità. Ulteriori informazioni sull'accessibilità nelle lezioni future; per ora, occorre ricordare che l'attributo alt fornisce informazioni alternative per un'immagine se un utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore nell'attributo src o se l'utente utilizza un lettore di schermo). ✅ Si è notato che ogni immagine ha lo stesso tag alt? È una buona pratica? Se sì, perché? Se no, perché? Si può migliorare questo codice? --- ## Markup semantico In generale, è preferibile utilizzare una "semantica" significativa quando si scrive HTML. Cosa significa? Significa che si utilizzano i tag HTML per rappresentare il tipo di dati o interazione per cui sono stati progettati. Ad esempio, il testo del titolo principale di una pagina dovrebbe utilizzare un tag `

`. Aggiungere la seguente riga proprio sotto il tag di apertura ` `: ```html

My Terrarium

``` L'utilizzo di markup semantico tipo avere delle intestazioni come `

` e il rendering di elenchi non ordinati come `
` aiuta i lettori di schermo a navigare in una pagina. In generale, i pulsanti dovrebbero essere scritti come `

`: ```html

``` ✅ Anche se questo markup è stato aggiunto allo schermo, non si assolutamente nulla di renderizzato. Perché? --- ## 🚀 Sfida Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocare, anche se non si dovrebero usare tag deprecati come [questi tag](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel proprio markup. Tuttavia, si può usare il vecchio tag `` per far scorrere orizzontalmente il titolo h1? (se viene fatto, non dimenticarsi di rimuoverlo dopo) ## Quiz Post-Lezione [Quiz post-lezione](https://wonderful-flower-063e19f0f.1.azurestaticapps.net/quiz/16?loc=it) ## Revisione e Auto Apprendimento L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro? Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa). ## Compito [Fare pratica con il proprio HTML: creare un modello di blog](assignment.it.md)