Editor e strumenti HTML
Confronta i più diffusi editor HTML (VS Code, Sublime Text, Notepad++, WebStorm), crea il tuo primo file HTML e usa i DevTools e il validatore W3C.
Dal capitolo precedente abbiamo appreso che HTML è un linguaggio di markup utilizzato per creare pagine web. Per creare pagine web avrai bisogno dei seguenti strumenti e programmi:
- un editor di testo o HTML per scrivere e modificare il codice sorgente,
- un browser per verificare i risultati,
- un validatore — un programma speciale che controlla la validità o la correttezza sintattica del codice sorgente.
Parliamone in dettaglio.
Editor HTML
Esistono diversi editor professionali che gli sviluppatori web utilizzano per scrivere codice. Tuttavia, non ogni editor è in grado di soddisfare tutte le esigenze. Un buon editor HTML deve offrire le seguenti funzionalità:
- evidenziazione della sintassi — visualizzazione del testo, in particolare del codice sorgente, con colori e caratteri differenti,
- supporto alle schede — possibilità di tenere aperte più pagine web contemporaneamente in schede,
- verifica di un documento HTML per individuare errori,
- code folding — possibilità di nascondere grandi frammenti di codice mostrando solo un riepilogo o la prima riga.
Gli editor HTML più diffusi sono quelli elencati di seguito:
- Visual Studio Code — gratuito e open source, è la scelta predefinita più comune. Funziona su Windows, macOS e Linux. Il suo punto di forza è l'ecosistema di estensioni: aggiungi Prettier per formattare automaticamente il codice, Live Preview (o Live Server) per vedere le modifiche nel browser in tempo reale, e il IntelliSense integrato per il completamento automatico di tag e attributi.
- Sublime Text — sceglilo per la velocità pura. Si avvia istantaneamente e rimane reattivo anche con file molto grandi, il che lo rende popolare per modifiche rapide. È un software a pagamento ma può essere valutato gratuitamente, e funziona su tutte e tre le principali piattaforme.
- Notepad++ — un editor gratuito e leggero solo per Windows. Su macOS o Linux, un'opzione leggera comparabile è l'editor integrato (TextEdit su macOS, gedit/nano su Linux), oppure è possibile usare direttamente VS Code multipiattaforma.
- WebStorm — un IDE completo di JetBrains. È un software a pagamento (abbonamento) e più pesante degli editor sopra citati, ma include funzionalità avanzate di refactoring, debug e supporto ai framework già integrate, il che lo rende adatto a progetti più grandi.
Se stai appena iniziando e vuoi evitare qualsiasi configurazione, puoi usare il Blocco note (Windows) o TextEdit (macOS) per scrivere il tuo primo file. Tuttavia, questi editor di base non supportano l'evidenziazione della sintassi, quindi ti consigliamo di iniziare con un editor gratuito che la supporti, come Visual Studio Code (qualsiasi piattaforma) o Notepad++ (Windows). Una volta scelto un editor, impara la struttura di base di un documento HTML prima di andare avanti.
Il tuo primo file HTML
I passaggi seguenti utilizzano il Blocco note di Windows perché è installato su ogni computer Windows e non richiede alcuna configurazione. Lo stesso principio si applica a qualsiasi editor: scrivi il codice, salvalo con estensione .html, poi aprilo in un browser.
Passo 1. Apri il Blocco note
Premi il tasto Windows, digita Notepad e premi Invio. (Su macOS, apri TextEdit e passa alla modalità testo normale tramite Formato → Converti in formato testo normale.)
Passo 2. Scrivi il codice
Scrivi o copia il codice HTML seguente.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Simple example</h1>
<p>Some text you want to show here</p>
</body>
</html>Una volta aperto nel browser, questo codice visualizza una pagina con il titolo "Simple example" in testo grande e in grassetto, seguito dal paragrafo "Some text you want to show here".
Passo 3. Salva il documento HTML
Vai su File nel menu del Blocco note e scegli Salva con nome. Assegna al documento un nome usando l'estensione .htm o .html. (Si consiglia di usare l'estensione .html.) Assicurati di impostare la codifica su UTF-8 e imposta il menu a discesa Salva come su Tutti i file per evitare che Windows aggiunga l'estensione .txt. Salva il file in una cartella dedicata che crei in anticipo per archiviare tutti i tuoi documenti HTML.
Passo 4. Controlla il file HTML in un browser
Apri il tuo file HTML in un browser (fai clic con il pulsante destro sul file e scegli Apri con). Dovresti vedere il titolo e il paragrafo del codice qui sopra.
Browser
Avrai bisogno di un browser per controllare i file HTML. Per iniziare, qualsiasi browser come Google Chrome, Opera o Firefox sarà sufficiente, ma in seguito ne avrai bisogno di tutti. Il fatto è che ogni browser dispone del proprio motore di rendering e dovrai verificare il tuo codice in ciascuno di essi. I browser moderni includono anche gli Strumenti per sviluppatori integrati (premi F12 oppure fai clic con il pulsante destro su un elemento e scegli Ispeziona). I DevTools ti consentono di esaminare il codice HTML e CSS live di qualsiasi elemento, modificare gli stili e visualizzare il risultato immediatamente, e leggere la Console, dove il browser segnala errori e avvisi JavaScript. Sono il modo più rapido per capire perché una pagina non ha l'aspetto o il comportamento atteso. Per i test cross-browser, puoi utilizzare servizi online o macchine virtuali man mano che il progetto cresce.
Validatore
Una parte essenziale del processo di sviluppo delle pagine web è la verifica della validità del codice HTML. Per controllare la validità o la correttezza sintattica di un frammento di codice o di un documento si possono usare validatori speciali, programmi o servizi appositi.
Il servizio online più comune è validator.w3.org. Inserisci l'URL di una pagina web (o incolla direttamente il tuo codice) e il servizio lo verifica rispetto allo standard HTML. L'output è un elenco di messaggi: gli Errori (rossi) segnalano codice che non rispetta lo standard, come un tag non chiuso o un nome di elemento scritto in modo errato; gli Avvisi (gialli) indicano elementi tecnicamente consentiti ma sconsigliati. Se non ci sono problemi, viene visualizzato un messaggio verde che conferma la validità del documento. Correggere gli errori segnalati dal validatore è una buona abitudine, poiché un markup non valido può essere visualizzato in modo inconsistente tra i browser.
Per verificare la validità dei file locali, puoi utilizzare validatori online oppure i linter integrati in editor moderni come Visual Studio Code. Alcuni editor offrono anche il controllo della sintassi in tempo reale durante la digitazione.