Figura 2.7.
I documenti presenti nel Web hanno un formato particolare che comprende dei codici speciali grazie ai quali un browser è in grado di visualizzare in modo appropriato tali documenti.
Il linguaggio utilizzato è l'HTML (HyperText Markup Language - linguaggio per la codifica degli ipertesti attraverso marcatori) che costituisce una versione semplificata dell'SGML (Standard Generalized Markup Language - linguaggio di codifica standard e generalizzato).
L'SGML è stato sviluppato dall'organizzazione internazionale per gli standard nel 1986 per definire linguaggi markup progettati per vari scopi. Ogni linguaggio della famiglia SGML deve rispettare certi requisiti fra i quali quello che tutti i simboli siano definiti e descritti usando un DTD (Document Type Definition); il DTD per l'HTML definisce i marcatori disponibili e il modo di usarli.
L'HTML non è un linguaggio di programmazione e un documento scritto in HTML non è assolutamente un programma cioè una serie di istruzioni che l'elaboratore deve eseguire su dei dati; piuttosto il documento HTML è esso stesso un dato ed il linguaggio definisce le regole per l'inserimento di particolari tag (o marcatori) che indicano ai programmi di navigazione quale struttura avrà la pagina da visualizzare.
La funzione principale dell'HTML è quella di classificare le varie parti che compongono un documento: si può indicare quale parte rappresenta il titolo, in quali posizioni inserire delle immagini, quali parti enfatizzare e così via.
Sono presenti anche alcuni comandi per la formattazione e la definizione del layout e questo ha portato ad una «contaminazione» del linguaggio alla quale si è cercato di porre rimedio proponendo l'uso dei «fogli di stile» o CSS (Cascading Style Sheet).
Di questo si occupa più diffusamente il capitolo 4 riguardante i CSS.
Un aspetto importantissimo dell'HTML è che è indipendente da qualsiasi piattaforma hardware e software: in altre parole una volta scritto un documento con gli elementi standard di HTML, si può essere sicuri che la pagina verrà visualizzata nello stesso modo con qualsiasi browser su qualsiasi computer. Inoltre il suo utilizzo è libero, non ci sono licenze né aggiornamenti da comprare e non si dipende da nessuna azienda produttrice di software.
L'HTML si sta evolvendo rapidamente e ne sono state già rilasciate varie versioni. E' stato ideato nel 1989 insieme al Web da Tim Berners Lee. Attualmente la definizione degli standard dell'HTML (oltre che di quelli dell'HTTP e di altre tecnologie Web) è sotto la responsabilità del consorzio W3C.
La prima versione dell'HTML si chiamava HTML (senza numero di versione) e non ha avuto una grande diffusione perché quando è apparsa esistevano pochissimi serventi Web; è comunque servita da base per le successive versioni che hanno sempre conservato la compatibilità all'indietro (i documenti scritti con la prima versione possono essere tranquillamente usati con le versioni più recenti).
Nel 1993 Dave Ragget ha sviluppato una versione aggiornata di HTML, chiamata HTML+ che non è mai diventato uno standard ufficiale ma le cui innovazioni sono state incorporate nella versione 2.0.
Alla fine del 1994 è stato approvato lo standard HTML 2.0, più affidabile e un po' più semplice delle versioni precedenti; esso ha conosciuto una grande diffusione anche se è stato criticato dagli sviluppatori di siti Web perché permetteva l'utilizzo di un numero troppo esiguo di comandi di formattazione del documento.
Per questo motivo, e anche per la lentezza con la quale il W3C approvava i nuovi standard, le società produttrici di programmi di navigazione (principalmente Netscape e Microsoft) hanno iniziato a supportare tag non standard e non approvati dal W3C, conosciuti come «estensioni» per l'HTML.
Naturalmente ogni browser gestiva le proprie estensioni e i programmi rimasti «fedeli» agli standard non erano in grado di interpretare i nuovi tag.
Nel 1995 è stato redatto lo standard HTML 3.0 che però prevedeva troppi cambiamenti rispetto alla versione precedente e quindi non è stato preso in considerazione dagli sviluppatori.
Migliore fortuna ha avuto la versione HTML 3.2 del 1996 che era maggiormente compatibile con la versione 2.0 e comprendeva anche le estensioni usate dai browser più diffusi (Netscape Navigator e Internet Explorer).
La versione più recente di HTML è la 4.0 del 1997 (revisionata con la 4.01) che rispetto alla precedente incorpora alcune funzioni che fino a quel momento erano estensioni, gestisce un insieme di caratteri (Unicode) più esteso del precedente (Latin-1) ed anche un nuovo marcatore per gli oggetti multimediali.
Occorre comunque osservare che la versione di HTML supportata sicuramente anche dai browser meno moderni e di minore diffusione è la 3.2.
Le pagine scritte in HTML sono costituite da puro testo, non contengono informazioni specifiche di una certa piattaforma o di un certo programma e possono essere scritte o modificate con qualsiasi editor di testo (ad esempio Edit di MS-Dos, Blocco note di MS-Windows, o vi di GNU/Linux).
Tali pagine sono chiamate anche «sorgenti HTML» e contengono al loro interno due tipi di oggetti:
il testo del documento;
i marcatori HTML.
Un marcatore (o tag, o elemento) HTML è una stringa di simboli con un significato speciale: inizia con il simbolo di minore «<», continua con una «parola riservata» e termina con il segno di maggiore «>».
I seguenti sono esempi di tag: <html>, </B>, <BODY>, <P>.
|
Nei tag non si ha distinzione tra lettere maiuscole e minuscole, quindi <BODY>, <body>, <Body> rappresentano lo stesso elemento. In questo testo gli elementi del linguaggio HTML sono quasi sempre indicati in minuscolo in quanto questo diviene obbligatorio in XHTML che è l'evoluzione dell'HTML e del quale si occupa brevemente il capitolo 9. |
Esistono due tipi di tag: quelli di inizio con i quali si attivano certe opzioni o funzioni, e quelli di fine con i quali si disattivano le stesse opzioni e funzioni.
Il testo inserito tra il tag di inizio e quello di fine viene visualizzato dai programmi di navigazione in modo appropriato secondo le specifiche dei marcatori utilizzati.
I marcatori di fine si scrivono nello stesso modo di quelli di inizio eccetto per il fatto che dopo il simbolo di minore (<) si ha sempre il simbolo della barra «/»; se ad esempio scriviamo nel documento HTML:
|
il testo compreso tra i due tag, (cioè il contenuto di quell'elemento) sarà visualizzato in grassetto (b sta per bold).
Esistono anche degli elementi per cui la stringa di fine non è obbligatoria, come <p>, che indica l'inizio dell'elemento paragrafo ed il cui contenuto è il testo del paragrafo stesso.
Ci sono poi dei tag senza neanche il contenuto come <hr>, che serve ad inserire nel documento una righello orizzontale.
Alcuni marcatori prevedono degli «attributi», (indicati esclusivamente al momento dell'apertura del tag prima del simbolo «>») che specificano determinate proprietà dei marcatori e possono avere un valore.
La sintassi da utilizzare prevede che ogni attributo sia separato dal precedente o dalla stringa di apertura del tag da uno spazio; l'eventuale valore deve essere preceduto dal simbolo «=» e racchiuso tra virgolette (").
La cosa più importante da capire riguardo ai tag è che essi non vengono mai visualizzati dal browser, piuttosto viene visualizzato il loro «effetto» sul testo della pagina Web.
Questo avviene grazie all'operazione di rendering effettuata da un apposito «motore» incorporato in ogni browser.
I motori di rendering più importanti sono:
Gecko, per Firefox, Galeon, Epiphany e altri;
KHTML, per Konqueror;
Presto, per Opera;
Trident, per Internet Explorer;
Webkit, per Chrome e Safari.
I migliori sono: Presto e Gecko riguardo alla velocità, KHTML riguardo all'aderenza agli standard.
|
Se qualche tag è scritto male, contiene errori di sintassi o non è riconosciuto per qualsiasi altro motivo, viene semplicemente ignorato dal browser che non da nessuna segnalazione di errore al riguardo. Molte volte inoltre il programma di navigazione riesce a interpretare correttamente e quindi a presentare in modo accettabile anche pagine Web contenenti errori e imperfezioni nell'uso dei marcatori. Questo non significa che si possa prestare poca attenzione nella realizzazione di pagine Web con la scusa che poi i browser «digeriscono» tutto, anche in vista dell'uso del molto meno permissivo XHTML. |
Per scrivere un documento in linguaggio HTML, come detto, si può usare un comunissimo e semplicissimo editor di testo; esistono però anche altri strumenti più sofisticati che si suddividono fondamentalmente in due categorie:
editor «dedicati» cioè studiati appositamente per la scrittura di codice HTML ma sempre a formattazione differita (il risultato della formattazione del documento è visibile solo successivamente usando un programma di navigazione);
editor a formattazione immediata (il risultato finale della formattazione del documento è visibile immediatamente) che creano automaticamente il codice HTML.
Nel primo caso si tratta di editor con delle funzioni aggiuntive per la scrittura degli elementi HTML, per il controllo ortografico, per l'ordinamento del testo ed altre ancora.
Nel secondo caso si tratta di strumenti come Macromedia Dreamweaver, Microsoft Frontpage o come il programma libero Kompozer, che permettono di comporre la pagina partendo dal suo aspetto e generano automaticamente il sorgente non richiedendo quindi alcuna conoscenza del linguaggio HTML.
Questi programmi sono detti anche editor WYSIWYG (What You See Is What You Get, ciò che vedi è ciò che ottieni) ed il loro uso può apparire conveniente fino a far ritenere superfluo un corso di HTML.
I sostenitori dell'uso di tali strumenti affermano tra l'altro che con essi i creatori di pagine Web sono sollevati dalla necessità di imparare comandi molto complicati e che la produttività e la qualità del lavoro sono migliori.
Esistono però motivi molto importanti che invece ne sconsigliano l'utilizzo:
il linguaggio HTML è molto semplice e non dovrebbero essere necessari molti «aiuti» per usarlo correttamente;
se si conosce il linguaggio si hanno maggiori possibilità di correggere errori e risolvere problemi sfruttando a pieno le sue potenzialità e si può intervenire sui propri documenti da qualsiasi computer e con qualunque editor;
il codice HTML creato automaticamente è solitamente di cattiva qualità, non efficiente, male organizzato e può contenere elementi incompatibili con gli standard ufficiali del linguaggio.
Quindi è utile conoscere l'HTML e per la creazione di documenti non è consigliabile l'uso di programmi troppo sofisticati; al massimo si consiglia l'uso di editor dedicati.
Per essere sicuri di avere realizzato un documento HTML aderente agli standard si può ricorrere ai «validatori» che sono programmi che ispezionano un sorgente HTML individuando gli errori nell'uso dei tag oppure l'uso di elementi considerati «deprecati» o proposti da qualche azienda ma non riconosciuti ufficialmente dal W3C come facenti parte dell'HTML standard.
Molti di questi strumenti sono disponibili direttamente in rete; un esempio è il validatore del consorzio W3C all'indirizzo <http://validator.w3.org> al quale si possono sottoporre documenti già presenti in rete, fornendo il relativo indirizzo, oppure file da caricare al momento per la validazione.
La struttura generale di un documento HTML viene definita con i seguenti elementi fondamentali:
html
head
title
body
Questi elementi anche se mancanti vengono considerati presenti da quasi tutti i programmi di navigazione; è comunque buona norma includere tutti e quattro questi elementi in qualsiasi documento HTML.
All'inizio del sorgente HTML si deve inoltre inserire una riga che specifichi quale è la versione di HTML utilizzata. Per fare questo si usa la dichiarazione <!DOCTYPE> che non è un tag HTML ma una entità SGML.
Molti browser gestiscono anche documenti Web mancanti di tale elemento; è comunque opportuno inserirlo per evitare incompatibilità e per poter usare senza problemi gli strumenti di validazione del sorgente HTML.
Per la versione HTML 4.01 la linea da scrivere è una delle seguenti:
|
|
|
Nel primo caso si intende utilizzare la variante «strict» dell'HTML, cioè una versione in cui non è ammesso l'utilizzo di una serie di elementi considerati «deprecati» come i riquadri (frame) o i tag <center> e <b>.
Nel secondo caso invece si intende usare la variante «Transitional» in modo da poter inserire anche i marcatori deprecati.
Nel terzo caso infine si intende usare la variante «Frameset» in modo da avere a disposizione i marcatori deprecati e poter utilizzare anche i riquadri.
La suddivisione in varianti è stata proposta dal W3C con la versione 4.01 dell'HTML (e 1.0 dell'XHTML), nel gennaio del 2000, per i seguenti scopi:
imporre regole più rigide nell'uso del linguaggio grazie alla variante strict eliminando tutta una serie di marcatori non riguardanti la struttura del documento ma il suo aspetto;
incoraggiare l'uso dei CSS per la definizione del layout delle pagine;
favorire la transizione dall'HTML all'XHTML;
permettere comunque un passaggio morbido alla nuova versione senza provocare un rifiuto da parte degli sviluppatori Web grazie alle più permissive varianti Transitional e Frameset.
Un elenco dei tag deprecati si può trovare all'indirizzo <http://www.w3.org/TR/REC-html40/appendix/changes.html#h-A.3.1.2>.
|
Il presente documento fa riferimento alla variante Frameset dell'HTML che è tutt'ora la più utilizzata per la creazione di pagine Web. |
Lo scopo di questo elemento è quello di indicare che il file che si sta scrivendo è realizzato in linguaggio HTML. Tutto il testo, comprensivo degli altri tag, dovrà essere racchiuso tra i suoi tag di inizio e fine:
|
Un documento HTML deve sempre contenere due sezioni o parti:
la sezione intestazione (head) che contiene elementi che non influenzano la visualizzazione da parte dei programmi di navigazione ma specificano proprietà comunque importanti del documento;
la sezione corpo (body) in cui è presente il contenuto da visualizzare.
La sezione intestazione inizia con il tag <head> e termina con </head> e contiene almeno il titolo del documento racchiuso tra i tag <title> e </title>; può contenere altre informazioni come i dati sull'autore e sul programma che ha generato il documento, o anche degli script cioè insiemi di comandi scritti in un qualche linguaggio di programmazione e che possono svolgere varie attività interagendo con il browser.
Il titolo deve essere una descrizione del documento breve, perché viene visualizzato dai programmi di navigazione nella barra del titolo della finestra, e significativa, perché viene utilizzato dai programmi che catalogano i documenti di Internet per creare indici di ricerca.
La sezione corpo è racchiusa tra i tag <body> e </body> e contiene la parte del documento che viene visualizzata dai browser quando si apre la pagina.
Il seguente è un semplicissimo esempio che riassume la struttura generale di una pagina Web con l'uso dei tag sinora illustrati:
|
In figura 2.7 si vede l'aspetto di questa pagina una volta aperta con un browser.
|
Figura 2.7. |
I marcatori che possono essere presenti nel corpo di un documento si possono suddividere in due tipologie:
elementi di testo o in linea (inline);
elementi di blocco (block-level).
I primi si usano per inserire immagini, creare collegamenti, modificare l'aspetto del testo, i secondi per definire gruppi di testo con uno scopo specifico, come intestazioni, sezioni, tabelle.
La differenza principale tra i due tipi di elementi è che quelli di blocco provocano interruzioni di paragrafo e quelli di testo invece no.
I titoli o intestazioni sono elementi di blocco disponibili in sei livelli diversi; al crescere del livello diminuisce il grado di evidenza del testo contenuto.
L'uso dei titoli non è obbligatorio ma sicuramente utile per organizzare in modo razionale le pagine.
Ogni intestazione inizia con <hn> e termina con </hn> dove n è il numero corrispondente al livello desiderato; sono previsti i seguenti attributi:
align="left";
align="right";
align="center";
align="justify".
Il loro effetto è quello di allineare le intestazioni rispettivamente a sinistra, destra, centro e ad entrambi i margini.
In HTML l'inizio di un paragrafo è indicato con il tag <p> mentre non è obbligatorio il tag di fine </p>.
|
In vista del passaggio a XHTML è comunque consigliabile abituarsi a «chiudere» tutti i tag, anche quelli che non lo richiedono esplicitamente in HTML. |
Nel caso dei tag vuoti si può anche utilizzare la forma abbreviata di chiusura che consiste nel posporre al tag di apertura la barra obliqua; ad esempio invece di scrivere:
|
si può scrivere:
|
Si noti che la presenza di spazi o righe vuote nel sorgente HTML viene ignorata dai browser (gli spazi vengono compattati) e quindi l'unico modo per separare correttamente i paragrafi è, appunto, l'uso del tag <p>.
A tale proposito consideriamo le seguenti porzioni di codice HTML:
|
oppure:
|
oppure:
|
Questi tre esempi produrranno esattamente lo stesso effetto al momento della visualizzazione con il browser, quello mostrato in figura 2.13.
|
Figura 2.13. |
A proposito dei paragrafi si deve anche ricordare che non è opportuno cercare di inserire righe vuote con una sequenza di <p> consecutivi perché molti programmi di navigazione in questo caso li riducono ad un solo <p> annullando lo sforzo compiuto dall'autore del sorgente HTML.
All'interno dell'elemento paragrafo si possono utilizzare gli attributi di allineamento visti per le intestazioni.
Naturalmente il tag <p> è un elemento di blocco.
Con il tag <span> si può definire un contenitore generico di testo, cioè un qualcosa di molto simile ad un paragrafo, tenendo però presente che in questo caso si tratta di un elemento in linea e non di blocco.
Con il tag <hr> si inserisce nel documento una riga orizzontale, oltre a separare il testo in due paragrafi.
Questo elemento è di blocco e ha vari attributi, il più interessante dei quali è size che permette di impostare lo spessore della linea in pixel.
Il tag <center>, che è di blocco, viene usato per centrare tutto ciò che è contenuto tra tale elemento e la rispettiva chiusura </center>.
Per interrompere una linea e «andare a capo» senza definire un nuovo paragrafo, si usa il tag <br>.
Questo elemento è di testo e si differenzia da <p> perché quest'ultimo, oltre a terminare la linea, termina anche il paragrafo iniziandone uno nuovo.
Il problema citato in precedenza, relativo all'inserimento di più righe vuote tra due porzioni di testo, può essere risolto utilizzando una sequenza di tag <br> invece che tag <p>.
Con gli elementi <b> e </b> si enfatizza il testo tra essi contenuto, con <i> e </i> si visualizza in corsivo, con <u> e </u> si sottolinea; questi sono tutti elementi di testo.
In un documento HTML i tag sono sempre nidificati (cioè inseriti uno nel contenuto di uno precedente); abbiamo infatti visto come l'elemento <body> sia contenuto all'interno dell'elemento <html>.
Consideriamo ora la seguente porzione di codice HTML:
|
Il marcatore per il corsivo è all'interno di quello per il grassetto che, a sua volta è all'interno di quello per la separazione dei paragrafi; l'effetto di è quello di visualizzare il testo in grassetto e la parola nidificati anche in corsivo.
Riguardo alla nidificazione ci sono alcune regole da ricordare:
gli elementi devono essere completamente nidificati e non chiusi nell'ordine sbagliato;
gli elementi di testo possono essere nidificati in elementi di blocco o in altri di testo;
gli elementi di blocco possono essere nidificati solo in altri elementi di blocco.
Quindi i seguenti esempi risultano errati:
|
Alcuni programmi di navigazione riescono ugualmente ad interpretare sorgenti HTML contenenti errori simili a questi ma, come detto più volte in precedenza, è sempre bene rispettare le regole data la minore permissività di strumenti più moderni come l'XHTML.
Le prime versioni di HTML, fino alla 3.2, utilizzano un insieme di caratteri chiamato Latin-1 o ISO 8859-1.
L'ISO (International Organization for Standardization) ha il compito di definire gli standard in vari ambiti a livello mondiale; l'acronimo dovrebbe essere IOS ma è stato preferito ISO che in lingua greca indica «uguaglianza».
Questo insieme di caratteri comprende tutti i simboli stampabili del codice ASCII (American Standard Code for Information Interchange), cioè quelli di valore decimale da 32 a 126, e altri caratteri numerati da 160 a 255 che includono simboli speciali e lettere straniere.
Con l'HTML 4.0 viene introdotto l'uso del set di caratteri Unicode o UCS (Universal Character Set) o ISO-10646 che comprende 38.885 caratteri, appartenenti alle lingue di tutto il Mondo, e che può essere codificato in molti modi diversi (UCS-2 UTF-8 (Unicode Transformation Format 8) e altri ancora.
Essendo questo standard ancora abbastanza nuovo può capitare che un programma di navigazione non gestisca i caratteri UCS; inoltre non è detto che il computer che utilizziamo contenga il font di caratteri in grado di visualizzare determinati simboli UCS.
Torniamo quindi all'insieme di caratteri Latin-1, e vediamo come si possono utilizzare i simboli speciali cioè quelli che non hanno codice ASCII compreso tra 32 e 126 (in decimale).
A tale scopo si ricorre alle entità per caratteri speciali che sono oggetti HTML scritti con una sintassi particolare: iniziano con il simbolo «&», terminano con «;» e prevedono l'indicazione di un codice con un nome o in forma numerica.
Ad esempio la lettera "à" corrisponde all'entità à oppure à.
Di seguito sono elencati alcuni dei caratteri speciali più usati (almeno in Italia) con i rispettivi codici:
|
In modo simile viene risolto anche il problema dell'uso di caratteri «normali» ma che per HTML hanno un significato particolare, come i simboli di maggiore e minore, la «&» e altri.
In questo caso si usano le entità per caratteri riservati da scrivere con le stesse regole di sintassi:
|
Tra i caratteri speciali ce n'è uno molto importante: lo spazio unificatore con il quale si inserisce uno spazio tra due parole facendo in modo però che esse rimangano sempre nella stessa riga.
Per inserire tale elemento si usano le entità oppure  .
Con lo spazio unificatore si riesce anche a ottenere il rientro della prima riga di un paragrafo, cosa impossibile da realizzare con gli spazi «normali» o i tabulatori, visto che questi verrebbero compattati dal browser in fase di visualizzazione.
Questo effetto (insieme a molti altri) si ottiene comunque in modo molto più elegante, efficace e aderente agli standard, utilizzando gli strumenti messi a disposizione dai CSS.
|
Questa osservazione deve essere ritenuta valida, e non viene quindi ripetuta, per tutti gli elementi o attributi che definiscono caratteristiche di formattazione e aspetto del testo (colori, allineamento, sfondi ecc.). |
Vediamo adesso una rapida carrellata di marcatori usati abbastanza frequentemente.
In un documento HTML si possono inserire commenti e annotazioni che non verranno visualizzate ma che possono essere utili per chi esamina il codice sorgente. I commenti devono essere racchiusi tra «<!--» e «-->».
In un documento HTML si possono gestire i colori dello sfondo e del testo e si può definire un'immagine come sfondo usando alcuni attributi del tag body.
Come prerequisito occorre però conoscere il sistema additivo dei colori che è alla base della grafica dello schermo: ogni colore viene ottenuto «sommando» una certa quantità di rosso, di verde e di blu che sono i colori fondamentali; sommando il massimo di ognuno dei tre colori si ottiene il bianco.
Per stabilire la quantità dei colori fondamentali da usare si deve indicare un insieme di 3 coppie di cifre esadecimali precedute dal simbolo «#»: la prima relativa al rosso, la seconda al verde, la terza al blu.
Ad esempio il valore "#000000" rappresenta il nero mentre "#00FF00" è il verde e "#F0F0F0" un grigio chiaro.
C'è anche la possibilità di indicare i colori con il loro nome (in inglese) che però deve essere conosciuto e che non è disponibile per tutte le sfumature possibili (256*256*256 = 24061070).
Gli attributi del tag body da usare sono bgcolor per il colore dello sfondo e text per il colore del testo; inoltre, anche se non riguarda i colori, è importante l'attributo background per usare un'immagine come sfondo del documento.
Nel seguente esempio viene definito un documento con sfondo nero e testo bianco:
|
Se si vuole usare come sfondo l'immagine contenuta nel file clouds.jpg presente nella stessa directory dove risiede il sorgente HTML, si scrive invece:
|
Se gli attributi di body non vengono specificati la visualizzazione del documento avviene secondo lo standard del programma di navigazione, di solito testo nero su sfondo bianco.
Si tratta di un elemento di testo che consente di cambiare il colore, la dimensione ed il tipo dei caratteri utilizzando rispettivamente gli attributi color, size e face.
Per i colori si usano i codici esadecimali visti in precedenza, per il tipo carattere si usa il suo nome, per la dimensione ci sono sette possibilità numerate da 1, la più piccola, a 7, la più grande.
Si può però anche indicare una dimensione relativa rispetto alla dimensione normale del testo; ecco alcuni esempi:
|
Gli ultimi due esempi equivalgono ai seguenti in cui si usano i tag small e big:
|
Naturalmente i tre attributi possono essere combinati come nel seguente esempio:
|
L'elemento font può essere utilizzato anche per modificare colore e dimensione delle intestazioni se viene nidificato all'interno dei tag <h1>, <h2> ecc.
Questo elemento di blocco viene usato per inserire informazioni che riguardano l'autore del documento tra i tag <address> e </address>.
L'elemento di blocco div suddivide il documento in sezioni ed è delimitato dai tag <div> e </div>.
Ogni sezione può essere definita con un particolare allineamento del testo grazie all'uso degli stessi attributi visti per paragrafi e intestazioni; se ad esempio si vuole centrare una porzione di testo composta da molti paragrafi, invece di centrarli uno ad uno si può ricorrere al tag div nel seguente modo:
|
Si tratta di un elemento di blocco che permette di visualizzare del testo nel modo in cui viene scritto nel file sorgente, senza che gli spazi siano compattati dal programma di navigazione; tutto il testo contenuto fra i tag <pre> e </pre> viene visualizzato così come è scritto usando un carattere monospaziato (generalmente il Courier).
Sono elementi di testo che servono a scrivere caratteri rispettivamente nelle posizioni di «pedice» e «apice».
I tag da usare sono <sub> e <sup> come mostrato nel seguente esempio:
|
che viene visualizzato come mostrato in figura 2.25.
|
Figura 2.25. |
Sono elementi di testo che servono rispettivamente a enfatizzare e a enfatizzare molto, quanto viene racchiuso tra i rispettivi tag <em> e </em>, <strong> e </strong>.
In qualche caso questi elementi hanno lo stesso effetto dei tag <i> e <b>.
Gli elenchi o liste sono elementi di blocco molto usati e sono definiti in cinque tipologie:
liste numerate e ordinate;
liste puntate con richiamo grafico;
liste a glossario o di definizione;
liste a menu;
liste a directory.
Gli ultimi due tipi sono usati molto raramente e sono anzi sconsigliati; esaminiamo quindi solo le altre tre tipologie di elenchi.
I tag di inizio e fine di una lista numerata sono <ol> e </ol>; ciascuna voce dell'elenco deve essere poi preceduta dal marcatore <li> e seguita (non obbligatoriamente) da </li>.
C'è la possibilità di stabilire il tipo di numerazione desiderata con l'attributo type del tag <ol>:
type="1" per i numeri arabi;
type="a" per i caratteri minuscoli;
type="A" per i caratteri maiuscoli;
type="i" per i numeri romani minuscoli;
type="I" per i numeri romani maiuscoli.
Si può anche stabilire il punto di partenza della numerazione con l'attributo start.
Le impostazioni per difetto sono: numerazione araba e partenza dal valore «1».
Anche il tag <li> prevede un attributo, value per assegnare ad una certa voce un valore specifico e alterare quindi la normale sequenza di numerazione della lista.
Il seguente codice:
|
viene visualizzato come mostrato in figura 2.27.
|
Figura 2.27. |
In questo esempio la lista contiene solo testo non formattato; è comunque possibile inserire qualsiasi elemento di blocco o di testo come voce dell'elenco.
I tag di inizio e fine di una lista puntata (o non numerata) sono <ul> e </ul>; anche in questo caso serve poi <li> per ogni voce dell'elenco.
Si può stabilire il tipo di carattere di richiamo delle voci listate con l'attributo type:
type="circle" per usare un cerchio vuoto;
type="disc" per usare un cerchio pieno;
type="square" per usare un quadrato.
Le liste (anche quelle numerate) possono essere nidificate in modo da creare delle sottoliste.
I caratteri standard di richiamo dovrebbero essere il disco per le liste principali, il cerchio per le sottoliste di primo livello e il quadrato per le altre, ma questa cosa dipende molto dal browser usato.
Vediamo un esempio:
|
In questo esempio l'indentatura serve solo ad aumentare la leggibilità del sorgente in quanto, come più volte detto, gli spazi sono ignorati dal browser.
Il risultato è visibile in figura 2.29.
|
Figura 2.29. |
Le liste a glossario sono delimitate dai tag <dl> e </dl>; le voci dell'elenco sono contrassegnate dal marcatore <dt> mentre <dd> viene usato per fornirne la definizione.
Ecco un esempio:
|
che viene visualizzato come in figura 2.31.
|
Figura 2.31. |
Alcune osservazioni:
un elemento <dd>, come anche <li>, può contenere sia elementi di blocco che di testo; in <dt> invece possono esserci solo elementi di testo;
ad una voce <dt> possono essere associate più definizioni <dd> ma è vero anche il viceversa: una definizione associata a più voci.
La possibilità di definire collegamenti ipertestuali o link tra documenti diversi è senz'altro uno dei motivi del successo del Web in quanto permette di passare facilmente da una pagina ad un'altra senza preoccuparsi delle rispettive collocazioni fisiche.
I documenti collegati possono infatti risiedere nella stessa macchina o su macchine diverse, distanti anche migliaia di chilometri, purché collegate ad Internet; inoltre è possibile definire dei link anche ad altre parti di una stessa pagina.
L'entità HTML da usare per definire i collegamenti è chiamata «ancora», è un elemento di testo e corrisponde ai tag <a> e </a> accompagnati da vari attributi tra i quali i più usati sono name e href.
Il testo che si trova tra i marcatori di apertura e chiusura è quello che il programma di navigazione evidenzia in qualche modo per attirare l'attenzione sulla presenza del collegamento e viene denominato «zona sensibile» o «zona attiva» del documento (si parla di «zona» e non di «testo sensibile» perché un collegamento può essere definito anche su elementi diversi, come le immagini).
Ogni browser mette in risalto i link in modo diverso: vengono differenziati quelli già visitati, da quelli da visitare e da quelli attivi (un link è attivo per il breve tempo in cui viene selezionato dall'utente); di solito i colori standard usati sono rispettivamente: blu (#0000FF), violetto (#800080) e rosso (#FF0000).
Si possono comunque personalizzare i colori del testo dei collegamenti ricorrendo a degli attributi del tag <body> e precisamente: link per il colore dei collegamenti, vlink per il colore dei collegamenti già visitati, alink per il colore dei collegamenti attivi.
Per esempio per avere rispettivamente verde, marrone, fucsia:
|
Per collegamenti esterni si intendono quelli che puntano a documenti memorizzati su macchine diverse da quella che ospita la pagina che stiamo definendo.
Per definire questo tipo di collegamenti è necessario usare l'attributo href (che sta per hypertext reference) seguito dall'URL della pagina alla quale ci si vuole collegare.
Ad esempio:
|
La scritta «Ministero della Pubblica Istruzione» viene evidenziata dal navigatore; la selezione di tale voce, con il mouse o con la tastiera, attiva il collegamento con il sito del Ministero ed il browser visualizza la pagina iniziale di tale sito (di solito è la pagina contenuta nel file index.html che viene aperta per difetto se, come nell'esempio in questione, non è indicato espressamente un nome di file).
Altro esempio:
|
In questo modo si definisce un collegamento con un documento contenente il «Manifesto GNU» di R, Stallman» memorizzato presso il sito <http://www.linuxdidattica.org> sul percorso docs/filosofia/ con nome manifesto-gnu-it.html.
Altro esempio:
|
In questo modo si definisce un collegamento attivando il quale si accede alla definizione di un messaggio di posta elettronica da inviare a pippo@tin.it.
L'attributo name del tag <a> permette di inserire delle etichette (o label) che fanno riferimento a diverse sezioni di un documento.
La presenza di queste etichette può essere sfruttata definendo, in un'altra pagina HTML, dei collegamenti che puntano al documento non più in modo generico ma indicando una sezione specifica associata ad una di tali etichette.
Se ad esempio definiamo una pagina di nome esempio.html sulla macchina pc01.max.planck in modo che contenga etichette:
|
diviene possibile collegarsi ad essa da un altro documento in vari modi come mostrato di seguito:
|
Quindi per collegarsi ad una certa etichetta di un documento basta aggiungere all'indirizzo di quest'ultimo il simbolo "#" seguito dal nome dell'etichetta a cui vogliamo fare riferimento.
L'elemento <a> può essere utilizzato insieme ad altri marcatori HTML ma si deve ricordare che è proibito nidificarlo in altri elementi <a>.
Vediamo alcuni esempi:
collegamento all'interno di una intestazione:
|
si noti che <a> che è un elemento di testo deve essere interno al tag di intestazione che è un elemento di blocco;
collegamento in corsivo:
|
oppure:
|
lista di collegamenti:
Sarebbe anche possibile cambiare il colore del testo dei collegamenti, nidificando il marcatore <font> all'interno del marcatore «ancora»; questa però è un'operazione sconsigliata in quanto si verrebbero a perdere le impostazioni preimpostate relative ai colori dei collegamenti con la distinzione tra quelli visitati, non visitati e attivi e si potrebbe quindi creare disorientamento nell'utente.
I collegamenti interni sono quelli che fanno riferimento a file residenti sul proprio sito Web; si definiscono nello stesso modo di quelli esterni eccetto per il fatto che è possibile fare riferimento anche a indirizzi «relativi».
Se ad esempio stiamo scrivendo una pagina HTML residente su pc01.max.planck/classi/4d/pippo/ e vogliamo fare riferimento al documento esempio2.html presente sulla stessa macchina e stessa directory, basta scrivere:
|
Se invece vogliamo collegarci ad un documento, presente sulla stessa macchina ma in una directory differente, dovremo specificare il percorso per raggiungerlo ricorrendo, se necessario, alla notazione «..» che indica la directory «madre» della directory corrente.
Vediamo alcuni esempi:
|
in questo caso ci colleghiamo al file esempio2.html che è in pc01.max.planck/classi/4d/pippo/pluto/;
|
in questo caso ci colleghiamo al file esempio2.html che è in pc01.max.planck/classi/4d/paperino/.
Per i collegamenti interni è sempre consigliato l'uso di indirizzi relativi in modo che tutto continui a funzionare senza modifiche (o quasi) anche in caso si spostino tutti i documenti del nostro sito in un'altra posizione del disco o addirittura su un'altra macchina.
Se si usano indirizzi assoluti questo naturalmente non è possibile e si devono modificare i vari collegamenti in caso di spostamento dei documenti.
Grazie all'uso delle etichette è possibile definire collegamenti ad altre parti dello stessa pagina in modo da poter «saltare» immediatamente ad esse.
Questo può servire in caso di pagine molto lunghe oppure per creare degli indici del contenuto di un documento HTML.
Ad esempio se si definisce in un documento una etichetta:
|
poi si può stabilire il link ad essa scrivendo:
|
Nel caso si voglia definire l'indice di un documento (di nome esempio.html) è opportuno inserire delle etichette ad ogni intestazione del documento stesso:
|
L'indice può risiedere nel documento stesso (di solito all'inizio) oppure in un altro; nel primo caso viene definito così:
|
Nel secondo caso invece (supponendo che l'indice sia in un altro documento ma nella stessa macchina e directory):
|
Nei documenti HTML è possibile inserire immagini ed i formati più comunemente utilizzati sono GIF (Graphic Interchange Format) e JPEG (Joint Photographic Experts Group); i file corrispondenti hanno rispettivamente le estensioni «.gif» e «.jpg» o «.jpeg».
Il formato GIF è stato sviluppato da Compuserve alla fine degli anni '80 ed è particolarmente adatto per linee, icone, immagini generate dal computer e con colori netti, non sfumati; inoltre, grazie a specifici software, le immagini GIF possono anche essere rese trasparenti e animate (qui però non approfondiamo queste possibilità).
Il formato JPEG si è diffuso dal 1993 ed è progettato per le fotografie e per altre immagini con colori sfumati.
Tra i due il formato GIF è senz'altro il più diffuso per il fatto che le immagini GIF sono solitamente poco «pesanti» e quindi si trasferiscono in tempi brevi.
|
Si deve infatti notare che, quando viene richiesta ad un servente Web una pagina contenente immagini, quest'ultimo invia in risposta il file HTML corrispondente alla pagina e, separatamente, i file dove sono memorizzate le immagini; se questi ultimi sono molto grandi (e in presenza di collegamenti lenti alla rete) avremo dei tempi di attesa abbastanza lunghi per il completamento a video della pagina richiesta. |
A vantaggio delle immagini JPEG c'è la maggiore qualità (sono "a 24 bit" cioè possono avere 16 milioni di colori contro gli "8 bit" e 256 colori delle GIF) e la compattezza: la stessa immagine in formato JPEG occupa circa un quarto dello spazio in byte del formato GIF.
Di solito comunque le immagini JPEG hanno un maggiore occupazione di memoria perché create con apparecchi fotografici, mediante acquisizione dallo scanner o da altre fonti ad alta qualità e definizione.
Nel 1995 il W3C ha definito un nuovo formato di immagini per la rete, il PNG (Portable Network Graphics) che, almeno nelle intenzioni, avrebbe dovuto sostituire gli altri formati; infatti PNG prevede il supporto da 256 colori (con PNG-8 che può essere considerato il sostituto di GIF) fino a 16,7 milioni di colori (con PNG-24 che dovrebbe sostituire JPEG).
Nella realtà il formato PNG, pur utilizzato, non ha mai sostituito del tutto gli altri formati.
In conclusione possiamo dire che la scelta tra i formati dipende fortemente dalle caratteristiche delle immagini che si vogliono utilizzare; di solito in un documento Web si trovano immagini di tutti i formati citati.
L'elemento che si utilizza per l'inserimento di immagini è <img>; è un elemento di testo, prevede l'attributo src per specificare il file contenente l'immagine e l'attributo alt per indicare un testo alternativo nel caso quest'ultima non possa essere visualizzata.
Esempio:
|
In questo modo si inserisce l'immagine contenuta nel file di nome topolino.gif residente nella directory corrente; il testo alternativo è Topolino.
I motivi per cui può essere necessario il testo alternativo sono i seguenti:
il browser non supporta la grafica;
il browser è programmato per pronunciare testo al posto di immagini (per utenti non vedenti);
il browser è stato configurato solo per il testo in modo da velocizzare il caricamento dei documenti Web;
dare la possibilità al browser di visualizzare il testo alternativo mentre l'immagine viene caricata;
l'immagine da visualizzare non viene trovata dal servente Web.
Le immagini possono essere posizionate con l'attributo align del tag <img>; i valori possibili sono "top", "bottom" e "middle" per l'allineamento verticale e "left" e "right" per l'allineamento orizzontale.
Il valore per difetto è "top" grazie al quale il bordo superiore dell'immagine è allineato con la riga di testo di cui essa fa parte (si ricordi che l'elemento <img> è di testo).
Invece con "bottom" è il bordo inferiore dell'immagine ad essere allineato con la riga di testo, mentre con "middle" quest'ultimo viene allineato con la parte centrale dell'immagine.
Con le scelte "right" e "left" l'immagine viene posizionata rispettivamente al margine destro o sinistro della pagina ed il testo che segue l'elemento <img> viene visualizzato affiancato all'immagine stessa.
Se si vuole interrompere la visualizzazione del testo affiancato e far posizionare gli elementi successivi sotto l'immagine si deve usare l'interruzione di linea con attributo clear nel seguente modo:
|
rispettivamente nel caso che l'immagine sia sul bordo sinistro o sul bordo destro o ci siano immagini su entrambi i lati.
L'esempio seguente mostra l'uso di alcuni degli attributi appena illustrati:
|
Nella figura 2.53 viene mostrato l'aspetto della pagina aperta con un browser.
|
Figura 2.53. |
Attraverso l'uso di altri attributi del tag <img> si possono dimensionare le immagini, impostare lo spessore del bordo e stabilire quanto spazio vuoto lasciare tra esse e il testo che le circonda.
Gli attributi width e height permettono di specificare rispettivamente la larghezza e l'altezza di un'immagine espressa in pixel.
Esempio:
|
L'attributo border permette di specificare un bordo di un certo spessore espresso in pixel; il valore di difetto è zero che significa nessun bordo.
Esempio:
|
Si noti che in questo caso l'immagine avrà una larghezza totale di 120 pixel e un'altezza totale di 220 pixel.
Con gli attributi hspace e vspace si indica infine lo spazio vuoto, sempre espresso in pixel, da lasciare a sinistra o destra (con hspace) e sopra e sotto (con vspace) all'immagine.
E' possibile usare immagini al posto del testo o anche insieme al testo come «ancore» per i collegamenti.
Esempi:
|
Nel primo caso il collegamento è definito sull'immagine, nel secondo è definito sia sull'immagine che sul testo.
Occorre ricordare che alcuni navigatori aggiungono automaticamente un bordo blu intorno ad una immagine collegamento per evidenziare la presenza di quest'ultimo, quindi non è opportuno definire bordi personalizzati per tali immagini.
Questo attributo, che può essere usato praticamente con tutti i marcatori, permette di inserire una etichetta di testo che viene visualizzata come tooltip dal programma di navigazione quando l'utente si posiziona con il puntatore del mouse sull'elemento cui l'attributo è associato.
Occorre prestare attenzione al fatto che qualche browser visualizza come tooltip per le immagini il testo alternativo ad esse associato (se presente); nel caso venga inserita qualche immagine che ha sia l'attributo alt che l'attributo title, è quest'ultimo che viene preso in considerazione.
Nell'esempio seguente viene usato l'attributo title associato ad una immagine e in figura 2.58 viene mostrato l'effetto ottenuto.
|
|
Figura 2.58. |
