Programma Informatica 1 Esercitazione WEB n. 1: Word e HTML Scopo: Creare un semplice sito web con Microsoft Word. Il sito web è composto da una home page, contenente due hyperlink a due altre pagine (curriculum e hobby). Oltre all’inserimento degli hyperlink esterni, verranno provate altre funzionalità (inserimento sfondo della pagina, inserimento immagini, inserimento hyperlink interni). A – Inizio 1. 2. 3. 4. Crea una directory di lavoro sul disco fisso e chiamala Esercitazione word-web. Avvia MS Word e crea un nuovo documento. Scegli il modello “Pagina Web”. Realizza una semplice home page, inserendo alcuni tuoi dati personali. Salva il file come “Pagina web” nella directory di lavoro precedentemente creata (menù File > Salva come Pagina Web, nome file pghome); assegna un titolo alla pagina (pulsante “Cambia titolo”); il file viene salvato con estensione .htm. Chiudi il file. B – Inserimento hyperlink esterni ed interni 5. Apri il documento word testo1.doc fornito e salvalo come “Pagina web” nella directory di lavoro (menù File > Salva come Pagina web, nome file curriculum). 6. Inserisci un collegamento alla home page creata in precedenza (pghome.htm): seleziona il testo “Torna alla home page”, quindi menù Inserisci > Collegamento Ipertestuale. All’interno della finestra di impostazione, scegli File Esistente o Pagina Web, seleziona il file pghome.htm (imposta riferimento relativo senza percorso), quindi clic su OK. 7. Crea ora due hyperlink “interni” al documento, ossia dei collegamenti che, partendo da ciascuna riga del mini-indice iniziale, puntano a delle posizioni interne al documento stesso, corrispondenti in questo caso al titolo di ciascuna delle due sezioni del curriculum (1. Titoli di Studio, 2. Esperienze Professionali). Procedi come segue: identifica il titolo di ciascuna delle due sezioni con un segnalibro (seleziona il testo quindi menù Inserisci > Segnalibro, dai un nome al segnalibro quindi clic su Aggiungi). Seleziona ora la prima riga del mini-indice Titoli di Studio, quindi dal menù Inserisci, scegli Collegamento Ipertestuale. All’interno della finestra di impostazione del collegamento ipertestuale, fai clic su Inserisci all’interno del documento, quindi nella lista delle posizioni interne, seleziona la corrispondente posizione creata in precedenza. 8. Ripeti per la riga successiva (Esperienze Professionali). Alla fine di ciascuna delle due sezioni del curriculum crea un hyperlink “interno” che riporti all’inizio del documento. 9. Salva e chiudi il file Curriculum.htm. 10. Sempre con MS Word, crea un’altra pagina web, con una descrizione dei tuoi hobby. 11. Salva il file come “Pagina web” nella cartella precedentemente creata (menù File > Salva come Pagina web, nome file hobby). 12. Inserisci un link ipertestuale alla home page creata in precedenza (pghome.htm). C – Completa il sito web e naviga nel sito 13. 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. 14. Prova ora a navigare all’interno del semplice sito web di tre pagine 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 click sulla sua icona per aprire il file all’interno del browser Internet Explorer). 15. Fai clic sui due hyperlink della home page e verificane il funzionamento. Verifica, che sia dalla pagina curriculum che dalla pagina hobby, è possibile tornare alla home page. D – Aggiunta di formattazione alla home page 16. 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 all’interno di MS Word. 17. Applica alcune caratteristiche di formattazione (font Comic Sans, colore del testo e dimensioni, allineamento) per migliorare l’aspetto estetico della home page. Salva. 18. Torna alla home page visualizzata nel browser Internet Explorer e clicca sul pulsante Aggiorna per caricare l’ultima versione della pagina dopo le modifiche. Verifica che la pagina caricata presenti le caratteristiche di formattazione impostate al punto precedente. E – Aggiunta di un file immagine “.jpg” alla home page 19. Con PowerPoint realizza una slide che illustri la struttura del sito web creato ed i link tra le pagine. Salva la slide come file “jpeg” (menù File > Salva con nome, Tipo file jpeg). 20. Riapri il file pghome.htm con MS Word e posiziona il cursore alla fine del file. 21. Inserisci il file immagine jpg appena creato: menù Inserisci > Immagine> Da File e localizza il file da inserire. Dopo aver inserito il file immagine, salva e chiudi. 22. Torna alla home page visualizzata con il browser Internet Explorer e clicca sul pulsante Aggiorna. Verifica che la pagina caricata contenga l’immagine inserita. 23. Apri “Risorse del Computer” e verifica che è stata creata dal sistema una sotto-directory alla directory principale di lavoro Esercitazione word-web, contenente il file jpeg. F – Aggiunta di un link ad un messaggio di posta elettronica 24. Apri il file curriculum.htm con MS Word ed inserisci un hyperlink ad un indirizzo di email: menù Inserisci > Collegamento Ipertestuale, quindi all’interno della finestra di impostazione, clicca su Indirizzo di posta elettronica e inserisci i dati richiesti (indirizzo di posta elettronica e oggetto del messaggio). Salva il file curriculum.htm. 25. Torna alla pagina visualizzata con il browser e clicca sul pulsante Aggiorna. Verifica che la pagina contenga l’hyperlink inserito. Fai clic sull’hyperlink e verifica che il client di posta elettronica (MS Outlook) mostri il messaggio e-mail da completare. Chiudi. G – Aggiunta di uno sfondo alla pagina degli hobby 26. Apri il file hobby.htm con MS Word e inserisci uno sfondo alla pagina: in MS Word, seleziona menù Formato > Sfondo, quindi Effetti di Riempimento. 27. Nella finestra seguente, seleziona la sotto-directory Immagine, pulsante Seleziona Immagine per scegliere il file di sfondo (usa il file sfondo1.jpg fornito). Salva. 28. Torna alla pagina hobby visualizzata nel browser; clicca sul pulsante Aggiorna. 29. Apri “Risorse del Computer” e verifica che è stata creata un’altra sotto-directory alla directory principale di lavoro “Esercitazione word-web”, contenente il file di sfondo. H – Accesso al codice HTML 30. Accedi ora al codice HTML delle tre pagine create (apri i tre file .htm con Blocco Note oppure all’interno del browser Internet Explorer seleziona menù Visualizza > HTML). 31. 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 floppy disk e verifica finale 32. Copia i file del sito web sul tuo floppy disk e cancellali dal disco fisso. Prova di nuovo a navigare tra le pagine del sito (sul floppy), verificando che gli hyperlink siano corretti.