Come creare una pagina HTML

Se non sai come creare una pagina HTML puoi leggere questo articolo che, pur non pretendendo di essere esaustivo, può essere un buon punto di partenza per imparare almeno a scrivere il codice di base per una pagina HTML.

Non pretendo di farti diventare uno sviluppatore ma, chissà, quando vedrai che l'HTML non è così difficile come sembra, potrebbe venirti voglia di approfondire l'argomento e magari raggiungere ottimi livelli imparando anche Javascript, jQuery, PHP, SQL e tutto quello che è necessario sapere per diventare sviluppatori web!

Però lo scopo principale di questo articolo è di permettere a chiunque di fare piccole modifiche al codice HTML in un sito già esistente oppure di creare/modificare la "firma" nel programma di posta elettronica e tante altre cose.

L'HTML si è evoluto nel corso degli anni. Nuovi comandi sono stati aggiunti nel tempo mentre altri sono diventati obsoleti. Quindi è pressoché impossibile spiegare il funzionamento di tutte le diverse versioni senza confondere il principiante.
Ecco perché, in questo articolo, farò esempi in HTML4 e HTML5, senza distinzione, con l'unico scopo di fornire un'infarinatura di base sui comandi supportati dalla maggior parte dei browser moderni, senza la pretesa di costruire l'ennesima Bibbia sull'argomento, perché in Internet se ne trovano a migliaia.

Sommario

In questo articolo:

• Cos'è l'HTML?
• Prerequisiti
• Cosa occorre per creare una pagina HTML?
• Cosa c'è in un documento HTML?
• La struttura di un documento HTML
• La tua prima pagina HTML
• Conclusioni

Cos'è l'HTML?

HTML è l'acronimo per HyperText Markup Language, cioè un "linguaggio" sviluppato per creare gli ipertesti che sono la base di tutte le pagine Web.

Detto in parole semplici, l'HTML è un sistema di codici che permettono di formattare i testi e le immagini visualizzati in un browser (ipertesti), con la possibilità d'inserire dei collegamenti ad altri testi tramite link.

Per esempio, questo è un link alla pagina di WikiPedia in cui è spiegato il termine "ipertesto". Cliccandolo sarai automaticamente "trasportato" sulla pagina in una nuova finestra (o tab) del tuo browser.

Prerequisiti

Per comprendere questo articolo devi almeno:

• Saper eseguire e utilizzare il programma del Blocco Note di Windows (o un qualsiasi editor di testi "puri", cioè "non formattati").
• Essere in grado di creare, aprire e salvare un file di testo con estensione .html.
• Utilizzare un browser qualsiasi (ma se stai leggendo questo articolo sicuramente sai utilizzare un browser ).
• Utilizzare gli Appunti di Windows (Clipboard) e i comandi Copia/Taglia/Incolla (CTRL+C/CTRL+X/CTRL+V)

Cosa occorre per creare una pagina HTML?

In realtà non serve molto: bastano il Blocco Note di Windows e un browser (Internet Explorer, Firefox, Chrome, ecc...) per visualizzare il risultato.

Però esistono molti programmi che agevolano la creazione del codice HTML, con interfaccia WYSIWYG (What You See Is What You Get = Quello che vedi è quello che ottieni) e che ci permettono di modificare la pagina senza preoccuparci del codice (come se scrivessimo un documento Word) e che poi generano il codice necessario per ottenere quello che abbiamo "disegnato" e "scritto" sullo schermo.

Ma il nostro scopo è quello d'imparare l'HTML quindi eviteremo di utilizzare questi programmi "speciali", sforzandoci di scrivere il codice "a mano" per assorbirne meglio i concetti essenziali.

Se vuoi, però, puoi rendere il tuo lavoro più agevole installando un programma gratuito che ti permette di visualizzare il codice HTML in modo più chiaro rispetto al Blocco Note. Questo programma è Notepad++.

Scegli tu se installarlo (te lo consiglio vivamente) o se lavorare col Blocco Note di Windows (o qualsiasi altro editor di testi) sapendo che gli esempi che pubblicherò saranno creati con Notepad++.

Per farti capire al volo la differenza ti mostro lo stesso file visualizzato nei due programmi:

Come puoi notare, Notepad++ evidenzia la sintassi con i colori, indica il numero di linea e ci fa vedere graficamente la struttura a blocchi del codice, migliorandone la leggibilità. Inoltre ha tante altre funzioni utili nella programmazione.

Cosa c'è in un documento HTML?

Un documento HTML è composto da testi e marcatori (che chiameremo tag).
I tag sono delimitati dai simboli "minore di" e "maggiore di", anche detti "parentesi angolari", cioè i simboli < e >, cioè i comandi veri e propri che ci permettono di creare il nostro ipertesto.

Di solito i tag hanno un'apertura e una chiusura (stesso tag dell'apertura preceduto dal simbolo /) agli estremi del testo che vogliamo formattare, cioè appaiono quasi sempre in questo formato: <tag>testo</tag>

Ho scritto "quasi sempre" perché esistono dei tag che non necessitano di chiusura come, per esempio, il tag <hr />.

Per chiarire questo concetto, se io volessi far apparire la parola "HTML" in grassetto, dovrei digitare il seguente codice: <b>HTML</b> dove <b> è il tag per attivare, appunto, il grassetto (bold).
Ed ecco il risultato: HTML.

La struttura di un documento HTML

Un documento HTML segue una struttura precisa e deve sempre contenere almeno questi tag:

Esempio 1a

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>
  

Vediamo a cosa servono:

• <!DOCTYPE html>: questo è un tag "singolo" (che non necessita di tag di chiusura) e serve a indicare un documento HTML e opzionalmente gli standard HTML a cui si riferisce.
• <html> e </html>: questi tag delimitano il documento HTML.
• <head> e </head>: identificano la sezione "header" (intestazione) del documento. Quello che viene scritto in questa sezione non appare sulla pagina ma contiene istruzioni "nascoste" per il browser e per i motori di ricerca. Questa sezione dev'essere inserita subito dopo il tag <html>.
• <body> e </body>: delimitano i contenuti che saranno visualizzati all'interno della pagina. Il body (corpo) dev'essere inserito subito dopo la sezione <head> e </head>.

La tua prima pagina HTML

Cominciamo finalmente con un po' di pratica e creiamo una prima, semplicissima pagina HTML.

Apri il tuo editor (Notepad++, Blocco Note, o qualsiasi altro) e crea un nuovo documento di testo contenente la struttura HTML di base scritta qui sopra (Esempio 1a) e salvalo come esempio1.html. Puoi utilizzare il Copia-Incolla per copiare il codice oppure digitarlo a mano.

N.B.: gli spazi inseriti prima dei tag servono soltanto ad allinearli "gerarchicamente", a blocchi, in modo da avere il tag di chiusura sempre in linea verticale con quello di apertura e facilitare così la lettura del documento.
Se vuoi, puoi anche non inserirli ma ti consiglio di farlo perché, se in questo momento è facile leggere il codice, quando scriveremo documenti più complessi sarà più complicato e una corretta "indentazione" sarà di grande aiuto.

Questo è il risultato su Notepad++:

Ora inseriamo, all'interno della sezione <head>, la sezione <title> che permette d'indicare il titolo della pagina che apparirà nel browser, in posizioni diverse a seconda di quale browser stai utilizzando (nella barra titolo della finestra oppure nel nome del tab, ecc...):

Esempio 1b

...
<head>
  <title>Esempio 1</title>
</head>  
...
  

Ecco cosa devi ottenere su Notepad++:

Fin qui, a parte il title, non abbiamo ancora creato un documento che produca un risultato visibile su un browser. Direi quindi che è ora di cominciare a scrivere qualcosa nel body e di visualizzarlo nel browser.

All'interno della sezione body, inserisci queste linee:

Esempio 1c

...
<body>
  <h1>Titolo della pagina</h1>
  <h2>Paragrafo 1</h2>
  <p>Testo paragrafo 1</p>	
  <h2>Paragrafo 2</h2>
  <p>Testo paragrafo 2</p>	
</body>   
...
  

I tag <h1> e <h2> fanno parte dei sei tag (<h1>, <h2>, <h3>, <h4>, <h5> e <h6>) utilizzati per di formattazione dei titoli.
Essi attribuiscono al testo una grandezza e quindi un'importanza diversa, dove <h1> è il più importante e <h6> il meno importante.

All'interno di una pagina ci può esserci un solo tag <h1>, mentre gli altri possono essere utilizzati più volte all'interno della stessa pagina.

I tag <p> e </p> delimitano un paragrafo.

Ecco come deve apparire il codice completo in Notepad++:

Ora salva il tuo file esempio1.html e aprilo con il browser (dovrebbe essere sufficiente un doppio-click sul file oppure "File/Apri..." nel tuo browser).
Dovresti vedere una pagina simile a questa:

Se vuoi puoi scaricare sul tuo computer il file (già compilato) dell'Esempio 1 appena visto cliccando qui.
Se invece vuoi vederlo subito in azione nel tuo browser clicca qui.

Esercizio: prova a modificare il codice in modo da includere altri paragrafi e prova a utilizzare gli altri tag da <h3> a <h6>, per vedere come agiscono.
Ricordati che dopo ogni modifica del file .html devi ricaricare la pagina nel browser (premi il tasto F5) per vederne gli effetti.

Conclusioni

Lo scopo di questo articolo era principalmente quello di condurti "per mano" nel mondo dell'HTML per farti vedere che non è affatto complicato come si potrebbe pensare e invogliarti ad approfondire l'argomento tramite i tanti corsi o videocorsi (anche gratuiti) che si trovano su Internet oppure attraverso i libri.

Se ho stimolato la tua curiosità, tanto da invogliarti a creare il file di esempio sopra citato e a modificarlo per conto tuo, allora ho sicuramente raggiungo il mio obiettivo.

Potresti essere interessato a leggere anche l'altro mio articolo Codici colore HTML+CSS.

Vuoi un libro sull'HTML?

Grazie per avermi letto fin qui!

Fabio Donna