Come Creare una Semplice Pagina Web con HTML

In questo Articolo:Creare la Pagina WebSalvare e Visualizzare la Pagina WebRiferimenti

Questo articolo mostra come scrivere il codice HTML per creare una semplice pagina web contenente del testo. Dopo aver scritto il codice è possibile salvare il file sotto forma di documento HTML e visualizzare il risultato utilizzando un browser internet. Per creare una semplice pagina HTML è sufficiente utilizzare un editor di testo con funzionalità di base, come Blocco Note su sistemi Windows o TextEdit su Mac.

Parte 1
Creare la Pagina Web

  1. 1
    Avvia un editor di testo. Se stai usando un computer Windows, normalmente avrai a disposizione il programma Blocco Note, mentre se stai usando un Mac, dovrai utilizzare TextEdit:
  2. 2
    Imposta la struttura del codice HTML all'interno del documento. Digita il codice <!DOCTYPE html> e premi il tasto Invio. Adesso inserisci il tag <html> e premi nuovamente il tasto Invio. A questo punto aggiungi il tag <head> e premi Invio. L'intestazione del tuo documento HTML dovrebbe apparire come segue:[1]
    <!DOCTYPE html>
    <html>
    <head>
    
  3. 3
    Aggiungi il titolo che avrà la pagina web. Rappresenta la porzione di testo che verrà visualizzata all'interno della barra del titolo della scheda del browser quando aprirai la pagina (per esempio "Google" quando accedi alla pagina www.google.it). Inserisci il tag <title>, digita il titolo che desideri assegnare alla pagina, quindi aggiungi il tag di chiusura </title>. Adesso occorre inserire il tag di chiusura della sezione "Head", che è il seguente </head>. Fallo in una nuova riga di testo. La sezione di codice appena descritta dovrebbe apparire come segue:
    <title>La mia prima pagina web</title>
    </head>
    
  4. 4
    Crea la sezione relativa al corpo della pagina web. Per farlo, si usa il tag HTML <body>, che va inserito all'interno della sezione delimitata dai tag "Head". In questo modo sarai certo che il resto del testo che andrai ad aggiungere verrà considerato il contenuto della pagina stessa finché non digiterai il tag di chiusura della sezione "Body". Il codice che hai aggiunto dovrebbe essere il seguente:
    <body>
    
  5. 5
    Crea un'intestazione per la pagina web. Si tratta della porzione di testo che fungerà da titolo e che verrà visualizzata nella parte superiore della pagina. Per creare questa sezione si utilizza il tag <h1>, seguito dal testo che apparirà come intestazione della pagina, dopodiché occorrerà inserire il tag di chiusura </h1>. Ecco un codice di esempio:
    <h1>Benvenuto sul mio sito web!</h1>
    
  6. 6
    Aggiungi altre intestazioni per suddividere i contenuti che andrai a inserire in più sezioni. Utilizzando le coppie di tag HTML da <h1></h1> a <h6></h6> puoi definire fino a sei titoli. Per esempio, per creare tre intestazioni distinte in successione, puoi utilizzare il seguente codice:
    <h1>Benvenuto sul mio sito web!</h1>
    <h2>Il mio nome è Luca.</h2>
    <h3>Spero che la mia pagina ti piaccia.</h3>
    
  7. 7
    Crea un paragrafo. I paragrafi sono utilizzati per creare blocchi distinti di testo all'interno di una pagina web. Per inserire del testo in una pagina sotto forma di paragrafo si utilizzano i tag HTML <p> e </p>. Fra i due tag indicati va inserito il contenuto che dovrà apparire come paragrafo. Ecco un esempio pratico:
    <p>Questo è il mio primo paragrafo.</p>
    
    • È possibile creare una serie di paragrafi all'interno di una sezione della pagina riportandoli su un'unica riga.
  8. 8
    Cambia il colore del testo. È possibile modificare la colorazione di ogni singola porzione di testo utilizzando il seguente codice <font color="nome_colore"></font>. Il parametro "nome_colore" andrà sostituito con il nome o il codice esadecimale del colore che vuoi utilizzare. Ricordati di inserirlo all'interno delle virgolette. Per esempio, per cambiare il colore del testo presente in un paragrafo, dovrai utilizzare questo approccio:[2]
    <p><font color="blue">Le balene sono creature grandiose.</font></p>
    
    • Utilizzando il tag HTML "font" è possibile modificare la colorazione di qualunque contenuto testuale presente nella pagina (per esempio le intestazioni o il titolo).
    • Il codice HTML supporta una sorprendente gamma di colori diversi, quindi sentiti libero di provare a utilizzare diversi colori basandoti sui relativi nomi.
  9. 9
    Formatta il testo in grassetto, in corsivo o sottolineato. Puoi fare apparire il testo in grassetto, corsivo o sottolineato utilizzando rispettivamente i seguenti tag HTML: <b></b>, <i></i> e <u></u>. Puoi anche visualizzare del testo in pedice o in apice (per esempio quando si utilizzano espressioni matematiche come i radicali o le potenze o nelle formule chimiche):[3]
    <b>Testo in grassetto</b>
    <i>Testo in corsivo</i>
    <u>Testo sottolineato</u>
    <sub>Testo in pedice</sub>
    <sup>Testo in apice</sup>
    
  10. 10
    Inserisci un'immagine all'interno della pagina web che stai creando. Per farlo puoi utilizzare il tag HTML <img src="URL_immagine"></img>. In questo caso la foto scelta verrà inserita direttamente nella pagina. Per esempio, ipotizzando che l'URL del file da utilizzare sia "www.sitoweb.com/lago", il codice finale sarà il seguente:
    <img src="www.sitoweb.com/lago"></img>
    
  11. 11
    Crea un collegamento ipertestuale a un'altra pagina. Per inserire un link a un altro sito web occorre utilizzare il tag <a href="link">Testo del link</a>, dove il parametro link rappresenta l'URL del sito web di destinazione e la voce Testo del link rappresenta la porzione di testo che verrà visualizzata come collegamento ipertestuale. Per esempio, se hai la necessità di creare un link al sito di Facebook, dovrai utilizzare il seguente codice:[4]
    <a href="www.facebook.com">Questo è il link al sito web di Facebook.</a>
    
  12. 12
    Aggiungi i tag di chiusura della struttura della pagina web. Dato che in HTML quasi la totalità dei tag vengono utilizzati in coppia (uno di apertura e uno di chiusura), arrivato a questo punto occorre chiudere la sezione <body> e <html> che hai inserito nella parte iniziale della pagina aggiungendo i rispettivi tag di chiusura nella parte finale del documento:
    </body>
    </html>
    
  13. 13
    Controlla il codice della pagina e apporta le correzioni o le modifiche necessarie. Puoi aggiungere altri paragrafi, altre intestazioni e altri contenuti testuali, ma ricordati di farlo sempre all'interno dei tag HTML <body></body>. Ecco un esempio di codice HTML relativo a una pagina web completa:
    <!DOCTYPE html>
    <html>
    <head>
    <title>wikiHow Fan Page</title>
    </head>
    <body>
     
    <h1>Benvenuto sul mio sito web!</h1>
    <p>Questa è una fan page di wikiHow. Benvenuto!</p>
     
    <h2>Date da ricordare</h2>
    <p><i>15 Gennaio 2019</i> - Anniversario creazione wikiHow</p>
     
    <h2>Links</h2>
    <p>Ecco il link al sito web di wikiHow: <a href="www.wikihow.it">www.wikihow.it</a></p>
     
    </body>
    </html>
    
  14. 14
    Apporta tutti i ritocchi e le modiche finali. Se durante la revisione di ciò che hai creato fino a questo punto hai individuato degli errori nel codice HTML o nei contenuti, correggili prima di procedere oltre. Quando sei certo che il codice che hai scritto riflette esattamente ciò che ti aspetti, puoi proseguire nella lettura dell'articolo.

