HTML: impariamo ad aggiungere un'immagine a una pagina web

Per esplorare i concetti che stanno dietro all'aggiunta di immagini ai siti in html vi propongo di assistere alla creazione della pagina web del concorso di interpretazioni all'ukulele che si è svolto nel mio appartamento durante la registrazione di questo video.
I tag che abbiamo incontrato sinora avevano tutti la seguente struttura, prendiamo l'esempio di un paragrafo:

• l'etichetta <p>, che contrassegna tutto ciò che la seguirà come un paragrafo
• il testo successivo all'etichetta: il contenuto da mostrare come paragrafo
• l'etichetta </p>, che indica al browser che l'elemento paragrafo termina qui e che ciò che segue sarà da considerare come un altro elemento.

Il tag che ci permette di aggiungere immagini al nostro sito invece ha una struttura del tutto diversa: necessita di un'unica etichetta che con l'aggiunta di alcuni semplici attributi è in grado di dare al browser tutte le informazioni necessarie. 
Si tratta del tag <img> e la sua struttura è la seguente:
<img src="url" alt="testo alternativo">

• img indica al browser che vogliamo mostrare un'immagine in quel punto
• src="url" dice al browser dove andare a cercare quell'immagine specificando il suo url, cioè il percorso per arrivare dove si trova il file
• alt="" indica un testo alternativo da visualizzare nel caso in cui, per qualsiasi motivo, non sia possibile mostrare l'immagine

Come va con gli esercizi?

Da questa settimana vi propongo di fare un po' di pratica utilizzando la piattaforma di FreeCodeCamp come quaderno degli esercizi nel nostro percorso per imparare assieme a creare siti web a partire da zero. 
L'iscrizione è gratuita e potete farla da qui o dal collegamento che trovare nella linkoteca qui sotto.
Potete scrivermi personalmente o condividere per messaggio sotto ai video le cose che vorreste approfondire e le vostre riflessioni su ciò che stiamo imparando. 
Intanto io cercherò di rendere accessibile questo strumento anche per chi mastica poco inglese con dei video di spiegazione in italiano e delle traduzioni, nella misura del possibile.

La nostra chat vocale su Telegram

I vostri suggerimenti e le vostre condivisioni di temi da approfondire serviranno anche ad organizzare le nostre chat vocali settimanali su Telegram: il luogo in cui vi propongo di trovarci per discutere a voce sul nostro percorso e sulle nostre esperienze.
Potete iscrivervi al canale Telegram dove si terranno le nostre sessioni di chat vocale cliccando qui o utilizzando il link d'invito che trovate in linkoteca. 

Facciamo crescere insieme questo progetto

Se conoscete delle persone che potrebbero essere interessate a fare questo percorso con noi per imparare da zero a creare dei siti web v'invito a condividere questo progetto con loro.
Inoltre, se lo desiderate, potete contribuire alla realizzazione e alla continuazione di questo canale diventando finanziatori con dei contributi anche piccoli utilizzando le possibilità offerte da Cam.TV.
Vi ringrazio per aver passato questo po' di tempo con me e vi auguro una iper buona vita online e offline!
E non dimentichiamoci che condividendo si impara!

Linkoteca

Sito di FreeCodeCamp
Invito a "Siamo Iper!": il nostro canale Telegram per le chat vocali di gruppo

Lo scopo e la filosofia di Iper

Come si colloca ciò che impariamo nel più vasto mondo del web

La magia dell'ipertesto

Il browser va all'asilo. Che cos'è un linguaggio di markup

Il browser va a teatro: la struttura di base di una pagina web
Qualche strumento per trasformare il canale in un gruppo di studio interattivo
Esercizi pratici: le basi dell'HTML
HTML 5 e la struttura logica delle pagine web