Corso di informatica e HTML5 Zero To Hero PARTIAMO DALLE BASI Cosa impareremo in questo corso? Da qua impareremo a realizzare pagine web. Un viaggio esaltante alla scoperta di un mondo nuovo. HTML e CSS sono tecnologie al cuore di ogni pagina web. Con HTML definisci i contenuti dei tuoi documenti e con CSS controlli il modo in cui sono proposti ai visitatori del tuo sito. A questi linguaggi si collegano quasi tutte le altre tecnologie della rete, questo corso rappresenta un ottimo punto di partenza per una esplorazione che non deve terminare alla fine di queste diapositive. L’obiettivo sarà quello sicuramente di apprendere nuove skill per portare più produttività in azienda ma in primis cercherò di strutturare questo momento di formazione insieme per far si che si trasformi in una lezione/formazione attiva sulla comprensione di come funziona ciò che facciamo. La struttura del documento Iniziamo il nostro viaggio nel mondo delle tecnologie web esplorando la sintassi di HTML (Figura 1.0) e alcuni termini che ricorrono quando si parla di questo linguaggio. Puoi farti subito un’idea della destinazione finale sbirciando dietro una qualunque pagina. Ti basta usare il tuo browser desktop - ossia un browser in dotazione su un PC o un Mac, come Google Chrome per esempio (Figura 1.1), spostarti con il puntatore del mouse, in qualunque punto della pagina web (non su un’immagine), fare clic con il pulsante destro per ottenere un menu e, infine, scorrere fino all’opzione ’’Ispeziona Elemento’’. Figura 1.1 Figura 1.0 La struttura del documento Menu contestuali I menu che ottieni quando usi il tasto destro del mouse, come quello che vedi al centro in Figura 1.1, si chiamano menu contestuali: le opzioni visibili nel menu cambiano a seconda del contesto in cui operi. Osserva cosa accade se richiami il menu quando la freccia del mouse si trova su un’immagine, per esempio. Questi menu sono comunque scorciatoie a funzionalità disponibili attraverso la barra del menu. Perciò tutto quello che vedi li dentro lo troverai anche nella barra del menu. Figura 1.1 La struttura del documento Di solito, aprendo ispeziona, ti troverai di fronte a un mix di HTML e CSS, come in questo caso. Spesso osserverai anche righe di codice JavaScript. (Figura 1.2) Ripeti questo esperimento nei prossimi giorni, con le pagine dei siti che visiti più spesso, senza altra pretesa che non sia quella di esplorare. Nel corso di questi esercizi, inizia a porti alcune domande: come comincia una pagina web? Riesci a identificare elementi ricorrenti in questi listati? Figura 1.2 Non ti preoccupare! Per quanto complessi siano i documenti che intendi creare, tutti quanti condividono la stessa struttura di base che avrai appreso al termine di questo ’’capitolo’’. A quel punto potrai tornare a osservare la figura 1.2 con un occhio diverso, perché saprai già identificare alcuni elementi chiave. A ogni modo, prenditi tutto il tempo necessario per familiarizzare con termini e sintassi, perché sono alla base del lavoro dei capitoli successivi. Nozioni di base: anatomia di un tag Un documento HTML è un file di testo composto da una serie di elementi, o tag, e da contenuti. Un tag è un’etichetta di testo racchiusa tra il simbolo di minore < e maggiore >. Ogni elemento ha un significato ben preciso e viene utilizzato per uno scopo altrettanto preciso. Per esempio se vuoi portare all’attenzione del lettore l’ultima parte della poesia “M’ama non m’ama” di Stefano Benni, userai il tag <mark> che delimita l’inizio del testo importante. Al termine del frammento di testo userai il corrispondente tag di chiusura che si costruisce mettendo una barra obliqua subito prima dell’etichetta: </mark>. Per convenzione la parte di testo contrassegnata dall’elemento <mark> viene rappresentata dai browser come testo evidenziato in giallo (Figura 1.3). Evidenziare un testo di particolare importanza con: Ciao la poesia è questa: <mark>Se dubbio d'amor troppo ti è duolo, scegli una margherita con un petalo solo</mark> Figura 1.3 Figura 1.2 Nozioni di base: anatomia di un tag Se <mark> è un elemento che lavora in coppia con il suo omologo di chiusura </mark>, altri tag invece non ne hanno bisogno. Uno di questi è <br>, che introduce un’interruzione di riga: br sta per break, appunto. Possiamo utilizzare questo nuovo tag per rappresentare correttamente la poesia come nel listato successivo (Figura 1.4). Ogni verso al suo posto con l’interruzione di linea <br>: Se dubbio d'amor <br> troppo ti è duolo <br> <mark>scegli una margherita <br> con un petalo solo</mark> NOTA Pazienta ancora prima di iniziare a usare il browser! Figura 1.4 NOTA Ancora per poco concentrati sulla sintassi, senza preoccuparti di come fare per visualizzare i tuoi documenti, tra poche pagine proverai anche tu. Figura 1.2 Elementi annidati <mark>...</mark> e <br> sono due elementi che operano a livello di frammenti di testo. Per identificare un intero paragrafo userai il tag <p>...</p>: in questo caso è richiesto un tag di chiusura che ne delimiti il perimetro. <p>...</p> o solo <p> In realtà ho semplificato le cose. Se userai sempre il tag di chiusura </p> per i paragrafi non sbaglierai mai. Tuttavia la specifica prevede che se un paragrafo è seguito immediatamente da un altro paragrafo o da altri 29 diversi elementi di cui ti risparmio l’elenco, allora non sarai tenuto a scrivere il tag di chiusura. Poiché la regola da ricordare è molto più complicata della semplice prescrizione: “usa sempre il tag di chiusura” ho preferito darti questa indicazione. In generale, nel resto delle diapositive, userò queste scorciatoie per semplificarti la vita da sviluppatore web tutte le volte che sarà possibile. La p sta per paragraph e, appunto, i browser lo interpretano come un blocco di testo che anche visivamente risulta separato, prima e dopo, da blocchi adiacenti. Uso il listato precedente per inserire un paragrafo che delimiti la poesia. L’elemento paragrafo <p>...</p> <p>Se dubbio d'amor<br> troppo ti è duolo<br> <mark>scegli una margherita<br> con un petalo solo</mark></p> Figura 1.2
