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.
Installare KompoZer sul proprio PC
Creiamo un documento vuoto con KompoZer.
- 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>
<br>
</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.
Cliccheremo poi sull'icona link (rappresentata da una maglia di catena).
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<br>
<br>
<br>
Questo è
un testo di prova<br>
Questa è una seconda riga di
prova<br>
<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><br>
</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.
E qui casca l'asino!
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:
<a href="index.html">Questo è un link al file index.html</a>
è stato introdotto pr errore dal generatore di codice al posto di un link relativo assai più semplice:
<a href="index.html">Questo è un link al file index.html</a>
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.