Come Creare una Semplice Pagina Web con HTML

Questo articolo spiega come creare una pagina web utilizzando il codice HTML (acronimo di "HyperText Markup Language"). Il linguaggio HTML è uno dei componenti basilari del World Wide Web che permette di definire la struttura e l'aspetto delle pagine web. Dopo aver creato il codice di una pagina web, dovrai salvare il file in formato HTML per poter visualizzare il frutto del tuo lavoro all'interno di un comune browser internet. È possibile creare una pagina HTML utilizzando un qualsiasi editor di testo disponibile per sistemi Windows e Mac.

Parte 1

Parte 1 di 6:

Creare la Sezione Head del Documento HTML

Scarica PDF

1
Avvia un editor di testo. Se stai usando un computer dotato di sistema operativo, puoi utilizzare l'editor "Blocco Note" o "Notepad++" mentre gli utenti Mac possono usare il programma "TextEdit":
- Windows – accedi al menu Start cliccando sull'icona
  , digita le parole chiave blocco note o notepad++, quindi clicca sull'icona dell'app Blocco Note o "Notepad++" che appariranno nella parte superiore dell'elenco dei risultati della ricerca.
- macOS – clicca sull'icona Spotlight
  , digita la parola chiave textedit, quindi fai doppio clic sull'app TextEdit apparsa nella parte superiore dell'elenco dei risultati.
In questo modo comunicherai al browser che il file in oggetto è un documento HTML.^{[1]XFonte di ricerca}
Questo tag serve per creare la sezione HTML del codice sorgente.
Si tratta del tag che serve per creare la sezione "head" del codice HTML. Normalmente all'interno di questa sezione vengono inserite informazioni che non vengono visualizzate direttamente all'interno della pagina. Per esempio il titolo, i meta dati, i fogli di stile CSS o il codice di altri linguaggi di scripting.^{[2]XFonte di ricerca}
Questo tag ha lo scopo di assegnare un titolo alla pagina web.
Puoi scegliere il titolo che preferisci. Si tratta del testo che verrà poi visualizzato come nome della scheda del browser in cui verrà caricata la pagina web.
In questo modo chiuderai la sezione dedicata al titolo della pagina.
8
Inserisci il tag di chiusura </head> e premi il tasto Invio. Questo è il tag di chiusura della sezione "head" del codice. A questo punto il codice HTML della tua pagina web dovrebbe avere il seguente aspetto:
```
<!DOCTYPE html><html><head><title>La mia pagina web</title></head>
```
Pubblicità

Parte 2

Parte 2 di 6:

Creare la Sezione Body e Aggiungere il Contenuto al Documento HTML

Scarica PDF

Si tratta del tag di apertura della sezione "body" del documento HTML. Tutto il contenuto che verrà inserito all'interno di questa sezione del codice verrà visualizzato dal browser internet all'interno della pagina web.
Si tratta del codice HTML che serve per formattare il testo come intestazione o titolo all'interno di una pagina web. In questo modo il testo verrà visualizzato dal browser con una dimensione maggiore rispetto al testo normale ed evidenziato in grassetto. Normalmente questa sezione del testo viene collocata nella parte superiore della pagina web come intestazione.
Può anche trattarsi di un messaggio di benvenuto per tutti gli utenti che visiteranno la pagina.
4
Aggiungi il tag di chiusura </h1> dopo aver inserito il testo del titolo o dell'intestazione, quindi premi il tasto Invio. Questo tag serve per indicare la fine della dichiarazione della sezione "h1".
- A questo punto puoi creare altri sottotitoli o altre intestazioni secondarie, in base alle tue necessità. In totale hai a disposizione sei stili diversi di intestazioni che puoi creare utilizzando le coppie di tag che vanno da <h1></h1> fino a <h6></h6>. Il testo verrà formattato in modo diverso in base allo stile di intestazione che deciderai di usare. Per esempio, per creare tre intestazioni diverse in successione, dovrai usare il seguente codice:
  <h1>Benvenuto sulla mia pagina web!</h1><h2>Il mio nome è Bob.</h2><h3>Spero che la pagina ti piaccia.</h3>
