Il mio sito VOLUME 1 - Andrea Vaccari CREARE UN SITO WEB PARTENDO DA ZERO - Altervista

Andrea Vaccari

         Il mio sito

CREARE UN SITO WEB PARTENDO DA ZERO

             VOLUME 1

        I linguaggi HTML e CSS
         e il Design Responsivo

              Informatica

Andrea Vaccari: “Il mio sito – Creare un sito web partendo da zero.
Volume I – I linguaggi HTML e CSS e il Design Responsivo”

Copyright © 2019 di Andrea Vaccari
Tutti i diritti riservati

Pubblicato su Amazon Publishing il 08 maggio 2019
ISBN: 9781796637236

Grafica in copertina di Andrea Vaccari

Contatti:
andreavaccari.altervista.org
a.vaccari@gmail.com
@andreavaccarilibri

I file dei progetti presentati nel libro sono disponibili all’indirizzo:
http://andreavaccari.altervista.org/ilmiosito

Contenuto

Prefazione..................................................................................9
Introduzione ............................................................................11
1. Una semplice pagina.............................................................13
  La progettazione ...................................................................13
     Obiettivi didattici ...............................................................13
     Le specifiche di prodotto ....................................................14
     Le specifiche funzionali, operative e tecniche .......................16
     Le specifiche funzionali.......................................................17
     Le specifiche operative.......................................................18
     Le specifiche tecniche ........................................................19
     La documentazione tecnica.................................................19
     L’organizzazione di un progetto ..........................................20
     Il linguaggio HTML.............................................................20
     Il W3C..............................................................................21
  La realizzazione ....................................................................22
     I file di testo .....................................................................22
     La cartella dei progetti .......................................................23
     Il file delle specifiche..........................................................24
     Il file del codice .................................................................25
     Visualizzare la pagina.........................................................25
     Il linguaggio HTML.............................................................25
     I commenti .......................................................................26
     Gli elementi ......................................................................27
     Gli elementi primari ...........................................................28
     La formattazione del codice................................................30
     Spazi e tabulazioni.............................................................32
     Il titolo della pagina ...........................................................33
     Il corpo della pagina ..........................................................34
     I testi casuali ....................................................................34
     I caporiga .........................................................................36
     Intestazioni e piè di pagina.................................................37
     Titoli e paragrafi ................................................................40
     La struttura degli elementi .................................................41
     Struttura a blocco e in linea................................................43
     Gli attributi .......................................................................43
     La lingua...........................................................................44
     La codifica dei caratteri ......................................................44
     I metadati.........................................................................44

Le parole chiave ............................................................... 45
     La descrizione della pagina ................................................ 45
     L’autore della pagina......................................................... 45
     Le entità .......................................................................... 46
2. La formattazione dei contenuti.............................................. 48
  La progettazione .................................................................. 48
     Obiettivi didattici............................................................... 48
     Le specifiche funzionali...................................................... 49
     Le specifiche tecniche........................................................ 49
  La realizzazione.................................................................... 52
     La cartella del progetto...................................................... 52
     Il file del codice................................................................. 52
     Il linguaggio CSS .............................................................. 52
     L’attributo 'style'............................................................... 53
     La sezione 'body' .............................................................. 53
     I colori ............................................................................. 55
     Il margine esterno ............................................................ 56
     Le altre sezioni ................................................................. 57
     L’elemento “style’ ............................................................. 58
     I selettori ......................................................................... 58
     I selettori di tipo ............................................................... 59
     I commenti ...................................................................... 59
     Priorità degli stili ............................................................... 60
     Il margine interno............................................................. 61
     L’elemento 'link'................................................................ 62
     Fruibilità degli stili............................................................. 63
     I selettori di classe............................................................ 63
     I tre livelli degli stili........................................................... 65
     I colori del testo e dello sfondo........................................... 66
     I caratteri......................................................................... 67
     I selettori di elemento ....................................................... 69
     L’altezza degli elementi ..................................................... 70
     L’allineamento del testo..................................................... 70
     I margini.......................................................................... 71
     Togliere i bordi ................................................................. 72
     La struttura degli elementi................................................. 72
3. La navigazione fra i contenuti ............................................... 73
  La progettazione .................................................................. 73
     Obiettivi didattici............................................................... 73
     Le specifiche funzionali...................................................... 74
     Le specifiche operative ...................................................... 75
     Le specifiche tecniche........................................................ 75
  La realizzazione.................................................................... 77
     Il progetto e le specifiche................................................... 77
     Il file del codice................................................................. 77
     I titoli dei paragrafi ........................................................... 77

La larghezza della pagina ...................................................78
      I contenuti principali ..........................................................79
      I contenuti secondari .........................................................80
      La struttura fluida..............................................................82
      Il margine interno..............................................................83
      I colori..............................................................................83
      Il box-model .....................................................................84
      Il selettore universale ........................................................86
      Il box-model modificato .....................................................86
      I motori di rendering..........................................................89
      Il menu di navigazione.......................................................90
      I selettori composti............................................................92
      La griglia fluida..................................................................93
      Selettori di pseudo-elemento..............................................94
      I contenitori ......................................................................94
      I collegamenti ...................................................................96
      I selettori di pseudo-classe.................................................97
      Allineamento dei contenuti .................................................98
      Intestazione e piè di pagina estesi ......................................99
      Altezza estesa ................................................................. 101
      Intestazione fissa ............................................................ 103
      La griglia fluida................................................................ 104
      Le altre pagine ................................................................ 110
4. Il design responsivo............................................................ 111
  La progettazione ................................................................. 111
      Obiettivi didattici ............................................................. 111
      Le specifiche funzionali..................................................... 113
      Le specifiche tecniche ...................................................... 113
  La realizzazione .................................................................. 115
      Il progetto e le specifiche ................................................. 115
      La struttura fluida............................................................ 115
      La larghezza proporzionale ............................................... 116
      I margini proporzionali..................................................... 117
      La sillabazione................................................................. 118
      Visualizzazione condizionale ............................................. 119
      Le soglie di visualizzazione ............................................... 121
      Spostare il menu ............................................................. 122
      La viewport..................................................................... 123
      La stampa....................................................................... 124
      Test della risoluzione ....................................................... 125
