Capitolo X Esercitazione n. 10: Word e HTML

Transcript

1 Capitolo X Esercitazione n. 10: Word e HTML Scopo: Creare un semplice sito web con Microsoft Word. Il sito web è composto da una home page, e da altre due pagine (curriculum e hobby) ad essa collegate mediante hyperlink. La struttura del sito è mostrata nella figura a la egli hyperlink esterni, verranno provate altre funzionalità (inserimento sfondo della pagina, inserimento immagini, inserimento hyperlink interni). Hobby Home page Curriculum A Inizio 1. Accendi il computer e accedi al sistema operativo digitando il proprio nome e password. Al termine della fase di avvio, sarà visualizzata la finestra principale del sistema operativo (es. Windows Vista) 2. Recupera dal sito i file n la procedura descritta nel capitolo introduttivo: testo1.doc (contiene il testo che dovrai usare come contenuto della pagina curriculum), sfondo1.jpg 3. Avvia MS Word e crea un nuovo documento. Scegli il modello Web (Office 2003) altrimenti Documento vuoto. 4. Realizza una semplice home page con almeno cinque righe di 97

2 testo, inserendo alcuni tuoi dati personali. 5. Salva il file come web nella directory di lavoro precedentemente creata (clic sul pulsante Office > Salva con nome > espandi la voce Tipo file > seleziona Web filtrata (*.htm;*.html)); inserisci come nome file pghome; assegna un titolo a piacere alla pagina (pulsante Cambia titolo); il file viene salvato con estensione.htm.e viene attivata su Word la visualizzazione Layout web. Chiudi il file. quindi barra multifunzione > scheda Inserisci > Collegamento Ipertestuale egli File Esistente o Web e seleziona il file pghome.htm. Verifica che nella casella Indirizzo appaia il nome del file, quindi clic su OK. 8. Nota: il collegamento ipertestuale inserito, consentirà a un utente che sta navigando la pagina curriculum del nostro sito di tornare alla home page del sito stesso (file pghome.htm). B Inserimento hyperlink esterni ed interni 6. Apri il documento Word testo1.doc fornito nel materiale di partenza e salvalo come web filtrata nella directory di lavoro creata in precedenza. Assegna al file il nome curriculum.htm ed assegna un titolo a piacere alla pagina web. 7. Nella pagina curriculum inserisci un collegamento alla home page creata in precedenza (pghome.htm): seleziona il testo Torna alla home page, (già inserito nella quarta riga del file), 9. Crea ora due hyperlink interni al documento, ossia dei colle- iziale (righe 2 e 3 della pagina curriculum), portino a delle posizioni interne alla pagina web curriculum, corrispondenti in questo caso al titolo di ciascuna delle due sezioni del curriculum (1. Titoli di Studio, 2. Esperienze Professionali). Per fare ciò, ricorda che è necessario identificare con un segnalibro le posizioni interne della pagina web curriculum a cui devono puntare i collegamenti interni da realizzare. ATTENZIONE: analizza la figura successiva per capire meglio

