1
99:59:59,999 --> 99:59:59,999
[Andreas Formiconi] Vediamo qualcosa sull'HTML,

2
99:59:59,999 --> 99:59:59,999
su alcuni tag, alcune situazioni semplici ma che possono capitare tipicamente.

3
99:59:59,999 --> 99:59:59,999
Andiamo - faccio l'esempio in Blogger per vedere un effetto particolare

4
99:59:59,999 --> 99:59:59,999
che nell'editore di WordPress non ho - non si vede.

5
99:59:59,999 --> 99:59:59,999
Nuovo post.

6
99:59:59,999 --> 99:59:59,999
Prove con HTML.

7
99:59:59,999 --> 99:59:59,999
Vediamo: scrivo una riga

8
99:59:59,999 --> 99:59:59,999
ne scrivo un'altra

9
99:59:59,999 --> 99:59:59,999
e decido che questa la voglio evidenziare mettendola in grassetto - "bold" in inglese.

10
99:59:59,999 --> 99:59:59,999
Vado avanti. No, mi viene in mente che prima voglio mettere una descrizione

11
99:59:59,999 --> 99:59:59,999
ma non in grassetto.

12
99:59:59,999 --> 99:59:59,999
Come mai? Sono andato sopra.

13
99:59:59,999 --> 99:59:59,999
Eh no, ma eredito il grassetto. Non era quello che intendevo.

14
99:59:59,999 --> 99:59:59,999
Questi sono degli inconvenienti abbastanza tipici degli editori di testo.

15
99:59:59,999 --> 99:59:59,999
Poi a seconda dei casi, una persona più o meno smaliziata, beh, ne viene a capo,

16
99:59:59,999 --> 99:59:59,999
in questo caso facilmente:

17
99:59:59,999 --> 99:59:59,999
basta qui ritornare nella condizione iniziale

18
99:59:59,999 --> 99:59:59,999
per cui tutto ciò che scrivo sopra viene così.

19
99:59:59,999 --> 99:59:59,999
Ma non sempre: a volte può capitare di ingrullire con queste cose.

20
99:59:59,999 --> 99:59:59,999
Quindi che cosa succeda effettivamente dentro all'editore, uno non lo sa.

21
99:59:59,999 --> 99:59:59,999
Ma in questo caso dove in realtà sappiamo che tutto parte da una sorgente,

22
99:59:59,999 --> 99:59:59,999
codificata in un modo che tutti conoscono, cioè lo standard HTML,

23
99:59:59,999 --> 99:59:59,999
c'è la possibilità di vedere esattamente che cosa succede.

24
99:59:59,999 --> 99:59:59,999
E io riesco a vedere chiaramente quali sono gli elementi

25
99:59:59,999 --> 99:59:59,999
che si sono portati dietro una certa caratteristica o meno.

26
99:59:59,999 --> 99:59:59,999
Se io lavoro in HTML, questo problema non ce l'ho

27
99:59:59,999 --> 99:59:59,999
perché sono io che determino la presenza o meno dei tag:

28
99:59:59,999 --> 99:59:59,999
quindi se io scrivo qui così la mia riga,

29
99:59:59,999 --> 99:59:59,999
questa viene già pulita e non c'è questo problema.

30
99:59:59,999 --> 99:59:59,999
Vediamo ora un esempio un po' più interessante.

31
99:59:59,999 --> 99:59:59,999
Proviamo a inserire in modo visuale un elenco,

32
99:59:59,999 --> 99:59:59,999
che è una cosa che può capitare, diciamo, abbastanza spesso.

33
99:59:59,999 --> 99:59:59,999
Son carini questi sistemi.

34
99:59:59,999 --> 99:59:59,999
Inserisco la prima riga,

35
99:59:59,999 --> 99:59:59,999
inserisco una seconda riga,

36
99:59:59,999 --> 99:59:59,999
poi una terza riga.

37
99:59:59,999 --> 99:59:59,999
No, non voglio più una quarta riga.

38
99:59:59,999 --> 99:59:59,999
Come mi sbarazzo di questo?

39
99:59:59,999 --> 99:59:59,999
Ma, qui, per esempio, ribattendo un'altra volta,

40
99:59:59,999 --> 99:59:59,999
lui torna, assume che sia una dichiarazione di cessato interesse per l'elenco.

41
99:59:59,999 --> 99:59:59,999
Supponiamo ora che io però voglia inserire un sottoelenco,

42
99:59:59,999 --> 99:59:59,999
al posto per esempio della seconda riga,

43
99:59:59,999 --> 99:59:59,999
cioè la seconda riga dovrebbe diventare a sua volta un elenco.

44
99:59:59,999 --> 99:59:59,999
Come si fa?