5. Le altre pagine ................................................................... 127
  La progettazione ................................................................. 127
      Obiettivi didattici ............................................................. 127
      Le specifiche funzionali..................................................... 128
      Le specifiche tecniche ...................................................... 129
  La realizzazione .................................................................. 131

Il progetto e le specifiche..................................................131
     Le pagina delle foto..........................................................131
     La pagina del blog............................................................135
     La pagina delle info..........................................................137
     I selettori di attributo .......................................................139
     La struttura flessibile........................................................144
     I contenitori flessibili ........................................................144
     Gli elementi flessibili ........................................................145
     La larghezza dei contenuti ................................................147
     L’impostazione della larghezza ..........................................149
     Posizionare il menu..........................................................151
     Il posizionamento dei contenuti.........................................152
     Le foto ............................................................................152
     L’allineamento del piè di pagina ........................................153
     La pagina delle info..........................................................154
6. Conclusione........................................................................157
     Le tabelle ........................................................................157
     Formattazione del testo....................................................160
     Elementi non supportati ...................................................161
     Pubblicare il sito ..............................................................162
Appendici ...............................................................................163
  Linguaggio HTML.................................................................164
     Elementi in ordine alfabetico.............................................164
     Sottotipi di elementi.........................................................167
     Elementi raggruppati per ambito.......................................169
     Elementi supportati da tutti i browser ................................173
     Attributi globali................................................................174
  Linguaggio CSS...................................................................175
     Selettori..........................................................................175
     Selettori di pseudo-elemento ............................................176
     Selettori di pseudo-classe.................................................176
     Proprietà supportate da tutti i browser...............................178
     Proprietà in ordine alfabetico ............................................180

Prefazione

    Questo libro tratta della creazione di un sito web partendo da zero e
senza l’ausilio dei CMS1, strumenti sempre più utilizzati anche dalle
aziende, per la semplicità e la velocità con cui rendono possibile la
realizzazione di un sito anche complesso, senza utilizzare la program-
mazione web, la cui conoscenza può comunque sempre tornare uti-
le, per personalizzare le pagine create da queste piattaforme.
    Quindi anche chi decide di usare uno di questi strumenti, può
trarre beneficio dei concetti trattati in questo libro, in cui si spiega-
no le basi generiche della programmazione e di quella web in parti-
colare, partendo dalle nozioni più semplici. L’unico requisito per ca-
pire quanto spiegato e metterne in pratica l’insegnamento, è la capa-
cità di svolgere le operazioni più elementari su un computer, come
creare, modificare, eliminare file e cartelle, scrivere un comune do-
cumento di testo e utilizzare un qualsiasi web browser2.
    Il libro spiega in modo semplice, sistematico e sequenziale i concetti
base per la creazione di un sito, secondo i principi fondamentali del-
la programmazione, che distinguono un programmatore improvvi-
sato, che scrive i listati in modo istintivo, da chi compila ogni riga di
codice3 con cognizione di causa, e secondo una logica formale, che è
di basilare importanza per la creazione di un software manutenibile
e ampliabile con una certa facilità.

1   CMS è l’acronimo di Content Management System (‘Sistema di Gestione dei Con-
    tenuti’), cioè una piattaforma con cui è possibile creare un sito in poco tempo, di
    cui alcune delle più conosciute sono WordPress, Joomla e Drupal.
2   Il web browser (o browser web, o anche più semplicemente browser) è un program-
    ma che permette di visualizzare le pagine web, come può essere Google Chrome,
    Mozilla Firefox, Internet Explorer, Safari e Opera.
3   Il codice (o codice sorgente,o sorgente, o listato) è un testo in linguaggio informatico,
    composto da istruzioni, che una volta elaborate, danno luogo a un documento di-
    verso da quello di origine, come nel caso delle pagine web.

Il mio sito - 10

     Nella programmazione web, la propria creatività può essere e-
spressa nel design e nell’impaginazione di un sito, la cui struttura è pe-
rò necessario, che venga costruita con la massima cura e conformità
alle linee guida della programmazione, che garantiscono una miglio-
re leggibilità del codice e facilitano una visualizzazione più omoge-
nea del sito sulle varie versioni dei browser, la cui diversità nella re-
sa grafica dei contenuti costituisce uno dei problemi più sentiti nel
mondo web. I browser non sono infatti ancora in grado di visualizza-
re le pagine tutti allo stesso modo, benché recentemente si siano fat-
ti enormi progressi rispetto a qualche anno fa.
     Un evento che negli ultimi anni ha aumentato ulteriormente la
complessità di realizzazione di pagine web a resa grafica omogenea,
è il fatto che la navigazione su internet si è diffusa anche sui nuovi
dispositivi portatili, come tablet e smartphone, il cui schermo ha una
ampiezza decisamente inferiore di quella di un desktop1. Chi realiz-
za un sito web, deve quindi pianificare e verificare la corretta visua-
lizzazione delle pagine che costruisce anche su questi dispositivi.
     In questo libro cerchiamo quindi di porre particolare attenzione
a questi due aspetti, che costituiscono i punti più delicati nella cre-
azione di un sito web e di cui durante la progettazione e lo svilup-
po bisogna sempre tener conto, controllando di volta in volta la resa
grafica dei contenuti su browser diversi e su dispositivi con schermi
con risoluzione grafica diversa.
     Questa problematica potrebbe scoraggiare chi inizia a cimentar-
si con la programmazione web, ma in realtà esistono accorgimenti
che aiutano a far fronte alle difficoltà che ne derivano, oltre alla va-
sta documentazione esistente in internet su questi argomenti. Se inol-
tre si inizia fin da subito a fare attenzione all’aspetto della compati-
bilità, si riesce in breve tempo a constatare che buona parte del codi-
ce può essere scritto con la quasi totale certezza dell’omogeneità di vi-
sualizzazione delle proprie pagine su browser e dispositivi diversi.

