1
00:00:01,049 --> 00:00:05,550
[Andreas Formiconi] Vediamo qualcosa sull'HTML,

2
00:00:05,550 --> 00:00:12,817
su alcuni tag, alcune situazioni semplici ma che possono capitare tipicamente.

3
00:00:12,987 --> 00:00:21,123
Andiamo - faccio l'esempio in Blogger per vedere un effetto particolare

4
00:00:21,123 --> 00:00:27,196
che nell'editore di WordPress non ho - non si vede.

5
00:00:27,626 --> 00:00:29,087
Nuovo post.

6
00:00:30,162 --> 00:00:33,189
Prove con HTML.

7
00:00:33,850 --> 00:00:37,083
Vediamo: scrivo una riga

8
00:00:37,713 --> 00:00:41,285
ne scrivo un'altra

9
00:00:42,146 --> 00:00:48,319
e decido che questa la voglio evidenziare mettendola in grassetto - "bold" in inglese.

10
00:00:50,457 --> 00:01:00,961
Vado avanti. No, mi viene in mente che prima voglio mettere una descrizione

11
00:01:02,130 --> 00:01:05,976
ma non in grassetto.

12
00:01:05,976 --> 00:01:09,626
Come mai? Sono andato sopra.

13
00:01:11,671 --> 00:01:15,542
Eh no, ma eredito il grassetto. Non era quello che intendevo.

14
00:01:16,434 --> 00:01:22,447
Questi sono degli inconvenienti abbastanza tipici degli editori di testo.

15
00:01:23,877 --> 00:01:31,948
Poi a seconda dei casi, una persona più o meno smaliziata, beh, ne viene a capo,

16
00:01:31,948 --> 00:01:33,431
in questo caso facilmente:

17
00:01:33,431 --> 00:01:40,011
basta qui ritornare nella condizione iniziale

18
00:01:40,011 --> 00:01:43,725
per cui tutto ciò che scriverò sopra viene così.

19
00:01:44,033 --> 00:01:49,011
Ma non sempre: a volte può capitare di ingrullire con queste cose.

20
00:01:49,579 --> 00:02:00,139
Quindi che cosa succeda effettivamente dentro all'editore, uno non lo sa.

21
00:02:00,139 --> 00:02:05,113
Ma in questo caso dove in realtà sappiamo che tutto parte da una sorgente,

22
00:02:05,113 --> 00:02:11,161
codificata in un modo che tutti conoscono, cioè lo standard HTML,

23
00:02:11,161 --> 00:02:16,683
c'è la possibilità di vedere esattamente che cosa succede.

24
00:02:17,683 --> 00:02:23,398
E io riesco a vedere chiaramente quali sono gli elementi

25
00:02:23,398 --> 00:02:28,518
che si sono portati dietro una certa caratteristica o meno.

26
00:02:28,518 --> 00:02:33,406
Se io lavoro in HTML, questo problema non ce l'ho

27
00:02:33,406 --> 00:02:39,015
perché sono io che determino la presenza o meno dei tag:

28
00:02:39,015 --> 00:02:41,646
quindi se io scrivo qui così la mia riga,

29
00:02:41,646 --> 00:02:46,045
questa viene già pulita e non c'è questo problema.

30
00:02:46,060 --> 00:02:49,217
Vediamo ora un esempio un po' più interessante.

31
00:02:49,986 --> 00:02:57,099
Proviamo a inserire in modo visuale un elenco,

32
00:02:57,806 --> 00:03:00,897
che è una cosa che può capitare, diciamo, abbastanza spesso.

33
00:03:01,543 --> 00:03:03,392
Son carini questi sistemi.

34
00:03:03,992 --> 00:03:06,967
Inserisco la prima riga,

35
00:03:06,967 --> 00:03:10,426
inserisco una seconda riga,

36
00:03:10,426 --> 00:03:14,648
poi una terza riga.

37
00:03:16,016 --> 00:03:18,030
No, non voglio più una quarta riga.

38
00:03:18,030 --> 00:03:19,883
Come mi sbarazzo di questo?

39
00:03:19,883 --> 00:03:24,986
Ma, qui, per esempio, ribattendo, ritorno un'altra volta,

40
00:03:24,986 --> 00:03:31,344
lui torna, assume che sia una dichiarazione di cessato interesse per l'elenco.

41
00:03:32,128 --> 00:03:39,332
Supponiamo ora che io però voglia inserire un sottoelenco,

42
00:03:39,332 --> 00:03:41,610
al posto per esempio della seconda riga,

43
00:03:41,610 --> 00:03:44,871
cioè la seconda riga dovrebbe diventare a sua volta un elenco.

44
00:03:45,547 --> 00:03:46,831
Come si fa?

45
00:03:48,338 --> 00:03:53,488
Poi intanto cancello questo, e poi vorrei ripartire con l'elenco.

46
00:03:53,488 --> 00:04:00,519
Mi può venire in mente che questo si realizzi ripigiando un'altra volta su "elenco numerato".

47
00:04:01,058 --> 00:04:04,660
No, non è così che funziona, evidentemente.

48
00:04:04,660 --> 00:04:09,382
Cioè questo tasto dell'elenco funziona come un "toggle",

49
00:04:09,382 --> 00:04:12,627
come un interruttore aperto/chiuso, sì/no,

50
00:04:12,627 --> 00:04:14,557
cioè un modo elenco sì, un no.

51
00:04:14,557 --> 00:04:20,074
Anzi, facendo così mi ha addirittura spezzato l'elenco in due elenchi separati:

52
00:04:20,074 --> 00:04:21,435
peggio mi sento.

53
00:04:21,435 --> 00:04:23,502
"Undo" - "undo".

54
00:04:23,502 --> 00:04:25,048
Torniamo al punto di prima.

55
00:04:25,048 --> 00:04:33,155
Concludo che non si possono fare gli elenchi - i sottoelenchi, scusate - in un post in Blogger.

56
00:04:33,155 --> 00:04:38,110
Ma posso però tentare di lavorare con HTML.

57
00:04:39,002 --> 00:04:43,358
Bene, vediamo: così intanto imparo com'è fatto un elenco in HTML.

58
00:04:43,820 --> 00:04:53,817
C'è un tag di apertura che viene richiuso in fondo all'elenco e evidentemente lo delimita:

59
00:04:53,817 --> 00:05:00,095
"ol" sta per "ordered list", cioè una lista ordinata di elementi, numerata.

60
00:05:01,678 --> 00:05:09,513
Poi ogni riga, ogni elemento dell'elenco, è determinato da un tag "li"

61
00:05:09,513 --> 00:05:11,978
- racchiuso da un tag "li" e "/li".

62
00:05:11,978 --> 00:05:14,746
Beh, è molto semplice fare gli elenchi, quindi.

63
00:05:14,746 --> 00:05:19,091
Quindi io potrei, qui, tranquillamente scrivere un'altra cosa...

64
00:05:25,335 --> 00:05:28,493
e poi andare a vedere: benissimo.

65
00:05:28,493 --> 00:05:32,251
Naturalmente questa è una schifezza, ora non ci serve, si elimina.

66
00:05:33,890 --> 00:05:38,922
Bene, allora, per motivi didattici di chiarezza, isoliamo

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

68
00:05:44,842 --> 00:05:48,108
Guardate, se io torno nell'editore non è cambiato niente:

69
00:05:48,108 --> 00:05:49,715
l'editore ignora quegli spazi.

70
00:05:49,715 --> 00:05:53,983
A noi servono - ah, li ha tolti, io ce li rimetto perché mi servono.

71
00:05:53,999 --> 00:05:56,006
Li toglie e quindi...

