EhmDunque

Dopo aver presentato HTML come un linguaggio di programmazione specializzato per la creazione di pagine Web, in questa lezione mostreremo prescindere da quanto si è detto in precedenza e scriver pagine HTML esattamente come si redigerebbe un documento con un qualsiasi DTP.

Naturalmente affinché ciò si possa fare occorre innanzitutto scegliere il programma giusto.

Per quanto concerne il mondo Open Source il miglior HTML editor sulla piazza è quasi certamente KompoZer. Per lo meno è il mio preferito!

Come ci ricorda il suo motto: “Easy Web Authoring!", ovvero "costruire le pagine web con facilità", KompoZer ha fatto della semplicità la sua bandiera. Avendo adottato un'interfaccia utente che ricorda quella di molti desk top publisher (vedi figura sottostante), si può ragionevolmente presumere che gli utenti dei programmi di videoscrittura potranno usare con profitto KompoZer fin dal primo istante.

In particolare, volendo convertire un documento preparato con il vostro DTP in un testo HTML, basta selezionare il testo che si desidera salvare impartire il comando di copia (usando il vostro programma di scrittura abituale), spostare il mouse sulla finestra di KompoZer, incollare il testo memorizzato (paste) e salvare il file attribuendogli il nome desiderato. Ad esempio: prova.html

Il risultato sarà un file HTML perfettamente funzionante. Tempo richiesto per completare l'operazione: se i due programmi sono aperti dieci secondi!

Per una descrizione più approfondita del funzionamento KompoZer si suggerisce una visita al sito della framasoft un'organizzazione per la diffusione dell'utilizzo di software oper source. Date un'occhiata anche ai documenti che fanno riferimento a NVU, il programma da cui deriva KompoZer, per quanto concerne l'interfaccia utente i due programmi sono estremamente simili per cui la documentazione di NVU si adatta anche al suo successore.

Se usate Linux è molto probabile che KompoZer sia già installato sul vostro PC. Se non lo fosse, scaricatelo dai repository della vostra distribuzione e seguite le istruzioni.
Gli utenti di Windows dovranno invece scaricare il pacchetto di installazione dal sito http://kompozer.net/ ed installarlo sul loro computer (basta cliccare sul pacchetto di installazione ).
Nel caso in cui la procedura di installazione non creasse un'icona sul desktop occorrerà procedere manualmente.
Aprite risorse del computer, selezionate la directory C:\Programmi\KompoZer 0.7.10 (per gli utenti di Windows 2000 e Windows XP). C:\Programmi86\KompoZer 0.7.10 (per gli utenti di Windows 7).
Cliccate con il tasto destro del mouse sull'applicazione Kompozer , selezionare Invia a, poi Desktop (crea collegamento) e quindi confermare con un doppio click.

Cliccando sull'icona KompoZer presente sul desktop si aprirà il programma presentando una pagina bianca, mentre la barra del titolo riporterà la dicitura: "untitled - KompoZer" per ricordarci che il documento che si sta attualmente editando non ha ancora un nome.
Selezionato un documento HTML, KompoZer offre la possibilità di scelta fra quattro possibili rappresentazioni: Normal, HTML Tags, Source, Preview. La versione per Linux offre invece solo tre viste: Design, Split, Source.

- Preview: (Design della versione Linux) consente di vedere come si presenterà, graficamente, la pagina HTML quando verrà visualizzata sullo schermo da un browser. Nella modalità Preview è inoltre possibile lavorare interattivamente sul documento, editandolo così come si farebbe con un normale documento usando un DTP.

- Source: visualizza il documento HTML così com'è realmente, sotto forma di sequenza di comandi HTML. Gli utenti esperti ricorrono alla vista Source quando desiderano affinare i risultati ottenuti lavorando in modo grafico (modalità Preview), introducendo delle "regolazioni di fino" o frammenti di codice scritti in linguaggi diversi dall'HTML: JavaScript, ecc.

- HTML Tags: concettualmente quest'ultima rappresentazione è un ibrido delle due precedenti, nel senso che mostra l'aspetto della pagina Web così com e verrebbe visualizzata da un browser, ma con l'aggiunta di opportune indicazioni (in giallo) che aiutano a comprendere come l'organizzazione del programma HTML si rifletta sull'aspetto grafico della pagina.

- La vista Normal è molto simile a Preview; vengono però evidenziate le diverse sezioni che costituiscono il testo HTML in modo da renderne più facile l'individuazione allo scopi di semplificare lo studio del codice.

- La vista Split, disponibile sotto Linux, consente di vedere contemporaneamente il testo che si sta editando così come apparirà sullo schermo del browser e il corrispondnte codice HTML mantenendo le due viste sincronizzate.

Alle suddette, si aggiunge la possibilità forzare la visualizzazione del documento con le sue modifiche su di un browser di nostra scelta (ad esempio FireFox), cliccando sull'icona "Browse" nella barra degli strumenti.

Passando dalla visualizzazione Preview a Source si scoprirà che alla pagina bianca del documento vuoto, appena creato, corrisponde in realtà un documento HTML costituito da ben 11 righe.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
 
</body>
</html>

Il ché non ci deve sorprendere perché si tratta sostanzialmente delle stesse che abbiamo già incontrato nella prima lezione con l'aggiunta di alcuni tag HTML, introdotti automaticamente dal generatore di codice per motivi "amministrativi", che ignoreremo.

Tornando alla vista Preview scriviamo "Questa è la mia pagina". Quindi battiamo tre volte il tasto INVIO.
Scriviamo ancora: "Questo è un testo di prova", INVIO
"Questa è una seconda riga di prova", INVIO.

