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