Informatica Generale

Esercitazione 3

Un nuovo sguardo ai text editor e all'HTML

Finora abbiamo usato il text editor in maniera amatoriale. Vediamo adesso un po' più in dettaglio cosa è (e cosa non è) un text editor.

(Ciò che segue sono cose generali, e non si riferiscono a uno specifico text editor)

Che cosa viene elaborato da un text editor?

Il text editor elabora file di testo.
Un file di testo è un file composto da caratteri, organizzati in linee. Esso non implementa:

Le suddivisioni logiche del testo (paragrafi, capitoli...)
Gli attributi visuali e di impaginazione (il neretto, il corsivo, le dimensioni variabili dei caratteri, la spaziatura fra righe...)

Esso (generalmente) non comprende, oppure comprende in modo parziale, i concetti di:

Parola (di solito solo nel contesto degli spostamenti del cursore)
Pagina

Per questo il text editor "vede" il file come una sequenza di righe, ciascuna composta da una sequenza di caratteri dei quali l'ultimo è un carattere speciale END-OF-LINE (inserito di solito premendo il tasto Enter).

Che funzioni offre un text editor?

Ci sono funzioni elementari e funzioni più avanzate. Le funzioni che ci si può aspettare di trovare in qualunque text editor, tranne forse qualcuno dei più ridotti, sono:

Sposta il cursore avanti/indietro di un carattere/una parola/una riga/una schermata
Salta alla prima riga/ultima riga/riga numero n
Cerca un testo (con varianti del tipo: Cerca un testo in avanti/indietro; Cerca un testo rispettando/non rispettando le maiuscole)
Cerca e sostituisci (con varianti del tipo: Cerca e sostituisci solo la prossima occorrenza/le occorrenze in tutto il file)
Visualizza stato del file: quanti caratteri, quante linee, se è stato modificato o no, riga corrente, colonna (carattere) corrente.

Abbiamo visto qualche 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 i prossimi esercizi di HTML.

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

ESERCIZIO: tabella complessa

Create una tabella come quella della figura usando gli attibuti rowspan e colspan

ESERCIZIO: image map

Salvate in locale la cartina dell'Italia e create una image map scegliendo 3 regioni. Ad ogni regione cliccabile dovrà essere associato un link esterno verso il sito di una Università presente in quella regione (es. Piemonte, www.di.unito.it; Lombardia, www.unimi.it; ...).

Al fondo della pagina mettete un link verso la pagina dell'autore del sito. Questo link aprirà la vostra home page (potete riprendere e migliorare il file della esercitazione 2).

L'home page deve contenere una fotografia (se non si ha una foto disponibile, utilizzare l'immagine-segnaposto fornita qui), un testo di presentazione personale, il proprio indirizzo di posta elettronica cliccabile (usando il tag A con proprietà HREF riferita ad un URL con specifica di protocollo mailto://), una lista di link preferiti, ed altro che potrebbe essere utile in una home page personale.

SUGGERIMENTO: A volte, per "far stare al loro posto" le parti di un testo, le si inserisce in una tabella invisibile (attributo BORDER=0). In questo modo si può, per esempio, impaginare su due colonne, o impostare blocchi di testo indipendenti, o lasciare un margine che contiene la propria fotografia, ecc.

SUGGERIMENTO: per scrivere le lettere accentate e altri caratteri particolari si devono usare i codici riportati nella tabella seguente:

CARATTERE	CODICE
à	`à`
è	`è`
é	`é`
ì	`ì`
ò	`ò`
ù	`ù`
(idem per le corrispondenti maiuscole)
&	`&`
"	`"`
<	`<`
>	`>`

(alcuni di questi codici sono anche descritti nella scheda Markup Tags Summary).

ESERCIZIO: link interni

Salvate in locale il file di testo xml.txt e trasformatelo in un file HTML introducendo dei link interni (non preoccupatevi del contenuto del file, si tratta di un estratto di un file di FAQ - Frequently Asked Questions - su XML).

Aggiungete un insieme di link ad inizio pagina che rimandino alla domanda/risposta corrispondente (tutte le domande iniziano con A.). Inoltre, formattate il file in modo da avere il testo delle domande in grassetto.

Versione completa: al fondo di ogni risposta inserite un link di nome "Back to index" che rimanda ad inizio pagina.