3 37. Procedi come segue: identifica il titolo di ciascuna delle due sezioni con un segnalibro (seleziona il testo quindi barra multifunzione > scheda inserisci > Segnalibro, dai un nome al segnalibro quindi clic su Aggiungi). 10. tato Titoli di Studio, quindi barra multifunzione > scheda inserisci > Collegamento Ipertestuale llegamento ipertestuale, fai clic su ocumento, quindi nella lista delle posizioni interne, seleziona la corrispondente posizione segnalibro creata in precedenza. 11. Ripeti per la riga successiva (Esperienze Professionali). Inoltre, nello spazio tra le due sezioni del curriculum crea un hyperlink interno Torna (già inserito nella pagina). 12. Salva e chiudi il file Curriculum.htm. C Completa il sito web e naviga nel sito 13. Sempre con MS Word escrizione dei tuoi hobby che occupi almeno cinque righe. 14. Salva il file come web filtrata nella cartella precedentemente creata, assegnandogli il nome Hobby.htm. 15. Inserisci un link ipertestuale alla home page creata in precedenza (pghome.htm), utilizzando la frase Torna alla home page ed impostandola come collegamento ipertestuale (segui le istru

4 zioni riportate nei punti precedenti). 16. Apri nuovamente il file pghome.htm (con Microsoft Word); aggiungi un riferimento ipertestuale al file curriculum.htm ed un altro al file hobby.htm. Salva e chiudi. 17. agine da te creato. Avvia Internet Explorer, menù File > Apri, quindi con il pulsante Sfoglia localizza il file pghome.htm (in alternativa, localizza il file pghome.htm e fai doppio clic sulla Internet E- xplorer). 18. Fai clic sui due hyperlink della home page e verificane il funzionamento. Verifica, che sia partendo dalla pagina curriculum che dalla pagina hobby, è possibile ritornare alla home page. D Aggiunta di formattazione alla home page 19. Apri la home page con il browser e fai clic sul pulsante Modifica con Word nella barra degli strumenti di Internet Explorer. Si apre il file pghome.htm MS Word (in alterna- MS Word quindi clic sul pulsante Office > Apri > espandi il pulsante a discesa con il tipo dei file da aprire > seleziona Web (*.htm;*.html); quindi raggiungi la cartella di lavoro > seleziona il documento pghome.htm > Apri). 20. Inserisci ulteriore testo a piacere e applica su di esso alcune caratteristiche di formattazione (font Comic Sans, colore del testo della home page. Salva. 21. Torna alla home page visualizzata nel browser Internet Explorer e clicca sul pulsante Aggiorna per ri rsione della pagina dopo le modifiche. Verifica che la pagina caricata presenti le caratteristiche di formattazione impostate al punto precedente. E Aggiunta di u 22. Realizza con Microsoft Power Point un disegno che illustri la struttura del sito web creato ed i link tra le pagine (esattamente come la prima figura riportata nella prima pagina ). Salva il disegno come file jpeg nella cartella Esercitazione word-web (clic sul pulsante Office > Salva con nome > e- spandi la voce Tipo file > seleziona File jpeg; inserisci un nome file a piacere). Hobby Home page Curriculum 23. Riapri il file pghome.htm con MS Word e posiziona il cursore alla fine del file. 24. Inserisci il file immagine jpg appena creato: barra multifunzione > scheda Inserisci > Immagine > da File e localizza il file da inserire. Dopo aver inserito il file immagine, salva e chiudi. Qualora non fossi riuscito a realizzare il disegno, inserisci 25. Torna alla home page visualizzata con il browser Internet E- xplorer e clicca sul pulsante Aggiorna. Verifica che la pagina 26. Apri la finestra di Esplora Risorse e verifica che nella directory di lavoro, è stata creata dal sistema una sotto-directory contenente il file jpeg

5 F Aggiunta di un link ad un messaggio di posta elettronica 27. Apri il file curriculum.htm in modifica con MS Word ed inserisci un collegamento ipertestuale (hyperlink) ad un indirizzo di . Scrivi un testo a piacere (esempio: scrivimi, oppure Per inviare una , eccetera), seleziona il testo scritto, quindi barra multifunzione > scheda Inserisci > Collegamento Ipertestuale Indirizzo di posta elettronica e inserisci dei dati a piacere (indirizzo di posta elettronica e oggetto del messaggio). pagina: in MS Word, barra multifunzione > scheda Layout di pagina > gruppo Sfondo pagina > espandi il pulsante Colore pagina quindi Effetti di Riempimento. 30. Nella finestra seguente, seleziona la scheda Immagine, pulsante Seleziona Immagine per scegliere il file di sfondo (usa il file sfondo1.jpg fornito nel materiale di partenza). Salva. 31. Torna alla pagina hobby visualizzata nel browser; clicca sul pulsante Aggiorna. 32. Apri la finestra di Esplora Risorse e verifica che è stata creata -directory alla directory di lavoro, contenente il file di sfondo. H Accesso al codice HTML 33. Accedi ora al codice HTML delle tre pagine create (apri i tre file.htm con Blocco Note oppure con il browser Internet Explorer e seleziona menù Visualizza > HTML). 28. Salva il file curriculum.htm. Torna alla pagina visualizzata con il browser e clicca sul pulsante Aggiorna. Verifica che la Chiudi tutto. G Aggiunta di uno sfondo alla pagina degli hobby Nota: differenti sfondi alle pagine web: sfondi colorati a tinta unita, con sfumatura, con motivi di riempimento, con trame di riempimento, oppure utilizzando un file immagine esterno (esempio una foto jpeg o tiff, bmp) t- piastrella, ossia 29. Apri il file hobby.htm con MS Word e inserisci uno sfondo alla 34. Ricerca le righe del codice HTML relative ai seguenti elementi delle pagine: titoli delle pagine, hyperlink esterni, hyperlink interni, esempi di formattazione del testo, inserimento file immagine, hyperlink a posta elettronica, sfondo. I Copia su supporto esterno (chiave USB) e verifica finale 35. Copia i file del sito web su un supporto esterno di memoria (chiavetta USB) e cancellali dal disco fisso. Prova di nuovo a navigare tra le pagine del sito (sul supporto di memoria esterno), verificando che gli hyperlink rimangano corretti