Parte 2
Salvare e Visualizzare la Pagina Web

  1. 1
    Converti il documento creato in un file di solo testo su Mac. Se stai utilizzando un Mac, accedi al menu Formato visibile nella parte superiore della pagina e scegli l'opzione Converti in formato Solo Testo dal menu a discesa apparso.
    • Questo passaggio non è necessario sui sistemi Windows.
  2. 2
    Apri la finestra di salvataggio. Dopo aver concluso la creazione del codice HTML della tua pagina web, dovrai salvarlo sotto forma di file premendo la combinazione di tasti Ctrl+S (su sistemi Windows) o Command+S (su Mac).
    • In alternativa accedi al menu File e scegli l'opzione Salva con nome. Questo passaggio funziona sia sui sistemi Windows sia su Mac.
  3. 3
    Digita il nome che vuoi assegnare al file HTML. Puoi utilizzare il nome che preferisci inserendolo all'interno del campo di testo "Nome file" (su Windows) o "Nome" (su Mac).
  4. 4
    Modifica il formato del documento. Per poter salvare correttamente il codice della tua pagina web, dovrai modificare il tipo di file da documento di testo (con estensione ".txt") a file HTML:
    • Sistemi Windows - accedi al menu a discesa "Salva come", scegli l'opzione Tutti i file e aggiungi l'estensione .html alla fine del nome del file.
    • Mac - sostituisci l'estensione .txt, visibile alla fine del nome del file con il suffisso .html.
  5. 5
    Premi il pulsante Salva. È posizionato nella parte inferiore destra della finestra di dialogo. In questo modo verrà creato il file HTML contenente il codice sorgente della tua pagina web.
    • Per impostazione predefinita di sistema, i file HTML vengono automaticamente aperti tramite un browser internet.
  6. 6
    Chiudi la finestra dell'editor di testo. A questo punto sei pronto per aprire il file HTML all'interno di un browser internet e visualizzare l'aspetto finale della tua pagina web.
  7. 7
    Apri il file HTML utilizzando un browser. Nella maggior parte dei casi dovrebbe essere sufficiente selezionare il file con un doppio clic del mouse. Se questo non dovesse sortire alcun effetto, segui queste istruzioni:
    • Sistemi Windows - seleziona il documento HTML con il tasto destro del mouse, scegli l'opzione Apri con e clicca il nome del browser internet che preferisci dall'elenco apparso.
    • Mac – seleziona il file con un singolo clic del mouse, accedi al menu File, scegli l'opzione Apri con, e clicca il nome del browser che preferisci.
  8. 8
    Modifica il file HTML se necessario. Se visualizzando l'aspetto finale della tua pagina web mediante il browser hai notato degli errori, puoi correggerli modificando direttamente il codice sorgente presente nel documento:
    • Se stai usando un computer Windows, seleziona il file HTML con il tasto destro del mouse e scegli l'opzione Modifica dal menu contestuale apparso (se hai installato il programma Notepad++, dovrai selezionare la voce Modifica con Notepad++).
    • Se stai usando un Mac, seleziona il documento HTML con un singolo clic del mouse, accedi al menu File, scegli al voce Apri con e infine seleziona l'opzione TextEdit. In alternativa puoi trascinare l'icona del documento all'interno della finestra del programma TextEdit.

Consigli

  • Per allineare un'immagine al centro di una pagina web, puoi inserire all'interno del tag img il seguente codice HTML <class="center"> esattamente dopo il nome del file. Per esempio <img src="URL_Immagine" class="center">.
  • Per aggiungere un testo scorrevole al tuo sito web puoi utilizzare il tag HTML <marquee></marquee>. Tuttavia è bene precisare che tale elemento potrebbe non essere interpretato correttamente da tutti i browser internet.
  • Molti utenti, per scrivere e compilare il proprio codice, utilizzano l'editor Notepad++.
  • I tag HTML che prevedono un tag di chiusura dovrebbero sempre essere chiusi rispettando la sequenza inversa con cui appaiono all'interno del codice. Per esempio i tag <tag1><tag2> dovrebbero essere chiusi in questo modo </tag2></tag1>.

Avvertenze

  • Se intendi utilizzare delle immagini all'interno del tuo sito web, l'opzione migliore consiste nel caricarle su un servizio di hosting come Imgur o similare. Ricorda che utilizzare le immagini create da altri utenti senza avere le necessarie autorizzazioni può rappresentare una violazione delle leggi sul copyright.

Informazioni sull'Articolo

wikiHow è una "wiki"; questo significa che molti dei nostri articoli sono il risultato della collaborazione di più autori. Per creare questo articolo, 220 persone, alcune in forma anonima, hanno collaborato apportando nel tempo delle modifiche per migliorarlo.

Categorie: Programmazione | Internet

In altre lingue:

English: Create a Simple Web Page with HTML, Português: Criar uma Página Simples da Web com HTML, Español: hacer una página web en HTML, Français: créer sa première page Web en langage HTML, Deutsch: Eine einfache Webseite mit HTML gestalten, Nederlands: Een simpele webpagina maken met HTML, Русский: создать простую веб страницу с помощью HTML, 中文: 用HTML创建一个简单网页, Bahasa Indonesia: Membuat Halaman Web Sederhana Dengan HTML, ไทย: เขียนเว็บเพจง่ายๆ ด้วย HTML, 한국어: HTML로 간단한 웹페이지 만들기, العربية: إنشاء صفحة ويب بسيطة باستخدام لغة اتش تي ام ال, Tiếng Việt: Tạo một trang web đơn giản với HTML, 日本語: 単純なウェブページをHTMLで作成する, हिन्दी: HTML का इस्तेमाल करके एक वेब पेज तैयार करें (Create a Simple Web Page with HTML), Türkçe: HTML ile Basit Bir Web Sayfası Nasıl Oluşturulur

Questa pagina è stata letta 57 305 volte.
Hai trovato utile questo articolo?