Lezione 8 - Atuttascuola

2.5 Liste
II linguaggio HTML mette a disposizione i codici per definire delle liste, cioè righe di un elenco, in
particolare liste puntate o numerate. Per ottenere una lista puntata si usa la seguente sintassi:
- si inizia con un tag di apertura <UL>
- si mette il tag <LI> davanti ad ogni riga della lista
- si chiude la lista con il tag </UL>.
Per esempio, la seguente porzione di codice HTML
<UL>
<LI>Roma
<LI>Milano
<LI>Napoli
</UL>
produce nella visualizzazione della pagina la lista puntata:
• Roma
• Milano
• Napoli
Per ottenere la stessa lista come elenco numerato, basta sostituire i tag <UL>...</UL> con
<OL>...</OL>.
2.6 Caratteri speciali
II linguaggio HTML è stato originariamente progettato per la comunicazione anche fra terminali
che usano solo codifiche ASCII a 7 bit, cioè da O a 127; di conseguenza tutti i caratteri con codice
ASCII formato da 8 bit (per esempio le lettere accentate della lingua italiana, che sono identificate
con un codice ASCII superiore al 127 decimale) devono essere rappresentati in modo particolare. In
HTML si utilizzano per questo scopo le sequenze di escape, ovvero delle stringhe particolari che
all'atto dell'interpretazione da parte del browser vengono tradotte con i caratteri desiderati.
Una prima categoria di caratteri riguarda quelli che il linguaggio MTML utilizza per la
rappresentazione dei tag/ quali <, & o le virgolette, che verrebbero quindi considerati come facenti
parte del codice del linguaggio e perciò ignorati. Per questo motivo si usano, preceduti dal carattere
& (escape sequence), le sequenze:
<
per <
>
per >
& per &
" per “
Per le lettere accentate, si usano le seguenti rappresentazioni:
è per è
È per E’
é per é
Ci sono rappresentazioni analoghe per le altre vocali a, o, i, u.
2.7 Indirizzo di posta elettronica
Quando si produce una pagina in Interne! è consuetudine specificare l'indirizzo di posta elettronica
(e-mail) dell'autore del documento. Tale informazione si pone alla fine del documento con il
seguente codice:
<ADDRESS> ...</ADDRESS>
Per esempio la frase seguente:
<ADDRESS>
<A HREF="mailto:[email protected]">Scrivete a Rossi Giacomo</A>
</ADDRESS>
consente di attivare un link con l'autore. Se l'utente fa un clic sulla scritta Scrivete a Rossi Giacomo
viene aperto un modulo vuoto di posta elettronica da completare, che verrà inviato all'indirizzo di email specificato ([email protected]). L'uso di mailto (spedisci a) indica che il riferimento
ipertestuale è un indirizzo di posta elettronica anziché un file o un indirizzo Web.
1. IPERTESTI IN VERSIONE WEB
Il linguaggio HTML permette di costruire un insieme di pagine di informazioni con le caratteristiche dell'interfaccia grafica, collegabili tra loro attraverso i link: in sostanza possiamo realizzare
ipertesti, con un vantaggio aggiuntivo offerto dalla possibilità di pubblicare l'ipertesto sulla rete
Internet, rendendolo visibile ad un vasto pubblico di utenti, e di stabilire collegamenti anche con le
pagine e le informazioni presenti in altri siti nel mondo.
Anche con questa modalità ovviamente l'attività di progettazione dell'ipertesto deve avere la
massima attenzione: occorre infatti definire con precisione gli obiettivi e i contenuti di ciò che si
vuole comunicare con l'ipertesto, prima di passare all'implementazione sul computer e alla scelta
degli strumenti software e multimediali da utilizzare.
Dal punto di vista operativo, un ipertesto in versione Web richiede le seguenti fasi di lavoro:
 definire obiettivi e struttura dell'ipertesto
 scrivere i testi o selezionare testi già esistenti
 acquisire immagini con lo scanner o selezionarne di già esistenti
 determinare quali oggetti multimediali sono importanti per la comunicazione
 costruire le pagine usando un programma di Web editor
 validare il funzionamento delle pagine con il browser
 trasferire le pagine su un server Internet.