72
00:05:56,006 --> 00:06:00,071
E poi mi riordino anche diversamente qui,

73
00:06:00,071 --> 00:06:04,426
me lo dispongo, questo, così.

74
00:06:04,426 --> 00:06:07,510
Non fa niente, ecco.

75
00:06:09,400 --> 00:06:11,774
Vediamo un po' come lui la vive questa cosa.

76
00:06:11,774 --> 00:06:13,288
Benissimo.

77
00:06:14,058 --> 00:06:16,000
Ah, ci ha anche lasciato qualche cosa.

78
00:06:16,000 --> 00:06:19,124
Io mi ostino e ci rimetto questi spazi, che voglio sia chiaro.

79
00:06:19,124 --> 00:06:23,664
Stiamo lavorando sulla seconda riga che era chiusa da questi due tag.

80
00:06:23,664 --> 00:06:25,471
Qui che faccio?

81
00:06:25,487 --> 00:06:29,258
Eh ma io qui dentro ci annido un altro elenco:

82
00:06:29,258 --> 00:06:45,342
"ol", che andrò a chiudere - "/ol" - e poi ci metto i miei elementi "li" "/li".

83
00:06:46,833 --> 00:06:54,044
Siccome sono pigro me lo copio e - Control V, V - me lo copio più volte

84
00:06:54,044 --> 00:06:57,975
- tre volte, anche qui - e dentro ci metto il testo che voglio.

85
00:06:58,682 --> 00:07:05,541
Cioè potrei mettere "prima riga sottoelenco".

86
00:07:05,864 --> 00:07:20,981
E sono pigro: Control C, Control V, Control V, e qui, "seconda" e "terza".

87
00:07:23,595 --> 00:07:25,079
Vediamo il risultato:

88
00:07:25,817 --> 00:07:32,671
ecco quà: Prima riga e l'elenco successivo è diventato un sottoelenco a sua volta.

89
00:07:37,284 --> 00:07:42,044
E così si possono fare - aggiungere tante altre caratteristiche.

90
00:07:44,920 --> 00:07:46,916
Infine vediamo una terza cosa,

91
00:07:46,916 --> 00:07:52,793
una terza cosa che apparentemente nell'editore visuale non si può introdurre,

92
00:07:52,793 --> 00:07:55,001
ovvero una tabella.

93
00:07:57,015 --> 00:08:03,325
Come si fa quando non si sa qualcosa, nella fattispecie di HTML,

94
00:08:03,325 --> 00:08:07,892
o comunque di codice di qualsiasi tipo che possa servire nel Web?

95
00:08:07,892 --> 00:08:13,343
Un'ottima fonte è la W3 School.

96
00:08:20,280 --> 00:08:25,781
W3 School, che fa capo al consorzio W3

97
00:08:25,781 --> 00:08:31,953
che si occupa sostanzialmente degli standard del Web:

98
00:08:31,953 --> 00:08:39,907
standard aperti, standard che quindi stanno in armonia con la libertà di espressione.

99
00:08:39,907 --> 00:08:46,145
Non vi fate intimorire da tutte le cose che uno potrebbe approfondire

100
00:08:46,145 --> 00:08:48,979
ma non è assolutamente il nostro caso.

101
00:08:51,547 --> 00:08:53,477
"Learn HTML".

102
00:08:56,199 --> 00:09:01,969
Bene, intanto si vede com'è costruito un documento HTML minimale,

103
00:09:01,969 --> 00:09:06,516
con delle dichiarazioni iniziali e una chiusura.

104
00:09:07,054 --> 00:09:12,278
Qui c'è un titolo, un paragrafo.

105
00:09:12,278 --> 00:09:16,853
Ma noi andiamo diritto - questo lo potete esplorare per conto vostro -

106
00:09:16,853 --> 00:09:19,575
"Tables", "Tabelle": andiamo qui.

