Informatica Generale

Esercitazione n. 2

Prima parte: Avvio

0. Fare log-in

1. Avviare l'interfaccia grafica GNOME con il comando

startx

2. Per avviare Mozilla: click sulla icona del drago (il logo di Mozilla) che si trova sulla barra di avvio.

(Se si preferisce avviare Firefox: aprire una shell in una finestra e dare il comando firefox)

Per aprire una shell in una finestra: click sul pulsante del monitor con piedone, sulla barra di avvio.

3. L'esercitazione si trova all'indirizzo

http://www.disi.unige.it/person/RovettaS/inf-inf-gen/2004-05/esercitazioni/esercitazione2.html

Seconda parte: Analizzare e creare pagine HTML

1. Visualizzare su Mozilla la pagina del corso di Informatica generale, a.a. 2001/02:

http://www.disi.unige.it/laureenuove/programs/InfoGen01.html

Salvarla con il comando "Save as..." di Netscape.

2. Vedere anche p.es. la pagina del laboratorio:

http://www.disi.unige.it/person/RovettaS/inf-inf-gen

Salvare anche questa pagina.

Si tratta di pagine semplici.


Dopo aver salvato un paio di pagine HTML, è possibile analizzarle visualizzandole attraverso un text editor.

3. Avviare un text editor. Come visto nella Esercitazione 1: digitare

gedit

oppure

nedit

seguito dal tasto

<enter>


4. Aprire le pagine e osservare quale codice HTML corrisponde alle pagine visualizzate in Mozilla.

5. Creare un nuovo file chiamato con il proprio cognome: miocognome.html

6. In tale file, creare una pagina HTML con il proprio curriculum, simile a quella che segue:

Luigi Rossi

Inserire qui la propria foto

Nato il

A

Indirizzo:
Via
Numero
CAP
Città

Titoli di studio:

2000 – Maturità classica

2003 – Laurea in Informatica

Esami importanti sostenuti:

Competenze informatiche:

Aspirazioni professionali:

La mia posizione ideale è come responsabile del reparto XY in una ditta del tipo W che mi permetta di (eccetera)

NON COPIARE IL CODICE HTML: copiare solo l'impostazione estetica

Usare i tag H1, H2, STRONG, TABLE/TR/TD, UL/LI, A, IMG.

Mettere link dai nomi di ciascun esame verso una pagina appropriata (p.es. verso la pagina web del corso; p.es. verso il programma del corso sul sito DISI)

Usare un file di immagine contenente la propria fotografia. Se non si ha una foto disponibile, utilizzare l'immagine-segnaposto fornita qui (maschile) o qui (femminile)).

7. Come funziona il "taglia e incolla" nel text editor usato? E come funziona il "cerca e sostituisci"?

Il "taglia e incolla" può essere usato per prendere parti di un file HTML e copiarle nel mio file. Il "cerca e sostituisci" può essere usato per sostituire il contenuto originale con il mio contenuto.

8. Attenzione al "sostituisci tutto": bisogna tener conto che quello che si cerca potrebbe apparire ANCHE come parte di una parola che, invece, voglio lasciare come è.

9. Visualizzare la propria pagina HTML con il comando "Open file" di Mozilla.

Abbiamo visto qualche semplice esempio di HTML. La specifica completa si trova all'indirizzo http://www.w3.org/TR/html4 (sul sito del World Wide Web Consortium ovvero W3C).

Tuttavia, anche senza entrare nel dettaglio dello standard, la scheda Markup Tags Summary presenta alcuni tag che non abbiamo utilizzato nelle scorse esercitazioni.

Utilizzando la scheda indicata sopra e attraverso l'uso di un text editor, svolgete il prossimo esercizio di HTML. 10.

ESERCIZIO: tabella

Create una tabella come quella della figura, inserendo all'interno di ogni cella l'immagine opportuna (per salvare un'immagine in locale basta posizionare il mouse sull'immagine, cliccare il tasto destro del mouse e selezionare la voce "Save Image As").



Immagini da inserire nella tabella

Normalmente, per un progetto di html di una certa complessità si prevedono directory diverse per informazioni di tipo diverso

Quindi, per esempio, si avrà una directory per le immagini, una per la home page, una per ciascuna sezione interna del sito, ecc.

11. Fingere che il proprio progetto HTML sia complesso e creare una struttura di directory e sottodirectory (un albero) come segue: 

  myhtml
      homepage
          section1
	  section2
	  section3
      images
dove un nome rientrante più a destra è da intendere come il nome di una directory contenuta.

12. Copiare (col comando cp) i file dell'esercizio sulla tabella all'interno di queste directory; e, nel sorgente HTML, modificare i richiami alle immagini in modo che contengano nn solo il nome dei file immagine, ma anche il percorso relativo necessario a raggiungerlo.

N.B. se non si fa questa modifica, il file HTML non si può più visualizzare correttamente nel browser (provare per credere).

Nota 1: Le immagini sono richiamate all'interno dei tag IMG.

Nota 2: Le directory per le varie sezioni (section1, section2, section3) vanno lasciate vuote perché non abbiamo niente per riempirle.

13. Chiudere i programmi e uscire da gnome e dal sistema Linux.

FINE DELL'ESERCITAZIONE 2