Programmi per HTML
Stai muovendo i tuoi primi passi nel mondo della progettazione Web e stai prendendo in seria considerazione l’idea di creare un sito Web in HTML. Se sei finito qui è perché ti piacerebbe ricevere qualche dritta riguardo ai software da utilizzare per creare e modificare le pagine che andranno a comporlo. Non è forse così? Tranquillo, se mi dedichi qualche minuto del tuo prezioso tempo libero posso indicarti quelli che, a mio modesto avviso, rappresentano i migliori strumenti di questo tipo attualmente su piazza.
Di seguito, infatti, trovi una lista di programmi per HTML che potrebbero fare proprio al caso tuo. Ce ne sono sia di gratuiti che a pagamento, sia per Windows che per macOS e Linux: devi solo individuare quelli che ritieni possano esserti più utili, scaricarli sul tuo fido computer e cominciare a servirtene.
Allora? Posso sapere che cosa ci fai ancora lì impalato? Posizionati bello comodo e inizia a concentrarti sulla lettura di quanto riportato qui di seguito. Sono sicuro che, alla fine, potrai dirti ben contento e soddisfatto e che, addirittura, qualora necessario, sarai pronto a dare consigli in merito a tutti i tuoi amici interessati all’argomento. Buona lettura e buon lavoro!
Indice
- Programmi per scrivere HTML
- Programmi per aprire HTML
- Programmi per modificare HTML
- Programmi per programmare HTML: linguaggi server
Programmi per scrivere HTML
Dopo aver preso visione della mia guida alla "programmazione" HTML, ti senti pronto a realizzare la tua prima pagina Web e non vedi l’ora di scoprire quali sono i migliori programmi per farlo? Ebbene, non devi fare altro che continuare con la lettura di questo capitolo e scegliere la soluzione che più ritieni adatta al tuo caso.
Editor di testo di Windows e macOS
Se vuoi limitarti a realizzare una piccola pagina HTML per testare le tue conoscenze in materia, sarai ben felice di sapere che puoi riuscirci utilizzando gli editor di testo integrati in Windows e macOS: per la precisione, sto parlando del Blocco Note e dell’applicazione TextEdit, accessibili mediante le icone presenti rispettivamente nel menu Start di Windows, e nel menu delle app di macOS.
Nel caso del Blocco Note, se impieghi solo Windows 11, clicca sul menu File > Nuova scheda Markdown e digita il codice nel nuovo pannello apertosi; diversamente, inizia fin da subito a digitare il tuo codice HTML.
Per quanto riguarda TextEdit, devi innanzitutto cliccare sul pulsante Nuovo documento, per poi aprire il menu Formato del programma e selezionare la voce Converti in formato solo testo, dal suo interno; fatto ciò, puoi digitare il tuo codice HTML, senza più doverti preoccupare della formattazione.
Una volta completato il tuo lavoro, se utilizzi il Blocco Note, apri il menu File > Salva con nome del programma, imposta il menu a tendina Salva come sull’opzione Tutti i file e digita il nome da assegnare alla pagina Web, comprensivo di estensione .html; per concludere, scegli la cartella in cui archiviare il documento e clicca sul pulsante Salva.
Se utilizzi invece TextEdit, apri il menu File > Salva del programma, digita il nome da assegnare al file comprensivo dell’estensione .html e, dopo aver scelto la posizione in cui salvarlo, clicca sul pulsante Salva.
Notepad++ (Windows)
Tra i migliori programmi per HTML disponibili su piattaforma Windows e dedicati alla scrittura di codice relativamente semplice figura sicuramente Notepad++. Come il nome stesso lascia intendere, si tratta di un editor di testo, dotato però di funzionalità utili a chi si approccia al mondo della programmazione.
Esso, infatti, consente di colorare, formattare e indentare il codice in automatico, a seconda del linguaggio utilizzato, così da facilitare l’individuazione di errori sintattici di vario tipo (ad es. tag aperti e non chiusi).
Notepad++ è un programma gratuito e compatibile con Windows; per ottenerlo, collegati a questa pagina Web, clicca sulla voce Download (a sinistra) e premi sul link relativo all’edizione più recente del programma.
Ora, per scaricarne la versione portable (che non necessita di installazione), clicca sulla voce Portable (zip) e, a download completato, estrai il pacchetto ottenuto (ad es. npp.[versione].portable.zip) in una cartella a piacere.
Fatto ciò, accedi alla cartella appena creata e avvia il file eseguibile notepad++ contenuto al suo interno; giunto nella finestra principale del programma, apri il menu Language > H e seleziona la voce HTML, per specificare il tipo di formattazione da applicare al codice.
A partire da questo momento, puoi iniziare a digitare il tuo codice, oltre che a usufruire delle funzioni di auto-completamento e dei suggerimenti automatici di Notepad++; ti segnalo che, se lo desideri, puoi accedere agli strumenti e alle varie visuali di Notepad++ aprendo, rispettivamente, i menu Edit e View. Quando hai finito, non ti resta che salvare il tuo lavoro, cliccando sul menu File > Save.
Visual Studio Code (Windows/macOS)
Se stai pensando di realizzare qualcosa di più strutturato, come alternativa ai programmi per creare pagine HTML di cui ti ho parlato poco fa, potrebbe venirti in aiuto un vero e proprio ambiente di sviluppo integrato (IDE), quale potrebbe essere Visual Studio Code.
Nel dettaglio, si tratta di una soluzione software gratuita e open source: previa opportuna configurazione, essa può interagire con il motore AI GitHub Copilot, ed è in grado non soltanto di aiutare l’utente nello sviluppo di singole pagine HTML, ma anche nella gestione di progetti più complessi, il tutto grazie all’integrazione con molteplici linguaggi di programmazione/scripting (anche Web-related) e con la piattaforma di versioning GitHub.
Visual Studio Code è disponibile per tutte le piattaforme desktop; se sei interessato a scaricare il programma, collegati a questo sito Web e clicca sul pulsante Download for [nome sistema operativo], collocato al centro.
Laddove avessi esigenze particolari circa la tipologia di installare da scaricare, clicca invece sul pulsante Download situato in alto a destra e scegli il pacchetto più adatto al tuo caso, tra quelli disponibili.
A download ultimato, esegui il file ottenuto e, se impieghi Windows, accetta i termini dell’accordo di licenza selezionando la casella apposita e clicca sui pulsanti Avanti (per quattro volte consecutive), Installa e Fine, così da avviare subito il software.
Se il tuo è invece un Mac, dopo aver aperto il file .dmg scaricato in precedenza, serviti della finestra di trasferimento per trascinare l’icona di Visual Studio Code nella cartella Applicazioni del computer; in seguito, fai doppio clic sull’icona copiata poc’anzi e premi sul pulsante Apri, così da superare le limitazione imposte da Apple nei confronti delle applicazioni scaricate da Internet (va fatto soltanto al primo avvio).
Da questo momento in poi, le procedure si equivalgono: personalizza il comportamento del programma specificando se utilizzare GitHub Copilot, se personalizzare il tema grafico e se guardare i video tutorial, intervenendo sulle apposite caselle e clicca sul pulsante Next Step.
Ora, se lo desideri, procedi con la personalizzazione delle impostazioni (Tune your settings), con l’installazione di estensioni adatte al codice che vuoi digitare (Code with extensions) e con l’attivazione del terminale integrato, dell’integrazione con Git e dei collegamenti personalizzati; si tratta di passaggi facoltativi, che puoi tranquillamente evitare e riprendere in un secondo momento.
Ad ogni modo, quando hai finito, premi sulla voce Mark Done (per due volte) e avvia subito il tuo primo progetto: clicca sulla voce New File…, digita la parola HTML nel campo di testo che va ad aprirsi in alto e premi sulla voce Create new file (HTML) built-in, visualizzata subito sotto.
Ora, assegna un nome al file che ti appresti a creare, avendo cura di specificare l’estensione .html, specifica la cartella in cui archiviarlo e premi sul bottone Create file.
Finalmente ci siamo: adesso, non ti resta che iniziare subito a scrivere il tuo codice e sfruttare le funzionalità di completamento automatico di VS Code, oltre che i suggerimenti e le segnalazioni di errori sintattici.
Ti segnalo che, se configurato in maniera opportuna, il programma in oggetto consente di realizzare interi progetti Web, di gestirne le versioni e di ricevere aiuto direttamente dall’AI; per saperne di più in merito al funzionamento di Visual Studio Code, consulta l’approfondimento dedicato, disponibile sul mio sito.
Altre soluzioni utili
Qualora le soluzioni che ti ho suggerito finora non si adattassero alle tue esigenze perché, per esempio, sei alla ricerca di un software più orientato alla programmazione Web, oppure di un programma con funzioni WYSIWYG (e dunque la possibilità di vedere le pagine Web create in tempo reale e di modificarle anche con l’aiuto di mouse e tastiera), troverai sicuramente utili le alternative che ti elenco qui di seguito.
- Phoenix code (Online): nato dalle ceneri di Brackets, si tratta di un editor HTML (e non solo) che funziona tramite il browser. È dotato di un’interfaccia completamente personalizzabile, che permette all’utente non solo di visualizzare in tempo reale i propri lavori, ma anche di modificare i vari elementi delle pagine Web con l’ausilio di mouse, tastiera e procedure guidate. È gratuito e funziona tramite il browser.
- KompoZer (Windows/macOS/Linux): è un programma per creare pagine Web open source ritenuto, tra i migliori del genere. Grazie alla presenza di un comodo editor WYSIWYG, affiancato alla modalità sorgente, KompoZer si rivela un software adatto sia ai neofiti che agli utenti più esperti in materia. È gratuito.
- SeaMonkey (Windows/macOS/Linux): è una celeberrima suite di applicazioni multipiattaforma, che integra un browser Web basato su Firefox, un client di posta, un client IRC e un editor HTML. Strumento gratuito e perfettamente adatto a tutti quegli utenti abituati ad avere tutto a portata di clic.
- Adobe Dreamveawer (Windows/macOS): si tratta dello storico software di sviluppo Web progettato da Adobe, il quale permette di gestire tutti gli aspetti dei lavori realizzati in maniera estremamente intuitiva. Include un pratico editor grafico WYSIWYG e consente di realizzare, oltre che codice HTML, anche lavori in CSS, JavaScript e PHP. Dreamweaver è un programma a pagamento, fa parte della suite Adobe Creative Cloud e può essere provato a costo zero per un periodo di tempo limitato.
- Visual Studio Code for the Web (Online): è l’applicazione Web corrispondente al già citato Visual Studio Code, che consente di sfruttare buona parte delle caratteristiche del software desktop direttamente dal browser, e senza installare alcunché.
Per maggiori informazioni in merito alle soluzioni menzionate in questo capitolo, o per conoscere altri software utili allo scopo, prendi visione dei miei tutorial dedicati ai programmi per sviluppare siti Web e ai software per Webmaster: sono certo che, tra le tante proposte, troverai quella che più si adatta alle tue necessità.
Programmi per aprire HTML
Sei riuscito a realizzare la tua prima pagina Web HTML e, adesso, vorresti capire qual è il programma più indicato per visualizzarla? Senza alcuna ombra di dubbio, si tratta del browser! Devi sapere, infatti, che i programmi e le applicazioni pensate per navigare su Internet sono in grado di interpretare nativamente qualsiasi pagina contenente codice HTML, incluse quelle archiviate sul computer.
Per usufruire di questa possibilità, avvia il programma di navigazione che sei solito utilizzare, apri una nuova scheda/nuovo pannello premendo la combinazione di tasti Ctrl+T (su Windows) o cmd+t (su macOS) e trascina direttamente nel browser il file HTML che hai realizzato in precedenza.
In alternativa, individua l’icona del file in questione, fai clic destro su di essa e seleziona le voci Apri con > [nome browser] dal menu contestuale che ti viene proposto; laddove il browser fosse associato di default all’estensione .HTML, puoi altresì aprire le pagine Web locali facendo semplicemente doppio clic sulle rispettive icone.
Ti segnalo infine che tutti i browser per Windows e macOS dispongono altresì della funzionalità dedicata all’apertura manuale dei file: per utilizzarla, dopo aver aperto il programma in oggetto, premi la combinazione di tasti Ctrl+O (su Windows) oppure cmd+o (su macOS) e serviti del pannello proposto, per selezionare il file da aprire.
Se hai qualche dubbio al riguardo, leggi la guida in cui ti spiego, in maniera approfondita, come aprire i file HTML.
Programmi per modificare HTML
Dopo aver completato il lavoro su una specifica pagina HTML, vorresti apportare alcune modifiche ma proprio non sai come fare? In questo caso, sarai ben felice di sapere che puoi utilizzare uno qualsiasi dei programmi per scrittura HTML dei quali ti ho parlato in precedenza.
In linea del tutto generale, per aprire un file HTML in modifica, devi semplicemente fare clic destro sulla sua icona e selezionare le voci Apri con > [nome programma] dal menu contestuale proposto; se il programma di tuo interesse non è elencato tra quelli immediatamente visibili, premi sul pulsante Scegli un’altra app oppure Altro, per selezionarlo.
Come alternativa, puoi altresì avviare direttamente il programma da te scelto per la modifica (ad es. il Blocco Note), aprire il menu File > Apri, File > Open o simili e, dopo aver impostato il menu relativo ai tipi di file sull’opzione HTML o tutti i file, utilizzare il pannello proposto per selezionare il file da modificare; talvolta, puoi accedere al menu di apertura premendo la combinazione di tasti Ctrl+O oppure cmd+o. Maggiori info qui.
Programmi per programmare HTML: linguaggi server
Come dici? Hai notato che le risorse segnalate nelle battute iniziali di questa guida non sono sufficienti per i tuoi scopi poiché, oltre a HTML e CSS, hai integrato nelle tue pagine Web anche elementi di programmazione lato server o scripting avanzato, come l’interazione con database SQL, PHP o JSP?
In questo caso, per poter vedere il risultato completo del tuo lavoro, potresti dover configurare un server Web sul tuo computer e utilizzare quest’ultimo per eseguire i componenti integrati sul tuo sito Web.
A tal proposito, ti consiglio di rivolgerti a XAMPP: se non ne avessi mai sentito parlare, si tratta di una console all-in-one, completamente gratuita e open source, che consente di configurare un server Web Apache sul proprio computer e di aggiungervi rapidamente un gestore di database, un server FTP, un server Mail, un server Tomcat e, ovviamente, di avere fin da subito a disposizione gli ambienti PHP e Perl.
Nel momento in cui scrivo, XAMPP è disponibile per Windows, macOS e Linux, e la tipologia di componenti integrati di default varia in base al sistema operativo di destinazione. Se sei interessato ad approfondire l’argomento e vuoi capire, nel dettaglio, come installare e usare la suite in oggetto, da’ un’occhiata alla mia guida su come hostare un sito Web nel proprio computer, nella quale ho avuto modo di trattare l’argomento con dovizia di particolari.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e ha curato la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
