Sommario e prefazione
annuncio pubblicitario
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