Al termine del lavoro si può accedere all'ipertesto tramite la rete: in sostanza otteniamo un sito
intemet.
Naturalmente un ipertesto in formato Web può essere consultato anche da un computer non
connesso alla rete, usando il browser in modalità Non m linea, oppure può essere messo a
disposizione degli utenti di una rete locale che utilizza le tecnologie Interne! (rete Intranet).
La pagina di partenza dell'ipertesto, detta indice o homo page, assume il nome index.html: questa è
la pagina che si apre quando l'utente Internet scrive nella casella del browser l'indirizzo Web (URL)
del sito dove si trovano le pagine.
Poiché questa pagina è quella che viene vista per prima dal visitatore di un sito, è opportuno che
contenga sommar!, titoli ed elementi grafici che devono suscitare attrattiva e interesse, invogliando
l'utente a guardare le altre pagine del sito. Un'altra buona regola di carattere generale consiste
nell'evitare pagine contenenti immagini di grandi dimensioni oppure piccole ma in numero elevato:
esse provocano lunghi tempi di attesa per il caricamento delle pagine e una perdita di interesse
nell'utente che si è collegato al sito.
I siti Internet possono essere raggiunti da persone che usano computer con sistemi operativi diversi
e apparecchiature hardware diverse, in particolare monitor. Il linguaggio HTML garantisce la
visualizzazione corretta con diversi tipi di computer: però ci possono essere degli inconvenienti
quando per scrivere le pagine si usano tipi di font poco standard, che non sono installati sul
computer dell'utente, oppure quando il monitor usa una risoluzione grafica diversa da quella che
abbiamo usato nella progettazione delle pagine. Perciò è bene usare tipi di caratteri scegliendo tra i
font più diffusi e specificare nella HomePage la risoluzione video più adatta (per esempio 800x600)
per la migliore visualizzazione delle pagine.
Tutti siti Internet contengono alcuni elementi standard:
 il logo e il sommario nella Home Page







un link alla Home Page nelle altre pagine
una guida all'uso del sito
il nome dell'autore delle pagine
l'indicazione degli eventuali collaboratori o sponsor
un programma di ricerca all'interno del sito
una pagina di link ad altri siti di interesse generale o che trattano argomenti simili
in modulo di posta elettronica con il quale l'utente può inviare richieste, messaggi od
osservazioni (feedback)
 un contatore del numero di visitatori che si sono già connessi al sito.
Un sito Internet è raggiungibile da qualsiasi nazione del pianeta: perciò, se esso contiene
informazioni di interesse per un pubblico vasto ed eterogeneo, è meglio produrre due versioni delle
pagine, in italiano ed in inglese, offrendo all'utente la possibilità di scelta della lingua a partire dalla
pagina iniziale.
4. IPERTESTI IN VERSIONE WEB
La creazione di pagine per i siti Internet viene resa facile attraverso l'uso di appositi programmi
software che consentono di progettare e realizzare documenti pronti per essere pubblicati, senza
conoscere i codici e la sintassi del linguaggio HTML: i programmi di questo tipo si chiamano Web
editor o software per il Web Authoring.
Sono programmi di tipo visuale, cioè l'autore delle pagine definisce titoli, testi, figure, direttamente
sul video del computer, e può vedere cubito l'aspetto della pagina (layout) nella stessa forma con la
quale verrà visualizzata sul monitor dell'utente che si collega al sito Internet. E’ una modalità di
lavoro indicata in informatica con la sigla WYSIWYG [What You See Is What You Get, cioè quello
che si vede sul video è quello che vedrà l'utente del nostro lavoro). Questi programmi consentono di
scrivere la parte testuale delle pagine con le stesse modalità di un word processore di inserire con
facilità gli elementi standard di un sito Internet. Il codice HTML viene generato automaticamente e
su di esso si possono eventualmente fare piccoli aggiustamenti, se si conoscono i tag fondamentali
del linguaggio. Il funzionamento delle pagine e dei link in esse contenuti può essere criticato in
anteprima (preview) richiamando il browser direttamente dal Web editor.
FrontPage
FrontPage è un programma per la creazione e la gestione di siti Web, con due funzioni principali:
 rendere facile l'attività di progettazione e di realizzazione delle singole pagine;
 controllare l'installazione e la manutenzione nel tempo di un sito Interne!. Esso consente di
inserire in modo immediato nelle pagine le componenti più comuni: testo, moduli da
completare, moduli per la ricerca di parole, striscioni pubblicitari (bannei), scritte
scorrevoli, contatore dei visitatori, pulsanti per attivare comandi, immagini, icone animate,
ecc.
Inoltre possono essere impiegate le più innovative tecnologie di Internet per rendere le pagine
dinamiche e interattive nei confronti dell'utente.
II programma è formato da due parti fondamentali:
 FrontPage Explorer, per la gestione dell'intero ipertesto che forma il sito Interne
 FrontPage Editor, per la creazione e modifica delle singole pagine
In aggiunta l'utente può disporre anche di un programma per il trattamento delle immagini (Image
Composef). Naturalmente sul computer deve essere installato un browser per poter verificare la
funzionalità delle pagine. L'oggetto su cui lavorare si chiama Web di FrontPage e rappresenta il
sito che viene registrato sul disco del computer locale e che verrà poi trasferito (pubblicato), una
volta completato e verifi-cato, sul server Internet. Un Web di FrontPage è un insieme di pagine
HTML, immagini, documenti e altri file e cartelle che compongono il sito Web. Questi elementi
possono essere importati da altre cartelle, utilizzando documenti già esistenti, oppure creati come
nuovi usando FrontPage Editor.
II programma fornisce poi alcune funzionalità molto utili: l'inserimento automatico di barre di
spostamento con bottoni e link per la navigazione, il controllo e l'eventuale aggiornamento dei
collegamenti ipertestuali ogni volta che si inserisce o si cancella una pagina, l'applicazione di temi
grafici con sfondi e disegni sono ripetuti in modo uniforme in tutte le pagine del sito, la generazione
automatica del sommario.
4. Multimedialità e interattività nelle pagine
Con l'estensione della rete Internet ad un vasto pubblico di utenti, anche l'aspetto e il contenuto
delle pagine nei siti Web si è arricchito di nuovi elementi per introdurre oggetti multimediali (suoni,
animazioni e filmati) e per stabilire un rapporto interattivo con i visitatori. Il sito Web quindi non è
più soltanto un insieme di pagine da leggere con testo e immagini, ma rappresenta uno strumento
per interagire con gli utenti: per esempio un'azienda può utilizzare un sito Web non solo per
presentare i suoi prodotti o servizi, ma anche per raccogliere ordini o richieste di informazioni sui
prodotti oppure per effettuare vendite e transazioni commerciali.
Per questi motivi nelle pagine Web sono presenti oggetti diversi:

moduli o questionari (form) da compilare

meccanismi per controllare la sicurezza delle operazioni commerciali

striscioni pubblicitari (banner) all'interno dei siti più frequentati dagli utenti della rete

immagini che cambiano durante la visualizzazione della pagina.
Oltre che con i modula l'interattività con gli utenti viene realizzata con le chat (conversazioni in
linea), i forum di discussione, i video acquisiti con una telecamera.
L'utente, tramite il browser, può lanciare l'esecuzione di programmi applicativi per consultare
archivi di dati, per rispondere a quiz in linea, per selezionare pagine di informazioni, per compiere
transa-zioni:questi moduli software, che vengono registrati sul server Internet sono normalmente
costituiti da programmi CGI (Common Cateway Interface), pagine attive ASP (Actìve Server Page)
o applicazioni scritte in linguaggio java (dette applet Java).
Inoltre il sito Web deve contenere oggetti multimediali che possano invogliare gli utenti a
connettersi spesso al sito: immagini ad alta risoluzione, video, suoni e canzoni.
presenti questi elementi possono essere inseriti con facilità all'interno delle pagine usando le
funzionalità presenti nei programmi di Web editor. Per esempio il programma FrontPage permette
di costruire in modo semplice un forum di discussione utilizzando la costruzione guidata dì un sito
Web.
Durante la costruzione della pagina con FrontPage Editor si possono inserire alcuni oggetti di uso
comune definiti come elementi attivi.
Per esempio:
 striscioni pubblicitari (banner)
 scritte scorrevoli sul video
 moduli per la ricerca di pagine contenenti le parole richieste
 statore del numero di visitatori che si sono connessi al sito
 pulsanti che cambiano aspetto al passaggio del mouse sopra di essi.
