Traduzione nel formato HTML e nuova editazione

L'esercitazione continua con la traduzione dei file già predisposti nel formato degli ipertesti Web. Successivamente dovremo editare i file contenenti le schede delle opere.

Traduzione in HTML

La traduzione o conversione di un file di Word in linguaggio HTML è un'operazione immediata che però comporta, come tutte le conversioni, dei vantaggi e degli svantaggi. Il vantaggio più ovvio consiste chiaramente nel

• non dover memorizzare le procedure esposte negli incontri precedenti per ottenere un ipertesto leggibile e trasportabile.

In effetti, come già detto in precedenza, per realizzare pagine Web non è tecnicamente necessario utilizzare un editor HTML: è sufficiente disporre di un convertitore che, dal formato utilizzato dal proprio programma di videoscrittura, permetta la traduzione in HTML. Ma allora perché non procedere sempre in questo modo?
La risposta è abbastanza semplice:

• la traduzione comporta comunque una rinuncia alle caratteristiche più avanzate presenti nei programmi di videoscrittura. Dato che l'HTML è essenzialmente un linguaggio che descrive la struttura di un documento e non la sua apparenza, non è possibile ottenere automaticamente nel browser una visualizzazione identica a quella che si ottiene, per esempio, in un documento Word. Per tale motivo se si intende seguire questa strada, non si dovranno usare sofisticate formattazioni del testo originario.
  

Inoltre, se a prima vista l'approccio della traduzione permette un risparmio di tempo in quanto non richiede ulteriori fasi di apprendimento, lo stesso si dimostra controproducente in tutti quei casi, e sono la maggioranza, in cui il materiale tradotto in HTML richiede una qualche forma di manutenzione o di aggiornamento: diventa difatti problematico gestire le modifiche a un doppio insieme di file (il primo nel formato del programma di videoscrittura, il secondo in HTML), a maggior ragione se poi il contenuto di questi documenti non viene attentamente sincronizzato.

Chiariti i limiti di tale approccio, procediamo alla conversione dei file nel linguaggio HTML. Portato in primo piano il file index.doc (clic su Finestra e quindi sul nome che appare nel menu),

• selezionare la voce File del menu principale e quindi
• Salva con nome...
• Si faccia clic sulla piccola freccia all'estrema destra della cella Tipo file e
• facendo scorrere la barra, si selezioni il tipo Documento HTML.
• Infine clic sul pulsante Salva

Procedere nello stesso modo per i file botticelli.doc, chagall.doc, biografia-botticelli.doc, biografia-chagall.doc. Al termine disponiamo di 5 nuovi file, ciascuno con i nomi precedenti ma estensione htm (lo si ricordi bene: htm e non html!). Si può ora uscire da Word.

Editor visuali

È arrivato il momento di utilizzare una altro strumento per la composizione di file HTML, strumento che si affianca all'editor già visto negli incontri precedenti. Sulla base delle conoscenze acquisite, l'uso di quest'altro strumento dovrebbe apparire ora del tutto naturale e immediatamente comprensibili le sue opzioni. Il programma che si vuole presentare (Netscape Composer) permette di editare file HTML in modo del tutto visuale nascondendo il codice del linguaggio. Rientra pertanto nella categoria degli editor visuali e come tale permette all'autore di generare pagine HTML senza un intervento diretto sui marcatori del linguaggio.
(Nota: usiamo Netscape Composer in quanto compreso nel medesimo pacchetto del browser Netscape Navigator. L'analogo programma della Microsoft è FrontPage Express).

Entrati nel programma, una veloce esplorazione con il mouse posto sopra le varie icone della barra degli strumenti ci fa scoprire, dopo tutto, un ambiente abbastanza familiare: vi compaiono le solite icone

• relative all'apertura di un nuovo file, di uno già esistente e del salvataggio di quello corrente;
• quelle del Taglia/Incolla e
• quelle, importanti, che permettono di definire origine e destinazione di un link.

Apriamo il file index.htm e inseriamo una prima immagine con funzioni di logo. L'operazione è immediata ed è del tutto analoga a quella che si segue in Word:

• portato quindi il cursore sul punto di inserimento, nel nostro caso due o tre righe dopo il nome di Chagall,
• clic sull'icona di inserimento delle immagini : appare una finestra con diverse opzioni disponibili, collegate soprattutto al posizionamento reciproco tra immagine e testo:
• facciamo clic sul pulsante Choose File... e selezioniamo il file logopitt.gif: quindi
• clic su Open e infine su OK.

L'immagine voluta viene inserita nel punto occupato dal cursore.
Colleghiamo ora i nomi degli artisti ai rispettivi file indice, botticelli.htm e chagall.htm. Anche questa operazione si svolge con immediatezza:

• evidenziare il testo Sandro Botticelli,
• clic sul tasto che permette la definizione dell'origine di un link : dobbiamo indicare il nome del file botticelli.htm per cui, con le solite tecniche,
• Choose File..., evidenziazione, Open e infine OK.

Azioni analoghe si intraprendono per collegare il testo Marc Chagall con i relativo file indice (chagall.htm). Infine definiamo un'altra immagine di sfondo (sfondoindex.gif) così da evitare lo sfondo grigio, predefinito nei browser: le operazioni sono quelle descritte per il logo con l'unica variante che, dopo la selezione del pulsante immagine

• va scelta l'opzione Use as background e poi selezionata l'immagine.

Con ciò la pagina iniziale si può dire terminata, sia nei contenuti che nei link. Prima di salvarla diamo uno sguardo al suo codice HTML attivando le voci di menu View/Page Source: nella nuova finestra riconosciamo compresi tra i tag <BODY>, i marcatori tipici dei link origine (HREF), dei paragrafi, assieme ad altri di nuovi ma facilmente comprensibili (per esempio <font size=+2> che aumenta le dimensioni del font di due unità). Chiusa con un clic sulla X in alto a destra questa "vista", salviamo il file appena prodotto.

Il secondo livello

Dobbiamo ora predisporre le due pagine indice di secondo livello: pertanto va aperto il file botticelli.htm. Anche qui vogliamo rendere la pagina più attraente inserendo nello spazio prima dell'ultima riga un'immagine: con la tecnica già vista inserire quindi l'immagine venere.jpg ed eventualmente cancellare degli "a capo" o, in alternativa, immetterli, per centrare l'immagine verticalmente tra le righe di testo presenti.

I link origine collegati al file che contiene la biografia e alla pagina iniziale si realizzano ancora nello stesso modo:

• si evidenzia il termine,
• clic sull'icona di link ,
• si individua il file (biografia-botticelli.htm) e quindi
• OK.

Stesso procedimento per il link che punta alla home page, index.htm.
Immagine di sfondo. Quando si creano delle pagine di ipertesto nel linguaggio HTML, nel caso che non sia stato definito nel tag <BODY> un colore o una immagine di sfondo, i browser utilizzano uno sfondo uniforme di color grigio (molto triste!): per evitarlo converrà definire in tutte le pagine dei due artisti pure un'immagine di sfondo, la medesima. L'inserimento degli opportuni attributi nel tag <BODY> è stata descritta sopra: comunque

• selezioniamo il pulsante collegato con le immagini e,
• nella finestra che appare, attiviamo l'opzione collegata a Use as background.
• Di conseguenza si disattivano tutte le opzioni per l'allineamento tra immagine e testo e non resta che selezionare il file immagine opportuno. Un clic su Choose File...
• seguito dall'evidenziazione del file backbott.gif e quindi da
• Open e OK, termina la procedura.

Mancano ora i link alle schede delle immagini ma, prima di definirli, conviene salvare il file attuale: solo successivamente si passerà alle schede.

Eseguire comunque prima le operazioni appena terminate anche sul file chagall.htm: vanno inseriti i link descritti, l'immagine solitudine.jpg nello spazio tra la seconda e l'ultima riga e, per ultima, l'immagine di sfondo backchag.gif.