HTML
Imparare per progetti
Gary B. Shelly
Thomas J. Cashman
Denise M. Woods
HTML
Imparare per progetti
Titolo originale:
HTML
Complete Concepts and Techniques
Autori:
Gary B. Shelly, Thomas J. Cashman, Denise M. Woods
Original English language edition by Course Technology.
Copyright © 2000 – Course Technology, a division of Thomson Learning.
Copyright per l’edizione italiana © 2000 – APOGEO srl
Viale Papiniano 38 – 20123 Milano (Italy)
Telefono: 02-461920 (5 linee r.a.) – Telefax: 02-4815382
Email [email protected]
U.R.L. www.apogeonline.com
ISBN 88-7303-667-8
Editor: Alberto Kratter Thaler
Realizzazione editoriale di Infostudio – Monza
Traduzione di Anna Croci
Responsabile di produzione: Vitiano Zaini
Copertina: Enrico Marcandalli
Tutti i diritti sono riservati a norma di legge e a norma delle
convenzioni internazionali. Nessuna parte di questo libro
può essere riprodotta con sistemi elettronici, meccanici
o altri, senza l’autorizzazione scritta dell’Editore.
Nomi e marchi citati nel testo sono generalmente depositati o registrati
dalle rispettive case produttrici.
SOMMARIO
SOMMARIO
PROGETTO UNO
PROGETTO DUE
CREAZIONE E MODIFICA DI UNA PAGINA WEB
Obiettivi
Introduzione
Che cos’è Internet?
Che cos’è il World Wide Web?
Che cos’è l’HyperText Markup Language?
Progetto uno – Pagina Web di Chiaravalle Pizza
Sviluppo di pagine Web
Gli elementi di una pagina Web
Avvio di Blocco note
Testo a capo nella finestra di Blocco note
La finestra di Blocco note
Barra dei menu
Area del testo
Barre di scorrimento
Inserimento di testo e tag HTML
Inserimento dei tag iniziali
Correzione degli errori
Inserimento di titoli in un file HTML
Inserimento di testo in formato di paragrafo
Creare un elenco
Salvataggio del file HTML
Uso di un browser
Avvio del browser
Apertura di una pagina Web nel browser
Attivazione di Blocco note
Miglioramento dell’aspetto della pagina Web
Aggiunta di un colore di sfondo
Centratura del titolo
Aggiunta di una linea orizzontale
Visualizzazione del file modificato nel browser
Visualizzazione del codice sorgente della pagina
Stampa di una copia
Uscita da Blocco note e dal browser
Progetto della pagina Web
Scopo
Organizzazione della pagina Web
Organizzazione del sito Web
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
CREAZIONE DI UN SITO WEB CON COLLEGAMENTI
1
2
2
4
6
7
7
8
9
11
12
12
12
12
12
13
14
14
16
17
19
21
21
23
25
26
27
28
29
30
31
33
34
35
35
36
36
38
38
39
41
42
43
46
Obiettivi
Introduzione
Progetto due – Web Res
Introduzione ai collegamenti
Collegamento all’interno di una pagina Web
Collegamento a un’altra pagina Web nello stesso sito
Collegamento a un altro sito Web
Collegamento a un indirizzo di posta elettronica
Avvio di Blocco note
Creazione di una home page
Inserimento dei tag HTML iniziali
Inserimento di un titolo
Inserimento di un testo
Inserimento di elenchi puntati
Immagini nelle pagine Web
Classi di immagini
Tipi di immagini
Attributi delle immagini
Inserimento di immagini come sfondi e linee
Inserimento di un’immagine di sfondo
Inserimento di un’immagine come linea orizzontale
Copia e incollamento di testi
Aggiunta di un collegamento per la seconda pagina
Inserimento del testo e dei tag per il collegamento
a un’altra pagina Web
Aggiunta di un collegamento di posta elettronica
Salvataggio e stampa del file HTML
Visualizzazione della pagina Web e verifica dei collegamenti
Modifica della seconda pagina Web
Applicazione del grassetto a un testo
Applicazione del corsivo a un testo
Modifica del colore del testo
Modifica del punto elenco predefinito
Inserimento di un’immagine e disposizione del testo
Inserimento di un’immagine contornata da un testo
Collegamenti in forma di testi e immagini
per un altro sito Web
Aggiunta di un collegamento di testo
che conduca a un altro sito Web
Aggiunta di un collegamento in forma d’immagine
che conduca a un altro sito Web
Creazione di collegamenti all’interno di una pagina
Impostazione dei target dei collegamenti
Aggiunta di collegamenti ai target impostati
47
48
48
50
52
52
54
55
55
56
57
58
59
60
61
61
61
62
62
62
63
64
66
66
68
69
70
75
76
79
80
81
83
86
87
87
88
89
91
92
HTML
iv • Sommario
Collegamento con l’inizio della pagina
Verifica dei collegamenti
Ulteriori informazioni sulle immagini
Spazi orizzontali e verticali
Miniature
Dove trovare le immagini
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
94
98
98
98
99
100
100
100
101
103
103
105
109
PROGETTO TRE
CREAZIONE DI TABELLE IN UN SITO WEB
Obiettivi
Introduzione
Progetto tre – Theater Club
Creazione di pagine Web con tabelle
Elementi di tabelle
Altre parti delle tabelle
Pianificazione, progettazione e codifica di una tabella
Determinare se una tabella è necessaria
Pianificazione della tabella
Codifica della tabella
Attributi di tabella
Avvio di Blocco note
Inserimento dei tag HTML iniziali
Aggiunta di una tabella senza bordi con immagini
Inserimento della tabella di intestazione
Inserimento di immagini in una tabella
Creazione di un elenco di collegamenti di testo
Aggiunta di testo
Visualizzazione e stampa della pagina Web con il browser
Creazione di una barra di navigazione
in una pagina Web secondaria
Cambio del titolo
Inserimento di una barra di navigazione
Creazione di una tabella con bordi
Inserimento di testo in celle di intestazione e di dati
Spaziatura, larghezza di colonna e didascalie
Aggiunta di CELLSPACING e CELLPADDING
Modifica della larghezza di colonna
Aggiunta di una didascalia
Estensione su righe e colonne
Estensione dell’intestazione principale su tutte le colonne
Creazione di altri titoli estesi su righe e colonne
Utilizzo di celle vuote
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
111
112
112
114
116
117
118
118
119
120
122
122
123
123
125
126
127
131
133
135
137
138
139
140
145
146
149
149
151
154
156
160
162
162
163
165
166
167
170
PROGETTO QUATTRO
CREAZIONE DI UNA MAPPA IMMAGINE
Obiettivi
Introduzione
Progetto 4 – Vai col surf
Introduzione alle mappe immagine
Precauzioni nell’utilizzo di mappe immagine
Impieghi delle mappe immagine
Mappe immagine lato server e lato client
Componenti della mappa immagine
Selezione delle immagini
Uno schizzo dei bordi delle aree sensibili
Coordinate
Codifica della mappa
Coordinate della mappa
Avvio di Paint
La finestra di Paint
Apertura di un’immagine
Localizzazione delle coordinate x e y
Codifica della mappa immagine con tag e attributi
Attributi dei tag di mappatura delle immagini
Avvio di Blocco note
Inserimento dei tag HTML iniziali
Creazione della home page
Creazione di una tabella
Inserimento di un’immagine
Inserimento di un’intestazione
Inserimento di un paragrafo
Creazione di collegamenti di testo
Creazione di una mappa immagine
Modifica dei colori dei collegamenti
Visualizzazione e stampa della pagina Web con il browser
Creazione di una seconda pagina Web
Modifica del titolo
Inserimento di un’immagine
Creazione di un elenco di collegamenti
Inserimento di un grafico
Creazione di un collegamento di posta elettronica
Verifica dei collegamenti
Software per le mappe immagine
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
171
172
172
174
175
176
179
180
180
181
183
183
184
185
186
186
187
191
191
191
192
193
193
194
196
197
199
200
201
203
204
206
206
209
210
211
213
214
215
215
216
218
219
220
223
PROGETTO CINQUE
PROGETTO SEI
CREAZIONE DI FRAME IN UNA PAGINA WEB
Obiettivi
Introduzione
Progetto cinque – Riunione di classe
Creazione di pagine Web con frame
Utilizzo dei frame
Pianificazione e disposizione di frame
Inserimento dei tag HTML iniziali
Creazione di un file di definizione di frame
Identificazione del contenuto dell’intestazione
Impostazione delle colonne per i frame
Identificazione del contenuto delle colonne
Salvataggio del file HTML
Creazione della pagina di intestazione
Aggiunta di un’immagine e di un titolo
Creazione della pagina di navigazione
Aggiunta di riferimenti ipertestuali e target
Creazione della home page
Aggiunta del testo per la home page
Visualizzazione e stampa dei file HTML con il browser
Stampa di tutti i file HTML
Opzioni avanzate per i frame
Uso di NORESIZE
Progettazione di una struttura a quattro frame
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
CREAZIONE DI MODULI IN UNA PAGINA WEB
225
226
226
228
228
235
236
238
240
240
241
243
244
244
246
247
248
248
250
252
254
254
255
256
256
257
259
259
261
264
Obiettivi
Introduzione
Progetto 6 – Moduli di rilevamento
Creazione di moduli
Controlli di input
Tag per la creazione di moduli
Attributi per la creazione di moduli
Apertura del file HTML
Creazione di un modulo con controlli di testo,
pulsanti di opzione, area di testo
Elaborazione del modulo
Modifica del messaggio del testo
Aggiunta di pulsanti di opzione
Aggiunta di un campo di testo
Aggiunta di aree di testo
Pulsanti di invio e ripristino
Creazione dei pulsanti di invio e ripristino
Salvataggio del file HTML
Visualizzazione, verifica e stampa
della pagina Web e del file HTML
Creazione di un modulo con menu di selezione
Apertura del file HTML
Modifica del testo iniziale
Aggiunta di pulsanti di opzione nel secondo modulo
Creazione di controlli di selezione
Aggiunta di altri pulsanti di opzione
e di un menu di selezione
Inserimento di un campo di testo
Inserimento dei pulsanti di invio e ripristino
Salvataggio, visualizzazione, verifica e stampa
Verifica dei pulsanti di invio
Menu di selezione avanzati
Riassunto del progetto
Conoscenze acquisite
Verificate le conoscenze
Utilizzate la Guida
Utilizzate le conoscenze
Nel laboratorio
Casi e applicazioni
265
266
266
268
268
270
271
271
Indice
307
272
272
274
275
277
278
280
280
281
281
285
285
287
288
289
290
291
292
292
295
295
297
297
298
300
301
302
305
SOMMARIO
Sommario • v
Prefazione
Nei pochi anni trascorsi dalla sua nascita, il World Wide Web (o, per brevità,
Web) è cresciuto al di là di ogni previsione; ora questa “ragnatela” estesa su
tutto il pianeta collega decine di milioni di computer, mettendo a disposizione
degli utenti milioni di pagine Web su ogni argomento immaginabile. Imprese,
enti pubblici e istituzioni educative utilizzano in modo sempre più massiccio
questo nuovo mezzo per la trasmissione delle informazioni.
Le pagine Web non si formano per magia; qualcuno deve crearle e mantenerle. In questo libro imparerete a creare pagine Web mediante il linguaggio
HTML.
O
biettivi
Questo libro è stato concepito per l’utilizzo, da solo o in abbinamento con altri
testi, nell’ambito di un corso di livello universitario sulla creazione di pagine
Web. Può anche essere usato a supporto di un corso di formazione professionale
o in programmi di istruzione permanente. Infine, è un ottimo strumento per
chi voglia accostarsi all’uso di HTML mediante lo studio individuale.
Più in particolare, gli obiettivi del testo sono i seguenti:
◗
◗
◗
◗
familiarizzare il lettore con la creazione di pagine Web;
insegnare l’utilizzo di HTML;
presentare le più comuni caratteristiche e funzionalità delle pagine Web;
incoraggiare la curiosità e l’esplorazione indipendente delle risorse disponibili sul Web;
◗ sviluppare una forma mentis che faciliti l’apprendimento mediante esempi
ed esercizi;
◗ rendere più agevole lo studio autonomo, anche in contesti di insegnamento a distanza.
O
rganizzazione del testo
HTML Imparare per progetti, come il titolo stesso suggerisce, è organizzato in sei
“progetti”, nei quali il lettore deve affrontare la creazione di pagine Web in contesti, di studio o di lavoro, semplificati ma realistici. Non è presupposta alcuna
conoscenza relativa a Internet o al World Wide Web.
Ciascun progetto inizia con una lista di obiettivi di apprendimento e con la
descrizione dettagliata del risultato da ottenere. I singoli compiti da svolgere per
la realizzazione del progetto vengono presentati con una metodologia passo per
passo, videata per videata; il lettore viene guidato per mano alla realizzazione
dell’obiettivo prefissato.
Il progetto si conclude con un riepilogo e una puntuale elencazione delle
conoscenze acquisite. Una sezione di esercizi invita il lettore a mettersi alla
prova, verificare la propria comprensione e mettere in pratica ciò che ha appreso; ritorneremo su questo punto più avanti.
Il contenuto dei progetti è il seguente.
Progetto 1: Creazione e modifica di una pagina Web. In questo progetto il lettore viene introdotto alla terminologia del World Wide Web, ai tag HTML di
base e alle varie parti di una pagina Web. Viene spiegato come avviare e chiude-
PREFAZIONE
Prefazione • vii
HTML
viii • Prefazione
re Blocco note, come inserire titoli e testo in un file HTML, come creare un
elenco puntato, aggiungere uno sfondo e una linea orizzontale, salvare il file
HTML e visualizzarlo nel browser, stampare il file HTML e la pagina Web, e
come progettare una pagina.
Progetto 2: Creazione di un sito Web con collegamenti. In questo progetto il
lettore è introdotto a termini e definizioni relativi ai collegamenti. Viene spiegato come aggiungere un collegamento di posta elettronica, creare un collegamento a un’altra pagina dello stesso sito, a un altro sito e a target definiti all’interno di una pagina. Sono descritti i tipi di file di immagini, il testo alternativo
per le immagini, le dimensioni delle immagini. Viene mostrato come disporre
il testo attorno a un’immagine e come inserire immagini in una pagina Web.
Progetto 3: Creazione di tabelle in un sito Web. In questo progetto il lettore
impara a creare tabelle utilizzando tag HTML. Per prima cosa viene spiegato
come determinare quando servono le tabelle e come pianificarne l’uso; sono
trattati argomenti come le definizioni e i termini relativi alle tabelle, le loro
applicazioni, la creazione di tabelle senza bordi e l’inserimento di immagini,
l’allineamento verticale e orizzontale in una tabella, l’aggiunta di colore a una
cella e di collegamenti a un’altra pagina, o di posta elettronica, l’uso degli attributi COLSPAN e ROWSPAN, l’aggiunta di didascalie e gli spazi nelle celle e
tra le celle.
Progetto 4: Creazione di una mappa immagine. In questo progetto il lettore
impara a utilizzare una mappa immagine per creare pagine Web più avanzate.
Viene spiegato lo scopo delle mappe immagine, la scelta delle immagini e la
loro divisione in aree sensibili da utilizzare per i collegamenti, l’uso di testo per
i collegamenti. Inoltre sono utilizzati software di grafica per determinare le
coordinate necessarie per le mappe immagine.
Progetto 5: Creazione di frame in una pagina Web. In questo progetto il lettore
è introdotto all’uso dei frame per la creazione di pagine Web. Viene spiegato lo
scopo dei frame e quando utilizzarli, il ridimensionamento, le intestazioni, le
barre di scorrimento, la navigazione e il collegamento di frame, e sono mostrate
pagine a due e a tre frame. Inoltre viene descritto l’uso dell’attributo NORESIZE e la creazione di pagine Web a quattro frame.
Progetto 6: Creazione di moduli in una pagina Web. In questo progetto il lettore crea un modulo che consente ai visitatori di completare un sondaggio in
linea e inviare informazioni per posta elettronica. Viene spiegato lo scopo dei
moduli, fornendo le nozioni di base, come selezionare caselle di controllo e
voci di un menu di selezione, come utilizzare caselle di testo e creare un collegamento di posta elettronica per trasferire i dati del modulo allo sviluppatore
della pagina Web. Inoltre sono introdotti i menu di selezione avanzati.
A
pprendimento attivo
In questo libro si chiede al lettore di non rimanere un fruitore passivo, ma di
farsi parte attiva del processo di apprendimento; sta qui, a nostro parere, buona
parte della differenza tra la semplice lettura di un testo e l’assimilazione delle
informazioni che vi sono contenute.
Nel corso di ciascun progetto, il lettore può riprodurre esattamente ciò che
accade sulla pagina lavorando al proprio computer, seguendo le istruzioni passo
passo e utilizzando, ove necessario, i file che vengono messi a sua disposizione
nel Disco Dati HTML (scaricabile dal sito dell’editore seguendo le istruzioni
riportate più avanti).
Gli apparati di fine progetto hanno l’obiettivo di rinforzare ulteriormente
l’apprendimento.
◗ Conoscenze acquisite Una lista dettagliata dei compiti illustrati nel
corso del progetto con l’indicazione del numero di pagina corrispondente alla relativa procedura passo passo; è un ottimo strumento per un
ripasso veloce.
◗ Verificate le conoscenze Una serie di attività da svolgere “con carta e
matita” per accertarsi di aver capito quanto esposto nel testo: domande
vero/falso e a risposta multipla, semplici analisi di listati HTML.
◗ Utilizzate la Guida Brevi “escursioni guidate” sul Web per raccogliere
spunti e suggerimenti sugli argomenti del progetto, al termine delle quali
al lettore è chiesto di esporre per iscritto le proprie conclusioni.
◗ Utilizzate le conoscenze Un esercizio in cui viene richiesto di applicare
concretamente, su un file fornito nel Disco Dati HTML, le conoscenze
apprese nel corso del progetto.
◗ Nel laboratorio Una serie di esercizi nei quali il lettore viene invitato a
risolvere problemi specifici, analoghi a quello al centro del progetto, con
l’aiuto di quanto ha appreso.
◗ Casi e applicazioni Una serie di “mini-casi” ispirati a situazioni realistiche che stimolano ad applicare le conoscenze apprese a contesti differenti
e ad apportare un proprio contributo creativo.
B
ooksite
Questo libro non si ferma alla carta. Al testo è affiancato un sito Web dove il
lettore può trovare i collegamenti a risorse in rete per ulteriori approfondimenti, e dal quale può scaricare i file che compongono il Disco Dati HTML.
C
ome creare il Disco Dati
1. Inserite un floppy disk formattato nell’unità A. Avviate il browser e inserite l’URL:
www.apogeonline.com/education/booksite
2. Nella pagina Web corrispondente, fate clic sul titolo del libro desiderato.
3. Nella pagina Web del libro, fate clic su “Scaricate il Disco Dati”.
4. Se appare la finestra di dialogo Salva con nome, andate al punto 5. Se
appare la finestra di dialogo Download del file, accertatevi che sia selezionata l’opzione Salva l’applicazione su disco, quindi fate clic su OK.
5. Quando appare la finestra di dialogo Salva con nome, scegliete una cartella sull’hard disk nella quale scaricare il file. Annotatevi il nome della
cartella indicato nella casella di testo Salva in e il nome del file indicato
nella casella di testo Nome file: vi saranno utili nel successivo punto 7.
Fate clic su Salva.
6. Quando appare una finestra di dialogo che annuncia il completamento
dell’operazione di download, fate clic su Chiudi. Chiudete il browser.
PREFAZIONE
Prefazione • ix
HTML
x • Prefazione
7. Dal menu Start di Windows avviate Esplora risorse e visualizzate il contenuto della cartella in cui avete scaricato il file. Fate doppio clic sul
nome del file nella parte destra della finestra Esplora risorse.
8. Quando compare la finestra di dialogo WinZip Self-Extractor, digitate a:
nella casella di testo Unzip to folder, quindi fate clic su Unzip.
9. Quando la finestra di dialogo WinZip Self-Extractor indica il numero
dei file decompressi, fate clic su OK. Fate clic su Close nella finestra di
dialogo WinZip Self-Extractor. Chiudete Esplora risorse.
10. Rimuovete il floppy disk dall’unità A ed etichettatelo “Disco Dati [titolo
del libro].
A questo punto siete pronti a iniziare: buon lavoro!
R
ingraziamenti
Questo libro è il frutto della collaborazione di numerosi professionisti dell’editoria. Prima tra loro è Becky Herrington, direttore della produzione e designer;
sotto la sua direzione hanno lavorato Doug Cowley, responsabile della produzione, Ginny Harvey, specialista ed editor di collana, Ken Russo, Web designer
senior, Mike Bodnar, responsabile della produzione associato, Mark Norton,
Web designer, Stephanie Nance, grafica e copertina, Marlo Mitchem, Chris
Schneider, Ellana Russo e Hector Arvizu, grafici, Jeanne Black e Betty
Hopkins, esperti di Quark, Nancy Lamm e Laura Michaels, copyeditor,
Cherilyn King, correttore di bozze, Cristina Haley, indice, Sarah Everson di
Image Quest, ricercatrice di foto, Susan Sebok e Ginny Harvey, redattori.
Un ringraziamento speciale a Richard Keaveny, editor, Jim Quasney, consulente di collana, Lora Wade, product manager, Megan Walsh, product manager
associato, Francis Schurgot, product manager Web, Tonia Grafakos, product
manager Web associato, Scott Wiseman, sviluppatore in linea, Rajika Gupta,
responsabile marketing, Erin Bennet, assistente editoriale.
Gary B. Shelly
Thomas J. Cashman
Denise M. Woods