45
99:59:59,999 --> 99:59:59,999
Poi intanto cancello questo, e poi vorrei ripartire con l'elenco.

46
99:59:59,999 --> 99:59:59,999
Mi può venire in mente che questo si realizzi ripigiando un'altra volta su elenco numerato.

47
99:59:59,999 --> 99:59:59,999
No, non è così che funziona, evidentemente.

48
99:59:59,999 --> 99:59:59,999
Cioè questo tasto dell'elenco funziona come un "toggle",

49
99:59:59,999 --> 99:59:59,999
come un interruttore aperto/chiuso, sì/no,

50
99:59:59,999 --> 99:59:59,999
cioè un modo elenco sì, un no.

51
99:59:59,999 --> 99:59:59,999
Anzi, facendo così mi ha addirittura spezzato l'elenco in due elenchi separati:

52
99:59:59,999 --> 99:59:59,999
peggio mi sento.

53
99:59:59,999 --> 99:59:59,999
"Undo" - "undo".

54
99:59:59,999 --> 99:59:59,999
Torniamo al punto di prima.

55
99:59:59,999 --> 99:59:59,999
Concludo che non si possono fare gli elenchi - i sottoelenchi, scusate - in un post in Blogger.

56
99:59:59,999 --> 99:59:59,999
Ma posso però tentare di lavorare con HTML.

57
99:59:59,999 --> 99:59:59,999
Bene, vediamo: così intanto imparo com'è fatto un elenco in HTML.

58
99:59:59,999 --> 99:59:59,999
C'è un tag di apertura che viene richiuso in fondo all'elenco e evidentemente lo delimita:

59
99:59:59,999 --> 99:59:59,999
"ol" sta per "ordered list, cioè una lista ordinata di elementi, numerata.

60
99:59:59,999 --> 99:59:59,999
Poi ogni riga, ogni elemento dell'elenco, è determinato da un tag "li"

61
99:59:59,999 --> 99:59:59,999
- racchiuso da un tag "li" e "/li".

62
99:59:59,999 --> 99:59:59,999
Beh, è molto facile fare gli elenchi, quindi.

63
99:59:59,999 --> 99:59:59,999
Quindi potrei, qui, tranquillamente scrivere un'altra cosa...

64
99:59:59,999 --> 99:59:59,999
e poi andare a vedere: benissimo.

65
99:59:59,999 --> 99:59:59,999
Naturalmente questa è una schifezza, ora non ci serve, si elimina.

66
99:59:59,999 --> 99:59:59,999
Bene, allora, per motivi didattici di chiarezza, isoliamo

67
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.

68
99:59:59,999 --> 99:59:59,999
Guardate, se io torno nell'editore non è cambiato niente:

69
99:59:59,999 --> 99:59:59,999
l'editore ignora quegli spazi.

70
99:59:59,999 --> 99:59:59,999
A noi servono - ah, li ha tolti, io ce li rimetto perché mi servono.

71
99:59:59,999 --> 99:59:59,999
Li toglie e quindi...

72
99:59:59,999 --> 99:59:59,999
E poi mi riordino anche diversamente qui,

73
99:59:59,999 --> 99:59:59,999
me lo dispongo, questo, così.

74
99:59:59,999 --> 99:59:59,999
Non fa niente, ecco.

75
99:59:59,999 --> 99:59:59,999
Vediamo un po' come lui la vive questa cosa.

76
99:59:59,999 --> 99:59:59,999
Benissimo.

77
99:59:59,999 --> 99:59:59,999
Ah, ci ha anche lasciato qualche cosa.

78
99:59:59,999 --> 99:59:59,999
Io mi ostino e ci rimetto questi spazi, che voglio sia chiaro.

79
99:59:59,999 --> 99:59:59,999
Stiamo lavorando sulla seconda riga che era chiusa da questi due tag.

80
99:59:59,999 --> 99:59:59,999
Qui che faccio?

81
99:59:59,999 --> 99:59:59,999
Eh ma io qui dentro ci annido un altro elenco:

82
99:59:59,999 --> 99:59:59,999
"ol", che andrò a chiudere - "/ol" - e poi ci metto i miei elementi "li" "/li".

83
99:59:59,999 --> 99:59:59,999
Siccome sono pigro me lo copio e - Control V, V - me lo copio più volte

84
99:59:59,999 --> 99:59:59,999
- tre volte, anche qui - e dentro ci metto il testo che voglio.

85
99:59:59,999 --> 99:59:59,999
Cioè potrei mettere "prima riga sottoelenco".

86
99:59:59,999 --> 99:59:59,999
E sono pigro: Control C, Control V, Control V, e qui, seconda e terza.

87
99:59:59,999 --> 99:59:59,999
Vediamo il risultato:

