Guida di HTML (base)

La prima pagina web

È arrivato il momento di creare la prima pagina web. L'obbiettivo è quello di creare un file con estensione .html, che chiameremo pagina.html, e scriverci dentro del testo a piacere.

Alla fine la pagina potrà essere aperta con un qualsiasi browser web, come ad esempio Mozilla.

Cosa serve

In questo piccolo corso faremo uso di pochi e semplici strumenti:

  • Un editor di testo. L'editor di testo sarà il programma con cui scriveremo il codice HTML. È importante scegliere un editor di testo puro, ovvero che consenta di lavorare sui "nudi" files ASCII, senza aggiungere informazioni di formattazione.

    Su Linux gli editor più gettonati sono Gedit (predefinito per Gnome), Kate o KWrite (predefiniti per KDE), e sono sempre inclusi nel sistema base:

    Gli utenti Windows possono affidarsi al famoso Blocco note o, qualora desiderassero strumenti simili a quelli per Linux, installare un editor più avanzato, come Notepad++. Attenzione però: Windows di default nasconde le estensioni dei files; maggiori informazioni sulla guida ufficiale. Gli utenti Mac possono usare Textedit, avendo l'accortezza di lavorare in formato testo (Mela+Maiuscolo+T).

  • Un browser web; servirà ad aprire i files .html che andremo a creare. La maggior parte dei sistemi operativi include un browser predefinito; per Linux questo è generalmente Mozilla Firefox, mentre per Windows e Mac i browser predefiniti sono rispettivamente Microsoft Internet Explorer e Safari.

La prima pagina web

Per iniziare a scrivere la prima pagina web, apri l'editor di testo, e copia il codice mostrato in figura, di cui spiegheremo il significato nel prossimo paragrafo (non è necessario rispettare gli spazi all'inizio delle righe):

Prima pagina HTML

Salviamo quindi il documento in una cartella qualsiasi (anche se, per ordine, è bene creare una cartella apposta dedicata agli esperimenti con HTML), avendo l'accortezza di aggiungere l'estensione .html, come mostrato in figura:

Salvare la pagina con Gedit

Con alcuni editor potrebbe capitare che, al momento del salvataggio, alcune parole assumano colori diversi (come si vede nelle figure sottostanti): niente paura, significa che l'editor si è accorto che stiamo lavorando su un documento HTML e, automaticamente, evidenzia la sintassi del documento, per agevolare il lavoro. I più attenti, infatti, si saranno accorti che le parole colorate diversamente sono proprio i tag HTML.

Ora la pagina può essere aperta: spostiamoci nella cartella in cui l'abbiamo salvata e apriamola col nostro browser preferito (nel mio caso è Mozilla). Tipicamente è sufficiente un doppio clic sul file:

Aprire la pagina con Mozilla

Se tutto è stato svolto correttamente, il browser visualizzerà una semplice pagina web, avente come titolo (sul bordo superiore della finestra) "Questo è un titolo!", e come contenuto "Questo è il contenuto!".

Se, in futuro, vorremo modificare la pagina, sarà sufficiente aprire lo stesso file pagina.html con l'editor, anzichè con Firefox; questo può essere fatto in diversi modi:

  • Cliccando col tasto destro sul file, ed utilizzando il menu "Apri con"
  • Utilizzando la funzione "Apri" dell'editor.

Struttura di una pagina web

Passiamo ora ad analizzare la struttura della pagina che abbiamo appena creato. Possiamo osservare che essa è composta dai seguenti elementi:

Analisi della pagina creata

  • All'inizio e alla fine del documento si trovano i tag <html> e </html> (in verde). Essi indicano al browser che tutto ciò che è compreso tra essi è una pagina web.

    All'interno del tag html ci sono due sezioni: head e body.

  • La sezione head, delimitata dai tag <head> e </head>, è l'intestazione del documento. L'intestazione serve a contenere tutte quelle informazioni che non sono visualizzate nella pagina vera e propria, ma sono utilizzate dal browser per visualizzare correttamente la pagina, e dai motori di ricerca per capirne il contenuto.

    Nell'esempio, l'intestazione contiene il titolo della pagina, identificato dai tag <title> e </title>.

  • La sezione body, delimitata dai tag <body> e </body> è il corpo del documento, ovvero ciò che viene propriamente visualizzato nella finestra del browser: testo, immagini, tabelle, link, e tutti gli altri elementi che studieremo in questo corso.

In breve...

In questo capitolo abbiamo visto che:

  • Una pagina web è un normale file di testo, con estensione .html, ed è scritta in linguaggio HTML
  • Per scrivere una pagina web occorre procurarsi:
    • Un editor di testo puro, come ad esempio Gedit o Kate, per Linux, o Blocco note per Windows.
    • Un browser web, come ad esempio Mozilla Firefox, per visualizzare le pagine.
  • Il contenuto di una pagina web deve essere racchiuso entro i tag <html> e </html>.
  • Tutte le pagine web sono divise in due grandi sezioni:
    • head: è l'intestazione del documento, ed è delimitata dai tag <head> e </head>. Contiene informazioni generali, come ad esempio il titolo della pagina (<title> ... </title>)
    • body: è il corpo del documento, ed è delimitato dai tag <body> e </body>. Contiene il contenuto vero e proprio della pagina.
  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag