easy INFORMATICA TOP DOWN M. Fiumetti - A. Casini Ropa Volume 1 IMPARIAMO A PROGRAMMARE FACILITAZIONI PER LO STUDIO C. Iacobelli M.L. Ajme V.

Transcript

1 Questo volume sprovvisto del talloncino a fronte (o opportunamente punzonato o altrimenti contrassegnato) è da considerarsi copia di saggiocampione gratuito, fuori commercio (vendita e altri atti di disposizione vietati art.17, c.2 L.633/1941). Esente da I.V.A. (D.P.R , n.633, art.2, lett.d). T C. Iacobelli M.L. Ajme V. TOP DOWN Volume 1 IMPARIAMO A PROGRAMMARE Introduzione all informatica Le basi dell informatica Primi elementi di programmazione La selezione Struttura iterativa La programmazione complessa Le strutture dati semplici Le strutture dati complesse Volume 1 IMPARIAMO A PROGRAMMARE Volume 2 STRUTTURE DATI, OGGETTI, FILE Volume 3 LE BASI DI DATI E LE RETI TOP DOWN C. Iacobelli M.L. Ajme V. Marrone ne ro e 1 m M lu 5 e o 6 m V 3 Aj 2 ill N 485 be OW 87 co D 8 Ia P 78O 9 ar ISBN ISBN ISBN FACILITAZIONI PER LO STUDIO Organizzazione didattica per lezioni: più facile organizzare lo studio e il ripasso Teoria a due velocità: gli approfondimenti sono ben individuabili Codifica sempre in due linguaggi: si può scegliere quale utilizzare M. Fiumetti A. Casini Ropa INFORMATICA easy Prezzo al pubblico Euro 24,20 Cop Fiumetti.indd 1 05/01/11 12:24

2 VIII INFORMATICA EASY Indice INDICE Modulo 1 I sistemi informatici 1 L aspetto fisico del computer: l hardware 2 4 I fondamenti della tecnologia dell informazione 4 L architettura hardware del computer 5 L unità centrale di elaborazione: la cpu 6 La memoria centrale 6 La ROM (Read Only Memory) 6 La RAM (Random Access Memory) 7 La cache 7 I supporti di memorizzazione: le memorie di massa 7 Il disco fisso o hard disk 8 Le chiavette USB 8 Le flash memory 9 I CD 9 I DVD 9 I Bluray disk 9 Le periferiche 9 2 Il cuore del computer: il software 16 Che cos è il software 16 Il software di base 16 Il sistema operativo 17 Il software applicativo 18 I linguaggi di programmazione La tastiera 10 Il mouse 10 Altri dispositivi di puntamento 11 Lo scanner 11 Il lettore ottico 11 La macchina fotografica digitale 11 Il microfono 11 La tavoletta grafica 11 3 Conosciamo il sistema operativo Windows 22 La web cam 12 L evoluzione dei sistemi operativi 22 Il monitor 12 Il bootstrap 22 Il monitor touch screen 12 Le icone 24 La stampante 12 La barra delle applicazioni 25 Il plotter 13 Il menu start 26 Le casse acustiche 13 Spegnere correttamente il computer 27 Il modem 13 Le finestre 27 Tipi di computer 13 Le finestre di dialogo Lavorare in multitasking 30

3 Indice INFORMATICA EASY Windows: le caratteristiche del computer utilizzato 34 6 Dal problema al programma 56 L analisi e la comprensione dei problemi 56 L algoritmo 57 Il diagramma a blocchi 58 La codifica dell algoritmo: il programma Il concetto di programmazione strutturata 60 Impostare lo screen saver 39 La sequenza La selezione 60 L iterazione 61 La programmazione in sintesi Il pannello di controllo 34 Le informazioni di base sul computer utilizzato 34 Le stampanti installate 35 La coda di stampa 36 Modificare l aspetto del desktop 37 Cambiare lo sfondo del desktop 5 Windows: gestire file e cartelle 42 I file 42 Le tipologie di file 43 Le proprietà dei file 44 Le unità di memorizzazione 44 Le cartelle 44 Le raccolte 45 L applicazione risorse del computer 46 Muoversi tra drive e cartelle 48 La selezione di file e cartelle 48 Creare una nuova cartella 49 Spostare e copiare file o cartelle 49 Trascinare con il mouse 49 Utilizzare la tecnica taglia e incolla 49 Cancellare file o cartelle 50 Il cestino 50 Rinominare file o cartelle 51 Cercare i file 52 Utilizzare la casella di ricerca del menu Start 52 Utilizzare la casella di ricerca di Risorse del computer 52 7 Informatica e società 63 Il computer nella vita di ogni giorno 63 L ergonomia e l utilizzo del computer 65 Una corretta ergonomia per salute e sicurezza 66 Il computer e l impatto ambientale 67 La normativa sulla privacy e l informatica 68 La sicurezza dei dati: prevenire le perdite 69 Perdita accidentale dei dati 69 Le password 70 I firewall e i sistemi crittografici 70 I virus informatici 71 Tipi di malware 72 Gli antivirus 72 Il diritto d autore e il copyright Verifica di fine modulo 76 IX

