Come costruire un Ipertesto (ambiente HTML)

Quanto segue si riferirà a FrontPad o FrontPage.
  1. Attivazione dell'Editor
  2. Creazione di documenti
  3. Creazione di collegamenti tra documenti
  4. Collegamenti interni
  5. Immagini ed altri elementi multimediali
  6. Progettare un ipertesto
  7. Stile
  8. Una volta costruito l'ipertesto
Per la creazione di ipertesti (meglio, di ipermedia) scegliamo uno strumento che sia vicino a quanto utilizzato in Internet:
  • Un ambiente vicino al Browser, ovvero al programma che stiamo utilizzando per leggere questo ipertesto:
    • Se il Browser è Netscape conviene lavorare con Netscape Gold, creato dalla Netscape per fungere sia da Browser che da Editor; o con Composer;
  • Un ambiente vicino all'Elaboratore testi,
    • si può usare Word 7 completato con Internet Assistant. o direttamente Word 97
  • Alternativamente è possibile utilizzare programmi professionali, quali MS Frontpage o altri, come HotDog o le loro versioni Soft, quale FrontPad.

Attivazione dell'Editor (FrontPage o FrontPad) per modificare o creare una pagina

fpedit1.jpg (1427 byte) Internet Explorer 4 presenta un pulsante, in alto a destra, che indica una finestra Windows e una matita: è il pulsante Modifica. Premendolo (con un Click del mouse) verrà costruita una copia della pagina che si stava visualizzando nel Browser. In Alternativa, dal menu, si danno in sequenza i comandi: Modifica - Pagina  e si inizierà a comporre una pagina nuova. 
fpedit2.jpg (1328 byte)

fpedit3.jpg (2564 byte)

Per creare una nuova pagina bisognerà avviare il programma tramite il pulstante Start.

A programma inviato si preme l'icona che indica un foglio bianco e si incomincia a scrivere.

Creazione di documenti

Testi
Scrivi, cancella, taglia, incolla, salva - in formato HTML però -, carica un documento, cambia il tipo di carattere...

Inserisci immagine o elemento ipertestuale...

Ipertesti
Collega un'ancora ad un documento esterno o a una diversa parte del documento
Attivato l'Editor il programma FrontPage si comporta come un piccolo elaboratore testi, con funzioni anche ipertestuali.

E' importante utilizzare gli stili predefiniti (Nomale, Titoli di diverso livello, Liste) perché il linguaggio per la costruzione di ipertesti HTML si caratterizza per una descrizione logica della pagina, in modo che essa possa esser letta in ambienti con diverse capacità di resa grafica.

Una volta scritto il testo, esso sarà memorizzato in un formato particolare (HTML): se siete curiosi di vedere cosa in effetti viene memorizzato date uno sguardo a questo documento con il comando View - View Document Source.

Creazione di collegamenti tra documenti


fpedit4t.jpg (12865 byte)

  lente.gif (944 byte)

fpedit5.jpg (2496 byte)

L'editor diviene ipertestuale quando si collega un'ancora di partenza (ad esempio una parola) a una di arrivo (ad esempio un secondo documento -HTML - presente sul proprio computer o su rete).
  1. Si evidenzia la parola di partenza
  2. Si preme il pulsante con il simbolo della catena:
  3. Nella finestra di dialogo che compare, si indica il nome del documento di arrivo
    • si può trattare di un documento presente in Internet.
      si indica allora l'URL completo, come in figura
    • oppure di un documento locale, presente nel computer, nella stessa directory su cui si sta lavorando.
      in tal caso si indicherà semplicemente il nome del documento, senza il percorso, ad esempio: prova.html.

      Bisogna fare attenzione di non indicare il percorso completo (come ad esempio "C:\Internet\Web\strade.htm") perché altrimenti l'ipertesto funzionerebbe solo nel nostro computer, non su un dischetto o su rete o su un altro computer (perché su essi il percorso non esisterebbe).

Quando il Browser legge l'ipertesto, il primo documento (nodo) ha un percorso (posizione nell' insieme di Cartelle e Sotto-cartelle) che è il punto di partenza per la navigazione.Ogni altro documento verrà cercato nel percorso del primo documento puntato: potete vedere il percorso nella barra che sta in basso nel Broser, se puntate il mouse su qualche parola di partenza (àncora ).

Collegamenti interni

  Sono possibili anche collegamenti a parti specifiche dello stesso documento su cui si sta lavorando (stessa pagina).
  1.  Si punta il mouse sul punto di arrivo e lo si marca scegliendo Segnalibro dal menu Modifica.
  2. Nella casella di dialogo Nome segnalibro si immette il nome che assegnamo al punto che vogliamo raggiungere (ad esempio: vai-a-interno) e si conferma. Il nome del segnalibro può contenere anche degli spazi.
  3. Si ritorna alla parola o alla frase che costituisce il punto di partenza del collegammento e la si evidenzi
  4. Si fa partire il collegamento (pulsante con la catena) al segnalibro voluto

La frase "Si punta..." al primo punto della lista costituisce appunto un collegamento interno al documento stesso e può essere raggiunta premendo qui (sarà la parola che compare all'inizio della pagina)

Immagini ed altri elementi multimediali

fpedit6.jpg (1013 byte)













fpedit6.jpg
A differenza di quanto avviene nei normali documenti di un elaboratore testi (ad esempio Word), le immagini hanno - in un documento html - vita propria.

Anche se vengono visualizzate contestualmente al documento (come le immagini che vedete in queste pagine), esse in realtà vengono memorizzate a parte, come documenti a sé.

Per rendere visibile un'immagine nel testo bisogna attivare un particolare collegamento ipertestuale indicato da un pulsante con alcuni disegnetti colorati.

Nella finestra di dialogo che si presenterà sarà necessario indicare il nome del file di immagine (di solito con estensione gif o jpg) da visualizzare.

La piccola immagine qui sopra ha ad esempio nome hted04.jpg. L'estensione indica la particolare codifica utilizzata nel descrivere l'immagine

 

Progettare un ipertesto

Struttura ipertesto Per ora consigliamo la costruzione di un piccolo saggio, avente le seguenti caratteristiche:
  • poche pagine di testo
  • alcune immagini
  • collegamenti tra le varie pagine

Nel costruirlo facciamo tesoro di quanto abbiamo messo in evidenza nel primo e secondo laboratorio

Un corso che intende pervenire agli stessi risultati è:

Per ampliare il discorso sto costruendo una pagina apposita

Per costruire ipertesti "con stile"

GUIDE TO WEB STYLE

Un libro in inglese molto interessante è

Volete vedere come avevo scritto questo stesso documento senza aver letto il libro di Morris e Hinrichs? Provate...

Una volta costruito l'ipertesto...

  ... se si è superato il livello dell'esercizio, si può meditare su alcune caratteristiche che in esso dovrebbero essere presenti il documento Valutazione di ipertesti costruitivaluta documenti ipertestuali scritti da allievi nella costruzione di tesi o tesine.