htmlPlayground, una comoda guida sui tag HTML e CSS

Questo articolo è stato pubblicato 10 mesi 13 giorni fa quindi alcuni contenuti o informazioni presenti in esso potrebbero non essere più validi.
Se riscontri errori o link rotti, puoi segnalarli inviando un commento.

Girovagando per la rete, ho trovato una guida completa per l’HTML, l’XHTML ed il CSS, funzionale e corredata di esempi ed applicazioni pratiche, utile, soprattutto, per chi è alle prime armi. Il sito che la mette a disposizione è htmlPlayground.com.

Com’è fatta la guida

La schermata è divisa in 4 sezioni, ognuna delle quali descrive una funzione ben precisa nel sito: in alto a destra è presente la lista con tutti i tag disponibil, selezionandone uno compare affianco una descrizione completa e subito sotto gli esempi con la possibilità di modificare il codice visualizzato, testarne uno proprio e vedere il risultato, infine è presente a sinistra l’elenco degli attributi che è possibile associare ai tag quali colori, eventi, testi ecc.

E’ possibile scegliere l’elenco da cui vedere i tag HTML, XHTML e gli attributi CSS tramite il menù Select Reference in alto.

Una piccola annotazione: il sito pare non funzionare con Internet Explorer 8.

Come si usa

Selezionando un tag dall’elenco, come già detto, viene visualizzata la descrizione e un esempio.  Nella figura qui sotto è visualizzato il tag acronym.

E’ possibile modificare l’esempio direttamente nel box, oppure cliccando su Modify code per visualizzare un box più grande. Una volta terminata la modifica basta cliccare su Try Code per visualizzarne il risultato.

Se vogliamo vedere tutti gli attributi di un tag, sarà necessario cliccarci sopra con il mouse (è possibile selezionare tutti quelli nel box dell’esempio, sono di colore verde). Compariranno le possibili proprietà che è possibile assegnare, compresi gli stili cliccando su CSS.

E’ inoltre possibile vedere la descrizione degli attributi e degli stili CSS. Selezionandone uno sul box di esempio (per intenderci: sono quelli con la scritta bordeaux e rossa) oppure cliccando sullo spazio dove è possibile scrivere affianco all’elenco di sinistra, compare la relativa descrizione e, solo per gli stili, anche la compatibilità tra i browser e l’ereditarietà.

Spero possa essere d’aiuto

(Immagine alta: Flicker, Pitel)