Visual Studio Code è un editor di codice per la programmazione creato da Microsoft. È disponibile per piattaforme Windows, macOS e Linux. Permette di creare e modificare codice sorgente scritto in vari linguaggi di programmazione, incluso l'HTML. Tuttavia, come si può eseguire del codice HTML per poter controllare come viene visualizzato a video il risultato che genera? Fortunatamente esistono numerose estensioni per Visual Studio Code che permettono di eseguire facilmente del codice HTML direttamente all'interno dell'editor. È possibile usare anche la console "Terminale", che riconduce alla console dei comandi del sistema operativo in uso, per eseguire un file HTML. Questo articolo spiega come eseguire del codice HTML usando Visual Studio Code.

Metodo 1
Metodo 1 di 4:
Creare, Modificare e Salvare un File HTML

  1. 1
    Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
    • Se non hai ancora installato Visual Studio Code sul computer, puoi scaricarlo gratuitamente usando questo link. Clicca semplicemente sul pulsante Download visibile nella pagina web che apparirà. Al termine del download, esegui il file di installazione direttamente dal browser internet oppure dalla cartella in cui è stato salvato (normalmente la cartella "Download"). Segui le istruzioni che appariranno a video per completare l'installazione.
  2. 2
    Apri il documento che contiene il codice HTML o creane uno nuovo. Segui queste istruzioni per aprire un file esistente o crearne uno nuovo:
    • Per creare un nuovo file clicca sul menu File che trovi sulla barra dei menu, quindi clicca sull'opzione Nuovo file. A questo punto inizia a creare il tuo codice HTML.
    • Per aprire un file esistente clicca sul menu File che trovi sulla barra dei menu, quindi clicca sull'opzione Apri file. Accedi alla cartella dove è memorizzato il file HTML da aprire e clicca sull'icona corrispondente per selezionarlo, quindi clicca sul pulsante Apri.
  3. 3
    Salva il file come documento HTML. Quando sei pronto per eseguire il codice HTML che hai creato con Visual Studio Code, per prima cosa devi salvare il tuo lavoro sotto forma di file HTML. Dopo aver creato il documento HTML potrai eseguirlo all'interno di qualsiasi browser internet. Segui queste istruzioni per salvare il codice HTML sotto forma di file usando Visual Studio Code:
    • Clicca sul menu File;
    • Clicca sull'opzione Salva con nome;
    • Assegna un nome al file digitandolo nel campo "Nome file";
    • Usa il menu a discesa "Salva come" per selezionare l'opzione "HTML";
    • Clicca sul pulsante Salva.
    Pubblicità

Metodo 2
Metodo 2 di 4:
Usare la Finestra Terminale

  1. 1
    Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
  2. 2
    Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra.
  3. 3
    Apri una finestra "Terminale". Clicca sul menu Terminale collocato nella parte superiore della finestra di Visual Studio Code. Clicca sulla voce Nuovo terminale. La finestra "Terminale" è l'unico modo per poter eseguire un file HTML direttamente all'interno di Visual Studio Code senza ricorrere all'utilizzo di un'estensione. Tuttavia si tratta anche del metodo più complesso.
    • In alternativa, clicca sul menu Visualizza, quindi clicca sull'opzione Terminale.
  4. 4
    Digita il comando cd seguito dal percorso completo dove è memorizzato il file HTML e premi il tasto Invio. In questo modo, come cartella di lavoro della console dei comandi, verrà impostata la directory in cui è salvato il file HTML da eseguire. Per esempio, se il documento HTML in oggetto è memorizzato nella cartella "Documenti", dovrai digitare il seguente comando cd \Users\[nome_utente]\Documents e premere il tasto Invio.
    • Se il file HTML è stato salvato in una partizione o un disco diverso da quello di sistema (dove risiede l'installazione del sistema operativo), dovrai accedere a tale unità prima di poter usare il comando indicato. Per cambiare unità di memoria dalla console dei comandi, digita la lettera di unità che identifica la partizione o il disco desiderato (per esempio D: per l'unità "D:") e premi il tasto Invio.
    • Se non sai dove è memorizzato il file HTML da eseguire, clicca sulla scheda in cui è riportato il nome del file HTML con il tasto destro del mouse e seleziona l'opzione Copia percorso dal menu che apparirà. Digita il comando cd all'interno della finestra "Terminale" e incolla il percorso copiato esattamente dopo il comando "cd". A questo punto cancella il nome del file presente alla fine del percorso e premi il tasto Invio.
    • Se una delle directory indicate nel percorso del file HTML presenta uno spazio vuoto all'interno del nome, la console dei comandi non potrà eseguire il comando impartito. In questo caso usa la finestra "Esplora file" di Windows o la finestra di "Finder" su Mac per modificare il nome di tutte le cartelle del percorso del file che presenta uno spazio vuoto per eliminarlo (per esempio se hai salvato il file nella cartella "File HTML", dovrai modificarne il nome in "File_HTML" o "FileHTML").
  5. 5
    Digita il comando start seguito dal nome del file HTML da eseguire e premi il tasto Invio. Per esempio, se vuoi eseguire il file HTML denominato "index", dovrai digitare il comando start index.html e premere il tasto Invio. In questo modo il file HTML indicato verrà eseguito in una finestra separata dandoti la possibilità di visualizzare a video il risultato finale.
    • Per chiudere la finestra di anteprima in cui è visibile la pagina web che hai creato, clicca semplicemente sull'icona raffigurante la lettera "x" posizionata nella parte superiore della finestra stessa.[1]
    Pubblicità

Metodo 3
Metodo 3 di 4:
Usare l'Estensione "HTML Preview"

  1. 1
    Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
  2. 2
    Clicca sul pulsante "Estensioni". È caratterizzato da un'icona raffigurante quattro piccoli quadrati ed è visibile lungo la barra laterale sinistra della finestra. Verrà visualizzato a video il pannello "Estensioni".
  3. 3
    Digita le parole chiave HTML Preview nella barra di ricerca. È posizionata nella parte superiore del pannello "Estensioni". Verrà visualizzato l'elenco dei risultati della ricerca in cui saranno presenti tutte le estensioni che corrispondono ai criteri cercati. "HTML Preview" è un'estensione creata per Visual Studio Code che permette di visualizzare un'anteprima dei file HTML direttamente all'interno dell'editor sia in modalità a "schermo intero" sia in modalità "schermo condiviso".
  4. 4
    Clicca sull'estensione "HTML Preview". Dovrebbe essere la prima voce dell'elenco dei risultati della ricerca. È stata sviluppata da Thomas Haakon Townsend. È caratterizzata da un'icona raffigurante uno scudo arancione con il numero "5" al centro (si tratta del logo ufficiale dello standard HTML 5).
  5. 5
    Clicca sul pulsante Installa. È posizionato nell'angolo inferiore destro del riquadro dedicato all'estensione "HTML Preview" dell'elenco dei risultati. In questo modo l'estensione indicata verrà installata in Visual Studio Code. Il completamento dell'installazione dovrebbe richiedere qualche minuto.
  6. 6
    Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto, clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra perché venga mostrato a video.
  7. 7
    Clicca sul pulsante "Open Preview". È caratterizzato da un'icona raffigurante una finestra stilizzata e una piccola lente di ingrandimento. È posizionata nell'angolo superiore destro della finestra di Visual Studio Code. Verrà visualizza una finestra di anteprima per il file HTML in esame, affiancata a quella in cui è visibile il codice sorgente.
    • Per visualizzare la finestra di anteprima a schermo intero, tieni premuto il tasto Alt mentre clicchi sul pulsante "Open Preview".
    • Per chiudere la finestra di anteprima del file HTML, clicca semplicemente sull'icona raffigurante la lettera "x" posizionata nella parte superiore della finestra stessa.
    Pubblicità

Metodo 4
Metodo 4 di 4:
Usare l'Estensione "Open in Browser"

  1. 1
    Avvia Visual Studio Code. È caratterizzato da un'icona blu raffigurante il logo di Visual Studio. Clicca sull'icona indicata per avviare il programma. La troverai nel menu "Start" di Windows, nella cartella "Applicazioni" su Mac o nel menu "App" su Linux.
  2. 2
    Clicca sul pulsante "Estensioni". È caratterizzato da un'icona raffigurante quattro piccoli quadrati ed è visibile lungo la barra laterale sinistra della finestra. Verrà visualizzato a video il pannello "Estensioni".
  3. 3
    Digita le parole chiave open in browser nella barra di ricerca. È posizionata nella parte superiore del pannello "Estensioni". Verrà visualizzato l'elenco dei risultati della ricerca in cui saranno presenti tutte le estensioni che corrispondono ai criteri cercati. "Open in browser" è un'estensione creata per Visual Studio Code che permette di visualizzare un'anteprima dei file HTML utilizzando il browser internet che preferisci direttamente all'interno di Visual Studio Code.
  4. 4
    Clicca sull'estensione "Open in browser". Dovrebbe essere la prima voce dell'elenco dei risultati della ricerca. È stata sviluppata dalla TechER. Clicca sul nome dell'estensione per selezionarla.
  5. 5
    Clicca sul pulsante Installa. È posizionato nell'angolo inferiore destro del riquadro dedicato all'estensione "Open in browser" dell'elenco dei risultati. In questo modo l'estensione indicata verrà installata in Visual Studio Code. Il completamento dell'installazione dovrebbe richiedere qualche minuto.
  6. 6
    Apri un file HTML esistente o creane uno nuovo. Se devi creare il tuo codice HTML, crea un nuovo file, aggiungi il codice e salvalo come documento HTML. Se hai già pronto un file HTML, aprilo all'interno di Visual Studio Code. A questo punto, clicca sulla scheda che contiene il codice HTML visualizzata nella parte superiore della finestra perché venga mostrato a video.
  7. 7
    Clicca su un punto qualsiasi del codice HTML con il tasto destro del mouse. Verrà visualizzato un menu contestuale.
  8. 8
    Clicca sull'opzione Open in Default Browser. In questo modo il codice HTML del documento in esame verrà eseguito utilizzando il browser internet predefinito di sistema.[2]
    • In alternativa, puoi cliccare sull'opzione Open in Other Browser per poi scegliere con un doppio clic del mouse il browser internet che vuoi utilizzare per visualizzare l'anteprima del codice HTML su cui stai lavorando.
    • Se ti viene chiesto di selezionare un browser internet come predefinito, clicca su quello che preferisci usare per aprire il file HTML in oggetto, quindi clicca sul pulsante OK.
    Pubblicità

wikiHow Correlati

Aprire un File XMLAprire un File XML
Impostare la Larghezza e l'Altezza di un Immagine in HTMLImpostare la Larghezza e l'Altezza di un Immagine in HTML
HackerareHackerare
Aggiungere un Link a un'ImmagineAggiungere un Link a un'Immagine
Centrare un'Immagine Usando il Codice HTMLCentrare un'Immagine Usando il Codice HTML
Creare un Menu a Tendina in HTML e CSSCreare un Menu a Tendina in HTML e CSS
Inserire gli Spazi in HTML
Inserire una Linea Orizzontale in HTMLInserire una Linea Orizzontale in HTML
Convertire un Numero dal Sistema Binario a Quello DecimaleConvertire un Numero dal Sistema Binario a Quello Decimale
Creare una Semplice Pagina Web con HTMLCreare una Semplice Pagina Web con HTML
Diventare un HackerDiventare un Hacker
Danneggiare un File di Proposito Utilizzando Corrupt a File.NetDanneggiare un File di Proposito Utilizzando Corrupt a File.Net
Compilare un Programma C Utilizzando il Compilatore GNU GCCCompilare un Programma C Utilizzando il Compilatore GNU GCC
Creare un VirusCreare un Virus
Pubblicità

Informazioni su questo wikiHow

Travis Boylls
Co-redatto da:
Scrittore ed Editor Esperto di Tecnologia
Questo articolo è stato co-redatto da Travis Boylls. Travis Boylls è uno Scrittore ed Editor esperto di Tecnologia che collabora con wikiHow. Ha esperienza in scrittura di articoli relazionati alla tecnologia, fornitura di software per il servizio clienti e progettazione grafica. È specializzato in piattaforme Windows, macOS, Android, iOS e Linux. Ha studiato graphic design al Pikes Peak Community College.
Categorie: Programmazione
Questa pagina è stata letta 192 volte.

Hai trovato utile questo articolo?

Pubblicità