Schemi di sintesi di HTML, CSS e Javascript, con esempi e tutorial

Siti e documenti di sintesi per avere tutti i riferimenti dei linguaggi di programmazione HTML, CSS, Javascript ed altri linguaggi del web

HTML è l'acronimo di "HyperText Markup Language" ed è il codice che si trova dietro ogni pagina web, il linguaggio di programmazione con cui si crea un sito internet.
Il codice html, di per se, non è affatto difficile da capire e da imparare e chiunque può agevolmente creare un sito web sul proprio computer usando programmi quali Kompozer, un editor grafico e visuale che semplifica di molto lo sviluppo.
Chi si appresta a creare una pagina web, anche se utilizza CMS assistiti gratis con creazione di siti internet guidata, dovrebbe conoscere almeno le basi del codice html per avere maggior controllo.

In questo articolo non ci sarà un tutorial per insegnare a programmare in html ma delle risorse che saranno sicuramente utili a tutti i webmaster, sia quelli più inesperti, sia ai professionisti ed ai grafici internet.
Parliamo infatti di Cheat Sheets ossia di schemi riassuntivi, in una pagina, che, se stampate ed appese alla parete, diventano una risorsa preziosa per ricordare e tenere a mente le informazioni più spesso usate.
Quindi, come di promemoria di formule matematiche o definizioni mediche, anche per i programmatori ed i designer web ci sono delle tabelle riassuntive con i principali codici e proprietà che, a volte, possono scappare di mente.

In questo post segnalo i più utili fogli per i linguaggi HTML, CSS e Javascript, che possono essere scaricati gratis in pdf e stampati, da utilizzare come schemi di riferimento per ricordare le cose più velocemente.

Per il linguaggio HTML ci sono 3 schemi riassuntivi, due molto simili ed alternative ed una che invece contiene i codici per scrivere caratteri speciali.
1) HTML Help Sheet
2) HTML Cheat Sheet
3) Caratteri speciali in HTML.

4) La tabella degli elementi di HTML5 con tutte le spiegazioni per ogni TAG dal W3C. Questa non è una tabella da scaricare ma un applicazione web.

5) HTML Dog è il primo sito in cui andare se ci si dimentica di come usare un comando o una istruzione HTML e CSS.
Il sito è ben progettato e, soprattutto, molto aggiornato a differenza invece di altri siti dedicati al web design che spesso contengono guide obsolete. HTML Dog fornisce, per ogni funzione, tag o attributo, un chiaro esempio di codice che è possibile copiare e incollare nel proprio editor. Ci sono tre livelli di tutorial, principiante, intermedio e avanzato.

6) W3Schools è forse il miglior sito web dove trovare codici meno standard e più fantasiosi. Esso contiene tantissimi esempi di codice,dal PHP CSS e HTML, all'XML e Javascript.
La cosa più utile del sito W3Schools è un utile strumento a schermo diviso in cui è possibile testare il codice che si impara in ogni lezione. Se si modifica il codice HTML nel box editor si potrà subito vedere il risultato in anteprima cosi da fare tutte le prove che si vogliono.

7) Quackit è allo stesso livello di W3Schools, con tanti esempi di html base ed avanzato. Tutti i codici si possono copiare e incollare sul proprio sito internet.
Per ogni esempio, viene mostrato sia il codice di programmazione che il risultato grafico. Nel menu in basso a sinistra si trovano dei generatori di codice automatici dove, riempendo campi in modo personalizzato, si può generare la porzione di codice che serve.

Per i disegnatori di siti internet che utilizzano il programma Dreamweaver c'è una tabella a doppia pagina con il riassunto globale di tutti gli hotkeys, le combinazioni da tastiera per richiamare le funzioni velocemente e con una sintetica spiegazione dei menu.

Riguardo il codice CSS ed i fogli di stile usati all'interno di una pagina web ci sono le seguenti tabelle:
CSS Cheat interattivo una pagina web che contiene tutti i tag o parametri del linguaggio CSS con tutte le variabili che possono assumere.
Siccome la maggior parte delle persone che lavora sui siti web usano solo alcuni di tutti i parametri possibili in un foglio di stile CSS, allora utile è scaricare Practical CSS Cheat Sheet con le proprietà principali.

CSS Cheat Sheet è una pagina con una sintesi di come si utilizza, di base, il foglio di stile CSS, con le proprietà principali ed il loro significato.

Per quanto riguarda i Javascript ed altri linguaggi più complessi ed avanzati, ci sono altri schemi di sintesi.
jQuery Cheatsheet
JavaScript Cheat Sheet
Proprietà e Metodi DOM più comuni
Prototype CheatSheet
JsBin è utilissimo per aggiungere javascript come jQuery, Prototype ed altri.

LEGGI ANCHE: Migliori siti per scrivere e provare codice con anteprima in tempo reale