88
99:59:59,999 --> 99:59:59,999
ecco quà: Prima riga e l'elenco successivo è diventato un sottoelenco a sua volta.

89
99:59:59,999 --> 99:59:59,999
E così si possono fare - aggiungere tante altre caratteristiche.

90
99:59:59,999 --> 99:59:59,999
Infine vediamo una terza cosa,

91
99:59:59,999 --> 99:59:59,999
una terza cosa che apparentemente nell'editore visuale non si può introdurre,

92
99:59:59,999 --> 99:59:59,999
ovvero una tabella.

93
99:59:59,999 --> 99:59:59,999
Come si fa quando non si sa qualcosa, nella fattispecie di HTML,

94
99:59:59,999 --> 99:59:59,999
o comunque di codice di qualsiasi tipo che possa servire nel Web?

95
99:59:59,999 --> 99:59:59,999
Un'ottima fonte è la W3 School.

96
99:59:59,999 --> 99:59:59,999
W3 School, che fa capo al consorzio W3

97
99:59:59,999 --> 99:59:59,999
che si occupa sostanzialmente degli standard del Web:

98
99:59:59,999 --> 99:59:59,999
standard aperti, standard che quindi stanno in armonia con la libertà di espressione.

99
99:59:59,999 --> 99:59:59,999
Non vi fate intimorire da tutte le cose che uno potrebbe approfondire

100
99:59:59,999 --> 99:59:59,999
ma non è assolutamente il nostro caso.

101
99:59:59,999 --> 99:59:59,999
"Learn HTML".

102
99:59:59,999 --> 99:59:59,999
Bene, intanto si vede com'è costruito un documento HTML minimale,

103
99:59:59,999 --> 99:59:59,999
con delle dichiarazioni iniziali e una chiusura.

104
99:59:59,999 --> 99:59:59,999
Qui c'è un titolo, un paragrafo.

105
99:59:59,999 --> 99:59:59,999
Ma noi andiamo diritto - questo lo potete esplorare per conto vostro -

106
99:59:59,999 --> 99:59:59,999
"Tables", "Tabelle": andiamo qui.

107
99:59:59,999 --> 99:59:59,999
Ah, proprio qualcosa del genere mi sarebbe piaciuto introdurre.

108
99:59:59,999 --> 99:59:59,999
Esempio: "Try it Yourself" - bene, proviamo.

109
99:59:59,999 --> 99:59:59,999
Due finestre ci offre:

110
99:59:59,999 --> 99:59:59,999
una intitolata "Source Code"; lì, il codice sorgente.

111
99:59:59,999 --> 99:59:59,999
L'altra, il risultato.

112
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.

113
99:59:59,999 --> 99:59:59,999
E così che si aggeggia con il codice, si cerca di riconoscere qualche cosa,

114
99:59:59,999 --> 99:59:59,999
anche i programmatori, i softwaristi, i coders più esperti fanno così.

115
99:59:59,999 --> 99:59:59,999
Vediamo nel nostro testo:

116
99:59:59,999 --> 99:59:59,999
"Each table starts with a "table" tag" -

117
99:59:59,999 --> 99:59:59,999
ogni tabella inizia con un tag "table".

118
99:59:59,999 --> 99:59:59,999
Allora qui ci sono dichiarazioni iniziali.

119
99:59:59,999 --> 99:59:59,999
Ecco:"Each table starts with a "table" tag".

120
99:59:59,999 --> 99:59:59,999
Bene, allora queste scritte.

121
99:59:59,999 --> 99:59:59,999
"Each table row starts with a "tr" tag".

122
99:59:59,999 --> 99:59:59,999
Ogni riga - "row", riga - della tabella inizia con un tag "tr".

123
99:59:59,999 --> 99:59:59,999
Ogni dato della tabella inizia con un tag "td", e sono qui.

124
99:59:59,999 --> 99:59:59,999
Questi sono racchiusi - queste tre scritte sono racchiuse da un tag "p" chiuso con "/p":

125
99:59:59,999 --> 99:59:59,999
il paragrafo, l'unità, diciamo, fondamentale di un testo.

126
99:59:59,999 --> 99:59:59,999
Scendiamo: questa ha l'aria di essere un titolo.

127
99:59:59,999 --> 99:59:59,999
Infatti, "one column", troviamo H4.

128
99:59:59,999 --> 99:59:59,999
Ci prudono le mani: che è questo 4?

129
99:59:59,999 --> 99:59:59,999
Vediamo: cambiamolo in 1.

130
99:59:59,999 --> 99:59:59,999
Non succede niente - eh, ma c'è questo tasto.

131
99:59:59,999 --> 99:59:59,999
Cambio il codice, invio il codice, per vedere il risultato. Ecco.

132
99:59:59,999 --> 99:59:59,999
Allora H1, H2, H3, H4 sono titoli di livello diverso.