La figura sottostante mostra il risultato così come verrebbe visualizzato da un browser HTML.

La caratteristica fondamentale dei documenti ipertestuali e di rifuggire la prassi che imponeva una lettura del testo sequenziale, dalla prima all'ultima riga, per adottare un modello libero di seguire il “filo dei pensieri”.

Nel caso in cui siano presenti dei rimandi all'interno di un testo, il lettore/utente sarà pertanto libero di procedere con una lettura sistematica tradizionale o saltare da una parte all'altra, guidato dalla logica del suo ragionamento.

Nel caso più ampio di una collezione di documenti ipertestuali sarà possibile saltare non solo all'interno di uno stesso documento seguendo i rimandi interni, ma anche da un documento all'altro.

Per una serie di motivi tecnici, che saranno chiariti in seguito, nel caso delle pagine HTML è in genere più semplice far riferimento ad un altro documento mediante che non ad un'altra sezione dello stesso file, pertanto in questa lezione ci occuperemo essenzialmente di collegamenti verso altri documenti (non necessariamente pagine HTML).

Volendo fare riferimento ad un altro documento della stessa collezione (cioè presente nella stessa directory) è semplicissimo.

Bisogna innazitutto scrivere la parola o la frase alla quale si desidera associare il link che evidenzieremo.

Apparirà una finestra (Link Properties) che mostra una riga bianca nella quale possiamo scrivere o copiare l'indirizzo (o la URL) del fille che si vuole collegare.

Nel caso non ci ricordassimo quest'ultima informazione, cioè iquasi sempre, cliccheremo sull'icona gialla della crtella (folder) e procederemo come di consuetto con l'esplorazione dell'albero delle directory sino ad individuare il file desiderato che selezioneremo con un doppio click. Dopodiché dovremo confermare ancora una volta premendo OK.

In modalità Preview il link verrà evidenziato come di consueto con una colorazione azzurra e la sottolineatura, tuttavia cliccando su di esso non accadrà nulla perché KompoZer non è un browser.
Per vedere l'effetto e testare i collegamenti dobbiamo ricorrere ad un vero browser; pertanto clicchiamo sull'icona Browse.
Ci verrà richiesto di salvare le modifiche. Noi acconsentiremo.
Quindi ci verrà richiesto di date un titolo al documento (fin'ora nella barra del titolo il documento continuava a risultare "untitled").
Introdotto un nome (ad esempio "prova"), si aprirà il browser selezionato (ad esempio FireFox) mostrando il documento sul quale abbiamo lavorato.
A questo punto se clicchiamo sul nuovo link il browser caricherà e mostrerà il documento corrispondente.

Prima di concludere diamo uno sguardo al codice della nostra pagina HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>prova</title>
</head>
<body>
Questa è la mia pagina 
 
 
Questo è un testo di prova 
Questa è una seconda riga di prova 
<a
href="file:///C:/Documenti/WebSites/Ehm_Dunque/i-informatica/corsi/corso-html/sito_0_0/index.html">Questo
è un link al file index.html</a> 
</body>
</html>

Si notano due novità: l'introduzione del titolo del documento (evidenziato in verde) che verrà visualizzato sopra alla finestra nella barra del titolo e il link al file esterno (in rosso):
Il link è costituito da una coppia di TAG <a></a> che racchiude il testo visualizzato "Questo è un link al file index.html".
All'interno del TAG <a> è presente l'attributo href che specifica l'indirizzo corrispondente al documento associato.

Nonostante il documento HTML possa sembrare corretto e localmente funzioni, tanto da superare il test con un browser reale, il codice corrispondente al link contiene un clamoroso errore tale da minare seriamente la possibilità il funzionamento in una rete dove potrebbero essere presenti computer di tipo eterogeneo.
Riuscite a vederlo?

All'attributo href è stato assegnato un indirizzo assoluto di Windows

C:/Documenti/WebSites/Ehm_Dunque/i-informatica/corsi/corso-html/sito_0_0/index.html

che fa riferimento al disco C:, un tipo di entità che non è prevista dai sistemi UNIX e assimilabili.

Indirizzi di questo tipo non sono accettabili poiché, quand'anche potessero essere gestiti dal Web server, non sarebbero indirizzi validi per i sistemi UNIX.
Ci sarebbero così delle pagine Web che potrebbero essere consultate solo da sistemi Windows ma non da macchine UNIX. Un fenomeno che si è cercato in tutti i modi di evitare sia per questioni di concorrenza fra i produttori di sistemi operativi e di browser che per garantire a tutti gli utenti la possibilità di accedere a tutta la documentazione disponibile sul Web.

Per evitare incidenti come quello sopra illustrato, quando si fa riferimento ad un documento presente all'interno di un sito è sempre consigliabile ricorrere ad indirizzi relativi.
Volendo evitare problemi di malfunzionamento io suggerisco sempre di sviluppare i siti Web in ambiente Linux e poi di testare i siti in entrambi i contesti (Windows e Linux) prima di effettuare l'uploading.

Tornando all'esempio precedente, si noti che il link assoluto risultato poi sbagliato:

è stato introdotto pr errore dal generatore di codice al posto di un link relativo assai più semplice:

Gli errori causati dall'introduzione di un link assoluto invece di un link relativo spesso sfuggono alle verifiche di funzionamento dell'interfaccia utente, per cui si consiglia di riesaminare il codice generato in modalità Source prima di rilasciarlo effettuando l'uploading.