Come Modificare i File HTML

Co-redatto da Lo Staff di wikiHow

Se desideri creare un sito web inserendo il codice sorgente manualmente, puoi usare i file HTML e un semplice editor di testo come Blocco note (per Windows) o TextEdit (su Mac). Se hai la necessità di muovere gli oggetti grafici che compongono le singole pagine lungo lo schermo per avere un feedback visivo diretto di quale sarà il risultato del tuo lavoro, dovrai utilizzare un editor di tipo "WYSIWYG" (dall'inglese "What You See Is What You Get"), come Dreamweaver o Kompozer. Questo articolo spiega come aprire e modificare un file HTML utilizzando un semplice editor di testo o un programma di sviluppo avanzato.

Metodo 1

Metodo 1 di 4:

Usare Blocco Note in Windows

1
Accedi al menu "Start" cliccando sull'icona
. È caratterizzata dal logo di Windows e, per impostazione predefinita, è collocata nell'angolo inferiore sinistro del desktop. Verrà visualizzato un elenco di opzioni.
2
Digita le parole chiave blocco note all'interno del menu "Start". Verrà eseguita una ricerca e l'icona del programma verrà visualizzata nella parte superiore del menu.
3
Clicca sull'icona Blocco note. È caratterizzata da un blocco per appunti stilizzato con una copertina blu.
4
Clicca sul menu File. È collocato nella parte superiore della finestra del programma. Verrà visualizzato un elenco di voci. Questo passaggio serve per poter visualizzare la finestra di sistema "Esplora file" di Windows, che ti permetterà di importare un file all'interno dell'editor Blocco note.
5
Clicca sull'opzione Apri. È la seconda voce elencata nel menu a discesa "File".
6
Seleziona l'opzione "Tutti i file" dal menu a discesa relativo al formato dei file. Clicca sul menu a discesa in cui è visualizzata la voce "Documenti di testo (.txt)" e scegli l'opzione "Tutti i file". In questo modo, all'interno della finestra "Apri", verranno visualizzati tutti i formati di file presenti nella cartella attualmente selezionata, inclusi i file HTML.
7
Seleziona un file HTML e clicca sul pulsante Apri. Il documento scelto verrà aperto nella finestra del programma Blocco note. A questo punto, sei pronto per modificare il codice HTML del documento.
- In alternativa, puoi creare un nuovo file HTML partendo da zero usando l'editor Blocco note.
8
Modifica il codice HTML. Per poter modificare il codice sorgente di una pagina web usando l'editor di testo Blocco note, dovrai imparare la sintassi del linguaggio HTML, in modo da poter apportare le modifiche correttamente. Di seguito è riportato un elenco dei tag più usati e che necessitano di essere modificati nelle situazioni più comuni.
- <!DOCTYPE html>: questo tag viene inserito all'inizio di ogni documento HTML. Il suo scopo è quello di indicare al browser internet che il file è un documento HTML.
- <html></html>: questi tag racchiudono all'interno l'intero codice HTML del documento. Il loro scopo è quello di indicare l'inizio e la fine del codice sorgente scritto in HTML.
- <head></head>: questa coppia di tag viene riportata all'inizio di un documento HTML. Il loro scopo è quello di indicare dove inizia e termina la sezione "head" di un documento HTML. All'interno di questa sezione del codice vengono inserite informazioni che non saranno poi visualizzate all'interno della pagina web risultante. Queste informazioni includono il titolo della pagina, i metadati e i fogli di stile CSS.
- <title>Titolo della Pagina</title>: questa coppia di tag serve per assegnare un titolo a una pagina web. Il titolo di una pagina web deve essere inserito nella sezione "head" di un documento HTML. Inserisci il titolo della tua pagina all'interno dei due tag indicati.
- <body></body>: questi due tag servono per indicare l'inizio e la fine della sezione "body" di un documento HTML. All'interno della sezione "body" va collocato l'intero contenuto che dovrà poi essere visualizzato all'interno di una pagina web. La sezione "body" va inserita nel documento dopo la sezione "head".
- <h1>Titolo del testo</h1>: questi due tag servono per creare un'intestazione di pagina. Il testo inserito tra i tag "<h1>" e "</h1>" apparirà in grassetto e avrà una dimensione superiore a quella del testo standard. Il contenuto testuale di una pagina web va inserito all'interno della sezione "body" di un documento HTML.
- <p>Testo di un paragrafo</p>: questi due tag vengono utilizzati per creare dei paragrafi di testo all'interno di un documento HTML. Il testo inserito fra i tag "<p>" e "</p>" avrà un aspetto standard. Il contenuto testuale di una pagina web va inserito all'interno della sezione "body" di un documento HTML.
- <b>Testo in grassetto</b>: questi due tag vengono usati per formattare il testo in grassetto. Il testo inserito fra i tag "<b>" e "</b>" verrà visualizzato in grassetto.
- <i>Testo in corsivo</i>: questi due tag vengono usati per formattare il testo in corsivo. Il testo inserito fra i tag "<i>" e "</i>" verrà visualizzato in corsivo.
- <a href="URL">testo del link</a>: questo tag viene utilizzato per creare un link esterno (cioè un collegamento a un altro sito) all'interno di una pagina web. Copia l'indirizzo della pagina web a cui dovrà puntare il link che stai creando e incollalo in sostituzione del parametro "URL" (senza eliminare le virgolette). Il testo che sarà visualizzato sotto forma di collegamento ipertestuale andrà invece inserito fra il tag "<a>" e il tag </a> in sostituzione del parametro "testo del link" (in questo caso, le virgolette non sono necessarie).
- <img src="URL immagine">: questo tag viene usato per inserire un'immagine all'interno di una pagina web usando il codice HTML. Sostituisci il parametro "URL immagine" con l'indirizzo dell'immagine da visualizzare.
9
Clicca sul menu File. È collocato nella parte superiore della finestra dell'editor Blocco note.
10
Clicca sulla voce Salva con nome. Verrà visualizzata una finestra che ti permetterà di salvare le modifiche eseguite al file.
- Se hai la necessità di sovrascrivere il file originale, conservandone il formato e il nome, scegli semplicemente l'opzione Salva del menu "File".
11
Seleziona il formato "Tutti i file". Usa il menu a discesa "Salva come" per selezionare la voce "Tutti i file".
12
Assegna un nome al file. Usa il campo di testo "Nome file" per inserire il nome che vuoi assegnare al nuovo file HTML.
13
Aggiungi l'estensione .html alla fine del nome del file. Alla fine del nome visualizzato nel campo "Nome file" aggiungi l'estensione ".html". Omettendo l'estensione indicata, il file verrà salvato come documento di testo e non come documento HTML.
14
Clicca sul pulsante Salva. Il file che hai modificato verrà salvato su disco.

Pubblicità

Metodo 2

Metodo 2 di 4:

Usare TextEdit su Mac

1
Clicca sull'icona a forma di lente di ingrandimento
. È collocata nell'angolo superiore destro dello schermo del Mac. Verrà visualizzata una barra di ricerca.
2
Digita la parola chiave TextEdit all'interno della barra di ricerca. Verrà visualizzato l'elenco dei risultati corrispondente ai criteri cercati.
3
Clicca sull'applicazione TextEdit.app. È visualizzata nella parte superiore dell'elenco dei risultati. È caratterizzata da un'icona raffigurante un foglio di carta e una penna stilizzati.
4
Clicca sull'opzione File. Sarà visibile sulla barra dei menu collocata nella parte superiore dello schermo, dopo che avrai avviato l'app TextEdit.
5
Clicca sulla voce Apri. Verrà visualizzata la finestra di sistema "Finder" che potrai usare per aprire i file memorizzati sul Mac.
6
Clicca sul file HTML che vuoi aprire, quindi clicca sul pulsante Apri. I file HTML sono contrassegnati dall'estensione ".html" visualizzata alla fine del nome del file. Usa la finestra di "Finder" per individuare il file HTML che vuoi modificare, quindi clicca sull'icona corrispondente per selezionarlo. A questo punto, clicca sul pulsante Apri per importare il file HTML all'interno della finestra di TextEdit.
7
Modifica il codice HTML. Per modificare il codice sorgente di una pagina web usando l'editor di testo Blocco note, dovrai imparare la sintassi del linguaggio HTML, in modo da poter apportare le modifiche correttamente. Di seguito è riportato un elenco dei tag più usati e che necessitano di essere modificati nelle situazioni più comuni.
- <!DOCTYPE html>: questo tag viene inserito all'inizio di ogni documento HTML. Il suo scopo è quello di indicare al browser internet che il file è un documento HTML.
- <html></html>: questi tag racchiudono all'interno l'intero codice HTML del documento. Il loro scopo è quello di indicare l'inizio e la fine del codice sorgente scritto in HTML.
- <head></head>: questa coppia di tag viene riportata all'inizio di un documento HTML. Il loro scopo è quello di indicare dove inizia e termina la sezione "head" di un documento HTML. All'interno di questa sezione del codice vengono inserite informazioni che non saranno poi visualizzate all'interno della pagina web risultante. Queste informazioni includono il titolo della pagina, i metadati e i fogli di stile CSS.
- <title>Titolo della Pagina</title>: questa coppia di tag serve per assegnare un titolo a una pagina web. Il titolo di una pagina web deve essere inserito nella sezione "head" di un documento HTML. Inserisci il titolo della tua pagina all'interno dei due tag indicati.
- <body></body>: questi due tag servono per indicare l'inizio e la fine della sezione "body" di un documento HTML. All'interno della sezione "body" va collocato l'intero contenuto che dovrà poi essere visualizzato all'interno di una pagina web. La sezione "body" va inserita nel documento dopo la sezione "head".
- <h1>Titolo del testo</h1>: questi due tag servono per creare un'intestazione di pagina. Il testo inserito tra i tag "<h1>" e "</h1>" apparirà in grassetto e avrà una dimensione superiore a quella del testo standard. Il contenuto testuale di una pagina web va inserito all'interno della sezione "body" di un documento HTML.
- <p>Testo di un paragrafo</p>: questi due tag vengono utilizzati per creare dei paragrafi di testo all'interno di un documento HTML. Il testo inserito fra i tag "<p>" e "</p>" avrà un aspetto standard. Il contenuto testuale di una pagina web va inserito all'interno della sezione "body" di un documento HTML.
- <b>Testo in grassetto</b>: questi due tag vengono usati per formattare il testo in grassetto. Il testo inserito fra i tag "<b>" e "</b>" verrà visualizzato in grassetto.
- <i>Testo in corsivo</i>: questi due tag vengono usati per formattare il testo in corsivo. Il testo inserito fra i tag "<i>" e "</i>" verrà visualizzato in corsivo.
- <a href="URL">testo del link</a>: questo tag viene utilizzato per creare un link esterno (cioè un collegamento a un altro sito) all'interno di una pagina web. Copia l'indirizzo della pagina web a cui dovrà puntare il link che stai creando e incollalo in sostituzione del parametro "URL" (senza eliminare le virgolette). Il testo che verrà visualizzato sotto forma di collegamento ipertestuale andrà invece inserito fra il tag "<a>" e il tag </a> in sostituzione del parametro "testo del link" (in questo caso, le virgolette non sono necessarie).
- <img src="URL immagine">: questo tag viene usato per inserire un'immagine all'interno di una pagina web usando il codice HTML. Sostituisci il parametro "URL immagine" con l'indirizzo dell'immagine da visualizzare.
8
Clicca sull'opzione File. È visibile sulla barra dei menu collocata nella parte superiore dello schermo del Mac.
9
Clicca sulla voce Salva. È una delle opzioni elencate nel menu a discesa "File". In questo modo, le modifiche che hai apportato al documento HTML verranno memorizzate.
- Se hai la necessità di cambiare il nome del file, clicca sull'opzione Rinomina del menu "File". A questo punto, digita il nuovo nome del file nella parte superiore dello schermo. Assicurati di includere l'estensione ".html" alla fine del nome.
Pubblicità

Metodo 3

Metodo 3 di 4:

Usare Dreamweaver

1
Avvia Dreamweaver. Dreamweaver è caratterizzato da un'icona quadrata verde nel cui centro sono visibili le lettere "Dw". Per avviare Dreamweaver, clicca sull'icona del programma visualizzata nel menu "Start" di Windows o nella cartella "Applicazioni" su Mac.
- Per poter utilizzare il prodotto Adobe Dreamweaver dovrai sottoscrivere un abbonamento a pagamento. Puoi scegliere uno dei piani di abbonamento che partono da un prezzo mensile di 24,39 €.
2
Clicca sul menu File. È visualizzato nella barra collocata nella parte superiore della finestra del programma.
3
Clicca sulla voce Apri. È una delle opzioni elencate nel menu "File".
4
Seleziona il documento HTML che vuoi modificare e clicca sul pulsante Apri. Usa la finestra apparsa per accedere alla cartella del computer in cui è presente il file HTML da modificare, quindi clicca sull'icona corrispondente per selezionarlo. A questo punto, clicca sul pulsante Apri posto nell'angolo inferiore destro della finestra.
5
Clicca sulla voce Dividi. È collocata all'interno del menu "Visualizza" del programma. In questo modo, la finestra verrà suddivisa in due parti. Nella parte superiore verrà visualizzata l'anteprima della pagina web che stai creando/modificando, mentre nella parte inferiore sarà presente il codice HTML della pagina stessa.^{[1]
X
Fonte di ricerca}
6
Modifica il codice sorgente HTML. Usa l'editor HTML di Dreamweaver per modificare il tuo codice HTML. Il modo con cui viene modificato il codice usando Dreamweaver è molto diverso da quello che si usa per eseguire la medesima operazione tramite l'editor Blocco note o TextEdit. In Dreamweaver, quando si digita un tag HTML, verrà visualizzato automaticamente un elenco di risultati in cui saranno visibili tutte le parole chiave che corrispondono al codice HTML inserito. Cliccando sul codice HTML di tuoi interesse, i tag di apertura e chiusura corrispondenti verranno inseriti automaticamente nel documento. Dreamweaver controlla automaticamente che all'interno del documento HTML siano presenti i tag di apertura e chiusura necessari per tutti gli elementi esistenti.
- In alternativa, puoi cliccare sul punto dell'editor HTML in cui vuoi inserire un determinato elemento, cliccare sul menu Inserisci collocato nella barra visualizzata nella parte superiore dello schermo e poi cliccare sull'elemento desiderato elencato nel menu a discesa apparso. L'elemento HTML che hai selezionato verrà inserito automaticamente nel codice sorgente della pagina in corrispondenza del punto scelto.
7
Clicca sul menu File. Quando hai completato la fase di modifica del documento HTML, clicca sul menu File collocato nella parte superiore dello schermo.
8
Clicca sull'opzione Salva. È una delle voci elencate nel menu a discesa File. Tutte le modifiche apportate al documento HTML verranno salvate su disco.

Pubblicità

Metodo 4

Metodo 4 di 4:

Usare Kompozer

1
Visita l'URL https://sourceforge.net/projects/kompozer/ usando il browser internet del computer. Puoi utilizzare un qualsiasi browser disponibile per Windows o Mac. Si tratta della pagina web da cui puoi scaricare il file di installazione di Kompozer. Si tratta di un editor HTML (WYSIWYG) gratuito disponibile sia per Windows sia per Mac.
2
Clicca sul pulsante Download. È di colore verde ed è collocato nella parte superiore della pagina. Verrai reindirizzato a una nuova pagina e, dopo 5 secondi di attesa, il download del file di installazione del programma verrà avviato automaticamente.
3
Fai doppio clic sul file di installazione. Per impostazione predefinita i file che scarichi dal web vengono memorizzati nella cartella "Download" sia su PC sia su Mac. In alternativa, puoi cliccare sul riquadro del file visibile all'interno della finestra del browser per avviare automaticamente la procedura di installazione di Kompozer. Segui queste istruzioni per installare Kompozer sul computer.
- Windows:
  - Se ti viene chiesto di autorizzare il programma di installazione di Kompozer, clicca sul pulsante Sì;
  - Clicca sul pulsante Next collocato sulla schermata di benvenuto;
  - Clicca sul radio pulsante "I accept the agreement", quindi clicca sul pulsante Next;
  - Clicca nuovamente sul pulsante Next per utilizzare la cartella di installazione predefinita. In alternativa, clicca sul pulsante Browse per scegliere una directory di installazione personalizzata;
  - Clicca sul pulsante Next presente nelle due schermate successive;
  - Clicca sul pulsante Install;
  - Clicca sul pulsante Finish.
- Mac:
  - Fai doppio clic sul file di installazione di Kompozer;
  - Clicca sull'icona KompoZer.app;
  - Clicca sul menu Apple collocato nell'angolo superiore sinistro dello schermo;
  - Clicca sull'opzione Preferenze di sistema;
  - Clicca sull'icona Sicurezza e Privacy;
  - Clicca sulla scheda Generale;
  - Clicca sul pulsante Consenti collocato nella parte inferiore della finestra;
  - Clicca sul pulsante Apri visibile nel pop-up apparso;
  - Trascina l'icona di Kompozer sul desktop;
  - Apri una finestra di Finder;
  - Clicca sulla cartella Applicazioni;
  - Trascina l'icona di Kompozer dal desktop all'interno della cartella "Applicazioni".
4
Avvia Kompozer. Segui queste istruzioni per avviare il programma su PC o su Mac.
- Windows:
  - Clicca sul pulsante Start di Windows;
  - Digita la parola chiave "Kompozer";
  - Fai doppio clic sull'icona Kompozer che apparirà nell'elenco dei risultati.
- Mac:
  - Clicca sull'icona a forma di lente di ingrandimento visibile nell'angolo superiore destro dello schermo;
  - Digita la parola chiave "Kompozer" all'interno della barra di ricerca;
  - Fai doppio clic sulla voce Kompozer.app.
5
Clicca sul menu File. È visualizzato sulla barra collocata nella parte superiore della finestra del programma.
6
Clicca sull'opzione Apri File. È la seconda voce del menu a discesa "File". Verrà visualizzata la finestra di sistema che ti permetterà di selezionare il file HTML da modificare con Kompozer.
7
Clicca sul file HTML e poi clicca sul pulsante Apri. Il file che hai scelto verrà importato all'interno del programma Kompozer.
8
Clicca sull'opzione Split. È la scheda visualizzata al centro della parte superiore della finestra del programma. In questo modo, la finestra verrà suddivisa in due parti. Nella parte superiore verrà visualizzato l'anteprima della pagina web che stai creando/modificando, mentre nella parte inferiore sarà presente il codice HTML della pagina stessa.
- Potresti dover ingrandire la finestra del programma per avere un maggiore spazio di lavoro a disposizione.
9
Modifica il file HTML. Il riquadro in cui è visualizzato il codice HTML è collocato nella parte inferiore della finestra e puoi usarlo per modificare il codice proprio come fai in Blocco note o TextEdit. In alternativa, puoi sfruttare il riquadro di anteprima per modificare il codice HTML in modo più diretto e veloce, seguendo queste istruzioni:
- Usa il menu a discesa collocato nell'angolo superiore destro della finestra per scegliere il tipo di testo da inserire (per esempio un'intestazione, un paragrafo, eccetera);
- Clicca sul tipo di elemento testuale che vuoi inserire nella pagina;
- Usa i pulsanti visualizzati nel pannello collocato nella parte superiore della finestra per modificare la formattazione del testo, per esempio inserire un testo in grassetto, in corsivo, cambiare l'allineamento, aggiungere un'indentazione o un elenco puntato;
- Clicca sull'icona quadrata colorata collocata nel pannello superiore della finestra per modificare il colore del testo;
- Clicca sull'icona Image visibile nella parte superiore dello schermo per inserire un'immagine all'interno del documento HTML;
- Clicca sull'icona raffigurante l'anello di una catena per inserire nel documento HTML un link ipertestuale.
10
Clicca sull'icona Save. Al termine del tuo lavoro di modifica, clicca sull'icona Save collocata nella parte superiore dello schermo. È caratterizzata da un piccolo disco floppy. In questo modo, tutte le modifiche che hai apportato al file HTML verranno memorizzate su disco.

Pubblicità

Avvertenze

Ricorda di salvare con regolarità tutti i file su cui stai lavorando per evitare di perdere le nuove modifiche nel momento in cui qualcosa non dovesse funzionare correttamente.