- Le intestazioni servono per caratterizzare visivamente la priorità o l'importanza delle diverse sezioni di testo della pagina, in modo che siano facilmente assimilabili dall'utente. Tuttavia, non è necessario utilizzare un'intestazione di primo livello (per esempio "h1"), se preferisci usarne una meno appariscente (per esempio "h5"). Per esempio, puoi scegliere di creare un'intestazione o un titolo di tipo "h3", anche se nella pagina non è presente alcuna intestazione "h1".
Questo tag serve per creare un paragrafo di testo. I paragrafi in HTML vengono utilizzati per visualizzare il testo con una dimensione normale.
Potrebbe essere la descrizione della pagina web o qualsiasi tipo di informazione che vuoi comunicare all'utente finale.
7
Aggiungi il tag </p> dopo aver inserito il testo del paragrafo e premi il tasto Invio. Si tratta del tag di chiusura della sezione di testo relativa al paragrafo che hai creato in precedenza. Di seguito trovi un esempio dell'uso dei paragrafi in HTML:
```
<p>Questo è un paragrafo.</p>
```
- Puoi creare paragrafi multipli all'interno della medesima sezione della pagina.
- Puoi modificare il colore di qualsiasi porzione del testo racchiudendola all'interno del tag HTML <font color="[colore]"> e </font>. Assicurati di sostituire il parametro "[colore]" con il colore che vuoi assegnare al testo (ricordati di conservare le virgolette). Puoi personalizzare qualsiasi sezione del testo (per esempio le intestazioni) con diversi colori utilizzando la coppia di tag indicata. Per esempio, per creare un paragrafo di testo blu dovrai utilizzare il seguente codice HTML: <p><font color="blue">Le balene sono creature maestose.</font></p>
- Formatta il testo in grassetto, corsivo o con altri stili utilizzando i tag HTML corrispondenti. Di seguito trovi alcuni esempio di come è possibile formattare il testo usando semplicemente il codice HTML:^{[3]XFonte di ricerca}
  <b>Testo in grassetto</b><i>Testo in corsivo</i><u>Testo sottolineato</u><sub>Pedice</sub><sup>Apice</sup>
- Se vuoi usare lo stile grassetto o corsivo per dare maggiore enfasi e importanza al testo e non solo per una questione stilistica, opta per utilizzare i tag <strong> e <em> anziché i tag <b> e <i>. In questo modo la pagina risulterà più comprensibile per l'utente finale quando si utilizzano strumenti come gli screen reader^{[4]XFonte di ricerca} o la modalità "lettura" di alcuni browser.^{[5]XFonte di ricerca}
Pubblicità

Parte 3

Parte 3 di 6:

Inserire Elementi Aggiuntivi nel Codice HTML

Scarica PDF

1
Inserisci un'immagine all'interno della pagina web. Puoi inserire un'immagine all'interno di un documento HTML seguendo queste istruzioni:
- Digita il codice <img src= per creare il tag di apertura della sezione della pagina in cui verrà visualizzata l'immagine che sceglierai.
- Copia l'URL dell'immagine e incollalo dopo il segno "=" riportandolo fra virgolette.
- Aggiungi il simbolo > dopo l'URL dell'immagine che hai scelto per chiudere il tag "img". Per esempio, se l'URL dell'immagine che hai scelto fosse "http://www.miefoto.com/lago", dovresti utilizzare il seguente codice HTML:
  <img src="http://www.miefoto.com/lago.jpg">
2
Crea un link a un'altra pagina. All'interno di una pagina web, puoi creare un collegamento ipertestuale a un altro sito seguendo queste istruzioni:
- Digita il codice <a href= per aprire il tag di creazione del link.
- Copia l'URL della pagina a cui farà riferimento il link e incollalo dopo il segno "=" riportandolo fra virgolette.
- Aggiungi il simbolo > dopo aver inserito l'URL per chiudere il tag HTML del link.
- Dopo aver inserito la parentesi angolare di chiusura, aggiungi il testo che verrà visualizzato dal browser come link ipertestuale.
- A questo punto aggiungi il tag di chiusura </a> dopo aver inserito il testo che fungerà da collegamento ipertestuale per chiudere la sezione del codice HTML relativa al link.^{[6]XFonte di ricerca} Per esempio, se vuoi creare un link al sito web di Facebook, dovrai usare il seguente codice:
  <a href="https://www.facebook.com">Facebook</a>.
Puoi creare un'interruzione di riga usando il tag HTML <br>. Verrà visualizzata una linea orizzontale vuota che puoi usare per dividere visivamente due sezioni di testo della pagina.
Pubblicità

Parte 4

Parte 4 di 6:

Personalizzare i Colori

Scarica PDF

Il "World Wide Web Consortium" (W3C) gestisce l'elenco ufficiale dei colori disponibili in HTML. La lista è consultabile a questo indirizzo: https://www.w3.org/wiki/CSS/Properties/color/keywords. Ogni colore è codificato tramite un nome ufficiale e un codice esadecimale di 6 cifre, unitamente a un codice decimale. Puoi utilizzare uno qualsiasi di questi codici identificativi per impostare il colore di un elemento della tua pagina web. Per esempio, puoi utilizzare il nome ufficiale dei colori presenti.
2
Imposta il colore dello sfondo della pagina web specificandolo all'interno del tag <body>. Puoi eseguire questa operazione utilizzando l'attributo style all'interno del tag "body". Ipotizza di voler impostare come sfondo dell'intera pagina il colore lavanda usando il nome lavender. Il codice che dovrai utilizzare sarà il seguente:
- <body style="background-color:lavender;">
3
Imposta il colore del testo di un tag qualsiasi. Puoi utilizzare l'attributo style in abbinamento a qualsiasi tag per specificare il colore del testo corrispondente. Per esempio, ipotizza di dover modificare il colore di un paragrafo della tua pagina web usando la colorazione midnightblue. Dovrai modificare il tag <p> corrispondente nel seguente modo:
- <p style="color:midnightblue;">
- La modifica al colore del testo avrà effetto solo sul contenuto del tag <p> specifico. Se inserisci nella pagina un secondo paragrafo dopo quello in oggetto e desideri che il testo abbia la medesima colorazione midnightblue, dovrai specificarlo all'interno del tag <p> corrispondente usando l'attributo style.
4
Imposta il colore dello sfondo di un'intestazione o di un paragrafo. In modo simile a come hai impostato il colore dello sfondo della sezione "body" della pagina, puoi anche modificare il colore dello sfondo di altre sezioni. Per esempio, se vuoi cambiare il colore dello sfondo di un paragrafo usando la colorazione lightgrey e impostare il colore dello sfondo di una sezione "h1" con la colorazione lightskyblue, dovrai usare il seguente codice:
- <p style="background-color:lightgrey;">
- <h1 style="background-color:lightskyblue;">
Pubblicità

Parte 5

Parte 5 di 6:

Completare il Codice HTML della Pagina

Scarica PDF

Dopo che hai terminato di inserire il contenuto che dovrà essere visualizzato nella pagina (testo, immagini, link e tutti gli altri elementi) dovrai inserire il tag di chiusura della sezione "body" del codice HTML alla fine di tutto il codice che hai creato fino ad ora.

Step 2 Digita il tag </html> per chiudere la sezione "html" del codice sorgente della pagina.

Aggiungi questo tag dopo il tag di chiusura della sezione "body" del codice. In questo modo indicherai al browser internet che il codice HTML è finito. A questo punto il tuo documento HTML dovrebbe avere il seguente aspetto:

<!DOCTYPE html><html><head><title>How.com.vn Fan Page</title></head><body><h1>Benvenuto sulla mia pagina.</h1><p>Questa è una fan page di How.com.vn. Sei libero di sentirti come a casa tua.</p><h2>Date importanti</h2><p><i>15 Gennaio 2020</i> - Anniversario della fondazione di How.com.vn</p><h2>Link</h2><p>Link al sito web di How.com.vn: <a href="http://www.wikihow.com">How.com.vn</a></p></body></html>

Parte 6

Parte 6 di 6:

Salvare il Documento HTML e Visualizzare la Pagina Web all'Interno di un Browser

Scarica PDF

1
Converti il documento in un file di semplice testo (solo per utenti Mac). Clicca sul menu Formato collocato nella parte superiore dello schermo, quindi clicca sull'opzione Converti in formato solo testo visibile nel menu a discesa apparso.
- Questo passaggio non è necessario se stai utilizzando un computer Windows.
È collocato nella parte superiore dello schermo.
3
Clicca sulla voce Salva con nome. È una delle opzioni elencate nel menu a discesa "File".
- In alternativa, puoi premere la combinazione di tasti Ctrl+S (su Windows) o ⌘ Command+S (su Mac).
Puoi utilizzare il nome che preferisci digitandolo all'interno del campo di testo "Nome file" (in Windows) o "Nome" (su Mac).
5
Modifica il formato del file. A questo punto hai la necessità di cambiare il formato del documento passando da un file di testo a un file HTML. Segui queste istruzioni per eseguire la modifica:
- Windows – clicca sul menu a discesa "Salva come" e clicca sulla voce Tutti i file. A questo punto aggiungi l'estensione .html alla fine del nome del file che hai scelto.
- Mac – sostituisci l'estensione .txt visibile alla fine del nome del file con l'estensione .html.
6
Clicca sul pulsante Salva. È collocato nella parte inferiore destra della finestra di dialogo. In questo modo il codice sorgente della pagina verrà memorizzato sul computer sotto forma di file HTML.
- I file HTML, per impostazione predefinita, vengono aperti utilizzando un browser internet.
A questo punto sei pronto per visualizzare a video il frutto del tuo duro lavoro e dei tuoi sforzi usando il browser internet che preferisci.
8
Apri il file HTML che hai appena creato all'interno del browser internet del computer. Nella maggior parte dei casi dovrai semplicemente fare doppio clic sull'icona del file HTML. Se eseguendo questo passaggio dovesse apparire un messaggio di errore, segui queste istruzioni:
- Windows – clicca sull'icona del file con il tasto destro del mouse, seleziona l'opzione Apri con e clicca sul nome del browser che vuoi usare.
- Mac – clicca una sola volta sull'icona del file HTML, clicca sul menu File, seleziona la voce Apri con, quindi clicca sul nome del browser che vuoi utilizzare.
9
Se necessario, modifica il codice sorgente del file HTML. Visualizzando la pagina web che hai creato potresti notare la presenza di alcuni errori. Per eseguire le modifiche necessarie, dovrai modificare il contenuto del file HTML della pagina seguendo queste istruzioni:
- Windows – clicca sull'icona del file HTML con il tasto destro del mouse, quindi scegli l'opzione Modifica dal menu contestuale che apparirà (se vuoi usare il programma Notepad++ dovrai selezionare la voce Modifica con Notepad++).
- Mac – clicca una sola volta sull'icona del file HTML per selezionarlo, clicca sul menu File, scegli l'opzione Apri con, quindi clicca sull'opzione TextEdit. In alternativa, puoi trascinare l'icona del file HTML all'interno della finestra del programma TextEdit.
Pubblicità

Consigli

Quasi tutti i tag sono composti da due elementi, uno di apertura e uno di chiusura, e devono sempre rispettare questa struttura. Per esempio, i seguenti ipotetici tag di apertura <tag1><tag2> dovrebbero essere accoppiati ai rispettivi tag di chiusura rispettando l'ordine inverso in cui sono stati utilizzati. Nell'esempio i tag in esame devono essere chiusi nel seguente modo: </tag2></tag1>.
Utilizzando il tag <marquee></marquee> puoi creare una sezione di testo scorrevole. Ricorda però che questo tag non è supportato correttamente da tutti i browser internet disponibili.
Molti utenti usano Notepad++ per comporre e compilare il loro codice sorgente.
Se hai la necessità di allineare al centro della pagina un'immagine, puoi utilizzare il seguente codice <class="center"> da inserire dopo il nome del file o dopo l'URL dell'immagine all'interno del tag img (per esempio <img src="URL" class="center">).

Avvertenze

Se hai la necessità di pubblicare sul tuo sito web delle immagini, è meglio avvalerti di servizi di hosting come Imgur o simili dove caricare e memorizzare preventivamente i file corrispondenti. Ricorda che pubblicare o usare le immagini di altre persone sul proprio sito web potrebbe infrangere le leggi sul copyright in vigore nel Paese in cui vivi.