successivo
precedente
inizio
fine
indice generale
aiuto
indice analitico
volume
TXT
HTML
PDF
pdf
gdoc
P4
Capitolo 55. HTML: lezioni pratiche e verifiche
blocchi-css-01.html 55.17.1
blocchi-css-02.html 55.17.2
blocchi-css-03.html 55.17.3
caratteri-css-01.html 55.14.1
caratteri-css-02.html 55.14.2
citazioni-01.html 55.9.1
colori-css-01.html 55.15.1
colori-css-02.html 55.15.2 55.15.4
dinamica-css-01.html 55.18.1
elenchi-01.html 55.5.1
immagini-01.html 55.11.1
immagini-02.html 55.11.2
linguaggio-css-01.html 55.13.1
macro-01.html 55.2.1
macro-02.html 55.2.2
oggetti-01.html 55.10.1
oggetti-02.html 55.10.2
riferimenti-01.html 55.8.1
sfondo-css-01.html 55.15.3
stile-01.html 55.12.1
stile-02.css 55.12.2
stile-02.html 55.12.2
struttura-01.html 55.1.1
struttura-02.html 55.1.2
struttura-03.html 55.1.3
struttura-04.html 55.1.4
tabelle-01.html 55.6.1
tabelle-02.html 55.6.2
tabelle-03.html 55.7.1
testo-css-01.html 55.16.1
testo-lineare-01.html 55.3.1
testo-lineare-02.html 55.3.2
testo-preformattato-01.html 55.4.1
testo-preformattato-02.html 55.4.2
testo-preformattato-03.html 55.4.3
verifica-blocchi-css-01.html 55.17.4
verifica-caratteri-css-01.html 55.14.3
verifica-colori-css-01.html 55.15.5
verifica-elenchi-01.html 55.5.2
verifica-immagini-01.html 55.11.3
verifica-oggetti-01.html 55.10.3
verifica-pre-01.html 55.4.4
verifica-riferimenti-01-indice.html 55.8.2
verifica-riferimenti-01-libri.html 55.8.2
verifica-riferimenti-01-perditempo.html 55.8.2
verifica-struttura-macro.html 55.2.3
verifica-tabelle-01.html 55.6.3
verifica-tabelle-complesse-01.html 55.7.2
verifica-testo-css-01.html 55.16.2
verifica-testo-lineare-01.html 55.3.3
verifica-testo-lineare-02.html 55.3.4
Prima di iniziare le lezioni pratiche sulla realizzazione di documenti HTML, è bene predisporre o prepararsi a utilizzare degli strumenti adatti. Le pagine vanno scritte utilizzando un programma per la creazione e modifica di file di testo, come può essere VI, Mcedit, Gedit o qualunque altro programma appropriato, di cui si conosca l'utilizzo.
|
I file vanno scritti utilizzando la codifica ASCII pura e semplice, pertanto, non possono essere usate lettere accentate se non utilizzando le macro appropriate, come viene descritto durante le esercitazioni.
|
Per poter controllare l'aspetto finale del file HTML che si sta scrivendo con un programma di scrittura per file di testo, occorre usare un navigatore (come Mozilla, Amaya o altro). Se possibile, è utile confrontare l'aspetto finale del proprio lavoro con navigatori differenti.
Le verifiche richiedono la stampa del risultato finale, attraverso un navigatore, assieme alla stampa del sorgente.
Prima di stampare il proprio lavoro è necessario accertarsi della correttezza sintattica di ogni file HTML. Per questo possono essere utilizzati diversi strumenti, a seconda di ciò che è disponibile presso il proprio elaboratore. Se è stato installato correttamente il pacchetto SP (SGML parser) con i DTD dei vari formati HTML, è sufficiente il comando seguente:
$ nsgmls -s file_html 2>&1 | less[Invio]
In mancanza di altro, si può accedere al servizio offerto da consorzio W3C presso l'indirizzo http://validator.w3.org/file-upload.html. Si osservi che è necessario indicare la codifica e può essere scelta la sigla iso-8859-1.
Si osservi che per la valutazione delle verifiche si tiene conto anche della coerenza estetica del sorgente, dove, in particolare, non vanno superate le 80 colonne di larghezza del testo.
All'interno di queste lezioni sono richieste alcune verifiche, che vengono riepilogate qui, per facilitare la ripresa del lavoro quando questo viene sospeso.
-
Verifica sulla struttura generale e sull'uso delle macro, sezione 55.2.3.
-
Verifica sull'uso degli elementi interni al testo lineare, sezioni 55.3.3 e 55.3.4.
-
Verifica sull'uso degli elementi per il testo preformattato, sezione 55.4.4.
-
Verifica sull'uso degli elenchi, sezione 55.5.2.
-
Verifica sull'uso di tabelle elementari, sezione 55.6.3.
-
Verifica sull'uso di tabelle complesse, sezione 55.7.2.
-
Verifica sull'uso dei riferimenti ipertestuali, sezione 55.8.2.
-
Verifica sull'inserzione di oggetti, sezione 55.10.3.
-
Verifica sull'inserzione di immagini, sezione 55.11.3.
-
Verifica sull'uso delle proprietà riferite ai caratteri, sezione 55.14.3.
-
Verifica sull'uso delle proprietà riferite ai colori, sezione 55.15.5.
-
Verifica sull'uso delle proprietà riferite al testo, sezione 55.16.2.
-
Verifica sull'uso delle proprietà riferite ai blocchi, sezione 55.17.4.
-
Verifica conclusiva, sezione 55.19.1.
55.1
Struttura generale e intestazione
Un documento HTML si compone di un file di testo, all'interno del quale le informazioni sono circoscritte da elementi, delimitati da marcatori che aprono e chiudono gli elementi stessi. Per esempio, il marcatore <HTML> apre l'elemento HTML, mentre il marcatore </HTML> lo chiude.
Il file di testo, che costituisce il sorgente del documento o della pagina HTML, può contenere dei commenti, che non vengono mostrati dal navigatore. Questi commenti o annotazioni si delimitano tra <!-- e -->.
55.1.1
File «struttura-01.html»
Si scriva il testo seguente salvandolo nel file struttura-01.html:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Struttura HTML, esempio 01">
8 <META NAME="Keywords" CONTENT="HTML, esempio">
9 <META NAME="Author"
10 CONTENT="Tizio Tizi, tizio@brot.dg">
11 <META NAME="Date" CONTENT="2012.01.01">
12 <META NAME="Resource-type" LANG="en"
13 CONTENT="Document">
14 <META NAME="Revisit-after" LANG="en"
15 CONTENT="15 days">
16 <META NAME="Robots" CONTENT="ALL">
17 <TITLE>Struttura di un documento HTML</TITLE>
18 </HEAD>
19 <BODY>
20
21 </P>Struttura di un documento HTML. Bla bla bla bla bla
22 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
23 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
24 bla bla bla bla bla bla bla bla bla bla bla bla.<P>
25
26 </BODY>
27 </HTML>
|
|
Questo primo esempio contiene un errore; lo si scopre facilmente con l'ausilio di uno strumento di controllo, come descritto nella premessa del capitolo:
$ nsgmls -s struttura-01.html 2>&1 | less[Invio]
nsgmls:struttura-01.html:21:3:E: end tag for element "P"
which is not open
nsgmls:struttura-01.html:21:4:E: character data is not
allowed here
|
Dall'analisi si viene a sapere che nella riga numero 21 e alla colonna numero 3 del file struttura-01.html appare un marcatore di chiusura per un elemento P che non è stato aperto; di conseguenza, alla riga 21, colonna 4, inizia del testo che non è ammissibile.
Osservando il sorgente proposto si comprende che il blocco di testo che inizia dalla riga numero 21 andrebbe scritto nel modo seguente:
21 <P>Struttura di un documento HTML. Bla bla bla bla bla
22 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
23 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
24 bla bla bla bla bla bla bla bla bla bla bla bla.</P>
|
|
Si corregga l'errore, si salvi con lo stesso nome e si verifichi nuovamente la correttezza del file (se ci sono altri errori si provveda alla loro correzione, controllando nuovamente fino a che il file risulta corretto).
Un file HTML, scritto secondo lo standard ISO 15445, inizia con la dichiarazione che appare nella prima riga dell'esempio già mostrato:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
|
|
Questa indicazione è obbligatoria e viene usata in tutti i file di queste lezioni pratiche. Dopo la dichiarazione del tipo di documento si osservi che c'è un solo elemento, denominato HTML (dalla riga numero 2 alla riga 22). Questo elemento contiene l'elemento HEAD (dalla riga numero 3 alla riga 13) e l'elemento BODY (dalla riga numero 14 alla riga 21).
L'elemento HEAD viene usato per contenere informazioni relative al documento che non vengono visualizzate dal navigatore, mentre l'elemento BODY contiene ciò che viene visto normalmente.
L'elemento HTML (si osservi il marcatore di apertura alla riga 2) contiene l'attributo LANG, con il quale si dichiara l'utilizzo della lingua italiana per tutto il file, salvo indicazione diversa di elementi interni.
Gli elementi META contenuti nell'elemento HEAD sono descritti brevemente nella tabella successiva. Si osservi in particolare il fatto che sono tutti vuoti, pertanto non è stato scritto il marcatore di chiusura (essendo perfettamente superfluo).
| Marcatore | Descrizione |
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html;
charset=us-ascii">
| Dichiara il documento secondo lo standard MIME (Multipurpose internet mail extensions) e la codifica. |
<META NAME="Description"
CONTENT="Struttura HTML,
esempio 01">
| Dà una descrizione al documento, utile per i sistemi di indicizzazione delle informazioni che appaiono nella rete. |
<META NAME="Keywords"
CONTENT="HTML, esempio">
| Dichiara le parole chiave più importanti per fare riferimento al documento attraverso i motori di ricerca. |
<META NAME="Author"
CONTENT="Tizio Tizi,
tizio@brot.dg">
| Dichiara le informazioni riferite agli autori del documento. |
<META NAME="Date"
CONTENT="2012.01.01">
| Dichiara la data del documento. |
<META NAME="Resource-type"
LANG="en"
CONTENT="Document">
| Definisce il tipo di «risorsa», attraverso una denominazione che serve ai sistemi di indicizzazione delle informazioni. |
<META NAME="Revisit-after"
LANG="en"
CONTENT="15 days">
| Dice ai motori di ricerca di controllare nuovamente il file a intervalli di 15 giorni. |
<META NAME="Robots" CONTENT="ALL">
| Dichiara che è consentito espressamente a tutti i sistemi automatici di scansione dei documenti, come i motori di ricerca o i sistemi di indicizzazione, di acquisire tutto il contenuto. |
|
Gli elementi META contengono principalmente informazioni che servono ai motori di ricerca, pertanto, alcune informazioni sono scritte espressamente in inglese, dichiarando il linguaggio con l'attributo LANG, come eccezione rispetto alla dichiarazione complessiva contenuta nell'elemento HTML.
Alla fine degli elementi META, alla riga numero 17, appare il titolo del documento, racchiuso nell'elemento TITLE.
Si salvi con il nome struttura-02.html questo file, modificando le informazioni dell'intestazione con qualcosa di appropriato, soprattutto mettendo al posto dell'autore i propri dati e indicando la data corretta del lavoro. Si ricordi di controllare la correttezza sintattica con gli strumenti già noti.
55.1.2
File «struttura-02.html»
Viene mostrato come dovrebbe apparire il file struttura-02.html dopo le modifiche richieste. Si osservi che il nome «Tizio Tizi», l'indirizzo di posta elettronica relativo e la classe devono essere sostituiti con i propri dati, eventualmente con un indirizzo di posta elettronica fasullo, se si preferisce mantenerlo anonimo:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Struttura HTML, esempio 02">
8 <META NAME="Keywords" CONTENT="HTML, esempio">
9 <META NAME="Author"
10 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
11 <META NAME="Date" CONTENT="2012.01.01">
12 <META NAME="Resource-type" LANG="en"
13 CONTENT="Document">
14 <META NAME="Revisit-after" LANG="en"
15 CONTENT="15 days">
16 <META NAME="Robots" CONTENT="ALL">
17 <TITLE>Struttura di un documento HTML</TITLE>
18 </HEAD>
19 <BODY>
20
21 <P>Struttura di un documento HTML. Bla bla bla bla bla
22 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
23 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
24 bla bla bla bla bla bla bla bla bla bla bla bla.</P>
25
26 </BODY>
27 </HTML>
|
|
L'elemento BODY (righe da 19 a 26) contiene soltanto un elemento P, che serve a delimitare un blocco di testo (la lettera «p» sta per «paragrafo»). Se si osserva il risultato che si ottiene da un navigatore, si può notare che il titolo non fa parte del documento visualizzato, ma appare probabilmente in una posizione esterna a questo.
|
Figura 55.7. Aspetto del file struttura-02.html con un navigatore.
|
Dalla figura si può vedere che l'impaginazione del blocco di testo delimitato dall'elemento P dipende dalla dimensione del carattere e dall'ampiezza disponibile effettivamente, durante l'utilizzo del navigatore.
55.1.3
File «struttura-03.html»
Si salvi con il nome struttura-03.html il file usato in precedenza e lo si modifichi secondo il modello dell'esempio seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Struttura HTML, esempio 03">
8 <META NAME="Keywords" CONTENT="HTML, esempio">
9 <META NAME="Author"
10 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
11 <META NAME="Date" CONTENT="2012.01.01">
12 <META NAME="Resource-type" LANG="en"
13 CONTENT="Document">
14 <META NAME="Revisit-after" LANG="en"
15 CONTENT="15 days">
16 <META NAME="Robots" CONTENT="ALL">
17 <TITLE>Struttura di un documento HTML</TITLE>
18 </HEAD>
19 <BODY>
20
21 <!-- Capitolo -->
22 <H1>Struttura di un documento HTML</H1>
23
24 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
25 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
26 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
27 bla bla bla bla.</P>
28
29 <!-- Sezione -->
30 <H2>Intestazione</H2>
31
32 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
33 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
34 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
35 bla bla bla bla.</P>
36
37 <!-- Sezione -->
38 <H2>Corpo</H2>
39
40 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
41 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
42 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
43 bla bla bla bla.</P>
44
45 </BODY>
46 </HTML>
|
|
Gli elementi H1 servono a delimitare il titolo di una sezione importante (di primo livello) del documento; gli elementi H2 si usano per il titolo di una sezione di livello inferiore, continuando così a decrescere fino a H6. Si osservi come potrebbe risultare il documento di esempio nella figura successiva.
|
Figura 55.9. Aspetto del file struttura-03.html con un navigatore.
|
L'esempio costituito dal file struttura-03.html si compone di un titolo di una sezione di livello uno, che contiene una descrizione e una serie di sezioni di livello due. Il significato che può avere una sezione di livello uno dipende dal contesto: se si trattasse di un libro, l'elemento H1 potrebbe essere usato per i titoli dei capitoli.
55.1.4
File «struttura-04.html»
Si salvi con il nome struttura-04.html il file usato in precedenza e lo si modifichi secondo il modello dell'esempio seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Struttura HTML, esempio 04">
8 <META NAME="Keywords" CONTENT="HTML, esempio">
9 <META NAME="Author"
10 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
11 <META NAME="Date" CONTENT="2012.01.01">
12 <META NAME="Resource-type" LANG="en"
13 CONTENT="Document">
14 <META NAME="Revisit-after" LANG="en"
15 CONTENT="15 days">
16 <META NAME="Robots" CONTENT="ALL">
17 <TITLE>Struttura di un documento HTML</TITLE>
18 </HEAD>
19 <BODY>
20
21 <H1>Introduzione</H1>
22
23 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
24 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
25 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
26 bla bla bla bla.</P>
27
28 <H1>Struttura di un documento HTML</H1>
29
30 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
31 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
32 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
33 bla bla bla bla.</P>
34
35 <H2>Intestazione</H2>
36
37 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
38 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
39 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
40 bla bla bla bla.</P>
41
42 <H2>Corpo</H2>
43
44 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
45 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
46 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
47 bla bla bla bla.</P>
48
49 <H1>Appendice</H1>
50
51 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
52 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
53 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
54 bla bla bla bla.</P>
55
56 <H1>Indice analitico</H1>
57
58 <P>Bla bla bla bla bla bla bla bla bla bla bla bla bla
59 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
60 bla bla bla bla bla bla bla bla bla bla bla bla bla bla
61 bla bla bla bla.</P>
62
63 </BODY>
64 </HTML>
|
|
L'esempio dovrebbe far comprendere meglio l'utilizzo degli elementi Hn. In questo caso il documento è strutturato come se si trattasse di un libro, composto da un'introduzione, un capitolo, un'appendice e un indice analitico.
|
Figura 55.11. Aspetto del file struttura-04.html con un navigatore.
|
55.2
Caratteri speciali
La realizzazione di un documento HTML standard richiede l'uso di una codifica dei caratteri limitata al codice ASCII tradizionale, dove in sostanza di hanno numeri, lettere non accentate e pochi altri simboli. Per tutti gli altri simboli, compresi quelli che nel sorgente HTML hanno un valore speciale (si tratta precisamente dei simboli <, > e &), si usano delle rappresentazioni speciali, che qui vengono chiamate macro.
|
Le macro che consentono di rappresentare caratteri speciali fanno riferimento a entità SGML; per esempio, à è la macro dell'entità agrave. Si osservi che le macro iniziano con la e-commerciale (&) e terminano con il punto e virgola (;).
|
Le tabelle successive riportano l'elenco completo delle macro SGML standard che si possono usare nei documenti HTML.
|
Tabella 55.12. Entità HTML HTMLlat1.
| Codifica | Standard | SGML
macro | | | | | Descrizione |
| U+00A0 | ISOnum | | | | | | no-break space = non-breaking space |
| U+00A1 | ISOnum | ¡ | ¡ | ¡ | ¡ | ¡ | inverted exclamation mark |
| U+00A2 | ISOnum | ¢ | ¢ | ¢ | ¢ | ¢ | cent sign |
| U+00A3 | ISOnum | £ | £ | £ | £ | £ | pound sign |
| U+00A4 | ISOnum | ¤ | ¤ | ¤ | ¤ | ¤ | currency sign |
| U+00A5 | ISOnum | ¥ | ¥ | ¥ | ¥ | ¥ | yen sign = yuan sign |
| U+00A6 | ISOnum | ¦ | ¦ | ¦ | ¦ | ¦ | broken bar = broken vertical bar |
| U+00A7 | ISOnum | § | § | § | § | § | section sign |
| U+00A8 | ISOdia | ¨ | ¨ | ¨ | ¨ | ¨ | diaeresis = spacing diaeresis |
| U+00A9 | ISOnum | © | © | © | © | © | copyright sign |
| U+00AA | ISOnum | ª | ª | ª | ª | ª | feminine ordinal indicator |
| U+00AB | ISOnum | « | « | « | « | « | left-pointing double angle quotation mark = left pointing guillemet |
| U+00AC | ISOnum | ¬ | ¬ | ¬ | ¬ | ¬ | not sign |
| U+00AD | ISOnum | ­ | | | | | soft hyphen = discretionary hyphen |
| U+00AE | ISOnum | ® | ® | ® | ® | ® | registered sign = registered trade mark sign |
| U+00AF | ISOdia | ¯ | ¯ | ¯ | ¯ | ¯ | macron = spacing macron = overline = APL overbar |
| U+00B0 | ISOnum | ° | ° | ° | ° | ° | degree sign |
| U+00B1 | ISOnum | ± | ± | ± | ± | ± | plus-minus sign = plus-or-minus sign |
| U+00B2 | ISOnum | ² | ² | ² | ² | ² | superscript two = superscript digit two = squared |
| U+00B3 | ISOnum | ³ | ³ | ³ | ³ | ³ | superscript three = superscript digit three = cubed |
| U+00B4 | ISOdia | ´ | ´ | ´ | ´ | ´ | acute accent = spacing acute |
| U+00B5 | ISOnum | µ | µ | µ | µ | µ | micro sign |
| U+00B6 | ISOnum | ¶ | ¶ | ¶ | ¶ | ¶ | pilcrow sign = paragraph sign |
| U+00B7 | ISOnum | · | · | · | · | · | middle dot = Georgian comma = Greek middle dot |
| U+00B8 | ISOdia | ¸ | ¸ | ¸ | ¸ | ¸ | cedilla = spacing cedilla |
| U+00B9 | ISOnum | ¹ | ¹ | ¹ | ¹ | ¹ | superscript one = superscript digit one |
| U+00BA | ISOnum | º | º | º | º | º | masculine ordinal indicator |
| U+00BB | ISOnum | » | » | » | » | » | right-pointing double angle quotation mark = right pointing guillemet |
| U+00BC | ISOnum | ¼ | ¼ | ¼ | ¼ | ¼ | vulgar fraction one quarter = fraction one quarter |
| U+00BD | ISOnum | ½ | ½ | ½ | ½ | ½ | vulgar fraction one half = fraction one half |
| U+00BE | ISOnum | ¾ | ¾ | ¾ | ¾ | ¾ | vulgar fraction three quarters = fraction three quarters |
| U+00BF | ISOnum | ¿ | ¿ | ¿ | ¿ | ¿ | inverted question mark = turned question mark |
| U+00C0 | ISOlat1 | À | À | À | À | À | latin capital letter A with grave = latin capital letter A grave |
| U+00C1 | ISOlat1 | Á | Á | Á | Á | Á | latin capital letter A with acute |
| U+00C2 | ISOlat1 | Â | Â | Â | Â | Â | latin capital letter A with circumflex |
| U+00C3 | ISOlat1 | Ã | Ã | Ã | Ã | Ã | latin capital letter A with tilde |
| U+00C4 | ISOlat1 | Ä | Ä | Ä | Ä | Ä | latin capital letter A with diaeresis |
| U+00C5 | ISOlat1 | Å | Å | Å | Å | Å | latin capital letter A with ring above = latin capital letter A ring |
| U+00C6 | ISOlat1 | Æ | Æ | Æ | Æ | Æ | latin capital letter AE = latin capital ligature AE |
| U+00C7 | ISOlat1 | Ç | Ç | Ç | Ç | Ç | latin capital letter C with cedilla |
| U+00C8 | ISOlat1 | È | È | È | È | È | latin capital letter E with grave |
| U+00C9 | ISOlat1 | É | É | É | É | É | latin capital letter E with acute |
| U+00CA | ISOlat1 | Ê | Ê | Ê | Ê | Ê | latin capital letter E with circumflex |
| U+00CB | ISOlat1 | Ë | Ë | Ë | Ë | Ë | latin capital letter E with diaeresis |
| U+00CC | ISOlat1 | Ì | Ì | Ì | Ì | Ì | latin capital letter I with grave |
| U+00CD | ISOlat1 | Í | Í | Í | Í | Í | latin capital letter I with acute |
| U+00CE | ISOlat1 | Î | Î | Î | Î | Î | latin capital letter I with circumflex |
| U+00CF | ISOlat1 | Ï | Ï | Ï | Ï | Ï | latin capital letter I with diaeresis |
| U+00D0 | ISOlat1 | Ð | Ð | Ð | Ð | Ð | latin capital letter ETH |
| U+00D1 | ISOlat1 | Ñ | Ñ | Ñ | Ñ | Ñ | latin capital letter N with tilde |
| U+00D2 | ISOlat1 | Ò | Ò | Ò | Ò | Ò | latin capital letter O with grave |
| U+00D3 | ISOlat1 | Ó | Ó | Ó | Ó | Ó | latin capital letter O with acute |
| U+00D4 | ISOlat1 | Ô | Ô | Ô | Ô | Ô | latin capital letter O with circumflex |
| U+00D5 | ISOlat1 | Õ | Õ | Õ | Õ | Õ | latin capital letter O with tilde |
| U+00D6 | ISOlat1 | Ö | Ö | Ö | Ö | Ö | latin capital letter O with diaeresis |
| U+00D7 | ISOnum | × | × | × | × | × | multiplication sign |
| U+00D8 | ISOlat1 | Ø | Ø | Ø | Ø | Ø | latin capital letter O with stroke = latin capital letter O slash |
| U+00D9 | ISOlat1 | Ù | Ù | Ù | Ù | Ù | latin capital letter U with grave |
| U+00DA | ISOlat1 | Ú | Ú | Ú | Ú | Ú | latin capital letter U with acute |
| U+00DB | ISOlat1 | Û | Û | Û | Û | Û | latin capital letter U with circumflex |
| U+00DC | ISOlat1 | Ü | Ü | Ü | Ü | Ü | latin capital letter U with diaeresis |
| U+00DD | ISOlat1 | Ý | Ý | Ý | Ý | Ý | latin capital letter Y with acute |
| U+00DE | ISOlat1 | Þ | Þ | Þ | Þ | Þ | latin capital letter THORN |
| U+00DF | ISOlat1 | ß | ß | ß | ß | ß | latin small letter sharp s = ess-zed |
| U+00E0 | ISOlat1 | à | à | à | à | à | latin small letter a with grave = latin small letter a grave |
| U+00E1 | ISOlat1 | á | á | á | á | á | latin small letter a with acute |
| U+00E2 | ISOlat1 | â | â | â | â | â | latin small letter a with circumflex |
| U+00E3 | ISOlat1 | ã | ã | ã | ã | ã | latin small letter a with tilde |
| U+00E4 | ISOlat1 | ä | ä | ä | ä | ä | latin small letter a with diaeresis |
| U+00E5 | ISOlat1 | å | å | å | å | å | latin small letter a with ring above = latin small letter a ring |
| U+00E6 | ISOlat1 | æ | æ | æ | æ | æ | latin small letter ae = latin small ligature ae |
| U+00E7 | ISOlat1 | ç | ç | ç | ç | ç | latin small letter c with cedilla |
| U+00E8 | ISOlat1 | è | è | è | è | è | latin small letter e with grave |
| U+00E9 | ISOlat1 | é | é | é | é | é | latin small letter e with acute |
| U+00EA | ISOlat1 | ê | ê | ê | ê | ê | latin small letter e with circumflex |
| U+00EB | ISOlat1 | ë | ë | ë | ë | ë | latin small letter e with diaeresis |
| U+00EC | ISOlat1 | ì | ì | ì | ì | ì | latin small letter i with grave |
| U+00ED | ISOlat1 | í | í | í | í | í | latin small letter i with acute |
| U+00EE | ISOlat1 | î | î | î | î | î | latin small letter i with circumflex |
| U+00EF | ISOlat1 | ï | ï | ï | ï | ï | latin small letter i with diaeresis |
| U+00F0 | ISOlat1 | ð | ð | ð | ð | ð | latin small letter eth |
| U+00F1 | ISOlat1 | ñ | ñ | ñ | ñ | ñ | latin small letter n with tilde |
| U+00F2 | ISOlat1 | ò | ò | ò | ò | ò | latin small letter o with grave |
| U+00F3 | ISOlat1 | ó | ó | ó | ó | ó | latin small letter o with acute |
| U+00F4 | ISOlat1 | ô | ô | ô | ô | ô | latin small letter o with circumflex |
| U+00F5 | ISOlat1 | õ | õ | õ | õ | õ | latin small letter o with tilde |
| U+00F6 | ISOlat1 | ö | ö | ö | ö | ö | latin small letter o with diaeresis |
| U+00F7 | ISOnum | ÷ | ÷ | ÷ | ÷ | ÷ | division sign |
| U+00F8 | ISOlat1 | ø | ø | ø | ø | ø | latin small letter o with stroke = latin small letter o slash |
| U+00F9 | ISOlat1 | ù | ù | ù | ù | ù | latin small letter u with grave |
| U+00FA | ISOlat1 | ú | ú | ú | ú | ú | latin small letter u with acute |
| U+00FB | ISOlat1 | û | û | û | û | û | latin small letter u with circumflex |
| U+00FC | ISOlat1 | ü | ü | ü | ü | ü | latin small letter u with diaeresis |
| U+00FD | ISOlat1 | ý | ý | ý | ý | ý | latin small letter y with acute |
| U+00FE | ISOlat1 | þ | þ | þ | þ | þ | latin small letter thorn |
| U+00FF | ISOlat1 | ÿ | ÿ | ÿ | ÿ | ÿ | latin small letter y with diaeresis |
|
|
Tabella 55.13. Entità HTML HTMLspecial.
| Codifica | Standard | SGML
macro | | | | | Descrizione |
| U+0022 | ISOnum | " | " | " | " | " | quotation mark = APL quote |
| U+0026 | ISOnum | & | & | & | & | & | ampersand |
| U+003C | ISOnum | < | < | < | < | < | less-than sign |
| U+003E | ISOnum | > | > | > | > | > | greater-than sign |
| U+0152 | ISOlat2 | Π| Π| Π| Π| Π| latin capital ligature OE |
| U+0153 | ISOlat2 | œ | œ | œ | œ | œ | latin small ligature oe |
| U+0160 | ISOlat2 | Š | Š | Š | Š | Š | latin capital letter S with caron |
| U+0161 | ISOlat2 | š | š | š | š | š | latin small letter s with caron |
| U+0178 | ISOlat2 | Ÿ | Ÿ | Ÿ | Ÿ | Ÿ | latin capital letter Y with diaeresis |
| U+02C6 | ISOpub | ˆ | ^ | ^ | ^ | ^ | modifier letter circumflex accent |
| U+02DC | ISOdia | ˜ | ~ | ~ | ~ | ~ | small tilde |
| U+2002 | ISOpub |   | | | | | en space |
| U+2003 | ISOpub |   | | | | | em space |
| U+2009 | ISOpub |   | | | | | thin space |
| U+200C | RFC 2070 | ‌ | | | | | zero width non-joiner |
| U+200D | RFC 2070 | ‍ | | | | | zero width joiner |
| U+200E | RFC 2070 | ‎ | | | | | left-to-right mark |
| U+200F | RFC 2070 | ‏ | | | | | right-to-left mark |
| U+2013 | ISOpub | – | – | – | – | – | en dash |
| U+2014 | ISOpub | — | — | — | — | — | em dash |
| U+2018 | ISOnum | ‘ | ` | ` | ` | ` | left single quotation mark |
| U+2019 | ISOnum | ’ | ' | ' | ' | ' | right single quotation mark |
| U+201A | | ‚ | ‚ | ‚ | ‚ | ‚ | single low-9 quotation mark |
| U+201C | ISOnum | “ | “ | “ | “ | “ | left double quotation mark |
| U+201D | ISOnum | ” | ” | ” | ” | ” | right double quotation mark |
| U+201E | | „ | „ | „ | „ | „ | double low-9 quotation mark |
| U+2020 | ISOpub | † | † | † | † | † | dagger |
| U+2021 | ISOpub | ‡ | ‡ | ‡ | ‡ | ‡ | double dagger |
| U+2030 | ISOtech | ‰ | ‰ | ‰ | ‰ | ‰ | per mille sign |
| U+2039 | ISO proposed | ‹ | ‹ | ‹ | ‹ | ‹ | single left-pointing angle quotation mark |
| U+203A | ISO proposed | › | › | › | › | › | single right-pointing angle quotation mark |
| U+20AC | | € | € | € | € | € | euro sign |
|
|
Tabella 55.14. Entità HTML HTMLsymbol.
| Codifica | Standard | SGML
macro | | | | | Descrizione |
| U+0192 | ISOtech | ƒ | ƒ | ƒ | ƒ | ƒ | latin small f with hook = function= florin |
| U+0391 | | Α | Α | Α | Α | Α | greek capital letter alpha |
| U+0392 | | Β | Β | Β | Β | Β | greek capital letter beta |
| U+0393 | ISOgrk3 | Γ | Γ | Γ | Γ | Γ | greek capital letter gamma |
| U+0394 | ISOgrk3 | Δ | Δ | Δ | Δ | Δ | greek capital letter delta |
| U+0395 | | Ε | Ε | Ε | Ε | Ε | greek capital letter epsilon |
| U+0396 | | Ζ | Ζ | Ζ | Ζ | Ζ | greek capital letter zeta |
| U+0397 | | Η | Η | Η | Η | Η | greek capital letter eta |
| U+0398 | ISOgrk3 | Θ | Θ | Θ | Θ | Θ | greek capital letter theta |
| U+0399 | | Ι | Ι | Ι | Ι | Ι | greek capital letter iota |
| U+039A | | Κ | Κ | Κ | Κ | Κ | greek capital letter kappa |
| U+039B | ISOgrk3 | Λ | Λ | Λ | Λ | Λ | greek capital letter lambda |
| U+039C | | Μ | Μ | Μ | Μ | Μ | greek capital letter mu |
| U+039D | | Ν | Ν | Ν | Ν | Ν | greek capital letter nu |
| U+039E | ISOgrk3 | Ξ | Ξ | Ξ | Ξ | Ξ | greek capital letter xi |
| U+039F | | Ο | Ο | Ο | Ο | Ο | greek capital letter omicron |
| U+03A0 | ISOgrk3 | Π | Π | Π | Π | Π | greek capital letter pi |
| U+03A1 | | Ρ | Ρ | Ρ | Ρ | Ρ | greek capital letter rho |
| U+03A3 | ISOgrk3 | Σ | Σ | Σ | Σ | Σ | greek capital letter sigma |
| U+03A4 | | Τ | Τ | Τ | Τ | Τ | greek capital letter tau |
| U+03A5 | ISOgrk3 | Υ | Υ | Υ | Υ | Υ | greek capital letter upsilon |
| U+03A6 | ISOgrk3 | Φ | Φ | Φ | Φ | Φ | greek capital letter phi |
| U+03A7 | | Χ | Χ | Χ | Χ | Χ | greek capital letter chi |
| U+03A8 | ISOgrk3 | Ψ | Ψ | Ψ | Ψ | Ψ | greek capital letter psi |
| U+03A9 | ISOgrk3 | Ω | Ω | Ω | Ω | Ω | greek capital letter omega |
| U+03B1 | ISOgrk3 | α | α | α | α | α | greek small letter alpha |
| U+03B2 | ISOgrk3 | β | β | β | β | β | greek small letter beta |
| U+03B3 | ISOgrk3 | γ | γ | γ | γ | γ | greek small letter gamma |
| U+03B4 | ISOgrk3 | δ | δ | δ | δ | δ | greek small letter delta |
| U+03B5 | ISOgrk3 | ε | ε | ε | ε | ε | greek small letter epsilon |
| U+03B6 | ISOgrk3 | ζ | ζ | ζ | ζ | ζ | greek small letter zeta |
| U+03B7 | ISOgrk3 | η | η | η | η | η | greek small letter eta |
| U+03B8 | | θ | θ | θ | θ | θ | greek small letter theta |
| U+03B9 | ISOgrk3 | ι | ι | ι | ι | ι | greek small letter iota |
| U+03BA | ISOgrk3 | κ | κ | κ | κ | κ | greek small letter kappa |
| U+03BB | ISOgrk3 | λ | λ | λ | λ | λ | greek small letter lambda |
| U+03BC | ISOgrk3 | μ | μ | μ | μ | μ | greek small letter mu |
| U+03BD | ISOgrk3 | ν | ν | ν | ν | ν | greek small letter nu |
| U+03BE | ISOgrk3 | ξ | ξ | ξ | ξ | ξ | greek small letter xi |
| U+03BF | | ο | ο | ο | ο | ο | greek small letter omicron |
| U+03C0 | ISOgrk3 | π | π | π | π | π | greek small letter pi |
| U+03C1 | ISOgrk3 | ρ | ρ | ρ | ρ | ρ | greek small letter rho |
| U+03C2 | ISOgrk3 | ς | ς | ς | ς | ς | greek small letter final sigma |
| U+03C3 | ISOgrk3 | σ | σ | σ | σ | σ | greek small letter sigma |
| U+03C4 | ISOgrk3 | τ | τ | τ | τ | τ | greek small letter tau |
| U+03C5 | ISOgrk3 | υ | υ | υ | υ | υ | greek small letter upsilon |
| U+03C6 | | φ | φ | φ | φ | φ | greek small letter phi |
| U+03C7 | ISOgrk3 | χ | χ | χ | χ | χ | greek small letter chi |
| U+03C8 | ISOgrk3 | ψ | ψ | ψ | ψ | ψ | greek small letter psi |
| U+03C9 | ISOgrk3 | ω | ω | ω | ω | ω | greek small letter omega |
| U+03D1 | | ϑ | ϑ | ϑ | ϑ | ϑ | greek small letter theta symbol |
| U+03D2 | | ϒ | ϒ | ϒ | ϒ | ϒ | greek upsilon with hook symbol |
| U+03D6 | ISOgrk3 | ϖ | ϖ | ϖ | ϖ | ϖ | greek pi symbol |
| U+2022 | ISOpub | • | • | • | • | • | bullet = black small circle |
| U+2026 | ISOpub | … | … | … | … | … | horizontal ellipsis = three dot leader |
| U+2032 | ISOtech | ′ | ′ | ′ | ′ | ′ | prime = minutes = feet |
| U+2033 | ISOtech | ″ | ″ | ″ | ″ | ″ | double prime = seconds = inches |
| U+203E | | ‾ | ‾ | ‾ | ‾ | ‾ | overline = spacing overscore |
| U+2044 | | ⁄ | ⁄ | ⁄ | ⁄ | ⁄ | fraction slash |
| U+2118 | ISOamso | ℘ | ℘ | ℘ | ℘ | ℘ | script capital P = power set = Weierstrass p |
| U+2111 | ISOamso | ℑ | ℑ | ℑ | ℑ | ℑ | blackletter capital I = imaginary part |
| U+211C | ISOamso | ℜ | ℜ | ℜ | ℜ | ℜ | blackletter capital R = real part symbol |
| U+2122 | ISOnum | ™ | ™ | ™ | ™ | ™ | trade mark sign |
| U+2135 | | ℵ | ℵ | ℵ | ℵ | ℵ | alef symbol = first transfinite cardinal |
| U+2190 | ISOnum | ← | ← | ← | ← | ← | leftwards arrow |
| U+2191 | ISOnu | ↑ | ↑ | ↑ | ↑ | ↑ | upwards arrow |
| U+2192 | ISOnum | → | → | → | → | → | rightwards arrow |
| U+2193 | ISOnum | ↓ | ↓ | ↓ | ↓ | ↓ | downwards arrow |
| U+2194 | ISOamsa | ↔ | ↔ | ↔ | ↔ | ↔ | left right arrow |
| U+21B5 | | ↵ | ↵ | ↵ | ↵ | ↵ | downwards arrow with corner leftwards = carriage return |
| U+21D0 | ISOtech | ⇐ | ⇐ | ⇐ | ⇐ | ⇐ | leftwards double arrow |
| U+21D1 | ISOamsa | ⇑ | ⇑ | ⇑ | ⇑ | ⇑ | upwards double arrow |
| U+21D2 | ISOtech | ⇒ | ⇒ | ⇒ | ⇒ | ⇒ | rightwards double arrow |
| U+21D3 | ISOamsa | ⇓ | ⇓ | ⇓ | ⇓ | ⇓ | downwards double arrow |
| U+21D4 | ISOamsa | ⇔ | ⇔ | ⇔ | ⇔ | ⇔ | left right double arrow |
| U+2200 | ISOtech | ∀ | ∀ | ∀ | ∀ | ∀ | for all |
| U+2202 | ISOtech | ∂ | ∂ | ∂ | ∂ | ∂ | partial differential |
| U+2203 | ISOtech | ∃ | ∃ | ∃ | ∃ | ∃ | there exists |
| U+2205 | ISOamso | ∅ | ∅ | ∅ | ∅ | ∅ | empty set = null set = diameter |
| U+2207 | ISOtech | ∇ | ∇ | ∇ | ∇ | ∇ | nabla = backward difference |
| U+220A | ISOtech | ∈ | ∈ | ∈ | ∈ | ∈ | element of |
| U+2209 | ISOtech | ∉ | ∉ | ∉ | ∉ | ∉ | not an element of |
| U+220D | ISOtech | ∋ | ∋ | ∋ | ∋ | ∋ | contains as member |
| U+220F | ISOamsb | ∏ | ∏ | ∏ | ∏ | ∏ | n-ary product = product sign |
| U+2211 | ISOamsb | ∑ | ∑ | ∑ | ∑ | ∑ | n-ary sumation |
| U+2212 | ISOtech | − | - | - | - | - | minus sign |
| U+2217 | ISOtech | ∗ | ∗ | ∗ | ∗ | ∗ | asterisk operator |
| U+221A | ISOtech | √ | √ | √ | √ | √ | square root = radical sign |
| U+221D | ISOtech | ∝ | ∝ | ∝ | ∝ | ∝ | proportional to |
| U+221E | ISOtech | ∞ | ∞ | ∞ | ∞ | ∞ | infinity |
| U+2220 | ISOamso | ∠ | ∠ | ∠ | ∠ | ∠ | angle |
| U+2227 | ISOtech | ∧ | ∧ | ∧ | ∧ | ∧ | logical and = wedge |
| U+2228 | ISOtech | ∨ | ∨ | ∨ | ∨ | ∨ | logical or = vee |
| U+2229 | ISOtech | ∩ | ∩ | ∩ | ∩ | ∩ | intersection = cap |
| U+222A | ISOtech | ∪ | ∪ | ∪ | ∪ | ∪ | union = cup |
| U+222B | ISOtech | ∫ | ∫ | ∫ | ∫ | ∫ | integral |
| U+2234 | ISOtech | ∴ | ∴ | ∴ | ∴ | ∴ | therefore |
| U+223C | ISOtech | ∼ | ∼ | ∼ | ∼ | ∼ | tilde operator = varies with = similar to |
| U+2245 | ISOtech | ≅ | ≅ | ≅ | ≅ | ≅ | approximately equal to |
| U+2248 | ISOamsr | ≈ | ≈ | ≈ | ≈ | ≈ | almost equal to = asymptotic to |
| U+2260 | ISOtech | ≠ | ≠ | ≠ | ≠ | ≠ | not equal to |
| U+2261 | ISOtech | ≡ | ≡ | ≡ | ≡ | ≡ | identical to |
| U+2264 | ISOtech | ≤ | ≤ | ≤ | ≤ | ≤ | less-than or equal to |
| U+2265 | ISOtech | ≥ | ≥ | ≥ | ≥ | ≥ | greater-than or equal to |
| U+2282 | ISOtech | ⊂ | ⊂ | ⊂ | ⊂ | ⊂ | subset of |
| U+2283 | ISOtech | ⊃ | ⊃ | ⊃ | ⊃ | ⊃ | superset of |
| U+2284 | ISOamsn | ⊄ | ⊄ | ⊄ | ⊄ | ⊄ | not a subset of |
| U+2286 | ISOtech | ⊆ | ⊆ | ⊆ | ⊆ | ⊆ | subset of or equal to |
| U+2287 | ISOtech | ⊇ | ⊇ | ⊇ | ⊇ | ⊇ | superset of or equal to |
| U+2295 | ISOamsb | ⊕ | ⊕ | ⊕ | ⊕ | ⊕ | circled plus = direct sum |
| U+2297 | ISOamsb | ⊗ | ⊗ | ⊗ | ⊗ | ⊗ | circled times = vector product |
| U+22A5 | ISOtech | ⊥ | ⊥ | ⊥ | ⊥ | ⊥ | up tack = orthogonal to = perpendicular |
| U+22C5 | ISOamsb | ⋅ | ⋅ | ⋅ | ⋅ | ⋅ | dot operator |
| U+2308 | ISOamsc | ⌈ | ⌈ | ⌈ | ⌈ | ⌈ | left ceiling = apl upstile |
| U+2309 | ISOamsc | ⌉ | ⌉ | ⌉ | ⌉ | ⌉ | right ceiling |
| U+230A | ISOamsc | ⌊ | ⌊ | ⌊ | ⌊ | ⌊ | left floor = apl downstile |
| U+230B | ISOamsc | ⌋ | ⌋ | ⌋ | ⌋ | ⌋ | right floor |
| U+2329 | ISOtech | ⟨ | ⟨ | ⟨ | ⟨ | ⟨ | left-pointing angle bracket = bra |
| U+232A | ISOtech | ⟩ | ⟩ | ⟩ | ⟩ | ⟩ | right-pointing angle bracket = ket |
| U+25CA | ISOpub | ◊ | ◊ | ◊ | ◊ | ◊ | lozenge |
| U+2660 | ISOpub | ♠ | ♠ | ♠ | ♠ | ♠ | black spade suit |
| U+2663 | ISOpub | ♣ | ♣ | ♣ | ♣ | ♣ | black club suit = shamrock |
| U+2665 | ISOpub | ♥ | ♥ | ♥ | ♥ | ♥ | black heart suit = valentine |
| U+2666 | ISOpub | ♦ | ♦ | ♦ | ♦ | ♦ | black diamond suit |
|
Oltre alle macro delle entità standard, descritte nelle tabelle appena mostrate, è possibile usare altre macro, che fanno riferimento al codice numerico dei caratteri che si vogliono usare. Esistono due modi alternativi: &#n; oppure &#xn;. Per esempio, è oppure è rappresentano indifferentemente la lettera «è». La differenza sta nel fatto che nel primo caso, si usa il codice numerico in base dieci, mentre nel secondo si usa il codice in esadecimale (in base sedici). Le tabelle delle macro mostrano nella prima colonna il valore dell'insieme di caratteri universale, che si esprime con un numero in esadecimale.
|
La sigla esadecimale da usare nelle macro del tipo &#xn; deve essere composta con lettere minuscole. La sigla indicata nella prima colonna delle tabelle contiene il prefisso «U+» che deve essere rimosso nella rappresentazione della macro.
|
In generale, se possibile, è bene usare le macro standard che, attraverso il loro nome, ricordano anche di che carattere si tratta, mentre per poter scrivere altri simboli mancanti occorre usare necessariamente le macro numeriche.
55.2.1
File «macro-01.html»
Si crei il file macro-01.html, sfruttando eventualmente una copia di un altro file HTML creato in precedenza, con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Macro HTML, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, macro, entità, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Macro HTML</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Entità SGML utilizzate nei documenti HTML</H1>
23
24 <P>Un file HTML può contenere delle macro
25 speciali, composte da un nome, circoscritto
26 inizialmente dal simbolo & e concluso da un punto e
27 virgola.</P>
28
29 <P>Le macro servono per poter inserire simboli come
30 < e >, che vengono usati nel sorgente HTML con un
31 significato speciale, per le lettere accentate degli
32 alfabeti latini e per la rappresentazione di alfabeti
33 esotici.</P>
34
35 <P>Per la lingua italiana servono in modo particolare
36 le vocali accentate: à, è, ì,
37 ò, ù, é, À, È,
38 Ì,
39 Ò, Ù, É.</p>
40
41 <P>Quando si usano le macro all'interno degli attributi
42 di un elemento, che sono già delimitati da apici
43 doppi, questi si possono ottenere con la macro
44 &quot; (").</P>
45
46 </BODY>
47 </HTML>
|
|
Come sempre, si deve verificare la correttezza sintattica e quindi si deve verificare il risultato visto da un navigatore.
|
Figura 55.16. Aspetto del file macro-01.html con un navigatore.
|
55.2.2
File «macro-02.html»
Per esercizio, si salvi il file con il nome macro-02.html, modificando tutte le macro che fanno riferimento a entità standard, con macro numeriche, secondo la forma &#xn; (con il valore in esadecimale). Per fare questo si devono consultare le tabelle che appaiono all'inizio del capitolo.
Si controlli la correttezza sintattica e che il risultato visto dal navigatore non sia cambiato.
55.2.3
Verifica sulla struttura generale e sull'uso delle macro
In base a quanto appreso fino a questo punto, si realizzi il file verifica-struttura-macro.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti (come il caso di META), siano terminati correttamente con il marcatore di chiusura.
55.3
Contenuto del testo lineare
Il testo lineare è composto da caratteri tipografici, macro che si espandono in caratteri tipografici particolari ed elementi che delimitano porzioni del testo o che servono a inserire oggetti speciali nel testo. La tabella seguente elenca gli elementi più comuni per delimitare e qualificare delle porzioni di testo, oppure per interromperlo.
|
Tabella 55.18. Elementi da usare all'interno delle frasi.
| Elemento | Significato |
| EM | Testo enfatizzato, di solito in corsivo. |
| STRONG | Testo evidenziato, di solito in neretto. |
| CITE | Citazione, nel senso di chi o cosa viene citato. |
| Q | Testo citato. |
| DFN | Definizione. |
| CODE | Codice usato in elaborazione, di solito reso in carattere dattilografico. |
| SAMP | Testo risultato di un'elaborazione. |
| KBD | Testo da inserire attraverso la tastiera. |
| VAR | Variabile o argomento di un programma. |
| ABBR | Abbreviazione. |
| ACRONYM | Acronimo. |
| SUB | Testo a pedice. |
| SUP | Testo ad apice. |
| BR | Va a capo (elemento vuoto). |
|
Questi elementi possono essere usati con l'attributo TITLE, con il quale si dà un titolo al contenuto. Per esempio, l'elemento ACRONYM può essere usato per circoscrivere un acronimo, ovvero una sigla, mentre con l'attributo TITLE si va a descrivere in modo esteso il suo significato:
<P>Il <ACRONYM TITLE="World Wide Web
Consortium">W3C</ACRONYM> è un consorzio per lo
sviluppo di tecnologie di...</P>
|
|
55.3.1
File «testo-lineare-01.html»
Si crei il file testo-lineare-01.html, sfruttando eventualmente una copia di un altro file HTML creato in precedenza, con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Elementi tipici
7 contenuti nel testo lineare, esempio 01">
8 <META NAME="Keywords" CONTENT="HTML, testo lineare,
9 elementi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Elementi del testo lineare</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Elementi del testo lineare</H1>
23
24 <P>All'interno di un <EM>testo lineare</EM> si possono
25 usare elementi che delimitano e qualificano il testo
26 che racchiudono.<BR>Questo è un
27 <STRONG>neretto</STRONG>, questa è la molecola
28 dell'acqua: <CODE>H<SUB>2</SUB>O</CODE>.</P>
29
30 <P>Si osservi comunque che non tutti gli elementi che
31 delimitano del testo lineare producono necessariamente
32 un effetto visibile nel risultato ottenuto attraverso
33 il navigatore, oppure possono prevedere l'inserzione di
34 altri simboli. Per esempio, Dante Alighieri scrisse: <Q
35 TITLE="Inferno, canto I">Nel mezzo del cammin di nostra
36 vita mi ritrovai per una selva oscura ché la
37 diritta via era smarrita.</Q></P>
38
39 </BODY>
40 </HTML>
|
|
|
Figura 55.21. Aspetto del file testo-lineare-01.html con un navigatore.
|
Nel caso particolare dell'elemento Q, dal punto di vista visivo, il navigatore dovrebbe inserire le virgolette appropriate, secondo il tipo di linguaggio a cui si sta facendo riferimento; inoltre, portando il puntatore del mouse sopra il testo delimitato dall'elemento Q, dovrebbe apparire la nota contenuta nell'attributo TITLE: «Inferno, canto I».
55.3.2
File «testo-lineare-02.html»
Per esercizio, si crei il file testo-lineare-02.html, utilizzando tutti gli elementi che appaiono descritti nella tabella riassuntiva all'inizio del capitolo.
55.3.3
Verifica sull'uso degli elementi interni al testo lineare
In base a quanto appreso fino a questo punto, si realizzi il file verifica-testo-lineare-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
In corrispondenza del titolo, interno al corpo del documento, si vuole inserire l'anno di edizione (1812-1822), in modo che appaia quando vi si porta sopra il puntatore del mouse, usando il navigatore.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.3.4
Seconda verifica sull'uso degli elementi interni al testo lineare
In base a quanto appreso fino a questo punto, si realizzi il file verifica-testo-lineare-02.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
La verifica richiede in modo particolare l'uso appropriato degli elementi P e BR.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.4
Testo preformattato
Il carattere tipografico che si ottiene normalmente, visualizzando un documento HTML attraverso un navigatore grafico, ha una larghezza proporzionale. Quando c'è la necessità di rappresentare qualcosa con un carattere a larghezza uniforme, ovvero «dattilografico», si usano alcuni elementi appositi: CODE e SAMP nell'ambito di un testo lineare; PRE come blocco separato. L'elemento PRE in particolare è molto utile per la rappresentazione di listati, come può essere una porzione di un sorgente di un linguaggio di programmazione.
55.4.1
File «testo-preformattato-01.html»
Si crei il file testo-preformattato-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Elementi usati
7 per rappresentare testo dattilografico e listati,
8 esempio 01">
9 <META NAME="Keywords" CONTENT="HTML, testo
10 preformattato, elementi, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Testo preformattato</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Linguaggio C</H1>
24
25 <P>Il codice di un programma C è scomposto in
26 funzioni, dove l'esecuzione del programma corrisponde
27 alla chiamata della funzione <CODE>main()</CODE>.
28 Questa funzione può essere dichiarata senza
29 argomenti oppure con due argomenti precisi: <SAMP>int
30 main (int argc, char *argv[])</SAMP>.</P>
31
32 <H2>Ciao mondo!</H2>
33
34 <P>Segue un esempio molto semplice di un programma che
35 emette un messaggio e poi termina la sua
36 esecuzione:</P>
37
38 <PRE>
39 #include <stdio.h>
40
41 int main ()
42 {
43 printf ("Ciao mondo!\n");
44 }
45 </PRE>
46
47 <P>Dopo la compilazione del sorgente, si può
48 eseguire il programma eseguibile e il risultato
49 è: <SAMP>Ciao mondo!</SAMP></P>
50
51 </BODY>
52 </HTML>
|
|
|
Figura 55.25. Aspetto del file testo-preformattato-01.html con un navigatore.
|
Come si può osservare, di solito non c'è differenza nel modo in cui viene reso tipograficamente il contenuto dell'elemento CODE rispetto a quello dell'elemento SAMP. Ciò che in particolare si deve comprendere dall'esempio, è il comportamento dell'elemento PRE: è un blocco che contiene testo lineare, ma a differenza dell'elemento P, gli spazi orizzontali e le interruzioni di riga vengono rispettati nella resa finale, così come sono nel sorgente.
55.4.2
File «testo-preformattato-02.html»
Si salvi il file nuovamente, ma con il nome testo-preformattato-02.html, modificandone il contenuto nel modo seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Elementi usati
7 per rappresentare testo dattilografico e listati,
8 esempio 02">
9 <META NAME="Keywords" CONTENT="HTML, testo
10 preformattato, elementi, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Testo preformattato</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Linguaggio C</H1>
24
25 <P>Il codice di un programma C è scomposto in
26 funzioni, dove l'esecuzione del programma corrisponde
27 alla chiamata della funzione <CODE>main()</CODE>.
28 Questa funzione può essere dichiarata senza
29 argomenti oppure con due argomenti precisi: <SAMP>int
30 main (int argc, char *argv[])</SAMP>.</P>
31
32 <H2>Ciao mondo!</H2>
33
34 <P>Segue un esempio molto semplice di un programma che
35 emette un messaggio e poi termina la sua
36 esecuzione:</P>
37
38 <P><CODE>
39 #include <stdio.h><BR>
40 int main ()<BR>
41 {<BR>
42 printf ("Ciao mondo!\n");<BR>
43 }
44 </CODE></P>
45
46 <P>Dopo la compilazione del sorgente, si può
47 eseguire il programma eseguibile e il risultato
48 è: <SAMP>Ciao mondo!</SAMP></P>
49
50 </BODY>
51 </HTML>
|
|
Come si può comprendere, si intende riprodurre il funzionamento dell'elemento PRE attraverso l'uso dell'elemento CODE, inserendo degli elementi BR per interrompere esplicitamente le righe. Ciò che si ottiene assomiglia al file precedente, ma rimane irrisolto il problema degli spazi:
|
Figura 55.27. Aspetto del file testo-preformattato-02.html con un navigatore.
|
55.4.3
File «testo-preformattato-03.html»
Si salvi il file nuovamente, ma con il nome testo-preformattato-03.html, modificandone il contenuto nel modo seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Elementi usati
7 per rappresentare testo dattilografico e listati,
8 esempio 03">
9 <META NAME="Keywords" CONTENT="HTML, testo
10 preformattato, elementi, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Testo preformattato</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Linguaggio C</H1>
24
25 <P>Il codice di un programma C è scomposto in
26 funzioni, dove l'esecuzione del programma corrisponde
27 alla chiamata della funzione <CODE>main()</CODE>.
28 Questa funzione può essere dichiarata senza
29 argomenti oppure con due argomenti precisi: <SAMP>int
30 main (int argc, char *argv[])</SAMP>.</P>
31
32 <H2>Ciao mondo!</H2>
33
34 <P>Segue un esempio molto semplice di un programma che
35 emette un messaggio e poi termina la sua
36 esecuzione:</P>
37
38 <P><CODE>
39 #include <stdio.h><BR>
40 int main ()<BR>
41 {<BR>
42 printf ("Ciao mondo!\n");<BR>
43 }
44 </CODE></P>
45
46 <P>Dopo la compilazione del sorgente, si può
47 eseguire il programma eseguibile e il risultato
48 è: <SAMP>Ciao mondo!</SAMP></P>
49
50 </BODY>
51 </HTML>
|
|
Anche in questo caso si vuole riprodurre il funzionamento dell'elemento PRE, ma questa volta si provvede anche a inserire degli spazi letterali (precisamente spazi non interrompibili), attraverso la macro (No-break space). Il risultato è molto simile, visivamente, a quello dell'elemento PRE.
|
Figura 55.29. Aspetto del file testo-preformattato-03.html con un navigatore.
|
Sia chiaro, comunque, che quando è possibile e conveniente, è meglio usare l'elemento PRE.
55.4.4
Verifica sull'uso degli elementi per il testo preformattato
In base a quanto appreso fino a questo punto, si realizzi il file verifica-pre-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore. Si ricordi di usare l'elemento PRE quando ciò è appropriato.
Nel testo appaiono evidenziate le parole «classi» e «metodi», che sono da intendere come definizioni.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.5
Elenchi
Esistono tre tipi di elenchi: puntato, numerato e descrittivo. Gli elenchi puntati e quelli numerati condividono una struttura simile:
<UL>
<LI>
...
</LI>
...
</UL>
|
<OL>
<LI>
...
</LI>
...
</OL>
|
Gli elenchi puntati sono delimitati dall'elemento UL (Unordered list), mentre quelli numerati dall'elemento OL (Ordered list). Questi elementi contengono uno o più elementi LI, che possono contenere testo lineare, oppure uno o più blocchi (per esempio possono contenere dei sottoelenchi).
|
Figura 55.31. Struttura dell'elenco puntato con un esempio.
|
|
Figura 55.32. Struttura dell'elenco numerato con un esempio.
|
|
Per evitare ambiguità, conviene usare sempre dei blocchi per il contenuto degli elementi LI, altrimenti, per l'abitudine, si rischia di pretendere di spezzare un testo lineare con un paragrafo o con un altro blocco che non può essere ammissibile in tale contesto.
|
Gli elenchi descrittivi sono più complessi e sono delimitati esternamente dall'elemento DL (Definition list), che contiene elementi DT (Definition term) e DD (Definition description):
<DL>
<DT>termine</DT>
<DD>
descrizione
</DD>
...
</DL>
|
Il contenuto dell'elemento DT è del testo lineare, mentre DD può contenere sia testo lineare, sia dei blocchi. Anche in questo caso, per evitare ambiguità, è meglio usare sempre solo dei blocchi.
|
Figura 55.33. Struttura dell'elenco descrittivo con un esempio.
|
55.5.1
File «elenchi-01.html»
Si crei il file elenchi-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Elenchi con HTML, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, elenco, elenchi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Elenchi</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Attivo</H1>
23
24 <DL>
25 <DT>A</DT>
26 <DD>
27
28 <P>Crediti verso i soci per versamenti ancora
29 dovuti</P>
30
31 </DD>
32 <DT>B</DT>
33 <DD>
34
35 <P>Immobilizzazioni</P>
36
37 <UL>
38 <LI>
39
40 <P>I - Immobilizzazioni immateriali</P>
41
42 <OL>
43 <LI>
44
45 <P>costi di impianto e di
46 ampliamento</P>
47
48 </LI>
49 <LI>
50
51 <P>costi di ricerca, di sviluppo e di
52 pubblicità</P>
53
54 </LI>
55 <LI>
56
57 <P>diritti di brevetto industriale e
58 diritti di utilizzazione delle opere
59 dell'ingegno</P>
60
61 </LI>
62 <LI>
63
64 <P>concessioni, licenze, marchi e
65 diritti simili</P>
66
67 </LI>
68 <LI>
69
70 <P>avviamento</P>
71
72 </LI>
73 <LI>
74
75 <P>immobilizzazioni immateriali in
76 corso e acconti</P>
77
78 </LI>
79 <LI>
80
81 <P>altre immobilizzazioni
82 immateriali</P>
83
84 </LI>
85 </OL>
86
87 </LI>
88 <LI>
89
90 <P>II - Immobilizzazioni materiali</P>
91
92 <OL>
93 <LI>
94
95 <P>terreni e fabbricati</P>
96
97 </LI>
98 <LI>
99
100 <P>[...]</P>
101
102 </LI>
103 </OL>
104
105 </LI>
106 <LI>
107
108 <P>[...]</P>
109
110 </LI>
111 </UL>
112
113 </DD>
114 </DL>
115
116 </BODY>
117 </HTML>
|
|
Il file elenchi-01.html contiene un elenco descrittivo tra le righe 18 e 102. All'interno, in corrispondenza della seconda voce dell'elenco descrittivo, compare un elenco puntato (dalla riga 30 alla riga 99); infine, all'interno delle voci dell'elenco puntato appaiono degli elenchi numerati.
|
Figura 55.35. Aspetto del file elenchi-01.html con un navigatore.
|
55.5.2
Verifica sull'uso degli elenchi
In base a quanto appreso fino a questo punto, si realizzi il file verifica-elenchi-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.6
Tabelle
La tabella è definita dall'elemento TABLE; al suo interno può essere inclusa una didascalia rappresentata dall'elemento CAPTION, quindi il contenuto della tabella viene distinto in intestazione, piede e corpo, all'interno dei quali si inseriscono le righe della tabella stessa.
|
Figura 55.37. Esempio di una tabella.
|
L'intestazione e il piede non sono obbligatori; in ogni caso, se si utilizzano vanno inseriti ordinatamente prima del corpo. Se non si indica l'intestazione o il piede, le righe che costituiscono il corpo vanno delimitate ugualmente tra i marcatori che rappresentano l'elemento corrispondente.
|
Lo standard ISO 15445 obbliga all'utilizzo dell'attributo SUMMARY nell'elemento TABLE. Questo attributo dovrebbe permettere di riassumere il contenuto della tabella per quelle situazioni in cui dovesse essere impossibile consultarla correttamente.
|
|
Tabella 55.38. Elementi da usare per la realizzazione delle tabelle HTML.
| Elemento | Significato |
| TABLE | Delimita la tabella. |
| CAPTION | Didascalia. |
| THEAD | Righe di intestazione. |
| TFOOT | Righe del piede. |
| TBODY | Righe del corpo. |
| TR | Riga normale (table row). |
| TH | Elemento evidenziato di una riga (table head). |
| TD | Elemento di una riga (table data). |
|
L'esempio seguente rappresenta una tabella molto banale, senza intestazione e senza piede:
<TABLE SUMMARY="uno due tre quattro cinque sei">
<TBODY>
<TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
<TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
<TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>
|
|
Il risultato è uno specchietto simile a quello che si vede di seguito:
L'esempio seguente mostra l'aggiunta di una riga di intestazione:
<TABLE SUMMARY="uno due tre quattro cinque sei">
<THEAD>
<TR><TD><P>Primo</P></TD><TD><P>Secondo</P></TD></TR>
</THEAD>
<TBODY>
<TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
<TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
<TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>
|
|
L'esempio seguente aggiunge anche una didascalia molto breve:
<TABLE SUMMARY="uno due tre quattro cinque sei">
<CAPTION>Tabella banale</CAPTION>
<THEAD>
<TR><TD><P>Primo</P></TD><TD><P>Secondo</P></TD></TR>
</THEAD>
<TBODY>
<TR><TD><P>uno</P></TD><TD><P>due</P></TD></TR>
<TR><TD><P>tre</P></TD><TD><P>quattro</P></TD></TR>
<TR><TD><P>cinque</P></TD><TD><P>sei</P></TD></TR>
</TBODY>
</TABLE>
|
|
Le tabelle HTML possono essere molto più complesse di quanto è stato mostrato qui. Vale la pena di sottolineare il fatto che gli elementi TD, ovvero le celle all'interno delle righe, possono contenere sia testo normale, sia blocchi di testo, ma qui, come negli altri capitoli di queste lezioni, si preferisce usare sempre solo blocchi.
|
Lo standard ISO 15445 non consente l'utilizzo di attributi per la descrizione dei bordi da far risaltare, perché per questo si possono applicare degli stili, pertanto, inizialmente si ottengono solo tabelle prive di linee di contorno.
|
55.6.1
File «tabelle-01.html»
Si crei il file tabelle-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Tabelle con HTML, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, tabella, tabelle, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Tabelle</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Operatori</H1>
23
24 <P>Segue una tabella contenente l'elenco degli
25 operatori matematici più comuni.</P>
26
27 <TABLE SUMMARY="operatori">
28 <CAPTION>Operatori matematici comuni</CAPTION>
29 <THEAD>
30 <TR>
31 <TD><P>Operatore e operandi</P></TD>
32 <TD><P>Operazione</P></TD>
33 <TD><P>Descrizione</P></TD>
34 </TR>
35 </THEAD>
36 <TBODY>
37 <TR>
38 <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE>
39 </P></TD>
40 <TD><P>somma</P></TD>
41 <TD><P>Somma i due operandi.</P></TD>
42 </TR>
43 <TR>
44 <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE>
45 </P></TD>
46 <TD><P>sottrazione</P></TD>
47 <TD><P>Sottrae il valore del secondo operando
48 da quello del primo.</P></TD>
49 </TR>
50 <TR>
51 <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE>
52 </P></TD>
53 <TD><P>moltiplicazione</P></TD>
54 <TD><P>Moltiplica i due operandi.</P></TD>
55 </TR>
56 <TR>
57 <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE>
58 </P></TD>
59 <TD><P>divisione</P></TD>
60 <TD><P>Divide il primo operando per il valore del
61 secondo.</P></TD>
62 </TR>
63 </TBODY>
64 </TABLE>
65
66 </BODY>
67 </HTML>
|
|
Nel risultato che si ottiene attraverso un navigatore comune, sono assenti i bordi e non si distinguono le intestazioni dalle altre righe.
|
Figura 55.46. Aspetto del file tabelle-01.html con un navigatore.
|
55.6.2
File «tabelle-02.html»
Per esercizio, si salvi il file anche con il nome tabelle-02.html e quindi lo si modifichi, in modo da usare l'elemento TH quando ciò è appropriato, in modo da ottenere un risultato simile a quello seguente:
55.6.3
Verifica sull'uso di tabelle elementari
In base a quanto appreso fino a questo punto, si realizzi il file verifica-tabelle-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.7
Tabelle complesse
È possibile costruire tabelle un po' più complesse, utilizzando gli attributi COLSPAN e ROWSPAN degli elementi TD e TH.
Si può immaginare che ogni cella di una tabella possa espandersi orizzontalmente (verso destra) e verticalmente (verso il basso), ma in condizioni normali, ogni cella si espande orizzontalmente e verticalmente di una sola cella.
|
Quando una cella si espande oltre il proprio spazio, va a occupare quello delle celle adiacenti, che non devono essere dichiarate.
|
55.7.1
File «tabelle-03.html»
Per esercizio, si riprenda il file tabelle-02.html e lo si salvi con il nome tabelle-03.html, modificandolo nel modo seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Tabelle complesse
7 con HTML, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, tabella, tabelle, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Tabelle</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Operatori</H1>
23
24 <P>Segue una tabella contenente l'elenco degli
25 operatori matematici più comuni.</P>
26
27 <TABLE SUMMARY="operatori">
28 <CAPTION>Operatori matematici comuni</CAPTION>
29 <THEAD>
30 <TR>
31 <TH></TH>
32 <TH ROWSPAN="2"><P>Operatore e operandi</P></TH>
33 <TH COLSPAN="2"><P>Annotazioni</P></TH>
34 </TR>
35 <TR>
36 <TH></TH>
37 <TH><P>Operazione</P></TH>
38 <TH><P>Descrizione</P></TH>
39 </TR>
40 </THEAD>
41 <TBODY>
42 <TR>
43 <TH ROWSPAN="4"><P>le quattro operazioni</P></TH>
44 <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE>
45 </P></TD>
46 <TD><P>somma</P></TD>
47 <TD><P>Somma i due operandi.</P></TD>
48 </TR>
49 <TR>
50 <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE>
51 </P></TD>
52 <TD><P>sottrazione</P></TD>
53 <TD><P>Sottrae il valore del secondo operando
54 da quello del primo.</P></TD>
55 </TR>
56 <TR>
57 <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE>
58 </P></TD>
59 <TD><P>moltiplicazione</P></TD>
60 <TD><P>Moltiplica i due operandi.</P></TD>
61 </TR>
62 <TR>
63 <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE>
64 </P></TD>
65 <TD><P>divisione</P></TD>
66 <TD><P>Divide il primo operando per il valore del
67 secondo.</P></TD>
68 </TR>
69 </TBODY>
70 </TABLE>
71
72 </BODY>
73 </HTML>
|
|
Nel risultato si può osservare che è stata aggiunta una colonna, che nel corpo si mostra come una cella unica, usata come intestazione delle righe; inoltre, nell'intestazione superiore la cella contenente la stringa «Operatore e operandi» si espande in basso occupando lo spazio della cella inferiore, mentre la cella contenente la stringa «Annotazioni» occupa anche lo spazio della cella successiva a destra.
|
Figura 55.50. Aspetto del file tabelle-03.html. Per facilitare l'individuazione delle aree occupate dalle celle, è stato aggiunto un bordo attorno a ogni cella.
|
55.7.2
Verifica sull'uso di tabelle complesse
In base a quanto appreso fino a questo punto, si realizzi il file verifica-tabelle-complesse-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore. Per facilitare l'interpretazione dell'immagine, sono stati inseriti i bordi attorno alla tabella, ma la verifica richiede la produzione di una tabella normale, senza bordi:
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.8
Riferimenti ipertestuali
La sigla HTML fa riferimento esplicitamente a un sistema ipertestuale (Hypertext markup language), pertanto, la realizzazione di collegamenti del genere è una funzionalità essenziale di questo tipo di documento.
Un riferimento ipertestuale può essere fatto a una pagina intera o a un punto particolare di una pagina. Il riferimento può essere assoluto, cioè provvisto dell'indicazione del nodo e del percorso necessario a raggiungere la pagina, oppure può essere relativo al nodo attuale, oppure anche relativo al percorso stesso della pagina da cui parte il riferimento.
Per i riferimenti ipertestuali si utilizza l'elemento A ed eventualmente l'attributo ID di molti altri elementi.
Un riferimento a una pagina intera, con l'indicazione del percorso assoluto per raggiungerla, viene fatto come nell'esempio seguente:
<A HREF="http://www.brot.dg/prove/prova.html">Pagina
di prova</A>
|
|
Nell'esempio, la frase «Pagina di prova» serve come riferimento a http://www.brot.dg/prove/prova.html.
Quando di realizza un documento HTML composto da più pagine collegate tra loro, è preferibile utilizzare riferimenti relativi, in modo da non dover indicare il nome del nodo in cui si trovano e nemmeno il percorso assoluto delle directory da attraversare per raggiungerle.
<A HREF="varie/nota.html">Annotazioni varie</A>
|
|
Nell'esempio, si vede un riferimento al file nota.html contenuto nella «directory» varie/ discendente dalla directory corrente. La directory corrente, in questi casi, è quella in cui si trova la pagina contenente il puntatore.
All'interno di una pagina è possibile collocare delle etichette che poi possono servire per fare dei riferimenti, sia a partire dalla stessa pagina, sia da altre. L'esempio seguente mostra una situazione molto semplice:
<A NAME="introduzione"></A>
|
|
Si usa quindi lo stesso elemento che serve per creare un puntatore, ma con l'attributo NAME. L'argomento dell'attributo NAME (in questo caso è la parola introduzione) identifica quel punto.
Per fare riferimento a un'etichetta nella stessa pagina si può usare la forma dell'esempio seguente, con il quale si vuole puntare all'etichetta appena creata.
<A HREF="#introduzione">Introduzione</A>
|
|
Si utilizza l'attributo HREF come al solito, ma il suo argomento è il nome dell'etichetta preceduta dal simbolo #. Evidentemente, ciò è necessario per evitare di fare riferimento a un file con lo stesso nome.
Se si vuole fare riferimento a un'etichetta di un certo file, si utilizza la notazione solita, aggiungendo l'indicazione dell'etichetta:
<A HREF="http://www.brot.dg/varie/linux.html#introduzione">
Introduzione a GNU/Linux</A>
|
|
55.8.1
File «riferimenti-01.html»
Si realizzi il file riferimenti-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description" CONTENT="Riferimenti
7 ipertestuali, esempio 01">
8 <META NAME="Keywords" CONTENT="HTML, riferimento,
9 riferimenti, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Tabelle</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1><A NAME="indice">Indice</A></H1>
23
24 <OL>
25 <LI>
26
27 <P><A HREF="#libri">libri</A></P>
28
29 </LI>
30 <LI>
31
32 <P><A HREF="#perditempo">perditempo</A></P>
33
34 </LI>
35 </OL>
36
37 <H1><A NAME="libri">Libri</A></H1>
38
39 <UL>
40 <LI>
41
42 <P><A HREF="http://www.liberliber.it">Liber
43 Liber</A></P>
44
45 </LI>
46 <LI>
47
48 <P><A HREF="http://www.gnutemberg.org">
49 GNUtemberg!</A></P>
50
51 </LI>
52 <LI>
53
54 <P><A HREF="http://www.free-book.co.uk">
55 Free-book.co.uk: the directory of free online
56 books</A></P>
57
58 </LI>
59 </UL>
60
61 <P><A HREF="riferimenti-01.html">inizio</A> : <A
62 HREF="#indice">indice</A></P>
63
64 <H1><A NAME="perditempo">Perditempo</A></H1>
65
66 <P>[...]</P>
67
68 <P><A HREF="riferimenti-01.html">inizio</A> : <A
69 HREF="#indice">indice</A></P>
70
71 </BODY>
72 </HTML>
|
|
Come si può osservare, sono presenti riferimenti interni al testo e riferimenti esterni. I riferimenti esterni, sono assoluti e devono specificare anche il protocollo di comunicazione (http://...); oltre ai riferimenti interni fatti a delle etichette, sono presenti dei riferimenti relativi allo stesso file (a titolo di esempio).
|
Figura 55.58. Aspetto del file riferimenti-01.html.
|
55.8.2
Verifica sull'uso dei riferimenti ipertestuali
In base a quanto appreso fino a questo punto, si realizzi un sistema simile a quello del file riferimenti-01.html, composto dai file: verifica-riferimenti-01-indice.html, verifica-riferimenti-01-libri.html, verifica-riferimenti-01-perditempo.html. I contenuti di questi file devono riportare rispettivamente l'indice, l'elenco dei libri e del «perditempo», come già avviene nel file riferimenti-01.html, ma in modo separato. I riferimenti tra questi file devono essere relativi; si osservi che la voce «inizio» deve portare all'inizio dei file stessi e non alla pagina dell'indice.
Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore dei tre file;
-
la stampa del sorgente dei tre file.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.9
Citazioni
Per la scrittura di una citazione, sono previsti due elementi: BLOCKQUOTE e Q. Il primo dei due, come suggerisce il nome, è un blocco e può contenere blocchi, mentre il secondo si inserisce nel testo lineare e può contenere solo testo lineare.
I due elementi BLOCKQUOTE e Q sono accomunati dalla disponibilità dell'attributo CITE, con il quale si può specificare un indirizzo URI dove trovare il documento originale.
55.9.1
File «citazioni-01.html»
Si realizzi il file citazioni-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Citazioni, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, citazione, citazioni, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Citazioni</TITLE>
19 </HEAD>
20 <BODY>
21
22 <H1>Licenza GNU GPL</H1>
23
24 <P>La licenza GNU GPL, all'articolo tre riporta in
25 particolare quanto segue:</P>
26
27 <BLOCKQUOTE CITE="http://www.gnu.org/licenses/gpl.html">
28
29 <P>3. You may copy and distribute the Program (or a
30 work based on it, under Section 2) in object code
31 or executable form under the terms of Sections 1
32 and 2 above provided that you also do one of the
33 following:</P>
34
35 <P>[<EM>omissis</EM>]</P>
36
37 <P>c) Accompany it with the information you
38 received as to the offer to distribute
39 corresponding source code. (This alternative is
40 allowed only for noncommercial distribution and
41 only if you received the program in object code or
42 executable form with such an offer, in accord with
43 Subsection b above.)</P>
44
45 </BLOCKQUOTE>
46
47 <P>Subito dopo, compare la frase: <Q
48 CITE="http://www.gnu.org/licenses/gpl.html">The source
49 code for a work means the preferred form of the work
50 for making modifications to it</Q>.</P>
51
52 </BODY>
53 </HTML>
|
|
Nella figura successiva si vede il risultato che si dovrebbe ottenere attraverso un navigatore. Se il navigatore è abbastanza evoluto (per esempio si può provare con Amaya), dalle citazioni si arriva al documento originale presso http://www.gnu.org/licenses/gpl.html (con Amaya è sufficiente fare un clic doppio quando il puntatore del mouse è sulla superficie del testo relativo).
|
Figura 55.60. Aspetto del file citazioni-01.html.
|
55.10
Inserzione di oggetti
Un documento HTML può contenere riferimenti a componenti esterni, che però devono concorrere alla realizzazione del documento finale, così come viene reso dal navigatore. Nei casi più comuni si tratta di immagini o di applicazioni grafiche (spesso si tratta di applicazioni Java o Flash), ma il concetto riguarda qualunque altra cosa che possa essere incorporata nel documento. L'elemento attraverso cui si includono gli oggetti è OBJECT. La tabella successiva elenca alcuni degli attributi di questo elemento.
|
Tabella 55.61. Alcuni attributi dell'elemento OBJECT.
| Attributo | Significato |
| DATA | Riferimento al file dell'oggetto. |
| TYPE | Tipo di oggetto. |
| STANDBY | Messaggio di attesa durante il caricamento dell'oggetto. |
|
L'attributo DATA è indispensabile; inoltre, in generale è opportuno aggiungere anche l'attributo TYPE per precisare subito il tipo di oggetto.
L'elemento OBJECT non può essere vuoto; ciò che racchiude è quanto deve essere mostrato nel caso non sia possibile raggiungere l'oggetto indicato, oppure non sia possibile gestire l'oggetto stesso. Di solito si tratta di testo normale, ma potrebbe trattarsi di altri oggetti alternativi.
Nel caso particolare dell'incorporazione di immagini, per l'esigenza di mantenere la compatibilità con il passato, rimane disponibile l'elemento IMG, che richiede l'uso dell'attributo SRC per specificare la posizione del file da visualizzare e permette di usare l'attributo ALT per annotare un testo da mostrare in mancanza della possibilità di visualizzare l'immagine. A differenza dell'elemento OBJECT, l'elemento IMG è vuoto.
Sia l'elemento OBJECT, sia l'elemento IMG si utilizzano in un contesto lineare.
|
Gli oggetti che si inseriscono in un documento HTML devono essere visualizzati, o comunque interpretati dal navigatore. Quando si realizzano documenti (anche pubblicitari), che devono essere rivolti alla maggiore quantità di utenti possibili, occorre valutare la diffusione del formato degli oggetti che si vogliono inserire, per evitare di escludere gli utenti che non dispongono del software necessario. A titolo di esempio, si consideri che gli interpreti Java e Flash, necessari a eseguire le applicazioni rispettive, non sono distribuiti come software libero, pertanto, chi utilizza soltanto software libero non può visualizzare tali applicazioni (o quantomeno non può farlo in modo completo).
|
55.10.1
File «oggetti-01.html»
Si realizzi il file oggetti-01.html con il contenuto seguente. Per completare il lavoro, serve il file philosophical-gnu-sm.jpg, che si può prelevare da http://www.gnu.org/graphics/philosophical-gnu-sm.jpg. Il disegno è di Markus Gerwinski e il titolo è Philosophical GNU. In mancanza di un collegamento alla rete, si può usare un'immagine qualunque, purché in formato JPG che è quello più comune, modificando in modo appropriato i riferimenti al nome del file relativo.
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Incorporazione di oggetti,
8 esempio 01">
9 <META NAME="Keywords"
10 CONTENT="HTML, oggetto, oggetti, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Oggetti</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Inclusione di oggetti</H1>
24
25 <P>Per includere un oggetto si usa l'elemento
26 <SAMP>OBJECT</SAMP>, come in questo caso, in cui si
27 incorpora un file JPG nel flusso del testo di questo
28 paragrafo: <OBJECT DATA="philosophical-gnu-sm.jpg"
29 TYPE="image/jpg">GNU filosofico</OBJECT>. L'oggetto,
30 oltre che disporre di un testo alternativo, potrebbe
31 incorporare anche un oggetto di riserva, come
32 nell'esempio seguente, dove il primo riferimento
33 è all'immagine originale, ma in sua mancanza si
34 mostra un file che accompagna il documento stesso
35 (oppure si ripiega ancora per un testo
36 descrittivo):</P>
37
38 <P><OBJECT
39 DATA="http://www.gnu.org/graphics/philosophical-gnu-sm.jpg"
40 TYPE="image/jpg">
41 <OBJECT DATA="philosophical-gnu-sm.jpg"
42 TYPE="image/jpg">
43 GNU filosofico
44 </OBJECT>
45 </OBJECT></P>
46
47 <P>Infine, per essere certi che tutto funzioni anche
48 con un vecchio navigatore, è sempre meglio
49 limitarsi a usare l'elemento <SAMP>IMG</SAMP> per le
50 immagini: <IMG SRC="philosophical-gnu-sm.jpg" ALT="GNU
51 filosofico">.</P>
52
53 </BODY>
54 </HTML>
|
|
Ciò che si ottiene cambia molto anche in base all'ampiezza orizzontale disponibile, dal momento che la prima e l'ultima immagine sono inserite nel testo di un paragrafo (solo la seconda immagine è inserita in un paragrafo autonomo che non contiene altro testo).
|
Figura 55.63. Aspetto del file oggetti-01.html.
|
Viene mostrato anche cosa si vede con un navigatore non grafico:
Inclusione di oggetti
Per includere un oggetto si usa l'elemento OBJECT, come in
questo caso, in cui si incorpora un file JPG nel flusso del
testo di questo paragrafo: GNU filosofico. L'oggetto, oltre
che disporre di un testo alternativo, potrebbe incorporare
anche un oggetto di riserva, come nell'esempio seguente,
dove il primo riferimento è all'immagine originale, ma in
sua mancanza si mostra un file che accompagna il documento
stesso (oppure si ripiega ancora per un testo descrittivo):
GNU filosofico
Infine, per essere certi che tutto funzioni anche con un
vecchio navigatore, è sempre meglio limitarsi a usare
l'elemento IMG per le immagini: GNU filosofico.
|
Generalmente, per evitare problemi di compatibilità con i vari programmi di navigazione, è meglio evitare di fare scorrere il testo a fianco delle immagini, per cui è bene staccare il testo normale racchiudendolo esplicitamente all'interno di un elemento P (paragrafo).
55.10.2
File «oggetti-02.html»
Si realizzi il file oggetti-02.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Incorporazione di oggetti,
8 esempio 02">
9 <META NAME="Keywords"
10 CONTENT="HTML, oggetto, oggetti, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Convalida</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Fieri di essere standard</H1>
24
25 <P>Quando si è certi della validità del
26 proprio documento HTML ISO 15445, si può
27 aggiungere un'icona racchiusa da un riferimento
28 ipertestuale che rimanda al servizio di verifica
29 offerto dal consorzio W3C. Per verificare che questo
30 documento sia valido effettivamente, basta fare un
31 «clic» sulla stessa:</P>
32
33 <P><A HREF="http://validator.w3.org/check/referer"><IMG
34 SRC="http://validator.w3.org/images/v15445" ALT="Valid
35 ISO-HTML!"></A></P>
36
37 <P>Se però questo file non è accessibile
38 attraverso la rete esterna, ci si deve accontentare di
39 verificare a partire dalla pagina <A
40 HREF="http://validator.w3.org/file-upload.html">
41 http://validator.w3.org/file-upload.html</A>,
42 attraverso la quale è possibile inviare il file,
43 pur non essendo accessibile pubblicamente.</P>
44
45 </BODY>
46 </HTML>
|
|
Il risultato che si ottiene con un navigatore grafico lo si può vedere nella figura successiva. Si osservi che l'icona può apparire solo se è disponibile un collegamento alla rete esterna, che consenta di raggiungere l'indirizzo http://validator.w3.org/images/v15445.
|
Figura 55.66. Aspetto del file oggetti-02.html.
|
Ecco cosa si vede con un navigatore senza grafica:
Fieri di essere standard
Quando si è certi della validità del proprio documento
HTML ISO 15445, si può aggiungere un'icona racchiusa da un
riferimento ipertestuale che rimanda al servizio di verifica
offerto dal consorzio W3C. Per verificare che questo
documento sia valido effettivamente, basta fare un «clic»
sulla stessa:
Valid ISO-HTML!
Se però questo file non è accessibile attraverso la rete
esterna, ci si deve accontentare di verificare a partire
dalla pagina http://validator.w3.org/file-upload.html,
attraverso la quale è possibile inviare il file, pur non
essendo accessibile pubblicamente.
|
55.10.3
Verifica sull'inserzione di oggetti
In base a quanto appreso fino a questo punto, si realizzi il file verifica-oggetti-01.html che produca un risultato abbastanza simile a quello mostrato di seguito (sia in modo grafico, sia in modo non grafico), quando viene visto attraverso un navigatore:
Le cose che mi piacciono
Ci sono due cose che mi piacciono: il software libero e gli
standard liberi. Per saperne di più sul software libero si
può leggere qualcosa di utile a partire dal sito
http://www.gnu.org (basta fare clic sull'immagine del "GNU
filosofico" che appare qui sotto).
GNU filosofico
Per quanto riguarda gli standard, si veda in particolare il
W3C (http://www.w3.org), ma per verificare la correttezza
sintattica di questa pagina basta fare un bel clic sulla
superficie di questa icona: Valid ISO-HTML!
|
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, le figure devono incorporare il riferimento ipertestuale appropriato al contesto. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.11
Inserzione di immagini
L'elemento OBJECT consente di incorporare qualunque tipo di «oggetto», incluse le immagini; tuttavia, ci sono dei navigatori che considerano tale elemento in modo speciale e pretendono che sia disponibile del software specifico per qualunque tipo di contenuto multimediale. In altri termini, dovendo realizzare un documento da consultare con qualunque tipo di navigatore, l'inserzione delle immagini conviene attuarla con l'elemento tradizionale IMG ed è opportuno che i file siano in formato JPG.
|
Tabella 55.70. Attributi indispensabili dell'elemento IMG.
| Attributo | Significato |
| SRC | Riferimento al file dell'immagine. |
| ALT | Descrizione alternativa all'immagine. |
|
L'elemento IMG può essere vuoto, perché si limita a stabilire la collocazione dell'immagine all'interno di un contesto lineare.
55.11.1
File «immagini-01.html»
Si realizzi il file immagini-01.html con il contenuto seguente. Per completare il lavoro, serve il file philosophical-gnu-sm.jpg, che si può prelevare da http://www.gnu.org/graphics/philosophical-gnu-sm.jpg. Il disegno è di Markus Gerwinski e il titolo è Philosophical GNU. In mancanza di un collegamento alla rete, si può usare un'immagine qualunque, purché in formato JPG che è quello più comune, modificando in modo appropriato i riferimenti al nome del file relativo.
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Incorporazione di immagini,
8 esempio 01">
9 <META NAME="Keywords"
10 CONTENT="HTML, immagine, immagini, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Immagini</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Inclusione di immagini</H1>
24
25 <P>Per includere un'immagine si usa l'elemento
26 <SAMP>IMG</SAMP>, come in questo caso, in cui si
27 incorpora un file JPG nel flusso del testo di questo
28 paragrafo: <IMG SRC="philosophical-gnu-sm.jpg" ALT="GNU
29 filosofico">.</P>
30
31 </BODY>
32 </HTML>
|
|
Ciò che si ottiene cambia anche in base all'ampiezza orizzontale disponibile.
|
Figura 55.72. Aspetto del file immagini-01.html.
|
Viene mostrato anche cosa si vede con un navigatore non grafico:
Inclusione di immagini
Per includere un'immagine si usa l'elemento IMG, come in
questo caso, in cui si incorpora un file JPG nel flusso del
testo di questo paragrafo: GNU filosofico.
|
Generalmente, per evitare problemi di compatibilità con i vari programmi di navigazione, è meglio evitare di fare scorrere il testo a fianco delle immagini, per cui è bene staccare il testo normale racchiudendolo esplicitamente all'interno di un elemento P (paragrafo).
55.11.2
File «immagini-02.html»
Si realizzi il file immagini-02.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Incorporazione di immagini,
8 esempio 02">
9 <META NAME="Keywords"
10 CONTENT="HTML, immagine, immagini, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Convalida</TITLE>
20 </HEAD>
21 <BODY>
22
23 <H1>Fieri di essere standard</H1>
24
25 <P>Quando si è certi della validità del
26 proprio documento HTML ISO 15445, si può
27 aggiungere un'icona racchiusa da un riferimento
28 ipertestuale che rimanda al servizio di verifica
29 offerto dal consorzio W3C. Per verificare che questo
30 documento sia valido effettivamente, basta fare un
31 «clic» sulla stessa:</P>
32
33 <P><A HREF="http://validator.w3.org/check/referer"><IMG
34 SRC="http://validator.w3.org/images/v15445" ALT="Valid
35 ISO-HTML!"></A></P>
36
37 <P>Se però questo file non è accessibile
38 attraverso la rete esterna, ci si deve accontentare di
39 verificare a partire dalla pagina <A
40 HREF="http://validator.w3.org/file-upload.html">
41 http://validator.w3.org/file-upload.html</A>,
42 attraverso la quale è possibile inviare il file,
43 pur non essendo accessibile pubblicamente.</P>
44
45 </BODY>
46 </HTML>
|
|
Il risultato che si ottiene con un navigatore grafico lo si può vedere nella figura successiva. Si osservi che l'icona può apparire solo se è disponibile un collegamento alla rete esterna, che consenta di raggiungere l'indirizzo http://validator.w3.org/images/v15445.
|
Figura 55.75. Aspetto del file oggetti-02.html.
|
Ecco cosa si vede con un navigatore senza grafica:
Fieri di essere standard
Quando si è certi della validità del proprio documento
HTML ISO 15445, si può aggiungere un'icona racchiusa da un
riferimento ipertestuale che rimanda al servizio di verifica
offerto dal consorzio W3C. Per verificare che questo
documento sia valido effettivamente, basta fare un «clic»
sulla stessa:
Valid ISO-HTML!
Se però questo file non è accessibile attraverso la rete
esterna, ci si deve accontentare di verificare a partire
dalla pagina http://validator.w3.org/file-upload.html,
attraverso la quale è possibile inviare il file, pur non
essendo accessibile pubblicamente.
|
55.11.3
Verifica sull'inserzione di immagini
Questa verifica è identica a quella della sezione 55.10.3.
In base a quanto appreso fino a questo punto, si realizzi il file verifica-immagini-01.html che produca un risultato abbastanza simile a quello mostrato di seguito (sia in modo grafico, sia in modo non grafico), quando viene visto attraverso un navigatore:
Le cose che mi piacciono
Ci sono due cose che mi piacciono: il software libero e gli
standard liberi. Per saperne di più sul software libero si
può leggere qualcosa di utile a partire dal sito
http://www.gnu.org (basta fare clic sull'immagine del "GNU
filosofico" che appare qui sotto).
GNU filosofico
Per quanto riguarda gli standard, si veda in particolare il
W3C (http://www.w3.org), ma per verificare la correttezza
sintattica di questa pagina basta fare un bel clic sulla
superficie di questa icona: Valid ISO-HTML!
|
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, le figure devono incorporare il riferimento ipertestuale appropriato al contesto. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.12
Fogli di stile CSS
L'evoluzione del linguaggio HTML si è sviluppata attraverso la ricerca di introdurre elementi e attributi per il controllo della resa estetica. Tuttavia, questo approccio ha dimostrato di non essere efficace e lo standard ISO 15445 ha eliminato tutto il superfluo, per lasciare il controllo dell'estetica al di fuori del linguaggio, contando eventualmente sui fogli di stile CSS per questo scopo.
Un foglio di stile CSS (Cascading style sheet) può essere un file, di solito con estensione .css, che si associa alle pagine HTML, oppure può essere del codice che si incorpora nelle pagine stesse. Si associa un foglio di stile esterno nel modo che appare dall'esempio seguente, dove il file del foglio di stile si chiama precisamente stile.css:
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Esempio</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="stile.css">
...
</HEAD>
...
</HTML>
|
|
Per incorporare il contenuto di un foglio di stile direttamente nella pagina HTML, si può procedere come nell'esempio seguente:
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
<HTML>
<HEAD>
<TITLE>Esempio</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: blue }
P {
font-size: 12pt;
color: red;
}
-->
</STYLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
|
|
Come si può osservare, il codice dello stile CSS è inserito nell'elemento STYLE, ma appare racchiuso da un commento (tra <!-- e -->). Ciò si rende necessario per evitare che i navigatori che non sono in grado di interpretare lo stile vengano confusi, arrivando magari a mostrare il codice CSS nella pagina.
Se si dispone di un collegamento alla rete esterna, è possibile verificare la correttezza sintattica di un foglio di stile, attraverso il servizio offerto dal consorzio W3C, a partire dall'indirizzo http://jigsaw.w3.org/css-validator/. La verifica è possibile per file HTML che incorporano il foglio di stile, per figli di stile autonomi, o inserendo il testo dello stile in una finestra di un modulo di inserimento.
55.12.1
File «stile-01.html»
Si realizzi il file stile-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Introduzione all'uso degli
8 stili CSS, esempio 01">
9 <META NAME="Keywords"
10 CONTENT="HTML, CSS, stile, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Stile</TITLE>
20 <STYLE TYPE="text/css">
21 <!--
22 H1 {
23 color: blue;
24 font-size: 32pt;
25 }
26 P {
27 font-size: 24pt;
28 color: red;
29 }
30 -->
31 </STYLE>
32 </HEAD>
33 <BODY>
34
35 <H1>Fieri di essere standard</H1>
36
37 <P>Quando si è certi della validità del
38 proprio documento HTML ISO 15445, si può
39 aggiungere un'icona racchiusa da un riferimento
40 ipertestuale che rimanda al servizio di verifica
41 offerto dal consorzio W3C. Per verificare che questo
42 documento sia valido effettivamente, basta fare un
43 «clic» sulla stessa:</P>
44
45 <P><A HREF="http://validator.w3.org/check/referer"><IMG
46 SRC="http://validator.w3.org/images/v15445" ALT="Valid
47 ISO-HTML!"></A></P>
48
49 <P>Inoltre, se si ha la stessa sicurezza a proposito
50 dello stile CSS, si può aggiungere un'icona
51 analoga che invia al servizio di controllo del W3C sui
52 fogli di stile:</P>
53
54 <P><A
55 HREF="http://jigsaw.w3.org/css-validator/check/validator">
56 <IMG SRC="http://jigsaw.w3.org/css-validator/images/vcss"
57 ALT="Valid CSS!"></A></P>
58
59 </BODY>
60 </HTML>
|
|
Teoricamente, il titolo dovrebbe apparire di colore blu e il testo di colore rosso, come si vede nella figura successiva.
|
Figura 55.82. Aspetto del file stile-01.html.
|
55.12.2
File «stile-02.html» e «stile-02.css»
Si realizzi il file stile-02.css estrapolando il codice del foglio di stile CSS dal file stile-01.html. In pratica, il file stile-02.css deve avere il contenuto seguente:
1 H1 {
2 color: blue;
3 font-size: 32pt;
4 }
5 P {
6 font-size: 24pt;
7 color: red;
8 }
|
|
Si realizzi il file stile-02.html, modificando il file stile-01.html già realizzato in precedenza. In pratica, si fa riferimento al foglio di stile contenuto nel file stile-02.css:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Introduzione all'uso degli
8 stili CSS, esempio 02">
9 <META NAME="Keywords"
10 CONTENT="HTML, CSS, stile, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Stile</TITLE>
20 <LINK REL="stylesheet" TYPE="text/css"
21 HREF="stile-02.css">
22 </HEAD>
23 <BODY>
24
25 <H1>Fieri di essere standard</H1>
26
27 <P>Quando si è certi della validità del
28 proprio documento HTML ISO 15445, si può
29 aggiungere un'icona racchiusa da un riferimento
30 ipertestuale che rimanda al servizio di verifica
31 offerto dal consorzio W3C. Per verificare che questo
32 documento sia valido effettivamente, basta fare un
33 «clic» sulla stessa:</P>
34
35 <P><A HREF="http://validator.w3.org/check/referer"><IMG
36 SRC="http://validator.w3.org/images/v15445" ALT="Valid
37 ISO-HTML!"></A></P>
38
39 <P>Inoltre, se si ha la stessa sicurezza a proposito
40 dello stile CSS, si può aggiungere un'icona
41 analoga che invia al servizio di controllo del W3C sui
42 fogli di stile:</P>
43
44 <P><A
45 HREF="http://jigsaw.w3.org/css-validator/check/validator">
46 <IMG SRC="http://jigsaw.w3.org/css-validator/images/vcss"
47 ALT="Valid CSS!"></A></P>
48
49 </BODY>
50 </HTML>
|
|
Si deve ottenere lo stesso risultato già visto nella sezione precedente, a proposito del file stile-01.html.
55.13
Linguaggio CSS
In queste lezioni viene introdotto un utilizzo molto semplice dei fogli di stile CSS (si veda anche la sezione 54.6). Esistono due livelli del linguaggio CSS, denominati CSS1 e CSS2, compatibili tra di loro. Eventualmente si può approfondire lo studio di questi due livelli da http://www.w3.org/TR/REC-CSS1 e da http://www.w3.org/TR/CSS2/.
Le istruzioni del linguaggio CSS vengono definite regole e si esprimono sinteticamente secondo la forma seguente, dove le parentesi graffe fanno parte della regola:
selettore { dichiarazione }
|
Il selettore rappresenta qualcosa all'interno del documento e la dichiarazione è ciò che si vuole ottenere su tale oggetto. Eventualmente, all'interno di una regola si possono raggruppare più selettori (separati con una virgola), applicando così le stesse dichiarazioni:
selettore, selettore... { dichiarazione }
|
Si possono indicare anche più dichiarazioni, separandole con un punto e virgola:
selettore... { dichiarazione; dichiarazione... }
|
Le regole possono essere scritte utilizzando più righe di testo normale, per cui, la stessa sintassi appena mostrata potrebbe essere scritta anche come nel modo seguente, aggiungendo un punto e virgola finale anche dopo l'ultima dichiarazione:
selettore... {
dichiarazione;
dichiarazione;
...
}
|
Le dichiarazioni si scompongono a loro volta in proprietà e valori loro assegnati:
selettore... {
proprietà: valore;
...
}
|
L'esempio seguente attribuisce il colore blu al testo degli elementi H1 di un documento HTML, come già apparso in precedenza:
Una proprietà può avere valori alternativi, da usare in mancanza di altro:
selettore... {
proprietà: valore valore_alternativo...;
...
}
|
L'esempio successivo indica l'utilizzo di uno sfondo composto da un'immagine esterna per il corpo del documento, specificando che in mancanza dell'immagine, o in mancanza della possibilità di rappresentarla si può utilizzare uno sfondo bianco:
BODY { background-image: url(fondale.jpg) white }
|
|
I commenti in un foglio di stile CSS si rappresentano in modo simile al linguaggio C, nella forma:
Il selettore di una regola CSS è qualcosa che rappresenta una parte del testo a cui si vogliono applicare le dichiarazioni relative. Nella situazione più semplice, il selettore viene indicato con il nome dell'elemento a cui si attribuisce, come già apparso negli esempi mostrati in precedenza. Tutti gli elementi HTML che si possono utilizzare nel corpo, ovvero all'interno dell'elemento BODY, possono utilizzare l'attributo CLASS. Ciò permette di attribuire loro una classe, ovvero un gruppo, di solito nell'ambito di quel tipo di elemento. Per indicare un selettore che faccia riferimento a una classe specifica di un certo elemento, si usa la notazione seguente:
Come si vede, l'indicazione dell'elemento è facoltativa, in modo tale che, se non lo si indica, si faccia riferimento a tutti gli elementi che appartengono a quella stessa classe. L'esempio seguente mostra il caso degli elementi P che appartengono alla classe nota, a cui viene abbinato il colore rosso per il testo:
L'esempio seguente mostra invece l'utilizzo di un selettore che fa riferimento a una classe di qualunque elemento:
.calmante { color: green }
|
|
Un selettore può essere composto in modo da definire la dipendenza da un contesto. In altri termini, si può definire un selettore che dipende da un altro:
selettore sottoselettore...
|
Il primo selettore indica un ambito, all'interno del quale va cercata la corrispondenza per il secondo selettore, continuando eventualmente ad aumentare il dettaglio con altri selettori più specifici. Si osservi l'esempio seguente; serve a fare riferimento agli elementi EM che si trovano all'interno di un elemento H1:
È importante distinguere il raggruppamento di selettori dalla definizione di un contesto più dettagliato come in questo caso. Infatti, per raggruppare i selettori si utilizza la virgola. L'esempio seguente applica il colore verde a tutti gli elementi EM contenuti all'interno di elementi H1 o H2:
H1 EM, H2 EM { color: green }
|
|
Un selettore può anche individuare una pseudo-classe, ovvero una zona di testo che viene individuata dal programma che si occupa di interpretare il documento HTML, che non corrisponde a elementi e classi indicati espressamente:
elemento.classe:pseudo_classe
|
Il caso tipico di una pseudo-classe è quella che delimita la prima lettera di un elemento: first-letter. L'esempio seguente serve a ottenere una lettera iniziale più grande in tutti gli elementi P di classe primo:
P.primo:first-letter {
font-size: 200%;
float: left;
}
|
|
55.13.1
File «linguaggio-css-01.html»
Si realizzi il file linguaggio-css-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Linguaggio CSS, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, stile, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Linguaggio CSS</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 H1 {
22 color: blue;
23 font-size: 48pt;
24 }
25 P {
26 font-size: 24pt;
27 color: green;
28 }
29 P.autore {
30 font-size: 18pt;
31 text-align: right;
32 font-style: italic;
33 color: black;
34 }
35 P.inizio:first-letter {
36 font-size: 200%;
37 color: black;
38 }
39 -->
40 </STYLE>
41 </HEAD>
42 <BODY>
43
44 <H1>Hänsel e Gretel</H1>
45
46 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
47
48 <P CLASS="inizio">Davanti a un gran bosco abitava un
49 povero taglialegna con sua moglie e i suoi due bambini;
50 il maschietto si chiamava Hänsel e la bambina
51 Gretel. Egli aveva poco da metter sotto i denti, e
52 quando ci fu nel paese una grande carestia, non poteva
53 neanche più procurarsi il pane tutti i giorni.
54 [...]</P>
55
56 <P>Per la fame, neppure i due bimbi potevan dormire, e
57 avevano udito quel che la matrigna diceva al padre.
58 Gretel piangeva amaramente, e disse a Hänsel: -
59 Adesso per noi
60 è finita. - [...]</P>
61
62 <P>[...]</P>
63
64 </BODY>
65 </HTML>
|
|
|
Figura 55.93. Aspetto del file linguaggio-css-01.html.
|
55.13.2
Elementi «DIV» e «SPAN»
Nelle sezioni di questo capitolo che descrivono l'uso del linguaggio HTML è stata omessa la descrizione degli elementi DIV e SPAN, i quali diventano importanti quando si usano gli stili CSS. L'elemento DIV è un blocco che racchiude blocchi; l'elemento SPAN si inserisce nel testo lineare e contiene testo lineare.
Questi elementi non comportano una modifica estetica del loro contenuto, perché servono solo a delimitare in qualche modo blocchi o testo, per assegnargli degli attributi. Per esempio, si può modificare il linguaggio:
<DIV LANG="en">
<P>This is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public
License as published by the Free Software Foundation;
either version 2 of the License, or (at your option) any
later version.</P>
</DIV>
|
|
Nell'ambito dello studio dei fogli di stile, questi elementi sono utili per l'attribuzione di una classe:
Il sig. <SPAN CLASS="nome">Tizio Tizi</SPAN> è andato...
|
|
55.14
Controllo del carattere
Il carattere tipografico può essere controllato con una serie di proprietà CSS; in particolare possono essere utili quelle che appaiono nella tabella successiva.
|
Tabella 55.96. Proprietà riferite ai caratteri.
| Proprietà | Valori | Descrizione |
font-family
| nome | Carattere tipografico indicato per nome. |
| |
serif
| Carattere con grazie. |
| |
sans-serif
| Carattere senza grazie. |
| |
monospace
| Dattilografico. |
font-style
|
normal
| Forma normale. |
| |
italic
| Corsivo. |
| |
oblique
| Obliquo. |
font-variant
|
normal
| Serie normale. |
| |
small-caps
| Maiuscoletto. |
font-weight
|
normal
| Tono normale. |
| |
bold
| Nero. |
| |
bolder
| Nerissimo. |
| |
lighter
| Chiaro. |
font-size
|
npt
| Dimensione in punti. |
| |
ncm
| Dimensione in centimetri. |
| |
nmm
| Dimensione in millimetri. |
| |
nem
| Dimensione relativa in quadratoni. |
| |
nex
| Dimensione relativa in Ex. |
| |
n%
| Dimensione relativa percentuale. |
| |
small
| Carattere piccolo. |
| |
medium
| Carattere normale. |
| |
large
| Carattere grande. |
|
Alla proprietà font-family può essere attribuito il nome di una famiglia di caratteri, oppure il nome di una «famiglia generica», che in pratica identifica uno stile del carattere senza indicare esattamente quale tipo di carattere (nella tabella appaiono solo nomi di famiglie generiche). Una famiglia di caratteri potrebbe essere times, mentre una famiglia generica potrebbe essere serif, ovvero un carattere munito di grazie. Alla proprietà font-family possono essere abbinati più tipi di caratteri, separati da una virgola, per indicare una sequenza alternativa da utilizzare in mancanza di quello preferito:
BODY { font-family: gill, helvetica, sans-serif }
|
|
L'esempio mostra proprio questo: prima si tenta di utilizzare il carattere gill; quindi si prova con helvetica; infine ci si accontenta di un carattere senza grazie, sans-serif.
|
Figura 55.98. Confronto visivo tra le famiglie generiche.
|
55.14.1
File «caratteri-css-01.html»
Si realizzi il file caratteri-css-01.html partendo dal file linguaggio-css-01.html, già realizzato in precedenza, modificando la dichiarazione dello stile come si vede nel testo seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Carattere tipografico, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, carattere, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Linguaggio CSS</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 H1 {
22 font-family: serif;
23 font-style: normal;
24 font-variant: normal;
25 font-weight: bolder;
26 font-size: 2cm;
27 }
28 P {
29 font-family: sans-serif;
30 font-style: italic;
31 font-variant: normal;
32 font-weight: lighter;
33 font-size: 1cm;
34 }
35 P.autore {
36 font-size: 5mm;
37 text-align: right;
38 font-style: italic;
39 }
40 P.inizio:first-letter {
41 font-size: 200%;
42 color: Blue;
43 }
44 -->
45 </STYLE>
46 </HEAD>
47 <BODY>
48
49 <H1>Hänsel e Gretel</H1>
50
51 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
52
53 <P CLASS="inizio">Davanti a un gran bosco abitava un
54 povero taglialegna con sua moglie e i suoi due bambini;
55 il maschietto si chiamava Hänsel e la bambina
56 Gretel. Egli aveva poco da metter sotto i denti, e
57 quando ci fu nel paese una grande carestia, non poteva
58 neanche più procurarsi il pane tutti i giorni.
59 [...]</P>
60
61 <P>Per la fame, neppure i due bimbi potevan dormire, e
62 avevano udito quel che la matrigna diceva al padre.
63 Gretel piangeva amaramente, e disse a Hänsel: -
64 Adesso per noi
65 è finita. - [...]</P>
66
67 <P>[...]</P>
68
69 </BODY>
70 </HTML>
|
|
|
Figura 55.100. Aspetto del file caratteri-css-01.html.
|
55.14.2
File «caratteri-css-02.html»
Si realizzi il file caratteri-css-02.html, con qualsiasi contenuto, sperimentando anche altre proprietà descritte nel capitolo a proposito del carattere tipografico.
55.14.3
Verifica sull'uso delle proprietà riferite ai caratteri
In base a quanto appreso fino a questo punto, si realizzi il file verifica-caratteri-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore. In questa verifica va usato in modo appropriato l'elemento SPAN:
Le sillabe della prima riga e le lettere della seconda, rappresentano le sette note musicali, scritte secondo la notazione italiana e la notazione inglese. Ogni nota (sillaba o lettera) è scritta con un rapporto di circa il 150 % rispetto alla precedente, inoltre sono stati usati gli evidenziamenti seguenti:
| Nota (sillaba o lettera) | Carattere |
| do | Carattere con grazie, normale. |
| re | Carattere con grazie, corsivo. |
| mi | Carattere senza grazie, normale. |
| fa | Carattere senza grazie, corsivo. |
| sol | Carattere dattilografico, normale. |
| la | Carattere dattilografico, corsivo |
| si | Carattere con grazie, maiuscoletto. |
| c | Carattere con grazie, normale, nero. |
| d | Carattere con grazie, corsivo, nero. |
| e | Carattere senza grazie, normale, nero. |
| f | Carattere senza grazie, corsivo, nero. |
| g | Carattere dattilografico, normale, nero. |
| a | Carattere dattilografico, corsivo, nero. |
| b | Carattere con grazie, maiuscoletto, nero. |
|
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, lo stile CSS deve essere incorporato nel file HTML. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.15
Colore e sfondo
Il colore del carattere, il colore dello sfondo ed eventualmente l'immagine dello sfondo possono essere definiti attraverso le proprietà CSS della tabella successiva.
|
Tabella 55.103. Proprietà riferite ai colori e allo sfondo.
| Proprietà | Valori | Descrizione |
color
|
colore
| Colore del carattere o di primo piano. |
background-color
|
colore
| Colore dello sfondo. |
background-image
|
url(uri)
| Immagine da usare per lo sfondo. |
|
I colori si possono indicare attraverso il nome che questi hanno in inglese, oppure attraverso la funzione rgb(), con la quale si specifica il valore RGB:
rgb(livello_rosso, livello_verde, livello_blu)
|
I numeri che esprimono i livelli dei colori fondamentali RGB vanno da 0 a 255.
Quando si esprimono i colori attraverso il nome (in inglese), conviene rimanere nell'ambito di un gruppo ristretto: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
55.15.1
File «colori-css-01.html»
Si realizzi il file colori-css-01.html con il contenuto seguente, partendo da una copia del file caratteri-css-01.html:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Colori del testo e dello sfondo,
8 esempio 01">
9 <META NAME="Keywords"
10 CONTENT="HTML, CSS, carattere, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Linguaggio CSS</TITLE>
20 <STYLE TYPE="text/css">
21 <!--
22 BODY {
23 background-color: yellow;
24 }
25 H1 {
26 font-weight: bolder;
27 font-size: 2cm;
28 background-color: red;
29 color: white;
30 }
31 P {
32 font-family: sans-serif;
33 font-style: italic;
34 font-variant: normal;
35 font-weight: lighter;
36 font-size: 1cm;
37 background-color: green;
38 }
39 P.autore {
40 font-size: 5mm;
41 text-align: right;
42 font-style: italic;
43 color: white;
44 }
45 P.inizio:first-letter {
46 font-size: 200%;
47 color: Blue;
48 }
49 -->
50 </STYLE>
51 </HEAD>
52 <BODY>
53
54 <H1>Hänsel e Gretel</H1>
55
56 <P CLASS="autore">di Jacob e Wilhelm Grimm</P>
57
58 <P CLASS="inizio">Davanti a un gran bosco abitava un
59 povero taglialegna con sua moglie e i suoi due bambini;
60 il maschietto si chiamava Hänsel e la bambina
61 Gretel. Egli aveva poco da metter sotto i denti, e
62 quando ci fu nel paese una grande carestia, non poteva
63 neanche più procurarsi il pane tutti i giorni.
64 [...]</P>
65
66 <P>Per la fame, neppure i due bimbi potevan dormire, e
67 avevano udito quel che la matrigna diceva al padre.
68 Gretel piangeva amaramente, e disse a Hänsel: -
69 Adesso per noi
70 è finita. - [...]</P>
71
72 <P>[...]</P>
73
74 </BODY>
75 </HTML>
|
|
|
Figura 55.105. Aspetto del file colori-css-01.html.
|
55.15.2
File «colori-css-02.html»
Si realizzi il file colori-css-02.html con un contenuto qualsiasi, sperimentando l'uso di altri colori comuni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white e yellow.
55.15.3
File «sfondo-css-01.html»
Si realizzi il file sfondo-css-01.html con il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <HTML LANG="it">
4 <HEAD>
5 <META HTTP-EQUIV="Content-Type"
6 CONTENT="text/html; charset=us-ascii">
7 <META NAME="Description" CONTENT="Sfondo">
8 <META NAME="Keywords"
9 CONTENT="HTML, sfondo, esempio 1">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Sfondo</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 BODY {
22 background-color: yellow;
23 background-image:
24 url(http://www.gnu.org/graphics/philosophical-gnu-sm.jpg);
25 }
26 H1 {
27 font-weight: bolder;
28 font-size: 2cm;
29 }
30 P {
31 font-family: sans-serif;
32 font-size: 1cm;
33 }
34 -->
35 </STYLE>
36 </HEAD>
37 <BODY>
38
39 <H1>Le cose che mi piacciono</H1>
40
41 <P>Ci sono due cose che mi piacciono: il software
42 libero e gli standard liberi. Per saperne di più
43 sul software libero si può leggere qualcosa di
44 utile a partire dal sito <A
45 HREF="http://www.gnu.org">http://www.gnu.org</A>.</P>
46
47 </BODY>
48 </HTML>
|
|
Si deve ottenere sullo sfondo del documento l'immagine del «GNU filosofico», ripetuta più volte (se non si dispone di un collegamento alla rete esterna, si può usare un'immagine qualunque, modificando il riferimento in modo appropriato, per esempio così: url(philosophical-gnu-sm.jpg)).
55.15.4
File «sfondo-css-02.html»
Si realizzi il file sfondo-css-02.html a partire dal file sfondo-css-01.html, facendo in modo che l'immagine compaia solo sotto la superficie dei paragrafi (gli elementi P).
55.15.5
Verifica sull'uso delle proprietà riferite ai colori
In base a quanto appreso fino a questo punto, si realizzi il file verifica-colori-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore. Per realizzare questa verifica si può partire dal file verifica-caratteri-css-01.html già realizzato in precedenza:
Lo sfondo del documento è grigio; ogni nota musicale è rappresentata con un colore diverso, con questa sequenza: nero, marrone, rosso, arancio, giallo, verde, blu.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, lo stile CSS deve essere incorporato nel file HTML. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.16
Testo
Alcune proprietà riferite al testo sono descritte nella tabella successiva. Si tratta in particolare dell'allineamento orizzontale, del rientro e dell'altezza della riga.
|
Tabella 55.108. Proprietà riferite al testo.
| Proprietà | Valori | Descrizione |
vertical-align
|
baseline
| Testo al livello normale. |
| |
middle
| Allinea al centro. |
| |
sub
| Pedice. |
| |
super
| Apice. |
text-transform
|
none
| Nessuna trasformazione del testo. |
| |
capitalize
| Rende maiuscola la prima lettera delle parole. |
| |
uppercase
| Tutto maiuscolo. |
| |
lowercase
| Tutto minuscolo. |
text-align
|
left
| Allinea a sinistra. |
| |
right
| Allinea a destra. |
| |
center
| Centra. |
| |
justify
| Allinea a sinistra e a destra. |
text-indent
|
npt
| Rientro in punti. |
| |
ncm
| Rientro in centimetri. |
| |
nmm
| Rientro in millimetri. |
| |
nem
| Rientro relativo in quadratoni. |
| |
nex
| Rientro relativo in Ex. |
| |
n%
| Rientro relativo in percentuale. |
line-height
|
normal
| Altezza normale della riga. |
| |
npt
| Altezza in punti. |
| |
ncm
| Altezza in centimetri. |
| |
nmm
| Altezza in millimetri. |
| |
n%
| Altezza relativa in percentuale. |
|
55.16.1
File «testo-css-01.html»
Si realizzi il file testo-css-01.html con il contenuto seguente, partendo da una copia del file colori-css-01.html:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Caratteristiche del testo,
8 esempio 01">
9 <META NAME="Keywords"
10 CONTENT="HTML, CSS, testo, esempio">
11 <META NAME="Author"
12 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
13 <META NAME="Date" CONTENT="2012.01.01">
14 <META NAME="Resource-type" LANG="en"
15 CONTENT="Document">
16 <META NAME="Revisit-after" LANG="en"
17 CONTENT="15 days">
18 <META NAME="Robots" CONTENT="ALL">
19 <TITLE>Linguaggio CSS</TITLE>
20 <STYLE TYPE="text/css">
21 <!--
22 BODY {
23 line-height: 15mm;
24 }
25 H1 {
26 font-size: 10mm;
27 text-transform: uppercase;
28 }
29 P {
30 font-size: 5mm;
31 text-align: justify;
32 }
33 -->
34 </STYLE>
35 </HEAD>
36 <BODY>
37
38 <H1>Hänsel e Gretel</H1>
39
40 <P>di Jacob e Wilhelm Grimm</P>
41
42 <P>Davanti a un gran bosco abitava un povero
43 taglialegna con sua moglie e i suoi due bambini; il
44 maschietto si chiamava Hänsel e la bambina Gretel.
45 Egli aveva poco da metter sotto i denti, e quando ci fu
46 nel paese una grande carestia, non poteva neanche
47 più procurarsi il pane tutti i giorni. [...]</P>
48
49 <P>Per la fame, neppure i due bimbi potevan dormire, e
50 avevano udito quel che la matrigna diceva al padre.
51 Gretel piangeva amaramente, e disse a Hänsel: -
52 Adesso per noi
53 è finita. - [...]</P>
54
55 <P>[...]</P>
56
57 </BODY>
58 </HTML>
|
|
|
Figura 55.110. Aspetto del file testo-css-01.html.
|
55.16.2
Verifica sull'uso delle proprietà riferite al testo
In base a quanto appreso fino a questo punto, si realizzi il file verifica-testo-css-01.html che produca un risultato abbastanza simile a quello mostrato di seguito, quando viene visto attraverso un navigatore:
|
Figura 55.111. Aspetto del file verifica-testo-css-01.html.
|
Le maiuscole all'inizio di ogni parola sono ottenute attraverso una proprietà, mentre nel sorgente HTML il testo è scritto normalmente.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Inoltre, lo stile CSS deve essere incorporato nel file HTML. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.17
Blocchi
Alcune proprietà riferite ai blocchi di testo rettangolari sono descritte nella tabella successiva. Si tratta in particolare dei margini, dei bordi e della dichiarazione di blocchi fluttuanti.
|
Tabella 55.112. Proprietà riferite al testo racchiuso in blocchi rettangolari.
| Proprietà | Valori | Descrizione |
margin-top
|
auto
| Margine superiore automatico. |
| |
npt
| Margine superiore in punti. |
| |
ncm
| Margine superiore in centimetri. |
| |
nmm
| Margine superiore in millimetri. |
| |
n%
| Margine superiore relativo in percentuale. |
margin-bottom
|
auto
| Margine inferiore automatico. |
| |
npt
| Margine inferiore in punti. |
| |
ncm
| Margine inferiore in centimetri. |
| |
nmm
| Margine inferiore in millimetri. |
| |
n%
| Margine inferiore relativo in percentuale. |
margin-left
|
auto
| Margine sinistro automatico. |
| |
npt
| Margine sinistro in punti. |
| |
ncm
| Margine sinistro in centimetri. |
| |
nmm
| Margine sinistro in millimetri. |
| |
n%
| Margine sinistro relativo in percentuale. |
margin-right
|
auto
| Margine destro automatico. |
| |
npt
| Margine destro in punti. |
| |
ncm
| Margine destro in centimetri. |
| |
nmm
| Margine destro in millimetri. |
| |
n%
| Margine destro relativo in percentuale. |
border-width
|
thin
| Bordo sottile. |
| |
medium
| Bordo medio. |
| |
thick
| Bordo spesso. |
border-color
|
colore
| Colore del bordo. |
border-style
|
none
| Bordo non visibile. |
| |
dotted
| Bordo puntato. |
| |
dashed
| Bordo tratteggiato. |
| |
solid
| Bordo continuo. |
| |
double
| Bordo continuo doppio. |
width
|
auto
| Larghezza automatica. |
| |
npt
| Larghezza in punti. |
| |
ncm
| Larghezza in centimetri. |
| |
nmm
| Larghezza in millimetri. |
| |
n%
| Larghezza relativa in percentuale. |
height
|
auto
| Altezza automatica. |
| |
npt
| Altezza in punti. |
| |
ncm
| Altezza in centimetri. |
| |
nmm
| Altezza in millimetri. |
| |
n%
| Altezza relativa in percentuale. |
float
|
none
| Blocco fisso. |
| |
left
| Blocco fluttuante collocato a sinistra con testo che scorre a destra. |
| |
right
| Blocco fluttuante collocato a destra con testo che scorre a sinistra. |
clear
|
none
| Scorre normalmente. |
| |
left
| Salta un oggetto che si trova a sinistra. |
| |
right
| Salta un oggetto che si trova a destra. |
| |
both
| Salta qualunque oggetto fluttuante. |
|
55.17.1
File «blocchi-css-01.html»
Si realizzi il file blocchi-css-01.html con il contenuto seguente, riutilizzando eventualmente esercitazioni già svolte:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Blocchi, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, blocchi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Blocchi</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 A.sinistra {
22 float: left;
23 margin-right: 2cm;
24 }
25 A.destra {
26 float: right;
27 margin-left: 2cm;
28 }
29 H1 {
30 font-weight: bolder;
31 font-size: 2cm;
32 }
33 P {
34 font-family: sans-serif;
35 font-size: 8mm;
36 text-align: justify;
37 }
38 -->
39 </STYLE>
40 </HEAD>
41 <BODY>
42
43 <H1>Le cose che mi piacciono</H1>
44
45 <P><A CLASS="sinistra" HREF="http://www.gnu.org"><IMG
46 SRC="http://www.gnu.org/graphics/philosophical-gnu-sm.jpg"
47 ALT="GNU filosofico"></A>Ci sono due cose che mi
48 piacciono: il software libero e gli standard liberi.
49 Per saperne di più sul software libero si
50 può leggere qualcosa di utile a partire dal sito
51 http://www.gnu.org (basta fare clic sull'immagine del
52 "GNU filosofico" che appare qui a sinistra).</P>
53
54 <P><A CLASS="destra"
55 HREF="http://validator.w3.org/check/referer"><IMG
56 SRC="http://validator.w3.org/images/v15445" ALT="Valid
57 ISO-HTML!"></A>Per quanto riguarda gli standard, si
58 veda in particolare il W3C (http://www.w3.org), ma per
59 verificare la correttezza sintattica di questa pagina
60 basta fare un bel clic sulla superficie dell'icona che
61 appare a destra.</P>
62
63 </BODY>
64 </HTML>
|
|
|
Figura 55.114. Aspetto del file blocchi-css-01.html.
|
55.17.2
File «blocchi-css-02.html»
Si realizzi il file blocchi-css-02.html, partendo da una copia di blocchi-css-01.html, in modo da arrivare al contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Blocchi, esempio 02">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, blocchi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Blocchi</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 A.sinistra {
22 float: left;
23 margin-right: 2cm;
24 }
25 A.destra {
26 float: right;
27 margin-left: 2cm;
28 }
29 H1 {
30 font-weight: bolder;
31 font-size: 15mm;
32 margin-left: 2cm;
33 margin-right: 2cm;
34 margin-top: 2cm;
35 margin-bottom: 2cm;
36 border-style: solid;
37 }
38 P {
39 font-family: sans-serif;
40 font-size: 8mm;
41 text-align: justify;
42 }
43 -->
44 </STYLE>
45 </HEAD>
46 <BODY>
47
48 <H1>Le cose che mi piacciono</H1>
49
50 <P><A CLASS="sinistra" HREF="http://www.gnu.org"><IMG
51 SRC="http://www.gnu.org/graphics/philosophical-gnu-sm.jpg"
52 ALT="GNU filosofico"></A>Ci sono due cose che mi
53 piacciono: il software libero e gli standard liberi.
54 Per saperne di più sul software libero si
55 può leggere qualcosa di utile a partire dal sito
56 http://www.gnu.org (basta fare clic sull'immagine del
57 "GNU filosofico" che appare qui a sinistra).</P>
58
59 <P><A CLASS="destra"
60 HREF="http://validator.w3.org/check/referer"><IMG
61 SRC="http://validator.w3.org/images/v15445" ALT="Valid
62 ISO-HTML!"></A>Per quanto riguarda gli standard, si
63 veda in particolare il W3C (http://www.w3.org), ma per
64 verificare la correttezza sintattica di questa pagina
65 basta fare un bel clic sulla superficie dell'icona che
66 appare a destra.</P>
67
68 </BODY>
69 </HTML>
|
|
|
Figura 55.116. Aspetto del file blocchi-css-02.html.
|
55.17.3
File «blocchi-css-03.html»
Si realizzi il file blocchi-css-03.html, riutilizzando eventualmente porzioni di esercitazioni già svolte. Il file deve avere il contenuto seguente:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Blocchi, esempio 03">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, blocchi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Blocchi</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 TABLE {
22 border-style: solid;
23 border-width: thin;
24 }
25 TH {
26 border-style: none;
27 background-color: green;
28 }
29 TD {
30 border-style: dotted;
31 border-width: thin;
32 }
33 P {
34 margin-top: 5mm;
35 margin-bottom: 5mm;
36 margin-left: 5mm;
37 margin-right: 5mm;
38 font-size: 6mm;
39 }
40 -->
41 </STYLE>
42 </HEAD>
43 <BODY>
44
45 <H1>Operatori</H1>
46
47 <P>Segue una tabella contenente l'elenco degli operatori
48 matematici più comuni.</P>
49
50 <TABLE SUMMARY="operatori">
51 <CAPTION>Operatori matematici comuni</CAPTION>
52 <THEAD>
53 <TR>
54 <TH ROWSPAN="2"></TH>
55 <TH ROWSPAN="2"><P>Operatore e operandi</P></TH>
56 <TH COLSPAN="2"><P>Annotazioni</P></TH>
57 </TR>
58 <TR>
59 <TH><P>Operazione</P></TH>
60 <TH><P>Descrizione</P></TH>
61 </TR>
62 </THEAD>
63 <TBODY>
64 <TR>
65 <TH ROWSPAN="4"><P>le quattro operazioni</P></TH>
66 <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE>
67 </P></TD>
68 <TD><P>somma</P></TD>
69 <TD><P>Somma i due operandi.</P></TD>
70 </TR>
71 <TR>
72 <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE>
73 </P></TD>
74 <TD><P>sottrazione</P></TD>
75 <TD><P>Sottrae il valore del secondo operando da
76 quello del primo.</P></TD>
77 </TR>
78 <TR>
79 <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE>
80 </P></TD>
81 <TD><P>moltiplicazione</P></TD>
82 <TD><P>Moltiplica i due operandi.</P></TD>
83 </TR>
84 <TR>
85 <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE>
86 </P></TD>
87 <TD><P>divisione</P></TD>
88 <TD><P>Divide il primo operando per il valore del
89 secondo.</P></TD>
90 </TR>
91 </TBODY>
92 </TABLE>
93
94 </BODY>
95 </HTML>
|
|
|
Figura 55.118. Aspetto del file blocchi-css-03.html.
|
55.17.4
Verifica sull'uso delle proprietà riferite ai blocchi
In base a quanto appreso fino a questo punto, si realizzi il file verifica-blocchi-css-01.html che produca un risultato abbastanza simile a quello seguente, quando viene visto attraverso un navigatore:
Si osservi che il testo nelle celle ha un margine di 5mm e che i valori numerici sono allineati alla destra.
Si completi l'intestazione, coerentemente, secondo il proprio criterio, seguendo le modalità già stabilite. Si deve consegnare per la valutazione:
-
la stampa del risultato ottenuto attraverso il navigatore;
-
la stampa del sorgente.
Si richiede espressamente che tutti gli elementi, a esclusione di quelli che devono essere vuoti, siano terminati correttamente con il marcatore di chiusura.
55.18
Contesto dinamico
Dal momento che un documento HTML viene letto normalmente attraverso un navigatore, con il quale si interagisce, è possibile fare riferimento a delle pseudo-classi il cui ambito riguarda la dinamica di interazione con l'utente. I casi principali riguardano i riferimenti ipertestuali, che possono essere già stati visitati o meno, e la posizione del puntatore del mouse sopra il documento.
|
Tabella 55.120. Pseudo-classi utili nell'ambito dell'interazione con l'utente.
| Pseudo-classe | Descrizione |
:link
| Include i riferimenti ipertestuali che non sono ancora stati visitati. |
:visited
| Include i riferimenti ipertestuali che sono già stati visitati. |
:hover
| Riguarda un componente che si trova a essere sormontato dal puntatore del mouse, senza che l'utente compia altre azioni con questo. |
:active
| Riguarda un componente che si trova a essere selezionato, per esempio con un clic del mouse. |
:focus
| Riguarda un componente che si trova a essere a fuoco, per esempio quando si scrive in una casella di inserimento. |
|
55.18.1
File «dinamica-css-01.html»
Si realizzi il file dinamica-css-01.html con il contenuto seguente, partendo eventualmente dalla copia di altri esercizi fatti in precedenza:
1 <!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN">
2 <HTML LANG="it">
3 <HEAD>
4 <META HTTP-EQUIV="Content-Type"
5 CONTENT="text/html; charset=us-ascii">
6 <META NAME="Description"
7 CONTENT="Pseudo-classi dinamiche, esempio 01">
8 <META NAME="Keywords"
9 CONTENT="HTML, CSS, pseudo-classi, esempio">
10 <META NAME="Author"
11 CONTENT="Tizio Tizi, tizio@brot.dg, classe 4Z">
12 <META NAME="Date" CONTENT="2012.01.01">
13 <META NAME="Resource-type" LANG="en"
14 CONTENT="Document">
15 <META NAME="Revisit-after" LANG="en"
16 CONTENT="15 days">
17 <META NAME="Robots" CONTENT="ALL">
18 <TITLE>Dinamica</TITLE>
19 <STYLE TYPE="text/css">
20 <!--
21 BODY {
22 font-size: 5mm;
23 }
24 H1 {
25 font-size: 1cm;
26 }
27 SPAN:hover {
28 font-size: 1cm;
29 }
30 A:hover {
31 background-color: yellow;
32 }
33 A:active {
34 background-color: red;
35 }
36 A:link {
37 color: blue;
38 }
39 A:visited {
40 color: green;
41 }
42 -->
43 </STYLE>
44 </HEAD>
45 <BODY>
46
47 <H1>Le cose che mi piacciono</H1>
48
49 <P>Ci sono due cose che mi piacciono: il <SPAN>software
50 libero</SPAN> e gli <SPAN>standard liberi</SPAN>. Per
51 saperne di più sul <SPAN>software libero</SPAN>
52 si può leggere qualcosa di utile a partire dal
53 sito <A
54 HREF="http://www.gnu.org">http://www.gnu.org</A>; per
55 quanto riguarda gli standard <SPAN>W3C</SPAN>, si veda
56 il sito <A
57 HREF="http://www.w3.org">http://www.w3.org</A>.</P>
58
59 </BODY>
60 </HTML>
|
|
Non viene mostrato l'aspetto finale del documento, perché ciò che conta è quello che accade quando si sposta il puntatore del mouse sopra ai termini delimitati dagli elementi SPAN e sugli elementi A. Si provi anche a selezionare uno dei riferimenti ipertestuali, in modo da vedere cambiare il colore dello sfondo, nel momento della selezione.
55.19
Rispetto del diritto d'autore
Quando si scrive un documento destinato alla diffusione, occorre fare attenzione a rispettare il diritto d'autore e le regole di cortesia comuni. La prima cosa che fa, normalmente, chi comincia a realizzare delle pagine HTML, è quella di recuperare dalla rete ciò che può servire per abbellire il proprio «sito». Dal punto di vista psicologico, questo comportamento sembra una cosa naturale, come sarebbe naturale raccogliere delle conchiglie da una spiaggia o dei sassolini colorati dal letto di un torrente, ma ciò che si trova attraverso Internet non è un dono della natura e occorre un atteggiamento differente.
Sia le leggi sul diritto d'autore, sia le regole di buon comportamento, impongono di accertare la possibilità di riutilizzare del materiale che si potrebbe ottenere attraverso la rete. Una volta accertata la possibilità, salvo altri obblighi stabiliti dall'autore, tutto ciò che non è lavoro proprio deve contenere un riferimento al suo autore e possibilmente all'origine dalla quale questo è stato ottenuto. In circostanze particolari, la pubblicazione di un simbolo o di un logo non richiede l'indicazione del riferimento bibliografico, ma impone probabilmente altri oneri; per esempio, il mostrare il logo della verifica ISO 15445 significa garantire che il proprio lavoro è conforme a tale standard.
Per quanto riguarda la normativa italiana sul rispetto del diritto d'autore, si osservi che non è previsto il fair use.
55.19.1
Verifica conclusiva
In base a quanto appreso da queste lezioni su HTML e sui fogli di stile CSS, si realizzi un proprio «sito», scegliendo liberamente il tema. Se si vogliono utilizzare oggetti (immagini o altro) di altri autori, si accerti la possibilità di agire in tal modo, avendo cura di fare i riferimenti del caso. Per quanto riguarda il testo, non si possono copiare brani di documenti di altri autori, salva la possibilità di usare la citazione.
|
Non si includano file audio-visuali, né software; nel caso di riproduzione di immagini, anche parziali, e di citazioni, ci si accerti di avere ottenuto il permesso (dagli autori, dagli eredi o da chi ne ha acquisito i diritti), oppure che gli autori siano morti da più di 70 anni. Si rammenti che le norme italiane sul diritto d'autore non contemplano il fair use.
|
Il lavoro deve essere conforme allo standard ISO 15445 e alle regole previste per i fogli di stile CSS, pertanto, ogni pagina HTML deve riportare le icone di verifica ISO 15445 e CSS. Si veda eventualmente il file stile-01.html (sezione 55.12.1), in cui si utilizzano queste due icone.
Il lavoro deve essere accessibile sia attraverso un navigatore grafico, sia attraverso un navigatore senza grafica.
Il lavoro deve riportare il copyright del proprio autore (il copyright deve apparire in ogni file HTML) e possibilmente le condizioni alle quali è sottoposto il suo utilizzo (si veda eventualmente il lavoro di Creative Commons http://creativecommons.org/).
55.20
Riferimenti
«a2» 2013.11.11 --- Copyright © Daniele Giacomini -- appunti2@gmail.com http://informaticalibera.net