1   Con desktop (‘piano della scrivania’) si intende il tradizionale personal computer
    da ufficio o da casa, che un tempo trovava normalmente alloggio sul piano della
    scrivania.

Introduzione

     Questo volume tratta dei linguaggi HTML1 e CSS2, che costitui-
scono le basi per la costruzione delle pagine web. In questi linguag-
gi vengono infatti costruite anche le pagine create dai CMS, e chi u-
tilizza questi strumenti per la creazione dei propri siti e vuole capi-
re cosa ci sia scritto nelle pagine che queste piattaforme creano e co-
me possa apporvi eventuali modifiche che queste non gli consento-
no di fare, deve conoscere almeno le basi di questi due linguaggi.
     Qualche tempo fa le pagine web erano scritte soltanto in HTML,
che era pensato come linguaggio di formattazione e impaginazione
dei documenti. Con l’HTML era possibile dare una struttura alle pagi-
ne e renderne graficamente i contenuti, con le limitazioni che questo
strumento aveva nelle sue prime versioni. Successivamente è stato
introdotto il linguaggio CSS, per la resa grafica dei contenuti, in mo-
do da separare questa dalla strutturazione del documento, che resta
invece la funzione principale del linguaggio HTML. Quindi uno dei
compiti di chi si accinge a creare un sito web, è quello di porre atten-
zione al suo utilizzo essenzialmente per la strutturazione delle pagi-
ne, riservandone la realizzazione della resa grafica al linguaggio CSS,
che è stato creato appositamente per questo.
     Come vedremo nel libro, il linguaggio CSS può essere integrato
nel codice HTML, oppure essere scritto in file separati, in modo da
rendere la struttura dei listati più modulare e meglio leggibile. La
modularità della struttura di un software, cioè la suddivisione del
codice in parti funzionalmente separate, è un fattore che incide in
modo sostanziale sui tempi di sviluppo3 e manutenzione, perché ne

1 HTML è l’acronimo per Hypertext Markup Language (‘Linguaggio di Marcatura per
  Ipertesti’).
2 CSS è l’acronimo per Cascading Style Sheets (‘Fogli di Stile a Cascata’).
3 Lo sviluppo è la realizzazione di un software e lo sviluppatore è chi lo realizza, cioè

  il programmatore.

Il mio sito - 12

facilita la lettura da parte di chi ci lavora, soprattutto nel caso che non
sia sempre la stessa persona, come accade nelle aziende di medie e
grandi dimensioni, nelle quali alla realizzazione di un software pren-
de parte un’intera squadra di progettisti e programmatori.
     Oltre che sui linguaggi HTML e CSS, il libro si focalizza in parti-
colar modo sul design responsivo, un termine che indica un modo di
strutturare le pagine web, per poter essere visualizzate al meglio su
schermi di grandezza e risoluzione diversa dei dispositivi coi quali è
oggi possibile navigare su internet, come desktop, notebook, tablet e
smartphone. Nel libro si spiegano i due metodi oggi più utilizzati per
realizzare una struttura della pagina che si adatti alla larghezza del-
la finestra del browser, che sono la struttura fluida e la struttura fles-
sibile, che sta lentamente soppiantando la prima. La struttura fluida
è stata ideata utilizzando risorse che facevano già parte dei linguag-
gi HTML e CSS prima dell’avvento di tablet e smartphone nel mon-
do del web, e che non erano pertanto state pensate a questo scopo.
Per questo è abbastanza complessa e difficile da utilizzare, ma ciò
nonostante è ancora quella più diffusa, perché più compatibile con
le versioni più datate di alcuni browser. La struttura flessibile inve-
ce dovrebbe rappresentare il futuro nella realizzazione delle pagine
web, è più facile da utilizzare, ma è compatibile soltanto con le più
recenti versioni dei browser, che peraltro sono quelle più utilizzate.

1. Una semplice pagina

LA PROGETTAZIONE

Obiettivi didattici

    In questo libro cercheremo di spiegare i principi della progetta-
zione e realizzazione di un sito web, tramite la realizzazione di pro-
getti concreti, tesi a conseguire precisi obiettivi didattici, che verran-
no definiti ed elencati per ogni progetto. Gli obiettivi di questo pri-
mo capitolo sono i seguenti:

  Obiettivi didattici

  Progetto 001 (Una semplice pagina)

   Studio delle specifiche di prodotto (funzionali, operative e tecni-
     che) e della documentazione tecnica del progetto.
   Organizzazione del progetto.
   Creazione di una semplice pagina col linguaggio HTML.
   Introduzione al linguaggio HTML (commenti, elementi, attribu-
     ti, metadati, entità) e alle sezioni delle pagine.

Il mio sito - 14

Le specifiche di prodotto

     Come per ogni altro tipo di software, la prima cosa da fare, per
iniziare a creare un sito web, è quella di realizzare le specifiche di pro-
dotto, un documento in cui viene descritta l’idea del progetto, cioè co-
sa si vuole realizzare. Questa è la fase più importante del processo di
produzione di un software, perché ne rappresenta le fondamenta, lo
stampo su cui viene realizzata l’intera opera, e le vanno dedicate tut-
ta l’attenzione e la cura possibili. Fare delle buone specifiche di pro-
dotto, significa realizzare già una buona parte del software ed è inol-
tre essenziale per definire gli obiettivi del progetto, che inizialmen-
te non sono sempre ben chiari e che soltanto col tempo, parlandone e
scrivendoli, prendono lentamente forma e si concretizzino in un pen-
siero lineare e meglio strutturabile. Se dobbiamo realizzare un sito
per un cliente, dovremo dedicare molti incontri alla comprensione e
alla stesura su carta di quali siano veramente le sue esigenze, che po-
trebbero inizialmente non essere del tutto chiare neanche a lui. Scri-
vendo le specifiche di prodotto, può persino succedere di rendersi
conto che non abbia alcun senso realizzare un certo progetto, facen-
doci così risparmiare tempo e fatica.
     In questo primo capitolo cercheremo di sottolineare il più pos-