Si deve osservare che per utilizzare gli elementi attivi è necessario che il sito risieda su un server
Internet nel quale siano in esecuzione i moduli software detti estensioni di FrontPage. Nelle pagine
possono essere inserite informazioni multimediali per presentare documenti video o sonori che si
riferiscono all'argomento trattato nel sito oppure più semplicemente, per rendere le pagine più
interessanti e attraenti per il visitatore. Questa operazione è rappresentata nel codice HTML con il
tag:
<IMG DYNSRC="prova.avi” START="fileopen" W1DTH="160"
HE1GHT=="120" ALT=filmato di prova
dove prova.avi indica il nome del file contenente il video in formato AVI.
Per inserire un suono associato ad una hotword o ad un'immagine, basta seguire la stessa
procedura che abbiamo già visto per la creazione dei link ipertestuali: in questo caso il link serve a
collegare la pagina al documento sonoro, anziché ad un'altra pagina, lanciando l'esecuzione del
software per la riproduzione dei suoni (Lettore multimediale).
È possibile inserire in una pagina i file audio dei tipi: Audio Wave (WAV), Sequenza MIDI (MIDI),
Audio AIFF (AIF, AIFC, AIFF), Audio AU (AU/ SND).
La corrispondente riga di codice HTML assume in questo caso la forma:
<A HREF=”motivo1.wav”>ascolta questo motivo</A>
dove motivo1.wav indica il nome del file che contiene il suono in formato WAV: la frase "ascolta
questo motivo" compare sottolineata e in colore perché indica la presenza di un link ipertestuale ad
un file. È possibile anche utilizzare un motivo musicale come suono di sottofondo che verrà
riprodotto quando un utente visita la pagina Web.
Nella pagina scritta in HTML, il suono di sottofondo si ottiene intro-ducendo all'interno della
sezione <HEAD>...</HEAD> il tag BGSOUND (background sound):
<BGSOUND SRC=suono.wav” LOOP="-1">
dove suono.wav indica il motivo musicale che viene attivato come sottofondo all'apertura della
pagina e che viene ripetuto in modo continuo (loop = -1).
Uno degli strumenti per l'interattività con gli utenti è la pagina per raccogliere suggerimenti o
commenti dai visitatori, formata da moduli elettronici da riempire con il nome del mittente,
l'indirizzo di posta elettronica e il testo del commento. Queste pagine si chiamano moduli di
feedback. Il modulo completato dall'utente viene inviato tramite posta elettronica facendo clic su
un bottone di comando inserito nella pagina.
6. Inserimento di procedure eseguibili
Un aspetto non secondario, legato allo sviluppo della rete Internet e all'espansione del numero di
utente è rappresentato dalla possibilità di chiedere l'esecuzione di piccoli programmi a partire dai
documenti ipertestuali scritti con il codice HTML La tecnologia prevalente per costruire queste
applicazioni per il Web è basata sull'uso del linguaggio java, un linguaggio di programmazione
che permette di richiamare moduli software eseguibili dall'interno di pagine Web: gli applet java.
Essi portano con sé un vantaggio importante: sono residenti su un server Internt e possono essere
eseguiti con qualsiasi sistema operativo di un computer collegato, purché in esso sia installato un
urtare gli applet Java. La realizzazione di Applet java si compone delle normali fasi di lavoro per la
costruzione di programmi: stesura del testo sorgente in Java, compilazione del sorgente e creazione
del programma eseguibile.
Il termine script in informatica indica comunemente un testo che, anziché contenere una
descrizione o un messaggio, è formato dai comandi di un linguaggio organizzati in una sequenza o
in una selezione del tipo se ... allora oppure in una ripetizione.
I JavaScript possono essere utilmente inseriti nelle pagine HTML per questi scopi:
 gestire gli eventi che possono accadere durante la consultazione delle pagine, provocati
dall'utente con il clic del mouse o dalla legazione all'interno di un sito
 fornire messaggi di avvertimento o risposte alle scelte effettuate
 acquisire le scelte dell'utente all'interno di un elenco e lanciare l'esecuzione dell'azione
conseguente
 controllare la validità dei dati inseriti in un modulo (form)

apportare modifiche all'aspetto di una pagina Web durante la sua visualizzazione con il
browser.
In sostanza con i javaScript si costruiscono pagine Web dinamiche: cioè non sono solo pagine da
leggere e vedere, ma favoriscono l'interattività tra l'utente che usa il browser e le informazioni
presenti nella rete Internet.
Di solito i JavaScript sono costituiti da una o più procedure, dette function, e scritte all'interno della
pagina HTML, nella parte iniziale, e raggruppati dalla coppia di tag <SCR1PT> ... </SCRIPT>/
indicanti l’inizio e la fine della zona riservata al codice JavaScript. La function è identificata da un
nome e da eventuali parametri (racchiusi tra due parentesi tonde) che le vengono inviati al momento
dell'esecuzione.