WEBVTT 00:00:01.049 --> 00:00:05.550 [Andreas Formiconi] Vediamo qualcosa sull'HTML, 00:00:05.550 --> 00:00:12.817 su alcuni tag, alcune situazioni semplici ma che possono capitare tipicamente. 00:00:12.987 --> 00:00:21.123 Andiamo - faccio l'esempio in Blogger per vedere un effetto particolare 00:00:21.123 --> 00:00:27.196 che nell'editore di WordPress non ho - non si vede. 00:00:27.626 --> 00:00:29.087 Nuovo post. 00:00:30.162 --> 00:00:33.189 Prove con HTML. 00:00:33.850 --> 00:00:37.083 Vediamo: scrivo una riga 00:00:37.713 --> 00:00:41.285 ne scrivo un'altra 00:00:42.146 --> 00:00:48.319 e decido che questa la voglio evidenziare mettendola in grassetto - "bold" in inglese. 00:00:50.457 --> 00:01:00.961 Vado avanti. No, mi viene in mente che prima voglio mettere una descrizione 00:01:02.130 --> 00:01:05.976 ma non in grassetto. 00:01:05.976 --> 00:01:09.626 Come mai? Sono andato sopra. 00:01:11.671 --> 00:01:15.542 Eh no, ma eredito il grassetto. Non era quello che intendevo. 00:01:16.434 --> 00:01:22.447 Questi sono degli inconvenienti abbastanza tipici degli editori di testo. 00:01:23.877 --> 00:01:31.948 Poi a seconda dei casi, una persona più o meno smaliziata, beh, ne viene a capo, 00:01:31.948 --> 00:01:33.431 in questo caso facilmente: 00:01:33.431 --> 00:01:40.011 basta qui ritornare nella condizione iniziale 00:01:40.011 --> 00:01:43.725 per cui tutto ciò che scriverò sopra viene così. 00:01:44.033 --> 00:01:49.011 Ma non sempre: a volte può capitare di ingrullire con queste cose. 00:01:49.579 --> 00:02:00.139 Quindi che cosa succeda effettivamente dentro all'editore, uno non lo sa. 00:02:00.139 --> 00:02:05.113 Ma in questo caso dove in realtà sappiamo che tutto parte da una sorgente, 00:02:05.113 --> 00:02:11.161 codificata in un modo che tutti conoscono, cioè lo standard HTML, 00:02:11.161 --> 00:02:16.683 c'è la possibilità di vedere esattamente che cosa succede. 00:02:17.683 --> 00:02:23.398 E io riesco a vedere chiaramente quali sono gli elementi 00:02:23.398 --> 00:02:28.518 che si sono portati dietro una certa caratteristica o meno. 00:02:28.518 --> 00:02:33.406 Se io lavoro in HTML, questo problema non ce l'ho 00:02:33.406 --> 00:02:39.015 perché sono io che determino la presenza o meno dei tag: 00:02:39.015 --> 00:02:41.646 quindi se io scrivo qui così la mia riga, 00:02:41.646 --> 00:02:46.045 questa viene già pulita e non c'è questo problema. 00:02:46.060 --> 00:02:49.217 Vediamo ora un esempio un po' più interessante. 00:02:49.986 --> 00:02:57.099 Proviamo a inserire in modo visuale un elenco, 00:02:57.806 --> 00:03:00.897 che è una cosa che può capitare, diciamo, abbastanza spesso. 00:03:01.543 --> 00:03:03.392 Son carini questi sistemi. 00:03:03.992 --> 00:03:06.967 Inserisco la prima riga, 00:03:06.967 --> 00:03:10.426 inserisco una seconda riga, 00:03:10.426 --> 00:03:14.648 poi una terza riga. 00:03:16.016 --> 00:03:18.030 No, non voglio più una quarta riga. 00:03:18.030 --> 00:03:19.883 Come mi sbarazzo di questo? 00:03:19.883 --> 00:03:24.986 Ma, qui, per esempio, ribattendo, ritorno un'altra volta, 00:03:24.986 --> 00:03:31.344 lui torna, assume che sia una dichiarazione di cessato interesse per l'elenco. 00:03:32.128 --> 00:03:39.332 Supponiamo ora che io però voglia inserire un sottoelenco, 00:03:39.332 --> 00:03:41.610 al posto per esempio della seconda riga, 00:03:41.610 --> 00:03:44.871 cioè la seconda riga dovrebbe diventare a sua volta un elenco. 00:03:45.547 --> 00:03:46.831 Come si fa? 00:03:48.338 --> 00:03:53.488 Poi intanto cancello questo, e poi vorrei ripartire con l'elenco. 00:03:53.488 --> 00:04:00.519 Mi può venire in mente che questo si realizzi ripigiando un'altra volta su "elenco numerato". 00:04:01.058 --> 00:04:04.660 No, non è così che funziona, evidentemente. 00:04:04.660 --> 00:04:09.382 Cioè questo tasto dell'elenco funziona come un "toggle", 00:04:09.382 --> 00:04:12.627 come un interruttore aperto/chiuso, sì/no, 00:04:12.627 --> 00:04:14.557 cioè un modo elenco sì, un no. 00:04:14.557 --> 00:04:20.074 Anzi, facendo così mi ha addirittura spezzato l'elenco in due elenchi separati: 00:04:20.074 --> 00:04:21.435 peggio mi sento. 00:04:21.435 --> 00:04:23.502 "Undo" - "undo". 00:04:23.502 --> 00:04:25.048 Torniamo al punto di prima. 00:04:25.048 --> 00:04:33.155 Concludo che non si possono fare gli elenchi - i sottoelenchi, scusate - in un post in Blogger. 00:04:33.155 --> 00:04:38.110 Ma posso però tentare di lavorare con HTML. 00:04:39.002 --> 00:04:43.358 Bene, vediamo: così intanto imparo com'è fatto un elenco in HTML. 00:04:43.820 --> 00:04:53.817 C'è un tag di apertura che viene richiuso in fondo all'elenco e evidentemente lo delimita: 00:04:53.817 --> 00:05:00.095 "ol" sta per "ordered list", cioè una lista ordinata di elementi, numerata. 00:05:01.678 --> 00:05:09.513 Poi ogni riga, ogni elemento dell'elenco, è determinato da un tag "li" 00:05:09.513 --> 00:05:11.978 - racchiuso da un tag "li" e "/li". 00:05:11.978 --> 00:05:14.746 Beh, è molto semplice fare gli elenchi, quindi. 00:05:14.746 --> 00:05:19.091 Quindi io potrei, qui, tranquillamente scrivere un'altra cosa... 00:05:25.335 --> 00:05:28.493 e poi andare a vedere: benissimo. 00:05:28.493 --> 00:05:32.251 Naturalmente questa è una schifezza, ora non ci serve, si elimina. 00:05:33.890 --> 00:05:38.922 Bene, allora, per motivi didattici di chiarezza, isoliamo 00:05:39.537 --> 00:05:44.012 - non è necessario fare questo, io lo fo perché sia più chiara la descrizione che vi sto facendo. 00:05:44.842 --> 00:05:48.108 Guardate, se io torno nell'editore non è cambiato niente: 00:05:48.108 --> 00:05:49.715 l'editore ignora quegli spazi. 00:05:49.715 --> 00:05:53.983 A noi servono - ah, li ha tolti, io ce li rimetto perché mi servono. 00:05:53.999 --> 00:05:56.006 Li toglie e quindi... 00:05:56.006 --> 00:06:00.071 E poi mi riordino anche diversamente qui, 00:06:00.071 --> 00:06:04.426 me lo dispongo, questo, così. 00:06:04.426 --> 00:06:07.510 Non fa niente, ecco. 00:06:09.400 --> 00:06:11.774 Vediamo un po' come lui la vive questa cosa. 00:06:11.774 --> 00:06:13.288 Benissimo. 00:06:14.058 --> 00:06:16.000 Ah, ci ha anche lasciato qualche cosa. 00:06:16.000 --> 00:06:19.124 Io mi ostino e ci rimetto questi spazi, che voglio sia chiaro. 00:06:19.124 --> 00:06:23.664 Stiamo lavorando sulla seconda riga che era chiusa da questi due tag. 00:06:23.664 --> 00:06:25.471 Qui che faccio? 00:06:25.487 --> 00:06:29.258 Eh ma io qui dentro ci annido un altro elenco: 00:06:29.258 --> 00:06:45.342 "ol", che andrò a chiudere - "/ol" - e poi ci metto i miei elementi "li" "/li". 00:06:46.833 --> 00:06:54.044 Siccome sono pigro me lo copio e - Control V, V - me lo copio più volte 00:06:54.044 --> 00:06:57.975 - tre volte, anche qui - e dentro ci metto il testo che voglio. 00:06:58.682 --> 00:07:05.541 Cioè potrei mettere "prima riga sottoelenco". 00:07:05.864 --> 00:07:20.981 E sono pigro: Control C, Control V, Control V, e qui, "seconda" e "terza". 00:07:23.595 --> 00:07:25.079 Vediamo il risultato: 00:07:25.817 --> 00:07:32.671 ecco quà: Prima riga e l'elenco successivo è diventato un sottoelenco a sua volta. 00:07:37.284 --> 00:07:42.044 E così si possono fare - aggiungere tante altre caratteristiche. 00:07:44.920 --> 00:07:46.916 Infine vediamo una terza cosa, 00:07:46.916 --> 00:07:52.793 una terza cosa che apparentemente nell'editore visuale non si può introdurre, 00:07:52.793 --> 00:07:55.001 ovvero una tabella. 00:07:57.015 --> 00:08:03.325 Come si fa quando non si sa qualcosa, nella fattispecie di HTML, 00:08:03.325 --> 00:08:07.892 o comunque di codice di qualsiasi tipo che possa servire nel Web? 00:08:07.892 --> 00:08:13.343 Un'ottima fonte è la W3 School. 00:08:20.280 --> 00:08:25.781 W3 School, che fa capo al consorzio W3 00:08:25.781 --> 00:08:31.953 che si occupa sostanzialmente degli standard del Web: 00:08:31.953 --> 00:08:39.907 standard aperti, standard che quindi stanno in armonia con la libertà di espressione. 00:08:39.907 --> 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.