sibile l’importanza di questa prima fase della realizzazione del soft-
ware, che a un programmatore novizio potrebbe sembrare esagera-
ta, ma che in realtà è fondamentale che venga recepita e assimilata
bene, perché da essa dipende la qualità del software e il suo tempo
di realizzazione.
     La pratica di analizzare bene e scrivere su carta una certa idea,
prima di approntarsi alla sua realizzazione, non è soltanto tipica del-
l’informatica, ma di molte altre discipline, non necessariamente tec-
niche. Nella realizzazione di un software, bisogna cercare di dare più
rilevanza possibile alla stesura delle specifiche di prodotto, che non
vengono spesso considerate in modo adeguato. Gli sviluppatori so-
no normalmente più interessati alla realizzazione pratica del softwa-
re, che a capire cosa stiano veramente facendo. Benché chiunque sia
consapevole del fatto che non abbia alcun senso iniziare a fare qual-
cosa senza conoscere bene l’obiettivo dei propri sforzi, molti svilup-
patori iniziano a realizzare i loro progetti in modo improvvisato, ri-
proponendosi di definirli meglio in fase di sviluppo. Questo li porta
inevitabilmente a doverli rivedere molte volte con enormi perdite di
tempo e fatica, che credevano di potersi risparmiare anticipando l’i-

15 – Una semplice pagina

nizio dei lavori, e questo ha rappresentato da sempre uno dei
maggiori problemi nel campo della produzione del software, per-
ché genera lunghissimi tempi di manutenzione di ciò che è stato
fatto senza una chiara cognizione di causa. Questa carenza riguar-
da principalmente i programmatori autonomi e le piccole aziende, il
cui team1 di sviluppo è costituito da poche persone, che devono svol-
gere da sole tutte le mansioni relative alla produzione. In aziende
più grandi la redazione delle specifiche di prodotto viene invece
svolta dal project manager2, che gestisce le relazioni coi clienti e fa da
interfaccia tra questi e l’equipe degli sviluppatori.
     Realizzare un software senza adeguate specifiche di prodotto è
come iniziare a costruire una casa senza un chiaro progetto, pren-
dendo delle pietre a caso per costruire i muri, con l’idea che una ca-
sa debba comunque averne e che iniziando a costruirli, non si possa
fare molto di sbagliato. Rispetto a una casa, chiunque può rendersi
conto di come sia ridicolo pensare di iniziarne la costruzione in que-
sto modo, ma lo stesso non accade invece con il software. Molte a-
ziende si trovano a volte con poco tempo a disposizione per realizza-
re un progetto, e scelgono quindi di trascurare la stesura delle speci-
fiche di prodotto, credendo che in fondo non siano la cosa più essen-
ziale. Ma il motivo per cui hanno poche persone disponibili per cre-
are nuovo software e poco tempo per realizzarlo, risiede spesso nel
fatto che la maggior parte di queste si sta occupando della manuten-
zione di prodotti realizzati precedentemente senza un chiaro proget-
to. Si ritrovano quindi in un circolo vizioso, da cui spesso è quasi im-
possibile uscire, anche perché quel modo di operare è divenuto col
tempo una consuetudine, entrata a far parte del loro modo di pen-
sare, che diventa difficilissimo poter cambiare.
     Redigere le specifiche di prodotto, può sembrare a prima vista
un’operazione noiosa, che tutti farebbero volentieri a meno di svol-
gere. In realtà, con la pratica ci si rende conto ben presto che spesso
si rivela la cosa più divertente di tutta la realizzazione del progetto,
e anche la più remunerativa, visto che fa risparmiare un’enormità
di tempo per lo sviluppo del software, che altrimenti andrebbe risi-
stemato di continuo, senza arrivare mai a una realizzazione condor-
me ai requisiti, i quali non sono mai stati peraltro identificati con chia-
rezza, visto che non si sono fatte le specifiche di prodotto. Se il soft-
ware viene creato per un cliente, le specifiche di prodotto devono es-

1   Il team è la squadra degli sviluppatori.
2   Il project manager è il responsabile del progetto.

Il mio sito - 16

sere concordate con lui e rappresentano la fase del lavoro in cui si cu-
rano maggiormente le relazioni umane, durante le quali si cerca di ca-
pire quali siano le sue vere esigenze. La stesura delle specifiche di
prodotto è una fase essenziale, che può richiedere anche più incon-
tri, perché il modo di pensare di un informatico riguardo al suo am-
bito di lavoro è completamente diverso da quello di una persona che
ne sia al di fuori, anche se utilizza da anni il computer, il tablet e lo
smartphone tutto il giorno, in quanto lo fa da utente e non da pro-
grammatore.

Le specifiche funzionali, operative e tecniche

    Le specifiche di prodotto sono solitamente suddivise in diverse
sezioni, che rispondono a domande di tipo diverso sulla composizio-
ne del software. Il primo documento da redigere sono le specifiche fun-
zionali, che rispondono alla domanda “Che cosa deve fare il prodot-
to?” e sono le più importanti, perché definiscono gli obiettivi prima-
ri del progetto. Ci sono poi le specifiche operative, che rispondono in-
vece alla domanda “Come lo deve fare?”.
    Questi due documenti devono essere redatti con cura insieme al
cliente, che deve visionarli e assicurarsi che vi sia scritto esattamen-
te quello che lui ha in mente di realizzare. Ci sono poi le specifiche tec-
niche, nelle quali normalmente il cliente ha meno voce in capitolo,
perché riguardano gli strumenti da utilizzare per la costruzione del
prodotto, sebbene su alcuni aspetti possa influire in modo determi-
nante, come ad esempio la piattaforma in cui deve risiedere il soft-
ware, se questo verrà installato su un computer della sua azienda.

                     SPECIFICHE DI PRODOTTO
  Specifiche funzionali         →         Cosa deve fare?
  Specifiche operative          →         Come lo deve fare?
  Specifiche tecniche           →         Come deve essere costruito?

