WEBVTT 99:59:59.999 --> 99:59:59.999 [Andreas Formiconi] Vediamo qualcosa sull'HTML, 99:59:59.999 --> 99:59:59.999 su alcuni tag, alcune situazioni semplici ma che possono capitare tipicamente. 99:59:59.999 --> 99:59:59.999 Andiamo - faccio l'esempio in Blogger per vedere un effetto particolare 99:59:59.999 --> 99:59:59.999 che nell'editore di WordPress non ho - non si vede. 99:59:59.999 --> 99:59:59.999 Nuovo post. 99:59:59.999 --> 99:59:59.999 Prove con HTML. 99:59:59.999 --> 99:59:59.999 Vediamo: scrivo una riga 99:59:59.999 --> 99:59:59.999 ne scrivo un'altra 99:59:59.999 --> 99:59:59.999 e decido che questa la voglio evidenziare mettendola in grassetto - "bold" in inglese. 99:59:59.999 --> 99:59:59.999 Vado avanti. No, mi viene in mente che prima voglio mettere una descrizione 99:59:59.999 --> 99:59:59.999 ma non in grassetto. 99:59:59.999 --> 99:59:59.999 Come mai? Sono andato sopra. 99:59:59.999 --> 99:59:59.999 Eh no, ma eredito il grassetto. Non era quello che intendevo. 99:59:59.999 --> 99:59:59.999 Questi sono degli inconvenienti abbastanza tipici degli editori di testo. 99:59:59.999 --> 99:59:59.999 Poi a seconda dei casi, una persona più o meno smaliziata, beh, ne viene a capo, 99:59:59.999 --> 99:59:59.999 in questo caso facilmente: 99:59:59.999 --> 99:59:59.999 basta qui ritornare nella condizione iniziale 99:59:59.999 --> 99:59:59.999 per cui tutto ciò che scrivo sopra viene così. 99:59:59.999 --> 99:59:59.999 Ma non sempre: a volte può capitare di ingrullire con queste cose. 99:59:59.999 --> 99:59:59.999 Quindi che cosa succeda effettivamente dentro all'editore, uno non lo sa. 99:59:59.999 --> 99:59:59.999 Ma in questo caso dove in realtà sappiamo che tutto parte da una sorgente, 99:59:59.999 --> 99:59:59.999 codificata in un modo che tutti conoscono, cioè lo standard HTML, 99:59:59.999 --> 99:59:59.999 c'è la possibilità di vedere esattamente che cosa succede. 99:59:59.999 --> 99:59:59.999 E io riesco a vedere chiaramente quali sono gli elementi 99:59:59.999 --> 99:59:59.999 che si sono portati dietro una certa caratteristica o meno. 99:59:59.999 --> 99:59:59.999 Se io lavoro in HTML, questo problema non ce l'ho 99:59:59.999 --> 99:59:59.999 perché sono io che determino la presenza o meno dei tag: 99:59:59.999 --> 99:59:59.999 quindi se io scrivo qui così la mia riga, 99:59:59.999 --> 99:59:59.999 questa viene già pulita e non c'è questo problema. 99:59:59.999 --> 99:59:59.999 Vediamo ora un esempio un po' più interessante. 99:59:59.999 --> 99:59:59.999 Proviamo a inserire in modo visuale un elenco, 99:59:59.999 --> 99:59:59.999 che è una cosa che può capitare, diciamo, abbastanza spesso. 99:59:59.999 --> 99:59:59.999 Son carini questi sistemi. 99:59:59.999 --> 99:59:59.999 Inserisco la prima riga, 99:59:59.999 --> 99:59:59.999 inserisco una seconda riga, 99:59:59.999 --> 99:59:59.999 poi una terza riga. 99:59:59.999 --> 99:59:59.999 No, non voglio più una quarta riga. 99:59:59.999 --> 99:59:59.999 Come mi sbarazzo di questo? 99:59:59.999 --> 99:59:59.999 Ma, qui, per esempio, ribattendo un'altra volta, 99:59:59.999 --> 99:59:59.999 lui torna, assume che sia una dichiarazione di cessato interesse per l'elenco. 99:59:59.999 --> 99:59:59.999 Supponiamo ora che io però voglia inserire un sottoelenco, 99:59:59.999 --> 99:59:59.999 al posto per esempio della seconda riga, 99:59:59.999 --> 99:59:59.999 cioè la seconda riga dovrebbe diventare a sua volta un elenco. 99:59:59.999 --> 99:59:59.999 Come si fa? 99:59:59.999 --> 99:59:59.999 Poi intanto cancello questo, e poi vorrei ripartire con l'elenco. 99:59:59.999 --> 99:59:59.999 Mi può venire in mente che questo si realizzi ripigiando un'altra volta su elenco numerato. 99:59:59.999 --> 99:59:59.999 No, non è così che funziona, evidentemente. 99:59:59.999 --> 99:59:59.999 Cioè questo tasto dell'elenco funziona come un "toggle", 99:59:59.999 --> 99:59:59.999 come un interruttore aperto/chiuso, sì/no, 99:59:59.999 --> 99:59:59.999 cioè un modo elenco sì, un no. 99:59:59.999 --> 99:59:59.999 Anzi, facendo così mi ha addirittura spezzato l'elenco in due elenchi separati: 99:59:59.999 --> 99:59:59.999 peggio mi sento. 99:59:59.999 --> 99:59:59.999 "Undo" - "undo". 99:59:59.999 --> 99:59:59.999 Torniamo al punto di prima. 99:59:59.999 --> 99:59:59.999 Concludo che non si possono fare gli elenchi - i sottoelenchi, scusate - in un post in Blogger. 99:59:59.999 --> 99:59:59.999 Ma posso però tentare di lavorare con HTML. 99:59:59.999 --> 99:59:59.999 Bene, vediamo: così intanto imparo com'è fatto un elenco in HTML. 99:59:59.999 --> 99:59:59.999 C'è un tag di apertura che viene richiuso in fondo all'elenco e evidentemente lo delimita: 99:59:59.999 --> 99:59:59.999 "ol" sta per "ordered list, cioè una lista ordinata di elementi, numerata. 99:59:59.999 --> 99:59:59.999 Poi ogni riga, ogni elemento dell'elenco, è determinato da un tag "li" 99:59:59.999 --> 99:59:59.999 - racchiuso da un tag "li" e "/li". 99:59:59.999 --> 99:59:59.999 Beh, è molto facile fare gli elenchi, quindi. 99:59:59.999 --> 99:59:59.999 Quindi potrei, qui, tranquillamente scrivere un'altra cosa... 99:59:59.999 --> 99:59:59.999 e poi andare a vedere: benissimo. 99:59:59.999 --> 99:59:59.999 Naturalmente questa è una schifezza, ora non ci serve, si elimina. 99:59:59.999 --> 99:59:59.999 Bene, allora, per motivi didattici di chiarezza, isoliamo 99:59:59.999 --> 99:59:59.999 - non è necessario fare questo, io lo fo perché sia più chiara la descrizione che vi sto facendo. 99:59:59.999 --> 99:59:59.999 Guardate, se io torno nell'editore non è cambiato niente: 99:59:59.999 --> 99:59:59.999 l'editore ignora quegli spazi. 99:59:59.999 --> 99:59:59.999 A noi servono - ah, li ha tolti, io ce li rimetto perché mi servono. 99:59:59.999 --> 99:59:59.999 Li toglie e quindi... 99:59:59.999 --> 99:59:59.999 E poi mi riordino anche diversamente qui, 99:59:59.999 --> 99:59:59.999 me lo dispongo, questo, così. 99:59:59.999 --> 99:59:59.999 Non fa niente, ecco. 99:59:59.999 --> 99:59:59.999 Vediamo un po' come lui la vive questa cosa. 99:59:59.999 --> 99:59:59.999 Benissimo. 99:59:59.999 --> 99:59:59.999 Ah, ci ha anche lasciato qualche cosa. 99:59:59.999 --> 99:59:59.999 Io mi ostino e ci rimetto questi spazi, che voglio sia chiaro. 99:59:59.999 --> 99:59:59.999 Stiamo lavorando sulla seconda riga che era chiusa da questi due tag. 99:59:59.999 --> 99:59:59.999 Qui che faccio? 99:59:59.999 --> 99:59:59.999 Eh ma io qui dentro ci annido un altro elenco: 99:59:59.999 --> 99:59:59.999 "ol", che andrò a chiudere - "/ol" - e poi ci metto i miei elementi "li" "/li". 99:59:59.999 --> 99:59:59.999 Siccome sono pigro me lo copio e - Control V, V - me lo copio più volte 99:59:59.999 --> 99:59:59.999 - tre volte, anche qui - e dentro ci metto il testo che voglio. 99:59:59.999 --> 99:59:59.999 Cioè potrei mettere "prima riga sottoelenco". 99:59:59.999 --> 99:59:59.999 E sono pigro: Control C, Control V, Control V, e qui, seconda e terza. 99:59:59.999 --> 99:59:59.999 Vediamo il risultato: 99:59:59.999 --> 99:59:59.999 ecco quà: Prima riga e l'elenco successivo è diventato un sottoelenco a sua volta. 99:59:59.999 --> 99:59:59.999 E così si possono fare - aggiungere tante altre caratteristiche. 99:59:59.999 --> 99:59:59.999 Infine vediamo una terza cosa, 99:59:59.999 --> 99:59:59.999 una terza cosa che apparentemente nell'editore visuale non si può introdurre, 99:59:59.999 --> 99:59:59.999 ovvero una tabella. 99:59:59.999 --> 99:59:59.999 Come si fa quando non si sa qualcosa, nella fattispecie di HTML, 99:59:59.999 --> 99:59:59.999 o comunque di codice di qualsiasi tipo che possa servire nel Web? 99:59:59.999 --> 99:59:59.999 Un'ottima fonte è la W3 School. 99:59:59.999 --> 99:59:59.999 W3 School, che fa capo al consorzio W3 99:59:59.999 --> 99:59:59.999 che si occupa sostanzialmente degli standard del Web: 99:59:59.999 --> 99:59:59.999 standard aperti, standard che quindi stanno in armonia con la libertà di espressione. 99:59:59.999 --> 99:59:59.999 Non vi fate intimorire da tutte le cose che uno potrebbe approfondire 99:59:59.999 --> 99:59:59.999 ma non è assolutamente il nostro caso. 99:59:59.999 --> 99:59:59.999 "Learn HTML". 99:59:59.999 --> 99:59:59.999 Bene, intanto si vede com'è costruito un documento HTML minimale, 99:59:59.999 --> 99:59:59.999 con delle dichiarazioni iniziali e una chiusura. 99:59:59.999 --> 99:59:59.999 Qui c'è un titolo, un paragrafo. 99:59:59.999 --> 99:59:59.999 Ma noi andiamo diritto - questo lo potete esplorare per conto vostro - 99:59:59.999 --> 99:59:59.999 "Tables", "Tabelle": andiamo qui. 99:59:59.999 --> 99:59:59.999 Ah, proprio qualcosa del genere mi sarebbe piaciuto introdurre. 99:59:59.999 --> 99:59:59.999 Esempio: "Try it Yourself" - bene, proviamo. 99:59:59.999 --> 99:59:59.999 Due finestre ci offre: 99:59:59.999 --> 99:59:59.999 una intitolata "Source Code"; lì, il codice sorgente. 99:59:59.999 --> 99:59:59.999 L'altra, il risultato. 99:59:59.999 --> 99:59:59.999 Quindi ciò che io vedo a destra, qui, il risultato, è determinato da come ho scritto il codice a sinistra. 99:59:59.999 --> 99:59:59.999 E così che si aggeggia con il codice, si cerca di riconoscere qualche cosa, 99:59:59.999 --> 99:59:59.999 anche i programmatori, i softwaristi, i coders più esperti fanno così. 99:59:59.999 --> 99:59:59.999 Vediamo nel nostro testo: 99:59:59.999 --> 99:59:59.999 "Each table starts with a "table" tag" - 99:59:59.999 --> 99:59:59.999 ogni tabella inizia con un tag "table". 99:59:59.999 --> 99:59:59.999 Allora qui ci sono dichiarazioni iniziali. 99:59:59.999 --> 99:59:59.999 Ecco:"Each table starts with a "table" tag". 99:59:59.999 --> 99:59:59.999 Bene, allora queste scritte. 99:59:59.999 --> 99:59:59.999 "Each table row starts with a "tr" tag". 99:59:59.999 --> 99:59:59.999 Ogni riga - "row", riga - della tabella inizia con un tag "tr". 99:59:59.999 --> 99:59:59.999 Ogni dato della tabella inizia con un tag "td", e sono qui. 99:59:59.999 --> 99:59:59.999 Questi sono racchiusi - queste tre scritte sono racchiuse da un tag "p" chiuso con "/p": 99:59:59.999 --> 99:59:59.999 il paragrafo, l'unità, diciamo, fondamentale di un testo. 99:59:59.999 --> 99:59:59.999 Scendiamo: questa ha l'aria di essere un titolo. 99:59:59.999 --> 99:59:59.999 Infatti, "one column", troviamo H4. 99:59:59.999 --> 99:59:59.999 Ci prudono le mani: che è questo 4? 99:59:59.999 --> 99:59:59.999 Vediamo: cambiamolo in 1. 99:59:59.999 --> 99:59:59.999 Non succede niente - eh, ma c'è questo tasto. 99:59:59.999 --> 99:59:59.999 Cambio il codice, invio il codice, per vedere il risultato. Ecco. 99:59:59.999 --> 99:59:59.999 Allora H1, H2, H3, H4 sono titoli di livello diverso. 99:59:59.999 --> 99:59:59.999 Benissimo. Questo è esagerato, vediamo se riesco a tornare alla situazione iniziale, 99:59:59.999 --> 99:59:59.999 H4. Invio. Perfetto. 99:59:59.999 --> 99:59:59.999 Questo è un numero incorniciato, ma guardando le tabelle sottostanti, 99:59:59.999 --> 99:59:59.999 capisco che è la tabella minimale. 99:59:59.999 --> 99:59:59.999 Andiamo a vedere com'è codificata, sotto al titolo "One column" 99:59:59.999 --> 99:59:59.999 - "One column" - bene, vedo subito il tag "table". 99:59:59.999 --> 99:59:59.999 C'è addirittura un attributo. 99:59:59.999 --> 99:59:59.999 Poi vedo che c'è il tag "tr", chiuso, 99:59:59.999 --> 99:59:59.999 che mi determina evidentemente l'unica riga che c'è in questa tabella. 99:59:59.999 --> 99:59:59.999 E all'interno di questa riga, c'è il tag "td", poi richiuso, 99:59:59.999 --> 99:59:59.999 che mi determina l'unico elemento di questa riga, 99:59:59.999 --> 99:59:59.999 quindi viene una tabella banale fatta da una sola riga con un solo elemento, 99:59:59.999 --> 99:59:59.999 però è codificata come una tabella, 99:59:59.999 --> 99:59:59.999 e poi si chiude la tabella. 99:59:59.999 --> 99:59:59.999 Ci incuriosisce questo "border". 99:59:59.999 --> 99:59:59.999 Cambiamolo: sarà il bordo, facciamolo esagerato. 99:59:59.999 --> 99:59:59.999 È molto utile fare esempi esagerati perché servono a capire con certezza quello che succede. 99:59:59.999 --> 99:59:59.999 Lo invio. 99:59:59.999 --> 99:59:59.999 Ah, è venuto in effetti un bordo esagerato, per forza: l'ho moltiplicato per 100. 99:59:59.999 --> 99:59:59.999 Ora, posso sceglierne uno magari che mi piaccia: 99:59:59.999 --> 99:59:59.999 per esempio 3 forse mi va bene. 99:59:59.999 --> 99:59:59.999 Mi sembra un bordo più - mi piace, vabbene. 99:59:59.999 --> 99:59:59.999 Allora andiamo a vedere l'ultima, dopo "Two rows and three columns", 99:59:59.999 --> 99:59:59.999 una tabella di due righe e tre colonne. 99:59:59.999 --> 99:59:59.999 Eccola qua. 99:59:59.999 --> 99:59:59.999 Inizia "table border="3"". 99:59:59.999 --> 99:59:59.999 Ma voglio farla subito così che ci ho preso gusto 99:59:59.999 --> 99:59:59.999 Ci dovrei riconoscere due righe. 99:59:59.999 --> 99:59:59.999 In effetti apre con tag "tr" la prima riga - row - 99:59:59.999 --> 99:59:59.999 la chiude, apre la seconda, la chiude. 99:59:59.999 --> 99:59:59.999 Torno e nella prima riga ci trovo tre elementi, 100, 200 e 300. Vero. 99:59:59.999 --> 99:59:59.999 Nella seconda, 400, 500 e 600: vero. 99:59:59.999 --> 99:59:59.999 Allora cominciamo a fare ciò che interessa a me: 99:59:59.999 --> 99:59:59.999 Pippo, Topolino. Vediamo: perfetto. 99:59:59.999 --> 99:59:59.999 Chi mi ferma più? 99:59:59.999 --> 99:59:59.999 Ora vorrei tornare a scrivere la tabella nel mio post, ma visto che ho sotto il naso un testo 99:59:59.999 --> 99:59:59.999 che si elabora bene con un editore di testo, 99:59:59.999 --> 99:59:59.999 perché non copiare pari-pari questo testo, 99:59:59.999 --> 99:59:59.999 andare nel mio blog, metterlo - porlo - in modo testo, 99:59:59.999 --> 99:59:59.999 copiarci dentro il tutto, vedere subito cosa viene. 99:59:59.999 --> 99:59:59.999 E ora qui diventa un gioco da ragazzi, 99:59:59.999 --> 99:59:59.999 cioè diventa un gioco. 99:59:59.999 --> 99:59:59.999 Posso fare qualsiasi cosa: 99:59:59.999 --> 99:59:59.999 copio per esempio una riga e poi la posso riprodurre; vediamo: 99:59:59.999 --> 99:59:59.999 Ecco qua. Il limite, a questo punto, è solo la fantasia e la voglia di esplorare.