133
99:59:59,999 --> 99:59:59,999
Benissimo. Questo è esagerato, vediamo se riesco a tornare alla situazione iniziale,

134
99:59:59,999 --> 99:59:59,999
H4. Invio. Perfetto.

135
99:59:59,999 --> 99:59:59,999
Questo è un numero incorniciato, ma guardando le tabelle sottostanti,

136
99:59:59,999 --> 99:59:59,999
capisco che è la tabella minimale.

137
99:59:59,999 --> 99:59:59,999
Andiamo a vedere com'è codificata, sotto al titolo "One column"

138
99:59:59,999 --> 99:59:59,999
- "One column" - bene, vedo subito il tag "table".

139
99:59:59,999 --> 99:59:59,999
C'è addirittura un attributo.

140
99:59:59,999 --> 99:59:59,999
Poi vedo che c'è il tag "tr", chiuso,

141
99:59:59,999 --> 99:59:59,999
che mi determina evidentemente l'unica riga che c'è in questa tabella.

142
99:59:59,999 --> 99:59:59,999
E all'interno di questa riga, c'è il tag "td", poi richiuso,

143
99:59:59,999 --> 99:59:59,999
che mi determina l'unico elemento di questa riga,

144
99:59:59,999 --> 99:59:59,999
quindi viene una tabella banale fatta da una sola riga con un solo elemento,

145
99:59:59,999 --> 99:59:59,999
però è codificata come una tabella,

146
99:59:59,999 --> 99:59:59,999
e poi si chiude la tabella.

147
99:59:59,999 --> 99:59:59,999
Ci incuriosisce questo "border".

148
99:59:59,999 --> 99:59:59,999
Cambiamolo: sarà il bordo, facciamolo esagerato.

149
99:59:59,999 --> 99:59:59,999
È molto utile fare esempi esagerati perché servono a capire con certezza quello che succede.

150
99:59:59,999 --> 99:59:59,999
Lo invio.

151
99:59:59,999 --> 99:59:59,999
Ah, è venuto in effetti un bordo esagerato, per forza: l'ho moltiplicato per 100.

152
99:59:59,999 --> 99:59:59,999
Ora, posso sceglierne uno magari che mi piaccia:

153
99:59:59,999 --> 99:59:59,999
per esempio 3 forse mi va bene.

154
99:59:59,999 --> 99:59:59,999
Mi sembra un bordo più - mi piace, vabbene.

155
99:59:59,999 --> 99:59:59,999
Allora andiamo a vedere l'ultima, dopo "Two rows and three columns",

156
99:59:59,999 --> 99:59:59,999
una tabella di due righe e tre colonne.

157
99:59:59,999 --> 99:59:59,999
Eccola qua.

158
99:59:59,999 --> 99:59:59,999
Inizia "table border="3"".

159
99:59:59,999 --> 99:59:59,999
Ma voglio farla subito così che ci ho preso gusto

160
99:59:59,999 --> 99:59:59,999
Ci dovrei riconoscere due righe.

161
99:59:59,999 --> 99:59:59,999
In effetti apre con tag "tr" la prima riga - row -

162
99:59:59,999 --> 99:59:59,999
la chiude, apre la seconda, la chiude.

163
99:59:59,999 --> 99:59:59,999
Torno e nella prima riga ci trovo tre elementi, 100, 200 e 300. Vero.

164
99:59:59,999 --> 99:59:59,999
Nella seconda, 400, 500 e 600: vero.

165
99:59:59,999 --> 99:59:59,999
Allora cominciamo a fare ciò che interessa a me:

166
99:59:59,999 --> 99:59:59,999
Pippo, Topolino. Vediamo: perfetto.

167
99:59:59,999 --> 99:59:59,999
Chi mi ferma più?

168
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

169
99:59:59,999 --> 99:59:59,999
che si elabora bene con un editore di testo,

170
99:59:59,999 --> 99:59:59,999
perché non copiare pari-pari questo testo,

171
99:59:59,999 --> 99:59:59,999
andare nel mio blog, metterlo - porlo - in modo testo,

172
99:59:59,999 --> 99:59:59,999
copiarci dentro il tutto, vedere subito cosa viene.

173
99:59:59,999 --> 99:59:59,999
E ora qui diventa un gioco da ragazzi,

174
99:59:59,999 --> 99:59:59,999
cioè diventa un gioco.

175
99:59:59,999 --> 99:59:59,999
Posso fare qualsiasi cosa:

176
99:59:59,999 --> 99:59:59,999
copio per esempio una riga e poi la posso riprodurre; vediamo:

177
99:59:59,999 --> 99:59:59,999
Ecco qua. Il limite, a questo punto, è solo la fantasia e la voglia di esplorare.