4 X INFORMATICA EASY Indice Modulo 2 L Organizzazione e la gestione di informazioni testuali 78 1 Conoscere il word processor: Microsoft Word 80 Che cos è un Word processor 80 L interfaccia di Microsoft Word 80 L area del testo 81 I righelli 82 Le modalità di visualizzazione del documento 82 Impostare la pagina del documento: i margini 83 Utilizzo dei righelli 83 Utilizzare il controllo/comando 83 Creare un nuovo documento 84 Salvare il documento 84 Chiudere un documento Digitare e formattare il documento 86 La formattazione del documento 86 La formattazione del carattere 86 Selezionare il testo 88 Il formato paragrafo 89 L allineamento dei paragrafi 89 L interlinea e la spaziatura tra i paragrafi 90 Aggiungere uno sfondo al paragrafo 91 Copiare il formato 91 Il controllo ortografico 92 Aggiungere una ClipArt 98 Inserire un immagine 99 Ridimensionare un elemento grafico 99 Posizionare gli elementi grafici Rivedere e perfezionare il documento Le caselle di testo 106 Trovare e sostituire parole e frasi 107 Tagliare, copiare e incollare testo ed elementi grafici 108 Utilizzare la tecnica taglia e incolla 108 Utilizzare la tecnica di trascinamento Stampare il documento con Word Gli elementi grafici 98 Formattare i paragrafi utilizzando i rientri Stampare il documento con Word Inserire elementi grafici in un documento Inserire un elemento grafico

5 Indice INFORMATICA EASY Inserire nuove righe e colonne Unire e dividere le celle di una tabella Applicare bordi e sfondi alla tabella 135 Personalizzare lo stile dell elenco puntato 114 La stampa unione 138 Modificare lo schema di numerazione di un elenco numerato Creare il documento principale Creare il file dati 139 Le WordArt 116 Collegare i dati variabili al documento principale 139 Verificare il collegamento ed effettuare la stampa Aggiungere contenuti particolari al documento Gli elenchi Modificare e formattare le WordArt con Word Modificare e formattare le WordArt con Word Creare un capolettera Disegnare con le forme Personalizzare il layout del documento 126 La sezione 126 Impaginare il testo a colonne 127 Personalizzare la larghezza delle colonne Writer: il word processor di Open Office 146 L interfaccia di Writer 146 Creare un documento 146 Salvare un documento 147 Stampare un documento 147 Impostare i margini e le formattazioni della pagina 148 Le tabulazioni 132 Le tabelle 132 Creare una tabella personalizzata 133 Impostare la formattazione dei caratteri 148 La struttura di una tabella 133 Creare un oggetto fontwork 148 Spostarsi nella tabella 133 Inserire elenchi puntati e numerati 149 Selezionare le parti di una tabella 133 Applicare un capolettera 149 Personalizzare il layout di una tabella Modificare la dimensioni di righe e colonne 153 Verifica di fine modulo XI