17 – Una semplice pagina

Le specifiche funzionali

    Il primo obiettivo di questo libro sarà quello di realizzare un’o-
pera abbastanza modesta, con l’utilizzo di poche tecniche, per poter-
le studiare bene, in quanto ci serviranno per la realizzazione di pro-
getti più complessi. Il progetto più semplice non può comunque es-
sere costituito da meno di una pagina web, in cui è scritto normal-
mente il nome del sito, il titolo della pagina e una descrizione della
stessa. Potrebbe essere una semplice pagina di presentazione di una
persona o di un’azienda.
    Il layout1 tipico di una pagina web è composto normalmente da
tre sezioni orizzontali, che sono l’intestazione, i contenuti e il piè di pa-
gina. Proviamo quindi come primo progetto a realizzare una pagina
con un’intestazione contenente il nome del sito, i contenuti centrali
con il titolo della pagina e due paragrafi di testo, e un piè di pagina
con l’informativa sul copyright. I file del progetto risiederanno in
locale2, cioè sul nostro computer. Il sito non sarà quindi per adesso
accessibile da internet, perché questo comporterebbe la creazione di
uno spazio web3 su un server di hosting4, che è una cosa che vedremo
più avanti. La pagina deve essere visualizzabile con un browser.
    Quelle che abbiamo elencato sopra, sono le specifiche funzionali
del nostro progetto, e quindi i nostri obiettivi nella realizzazione
del software dovranno essere questi e nessun altro. Se non riuscia-
mo a realizzare quanto descritto nelle specifiche, significa che il pro-
getto è incompiuto, quanto meno nell’ottica di queste specifiche, che
andranno riviste e riscritte per creare un nuovo progetto, perché
qualsiasi loro variazione è da considerarsi una variazione al progetto
iniziale. Il nostro compito attuale è solo quello di realizzare quanto
concordato. Se durante lo sviluppo del software, ci rendiamo conto
che qualcosa non è realizzabile o che gli obiettivi del cliente sono di-
versi, sarà necessario interromperne lo sviluppo e rivedere le speci-
fiche:

1 Layout significa ‘impaginazione’.
2 In locale significa ‘sul proprio computer’. Il contrario è in remoto, che significa ‘su
  un computer diverso dal proprio, col quale si è collegati in rete’.
3 Lo spazio web è uno spazio dove risiedono i file del sito.
4 Col termine hosting, si intende un servizio che offre un certo tipo di aziende, chia-

  mate Internet Service Provider, e che consiste nel fornire uno spazio web gratuito o
  a pagamento.

Il mio sito - 18

  Specifiche funzionali

  Progetto 001 (Una semplice pagina)

   Si deve creare una pagina web costituita da tre sezioni orizzon-
     tali, un’intestazione col nome del sito “Il mio sito”, una sezio-
     ne centrale col titolo della pagina “Home”, una descrizione del-
     la stessa, composta da due paragrafi, e un piè di pagina conte-
     nente l’informativa sul copyright.
   I file del progetto devono risiedere in locale.
   La pagina deve essere visualizzabile con un normale browser.

Le specifiche operative

    Le specifiche operative sono quelle che indicano il comportamen-
to che il software deve avere nell’interazione con l’utente e si riduco-
no il più delle volte a una descrizione del funzionamento dell’inter-
faccia grafica. Peraltro sono quelle che il cliente confonde solitamen-
te con le specifiche funzionali, perché la sua idea del software si for-
ma primariamente in modo visuale, senza operare alcuna separa-
zione fra quello che deve fare il software e come lo deve fare. Se in-
fatti gli si chiede cosa deve fare questo, accade comunemente che ci
descriva il comportamento che deve avere l’interfaccia grafica, che
per la progettazione del software è invece un argomento di seconda-
ria importanza. Riguardo alle specifiche operative del nostro primo
progetto, non c’è molto da dire, solo che digitando l’indirizzo del
nostro sito sul browser, deve visualizzarsi la pagina di presentazio-
ne. In generale nella programmazione le specifiche operative riguar-
dano più le applicazioni che i siti web, dei quali l’utente si limita di
solito a consultare i contenuti.

  Specifiche operative

  Progetto 001 (Una semplice pagina)

   Digitando l’indirizzo del nostro sito sul browser, deve visualiz-
     zarsi la pagina di presentazione.

19 – Una semplice pagina

Le specifiche tecniche

    Le specifiche tecniche descrivono come è costruito il software, cioè
quali strumenti e tecnologie vengono utilizzati per la sua realizzazio-
ne. Queste possono essere più o meno dettagliate a seconda delle ne-
cessità, ma come per le altre, più sono dettagliate, maggior chiarezza
potrà esserci riguardo alla possibilità che il software sia realizzabile
al meglio, perché gli strumenti e le tecnologie contribuiscono a defi-
nire dal basso i limiti del processo di costruzione. Per questo nostro
primo progetto, nelle specifiche tecniche possiamo inserire l’utiliz-
zo del linguaggio HTML 5, che è lo standard attuale per la struttura-
zione delle pagine web. L’utilizzo del solo linguaggio HTML compor-
terà delle limitazioni nella resa grafica dei contenuti della pagina,
che miglioreremo più avanti con l’utilizzo del linguaggio CSS.

  Specifiche tecniche

  Progetto 001 (Una semplice pagina)

   Il progetto sarà realizzato con l’utilizzo del linguaggio HTML 5.
   Le sezioni della pagina, cioè 1) l’intestazione, 2) i contenuti e 3) il
     piè di pagina, saranno visualizzate con la formattazione prede-
     finita di questo linguaggio.

La documentazione tecnica

    Oltre alle specifiche di prodotto, esiste un’altra documentazio-
