Siti con guide HTML e CSS, tutorial, esempi di codice, editor online

Migliori 6 siti dove imparare a programmare in HTML e CSS con guide, esempi d'uso del codice ed esercizi

Da quando ho iniziato a scrivere su questo blog , anche se ho cercato di disegnare le pagine web in modo semplice, ho dovuto sempre cercare di capire i codici html perchè, anche usando il più facile e perfetto sistema automatico per creare un sito, la necessità di aggiungere codice html personalizzato c'è sempre. Non sono un webmaster professionista ma tutti color che hanno un blog o un sito dovrebbero almeno conoscere gli elementi base dei tag HTML fondamentali
Posso inoltre indicare vari portali online che fanno da supporto globale per chi vuole imparare ed anche per gestori e sviluppatori di siti internet. Anche considerando che le tecnologie sono cambiate nel tempo con la nascita di nuovi linguaggi di programmazione quali il PHP, i Javascript, il CSS e cosi via, è necessario, anche per i più esperti, avere punti di riferimento didattici per Webmaster e web-designer.

Quindi, siccome ci sono certamente un sacco di siti web piuttosto scadenti e da evitare, vediamo i migliori siti che presentano esempi e guide di codice HTML e le applicazioni web che permettono di fare prove, esercizi, esperimenti e test con editor online. I seguenti siti non offrono solo una buona e solida base per imparare il codice HTML, ma offrono anche il miglior ambiente di apprendimento, con strumenti interattivi utilizzabili per verificare che cosa si impara e provarla sul campo.

LEGGI ANCHE: Principali linguaggi di programmazione usati per app e siti Web

1) I migliori siti per imparare l'HTML e la programmazione su internet sono CodePen ed i siti per fare prove di programmazione, che forniscono anche tutorial, guide e tantissimi tutorial ed esempi da studiare e provare con anteprima immediata.

2) 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.
Anche sei il sito è in inglese, è di facilissima consultazione anche per chi lo conosce in modo superficiale.
Usando il campo di ricerca, si possono ottenere istruzioni ed esempi per usare una particolare tag.

3) 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.

Questo strumento mi porta ad aprire una parentesi e segnalare altri siti che forniscono un editor html online e istantaneo, utilissimo a esercitarsi facendo prove ed a vedere cosa succede modificando valori e comandi.
- HTML Instant è il più famoso degli editor online HTML dove si scrive codice a sinistra e si vede subito come viene visto a destra
- HTML Edit è simile a HTML Instant solo che l'editor è sopra e l'anteprima sotto.
- JsBin è utilissimo per aggiungere javascript come jQuery, Prototype ed altri.

4) 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.

5) LandOfCode offre un editor online, a schermo diviso in due parti, per testare il codice HTML.
Sul sito ci sono numerosi esempi di codice HTML, anche se la formattazione lascia un po 'a desiderare.
L'editor online di LandOfCode è più avanzato rispetto quello del W3School perché ha pulsanti aggiuntivi che permettono di visualizzare i risultati in una nuova finestra e non solo nell'area di visualizzazione a destra.

6) Html.it è il miglior sito italiano per leggere guide ed approfondimenti sul codice HTML che serve a realizzare un sito internet.
Se non fosse per la presenza massiccia di pubblicità sarebbe ottimo, con tanti esempi da copiare e incollare per le proprie esigenze. Il linguaggio usato non è però troppo semplice e, quasi, è meglio leggere le guide da uno dei siti inglesi qui sopra.

7) HTML.com è un altro ottimo sito in cui leggere, studiare e cercare guide per usare i tag HTML, CSS e trovare esempi di ogni tipo di codice per siti web.

8) Toolset è un sito italiano del sito di guide HTML MRW.it, che include un editor html con anteprima in tempo reale e poi tantissimi strumenti per creare e manipolare codice, davvero molto utili sia per principianti che professionisti.

Per curiosità si può andare sul sito WebPagesThatSuck dove guardare come non si deve fare una pagina web, quali sono gli errori da evitare e dove leggere la classifica dei peggiori siti del mondo.

Ricordo infine un'altra pagina di questo blog con le migliori risorse online dove scaricare schemi di sintesi HTML, CSS e Javascript, da stampare.