6 XII INFORMATICA EASY Indice Modulo 3 Il foglio elettronico Conoscere il foglio elettronico: Microsoft Excel 160 Che cos è il foglio elettronico 160 L interfaccia di Microsoft Excel 160 Il foglio di lavoro 161 Le righe e le colonne 162 Adattare automaticamente la larghezza delle colonne al contenuto della cella 162 Selezionare le celle 163 Selezionare un intervallo di celle adiacenti 163 Selezionare un intervallo di celle non adiacenti 163 I dati e il loro inserimento nel foglio di lavoro 164 Inserire i dati utilizzando la funzione di riempimento automatico 164 Correggere i dati 165 Inserire le formule 178 Salvare la cartella di lavoro 165 I riferimenti relativi, assoluti e misti I riferimenti relativi I riferimenti assoluti 180 I riferimenti misti 180 I messaggi di errore associati all uso delle formule Excel: formule e funzioni Excel: formattare e personalizzare il foglio elettronico 170 Le funzioni 181 La formattazione dei dati 170 Inserire le funzioni 182 La formattazione dei caratteri 170 Il pulsante somma 183 La formattazione dei dati numerici 171 La funzione logica se 185 Allineare e orientare i dati 172 Gli operatori logici 186 Applicare bordi e sfondi 173 L operatore e 186 I pulsanti bordi e colore riempimento 173 L operatore o 186 Le schede della finestra formato celle Operare su righe e colonne Stampare il foglio di lavoro Funzioni statistiche Funzioni statistiche 190

7 Indice INFORMATICA EASY La funzione media 190 La funzione min La funzione max 190 Creare e modificare i grafici con Excel Creare un grafico 202 Modificare i grafici 204 Spostare e ridimensionare i grafici Modalità di inserimento e copia dei dati 191 L inserimento contemporaneo di dati in più celle 191 La copia e lo spostamento dei dati 191 La funzione conta.se 194 La formattazione condizionale Calc si presenta L interfaccia di Calc 210 L inserimento e la modifica dei dati Formattare i dati inseriti e operare su righe e colonne 211 I grafici 200 Utilizzare formule e funzioni 212 I tipi di grafici disponibili 201 Salvare e stampare il foglio di lavoro Excel: la rappresentazione grafica dei dati 6 Calc: il foglio elettronico di Open Office 210 Creare e modificare i grafici con Excel Creare un grafico di base Verifica di fine modulo 216 Modificare il layout e lo stile del grafico 202 XIII

8 XIV INFORMATICA EASY Indice Modulo 4 La comunicazione globale e Internet 1 Le reti di comunicazione Reti informatiche 222 La struttura delle reti 222 Le tipologie di rete 223 Le modalità di trasmissione dei dati 224 La trasmissione dei dati con la telefonia cellulare 225 La topologia delle reti 225 I componenti delle reti Esploriamo Internet 229 Internet si presenta 229 Le origini 229 Internet oggi 230 Collegarsi a Internet 231 Le modalità di collegamento a Internet 231 La trasmissione delle informazioni 232 Il protocollo di trasmissione 232 L indirizzo IP La navigazione con il browser 243 Utilizzare l indirizzo del sito 243 Utilizzare i link ipertestuali 244 Salvare gli indirizzi preferiti Cercare informazioni sul web: i motori di ricerca 245 I servizi di Internet 233 Le ricerche per parole chiave 246 Chat 233 Le ricerche per argomento 247 Newsgroup 234 Il risultato delle ricerche 247 Blog 234 Ricercare immagini, audio e video 247 Podcasting 235 Operazioni sulle pagine web 248 I social network 235 Salvare la pagina web come file 248 Ecommerce 236 Copiare informazioni di tipo testuale Copiare informazioni di tipo grafico Navigare nel WWW 239 Inserire il collegamento a una pagina web in un documento 250 Il World Wide Web 239 Stampare una pagina web 250 Gli indirizzi web 240 Prelevare file da Internet 250 Il browser: l interfaccia per navigare Avviare Internet Explorer

9 Indice INFORMATICA EASY 254 La struttura di un documento HTML 268 La posta elettronica 254 Salvare il documento HTML 269 Gli indirizzi di posta elettronica 255 Visualizzazione della pagina 270 Creare un account per la lettura della posta 256 Il corpo del documento e la formattazione del testo 270 Il messaggio 257 Gli attributi del TAG <body> 270 Inviare con Windows live mail 258 Scrivere messaggi 258 Titoli: dimensioni e scelta dei caratteri 271 Inviare con Outlook express 259 L organizzazione in paragrafi 272 Scrivere messaggi 260 La formattazione dei caratteri 273 Leggere i messaggi 260 Gli elenchi 273 La rubrica dei contatti 261 Inserire immagini nelle pagine web 275 Inserire link nelle pagine web 276 I collegamenti interni 276 I collegamenti esterni 277 Il trasferimento delle pagine: dal computer a internet Il linguaggio html Gli elementi della sintassi di HTML 267 Verifica di fine modulo Comunicare via La posta elettronica certificata (PEC) 262 La posta elettronica e la privacy Il linguaggio HTML per creare pagine web XV

10 XVI INFORMATICA EASY Indice Modulo 5 LA MULTIMEDIALITÀ 1 Gli strumenti della multimedialità La multimedialità 288 I suoni: la digitalizzazione e i file audio 289 Il suono e le sue caratteristiche 289 La digitalizzazione del suono 289 Acquisire i suoni con il computer 290 La compressione audio 290 I file audio 291 Le immagini digitali 291 Immagini bitmap e immagini vettoriali 291 Le dimensioni delle immagini digitali 292 La profondità di colore 293 I modelli di colore 294 La compressione delle immagini digitali 295 I formati dei file grafici 295 L acquisizione di un immagine digitale tramite scanner 296 L acquisizione di un immagine digitale tramite fotocamera digitale 297 I video digitali 297 Il video Visualizzazione per l esecuzione della presentazione 304 Il layout delle diapositive 304 Applicare un tema a una presentazione La compressione dei file video: il codec Inserire, copiare, spostare ed eliminare le diapositive Inserire una nuova diapositiva 305 I formati dei file video 299 Copiare una diapositiva 306 L acquisizione di un filmato digitale tramite videocamera digitale Spostare le diapositive Eliminare una diapositiva Inserire testo ed elementi grafici in una diapositiva 306 Inserire il testo 307 Inserire elementi grafici 307 Le animazioni e le transizioni PowerPoint: creare una presentazione Che cos è una presentazione multimediale L interfaccia di Microsoft PowerPoint 302 Inserire animazioni e transizioni alle diapositive con PowerPoint Le modalità di visualizzazione 303 Applicare un animazione Visualizzare l elenco delle animazioni applicate alla diapositiva 311 Visualizzazione per la creazione e la modifica delle presentazioni

11 Indice INFORMATICA EASY Personalizzare l animazione 311 Rimuovere l animazione 311 Utilizzare PowerPoint per realizzare un ipertesto 322 Applicare una transizione 311 Inserire i pulsanti d azione 322 Personalizzare la transizione 311 Inserire collegamenti ipertestuali Inserire animazioni e transizioni alle diapositive con PowerPoint Avviare la presentazione 313 Personalizzare le modalità di presentazione Gli ipertesti Impress: presentazioni con Open Office Impress si presenta La procedura guidata per la creazione di una presentazione 328 L interfaccia di impress 329 Il layout delle diapositive 330 Applicare uno sfondo alle diapositive L ipertesto: una ragnatela di informazioni 318 Gli elementi di un ipertesto 319 La struttura di un ipertesto 319 Applicare animazioni e transizioni alle diapositive Progettare l ipertesto Realizzare l ipertesto Pubblicare l ipertesto 321 Verifica di fine modulo 336 XVII

12 4 LE CONOSCENZE > Conoscere le caratteristiche delle principali categorie di reti di computer > Conoscere le principali caratteristiche delle apparecchiature delle reti > Sapere che cos è Internet e quali sono e che cosa offrono i principali servizi offerti dalla rete > Conoscere le modalità di funzionamento dei browser e dei motori di ricerca > Conoscere i rischi e i limiti nell uso della rete, con particolare riferimento a sicurezza e privacy > Conoscere i principali comandi di HTML LE abilità operative > Saper individuare i vari dispositivi di una rete > Saper navigare in Internet utilizzando Microsoft Internet Explorer > Saper utilizzare la rete Internet per ricercare fonti e dati di tipo tecnicoscientifico ed economico > Saper utilizzare la rete per attività di comunicazione interpersonale, avvalendosi dei programmi di posta elettronica quali Microsoft Live Mail e Outlook Express > Creare un documento in HTML per la creazione di una pagina WEB e visualizzarlo utilizzando un browser

13 La comunicazione globale e Internet 1 LE RETI DI COMUNICAZIONE Reti informatiche Le modalità di trasmissione dei dati La topologia delle reti I componenti delle reti 2 ESPLORIAMO INTERNET Internet si presenta Collegarsi a Internet La trasmissione delle informazioni I servizi di Internet 3 NAVIGARE NEL WWW Il World Wide Web Il browser: l interfaccia per navigare La navigazione con il browser Cercare informazioni sul web: i motori di ricerca Operazioni sulle pagine web 4 COMUNICARE VIA La posta elettronica Il messaggio Inviare con Windows Live Mail Inviare con Outlook Express Leggere i messaggi La rubrica dei contatti La posta elettronica certificata (PEC) La posta elettronica e la privacy 5 IL LINGUAGGIO HTML PER CREARE PAGINE WEB Il linguaggio HTML Il corpo del documento e la formattazione del testo Gli elenchi Inserire immagini nelle pagine web Inserire link nelle pagine web Il trasferimento delle pagine: dal computer a Internet

14 5 Il linguaggio HTML per creare pagine web IL LINGUAGGIO HTML L HTML (Hyper Text Markup Language) è il linguaggio per costruire gli ipertesti: non è un linguaggio di programmazione, ma un linguaggio di markup, utilizzato per descrivere le modalità e le istruzioni che gestiscono le caratteristiche formali (impaginazione, formattazione, visualizzazione grafica e così via) del contenuto testuale e non testuale (presenza di immagini) di un ipertesto che dovrà poi essere visualizzato utilizzando un browser. I documenti creati con questo linguaggio hanno estensione.html o.htm La sintassi dell HTML è stata stabilita dal World Wide Web Consortium (W3C), e questo linguaggio di pubblico dominio è stato sviluppato alla fine degli anni Ottanta da Tim BernersLee al Cern di Ginevra, contemporaneamente al protocollo http che supporta il trasferimento dei documenti in formato HTML. A metà degli anni Novanta, il linguaggio HTML ha avuto una forte diffusione a seguito dei primi utilizzi commerciali di Internet. Nel corso degli anni, l HTML ha subito numerosi revisioni, ampliamenti e miglioramenti. L ultima versione disponibile è la versione 4.01 resa pubblica il 24 dicembre 1999 anche se, attualmente, è in fase di implementazione la versione HTML 5. I documenti HTML possono essere creati utilizzando: > Normali editor di testo che generano file ASCII. > Editor WYSIWYG specializzati per l HTML che consentono all autore di occuparsi soprattutto dell aspetto grafico finale della pagina poiché il codice vero e proprio viene generato in automatico. Questi editor presentano, in genere, una funzionale interfaccia grafica (all interno della quale è possibile spostarsi col mouse), diversi menu e altre funzioni di assistenza. Gli elementi della sintassi di HTML Qualsiasi documento scritto in HTML è caratterizzato da una sintassi il cui componente principale è l elemento (cioè la struttura di base), al quale è delegata la funzione di formattare i dati o indicare informazioni al browser. Ogni elemento è costituito da una sequenza di caratteri delimitata da parentesi angolari < e > che prende il nome di TAG (contrassegno, markup) che, letta e interpretata dal browser, produrrà le visualizzazioni e le azioni corrispondenti. Ad esempio, il TAG <BR>, che deriva da break, aggiunge un interruzione di riga nel testo. Nella scrittura dei TAG si può utilizzare, indifferentemente, il carattere maiuscolo o minuscolo. Esistono due tipi di TAG: > TAG contenitori: formati da un TAG iniziale (o di apertura), un testo e un TAG finale (o di chiusura). Il testo indicato tra i due TAG è la parte del documento sul quale è applicato il formato definito dal TAG stesso ed è detto sezione. Il TAG finale è uguale a quello iniziale, con l unica eccezione che il suo nome è preceduto dal carattere / (slash o barra).

