FORWARD SCIENZE E TECNOLOGIE APPLICATE - indirizzo informatica e telecomunicazioni - Silvio Ceccato
←
→
Trascrizione del contenuto della pagina
Se il tuo browser non visualizza correttamente la pagina, ti preghiamo di leggere il contenuto della pagina quaggiù
Piero Gallo – Fabio Salerno FORWARD SCIENZE E TECNOLOGIE APPLICATE indirizzo informatica e telecomunicazioni BLOCCO TEMATICO D – JavaScript e le pagine web Unità di apprendimento sul Web Il linguaggio HTML
Documenti HTML
LEZIONE nel Web
1 Il documento ipermediale
Un documento ipertestuale è un testo che non si deve obbligatoriamente
leggere dall’inizio alla fine (come una favola) ma può essere consultato diret-
tamente in qualsiasi punto. Contiene al suo interno dei rimandi (links) ad altre
parti del documento. Un documento multimediale è, invece, un insieme di
informazioni che possono assumere diverse forme integrate fra loro: testo,
immagini, filmati, suoni ecc. Dall’unione dei due tipi di documenti nasce il
documento ipermediale.
In un documento ipermediale si individuano le seguenti parti:
• il contenuto;
• la struttura;
• la presentazione.
Il contenuto è l’insieme di parti testuali, immagini, suoni ecc. che contribuiscono
a trasmettere informazioni all’utente che lo sta leggendo (o, meglio, navigando).
La struttura è l’organizzazione logica interna del documento: la sua suddivisione
in capitoli, paragrafi, sottoparagrafi ecc., e il modo in cui tali parti sono organiz-
zate gerarchicamente tra di loro.
La presentazione, invece, è il modo in cui il contenuto di un documento, orga-
nizzato secondo una certa struttura, viene visualizzato dal punto di vista grafico.
Ad esempio, il titolo di un capitolo (che è il contenuto di un elemento struttura-
le) deve avere una visualizzazione che lo differenzi dal titolo di un paragrafo e,
quindi, deve essere diverso il tipo di carattere utilizzato per il contenuto, la sua
dimensione, il suo colore ecc. Diciamo genericamente che la presentazione ri-
guarda lo stile che un elemento della struttura deve possedere per visualizzare il
suo contenuto.
Il linguaggio HTML
Finora abbiamo parlato di un generico documento ipermediale, ma siamo in-
teressati a documenti ipermediali che possano essere letti su Internet o meglio
che permettano la “navigazione” a tutti gli utenti di Internet. Affinché ciò accada
è necessario che tali documenti siano scritti in un linguaggio che sia universal-
mente riconosciuto da tutti i computer che possono collegarsi a Internet. Tale
linguaggio è l’HTML, acronimo di HyperText Markup Language (linguaggio per la
marcatura di ipertesti).
L’HTML è un linguaggio di formato utilizzato per dichiarare la forma (struttura)
che un documento ipermediale deve assumere.
Il processo di standardizzazione del linguaggio è controllato da una organizzazione
denominata World Wide Web Consortium (W3C). L’HTML è diventato famoso con
il World Wide Web (WWW), che rappresenta uno degli aspetti più affascinanti della
rete Internet, poiché mette a disposizione delle persone di tutto il mondo infor-
mazioni e documenti di ogni genere, contenenti immagini, suoni e collegamenti
ad altri documenti, come se fossero depositati su un’enorme ragnatela sulla quale
l’utente può muoversi.
Un documento HTML è un normalissimo file di testo e di conseguenza è visibile
e modificabile con qualunque programma di word processing. Oramai tutti i pro-
dotti per ufficio (word processor, fogli elettronici, programmi di presentazione)
offrono la possibilità di creare documenti che possono essere convertiti in forma-
to HTML. I file HTML si distinguono dai normali file di testo tramite l’estensione
.html (o .htm per seguire le regole sulla lunghezza delle estensioni del DOS).
2 BLOCCO TEMATICO D JavaScript e le pagine webDocumenti HTML nel Web LEZIONE 1
Un documento HTML è, pertanto, un unico file codificato in ASCII che include
sia il contenuto che vogliamo far visualizzare sia le istruzioni usate per elabo-
rare quel contenuto.
Se ad esempio stiamo utilizzando un qualsiasi word processor per creare pagine
HTML, dobbiamo ricordarci di salvare il file in modalità solo testo, e non nel formato
proprietario del word processor utilizzato.
Per scrivere documenti HTML è consigliabile l’utilizzo di ambienti di sviluppo integrati,
che forniscano un valido text editor con gli utilissimi numeri di riga e ricche guide in
linea. Tra i tanti ricordiamo 1St Page (si legge “first page”) di EVR Soft adatto anche
per lo sviluppo di programmi JavaScript.
Architettura client/server del Web e il browser
All’interno di una rete telematica notevole importanza riveste l’architettura cli-
ent/server nella quale le risorse sono distribuite sui computer della rete e condi-
vise da più utenti.
All’interno di questa architettura, alcuni computer possono offrire servizi agli
utenti della rete mettendo a disposizione le proprie risorse. Tali computer ven-
gono definiti server (servente) o host (ospitante), mentre i client (clienti) sono i
computer che utilizzano le risorse messe a disposizione dai server.
Con il termine risorsa non ci riferiamo soltanto a dispositivi hardware (stam-
panti, memorie, CPU ecc.), ma anche a componenti software, quali programmi,
archivi di dati e banche dati.
I ruoli di server e client non sono prefissati: ad esempio, un utente può mettere
a disposizione una risorsa e comportarsi da server e, contemporaneamente, uti-
lizzare i dati di un archivio memorizzato sul disco di un altro computer collegato,
comportandosi da client. È questo uno dei grandi vantaggi offerti da questo tipo
di architettura: un considerevole numero di utenti può avere a disposizione risor-
se anche costose e/o che si trovano a grandi distanze.
Le pagine HTML hanno un ruolo primario in tale architettura. Esse:
• risiedono sui computer server;
• vengono trasferite tramite Internet sui client a ogni loro richiesta;
• vengono visualizzate sui client per mezzo del browser.
Un browser è un programma che permette all’utente di leggere le pagine scritte
in linguaggio HTML. Tecnicamente, un browser (che vuol dire “sfogliatore”) è un
Web client, cioè un “cliente Internet”. Ciò significa che il programma browser
invia richieste di dati, ad esempio chiede una pagina Internet, a un server che
provvede a inviarla.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 3Struttura
LEZIONE dei documenti HTML
2 La struttura tipica di un documento HTML
Un documento HTML è composto da una sequenza di elementi ognuno dei
quali è caratterizzato da codici, racchiusi tra parentesi angolari, che prendono
il nome di tag (cioè “contrassegno”, da cui deriva il termine markup della sigla
HTML) o marcatori (o marcature o etichette).
La maggior parte degli elementi possiede una coppia di tag che serve per delimi-
tare la parte di documento su cui l’elemento ha effetto.
codice di inizio elemento (tag iniziale)
Questo è un esempio parte di documento sul quale l’elemento ha effetto
codice di fine elemento (tag finale)
Nella descrizione sintattica dei linguaggi proposti in questa collana di laboratorio di
Informatica abbiamo utilizzato uno strumento molto vicino alla BNF (Bakus-Naur Form)
che, come sappiamo, racchiude le categorie sintattiche all’interno di parentesi angola-
ri. Considerato che queste parentesi fanno parte integrante del linguaggio HTML, nella
descrizione sintattica delle varie istruzioni non racchiuderemo le categorie sintattiche
tra < > per evitare inutili confusioni.
Vediamo ora quali sono gli elementi (o istruzioni) di base indispensabili per la
visualizzazione in un browser di semplici documenti HTML. Prima di procedere,
ricordiamo che l’HTML è classificato come linguaggio di tipo dichiarativo: si di-
chiara cosa l’istruzione (l’elemento) deve fare e non come deve farlo.
HTML, inoltre, non è un linguaggio case-sensitive (cioè sensibile al fatto che i
caratteri siano scritti in maiuscolo o minuscolo): pertanto i tag possono essere
scritti indifferentemente in maiuscolo o in minuscolo. Per nostra convenzione
scriveremo in maiuscolo tutti i tag HTML.
La struttura tipica di un documento HTML assume la forma seguente:
c
c
c Qui si dichiara il titolo del documento
c
c
c Qui si inserisce il testo del documento, le immagini, i link ecc.
c
c
Gli elementi HTML, HEAD e BODY sono elementi contenitori nel senso che pos-
sono contenere al loro interno altri elementi.
Come si evince dalla struttura appena riportata, un documento inizia sempre con
il tag e termina con il corrispondente , a indicare che tutto ciò
4 BLOCCO TEMATICO D JavaScript e le pagine webStruttura dei documenti HTML LEZIONE 2
che si trova compreso fra questi due elementi è un documento in formato HTML.
All’interno sono generalmente presenti due sezioni:
• una d’intestazione ... che contiene le informazioni dichiara-
tive, informative o di impostazione globale del documento. Il primo importante
elemento presente in questa sezione è quello utilizzato per visualizzare il titolo del
documento. Il titolo deve essere racchiuso fra i tag ... e non
viene visualizzato all’interno della pagina Web, ma compare nella barra superiore
della finestra del browser. L’intestazione può contenere anche altre informazioni,
ma di questo discuteremo più in dettaglio in seguito;
• una di corpo ... che racchiude il documento vero e pro-
prio, ovvero informazioni testuali, immagini, link, oggetti multimediali ecc.
con annessi tutti gli altri marcatori con i quali si vorrà descriverne la struttura,
la forma e il contenuto.
Avrete sicuramente notato i “rientri” utilizzati per i tag degli elementi HEAD, BODY e
TITLE e avrete anche osservato che ogni tag di chiusura viene scritto esattamente
nella stessa colonna in cui è stato scritto quello di apertura. Le istruzioni vengono ri-
entrate per indicare la loro dipendenza dall’elemento. È buona abitudine curare questi
incolonnamenti poiché, così facendo, si garantisce leggibilità al codice; l’interprete
(browser) comunque li ignora, nel senso che le istruzioni verrebbero correttamente
interpretate anche in assenza di questi utili incolonnamenti.
I commenti
I commenti alle istruzioni rappresentano la prima e più immediata documenta-
zione disponibile. I commenti aiutano a comprendere e a giustificare la presenza
di alcune istruzioni e a favorirne la comprensione. Qualsiasi frase scritta tra i tag
Poiché non tutti i browser sono in grado di interpretare tutti i tag HTML a causa delle
continue versioni e “dialetti” del linguaggio, un browser che incontra un tag sconosciu-
to si limita a ignorarlo.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 5Strutturazione
LEZIONE del testo
3
Come un qualsiasi testo, spazi, linee vuote, paragrafi, tipi di carattere e tabula-
zioni permettono di rendere più leggibile anche un testo HTML. Vediamo come
si realizzano.
Gli elementi P, BR e HR
In molti documenti il testo viene diviso in blocchi (i capoversi, in inglese para-
graph), al fine di dividerlo in unità concettuali e aumentarne la leggibilità. Anche
un documento HTML può essere diviso in capoversi utilizzando l’elemento P
caratterizzato dal tag . L’effetto visivo è quello di inserire un ritorno a capo e
una riga vuota nel testo a video. Per questo tag la chiusura non è indispensabile.
L’interprete HTML non tiene conto degli “a capo” che dovessimo inserire nel
nostro file.
c
c
c Esempi di paragrafi
c
c
c Questa riga
c appare spezzata.
c Questa nuova
c riga, invece,
c appare scritta tutta
c di seguito
c nonostante ci siano
c gli a capo.
c
c
A parte le differenze interpretative che possono avere i singoli browser, quando
si definisce un paragrafo occorre specificare se il testo deve essere allineato a
sinistra, a destra oppure centrato. Per risolvere questo problema sono stati intro-
dotti degli attributi o proprietà, che assumono la forma:
c
Come si evince, quando si specificano più attributi questi devono essere separati
da spazi.
Nel caso specifico del paragrafo, si può utilizzare l’attributo ALIGN come di seguito
riportato:
Allinea il testo al margine sinistro della pagina.
Allinea il testo al margine destro della pagina.
Centra il testo rispetto alla pagina.
Allinea il testo al margine sinistro e destro della pagina.
L’elemento P senza attributi di specificazione viene interpretato come se si voles-
se allineare il testo a sinistra, essendo questo il caso più comune.
L’elemento BR (che sta per break), caratterizzato dal solo tag di apertura ,
ha la funzione di provocare un “ritorno a capo” senza introdurre una riga vuota
e senza interrompere l’unità concettuale del paragrafo (e neppure la sua impagi-
nazione; ossia un paragrafo allineato a destra, ad esempio, continuerà a essere
allineato a destra, fino al tag , anche se contiene uno o più tag ).
6 BLOCCO TEMATICO D JavaScript e le pagine webStrutturazione del testo LEZIONE 3
Per inserire un separatore orizzontale (linea) all’interno del testo si utilizza l’ele-
mento HR caratterizzato dal solo tag di apertura . È possibile specificare le
dimensioni (attributo WIDTH), l’ampiezza (attributo SIZE) della linea da tracciare
nonché allinearla (con il già esaminato attributo ALIGN). La linea è visualizzata con
effetto 3D, ma per renderla bidimensionale si può usare l’attributo NOSHADE. La
sintassi di questo elemento è la seguente:
Il valore dell’attributo width deve essere seguito dal simbolo % poiché inteso
come percentuale rispetto alla larghezza della pagina.
Ad esempio il codice:
c
determina la visualizzazione di:
L’elemento PRE
Per inserire testo preformattato, ovvero un testo che sia riportato esattamente
come scritto nel file HTML originario, tenendo quindi conto di spaziature, inden-
tazioni, tabulazioni e righe vuote, e utilizzando un font non proporzionale, ovvero
a spaziatura fissa, si utilizza l’elemento PRE (preformat) con i suoi tag e
.
Un esempio di utilizzo dell’elemento PRE è quello dell’omino, esempio che si trova
facilmente su Internet. Se in un documento HTML scriviamo il testo come di seguito
riportato, otteniamo un risultato diverso da quello che sicuramente ci aspettiamo.
Diamo uno sguardo:
c
c
c Esempio senza PRE
c
c
c \|/
c (@ @)
c +––––oOO––––(_)––––––––––––––+
c | esempio di utilizzo |
c | di |
c | PRE |
c +–––––––––––––––––––––––oOO––+
c |__|__|
c || ||
c ooO Ooo
c
c
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 7(continua)
LEZIONE Se, invece, utilizziamo l’elemento PRE inserendo i suoi tag prima e dopo l’omino,
3
possiamo visualizzare esattamente quello che abbiamo scritto.
c
c
c Esempio con PRE
c
c
c
c \|/
c (@ @)
c +––––oOO––––(_)––––––––––––––+
c | esempio di utilizzo |
c | di |
c | PRE |
c +–––––––––––––––––––––––oOO––+
c |__|__|
c || ||
c ooO Ooo
c
c
c
8 BLOCCO TEMATICO D JavaScript e le pagine webStrutturazione del testo LEZIONE 3
Spesso occorre tener presente la differenza esistente tra alcune famiglie di font:
• font a spaziatura fissa (come quello usato per realizzare l’omino);
• font a spaziatura variabile.
La differenza consiste che i primi conservano una spaziatura uniforme indipendente-
mente dalla larghezza del simbolo. Un esempio di font a spaziatura fissa è il courier,
font che replica la scrittura della macchina da scrivere tradizionale.
Di seguito sono mostrate due righe scritte con font della stessa dimensione di carat-
teri: 12 dpi ma la prima utilizza “Courier”, la seconda “Times New Roman”:
|||||| ← spaziatura fissa
Questo è un esempio di Courier
|||||| ← spaziatura variabile
Questo è un esempio di Times New Roman
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 9Formattazione
LEZIONE del testo
4
Spesso capita di dover formattare il testo anche nella sua estetica. Ad esem-
pio, scrivere un termine in grassetto serve a metterlo in evidenza, così come il
corsivo lo stilizza oppure il sottolineato ne suggerisce l’importanza. Allo stesso
modo, un testo lampeggiante potrà richiamare l’attenzione. Nella tabella che
segue sono riportati i tag relativi agli elementi HTML da usare per ottenere gli
effetti appena descritti e altri ugualmente accattivanti:
Gli elementi possono anche essere combinati fra loro. Ad esempio, per visualiz-
zare la frase Ciao mamma in grassetto e sottolineato scriveremo:
c Ciao mamma
oppure per scrivere una frase del tipo Ciao mamma scriveremo:
c Ciao mamma
Tag degli elementi Effetto
Questo è un esempio di testo sottolineato.
...
O almeno dovrebbe esserlo! Dipende dalla configurazione del browser.
... Questo è un esempio di testo in grassetto.
... Questo è un esempio di testo in corsivo.
... Questo è un esempio di testo sbarrato.
... Vorrei fare una citazione, ma non mi viene in mente niente.
... Questo è un esempio di pedice.
... Questo è un esempio di apide.
... Si consiglia all’utente di premere il tasto Enter.
... Notate come viene visualizzata la parola Esempio in questo breve testo.
... Utilizzo: nome_programma, variabile.
Vi è mai capitato di utilizzare una macchina per svrivere? No? Non c’interessa,
...
ma i vostri documenti avrebbero assunto un aspetto simile a questo...
... Testo lampeggiante (peccato che sulla carta non si veda!).
Gli attributi sono comparsi successivamente alle prime definizioni del linguaggio HTML
e non tutti i browser, specialmente i più vecchi, sono in grado di comprenderli. Niente
di strano dunque se, allineando un paragrafo a destra, lo si vedrà allineato a sinistra
utilizzando un vecchio browser (sempre più rari). Purtroppo questo è uno degli inconve-
nienti che si possono incontrare nella stesura di documenti in formato HTML, al quale
si devono associare anche le differenti interpretazioni che i browser danno di alcune
istruzioni.
L’editoria elettronica è in continua evoluzione, e ogni pochi mesi escono degli aggior-
namenti che incrementano le potenzialità dei browser ma, ahimè, anche i pericoli di
confusione. È per questo che suggeriamo ai candidati “scrittori elettronici” di limitare
l’utilizzo di caratteristiche tipiche di un certo browser che potrebbero rendere poco
comprensibili o addirittura illeggibili i documenti. Nelle prossime unità vedremo come
è possibile evitare questi problemi.
10 BLOCCO TEMATICO D JavaScript e le pagine webFormattazione del testo LEZIONE 4
Per cambiare il tipo di carattere, la sua dimensione e il suo colore, occorre utiliz-
zare l’elemento FONT caratterizzato dai tag e dagli attributi:
• SIZE, che specifica la grandezza del carattere. Il valore massimo è 7;
• FACE, che consente di impostare il tipo di font con cui il testo deve essere visualizzato.
Quando il browser trova una pagina che contiene questo attributo, legge la lista di
font specificati nell’attributo e cerca nel sistema un font con tale nome. Se lo trova,
visualizza il testo utilizzando quel font, altrimenti prova con il secondo e così via.
Nel caso in cui non ne venga trovato alcuno, il testo viene visualizzato con il font
standard. Non tutti i sistemi usano gli stessi nomi per i font, quindi, anche in questo
caso, il risultato è variabile da sistema a sistema;
• COLOR, consente di impostare il colore del testo (il cosiddetto colore di fore-
ground). I colori si possono esprimere:
– attraverso un codice esadecimale, composto da 6 cifre e preceduto dal
simbolo #. Ad esempio COLOR: “#FF0000”;
– attraverso il formato RGB (Red Green Blue). Ad esempio, COLOR:
RGB(0,0,255);
– indicando il nome del colore in lingua inglese. Ad esempio, COLOR: “red”.
Facciamo un esempio.
c
c
c Prova caratteri
c
c
c
c Questo è il risultato:
c grandezza del carattere: 4,
c tipo del carattere: Sebastian, colore: rosso.
c
c
c
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 11(continua)
LEZIONE
4
È possibile definire il colore di sfondo (cioè il colore di background) e il colore del testo
per l’intero corpo della pagina Web utilizzando gli attributi bgcolor e color associati al
tag . Ad esempio con il tag:
c
c .......
c
Tutto il contenuto del corpo della pagina sarà scritto con un testo rosso su uno sfondo
giallo.
Gli elementi per i titoli interni
Spesso all’interno di ogni documento compaiono dei titoli, che possono essere
articolati su vari livelli gerarchici (titolo di sezione, titolo di capitolo, titolo di
paragrafo ecc.). L’elemento per codificare questi titoli interni è H caratterizzato
da un tag che assume la forma dove n è un numero compreso tra 1 e 6:
è il livello più alto e il più basso. Il primo viene utilizzato per
marcare il titolo di una sezione importante e i successivi per indicare sottosezio-
ni progressivamente più piccole. Il titolo , abitualmente, si usa per iden-
tificare una nota a piè di pagina o altro testo che non si vuole porre in grande
evidenza.
Il seguente esempio chiarirà la funzione di questo elemento.
c
c
c Prova intestazioni
c
c
c Intestazione di primo livello
c Intestazione di secondo livello
c Intestazione di terzo livello
c Intestazione di quarto livello
c Intestazione di quinto livello
c Intestazione di sesto livello
c
c
12 BLOCCO TEMATICO D JavaScript e le pagine webFormattazione del testo LEZIONE 4
L’elemento Hn supporta l’attributo align per la specifica dell’allineamento del
testo. È pertanto lecito trovare istruzioni del tipo
c Capitolo 2
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 13I caratteri speciali
LEZIONE Quando si scrive un testo può presentarsi la necessità di dover inserire dei ca-
5
ratteri “speciali” come, ad esempio, minore “” o caratteri
diacritici, cioè segni e accenti aggiunti ai caratteri per motivi di pronuncia (à, À
ecc.). Anche lo stesso spazio è un carattere speciale. Diamo uno sguardo alla fra-
se presente nella sezione BODY:
c
c Qualcosa da scrivere
c
La frase Qualcosa da scrivere, contiene più spazi tra le singole parole ma il browser
non riconosce più di uno spazio. Questo, se da un lato può sembrare scomodo,
dall’altro ci permette di avere un controllo assoluto sull’aspetto del documento.
Per inserire lo spazio si utilizza il carattere speciale . Ad esempio:
c
c Qualcosa
c da
c scrivere
c
produce la visualizzazione riprodotta.
La “e” commerciale (&) indica l’inizio di un carattere speciale, mentre “;” ne in-
dica la fine e le lettere tra questi due caratteri sono una specie di abbreviazione,
chiamata entità o codice nominale. Ecco un esempio di caratteri speciali (atten-
zione: devono essere scritti in minuscolo):
• (spazio)
• & (&)
• < (minore)
• " (virgolette)
• > (maggiore)
• ¬ (segno del not logico)
14 BLOCCO TEMATICO D JavaScript e le pagine webI caratteri speciali LEZIONE 5
c
c la e accentata si scrive é
c
c
c il simbolo di minore si scrive <
c
Oltre ai caratteri speciali, è possibile scrivere caratteri qualsiasi, ad esempio un
carattere ASCII. La sintassi da utilizzare è la seguente:
c &#CodiceNumerico
Se volessimo visualizzare & (ampersend) dovremmo scrivere:
c &
Si utilizza, quindi, il simbolo & seguito da # e da un numero. Ogni numero rappre-
senta un simbolo: ad esempio, il numero 38 rappresenta il simbolo “&” stesso, il
numero 40 rappresenta il simbolo “(” e così via. Nella sezione Appendici sul sito
di riferimento è riportato un elenco completo dei caratteri speciali.
I caratteri speciali citati possono esprimersi in una delle due forme:
Simbolo Codice numerico Codice nominale
spazio
< < <
> > >
& & &
“ " "
¬ ¬ ¬
I caratteri ASCII utilizzano codici a 7 bit. È quindi possibile gestire 27 = 128 simboli
diversi. La versione 3.2 di HTML si riferiva a uno standard denominato “ISO 8859-1” o
“ISO Latin-1” (caratteri Latini), che impiegava codici a 8 bit; con essa, quindi, era pos-
sibile gestire 28 = 256 simboli diversi codificati, da 0 a 255 incluso.
La necessità di un supporto delle lingue non occidentali portò allo sviluppo di un codice
adatto a un set di caratteri esteso: UNICODE, che è utilizzato nelle versioni di HTML
più recenti.
UNICODE utilizza codici a 16 bit (2 byte), quindi è in grado di gestire 216 = 65536
simboli diversi. Può così comprendere quasi tutti i simboli degli alfabeti esistenti e
numerosissimi simboli speciali.
Più precisamente, l’HTML si riferisce allo standard “ISO 10646” che contiene
UNICODE e, generalmente, utilizza codici a 4 byte (1 byte = 8 bit), risultando in grado
di gestire fino a 232 simboli diversi.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 15CSS e HTML
LEZIONE
6 I fogli di stile CSS: introduzione
Il linguaggio HTML è caratterizzato da alcuni limiti legati alla scarsa possibilità
che offre sul controllo dello stile di un documento; lo sviluppatore deve occuparsi
di formattare ogni singolo elemento con conseguente dispendio di tempo e di
risorse.
Esaminiamo il seguente codice HTML che formatta un semplice testo, impostan-
dolo in verde e in corsivo:
c
c Testo verde e corsivo
È questa la soluzione ideale per una singola pagina o per un sito di poche pagi-
ne, senza pretese grafiche o stilistiche. Consideriamo, invece, un sito di medio-
grandi dimensioni e immaginiamo di volerlo formattare completamente con i
tag HTML.
Se ci si dovesse rendere conto che il colore verde a un testo non va più bene, ci
si troverebbe di fronte a un grosso problema: aprire ogni singolo file e modificare
singolarmente il colore di tutti i testi verdi.
Ancora, non è possibile con l’HTML decidere di posizionare un elemento in un
determinato punto della pagina se non creando una serie di tabelle: l’effetto otte-
nuto, poi, non è detto che sia quello desiderato. Il problema si risolve utilizzando
il linguaggio CSS.
CSS (Cascading Style Sheets) è un linguaggio di formattazione stilistica e strut-
turale di un documento HTML o di una serie di documenti in cascata: da qui
il nome.
In cascata significa che si può aggiornare lo stile di un documento intero o di una
sua parte o, ancora, di una serie di documenti, lavorando su un’unica fonte.
Integrare il linguaggio CSS con l’HTML significa proporre una soluzione ideale,
in termini stilistici, per la realizzazione di un design corretto, potente, versatile
e dinamico. In generale, quindi, possiamo affermare che il linguaggio CSS serve
per impostare lo stile di uno o più elementi HTML.
Abbiamo appena affermato che la potenza di CSS non si limita alla praticità e alla
versatilità come appena detto, ma anche alla sua dinamicità, data dall’utilizzo che è
possibile farne in concomitanza con JavaScript con cui è possibile implementare im-
portanti routine nell’ambito del Web design; si parla di DHTML (Dynamic HTML - HTML
dinamico).
16 BLOCCO TEMATICO D JavaScript e le pagine webCSS e HTML LEZIONE 6
Lo stile degli elementi HTML
Il codice CSS può essere implementato in tre diversi modi a seconda delle esi-
genze:
1. direttamente su di un elemento HTML (fogli di stile in linea);
2. nell’header della pagina (fogli di stile incorporati);
3. in un file esterno con estensione .css (fogli di stile esterni).
Ognuno di questi tre modi si differenzia leggermente dall’altro. In particolare, il
primo è legato ad ogni singolo elemento su cui deve agire, il secondo assegna
un tipo di stile a tutti gli elementi di un documento HTML, mentre l’ultimo può
essere influente sugli elementi di più documenti e riguardare, ad esempio, interi
siti Web con migliaia di pagine HTML.
Le regole comuni sono, invece, le seguenti:
• CSS è case sensitive: fa, pertanto, differenza tra caratteri digitati in maiuscolo e
minuscolo;
• per attribuire uno stile a uno o più elementi si usa STYLE che è utilizzato come
proprietà nei fogli di stile in linea (ciò significa che la proprietà STYLE può es-
sere inserita nel tag di apertura di ogni elemento HTML a cui si vuole attribuire
uno stile) e come elemento HTML nei fogli di stile interni ed esterni. Quando
viene usata come proprietà, STYLE ha la particolarità di essere una proprietà
che ne possiede delle altre;
• per assegnare un valore a un attributo vengono usati i due punti (:) laddove in
HTML viene usato un “=” (uguale);
• gli attributi consecutivi sono separati da “;” (punto e virgola) invece che da “,”
(virgola);
• molti attributi sono divisi da - (trattini) anche se fanno parte integrante del
nome stesso.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 17Stili in linea, aree, font
LEZIONE I fogli di stile in linea
7
I fogli di stile in linea (inline style) si utilizzano quando si ha la necessità di
impostare uno stile a uno specifico elemento o blocco di elementi, senza che
questo vada a influire sulle altre parti dello stesso documento.
La sintassi generale è la seguente:
c
Come ben si evince, si possono combinare fra di loro più stili racchiudendoli fra
doppi apici e separando i vari attributi di stile con il punto e virgola.
Ad esempio, si può impostare uno stile per un paragrafo avendo la certez-
za che questo non sia esteso a tutti gli altri paragrafi contenuti all’interno
dello stesso documento. Il seguente esempio chiarirà il concetto.
c
c Ciao a tutti
c
La frase Ciao a tutti scritta tra il tag di apertura e fino a quello di
chiusura avrà uno stile caratterizzato da un colore azzurro, giustificato e
con una indentazione di 12 pixel.
Per un elenco completo e dettagliato delle proprietà di STYLE rimandiamo alla tabella
presente nella sezione Appendici sul sito di riferimento di questo volume.
Con i CSS in linea è molto importante fare uso del tag di chiusura (nel precedente caso
): mentre per HTML non era indispensabile, lo diventa nel caso dei CSS poiché la
chiusura dell’elemento determina anche la chiusura, e quindi la fine, dello stile.
È facile, quindi, personalizzare tutti gli elementi di HTML, anche quelli che non
sono molto attraenti e magari, per questo motivo, poco utilizzati.
Consideriamo ora il seguente esempio.
c
c
c Esempio con elementi Hn
c
c
c
c Esempio di H1
c
c Esempio di P
c
c
18 BLOCCO TEMATICO D JavaScript e le pagine webStili in linea, aree, font LEZIONE 7
Come definire un’area: gli elementi DIV e SPAN
Con CSS si utilizzano solitamente due elementi di HTML che non hanno altro
scopo se non quello di fare da contenitore:
• DIV, caratterizzato dai tag e ;
• SPAN, caratterizzato dai tag e .
Questi due elementi non producono alcun effetto se usati da soli ma a essi è pos-
sibile associare vari stili. Se, ad esempio, si desidera che una sola parte del testo
di un documento abbia un certo carattere o una certa formattazione, si useranno
gli elementi SPAN o DIV, per assegnare quello stile. Ad esempio:
c
c Tutto il blocco avrà colore verde e carattere arial
c
In questo modo abbiamo impostato lo stile del solo blocco compreso tra i tag
e e non per tutto il documento. In particolare abbiamo indicato
come grandezza del carattere (font-size) 18 pixel, come tipo di carattere (font-
family) il classico Arial e come colore (color) il verde.
Le differenze tra DIV e SPAN sono che:
• DIV non lascia spazio prima e dopo la propria chiusura, ma, essendo un el-
emento di blocco, va a capo;
• SPAN essendo un elemento inline non va a capo. L’elemento inline è, appun-
to, quello che non va a capo e continua sulla stessa linea del tag che lo include.
Le misure dei font
In molte proprietà di STYLE si trovano misure espresse in punti, pixel, pollici o
centimetri. Chiariamo le differenze tra queste differenti unità di misura.
Punti L’unità viene abbreviata con la sigla pt. Ogni punto rappresenta 1/72 di
pollice. I punti si riferiscono unicamente allo spazio verticale occupato
sullo schermo, mentre la larghezza aumenta in proporzione all’aumen-
tare della misura verticale. Ad esempio: “font-size:24pt”.
Pixel Sono i punti presenti su uno schermo e la loro densità varia in fun-
zione della risoluzione consentita dal video e impostata dall’utente.
Ad esempio: “font-size:12px”.
Pollici È un’unità di misura anglosassone. Un pollice vale 2,54 cm. I pollici
sono espressi dall’abbreviazione in. Ad esempio: “font-size:1in”.
Centimetri È un’unità di misura tipica di molti paesi occidentali, ma poco usa-
ta nell’ambito della Web grafica. Ad esempio: “font-size:3cm”.
Percentuale È un’unità di misura che si riferisce alla grandezza di default impo-
stata nel browser. Di fronte a un browser che visualizza di default i
font a 12 pixel, un valore del 400% corrisponde a 48 pixel. La mi-
sura può essere variata dall’utente. Ad esempio: ”font-size:200%”.
La misurazione in percentuale dipende dalla misura corrente del
browser. Altri valori possono essere usati in sostituzione della per-
centuale: ad esempio: “font-size:smaller” indica il font immediata-
mente più piccolo rispetto a quello di default.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 19I fogli di stile
LEZIONE incorporati
8
I fogli di stile incorporati (internal style sheet) sono utilizzati quando allo
stesso stile fanno riferimento diversi elementi HTML.
È dispersivo e laborioso, definire lo stesso stile più volte all’interno della stessa
pagina quando, poi, serve sempre per il medesimo scopo: meglio, perciò, definirlo
una sola volta, a inizio pagina. In questo modo, tutti gli elementi interessati segui-
ranno quello stesso stile.
Per ottenere questo risultato, lo stile non deve più essere inserito all’interno del
singolo elemento (cioè nel suo tag di apertura), ma all’inizio della pagina utiliz-
zando, questa volta, l’elemento STYLE caratterizzato dai tag e
all’interno della sezione HEAD.
L’utilizzo dei fogli di stile incorporati non impedisce di fare uso dei fogli di stile in linea,
i quali avranno priorità sulle dichiarazioni di stile inserite nella sezione HEAD.
La sintassi da seguire è la seguente:
c
c .........
cI fogli di stile incorporati LEZIONE 8
c Questo, invece, è il secondo paragrafo. Lo stile è analogo!
c
c
Abbiamo utilizzato come selettore il tipo di un elemento (nel nostro caso P, cioè
tutti gli elementi di tipo P).
Adesso tutto ciò che si troverà all’interno di qualsiasi paragrafo sarà visualizzato
secondo lo stile impostato a inizio pagina, a meno che non ne venga creato uno
in linea il quale, come poc’anzi affermato, avrebbe la priorità rispetto all’altro.
Abbiamo detto che uno stile può essere associato a un qualsiasi elemento di HTML,
per cui se associamo il nostro stile all’elemento BODY sarà come definire uno stile
per tutta la pagina web, essendo BODY l’elemento che comprende tutta la pagina.
Ad esempio, il seguente stile:
c
c
c Fogli di stile incorporati
c
c BODY {font-size:18pt; color:RGB(255,255,0)}
c
c
c
c .......................
c .......................
c
c
farà in modo che qualsiasi elemento presente nel BODY sia caratterizzato da un
font di 18 pt e di colore giallo.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 21Selettori
LEZIONE e fogli di stile esterni
9
I selettori rivestono un ruolo importante poiché all’interno di documenti HTML
ricchi di elementi annidati è utile poterne selezionare solo alcuni sui quali appli-
care lo stile. Esistono molti tipi di selettori: per un elenco completo e dettagliato
consultare la documentazione ufficiale di CSS.
Finora abbiamo selezionato gli elementi HTML sui quali applicare lo stile specifi-
cando come selettore il tipo dell’elemento (ad esempio, abbiamo specificato tutti
gli elementi di tipo P).
Vediamo ora come selezionare:
• solo uno specifico elemento attraverso i selettori di elemento;
• tutti gli elementi logicamente raggruppati in una classe attraverso i selettori
di classe.
Selezionare solo uno specifico elemento
Supponiamo di voler selezionare uno specifico elemento tra tutti quelli di un
tipo, ad esempio uno specifico elemento P tra tutti quelli di tipo P presenti nel
documento HTML.
Per far questo ricorriamo a una importante proprietà di tutti gli elementi HTML:
la proprietà ID.
ID serve per identificare univocamente un elemento assegnandogli un nome
(“logico”).
La sua sintassi è:
c ID=“NomeLogico”
Ad esempio, per assegnare il nome al primo dei due elementi di tipo P definiti
nell’esempio 2, scriveremo:
c
Poiché ID assegna un nome univoco, non potranno esserci due elementi con lo
stesso nome, nel nostro caso due elementi che si chiamano “Primo”.
Per riferirci a un elemento cui è stato assegnato un nome, useremo come selettore
la sintassi:
c #NomeLogico
Ad esempio, per riferirci all’elemento P di nome ”Primo” scriveremo:
c #Primo
Riprendiamo l’esempio 2. Per colorare solo il primo paragrafo scriveremo:
c
c
c Utilizzo sei selettori di elemento
c
c #Primo {color: RGB (255,0,0);}
c
c
c
c Questo è il primo paragrafo
c Questo, invece, è il secondo paragrafo
c
c
22 BLOCCO TEMATICO D JavaScript e le pagine webSelettori e fogli di stile esterni LEZIONE 9
Le classi
Durante il lavoro con HTML e CSS possono sorgere nuove esigenze. Ad esempio,
abbiamo dieci paragrafi e ne desideriamo solo alcuni di colore rosso, oppure de-
sideriamo di colore azzurro alcune intestazioni e alcuni paragrafi. Per far questo
ricorriamo al concetto di classe.
Una classe serve per raggruppare logicamente elementi anche di tipo diverso.
Per definire una classe è sufficiente scrivere un nome (liberamente scelto, magari
attinente con l’effetto che dovrà produrre in modo tale da essere ricordato con
maggiore facilità) preceduto da un punto e farlo seguire da un insieme di attributi
racchiusi all’interno delle parentesi graffe. La sintassi è la seguente:
c
c .........
c
c .Classe1 {Attributo1: Valore1; Attributo2: Valore2; ... AttributoN:
valoreN}
c .Classe2 {Attributo1: Valore1; Attributo2: Valore2; ... AttributoN:
valoreN}
c .........
c .ClasseN {Attributo1: Valore1; Attributo2: Valore2; ... AttributoN:
valoreN}
c
c
La stessa classe può essere assegnata a elementi di tipo diverso.
Facciamo un esempio. Creiamo una classe di nome Nuovo che faccia uso di un
font di colore rosso in stile italico e assegnamo la classe a un elemento di tipo P
e a un altro di tipo H2.
c
c
c Esempio con classi
c
c .Nuovo {
c /* da notare che tra il punto e il nome della classe
non c’è spazio */
c font-family: Verdana, Arial, Helvetica;
c color: red;
c text-align: center;
c font-weight: lighter;
c font-style: italic;
c }
c
c
c
c Questo è un paragrafo con lo stile della classe
c Nuovo
c Questa è un’intestazione con lo stesso stile
c
c
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 23(continua)
LEZIONE Ogni elemento di HTML supporta l’attributo CLASS, quindi dovendo scrivere una
9
parte di testo e volendo che questa parte faccia uso degli attributi appena inseriti
nella classe Nuovo, basterà assegnare “Nuovo” agli elementi prescelti (nel nostro
caso P e H2): il contenuto dei due elementi rispetterà le impostazioni grafiche
stabilite della classe.
Da notare, inoltre, che all’interno del codice è stato inserito un commento. I com-
menti vengono inseriti racchiudendoli tra i simboli /* e */.
Abbiamo detto che la stessa classe può essere assegnata a elementi di tipo diver-
so. Se vogliamo applicare lo stile solo a elementi di un certo tipo all’interno di una
classe, dobbiamo specificare nel selettore il tipo dell’elemento prima del punto
secondo la sintassi:
c TipoElemento.NomeClasse
Consideriamo il seguente esempio.
c
c
c Classi di paragrafi
c
c P.codice {color: RGB(255,0,0); font-style: italic}
c P.pseudo {color: RGB(0,0,255); font-style: italic}
c
c
c
c Paragrafo con stile definito dalla classe codice
c Paragrafo con stile definito dalla classe pseudo
c Intestazione con stile definito dalla classe
c
c
Il foglio di stile interno assegna lo stile specificato dalla classe “codice” solo al
primo paragrafo P e non all’intestazione H2.
24 BLOCCO TEMATICO D JavaScript e le pagine webSelettori e fogli di stile esterni LEZIONE 9
I fogli di stile esterni
I fogli di stile esterni (external style sheet) sono dei fogli presenti in un file
esterno, ossia separati dal documento HTML. In tale file sono scritti tutti gli stili
che necessitano, comprese le classi.
Quando gli stili da definire sono tanti e la pagine Web che ne faranno uso sono al-
trettanto numerose, è buona norma creare una struttura alla quale tutte le pagine
possano fare riferimento. Questa struttura è il foglio di stile esterno, un classico
documento di testo (sempre in formato ASCII, cioè privo di formattazioni) ma
con estensione finale .css contenente tutte le dichiarazioni di stile fatte utilizzan-
do le stesse regole sintattiche analizzate per i fogli di stile incorporati.
Anche se si utilizzano i fogli di stile esterni, sarà sempre possibile definire all’occor-
renza stili a inizio pagina o stili in linea e, come già sappiamo, questi avrebbero la
precedenza sul foglio esterno. La gerarchia, pertanto, è: stile in linea - stile interno
- stile esterno.
Questi tipi di fogli offrono numerosi vantaggi. Ad esempio, per fare una modifica
all’intero sito, anche un semplice cambio di colore di un font, sarà sufficiente
apportare la modifica una sola volta al file .css per ammirare su tutte le pagine il
risultato della modifica.
Riprendendo l’esempio di codice del paragrafo precedente, vediamo come è pos-
sibile utilizzare i fogli di stile esterni.
File prova.html
c
c
c
c
c
c Primo P
c Secondo P
c
c
File esempio.css
c P.codice {color: RGB(255,0,0)}
c P.pseudo {color: RGB(0,0,255)}
Nell’intestazione notiamo la presenza dell’elemento LINK, un particolare elemento
di HEAD che serve a indicare un collegamento esistente tra il documento HTML e
un altro documento: nel nostro caso l’attributo REL indica la relazione con un foglio
di stile il cui nome (esempio.css) è definito dall’attributo HREF e il cui tipo (testuale)
è definito dall’attributo TYPE.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 25Gli elenchi
LEZIONE Gli elenchi rappresentano uno dei modi più naturali per organizzare informazio-
10
ni. Fanno parte della vita di tutti i giorni sotto forma di cose da fare, indici di libri,
liste della spesa ecc. Gli elenchi sono sostanzialmente di due tipi: ordinati e non
ordinati. Entrambi i tipi di elenchi funzionano nel medesimo modo: si apre il tag,
si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag
dell’elenco. La sintassi ha, quindi, la seguente forma:
c
c Nome del primo elemento
c Nome del secondo elemento
c ............
c
Gli elenchi ordinati
Gli elenchi ordinati (detti anche elenchi numerati) sono caratterizzati dall’enume-
razione degli elementi che formano la lista. Si avrà, quindi, una serie ordinata di
voci individuata da numeri o lettere. In HTML gli elenchi ordinati si realizzano
con l’elemento OL (ordered list) caratterizzato dai tag e e le varie
voci dell’elenco possono essere inserite con l’elemento LI (list item) caratterizzato
dal tag . Come si può notare, il tag che individua l’elemento della lista non ha
bisogno di chiusura. Facciamo subito un esempio:
c
c
c Esempio di elenco ordinato
c
c
c Titolo della lista
c
c Primo elemento
c Secondo elemento
c Terzo elemento
c
c Testo che segue la lista
c
c
Osserviamo la figura relativa all’elenco ordinato. Il tag che individua l’elenco lascia
una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene
per l’elemento P). Ciò non accade quando si include un nuovo elenco all’interno di un
elenco preesistente. Inoltre, gli elementi dell’elenco sono sempre rientrati di uno spazio
verso destra in modo da individuare nettamente l’elenco.
26 BLOCCO TEMATICO D JavaScript e le pagine webGli elenchi LEZIONE 10
Per default, gli elenchi ordinati utilizzano uno stile di enumerazione numerico,
ma è possibile indicare uno stile differente specificandolo per mezzo dell’attribu-
to TYPE. Nella seguente tabella sono riportati i vari tipi di elenchi che è possibile
ottenere agendo su questo attributo:
Valore dell’attributo TYPE Stile di enumerazione
TYPE=”1” (valore di default) numeri arabi
primo 1. primo
secondo 2. secondo
terzo 3. terzo
TYPE=”a” alfabeto minuscolo
primo a. primo
secondo b. secondo
terzo c. terzo
TYPE=”A” alfabeto maiuscolo
primo A. primo
secondo B. secondo
terzo C. terzo
TYPE=”i” numeri romani minuscoli
primo i. primo
secondo ii. secondo
terzo iii. terzo
TYPE=”I” numeri romani maiuscoli
primo I. primo
secondo II. secondo
terzo III. terzo
Gli elenchi non ordinati
Gli elenchi non ordinati (anche detti elenchi puntati) si realizzano con l’elemento
(unordered list) caratterizzato dai tag e e le varie voci dell’elen-
co possono essere inserite con l’elemento LI (list item) caratterizzato dal tag .
Anche in questo caso, il tag che individua l’elemento della lista non ha bisogno di
chiusura. Facciamo un esempio:
c
c
c Esempio di elenco non ordinato
c
c
c Titolo della lista
c
c Primo elemento
c Secondo elemento
c Terzo elemento
c
c Testo che segue la lista
c
c
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 27(continua)
LEZIONE Come ben si evince dalla figura, valgono le stesse considerazioni fatte per gli
10
elenchi ordinati. Il tipo di segno grafico di default utilizzato per le voci dell’elenco
dipende dal browser, ma di solito è un pallino pieno. Si può scegliere un altro tipo
di segno agendo, anche qui, sull’attributo TYPE che, in questo tipo di elenco, può
assumere tre diversi valori:
Valore dell’attributo TYPE Stile di enumerazione
TYPE=”disc” (valore di default) pallino pieno
primo • primo
secondo • secondo
terzo • terzo
TYPE=”circle” cerchio vuoto
primo ° primo
secondo ° secondo
terzo ° terzo
TYPE=”square” quadrato pieno
primo n primo
secondo n secondo
terzo n terzo
Invece di usare l’attributo type è preferibile utilizzare i CSS per attribuire uno specifico
stile. In questo modo si separa la struttura del contenuto e della presentazione di un
documento HTML. L’attributo di STYLE, list-style-type imposta il tipo di punti elenco.
Le possibili scelte sono tra: circle, square, decimal e i valori possibili per gli elenchi ordi-
nati che andiamo ad analizzare.
Concludiamo, quindi, con un esempio che riporta due elenchi annidati, uno ordi-
nato e l’altro no, in cui ci serviamo di un foglio di stile interno.
c
c
c Elenchi annidati
c
c
c UL {list-style-type: circle}
c OL {list-style-type: upper-roman}
c /* upper-decimal per visualizzare i numeri decimali */
c
c
c
c Italia
c
c Lombardia
28 BLOCCO TEMATICO HTML e CSS: struttura e presentazione di un documentoGli elenchi LEZIONE 10
c Lazio
c Sicilia
c Puglia
c
c Francia
c Germania
c
c
c
Elenchi e tabelle UNITÀ DI APPRENDIMENTO 3 29Le tabelle
LEZIONE Le tabelle rappresentano uno degli strumenti più utilizzati e potenti nella format-
11
tazione di documenti HTML.
Gli elementi fondamentali per definire la struttura di una tabella sono:
• TABLE, che indica l’elemento tabella, caratterizzato dai tag e
;
• TR, che indica l’inizio di una nuova riga, caratterizzato dai tag e ;
• TD, che indica l’inizio di una nuova cella (colonna) all’interno di una riga, ca-
ratterizzato dai tag e .
• CAPTION, che indica il titolo di una tabella, definito dai tag e
.
Creiamo una semplicissima tabella con due righe, ognuna delle quali contiene
tre celle.
c
c
c primo esempio tabella
c
c
c
Elementi c
contenitori
c A
c B
c C
c
c
c D
c E
c F
c
c
c
c
Vediamo, ora, in CSS come sia possibile definire la presentazione di una tabella.
Esaminiamo, in particolare, i selettori per le tabelle. Supponiamo che la tabella
dell’esempio precedente appartenga alla classe risultati, ovvero:
c
c .....
c
Per selezionare tutta la tabella precedente scriveremo al posto dei puntini:
c TABLE.risultati
Per selezionare la terza riga della tabella scriveremo:
c TABLE.risultati:row[3]
In particolare:
• row-odd seleziona le righe dispari;
• row-even seleziona le righe pari.
30 BLOCCO TEMATICO D JavaScript e le pagine webLe tabelle LEZIONE 11
Analogamente, per selezionare la terza colonna della tabella scriveremo:
c TABLE.risultati.column[3]
In particolare:
• column-odd seleziona le colonne dispari;
• column-even seleziona le colonne pari.
È possibile, quindi, applicare gli attributi dello stile (elencati nell’apposita
Appendice presente sul sito) all’intera tabella, alla singola riga o alla singola co-
lonna. Ad esempio, supponiamo di voler dare alla nostra tabella un bordo di stile
double, di spessore 5 punti, e di colore verde:
c
c
c secondo esempio tabella
c
c table.risultati {border-style:double; border-width:5pt;
c border-color: green}
c
c
c
c
c
c A
c B
c C
c
c
c D
c E
c F
c
c
c
c
Per dotare la tabella di un titolo ci serviremo dell’elemento CAPTION.
Modifichiamo l’esempio precedente, inserendo il frammento di codice indicato
in grassetto:
c
c Alfabeto
c
per avere:
align è un attributo di STYLE e serve per allineare il titolo della tabella. Nel nostro
caso avviene un allineamento al top, ovvero sopra la tabella.
Solo i browser più recenti sono compatibili con CSS. Quelli meno recenti possono avere
una compatibilità parziale.
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 31Costruire una tabella
LEZIONE In HTML una tabella è vista come un insieme di righe e non un insieme di co-
12
lonne. Questo vuol dire che si considerano tanti elementi TR composti da tante
celle (elementi TD), e non viceversa; non possiamo, cioè, considerare l’elemento
“colonna” (cosa che possiamo fare in una tabella di Word). Conseguenza più evi-
dente è che la tabella va riempita riga per riga e non diversamente.
Ad esempio, se vogliamo riempire una tabella “Orario scolastico settimanale”,
procederemo come nell’Esempio 4.
c
c
c quarto esempio tabella
c
c table.risultati {border-style: double; border-width: 5pt;
c border-color: green}
c
c
c
c
c
c Orario scolastico settimanale
c
c
c
c Lunedì
c Martedì
c Mercoledì
c Giovedì
c Venerdì
c Sabato
c
c
c Prima ora
c Italiano
c Matematica
c Sistemi
c Informatica
c Storia
c Ed.Fisica
c
c
c Seconda ora
c Italiano
c Matematica
c Sistemi
c Informatica
c Italiano
c Elettronica
c
c
c Terza ora
c Informatica
c Storia
32 BLOCCO TEMATICO D JavaScript e le pagine webCostruire una tabella LEZIONE 12
c Sistemi
c Informatica
c Italiano
c Elettronica
c
c
c Quarta ora
c Informatica
c Elettronica
c Informatica
c Religione
c Sistemi
c Elettronica
c
c
c Quinta ora
c Sistemi
c Elettronica
c Calcolo
c Inglese
c Calcolo
c Matematica
c
c
c Sesta ora
c Sistemi
c Inglese
c Calcolo
c Inglese
c Matematica
c Matematica
c
c
c
c
Il linguaggio HTML UNITÀ DI APPRENDIMENTO SUL WEB 33APPLICAZIONI Costruire una tabella
LEZIONE
12
Le tabelle con HTML e CSS: un esempio
Facciamo ora un esempio riepilogativo di HTML e CSS utilizzando la tabella
dell’orario scolastico appena definita nell’esempio 4. L’esempio consiste nell’ag-
giungere le impostazioni grafiche alla tabella “Orario scolastico settimanale” in
modo da avere:
❶ i giorni della settimana con un font più grande;
❷ le ore della settimana in corsivo (italic);
❸ ogni materia con lo stesso colore di background;
❹ lo stesso colore di foreground per i laboratori di tutte le materie indipendente-
mente dal colore di background dato a quella materia.
Per il punto ❶ la prima riga va trasformata in:
c
c Lunedì
c Martedì
c Mercoledì
c Giovedì
c Venerdì
c Sabato
c
e aggiungiamo un foglio di stile incorporato nell’HEAD:
c
c
c TR.giorno {FONT-SIZE:18}
c
c
Abbiamo aggiunto il selettore di classe TR.giorno per selezionare tutte le righe di
tipo giorno, così da poter assegnare il corpo carattere 18 (nel nostro caso esiste
una sola riga di tipo giorno).
Stesso discorso va fatto per le ore, cioè per i punti ❷ ❸ e ❹. Modifichiamo ogni
riga della tabella successiva alla prima, ad esempio la seconda riga, nel seguente
modo:
c
c Seconda ora
c Italiano
c Matematica
c Sistemi
c Informatica
c Italiano
c Elettronica
c
e via dicendo.
34 BLOCCO TEMATICO D JavaScript e le pagine webPuoi anche leggere
