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 HTML

Ora creiamo una tabella.

Procederemo per gradi, per imparare a usare i tag di creazione tabelle.

Livello 1 -- A questo livello vogliamo solo creare una tabella con 4 celle organizzate in 2 righe e 2 colonne. Usiamo un contenuto di comodo, per esempio A - B - C - D rispettivamente per la cella n. 1 - 2 - 3 - 4.

I tag necessari sono i seguenti:

Il risultato è il seguente:
A B
C D
Livello 2 -- A questo livello vogliamo migliorare l'aspetto estetico della tabella, aggiungendo bordi e spaziature.

Usiamo i seguenti ATTRIBUTI del tag <table>:

Il risultato, con valori ottenuti per tentativi, è il seguente:
A B
C D
Livello 3 -- A questo livello vogliamo introdurre delle immagini come contenuto della tabella.

Basta salvare le immagini seguenti:

e richiamarle, usando il tag opportuno, al posto di A - B - C - D nelle celle della tabella. Il risultato è il seguente:
Questa tabella è già presentabile. Livello 4 -- Vogliamo sostituire gli attributi di formattazione della tabella con altri, alternativi.

Togliamo il bordo (p.es. impostandolo a zero) e aggiungiamo invece uno sfondo a ciascuna cella.

Si può usare l'attributo bgcolor=... del tag <TD>.

Come colore, impostiamo rispettivamente per le 4 celle: giallo (yellow) - blu (blue) - rosso (red) - verde (green).

Il risultato finale è il seguente:
Sperimentare la differenza fra impostare cellpadding=... e cellspacing=.... Con i colori si vede bene.

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