Guida alla lettura e all'uso dell'HTML

Il primo approccio ai forum e al loro editor HTML disponibile al pubblico può essere scoraggiante per chi non ha mai approfondito la formattazione. Specie su un GdR, dove si fa un uso massiccio dell'HTML per codici role, codici scheda e banalmente anche per tanti altri effetti che, se avessimo a che fare con un editor di testo a cui siamo abituati (Word, LibreOffice, ecc.) riusciremmo a fare con un semplice click.

Miei cari novizi, vi sorprenderà sapere che anche per un esperto di linguaggi di formattazione avere a che fare con l'editor dei circuiti è un'esperienza infernale proprio come la vostra. Siete sulla stessa barca ma con il problema opposto: se per voi i codici disponibili nell'editor sono troppi, per loro sono troppi pochi. La formattazione, e in generale tutti i linguaggi che la riguardano, è capace di fare cose che qui, purtroppo, non possiamo immaginare: non basta ricorrere al CSS, a quel punto, per liberarsi dei limiti imposti dall'HTML puro e dall'editor.

La considereremo sia una fortuna che una sfortuna: una fortuna perché per poter utilizzare l'editor HTML da utente bisogna apprendere pochissimo rispetto alla vastità del linguaggio; una sfortuna perché l'editor è un limite vero e proprio anche in termini di tag e attributi o modificati o che non funzionano.

Questa guida intende spiegare le nozioni basilari per la lettura e per l'orientamento nei codici che su questo forum sono più utilizzati, che cosa fanno e anche come si usano. Inserirò anche alcune chicche per la formattazione del testo che nell'editor non sono esplicite ma funzionano. Si tratta di una guida in continuo aggiornamento!

HTML, CSS e JS: odio gli acronimi!

Dare per assunto cosa siano l'HTML, il CSS - e per certi versi anche JS - sarebbe un errore. I nomi interi sono HyperText Markup Language, Cascading Style Sheets e Javascript. I primi due sono dei linguaggi di formattazione, mentre il terzo è un linguaggio di programmazione, usato però non solo per il web. Tutti e tre lavorano per definire l'impostazione di una pagina e tutte le caratteristiche, statiche (HTML e in parte CSS) e dinamiche (CSS e soprattutto JS), che la compongono.

Potremmo dire che l'HTML è lo scheletro della pagina, con i suoi contenuti; il CSS è la presentazione dello scheletro, il layout; Javascript si occupa delle parti più dinamiche e automatizzate della pagina, in un rapporto di causa-effetto tra gli elementi presenti e le attività possibili dell'utente - es.: cliccare un bottone per generare un numero randomico.

Non sarà necessario parlare nel dettaglio di tutti e tre: a noi basterà parlare perlopiù dell'HTML e del CSS in maniera laterale. Javascript lo salteremo a piè pari perché non rientra tra le opzioni disponibili per l'editor HTML lato utente.

Elemento, tag, attributo, proprietà, valore: valutare non è mai stato così utile

Possiamo spiegare un elemento come se fosse un periodo. Un periodo esprime qualcosa nel suo contenuto e può contenere tante frasi di tipo diverso al suo interno. La frase con il verbo principale ha una priorità su tutte le altre frasi che si adattano in maniera appropriata. Le frasi sono supportate e separate dalla punteggiatura. Tutto ciò lo si può riscontrare anche nell'HTML.

Questo è un elemento, la nostra frase:

1. Usate sempre il minuscolo. Leggere e orientarsi in un testo tutto in maiuscolo non è una bella esperienza per i propri occhi.


2. Attenzione ai simboli. < e > aprono e chiudono l'espressione del tag. </tag> chiude l'intero elemento. Le "" chiudono un attributo, i : aprono una proprietà, i ; chiudono una proprietà e va messa dopo il valore: basta dimenticarsene uno e l'intero codice non funziona. Tenetelo a mente e aggiornate spesso per avere un anteprima del codice.


3. Usate sempre gli spazi. Si può formattare anche eliminando gli spazi tra i valori, ma io consiglio di mantenerli per la pace dei vostri occhi e della vostra mente.
   
   Esempio senza spazi:
   
   HTML

   <div style="width:300px;height:100px;background-color:yellow;font-family:arial;font-size:12px;line-height:1.2em;text-align:center">Hello World!</div>
   
   Esempio con spazi:
   
   HTML

   <div style="width: 300px; height: 100px; background-color: yellow; font-family: arial; font-size: 12px; line-height: 1.2em; text-align: center">Hello World!</div>
   
   Direi nettamente meglio il secondo.


4. (Solo per fogli liberi) Sempre andare a capo. Funzione che forumcommunity non permette, perché considera l'invio come il tag interruzione automatico; quando - e se - usate i compilatori, sfruttate i capoversi per ordinare gli elementi. Non dovrete sforzare la vista tra un elemento e l'altro per arrivare finalmente proprio a quel valore che state cercate da mezz'ora.

Bold, Italic, Underline, Deleted e altre magie d'illusione

Avrete sicuramente intravisto queste definizioni più di una volta, magari con termini italiani: grassetto, corsivo, sottolineato, barrato. Nell'editor HTML a nostra disposizione sono mostrati come B, I, U e S, negli appositi pulsanti. Ma sapevate che ci sono altri tag magici oltre a questi? Ne abbiamo due proprio nell'editor, l'apice (x²) e il pedice (x₂); altri sono importanza, enfasi, inserito, evidenza e testo rimpicciolito.

Si esprimono attraverso questi tag.

Questa è una citazione. Scriverò il testo più lungo possibile solo per il gusto di farvi vedere quanto è bella questa opzione. Non è fascinoso quanto il lorem ipsum, quello è intramontabile, però insomma, rende l'idea, no?

Interruzioni: Foglia autunnale goes Br

Non abbiamo finito qui con i tag. Due tag che io considero fondamentali sono l'interruzione (br) e interruzione tematica (hr). Dell'interruzione ne ho parlato prima per quanto riguarda i compilatori: l'editor HTML lato utente di forumcommunity lo automatizza, per cui ogni volta in cui noi andiamo a capo in un testo, l'editor lo leggerà come un'interruzione. Per esempio, prendiamo la poesia Soldati di Ungaretti. Se noi la scriviamo sull'editor, ci basterà impostarlo così:

Si sta comed'autunnosugli alberile foglie.

Tutti questi contenitori, mi sembra una matrioshka!