ne, che viene redatta durante la realizzazione del software, che in-
dica le caratteristiche e le funzionalità delle parti che lo compongo-
no, e che si chiama documentazione tecnica. Come per le specifiche di
prodotto, anche questo documento deve essere redatto prima di re-
alizzare la relativa parte di software, in modo da avere maggior-
mente chiaro quello che stiamo per fare ed evitare così di scrivere co-
dice a caso, che dovremmo altrimenti prima o poi gettare nel cesti-
no e riscrivere da capo.
    Imparare a redigere la documentazione tecnica prima del codice,
è fondamentale per un buono stile di programmazione e per rispar-
miare tempo, ma anche di questa non è facilissimo capire l’importan-

Il mio sito - 20

za, perché spesso si è portati a scrivere il codice di getto, credendo di
avere ben chiari i nostri intenti. Se fossero però davvero così chiari,
non dovremmo fare neanche una gran fatica a scrivere la documen-
tazione di quello che deve generare il codice, ma proprio il fatto che
non ci sono chiari, rende questo compito faticoso. Se capiamo questo,
dovrebbe essere più semplice convincersi dell’importanza di scrive-
re la documentazione tecnica prima del codice.

L’organizzazione di un progetto

     Un’altra cosa di fondamentale importanza nella produzione del
software, è l’organizzazione dei progetti sul computer, che è di soli-
to abbastanza semplice, ma è importante dedicargli una certa atten-
zione, perché anche a questa fase non viene spesso data la giusta con-
siderazione. I nostri progetti, ma in generale tutti i nostri dati, devo-
no essere organizzati adeguatamente sul disco fisso1, in modo da es-
sere accessibili velocemente. Inoltre, ai fini della sicurezza dei dati, è
necessario utilizzare un software di backup2, per salvare3 una copia dei
file dei nostri progetti su un’altra memoria di massa4.

Il linguaggio HTML

    HTML è l’acronimo per Hypertext Markup Language, e significa
‘Linguaggio di Marcatura di Ipertesti’. Un ipertesto è un insieme di
documenti messi in relazione tra loro da un sistema di collegamenti,
chiamati collegamenti ipertestuali o col termine inglese link. L’HTML
serve per la strutturazione di ipertesti tramite appositi elementi, co-
stituiti da uno o più marcatori, indicati comunemente col termine in-
glese tag, che sono delimitati da parentesi angolari, come ad esem-
pio l’elemento title, che è realizzato dal marcatore , e che defi-

1 Il disco fisso (o hard disk) è il dispositivo sul quale vengono memorizzati i dati e i
  programmi di utilizzo comune su un computer.
2 Il backup è la memorizzazione di dati su altri supporti.
3 Salvare significa ‘memorizzare’.
4 La memoria di massa è una memoria secondaria di un computer, rappresentata da di-

  schi fissi, floppy disk, cd-rom, dvd, chiavette usb, sui quali vengono memorizzati i
  dati in modo più o meno permanente, per essere utilizzati dal processore previo
  trasferimento sulla RAM, che è una memoria primaria.

21 – Una semplice pagina

nisce il titolo della pagina. La versione attuale di HTML è la 5.2, che è
stata rilasciata il 14 dicembre 2017 e che rappresenta un grande pas-
so in avanti nello sviluppo di questo linguaggio.

Il W3C

    Il linguaggio HTML è stato sviluppato dal W3C1, un’organizzazio-
ne non governativa internazionale (a cui appartengono attualmente
circa 470 membri, tra cui molte aziende informatiche, compagnie te-
lefoniche, università e istituti di ricerca), che si occupa dello svilup-
po delle potenzialità del World Wide Web, che è l’insieme dei servizi
informatici multimediali disponibili su internet. È quindi il punto di
riferimento per tutti gli standard relativi allo sviluppo di documenti e
applicazioni web, come per la sintassi dei linguaggi HTML e CSS, che
sono l’oggetto di studio di questo libro.

1   http://www.w3.org/

Il mio sito - 22

LA REALIZZAZIONE

I file di testo

     Le pagine web sono scritte in comuni file di testo, che sono quei fi-
le che contengono solo caratteri semplici, leggibili senza bisogno di
programmi complessi, ma solo di un qualsiasi editor di testo, cioè un
programma che si limita a visualizzarne il contenuto in forma di u-
na sequenza di caratteri, senza interpretarne il significato. Non sono
per esempio file di testo i file di immagini (.jpg, .gif, .png, ecc.), perché
se si aprono con un editor di testo, si vedono una serie di caratteri in-
comprensibili, che solo i programmi specifici riescono a interpretare,
decodificandoli in modo da mostrare l’immagine che contengono. Lo
stesso vale per altri tipi di file, fra cui anche molti documenti di testo,
il cui contenuto è visibile in forma testuale soltanto tramite appositi
programmi che interpretano i codici di formattazione e mostrano il
testo formattato secondo tali codici.
     Un programma per la visualizzazione, creazione e modifica di fi-
le di testo su Windows è ad esempio il blocco note, che potremmo u-
tilizzare anche noi per scrivere la nostra prima pagina web, ma esi-
stono anche programmi che riescono a interpretare la sintassi di mol-
ti linguaggi, fra cui anche HTML e CSS, evidenziandone in colori di-
versi i vari elementi del codice, in modo da rendere i listati meglio
leggibili. Sono anche questi dei semplici editor di testo, perché mo-
strano il contenuto dei file, limitandosi a colorarlo diversamente, a se-
conda della sua funzione in quella particolare posizione del file, che
loro riescono a interpretare dalla sintassi. Un programma gratuito di
questo tipo su Windows è ad esempio Notepad++, mentre per Linux
e MacOS esiste Gedit, che è disponibile anche per Windows. Questi
programmi impostano di solito la colorazione della sintassi secondo
l’estensione1 del file caricato, mentre nel caso di un nuovo file sen-
za ancora un’estensione, è possibile scegliere da menu la sintassi se-
condo la quale debba essere colorato.

