Altre tre cose in HTML – #loptis

Clicca qui per scaricare una versione in pdf (anche se questo è un post da laboratorio più che altro…)

---

Un post da leggere in due modi

Vediamo altre tre cose che si possono inserire in un post ma che non si possono fare con l’editore visuale standard.

Per consentirvi di vedere bene quello che succede, scrivo questo post in due versioni: una sotto forma di post in wordpress e l’altra sotto forma di una pagina HTML nuda e cruda – l’ho piazzata in un server che ho a disposizione; ciò che vedete lì dovrebbe coincidere con quello che vedete nel vostro laboratorio locale.

Aggiungiamo poi un trucco: qualsiasi pagina web voi stiate guardando, potete sempre vederne il codice! Basta usare la combinazione di tasti Ctrl-u – battere u tenendo premuto Ctrl – si apre così una seconda finestra con il codice HTML in chiaro. In questo modo, confrontando le due versioni potete vedere quali sono i codici che producono gli effetti presenti nella pagina web. Se fate questo scherzetto con le due versioni di questo post, vedete cose piuttosto diverse. La versione nella pagina HTML nuda e cruda è la prima da guardare, per imparare gli elementi HTML che vi propongo. Invece, il codice del post in wordpress è molto più complicato perché ci sono le montagne di specifiche che determinano la pagine del blog così come la voi vedete e le sue funzionalità. Se però scorrete la pagina del codice alla fine trovate la parte in comune con la versione nuda e cruda. In comune ma non tutto, si vede infatti come WordPress.com si aggiusti le cose per adeguarlo al proprio standard e ai propri criteri. Vedere tutto questo è istruttivo per avere un’idea di come stiano le cose sotto.

Ma torniamo alla versione nuda e cruda. Voi potete anche importare la pagina di questo codice nel vostro laboratorio domestico, semplicemente copiandola sul vostro disco. Poi ci potete giocare con il Blocco note esattamente come avete fatto negli esercizi precedenti, divertendovi a fare le variazioni che vi vengono in mente.

Link interni alla pagina

Bene, per prima cosa inseriamo una nota. Andate a vedere (con Ctrl-u) il codice di questo link. È lo stesso di quello che conoscete per il link alle pagine web, in effetti è il link a questa medesima pagina, anzi a un punto preciso di questa pagina. Guardate l’espressione fra doppie virgolette: “#prima_nota”. Bene, se andate alla fine della pagina, trovate il codice dell’ancora, ovvero dell’oggetto al quale il link si aggancia: da qui il senso del tag a, anchor, ancora. Confrontiamo quindi il codice del link

<a href=”#prima_nota”>testo che appare come link</a>

con quello dell’ancora a cui punta

<a name=”prima_nota”>testo al quale voglio che il link punti</a>

Vedete che la funzionalità di link espressa dal tag a si realizza mediante due diversi attributi: href per designare la partenza del link, e name per designarne l’arrivo. Con l’attributo name si specifica il nome dell’ancora: “prima_nota” nel nostro esempio. Con l’attributo href il nome dell’ancora da raggiungere viene preceduto dal carattere #.

Ecco, in questo modo aggiungiamo un tassello alla codifica di un URL, che avevamo visto nel post Un passo indietro. Ora siamo in grado di fabbricare un url che punta non solo a questa pagina ma ad un punto preciso di essa, ovvero alla nota che abbiamo posto in fondo:

Volete vedere questa cosa nel mondo reale? Andate in http://iamarf.org. Guardate il titolo di un post qualsiasi, ad esempio quello della bacheca, in vetta al blog: sapete che il numerino a destra (108 attualmente) rappresenta il numero di commenti e sapete che ci potete cliccare. Ebbene cliccatelo: vi trovate all’inizio della serie di commenti. Guardate l’URL nella casella degli indirizzi del browser: quello che vedete è l’URL che WordPress.com costruisce per puntare i commenti. Vediamo così che WordPress.com ottiene l’indirizzo dell’inizio dei commenti aggiungendo #comments all’URL della pagina.

Controllare la dimensione dei caratteri

L’editore visuale di Blogger offre una serie di dimensioni predefinite per i caratteri mentre WordPress.com solo alcuni stili. Bisogna quindi accontentarsi? No, volendo si possono aggiustare a piacimento le dimensioni con i giusti codici HTML. Ecco un esempio dove si usa l’unità di misura denominata em per determinare le dimensione dei caratteri. Volendo si sarebbe potuto usare la misura assoluta in pixel ma questa non è conveniente perché il risultato dipende dalle caratteristiche del sistema di dispay. Invece em è una misurare relativa: 1.00 em designa la misura standard dei caratteri di quella certa pagina, valori inferiori a 1 danno caratteri più piccoli e maggiori di 1 caratteri più grandi. In questo modo è possibile aggiustare a piacimento la dimensione. Faccio un esempio qui sotto. Anzi, già che ci sono, ne faccio due uguali ma usando diversamente i tag p per mostrarne l’effetto – Martina nel pad http://piratepad.net/code-lab-loptis si domandava a che serve questo tag. L’effetto dell’HTML puro lo potete vedere nella pagina nuda e cruda: se non si includono i paragrafi nei tag <p> e </p> il browser ignora gli accapo, e il testo viene compattatto tutto di fila. In WordPress.com succede qualcosa di diverso: gli accapo li riproduce e se ci sono i tag <p> </p> allora aggiunge anche un interlinea fra i paragrafi.

0.25
0.50
0.75
1.00
1.25
1.50
1.75

0.25

0.50

0.75

1.00

1.25

1.50

1.75

Di questo sistema di controllo della dimensione dei caratteri mi sono servito nella Bacheca per esempio.

Con il tag span e l’attributo style che abbiamo visto si possono determinare molte altre cose, ma a noi basta aprire qualche porta qua e là sul mondo del codice. Chiunque può uscire e andare a esplorare quello che preferisce, ed eventualmente tornare qui a fare domande.

Una lista un po’ più articolata

Antonella chiedeva come compilavo le liste dei link. Uso semplici combinazioni di liste. Qui riporto quella dei post di #loptis con alcune variazioni: per l’elenco principale ho usato i numeri romani partendo da 0 – sì, i romani non lo conoscevano ma noi ce lo mettiamo… – per i sottoelenchi le lettere greche minuscole e per i sottoelenchi dei sottoelenchi i numeri romani minuscoli. Così per dare l’idea delle possibilità…

0. A coloro che non sono sicuri di essere pronti (15 settembre)
   1. Una lettura che serve a stabilire la tonalità del laboratorio. In termini stretti si potrebbe considerare un post facoltativo, in quanto non tecnico. Ma contribuisce alla narrazione e, in generale, senza narrazione non si impara (quasi) nulla.
1. Iniziando ad accordare i suoni (22 settembre)
   1. Si propone una prima attività: iniziare un diario. Non un diario intimistico, bensì un diario di lavoro, alla vecchia maniera: un diario dove annotare e riflettere su ciò che si è studiato e si è sperimentato. Vedremo poi cosa farcene. È curioso quanto spesso questo suggerimento incontri delle resistenze, non di rado da parte di chi millanta confidenza con il passato: una cosa così antica, saggia, alla vecchia maniera: scrivere quello che si vuole provare a fare, scrivere di cosa è successo provando, formulare ipotesi – riflettere…
   2. Poi viene una lettura sulle tipologie di software per avere una minima idea degli strumenti che tutti utilizzano e pochi conoscono. Giusto un’idea, per ora, ma necessaria per colmare la pervasiva ignoranza e disinformazione riguardo agli strumenti disponibili al mondo.
   3. Infine alcune istruzioni per commentare in questo blog. Sono importanti perché è il luogo principale nel quale la vostra voce può essere udita da tutti, almeno all’inizio del percorso. Successivamente scopriremo altri modi per esprimerci.
2. Un articolo sul cMOOC #ltis13 in BRICKS (26 settembre)
   1. Un articolo da leggere sulla rivista online BRICKS dove si descrive l’esperienza del cMOOC @ltis13 e come si siano prese le mosse verso il laboratorio #loptis.
3. Un passo indietro (29 settembre)
   1. Il primo post “tecnico”: una riflessione su come avviamo un browser: cos’è che scriviamo in quelle caselle in alto per andare da qualche parte nel web? In realtà solo la prima parte della riflessione…
   2. E poi un esercizio per esplorare e capire meglio, forse per iniziare a manovrare un po’ più consapevolmente la macchina, con tutte le dita e il cervello, non solo con il mouse.
4. Non solo luci (11 ottobre)
   1. Una riflessione su cosa voglia dire fare un account. Ci capiterà di suggerire di fare degli account, ma questo non significa che fare un account sia bene, a priori. Ci sono anche risvolti negativi. Lavoreremo per imparare a sviluppare gli aspetti positivi e minimizzare quelli negativi. Riflessioni del genere ci prepareranno anche per svolgere la seconda parte delle riflessioni “tecniche” su come manovrare un browser, e non solo.
5. Esortazione (27 ottobre)
   1. Un’esortazione a commentare con domande, suggerimenti, opinioni.
6. Un passo indietro II (29 ottobre)
   1. Che succede all’indirizzo di un motore di ricerca, al suo URL, quando facciamo una ricerca?
   2. Come facciamo a controllare meglio le nostre ricerche?
   3. Ma esiste solo Google?
7. Lo screenshot (1 novembre)
   1. Note pratiche sulla cattura dello schermo (screenshot) con vari congegni e sistemi operativi.
8. Commenti e login (5 novembre)
   1. Informazioni utili per fare commenti e firmarli correttamente.
9. Come seguire le fonti in internet (6 novembre)
   1. Seguire le fonti in internet con i web feed.
10. Come seguire le fonti in internet II (9 novembre)
    1. Seguire con i web feed la mainstream information – quotidiani ecc.
11. Apriamo il blog (14 novembre)
    1. Istruzioni per aprire il blog, con varie informazioni su alcuni dei più diffusi o o interessanti servizi di blogging.
12. Due parole sulla scelta del blog (16 novembre)
    1. Un commento sulla scelta del servizio di blogging.
13. Lista dei blog e pistolotto (17 novembre)
    1. La lista dei blog e un’accorata esortazione all’accuratezza.
14. Lista dei feed e formato CSV (18 novembre)
    1. La lista dei feed sia dei post che dei commenti e due parole sul fomato CSV per lo scambio dei dati tabulari.
15. Come si fa un link (23 novembre)
    1. Scrittura di un link in HTML
16. Il laboratorio nel computer (25 novembre)
    1. Come esercitarsi con il codice HTML nel proprio computer
17. Vediamo un po’ di HTML (29 novembre)
    1. Esercizi con elementi di HTML
       1. formattazione di base
       2. liste
       3. immagini
       4. link
18. Altre tre cose in HTML (2 dicembre)
    1. Altri elementi di HTML
       1. link interni alle pagine
       2. dimensione caratteri
       3. liste più arzigogolate

---

Nota:

Quando avete un dubbio ricordatevi di andare a vedere gli esempi nella
W3School.

---

E siccome vogliamo strafare inseriamo anche un link per tornare all’inizio del post: clicca qui!