Da quando ho iniziato a studiare l'HTML negli anni '90, ho sempre trovato quasi impossibile trovare esempi HTML validi e solidi su Internet. Sarebbe stato bello avere alcuni siti Web che offrissero gli ultimi, più dinamici esempi di codifica di siti Web dinamici.
Beh, molto è cambiato dagli anni '90, e l'avvento di linguaggi di programmazione web dinamici come PHP e CSS rende davvero HTML old-school. Quindi, di nuovo, devi comprendere l'HTML della vecchia scuola prima di poter capire le lingue che creano dinamicamente l'HTML che i browser visualizzano.
Per fortuna, ora ci sono alcuni siti web fantastici che offrono esempi ed esercitazioni di codifica HTML ben progettati e utili. Ci sono sicuramente ancora un sacco di siti web HTML-tutorial piuttosto scadenti, quindi ho deciso di riunire otto dei miei siti Web preferiti.
Dovrei ricordare che MUO è probabilmente il primo punto di partenza, con articoli interessanti su HTML di base 5 Passaggi per comprendere il codice HTML di base 5 Passaggi per comprendere il codice HTML di base Ulteriori informazioni, effetti HTML interessanti 7 Effetti HTML interessanti che chiunque può aggiungere al loro sito web 7 fantastici effetti HTML che chiunque può aggiungere al loro sito web Non disperare! Non devi conoscere CSS o PHP per costruire un sito di fantasia. Qualche buon vecchio HTML e sapremo come fare il copia e incolla. Ulteriori informazioni e suggerimenti HTML 5 Suggerimenti HTML per creare un sito Web gratuito di caricamento rapido 5 Suggerimenti HTML per creare un sito Web gratuito di caricamento rapido Ulteriori informazioni per facilitare il caricamento del sito Web più rapidamente.
I seguenti otto siti non offrono solo una buona e solida base sulla codifica HTML, ma offrono anche il miglior ambiente di apprendimento, con strumenti che puoi usare per testare ciò che impari.
1. Cane HTML
Uno dei miei siti preferiti che di solito controllo prima ogni volta che dimentico la sintassi di base per le istruzioni HTML è HTML Dog. Il sito è ben progettato, a differenza del 90% dei siti web di design online che sembrano costruiti negli anni '90 e mai aggiornati. Il formato è semplice e veloce: fai clic sul link Esempi nella pagina principale e troverai un elenco di elementi HTML come layout, colorazione, testo e altro.
HTML Dog fornisce esempi chiari in caselle di codice bianche che puoi copiare e incollare nel tuo codice HTML. È possibile visualizzare l'effettivo output HTML attivo del codice di esempio nel riquadro a destra.
2. W3Schools
Ora, mentre HTML Dog è il mio preferito quando si tratta di controllare la sintassi di base, W3Schools è il posto in cui di solito vado quando voglio ottenere un po 'di fantasia con la mia codifica web. È una delle risorse più popolari per tutti gli esempi di codifica semplici e dinamici, da PHP a JQuery e Javascript, ma troverai anche una sezione fantastica piena di esempi di codifica HTML di base.
La cosa interessante di W3Schools è che, come HTML Dog, hanno incorporato un utile strumento a schermo diviso in cui puoi testare il codice che impari in ogni lezione. Basta modificare leggermente l'HTML, fare clic su " Esegui " e vedrai i risultati nell'area a destra. Molto utile!
3. Quackit
Un altro sito che si trova allo stesso livello di W3Schools in termini di utilità e design moderno è Quackit. Sì, il nome è un po 'stupido, ma il sito fornisce molti esempi utili.
Nell'area HTML, troverai un sacco di codice di esempio nelle caselle di testo che puoi evidenziare e copiare - con l'effettivo effetto di visualizzazione mostrato nella colonna " Esempio ".
4. Landofcode.com
Un altro sito che offre l'utile strumento a schermo diviso per testare il codice HTML è LandOfCode. Il sito principale offre un discreto numero di esempi HTML, dalla formattazione del testo HTML al corretto collegamento a moduli HTML, fogli di stile e meta tag. Ma il vero gioiello di questo sito è l'editor di codice online PractiCode.
Questo è in realtà un po 'più avanzato rispetto allo strumento W3Schools e HTML Dog perché ha pulsanti aggiuntivi che ti consentono di visualizzare i risultati in una nuova finestra, non solo nell'area di visualizzazione a destra.
5. Codecademy
Uno dei siti Web più conosciuti per l'apprendimento di qualsiasi lingua è ovviamente Codecademy. E quando si tratta di imparare l'HTML di base, Codecademy non delude con il suo primo sito Web che utilizza il corso HTML e CSS.
L'area di lavoro del corso, come il resto della Codecademy, è abbastanza avanzata e ti dà la flessibilità di giocare nell'area del codice e vedere la tua pagina web in tempo reale sull'aggiornamento giusto mentre apporti le modifiche. Puoi anche passare a schermo intero per vedere come appare il tuo sito web in una finestra del browser completa.
La cosa bella di questo corso è che incorpora anche l'apprendimento sull'utilizzo di CSS per formattare le tue pagine 10 Esempi di codici CSS semplici che puoi imparare in 10 minuti 10 Esempi di codici CSS semplici che puoi imparare in 10 minuti Vedremo come creare un foglio di stile in linea in modo da poter esercitare le tue abilità CSS. Quindi passeremo a 10 esempi CSS di base. Da lì, la tua immaginazione è il limite! Per saperne di più, chi apprende l'HTML di base dovrebbe imparare nello stesso momento in cui stanno imparando l'HTML.
6. EchoEcho
Un paio di altri siti web che volevo toccare non sono dei migliori, ma si collocano sopra altri siti di codice HTML perché sono ben scritti, ben formattati e trattano l'argomento in modo approfondito. Il primo di questi è EchoEcho. Questo sito ha una sezione HTML che è probabilmente una delle liste più esaurienti di elementi HTML da apprendere in un unico posto.
Ognuno di questi fornisce un chiaro esempio di come dovrebbe essere strutturato il codice HTML, insieme a una spiegazione di tutti i parametri e le opzioni disponibili che è possibile utilizzare.
Questo sito è dedicato a offrire molto di più dei tutorial: la sua D-Zine online! è essenzialmente una rivista online dedicata a tutto ciò che riguarda il web design.
7. Java2s
La sezione HTML / CSS del sito web Java2s è come un'enciclopedia di tag HTML sia per principianti che per esperti. Il layout è perfetto, soprattutto per le persone che potrebbero già sapere quali tag HTML vogliono utilizzare, ma non riescono a ricordare la sintassi esatta.
L'elenco dei tag è pulito e in ordine alfabetico in modo da poter scorrere rapidamente verso il basso per trovare quello desiderato. Dopo aver fatto clic sul tag, vedrai un elenco di casi d'uso di esempio e quando fai clic su uno di questi, vedrai lo snippet di codice esatto che devi utilizzare per implementarlo.
Puoi fare clic su Prova questo esempio per visualizzare la pagina HTML risultante in una nuova finestra del browser.
8. Awwwards
Infine, poiché è sempre una buona idea imparare a codificare vedendo esempi di codice eccellente, devo dare il mio plauso a uno dei siti più utili su Internet che tutti gli studenti che sono nuovi in HTML dovrebbero aggiungere ai segnalibri. Il sito si chiama Awwwards.
Awwwards premia il sito dell'anno, del mese e del giorno e dà persino un po 'di approvazione ai migliori sviluppatori e siti mobili. Sfogliando queste selezioni avrai molte idee su quali elementi e layout funzioneranno al meglio quando metti insieme le tue pagine web.
Vai avanti e crea
Non c'è niente di così esaltante come trascorrere giorni o addirittura mesi, codificare il tuo sito web e finalmente rivelare il tuo capolavoro al mondo. Se sei un bravo studente di HTML e buone pratiche di progettazione HTML, puoi certamente unirti ai ranghi degli sviluppatori web che hanno contribuito al meglio che il web ha da offrire.
Non dimenticare di dare un'occhiata alla lista di esempi HTML di MakeUseOf 17 Esempi di codice HTML semplici che puoi imparare in 10 minuti 17 Esempi di codici HTML semplici che puoi imparare in 10 minuti Se conosci i seguenti 17 tag HTML (e alcuni extra che vanno con loro), sarai in grado di creare una pagina web di base da zero o modificare il codice creato da un'app come ... Leggi di più per iniziare.
Conoscete altre risorse di esempio HTML veramente utili per i programmatori Web che stanno solo imparando a creare pagine Web? Condividi le tue risorse nella sezione commenti qui sotto.