15 268 Modulo 4 La comunicazione globale e Internet Esempio: Tag iniziale Sezione Tag finale <I> Questo testo è in corsivo </I> Quando il browser leggerà questa istruzione, sullo schermo apparirà il seguente messaggio: Questo testo è in corsivo > TAG a chiusura implicita o vuoti, che non devono contenere o racchiudere alcun tipo di informazione perché presentano un applicazione precisa. Ad esempio, quelli che gestiscono l a capo di una riga, o quello che ordina il tracciamento di una riga orizzontale di separazione tra paragrafi e così via. Entrambe le tipologie di TAG possono includere altri elementi HTML, detti attributi, dotati di determinati valori, utili a modificare l effetto del TAG. Gli attributi vanno inseriti nel TAG di apertura e i valori specificati vanno racchiusi tra (virgolette). Alcuni TAG accettano più attributi, in questo caso vanno separati da uno spazio. Qualora non siano specificati gli attributi a TAG che li accettano, vengono automaticamente assunti i valori di default. Ad esempio, al TAG che consente di inserire una linea orizzontale nella pagina può essere specificato un attributo che definisca lo spessore e la lunghezza della riga, o l allineamento della riga stessa. In genere, un TAG al quale possono essere associati attributi presenta la sintassi: <TAG attributo1= valore attributo2= valore... > attenzione Occorre premere il tasto di SOLO al termine della sintassi, dopo il carattere > che chiude il TAG. Se al TAG è associato un testo che va riprodotto nella pagina WEB, il tasto di va premuto ANCHE per separare i periodi La struttura di un documento HTML Il primo elemento di un documento HTML è quello che ne identifica il tipo (Document Type Definition, DTD), poiché deve segnalare al browser l indirizzo delle specifiche HTML, utilizzate nel documento, per identificarne le regole di interpretazione e di visualizzazione appropriate. Questa definizione deve, pertanto, precedere tutti i tag del documento. Dopo il DTD, il documento HTML presenta una struttura ad albero nidificato, composta di sezioni delimitate da tag appropriati, al cui interno sono contenute altre sottosezioni più piccole, sempre delimitate da tag. Tag di apertura Tag del titolo e al loro interno il titolo Tag della sezione iniziale Tag del corpo e al loro interno il contenuto dell ipertesto Tag di chiusura

16 Unità 5 Il linguaggio HTML per creare pagine web La struttura più esterna, eccetto la DTD, è quella che delimita l intero documento e specifica che il file è realizzato in linguaggio HTML; essa è compresa tra i tag <html> e </html>. Il testo e i comandi HTML presenti nel documento HTML devono trovarsi all interno dei tag HTML iniziale e finale. Dopo il tag <html>, il documento è composto di due sezioni ben distinte: > Una parte iniziale d intestazione o header (che in genere non è visualizzata dal browser), contenente indicazioni di controllo (informative, dichiarative e d imposta zione complessiva del documento). Questa parte è inclusa tra i tag <head> e </head>. I tag utilizzati nella sezione iniziale svolgono funzioni di controllo e di servizio come ad esempio: Inviare informazioni ad applicazioni esterne (ad esempio, motori di ricerca) o al browser. Controllare informazioni aggiuntive nel protocollo http. Gestire collegamenti a file di servizi esterni. Inserire script o informazioni di stile. Associare il titolo alla pagina e visualizzarlo nella finestra principale del browser. Quest ultima funzione è molto importante perché riguarda l unico elemento obbligatorio, caratterizzato dai TAG <TITLE> e </TITLE>. Esso consente di: Assegnare un titolo alla pagina corrente che va posto sulla barra del titolo della finestra del browser. Fornire un riferimento a chi vuole inserire un bookmark sulla pagina. Vedere il titolo in ogni pagina stampata. Non è previsto un limite alla lunghezza del titolo, ma è opportuno non superare i 64 caratteri, perché alcuni browser potrebbero non visualizzarli correttamente. > Una sezione del corpo o body (che verrà visualizzata dal browser), contenente la parte informativa vera e propria dell ipertesto: il testo, le immagini, i link, gli oggetti multimediali e così via. Questa sezione è delimitata tra i TAG <body> e </body>. In questa sezione sono utilizzati i TAG per la formattazione dell ipertesto che controllano: le intestazioni (titoli di capitoli, di paragrafi e così via) le strutture e l aspetto del testo (testo indentato, paragrafi, grassetto, corsivo e così via) le tabelle i collegamenti ipertestuali e le ancore il layout generico del documento l inserimento di immagini, di contenuti multimediali (audio, filmati, animazioni e così via). Non sono specificati altri standard obbligatori per quanto riguarda l ordine o il posizionamento dei tag all interno dell header o del body, ferma restando la regola che stabilisce che le sottosezioni non si devono sovrapporre, ossia ogni sottosezione deve essere chiusa prima di iniziare la sottosezione successiva. Se si desidera inserire nel documento HTML un commento che non sia visualizzato dal browser, ma che serva da promemoria, va utilizzato il TAG <! Commento> dove commento è la descrizione che si desidera far apparire come commento nel documento HTML. Salvare il documento HTML Se si utilizzano gli editor messi a disposizione da Windows (ad esempio, Blocco Note o Word Pad) per salvare il documento realizzato in HTML, dopo aver selezionato il comando di salvataggio, occorre indicare: > Nella casella nome, il nome che si desidera assegnare al file, specificando l estensione per consentire l interpretazione del file stesso come documento HTML. L estensione da specificare è HTM. 269

17 270 Modulo 4 La comunicazione globale e Internet > Nella casella Salva come, l opzione (fra quelle disponibili) che consenta il salvataggio come Documento di testo. Se si utilizza Blocco Note l unico formato da scegliere è Tutti i file che, durante il salvataggio, consente di attribuire l estensione desiderata al file. Al file, così memorizzato, è attribuita l icona è scritto in linguaggio HTML. che fa riconoscere al browser che il file Visualizzazione della pagina Per verificare i risultati operativi del documento HTML occorre: > Avviare il browser Internet Explorer e, selezionata la modalità Offline, fare CLIC su Strumenti e su. di > Digitare, nella barra degli indirizzi, il nome del documento HTML completo del percorso di salvataggio e fare CLIC su : sullo schermo appare il risultato delle istruzioni memorizzate nel file, mentre i comandi del linguaggio non sono visualizzati. IL CORPO DEL DOCUMENTO E LA FORMATTAZIONE DEL TESTO Gli attributi del TAG <body>> Il TAG <BODY> presenta la possibilità di indicare una serie di attributi per definire i margini, i colori usati per lo sfondo, per i testi e per i link. Alcuni degli attributi che si possono inserire sono i seguenti. SCOPO DELL ATTRIBUTO SINTASSI SPIEGAZIONE DEL VALORE DELL ATTRIBUTO Inserire un immagine come sfondo della pagina BACKGROUND= URL URL rappresenta il nome dell immagine GIF o JPG. Se l immagine non è memorizzata nello stesso percorso dell ipertesto, selezionare il percorso Inserire un colore come sfondo della pagina BGCOLOR= #RRGGBB Definire il colore da applicare al testo TEXT= #RRGGBB #RRGGBB è l indicazione del colore che si vuole utilizzare. Può essere espresso o con una parola chiave (nome del colore in inglese, per i colori principali) o con il codice esadecimale corrispondente Definisce il colore da attribuire ai link LINK= #RRGGBB Definire il colore da attribuire ai link visitati VLINK= #RRGGBB La numerazione esadecimale dipende dal modo con cui i monitor visualizzano i colori (tecnica della sintesi additiva), tramite la miscelazione di sfumature dei tre colori primari:

18 Unità 5 Il linguaggio HTML per creare pagine web il rosso (Red), il verde (Green) e il blu (Blue), dando luogo al formato RGB. Ciascuno dei tre colori può essere presente in una quantità diversa che va da 0 a 255 che, in formato esadecimale, si esprime da 00 a FF. Titoli: dimensioni e scelta dei caratteri Colore Parola chiave Valore esadecimale Nero Verde Grigio Bianco Giallo Azzurro Rosso Blu Arancione Black Green Gray White Yellow Aqua Red Blue Orange # # # #FFFFFF #FFFF00 #00FFFF #FF0000 #0000FF #FFA500 In una pagina web possono apparire titoli di vario livello gerarchico. Per la definizione dei titoli, il linguaggio HTML mette a disposizione appositi comandi (fino a un massimo di 6 livelli diversi) attribuendo, in fase di visualizzazione della pagina, caratteri più grandi all utilizzo di livelli maggiori e viceversa. L importanza del titolo è evidenziata anche dal grassetto o dall inserimento di righe bianche, prima e dopo il titolo. Non tutti i browser seguono alla lettera gli standard, e così avviene che il numero di righe bianche lasciate sopra e sotto, o il grassetto del carattere non sempre siano rispettati. In ogni caso, l utilizzo dei TAG avviene con un criterio logico, quindi non capiterà mai che un titolo di livello inferiore sia enfatizzato più di uno di livello superiore. GLI ATTRIBUTI DEL TAG la sintassi DEL TAG Iniziale <Hx> Finale </Hx> X È il livello di importanza del titolo e può assumere un valore da 1 a 6, dove 1 è il titolo gerarchicamente più importante ALIGN= valore Consente di specificare l allineamento del titolo. Valore può essere left, center o right Esempio: <HTML> <HEAD> <TITLE> Primo esempio di documento HTML </TITLE> </HEAD> <BODY> <H1 ALIGN= LEFT > TITOLO DI PRIMO LIVELLO </H1> <H2 ALIGN= LEFT > TITOLO DI SECONDO LIVELLO </H2> <H3 ALIGN= LEFT > TITOLO DI TERZO LIVELLO </H3> <H4 ALIGN= LEFT > TITOLO DI QUARTO LIVELLO </H4> <H5 ALIGN= LEFT > TITOLO DI QUINTO LIVELLO </H5> <H6 ALIGN= LEFT > TITOLO DI SESTO LIVELLO </H6> </BODY> </HTML> attenzione Ignorare il colore rosso inserito nei comandi. È solo un espediente didattico per meglio evidenziarli 271