1   L’estensione di un file è la parte del nome che segue il punto, ad esempio nel caso
    di un file dal nome “readme.txt”, l’estensione è “.txt”. Quelle dei file scritti nei
    linguaggi HTML e CSS sono normalmente “.html” e “.css”.

23 – Una semplice pagina

    La colorazione del testo di un file serve a rendere più facile il ri-
levamento di errori nel codice. Se ad esempio un certo elemento è co-
lorato diversamente da altri elementi dello stesso tipo, significa che
la sintassi del listato è probabilmente sbagliata e la visualizzazione
della pagina potrebbe quindi essere diversa da quella pensata. Sen-
za un’adeguata colorazione dei contenuti, la ricerca degli errori è e-
normemente più complessa. Questi strumenti offrono a volte anche
la possibilità di formattare1 il codice, che è anche questa una funzio-
ne indispensabile per una migliore leggibilità del codice.
    Esistono poi programmi ancora più sofisticati, che durante la
digitazione del testo, suggeriscono una lista di parole che possono
essere inserite in quel punto. Questa funzione è utile nel caso non si
ricordi il nome esatto di qualche elemento del linguaggio o si sia in
fase di apprendimento dello stesso. Per ora possiamo però limitarci a
usare normali editor di testo, possibilmente con la funzione di colo-
razione dei contenuti. Useremo quindi un editor di testo per scrive-
re il codice e un browser per visualizzare i risultati a video.

La cartella dei progetti

     Prima di creare il file che conterrà il codice della nostra pagina
web, dobbiamo però scegliere un posto in cui sistemarlo, e anche un
posto per tutti i progetti che faremo, che può essere semplicemente
una cartella dal nome “Progetti”. I programmi per visualizzare il con-
tenuto del file system2, creare, rinominare ed eliminare cartelle e file,
si chiamano file browser, di cui quello di default su Windows è Esplo-
ra Risorse, su Linux è Nautilus e su MacOS è il Finder.
     Utilizziamo quindi il nostro file browser per creare una cartella dal
nome “Progetti” per tutti i nostri progetti, una sottocartella “Il mio si-
to” per i progetti di questo libro, un’altra sottocartella “Volume 1” per
i progetti di questo volume, una sottocartella “Progetto-001” per i fi-
le del primo progetto e un’ulteriore sottocartella “001” per la prima
versione di questi file. La formattazione a tre cifre del numero 1 con
gli 0 anteposti fa sì che i nostri progetti siano ordinati nel file browser
secondo la numerazione, perché di solito questi programmi elencano
i file in ordine alfabetico e non numerico, e se chiamassimo il primo

1   Formattare significa ‘strutturare’.
2   Il file system è il termine con cui si indica la struttura di cartelle e file in una me-
    moria di massa, come ad esempio un disco fisso.

Il mio sito - 24

progetto “Progetto-1” e il secondo “Progetto-2”, succederebbe che il
“Progetto-10” verrebbe inserito dopo il “Progetto-1”, perché il deci-
mo carattere della stringa1 “Progetto-10”, cioè “1”, è alfabeticamente
antecedente al decimo carattere di “Progetto-2”, cioè “2”. Adesso sul
nostro disco fisso dovrebbe essere presente il percorso2 “Progetti\Il mio
sito\Volume 1\Progetto-001\001”.

Il file delle specifiche

   Prima di scrivere la nostra pagina web, creiamo il file “Specifi-
che.txt”, dove scriveremo le specifiche di prodotto, in modo da po-
terci ricordare in futuro gli obiettivi del progetto e renderli accessibili
a chi dovesse lavorarci in seguito. Salveremo poi il file nella stessa
cartella del progetto, in modo che sia accessibile a necessità. Se la do-
cumentazione di un progetto consiste di più file, è consigliabile crea-
re un’apposita cartella “Documenti”.

     Progetto:      Progetto-001 (Una semplice pagina)
     File:            Specifiche.txt
     …

    Nelle prime due righe del file c’è scritto il nome del progetto e
quello del file. L’estensione “.txt” è utilizzata per consuetudine per i
normali file di testo. Il file avrebbe potuto chiamarsi anche in un al-
tro modo, ma sarebbe stato meno esplicativo.

            Specifiche.txt3

1   La stringa è una porzione qualunque di testo.
2   La posizione di un file su un disco è descritta da un percorso, composto dalla se-
    quenza dei nomi delle cartelle che lo contengono, separate ciascuna da una barra
    che su Windows è “\” e su Linux e MacOS è “/”. Il percorso può essere assoluto,
    se definisce inequivocabilmente la posizione del file sul disco, come nel caso di
    “D:\Progetti\Il mio sito\Volume 1\Progetto-001”, o relativo, se manca l’unità di-
    sco, come nel caso di “\Volume 1\Progetto-001”.
3   L’icona indica che il file è disponibile per il download sul sito http://andreavac-
    cari.altervista.org/ilmiosito.

25 – Una semplice pagina

Il file del codice

    Il nome del file della nostra pagina web sarà “index.html”, perché
questo è per consuetudine il nome standard per la pagina iniziale di
ogni sito web. In realtà potremmo chiamarlo come ci pare, ma in que-
sto caso non ha molto senso dare sfogo alla nostra creatività, che può
essere impiegata meglio in altri settori della progettazione e dello svi-
luppo del software. Sempre per consuetudine, “.html” è l’estensione
standard delle pagine web. Per creare il file “index.html”, apriamo
quindi un editor di testo, che ci mostrerà una finestra bianca in cui
scriveremo il testo “Il mio sito”, che sarà il nome del nostro sito.
    Salviamo poi il file col nome “index.html” nella cartella “Proget-
to-001” che abbiamo appena creato, facendo attenzione a scegliere la
codifica “UTF-8”, se questa voce è disponibile nella finestra di salva-
taggio, altrimenti dovrebbe essere possibile sceglierla dal menu del-
l’editor di testo. È bene imparare subito che tutti i file di un proget-
to devono avere lo stesso tipo di codifica, in modo che il browser
possa visualizzarli correttamente. Per i nostri progetti sceglieremo il
formato “UTF-8”, che è lo standard di codifica più diffuso1.

