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:

Immagine della struttura di un URL che punta all'interno di una pagina del tipo: http://dominio-server/posizione-nel-server/file-da-mostrare.html/#posizione-nel-file

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à…

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Esortazione (27 ottobre)
    1. Un’esortazione a commentare con domande, suggerimenti, opinioni.
  7. 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?
  8. Lo screenshot (1 novembre)
    1. Note pratiche sulla cattura dello schermo (screenshot) con vari congegni e sistemi operativi.
  9. Commenti e login (5 novembre)
    1. Informazioni utili per fare commenti e firmarli correttamente.
  10. Come seguire le fonti in internet (6 novembre)
    1. Seguire le fonti in internet con i web feed.
  11. Come seguire le fonti in internet II (9 novembre)
    1. Seguire con i web feed la mainstream information – quotidiani ecc.
  12. 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.
  13. Due parole sulla scelta del blog (16 novembre)
    1. Un commento sulla scelta del servizio di blogging.
  14. Lista dei blog e pistolotto (17 novembre)
    1. La lista dei blog e un’accorata esortazione all’accuratezza.
  15. 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.
  16. Come si fa un link (23 novembre)
    1. Scrittura di un link in HTML
  17. Il laboratorio nel computer (25 novembre)
    1. Come esercitarsi con il codice HTML nel proprio computer
  18. Vediamo un po’ di HTML (29 novembre)
    1. Esercizi con elementi di HTML
      1. formattazione di base
      2. liste
      3. immagini
      4. link
  19. 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!

26 thoughts on “Altre tre cose in HTML – #loptis

  1. elisafons says:

    Bene…per ora non ci ho capito niente…sono ferma all’esperimento di rendere una parola che decido io “attiva” in modo che cliccandoci sopra mi rimandi a un dato sito…sto leggendo cliccando osservando…ci arriverò?? Intanto ci sto provando 🙂

  2. mariab72 says:

    prof ho provato a lavorare su wordpress, adesso proverò con il blocco note , confesso che non è facile .Ed è sempre più entusiasmante scoprire quello che si cela dietro semplici parole che appaiono ullo schermohttp://mariab72.wordpress.com/2014/01/14/tag-span-provando

  3. Mariantonietta linf12 says:

    Questo tipo di attivita’ e’ simile a quella proposta in linf12 come anche quella della dimensione dei caratteri (ricordo una notte intera per fare la griglia del mio orario scolastico sul Blog di Wittgens…in linf12!) ma il trucco per vedere il codice in quella sede non era stato svelato. Ho fatto alcune prove per la pagina html “nuda e cruda”. Poi sono andata a curiosare in un post wordpress, ma e’ meglio allontanarsi, ci sono aspetti molto piu’ specifici, che rischiano di farmi confondere. Per quanto riguarda la prova “prima nota” , voglio segnalare che per puro errore, che ora risulta essere invece giusto, in varie occasioni e inconsapevolmente, avevo gia’ confezionato un Url che rimandava ad un punto specifico di una pagina. Ora ho capito come arrivare a questo.

  4. dueappunti says:

    Ora mi caccerete, lo so!
    Vorrei solo fare una prova qui, nei commenti di questo bel laboratorio … forse farò un po’ di rumore, o forse no.
    Lo saprò solo dopo aver inviato il post … e allora, forse sarà troppo tardi per tornare indietro.
    Sto provando il tag span … nel mio laboratorio personale e su wordpress.com il codice che ho scritto funziona Ecco cosa può accadere ad un “Ecco!” … e qui? Visto che anche i commenti “eseguono” il codice … lo farà anche con il tag span?
    Provo … posto … vi chiedo perdono se il post risulterà inadeguato.
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    Ecco!
    DavveroSUPER 🙂

    1. dueappunti says:

      No, nei commenti non compare l’effetto del tag span.
      Mentre funziona il tag a href, il link ad una risorsa esterna, non ottengo effetto sullo stile con il tag span!
      Insomma nei commenti non è possibile fare festa e ottenere effetti scenografici :-).
      Evidentemente nessuno ritiene opportuno “abbellire” un commento e, probabilmente hanno ragione.
      A me sarebbe piaciuto 🙂 ma può essere che il gioco non valga la candela … ma nemmeno un disegnino o una piccola immagine (smile esclusi)?

  5. dueappunti says:

    Allora … azzardo un riassunto per verificare di aver capito.
    Tanti gli spunti e gli approfondimenti.
    Riguardo al primo punto: la differenza tra la pagina nuda e cruda e il post in wordpress.Praticamente, per verificare gli effetti del codice HTML puro, è meglio utilizzare il laboratorio personale con Bloc notes e salvare in formato .html.
    Nel caso io voglia condividere la pagina web, posso allegarla ad una mail oppure inserirla in un post?
    Ho problemi con il codice riguardo alle ancore, mi deve esser sfuggito qualcosa … riproverò domani.
    Per oggi ho provato a inserire in un post il file in HTML realizzato con Bloc notes usando la funzione inserisci mediaQui.

    1. Andreas says:

      Certo, per lavorare su HTML meglio il laboratorio pesonale. Poi, ciò che uno ha imparato può tornare utile quando pubblica roba sui servizi web, di blogging o altro. Puoi condividere una pagina, che si trova per esempio in un file pinco-pallino.html, allegandolo ad un’email. Alternativamente, puoi aprire un pad, schiaffarci il contenuto di pinco-pallino.html dal Blocco note con copia/incolla e inviarmi l’indirizzo del pad, oppure inviarcelo in un commento qui.

      Per quanto riguarda l’ancora che non ti funziona, sono andato a vedere il codice con Ctrl-u: hai messo il carattere # anche in name, no:

      1) nel link devi scrivere href=”#ancora”

      2) nell’ancora invece name=”ancora”

      Vale a dire: il nome dell’ancora è ancora (nel tuo caso) ma il riferimento ad essa, da usare nel link è #ancora

      1. dueappunti says:

        Perfetto!
        Capito, grazie 🙂
        Sbagliavo parecchie cose:
        1 – mettevo il cancelletto dove non andava (indica solo dove arrivare, giusto?
        2 – usavo href sia per il punto di arrivo che per la partenza. “a name” serve per creare l’ancora, mentre a href=”# …, serve per indicare dove andare.
        3 – Leggendo HTML.it ho trovato l’uso di un link che punta alla pagina stessa, un link vuoto … usando a href=”#”, ma non ho capito a cosa possa servire.
        Comunque per ricordarmi la logica ho inserito nel post di provandosimpara l’immagine del codice da usare per link interni, indice ecc.
        Certo compare il tag … ma apriamo una porta alla volta 🙂
        Questione ancore, forse risolta!
        Molto utili, grazie Andreas!
        PS. wordpress.com non mi permette di caricare file .html … provo a vedere se carica file .txt.

  6. simouni says:

    ho effettuato gli esercizi costruendo un’altra pagina sul blog. Diventa sempre più complicato, ma dopo aver rotto il ghiaccio si facilita il lavoro.
    dopo aver pubblicato l’esercizio, ho aperto con ctrl+u la versione html ed ho ritrovato il tutto (anche se wordpress aggiunge delle cose).
    Esercizio

    1. monicoli says:

      Mi associo a Maupao…le informazioni sono tante e i tentativi di approccio al linguaggio Html altrettenti…con un po’ di tempo, di pazienza e questo post-tutorial tutto è possibile. Grazie Andreas

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...