19 272 Modulo 4 La comunicazione globale e Internet Per impostare il tipo di carattere, la sua dimensione e il colore, occorre conoscere il nome tecnico con cui viene indicato il carattere che si vuole utilizzare (Times New Roman, Arial, Calibri, ecc.). GLI ATTRIBUTI DEL TAG la sintassi DEL TAG Iniziale <FONT> Finale </FONT> FACE= tipo font Tipo font è il nome tecnico del carattere (Arial, Calibri e così via) SIZE= dimensione Dimensione indica la grandezza dei caratteri con un numero variabile da 1 (dimensione minima) a 7 (dimensione massima) COLOR= #RRGGBB #RRGGBB è l indicazione del colore che si vuole utilizzare. Per i valori che può assumere vedi pag. 271 Esempio: <HTML> <HEAD> <TITLE> Terzo esempio di documento HTML </TITLE> </HEAD> <BODY> <H1 ALIGN= LEFT > <FONT FACE= CALIBRI COLOR= GREEN > TITOLO CON CARATTERE E COLORE MODIFICATO </FONT> </H1> </BODY> </HTML> L organizzazione in paragrafi Il testo della pagina web può essere suddiviso in paragrafi, allo scopo di aumentarne la leggibilità. I TAG per l inserimento degli a capo in un testo sono indispensabili, anche perché gli eventuali a capo inseriti dall editor di testi nella fase di scrittura del documento HTML, non vengono presi in considerazione dal browser nel momento di visualizzazione della pagina. Da notare che i successivi TAG, utilizzati per suddividere il testo in paragrafi, non necessitano del TAG di chiusura. GLI ATTRIBUTI DEL TAG la sintassi DEL TAG <P> <HR> <BR> <P> Indica l inizio di un nuovo paragrafo e lascia una riga bianca <BR> Porta a capo il testo senza lasciare righe bianche <HR> Inserisce una riga orizzontale di separazione

20 Unità 5 Il linguaggio HTML per creare pagine web Esempio: <HTML> <HEAD> <TITLE> Quarto esempio di documento HTML </TITLE> </HEAD> <BODY> <H1> INGRESSO AL MUSEO </H1> Il museo sarà aperto da Dicembre fino a fine Settembre con i seguenti orari <P> Dicembre Aprile ore 1016 <BR> Maggio Settembre ore 1019 <HR> Il biglietto d ingresso ha un costo di 7,00 per gli adulti e 3,50 per i bambini dai 4 ai 12 anni </BODY> </HTML> Altri comandi che consentono di suddividere il testo su più righe sono i seguenti: > <BLOCKQUOTE> e </BLOCKQUOTE>: il testo compreso tra le due istruzioni, viene separato dal paragrafo precedente e da quello successivo da una riga vuota e rientrato rispetto al margine sinistro. > <PRE> e </PRE>: il testo compreso tra i due TAG viene visualizzato dal browser (così come è stato scritto nell editor), rispettando i ritorno a capo e gli spazi come risultano nel file sorgente. > <CENTER> e </CENTER>: per posizionare il testo, compreso fra i due comandi, al centro della pagina. La formattazione dei caratteri I caratteri del testo possono essere formattati, modificando il tipo, la dimensione e il colore (come visto in precedenza) o valorizzati, applicando effetti particolari come il grassetto, la sottolineature, il corsivo e così via, analogamente a quanto avviene in Word. Più effetti possono essere combinati tra loro. I TAG EFFETTO APPLICATO <B> testo </B> Grassetto <U> testo </U> Sottolineato <STRIKE> testo </STRIKE> Testo barrato <BLINK> testo </BLINK> Testo lampeggiante <I> testo </I Corsivo Gli elenchi Nelle pagine web si possono inserire elenchi, per meglio organizzare le informazioni e migliorarne l accessibilità. Utilizzando TAG specifici, il linguaggio HTML consente di definire tre tipi di elenchi: 273