Prologo
Questo post continua il filone della paginetta sfrucugnata, che avevamo lasciato nel post del diario della nonna. Vi invito a frugare negli esempi che seguono con la solita tecnica per vedere la sorgente delle pagine html: tasto destro del mouse e Pagina sorgente o HTML, a seconda del tipo di browser.
Anche se ci dilungheremo mostrando alcuni spezzoni di codice, lo scopo non è quello di diventare programmatori. Non fatevi venire l’ansia di voler sapere tutto di HTML, CSS o altro. Noi qui vogliamo familiarizzare ulteriormente con il codice, semplicemente abituarsi a vederlo, senza chiudere l’occhio della mente quando lo sguardo cade su un pezzetto di codice, frammisto al testo. Noi qui vogliamo anche percepire, anzi toccare con mano la caratteristica gemmante del codice, una caratteristica che credo sia propria della lingua, in generale. Sarebbe interessante poter vedere in maniera visiva e dinamica, l’evoluzione dell’insieme delle lingue da diecimila anni a questa parte, contraendo la scala dei tempi a qualche minuto, forse qualcuno l’ha fatto. Assisteremmo a qualcosa di estremamente dinamico, una fantastica proliferazione fiammeggiante di lingue, dialetti e gerghi. Il codice fa parte di questo, credo, solo che evolva appunto in tempi molto più contratti di quelli caratteristici delle lingue parlate.
Il perseguimento di tali obiettivi generali non preclude la possibilità che qualcuno di voi finisca per manipolare effettivamente qualche frammento di codice, in pratica. Qualcuno lo sta già facendo, sulla scorta di esperienze pregresse. Per esempio, avete già visto che con pochi rudimenti di HTML si possono scrivere commenti più ornati ai post dei blog, o anche inserire link attivi. Ma nei vostri stessi blog si possono fare molte altre cose ancora, se si possiede una minima confidenza con il codice, per esempio potete personalizzare ampiamente il loro aspetto grafico, ma non precorriamo i tempi, non abbiamo alcuna fretta. Aggiungo invece che questa agilità che ci proponiamo di acquisire, può tornare molto utile nella vita pratica. Questa blogoclasse è popolata principalmente da insegnanti i quali sono interessati anche, e presumibilmente in modo non trascurabile, all’impiego delle tecnologie nella pratica didattica. Vi sono fra di voi persone che lo stanno già facendo, in maniera anche approfondita. È inevitabile, lavorando con questi strumenti, “sporcarsi le mani”, progressivamente, cambiando oggi una cosa qua, domani una là. Non ci si deve sentire soli, Internet è prodiga di consigli, esperienze, soluzioni, ma non va dimenticata l’eredità di un’esperienza come quella della blogoclasse. Potrà essere molto naturale chiedere ad un ex compagno di blogoclasse un consiglio su un problema che si sospetta lui abbia già affrontato.
C’è poi un aspetto molto interessante. Quando si insegna, si è a contatto con gli studenti, che talvolta possono avere delle competenze o delle capacità incredibili. Ricordo di uno studente che aveva scoperto delle gravi falle in un database di una grande organizzazione, alla quale io appartenevo. Mi disse: “Prof, dica qualcosa a questa gente perché chi ha fatto quel sistema non sa lavorare …”. E non era uno studente di informatica! Queste non sono circostanze da temere, sono colpi di fortuna, che possono essere volti a vantaggio di tutti, insegnante compreso. Io ho imparato molte cose da alcuni miei studenti.
Ultima osservazione, gli esempi qui sotto potrebbero essere svolti in molti altri modi. Il codice si può sempre scrivere in modi differenti, specialmente quando codici diversi si intrecciano in un’unica cosa. Il criterio che ho privilegiato qui è quello della massima semplicità, preferendo i costrutti più semplici e riducendo al massimo il numero di nuovi simboli.
Un testo codificato in HTML
Con tali premesse, partiamo da questa semplicissima pagina. Riporto la sorgente qui sotto per agevolare la lettura del post, anche se potete accedervi direttamente dalla pagina stessa, con il solito metodo. Anzi, vi invito a copiare le sorgenti di questi documenti in file sul vostro disco in modo da provare voi stessi a sperimentare delle varianti, tornando bambini, come si diceva in un commento precedente.
<html> <body> <h1>Animali</h1> <h2>Mammiferi</h2> <p>Cane</p> <p>Gatto</p> <h2>Uccelli</h2> <p>Passerotto</p> <p>Aquila</p> </body> </html>
… ornamentato …
Rendiamo ora la pagina più gaia, per esempio colorando un po’ il testo. L’avevate già visto fare nella paginetta sfrucugnata, ecco la versione colorata della nuova pagina. Già che ci siamo, introduciamo un minimo di nomenclatura. I codici HTML, tipo <p> o <h1>, si chiamano elementi o tag. I tag possono avere attributi. Per esempio, nel codice dell’ultimo link che ho scritto
<a href="http://lai.dfc.unifi.it/lab/p2.html">versione colorata della nuova pagina</a>
Abbiamo usato il tag <a> arricchito dall’attributo href al quale abbiamo dato il valore di http://lai.dfc.unifi.it/lab/p2.html. Ricordo, per chi vuole approfondire le meraviglie di HTML, la Scuola W3, che è veramente ottima. Può convenire rifarsi dalla prima pagina, leggendo e sperimentando con gli esercizi proposti, una dopo l’altra, almeno all’inizio.
Ebbene, nella versione colorata della nuova pagina abbiamo arricchito i tag <p>, <h1> e <h2> con l’attributo style, al quale abbiamo assegnato i valori color:red, color:blue e color:green, come si vede nel codice qui sotto:
<html> <body> <h1 style="color:red">Animali</h1> <h2 style="color:green">Mammiferi</h2> <p style="color:blue">Cane</p> <p style="color:blue">Gatto</p> <h2 style="color:green">Uccelli</h2> <p style="color:blue">Passerotto</p> <p style="color:blue">Aquila</p> </body> </html>
Fin qui non molto di nuovo, rispetto alla paginetta. Siamo contenti di poter colorare il testo e ci rallegriamo di poter fare chissà quante altre cose – basta frugare fra i materiali della Scuola W3. Dobbiamo tuttavia ammettere che fino ad ora è stato facile perché abbiamo lavorato su di un documento molto breve, molto più breve dei documenti che manipoliamo quotidianamente. La prospettiva di editare un testo molto lungo per cambiare il colore di tutti i paragrafi non è molto piacevole. Sì, ci possiamo aiutare con gli automatismi che molti editori forniscono, ma si fa presto a combinare pasticci in un documento lungo e complesso. Ci vorrebbe una magia per poter dire in un colpo solo: “Colorami tutti i paragrafi con l’arancione!” Fortunatamente, questa magia è stata già fatta. Vediamola prima di darle un nome (qui la pagina in rete):
<html>
<head>
<style>
h1{color:red;}
h2{color:green;}
p{color:blue;}
</style>
</head>
<body>
<h1>Animali</h1>
<h2>Mammiferi</h2>
<p>Cane</p>
<p>Gatto</p>
<h2>Uccelli</h2>
<p>Passerotto</p>
<p>Aquila</p>
</body>
</html>
È facile vedere come sia stata attuata la magia invocata. Il testo codificato è stato separato in due parti, una racchiusa fra i tag <head> e </head>, che ho evidenziato mediante lo sfondo grigio, e l’altra fra i tag <body> e </body>. Nella sezione head troviamo tutte le specifiche relative agli ornamenti e nella sezione body troviamo il testo codificato in HTML.
In questo modo, se vogliamo cambiare il colore di tutti i paragrafi del documento, non abbiamo da fare altro che da alterare adeguatamente il codice opportuno nella sezione che descrive le ornamentazioni.
Questo, nel nostro racconto, è il punto nel quale gemma un nuovo codice, quello che si trova fra <head> e </head>. Anzi, occorre essere più precisi, la “buccia” della nuova gemma è costituita dai tag <style> e </style>, evidenziati in giallo, perché la sezione delimitata dal tag <head>, può ospitare anche altre gemme. Accenneremo ad un’altra di queste dopo. Il nuovo codice è appunto nuovo, ha un sintassi diversa anche se si riconosce facilmente la sua origine, dai simboli p, h1, e h2.
Il nuovo codice si chiama CSS (Cascading Style Sheet) e serve a formattare (io ho parlato di “ornare” fin qui) i vari elementi di un testo codificato in HTML (e non solo). La sintassi base di una codifica CSS è molto semplice e si può riassumere così:
selettore {
una_proprietà:un_valore;
altra_proprietà:altro_valore;
eccetera:eccetera
}
altro_selettore {
eccetera:ecetera;
}
Anche con il CSS, per chi vuole approfondire c’è la relativa scuola W3.
La gemmazione, nella sostanza è avvenuta, ma può essere perfezionata con un passo ulteriore. È vero che i due codici, HTML e CSS, sono stati completamente separati nell’esempio che abbiamo mostrato, ma continuano a risiedere in uno stesso documento, e come tale anche in uno stesso file. Il passo successivo è breve, eccolo (qui la pagina in rete):
<html> <head> <link rel="stylesheet" href="p4.css" type="text/css"> </head> <body> <h1>Animali</h1> <h2>Mammiferi</h2> <p>Cane</p> <p>Gatto</p> <h2>Uccelli</h2> <p>Passerotto</p> <p>Aquila</p> </body> </html>
Anche qui c’è un “luogo” per il codice destinato all’ornamentazione, ovvero alla formattazione, ma è stato ridotto ad un mero riferimento, espresso dal tag <link> i cui attributi, ci dicono che il documento è collegato ad un altro che descrive lo stile (stylesheet), che si trova in un file di nome p4.css il quale contiene testo codificato in CSS. Ovviamente, affinché la cosa funzioni, il file p4.css deve esistere, eccolo (qui la pagina in rete):
h1 {color:red;}
h2 {color:green;}
p {color:yellow;}
… dinamizzato …
Senza spingersi troppo in là, può valer la pena di intravedere un’altra gemmazione, che negli ultimi anni ha ampliato molto le potenzialità del Web. Introduciamola questa volta bruscamente, alterando di poco i documenti precedenti:
<html>
<head>
<link rel="stylesheet" href="p5.css" type="text/css">
<script type="text/javascript">
document.getElementByClass('changeMe').onmouseover.style;
</script>
</head>
<body>
<h1>Animali</h1>
<h2>Mammiferi</h2>
<p class="ChangeMe">Cane</p>
<p class="ChangeMe">Gatto</p>
<h2>Uccelli</h2>
<p class="ChangeMe">Passerotto</p>
<p class="ChangeMe">Aquila</p>
</body>
</html>
h1 {color:red;}
h2 {color:green;}
p.changeMe {color:blue;}
p.changeMe:hover {color:yellow;}
Effettivamente una nuova gemma è spuntata fra i tag <head>;, e la sua “buccia” si chiama <script>. In generale il termine script designa una un insieme di istruzioni, ovvero, se vogliamo, un programma, un frammento di codice da eseguire. Questo è un fatto assai rilevante. Ci stavamo occupando della codifica di un documento ed eventualmente della sua ornamentazione, e ora all’improvviso scopriamo che nel nostro documento è emerso un frammento di codice da eseguire, ma per fare cosa? Provate voi stessi viaggiando con il mouse sulle parole dell’ennesima versione della nostra pagina (e qui la corrispondente pagina CSS in rete).
Visto l’effetto? È così che le pagine web divengono dinamiche. Il codice in questione, nel nostro semplice esempio una sola riga (la riga numero 5), è codice Javascript (qui la scuola W3. Con questo semplice esempio, vi potete rendere conto com’è che, quando caricate nel browser una pagina Web, in realtà non state caricando solo informazioni ma anche funzionalità, e questo ha anche varie altre implicazioni, che forse riprenderemo in qualche discorso successivo.
Andreas Formiconi 
Ottimo Benedetta! E questo tormento dell’imparare provando e dovendo pensare e ripensare e immaginare ha un valore enorme. Si inizia con il rendersi conto che quel territorio non è poi così ostile come sembrava.
Dalle mie prigioni… alle mie scoperte.
Sembra facile, ma non riesco.
Rifaccio, niente.
Rileggo le note di Andreas, niente.
Rivedo i commenti, niente.
Niente, niente, non esce niente.
Ma come si farà?
Poi all’improvviso una luce: forse, affinché lo funzioni, bisogna salvare il file p5.css nella stessa cartella dell’html, sarà così?
Provo.
Sì, eureka! Finalmente ho trovato la soluzione.
Infatti, per poter eseguire istruzioni/comandi come ad esempio: ingrandire il font, cambiare colore, evidenziare…) il codice sorgente della pagina richiede che quel file sia nella stessa cartella.
In realtà, non si tratta di cambiare la pagina sorgente per ottenere gli effetti dinamici, ma occorre cambiare il p5.css.
Io ad esempio ho voluto ingrandire il testo al passaggio del mouse ed ho cambiato solo un aspetto dell’intera stringa:
da: p.changeMe:hover {color:red;}
a: p.changeMe:hover {font-size:150%;}
Brava!
che gioia! pane caldo e HTML che funziona 🙂 (vedere il mio blog per credere…)
anche le ultime battute di ieri sera alla riunione sono state un tesoro
grazie Andreas & Claude!
😀 Stai attento con le ripetizioni, Gaetano: quando ero in 3a elementare ho sbagliato a scrivere “jusqu’à” (fino a) in un dettato: avevo scritto j’usqu’à. La maestra mi ha fatto copiare 5 volte la parola, come si faceva per tutti gli errori. L’ho scritta 5 volte sbagliata. Me l’ha fatto scrivere 20 volte. L’ho scritta 20 volte sbagliata. A quel punto si è resa conto che visto che non ero di indole particolarmente ribelle, era meglio lasciar perdere: “Beh, quando vorrai scrivere quella parola, cercane un’altra oppure controlla sul dizionario, se ti riesce”. Per decenni ho circumnavigato “quella parola”, finché non sono arrivati i controlli ortografici dei computer.
Grazie per la spiegazione del tag finale.
Claude, ti chiedo scusa, è la seconda volta che sbaglio il tuo nome.
Prometto di non farlo più.
Claude – Claude – Claude – Claude – Claude – Claude – Claude – Claude – Claude – Claude
Caude, hai pienamente ragione su tutto. In un primo momento avevo pensato di operare come suggerisci tu, però la sfida era tra me e questo ambiente, tanto che, se non risolvevo il problema, non riuscivo a concentrarmi nello studio di Platone (argomento d’esame in Storia della Filosofia), la mente correva sempre sui tag da rendere visibili.
/HTM => /HTML peccato veniale, inavvertitamente ho cancellato la “L” nell’ultimo post. Cmq, ho provato con /HTM ed ha funzionato ugualmente, Firefox mi ha perdonato 😉
Errh, ma l’ultimo tag non dovrebbe essere </html> , Gaetano, se il primo è <html> ? O non importa?
Cmq, mi sa che se dovessi fare un commento dove conta la formattazione, lo scriverei in un post normale su un mio blog o wiki, poi farei il link nel commento sul blog WordPress altrui.
EVVIVA!!! funziona 🙂
Adesso provo con il codice
<html>
<head>
<title>collegare un CSS esterno</title>
<link href=”http://lai.dfc.unifi.it/lab/p5.css” rel=”stylesheet”>
<script type=text/javascript”>
document.getElementByClass(‘changeMe’).onmouseover.style;
</script>
</head>
<body>
<center>
<h1>titolo 1 rosso</h1>
<h2>titolo 2 verde</h2>
<h3>titolo 3 nero</h3>
<p>testo normale che non cambia</p>
<p class=”ChangeMe”>testo normale che cambia colore</p>
</center>
</body>
</htm>
Mi sia consentita ancora una prova: vediamo se riesco a far apparire i segni di
> maggiore di
< minore di
Ce l’ho fatta.
Un codice per un altro codice
… al posto del segno [minore di]
Questa volta ha mangiato solo l’inizio. Ho capito dove ho sbagliato. Provo ha rimetterlo intero.
Per ogni tag non inserirò il segno [MINORE] ( non si può proprio mettere!!! quando lo vede mangia tutto quello che segue)
…html>
…head>
…title>collegare un CSS esterno…/title>
…link href=”http://lai.dfc.unifi.it/lab/p5.css” rel=”stylesheet”>
…script type=text/javascript”>
document.getElementByClass(‘changeMe’).onmouseover.style;
…/script>
…/head>
…body>
…center>
…h1>titolo 1 rosso…/h1>
…h2>titolo 2 verde…/h2>
…h3>titolo 3 nero…/h3>
…p>testo normale che non cambia…/p>
…p class=”ChangeMe”>testo normale che cambia colore…/p>
…/center>
…/body>
…/html>
Un altra prova.
Per ogni tag non inserirò il segno
…head>
…title>collegare un CSS esterno…/title>
…link href=”http://lai.dfc.unifi.it/lab/p5.css” rel=”stylesheet”>
…script type=text/javascript”>
document.getElementByClass(‘changeMe’).onmouseover.style;
…/script>
…/head>
…body>
…center>
…h1>titolo 1 rosso…/h1>
…h2>titolo 2 verde…/h2>
…h3>titolo 3 nero…/h3>
…p>testo normale che non cambia…/p>
…p class=”ChangeMe”>testo normale che cambia colore…/p>
…/center>
…/body>
…/html>
[maggiore]XMP[minore][minore]XMP[maggiore]mi dispiace, ha mangiato tutto.:-) ha lasciato solo il testo.
il tag usarto era: [maggiore]XMP[minore]
Non so se tutto quello che inserirò in questo commento sarà visibile, comunque ci provo lo stesso.
Ho scritto la mia pagina HTML e invece di riscrivere il CSS ho “rubato” quello del prof.
Di seguito il listato (qui il dubbio: questo modello di WordPress lascerà passare quando scrivo o lo inghiottirà?)
Per evitare l’interpretazione del codice sorgente ho utilizzato il tag
Se lo vedete, copiatelo su un file testo (Blocco Note va bene), modificate l’estensione da .txt in .htm e provatelo.
collegare un CSS esterno
document.getElementByClass(‘changeMe’).onmouseover.style;
titolo 1 rosso
titolo 2 verde
titolo 3 nero
testo normale che non cambia
testo normale che cambia colore
Ps. solo..non correte! Io sono lenta 🙂
Anch’io voglio ringraziare Marvi per il suo link perchè mi è servito molto per chiarirmi le idee: sono completamente a digiuno di linguaggi htlm e hml ,ma poichè come dice il video “dovremo mettere in discussione molte cose, incluso noi stessi” … eccomi… sono pronta a imparare!
Marvi il link che hai postato è interessantissimo, grazie!
del resto… ogni successo è un fallimento mancato!
ah.. ah…ah…
è incoraggiante sapere che non sono io che non funziono. Ma funziono benissimo! perchè ho un testa pensante: mi ostino ad allenarla, a misurarmi con il non conosciuto, anche se butto via tempo senza risultati. Anzi no! Il risultato è che mi sono messa alla prova 🙂
Che scusa! È una cosa straordinaria quando chi gioca il ruolo dello studente ti precorre, è il massimo! È segno che le cose stanno funzionando …
…mi scusi prof per l’indicazione del link. Ho frequentato il corso Adol al politecnico e il prof Aldo Torrebruno l’ha tradotto quando ci ha fatto lezione sul web 2.0.
evviva ci sono riuscita si vede, queste si che sono soddisfazioni. 🙂
vediamo se riesco a postare allenandomi con W3 sono riuscita a mettere in html un link, vediamo se riesco a postarlo.
This is a link
Grazie Andreas, ma ho visto Romina in skype ed ho chiesto a lei. Comunque sono riuscita a cambiare il colore di un mio post, l’ho fatto a righe di colori alternati. Ora sto provando a cimentarimi con la scuola W3. 😉
se qualcosa non vi viene come avevate pensato, chiedetela pure subito qui, dicendo: “volevo fare questo e questo ma …”
se sono al computer rispondo subito, sennò quando torno, ma magari risponde prima qualcuno di voi: meglio ancora!
inizio con una cosa semplice,
imparo
Imparo facendo .
</html
Grazie Mvcarelli, quel video l’avevo pronto sul tavolo per voi!!!
Tu sapessi quante cose a me non riescono … diciamo che su 10 che ne provo ne azzecco forse 2 alla prima, 5 ce la faccio con un po’ di fatica, 3 proprio non mi riescono, e allora cerco un’escamotage, una via alternativa, e questi iniziali fallimenti si trasformano sempre nelle più feconde occasioni di crescita …
Salve mi diverto tantissimo a smanettare con il codice tante cose però non riesco. La cosa che mi ritorna molto utile e che a volte si riesce a risolvere delle situazioni tipo formattazione o aggiunta colore ad un testo.
Vi segnalo questo link: http://www.pianetaebook.com/2011/08/cose-il-web-2-0-968
Ultima prova ma stavolta faccio la cattura di schermo prima di inviare, poi te la linko in almansi.wikispaces.com/WP_commenti_heading_tag:
Gerarchia degli stili nei blog
e zacchete, mi ha rimangiato i tag h4.
Beh no lo so, io avevo messo “Gerarchia degli stili nei blog” tra i due tag H4 e sono stati trasformati nei tag P. Riprovo:
Gerarchia degli stili nei blog.
Ecco, sta volta controllo bene, ci sono tutti e due, corretti (ho fatto il copia-incolla dal tuo commento poi ho le parole n mezzo).
Altra domanda: i pezzi di codice che citi sono incorniciati da tag pre class – Basta inserirli attorno al pezzo di codice nella sorgente quando si prepara un post, o ci vuole altro?
che è codificato con:
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
qual era quindi il problema?
h1
h2
h3
h4
h5
In effetti non funziona nemmeno l’H4
Gerarchia degli stili nei blog
Gaetano, sarà forse perché qui, l’H1 è per il titolo del blog, l’H2 per quello del post? Andreas ha usato H3 per gli intertitoli di questo post. Adesso provo con H4 in questo commento. Vero però che WordPress non lascia usare tutto l’HTML da tutti gli utenti dappertutto nello stesso modo. Mo’ invio e vediamo.
Non funziona 😦
In un mio precedente post avevo usato il tag “h1” perchè volevo dare maggiore risalto ad una parola, però … non ha funzionat0 :-(.
Forse avrò sbagliato dimenticando di chiudere il tag, oppure nei commenti non è supportato.
Adesso ci riprovo:
Prova Titolo 1