Come Creare una Semplice Pagina Web con HTML

Scritto in collaborazione con: Lo Staff di wikiHow

Questo articolo spiega come creare una semplice pagina web utilizzando il codice HTML (dall'inglese HyperText Markup Language). L'HTML è uno dei componenti fondamentali di quello che conosciamo come World Wide Web ed è alla base della struttura di tutte le pagine web. Dopo aver creato la struttura di una pagina web, puoi salvarla in formato HTML e visualizzarla utilizzando un browser internet. Per creare una pagina HTML, è sufficiente usare un normale editor di testo integrato in tutti i sistemi operativi Windows e in tutti i Mac.

Parte 1 di 5:
Aggiungere la Sezione Head al Codice HTML

  1. 1
    Avvia l'editor di testo che hai scelto di utilizzare. Se lavori su un computer sul quale è installato il sistema operativo Windows, normalmente userai Notepad o Notepad++, mentre se lavori su un Mac utilizzerai l'editor TextEdit:
  2. 2
    Digita il codice <!DOCTYPE html> e premi il tasto Invio della tastiera. Questa porzione di codice serve per comunicare al browser internet che si tratta di un documento HTML.
  3. 3
    Aggiungi il tag <html> e premi il tasto Invio. In questo modo apri il tag HTML della tua pagina web.
  4. 4
    Digita il codice <head> e premi il tasto Invio. Questo tag serve a indicare l'inizio della sezione "head" del tuo documento HTML. Normalmente, le informazioni contenute in questa sezione non vengono visualizzate dal browser internet che interpreterà il codice. Le informazioni inserite in questa sezione includono il titolo, i meta dati, i fogli di stile CSS da usare e altri linguaggi usati per creare gli script. [1]
  5. 5
    Digita il tag <title>. Questo tag viene usato per assegnare un titolo alla pagina web.
  6. 6
    A questo punto inserisci il testo che verrà visualizzato come titolo della pagina. Puoi utilizzare qualsiasi frase o parola.
  7. 7
    Dopo aver inserito il titolo della pagina, aggiungi il tag </title> e premi il tasto Invio. Si tratta del tag di chiusura della sezione del documento riservata al titolo della pagina web.
  8. 8
    Digita il tag </head> e premi il tasto Invio. Questo è il tag di chiusura della sezione "head". A questo punto, il contenuto del tuo documento HTML dovrebbe essere simile al seguente.
    <!DOCTYPE html>
    <html>
    <head>
    <title>La mia pagina web</title>
    </head>
    
    Pubblicità

Parte 2 di 5:
Aggiungere la Sezione Body e il Contenuto al Codice HTML

  1. 1
    Digita il codice <body> sotto al tag di chiusura della sezione "Head". Il nuovo tag indica l'inizio del corpo principale vero e proprio della pagina HTML. Tutto quello che inserirai all'interno della sezione "body" verrà visualizzato dal browser sulla tua pagina web.
  2. 2
    Digita il codice <h1>. Questo tag serve per formattare una porzione di testo in base a determinate caratteristiche. In questo caso specifico, viene indicato al browser che la sezione seguente è un'intestazione di primo livello. Normalmente, un'intestazione di questo tipo è visualizzata nella parte superiore di una pagina web e appare in grassetto con una dimensione dei caratteri superiore al normale.
  3. 3
    Digita il testo che diventerà l'intestazione della tua pagina web. Si tratta del titolo dell'argomento che verrà trattato o del messaggio di benvenuto che vuoi riservare ai tuoi visitatori.
  4. 4
    Inserisci il tag </h1> dopo aver digitato il testo, quindi premi il tasto Invio. In questo modo, la sezione riservata all'intestazione della pagina verrà chiusa.
    • Aggiungi altre intestazioni in base alle tue esigenze. Puoi formattare il testo di una pagina web utilizzando sei stili di intestazione differenti indicati dai tag da <h1></h1> fino a <h6></h6>. Il testo verrà formattato utilizzando diverse dimensioni dei caratteri. Per esempio puoi creare tre sezioni di testo distinte, ciascuna con contenuto specifico che verrà formattato in modo diverso, utilizzando il seguente codice:
      <h1>Benvenuto sulla mia pagina web!</h1>
      <h2>Il mio nome è Tizio.</h2>
      <h3>Spero che il mio lavoro ti piaccia.</h3>
      
  5. 5
    Inserisci il tag <p>. Si tratta del tag per creare un paragrafo. I paragrafi in HTML vengono utilizzati per visualizzare del testo formattato in modo normale.
  6. 6
    Inserisci il contenuto che desideri. Può essere una breve descrizione della pagina web che stai creando o qualsiasi altro tipo di informazione relativa al sito o che vuoi condividere con il mondo.
  7. 7
    Dopo aver inserito il testo scelto, aggiungi il tag </p> e premi il tasto Invio. In questo modo, indicherai al browser che il paragrafo è completo. Il codice che segue è un esempio che descrive come creare un paragrafo di testo in HTML:
    <p>Questo è un paragrafo.</p>
    
    • All'interno di una singola intestazione puoi inserire più linee di testo, sotto forma di paragrafo, racchiudendole all'interno dei tag indicati.
    • Puoi modificare il colore dei caratteri di qualsiasi sezione racchiudendo il testo corrispondente all'interno dei tag <font color="colore"> e </font> e specificando il colore da usare con il parametro "color". Assicurati di sostituire il valore "colore" con il nome o il codice del colore che vuoi utilizzare (non dimenticare di racchiuderlo fra virgolette). Puoi modificare il colore del testo di ogni sezione (per esempio un'intestazione o un paragrafo) utilizzando la coppia di tag indicata. Per esempio, per visualizzare in blu il testo di un paragrafo dovrai utilizzare il seguente codice: <p><font color="blue">Le balene sono creature maestose.</font></p>
    • Puoi formattare il testo in grassetto, corsivo o usando altri stili utilizzando il codice HTML. Di seguito troverai alcuni esempi con cui formattare il testo di una pagina web utilizzando i tag HTML:[2]
      <b>Testo in grassetto</b>
      <i>Testo in corsivo</i>
      <u>Testo sottolineato</u>
      <sub>Testo formattato come pedice</sub>
      <sup>Testo formattato come apice</sup>
      
    Pubblicità

Parte 3 di 5:
Aggiungere Elementi Addizionali al Codice HTML

  1. 1
    Inserisci un'immagine all'interno della pagina. Seguendo queste istruzioni puoi pubblicare una foto sulla tua pagina web:
    • Digita il codice <img src= nel punto della pagina in cui vuoi che venga visualizzata l'immagine. Si tratta del tag di apertura.
    • Copia l'URL completo dell'immagine e incollalo dopo il segno di uguale ("=") del tag "img".
    • A questo punto, digita il simbolo > dopo l'URL dell'immagine per chiudere correttamente il tag "img". Per esempio, se l'indirizzo della foto da inserire nella pagina è "http://www.mypicture.com/lake", il codice HTML da usare sarà il seguente:
      <img src="http://www.mypicture.com/lake.jpg">
      
  2. 2
    Inserisci il link a un'altra pagina. Puoi creare un collegamento ipertestuale all'interno della tua pagina web seguendo queste istruzioni:
    • Digita il codice <a href=. Si tratta del tag HTML per la creazione di un link.
    • Copia l'URL a cui farà riferimento il collegamento ipertestuale che stai creando e incollalo dopo il segno di uguale ("=") del parametro "href".
    • A questo punto, digita il simbolo > dopo l'indirizzo del link per chiudere correttamente il tag "a".
    • Digita il testo del link che verrà visualizzato all'interno della pagina web. Inseriscilo dopo la parentesi angolare di chiusura del tag "a".
    • Aggiungi il tag </a> dopo aver digitato il testo del link per completare il codice HTML del collegamento ipertestuale.[3] Il codice di esempio riportato di seguito serve per creare un link al sito web di Facebook.
      <a href="https://www.facebook.com">Facebook</a>.
      
  3. 3
    Aggiungi un'interruzione di riga all'interno della pagina utilizzando l'apposito tag HTML. Per eseguire questo passaggio occorre utilizzare il codice <br>. In questo modo verrà inserita nella pagina una linea di testo vuota che servirà come divisore fra due sezioni distinte del contenuto.
    Pubblicità

Parte 4 di 5:
Completare il Codice HTML

  1. 1
    Inserisci il tag </body> per chiudere correttamente la sezione "body" del documento. Dopo che avrai terminato di aggiungere i contenuti che devono essere visualizzati all'interno della tua pagina web (testo, immagini, link ad altri siti, eccetera), digita il tag indicato alla fine del codice HTML esistente per chiudere la sezione "body" della tua pagina.
  2. 2
    Aggiungi il tag </html> per chiudere la sezione "html" del documento. Inserisci il tag "/html" sotto al tag "/body" per indicare al browser che il documento HTML è completo e che il codice da esaminare è terminato. Al termine di questo passaggio, il codice HTML della tua pagina web di prova dovrebbe essere simile al seguente:
    <!DOCTYPE html>
    <html>
    <head>
    <title>wikiHow Fan Page</title>
    </head>
    <body>
    <h1>Benvenuto sulla mia pagina web!</h1>
    <p>Questa è una fan page del sito web di wikiHow. Buon divertimento</p>
    <h2>Date importanti:</h2>
    <p><i>15 Gennaio 2019</i> - Anniversario della creazione di wikiHow</p>
    <h2>Link:</h2>
    <p>Questo è il link al sito di wikiHow: <a href="http://www.wikihow.it">wikiHow</a></p>
    </body>
    </html>
    
    Pubblicità

Parte 5 di 5:
Salvare il Codice HTML e Visualizzare la Pagina Web Corrispondente

  1. 1
    Converti il codice che hai creato in un file di semplice testo (solo per utenti che usano un Mac). Clicca sul menu Formato nella parte superiore della schermo, quindi clicca sulla voce Converti in formato solo testo elencata nel menu a discesa apparso.

    Questo passaggio non è necessario se stai utilizzando un sistema Windows.

  2. 2
    Clicca sul menu File. È situato all'interno della barra visibile nella parte superiore dello schermo.
  3. 3
    Clicca sull'opzione Salva con nome. È una delle voci elencate nel menu a discesa "File".
    • In alternativa, puoi premere la combinazione di tasti Ctrl+S (su Windows) o Command+S (su Mac).
  4. 4
    Digita il nome che vuoi assegnare al file HTML. Puoi usare il nome che preferisci inserendolo nel capo di testo "Nome file" (su Windows) o "Nome" (su Mac).
  5. 5
    Modifica il formato del file di salvataggio. In questo caso, hai la necessità di convertire il formato da file di testo a file HTML. Segui queste istruzioni:
    • Windows – clicca sul menu a discesa "Salva come" e clicca sull'opzione Tutti i file, quindi aggiungi l'estensione .html alla fine del nome che hai assegnato al file.
    • Mac – sostituisci l'estensione .txt visibile alla fine del nome del file con la nuova estensione .html.
  6. 6
    Clicca sul pulsante Salva. È collocato nella parte inferiore della pagina. Il codice della tua pagina web verrà salvato all'interno di un file HTML.
    • Normalmente i file HTML vengono aperti utilizzando il browser internet predefinito del sistema.
  7. 7
    Chiudi la finestra dell'editor di testo. A questo punto, sei pronto per visualizzare il risultato dei tuoi sforzi aprendo il file HTML che hai creato all'interno della finestra di un browser. In questo modo, la pagina web che hai composto dovrebbe apparire a video.
  8. 8
    Apri il file HTML con il browser internet che preferisci. Nella maggior parte dei casi dovrai semplicemente fare doppio clic sull'icona del file HTML. Se eseguendo questo passaggio viene visualizzato un messaggio di errore, segui queste istruzioni:
    • Windows – seleziona il file HTML con il tasto destro del mouse, scegli l'opzione Apri con dal menu contestuale che apparirà, quindi clicca sull'icona del browser che vuoi usare.
    • Mac – clicca sull'icona del file HTML una sola volta, clicca sul menu File, seleziona la voce Apri con, quindi clicca sull'icona del browser che vuoi usare.
  9. 9
    Modifica il codice HTML se necessario. Se hai notato che sono presenti degli errori all'interno della tua pagina web, devi correggerli modificando il codice presente all'interno del file HTML. Segui queste istruzioni per apportare le modifiche necessarie:
    • Windows – seleziona l'icona del file HTML premendo il tasto destro del mouse, quindi clicca sulla voce Modifica presente nel menu contestuale apparso (se hai installato l'editor Notepad++ sul computer, dovrai cliccare sull'opzione Modifica con Notepad++).
    • Mac – clicca sull'icona del file HTML per selezionarlo, clicca sul menu File, scegli l'opzione Apri con, quindi clicca sulla voce TextEdit. In alternativa, puoi trascinare il file HTML all'interno della finestra del programma TextEdit.
    Pubblicità

Consigli

  • Se vuoi che una sezione del tuo sito web contenga del testo scorrevole, devi utilizzare il tag HTML <marquee></marquee>. È bene precisare che non tutti i browser disponibili riconoscono ed eseguono questo tipo di tag.
  • Molte persone che si cimentano con l'HTML usano l'editor di testo Notepad++ per creare e compilare il proprio codice.
  • I tag HTML annidati vanno sempre chiusi rispettando l'ordine inverso con cui sono stati aperti. Per esempio i tag <tag1><tag2> vanno chiusi nel seguente modo </tag2></tag1>.
  • Se hai la necessità di centrare un'immagine all'interno di una pagina, puoi usare questo codice <class="center"> da inserire dopo il nome del file indicato dal parametro tag img (per esempio <img src="URL immagine" class="center">).
Pubblicità

Avvertenze

  • Se intendi pubblicare delle immagini o delle foto sul tuo sito web, è meglio conservarle su un servizio di hosting online come Imgur. Ricorda che pubblicare le immagini di proprietà di altre persone senza avere il loro esplicito consenso è una violazione delle norme sul copyright.
Pubblicità

Informazioni su questo wikiHow

Scritto in collaborazione con:
Redazione di wikiHow
Questo articolo è stato scritto in collaborazione con il nostro team di editor e ricercatori esperti che ne hanno approvato accuratezza ed esaustività.
Categorie: Programmazione | Internet

Hai trovato utile questo articolo?

No
Pubblicità