Negli incontri precedenti abbiamo presentato in forme didattiche le principali caratteristiche del linguaggio HTML, via via alternandole con le necessarie informazioni teoriche: le esercitazioni venivano proposte e svolte con lo scopo di evidenziare la corretta sintassi dei tag e gli eventuali loro attributi: ciascuna esercitazione era da considerarsi fine a se stessa e, appunto, orientata all'acquisizione dello specifico marcatore.
In questo incontro intendiamo invece percorrere modalità più articolate e realistiche, modalità che sfruttando le conoscenze teorico/pratiche acquisite e assumendone di nuove, simulino la concreta realizzazione di un ipertesto. Vedremo quindi come, partendo da alcuni semplici testi, si possa in base ad un progetto stendere quella rete di collegamenti che trasforma un testo in un ipertesto.
L'esercitazione che vogliamo sviluppare intende presentare le
L'ipertesto che intendiamo comporre si rivolge quindi a persone interessate ad un sintetico profilo biografico dei due artisti e alla consultazione delle rispettive opere: in sostanza una minuscola guida biografico-artistica ai due pittori.
Le risorse disponibili sono le seguenti:
Disponiamo inoltre di un certo numero (8+8) di
Il formato dei file delle immagini è, ovviamente, il formato JPG (o JPEG) in quanto altri formati non permetterebbero di ottenere una riproduzione di qualità accettabile delle opere. I file possiedono i nomi
Sandro Botticelli | Marc Chagall |
---|---|
botticelli10.jpg | chagall10.jpg |
botticelli20.jpg | chagall20.jpg |
botticelli30.jpg | chagall30.jpg |
botticelli40.jpg | chagall40.jpg |
botticelli50.jpg | chagall50.jpg |
botticelli60.jpg | chagall60.jpg |
botticelli70.jpg | chagall70.jpg |
botticelli80.jpg | chagall80.jpg |
A ciascuna immagine, per i motivi che esporremo, è associata un'altra piccola immagine, ottenuta riducendo l'originale con un normale programma di grafica. Queste verranno usate come icone: in corrispondenza alle immagini, i nomi dei file-icone sono:
Sandro Botticelli | Marc Chagall |
---|---|
iconaBott10.jpg | iconaChag10.jpg |
iconaBott20.jpg | iconaChag20.jpg |
iconaBott30.jpg | iconaChag30.jpg |
iconaBott40.jpg | iconaChag40.jpg |
iconaBott50.jpg | iconaChag50.jpg |
iconaBott60.jpg | iconaChag60.jpg |
iconaBott70.jpg | iconaChag70.jpg |
iconaBott80.jpg | iconaChag80.jpg |
Vanno infine aggiunte poche altre immagini con funzioni di logo, di presentazione e di sfondo.
Poiché i due artisti sono indipendenti la struttura che potremo scegliere per il nostro ipertesto è anche quella più facile e logica, ossia una struttura dove le diverse pagine sono disposte in modo gerarchico o a menu (fig. 1).
![]() |
Fig. 1: Organizzazione gerarchica di pagine. |
In un'organizzazione gerarchica, è in effetti facile per un lettore conoscere la propria posizione nella struttura; le scelte sono
Un salto diretto a un livello ancora superiore consente al lettore di saltare direttamente e rapidamente a una posizione nota. Nelle gerarchie, la pagina iniziale (anche detta home page) deve fornire le informazioni di natura più generale e definire i collegamenti principali con le pagine che si trovano a un livello più profondo della gerarchia.
In sostanza stiamo definendo la struttura rappresentata nella figura seguente.
![]() |
Fig. 2: Struttura dell'esercitazione. |
Evidentemente ogni livello della struttura avrà una interfaccia consistente con le esigenze di consultazione (o di "navigazione", come si suol dire) e cioè dovranno esserci dei link che permettano di muoversi verso l'alto, il basso e il ritorno alla pagina di livello più elevato che contiene, indicizzate, le risorse dell'artista.
Il primo file che risulta necessario è quello relativo alla pagina iniziale: questo dovrà contenere solo il nome dei due artisti e un titolo che nel nostro caso è del tutto generico. Entrati quindi in Word,
![]() |
Fig. 3: Il file index.doc. |
Analogamente ci servono i file botticelli.doc e chagall.doc, file che costituiranno il secondo livello e conterranno i collegamenti alle risorse disponibili di ciascun artista.
Il contenuto di questi file è molto semplice: un'intestazione con il nome dell'artista quindi, separata da alcune righe vuote il testo che richiama la biografia e le schede (che per brevità supponiamo essere due): infine un richiamo per ritornare alla pagina iniziale (home page). In sostanza il file botticelli.doc apparirà come la figura sottostante.
![]() |
Fig. 4: Il file botticelli.doc. |
Del tutto analogo apparirà il file chagall.doc. Anche questi altri due file vanno salvati su disco.
Prima di iniziare la traduzione nel formato HTML di tutti i documenti generati da Word, vediamo come sia possibile inserire dei link già nei file di Word.
Apriamo pertanto il file biografia-botticelli.doc: il testo contiene un'appendice relativa al clima del periodo nel quale Botticelli completa l'illustrazione della Divina Commedia. Nel testo della biografia converrà quindi inserire un collegamento a questa appendice là dove si tratta del medesimo argomento.
Inseriamo per prima la destinazione che, in Word o in programmi analoghi, viene detta segnalibro. Pertanto,
Ora va definita l'origine del link. Portato quindi il cursore in corrispondenza del paragrafo contenente Divina Commedia (alcune righe più su),
Il testo Divina Commedia è ora sottolineato, in colore e se si passa sopra il puntatore del mouse, questo si trasforma in una mano con l'indice puntato: il testo mostra in tal modo la sua natura di collegamento a qualche tipo di destinazione.
In definitiva abbiamo scoperto che, nello stesso Word
Se dovessimo quindi distribuire ad un gruppo ristretto di persone in grado di leggere i file nel formato di Word, questa possibilità non va di certo trascurata: non è ovviamente percorribile se si intende pubblicare nel Web.
Prima di iniziare la traduzione di tutti i file Word aggiungiamo alla fine delle due biografie (quindi va aperto anche biografia-chagall.doc) un riferimento alla pagina iniziale. Pertanto, dopo aver premuto 3 o 4 volte il tasto di invio immettere il testo Ritorna all'indice e quindi centrarlo tra i margini attuali. Infine salvare tutti i file attualmente aperti in Word.