Visualizzare la pagina

   La pagina del nostro sito è stata creata e salvata col nome “in-
dex.html” e contiene per ora soltanto il testo “Il mio sito”. Se la apria-
mo col nostro browser, potremo notare che nella barra degli indiriz-
zi si vede il percorso completo del file “index.html”. Notiamo inoltre,
che davanti al percorso del file si trova il prefisso “file:///”, che indica
che il browser sta visualizzando un file del computer e non di un sito
in rete, nel qual caso ci sarebbe stato il prefisso “http://” o “https://”.

Il linguaggio HTML

   La pagina web che abbiamo realizzato contiene soltanto un testo,
che abbiamo pensato come nome del sito, che dovrà stare nell’inte-

1   La sigla UTF sta per Unicode Transformation Format, cioè ‘Formato di Trasforma-
    zione Unicode’, dove unicode è un sistema di codifica che comprende i caratteri di
    quasi tutte le lingue del mondo.

Il mio sito - 26

stazione della pagina, che non abbiamo ancora creato. Non c’è infat-
ti niente che indichi al browser che la riga che contiene il testo “Il mio
sito” debba essere considerata un’intestazione. Il linguaggio HTML
serve di fatto proprio a questo, cioè a strutturare il documento in mo-
do che il browser sappia distinguerne le varie sezioni, come ad e-
sempio un’intestazione da un più di pagina.

I commenti

    La prima cosa che studieremo del linguaggio HTML sono i com-
menti, perché sono questi che costituiscono la documentazione tecni-
ca. Coi commenti è possibile scrivere in dettaglio a cosa serve ogni
singolo pezzo di codice, e il fatto di commentare il codice prima an-
cora di averlo scritto è un modo di farsi chiarezza su quello che dob-
biamo scrivere. I commenti nel linguaggio HTML sono delimitati dai
marcatori , fra i quali viene scritto il testo del commento.
Possiamo quindi iniziare a scrivere la documentazione tecnica all’ini-
zio del file “index.html”, utilizzando i commenti:

    Se utilizziamo un editor di testi con colorazione della sintassi, i
commenti verranno visualizzati in uno stile diverso da quello delle
altre porzioni di codice, che qui rendiamo in grigio e in corsivo, per
distinguerle dal listato, che in questo modo dovrebbe risultare me-
glio leggibile. Sotto a queste righe di commento, possiamo inserire il
testo “Il mio sito“, che è l’unica cosa che verrà visualizzata dal brow-

27 – Una semplice pagina

ser, perché i commenti servono soltanto a un utilizzo interno e non
vengono mostrati.

Gli elementi

     Il linguaggio HTML è costituito da elementi, che servono a speci-
ficare la struttura delle pagine. ma anche in parte la resa dei contenu-
ti, perché i browser utilizzano un foglio di stile interno, scritto in lin-
guaggio CSS, per dare una forma di base agli elementi HTML. Gli e-
lementi sono costituiti normalmente da due marcatori, che delimitano
una porzione di testo, che ne rappresenta il contenuto. Il primo vie-
ne chiamato “marcatore di apertura” e il secondo “marcatore di chiu-
sura”. Il primo è formato dal nome dell’elemento racchiuso tra paren-
tesi angolari, cioè . Il secondo differisce dal primo
solo per una barretta “/” posta dopo la prima parentesi angolare,
quindi . La normale struttura di un elemento è
quindi la seguente1:

    contenuto

   Nel caso di un contenuto molto lungo, l’elemento può essere di-
viso su più righe e il contenuto indentato2:

       contenuto molto lungo, contenuto molto lungo, contenuto
       molto lungo, contenuto molto lungo, contenuto molto lun-
       go, contenuto molto lungo.
    
    Se un elemento non ha contenuto, può anche essere scritto con un
solo marcatore, chiuso dalla barretta “/” posta prima della seconda
parentesi angolare:

1 Utilizziamo il grassetto per evidenziare nella pagina il codice di cui stiamo par-
  lando o quello di nuovo inserimento.
2 Indentato significa spostato verso destra.

Il mio sito - 28

   Esistono anche elementi che non possono avere un contenuto e
che vengono per questo chiamati “elementi vuoti”.

Gli elementi primari

    Prima di spiegare con quali elementi si definisce un titolo o un
paragrafo, che sono quelli che ci serviranno per strutturare i conte-
nuti della pagina, è necessario dare un’occhiata agli elementi prin-
cipali delle pagine HTML. Il file “index.html”, benché abbia l’esten-
sione “.html” e venga visualizzato correttamente dal nostro browser,
non è ancora una pagina HTML, in quanto non contiene alcun elemen-
to di questo linguaggio. Una pagina HTML deve includere sempre al-
meno i tre elementi primari, cioè html, head e body, anche se nell’ul-
tima versione di questo linguaggio, i browser provvedono, quando
possibile, a inserirli autonomamente, se non ci fossero nella pagina.
    Gli elementi html, head e body servono a delimitare le corri-
spondenti tre sezioni della pagina, e sono costituiti ciascuno da due
marcatori, uno di apertura e uno di chiusura, della sezione che de-
limitano, di conseguenza nella pagina saranno presenti le coppie di
marcatori ,  e   nella
seguente forma:

    Oltre a questi tre elementi primari, all’inizio di una pagina HTML,
deve comparire sempre l’istruzione , che non è un ele-
mento del linguaggio, ma indica ai browser la versione di HTML in
cui è scritto il documento. Questa istruzione può essere scritta sia in
maiuscolo che in minuscolo, ma viene scritta normalmente in maiu-
scolo, forse per distinguerla dagli elementi del linguaggio HTML, che
è invece buona norma scrivere in minuscolo. Possiamo quindi dire
che la struttura minima di una pagina HTML 5 è la seguente: