Esercitazione n. 10: HTML e primo sito web

Transcript

1 + Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. 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 lato. Oltre all inserimento degli hyperlink esterni, verranno provate altre funzionalità (inserimento sfondo della pagina, inserimento immagini, inserimento hyperlink interni) A- Inizio. Crea una directory all interno della cartella di lavoro Strumenti digitali sul Desktop dal nome Esercitazione0.. Recupera dalla pagina del corso su DigiRome i file necessari per l esercitazione (materialeesercitazione0.zip, file compresso contenente il materiale di base, testi ed immagini per realizzare il sito web) e copialo nella directory Esercitazione0. Estrai qui dentro i file contenuti: Testo.docx (contiene il testo che dovrai usare come contenuto della pagina curriculum), sfondo.jpg (contiene l immagine dello sfondo).. Avvia KompoZer. Crea un sito di nome Esercitazione0 e posiziona la finestra di Gestione Siti sulla cartella Esercitazione0, (Clicca il pulsante Modifica lista siti > pulsante Nuovo sito > Imposta il nome del sito > scegliere la cartella tramite il pulsante Selezione cartella. 4. Realizza una semplice home page con almeno cinque righe di testo, inserendo alcuni tuoi dati personali. Salvare la pagina. Il sistema chiederà di assegnare un nome alla pagina. Sceglietene uno a piacere. Ricordarsi che il nome assegnato è della pagina Web (comparirà nella finestra del browser e nei segnalibri) e non del file.. Nella schermata successiva salvare il file con il nome index.html nella cartella Esercitazione0.

2 B- Inserimento hyperlink esterni ed interni 5. Apri il documento Word testo.docx fornito nel materiale di partenza e copiane il contenuto in una nuova pagina di KompoZer. Assegna alla pagina il nome Curriculum e salvala con il nome curriculum.html. 6. Nella pagina curriculum, inserisci un collegamento alla home page creata in precedenza (index.html): seleziona il testo Torna alla home page (già inserito nella quarta riga del file), premi quindi il pulsante Collegamento (); comparirà un il menù mostrato in figura. Scegliere la cartella Esercitazione0 ed il file collegato (index.html). Clicca OK. 4 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 index.htm). 7. Crea ora due hyperlink interni al documento, ossia dei collegamenti che, partendo da ciascuna riga dell elenco puntato iniziale (righe e 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 (. Titoli di Studio,. 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. 8. Procedi come segue: identifica il titolo di ciascuna delle due sezioni con un segnalibro (seleziona il testo () > clicca il pulsante Ancora () > Assegna un nome al segnalibro () > clic su Ok. Strumenti digitali per la comunicazione A.A 0/

3 Strumenti digitali per la comunicazione A.A 0/

4 9. Seleziona la prima riga dell elenco puntato Titoli di Studio() > clic sul bottone Link () > espandi la casella di inserimento tramite il triangolino () > selezionare il nome dell àncora assegnato precedentemente (4)> clicca OK Ripeti per la riga successiva (Esperienze Professionali). Inoltre, nello spazio tra le due sezioni del curriculum crea un hyperlink interno che riporti all inizio del documento, sul testo Torna all inizio (il link al simbolo. Salva e chiudi il file Curriculum.html. C- Completa il sito web e naviga nel sito. Crea un altra pagina con una descrizione dei tuoi hobby che occupi almeno cinque righe. E salvala sempre nella cartella Esercitazione0 contenente il sito, come descritto precedentemente, con il nome hobby.html e titolo di pagina Hobby di.. Inserisci un collegamento ipertestuale alla home page creata in precedenza (index.html), utilizzando la frase Torna alla home page ed impostandola come collegamento ipertestuale (segui le istruzioni riportate nei punti precedenti).. Nella Home Page aggiungi un riferimento ipertestuale al file curriculum.html ed un altro al file hobby.html. Salva e chiudi. 4. Prova a navigare fra le pagine del sito da te creato. Puoi avviare il browser (Explorer, Chrome o Firefox) e dal menù File scegli Apri > seleziona il file index,html appena creato. In alternativa, da Kompozer, mentre viene visualizzata la Home page, clicca su Anteprima. 5. 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 6. Nella Home Page inserisci ulteriore testo a piacere e applica su di esso alcune caratteristiche di formattazione: (font Comic Sans, colore del testo, formattazione e allineamento a piacere) per migliorare l aspetto estetico della home page. Salva. 7. Torna alla home page visualizzata nel browser e clicca sul pulsante Aggiorna per ricaricare 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 8. Realizza con Microsoft Power Point un disegno che illustri la struttura del sito web creato ed i link tra le pagine, come mostrato nella figura accanto. Salva il disegno come file jpeg nella cartella Esercitazione0, in una sottocartella Immagini creata appositamente (clic scheda File > Salva con nome > espandi la voce Tipo file > seleziona File jpeg; inserisci un nome file a piacere). Strumenti digitali per la comunicazione A.A 0/ 4

5 9. Da Kompozer, posiziona il cursore nel punto in cui vuoi inserire l immagine. Inserisci l immagine e il testo alternativo Mappa del sito. (Menù Inserisci ()> immagine > localizza e seleziona il file jpeg con la figura () > inserisci il testo alternativo () >Ok). 0. Imposta le dimensioni della figura a 459x 44 pixel (Tasto destro sulla figura > Proprietà dell immagine > tab dimensioni>seleziona Adatta dimensioni). Salva la Home page.. Torna alla home page visualizzata con il browser e clicca sul pulsante Aggiorna. Verifica che la pagina caricata contenga l immagine inserita. F- Aggiunta di un link ad un messaggio di posta elettronica. Da Kompozer apri il file curriculum.html ed inserisci un collegamento ipertestuale (hyperlink) ad un indirizzo di e- mail. Scrivi un testo a piacere (esempio: Scrivimi, oppure Per inviare una , eccetera), seleziona il testo scritto (), quindi clicca il pulsante Collegamento () > Nella schermata che appare inserire l indirizzo di posta elettronica e quindi spuntare l opzione di posta elettronica (). G- Formattazione testo.. Utilizzando i comandi di formattazione testo (stile, titoli, font, elenchi, etc) formattare a proprio piacimento la pagina curriculum. Strumenti digitali per la comunicazione A.A 0/ 5

6 4. Per formattare del testo, bisogna selezionarlo e dal menu Formato è possibile scegliere il tipo di carattere, la dimensione, lo stile, il colore del testo e la direzione di scrittura. Le stesse operazioni si possono fare anche dai pulsanti nella barra strumenti, ma i controlli sono più approssimativi, provateli entrambi per fare pratica. 5. E possibile colorare, ingrandire e diminuire i caratteri anche su un solo carattere, l'importante e selezionare prima il testo da modificare. Come possiamo vedere non c'è limite alla fantasia, c'è un solo problema che riguarda qualsiasi tipo di editor si utilizzi per quanto riguarda l'utilizzo dei font, se scegliete un font con effetto grafico, questo Font lo vedete solo voi, infatti, se selezionate un Font grafico e questo non è installato su un altro computer, il computer utilizzerà il font di default come il Times New Roman. quindi utilizzare solo i font standard che sono Arial, Verdana, Tahoma e Times New Roman, in quanto questi sono presenti in tutti i computer e comunque cambiano di poco l'aspetto. 6. Le figure seguenti mostrano i pulsanti per impostare il grassetto, corsivo e sottolineato al testo, il primo, e quelli per allineare il testo a sinistra, al centro, a destra e giustificato 7. Per eliminare la formattazione basta selezionate il testo con il pulsante sinistro del mouse e spuntare la voce Rimuovi tutti gli stili 8. Salva il file curriculum.html. Torna alla pagina visualizzata con il browser e clicca sul pulsante Aggiorna e verifica gli aggiornamenti fatti. Strumenti digitali per la comunicazione A.A 0/ 6

7 H- Aggiunta di uno sfondo alla pagina degli hobby. 9. Dal Windows, copia l immagine sfondo.jpg nella cartella Immagini della cartella che contiene il sito (Esercitazione0). 0. In Kompozer e dal menu Formato seleziona Sfondo e colori pagina in questa finestra clicchiamo sull'icona cartella posizionati nella cartella Immagini e seleziona l'immagine sfondo.jpg e clicca su Apri.. Clicca sul pulsante Anteprima per visualizzare la pagina creata nel browser. I- Accesso al codice HTML. Accedi ora al codice HTML delle tre pagine create tramite il tab Sorgente.. 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. Strumenti digitali per la comunicazione A.A 0/ 7