107
00:09:21,066 --> 00:09:25,369
Ah, proprio qualcosa del genere mi sarebbe piaciuto introdurre.

108
00:09:26,629 --> 00:09:31,346
Esempio: "Try it Yourself" - bene, proviamo.

109
00:09:33,807 --> 00:09:37,191
Due finestre ci offre:

110
00:09:37,191 --> 00:09:42,783
una intitolata "Source Code"; lì, il codice sorgente.

111
00:09:43,567 --> 00:09:45,543
L'altra, il risultato.

112
00:09:46,050 --> 00:09:53,386
Quindi ciò che io vedo a destra, qui, il risultato, è determinato da come ho scritto il codice a sinistra.

113
00:09:53,386 --> 00:10:01,214
È così che si aggeggia con il codice, si cerca di riconoscere qualche cosa,

114
00:10:01,967 --> 00:10:08,228
anche i programmatori, i softwaristi, i coders più esperti fanno così.

115
00:10:08,228 --> 00:10:09,851
Vediamo nel nostro testo:

116
00:10:09,851 --> 00:10:12,408
"Each table starts with a "table" tag" -

117
00:10:13,177 --> 00:10:17,626
ogni tabella inizia con un tag "table".

118
00:10:18,411 --> 00:10:20,974
Allora qui ci sono dichiarazioni iniziali.

119
00:10:21,820 --> 00:10:24,000
Ecco:"Each table starts with a "table" tag".

120
00:10:24,000 --> 00:10:26,678
Bene, allora queste scritte -

121
00:10:26,678 --> 00:10:29,924
"Each table row starts with a "tr" tag".

122
00:10:29,924 --> 00:10:36,481
Ogni riga - "row", riga - della tabella inizia con un tag "tr".

123
00:10:36,481 --> 00:10:44,812
Ogni dato della tabella inizia con un tag "td", e sono qui.

124
00:10:44,812 --> 00:10:52,647
Queste sono racchiuse - queste tre scritte sono racchiuse da un tag "p" chiuso con "/p":

125
00:10:52,647 --> 00:10:56,762
il paragrafo, l'unità, diciamo, fondamentale di un testo.

126
00:10:57,669 --> 00:11:00,267
Scendiamo: questa ha l'aria di essere un titolo.

127
00:11:02,004 --> 00:11:04,910
Infatti, "one column", troviamo H4.

128
00:11:04,910 --> 00:11:08,194
Ci prudono le mani: che è questo 4?

129
00:11:08,194 --> 00:11:10,490
Vediamo: cambiamolo in 1.

130
00:11:12,013 --> 00:11:15,375
Non succede niente - eh, ma c'è questo tasto.

131
00:11:15,375 --> 00:11:22,250
Cambio il codice, invio il codice, per vedere il risultato. Ecco.

132
00:11:22,250 --> 00:11:27,697
Allora H1, H2, H3, H4 sono titoli di livello diverso.

133
00:11:27,697 --> 00:11:35,262
Benissimo. Questo è esagerato, vediamo se riesco a tornare alla situazione iniziale,

134
00:11:35,262 --> 00:11:39,249
H4. Invio. Perfetto.

135
00:11:40,172 --> 00:11:46,464
Questo è un numero incorniciato, ma guardando le tabelle sottostanti,

136
00:11:46,464 --> 00:11:48,879
capisco che è la tabella minimale.

137
00:11:48,894 --> 00:11:53,440
Andiamo a vedere com'è codificata, sotto al titolo "One column"

138
00:11:53,440 --> 00:11:58,044
- "One column" - bene, vedo subito il tag "table".

139
00:11:58,044 --> 00:12:00,174
C'è addirittura un attributo.

140
00:12:00,174 --> 00:12:04,123
Poi vedo che c'è il tag "tr", chiuso,

141
00:12:04,123 --> 00:12:08,659
che mi determina evidentemente l'unica riga che c'è in questa tabella.

142
00:12:08,659 --> 00:12:13,636
E all'interno di questa riga, c'è il tag "td", poi richiuso,

143
00:12:13,636 --> 00:12:16,745
che mi determina l'unico elemento di questa riga,

144
00:12:16,745 --> 00:12:21,643
quindi viene una tabella banale fatta da una sola riga con un solo elemento,

145
00:12:21,643 --> 00:12:23,995
però è codificata come una tabella,

146
00:12:23,995 --> 00:12:26,110
e poi si chiude la tabella.

147
00:12:26,970 --> 00:12:29,661
Ci incuriosisce questo "border".

148
00:12:30,614 --> 00:12:35,153
Cambiamolo: sarà il bordo, facciamolo esagerato.

149
00:12:35,153 --> 00:12:42,357
È molto utile fare esempi esagerati perché servono a capire con certezza quello che succede.

150
00:12:42,357 --> 00:12:43,749
Lo invio.

151
00:12:43,749 --> 00:12:51,003
Ah, è venuto in effetti un bordo esagerato, per forza: l'ho moltiplicato per 100.

152
00:12:51,510 --> 00:12:55,569
Ora, magari posso sceglierne uno che mi piaccia:

153
00:12:55,569 --> 00:12:57,912
per esempio 3 forse mi va bene.

154
00:12:59,265 --> 00:13:03,411
Mi sembra un bordo più - mi piace, vabbene.

155
00:13:04,225 --> 00:13:08,954
Allora andiamo a vedere l'ultima, dopo "Two rows and three columns",

156
00:13:08,954 --> 00:13:11,657
una tabella di due righe e tre colonne.

157
00:13:12,149 --> 00:13:13,525
Eccola qua.

158
00:13:13,818 --> 00:13:15,815
Inizia "table border="3"".

159
00:13:15,815 --> 00:13:20,550
Ma voglio farla subito così che ci ho preso gusto

160
00:13:22,211 --> 00:13:23,956
Ci dovrei riconoscere due righe.

161
00:13:23,957 --> 00:13:30,232
In effetti apre con tag "tr" la prima riga - "row" -

162
00:13:30,232 --> 00:13:33,269
la chiude, apre la seconda, la chiude.

163
00:13:33,269 --> 00:13:39,757
Torno e nella prima riga ci trovo tre elementi, 100, 200 e 300. Vero.

164
00:13:39,757 --> 00:13:43,394
Nella seconda, 400, 500 e 600: vero.

165
00:13:44,178 --> 00:13:47,820
Allora cominciamo a fare ciò che interessa a me:

166
00:13:48,835 --> 00:13:56,226
Pippo, Topolino. Vediamo: perfetto.

167
00:13:56,995 --> 00:13:58,818
Chi mi ferma più?

168
00:13:59,402 --> 00:14:05,516
Ora vorrei tornare a scrivere la tabella nel mio post, ma visto che ho sotto il naso un testo

169
00:14:05,516 --> 00:14:09,313
che si elabora bene con un editore di testo,

170
00:14:09,313 --> 00:14:13,661
perché non copiare pari-pari questo testo,

171
00:14:14,554 --> 00:14:20,264
andare nel mio blog, metterlo - porlo in modo testo,

172
00:14:20,264 --> 00:14:25,836
copiarci dentro il tutto, vedere subito cosa viene.

173
00:14:28,235 --> 00:14:32,020
E ora qui diventa un gioco da ragazzi,

174
00:14:32,020 --> 00:14:33,827
cioè diventa un gioco.

175
00:14:33,827 --> 00:14:37,522
Posso fare qualsiasi cosa:

176
00:14:37,522 --> 00:14:49,228
copio per esempio una riga e poi la posso riprodurre; vediamo:

177
00:14:49,228 --> 00:14:55,952
Ecco qua. Il limite, a questo punto, è solo la fantasia e la voglia di esplorare.