EH - Esposizione interattiva di xHTML etc. Panoramica Indice pagine Indice esempi
Il linguaggio HTML
Organizzazione di semplici
testi Differenziazioni tipografiche
HTML, acronimo di HyperText Markup Language, è stato il primo importante linguaggio per la costruzione di documenti ipertestuali, cioè di testi destinati ad essere utilizzati interattivamente sotto il controllo di un programma che ne facilita la lettura non sequenziale, in genere attraverso lo schermo di un computer.
Questo linguaggio, ideato da Tim Berners-Lee intorno al 1991, nel giro di pochi anni ha assunto grandissima importanza, in quanto sopra di esso e sopra sue varianti si basa la maggior parte del materiale accessibile su WWW, la componente attualmente più efficace, articolata, estesa e frequentata di Internet.
Un documento HTML è costituito da un file contenente un testo composto mediante caratteri ASCII che, nella situazione più semplice, risiede sul disco di un computer e viene utilizzato richiedendone la visualizzazione sullo schermo dello stesso computer per opera di un opportuno programma visore (viewer). Da alcuni anni il visore piu` utilizzato e` il browser Internet Explorer di Microsoft; due browsers piuttosto diffusi sono Navigator di Netscape, dal 1994 al 1999 e` stato il piu` popolare, e Mozilla, simile al precedente e destinato a sostituirlo; altri browsers interessanti sono Opera, Konqueror ed Amaya.
Gli odierni browsers sono programmi molto complessi e ricchi di prestazioni e servizi e sono gli strumenti più utilizzati per ``navigare`` sul World Wide Web, cioè per operare su documenti HTML e su documenti loro collegati disponibili sui computers costituenti i nodi della rete Internet, documenti dotati di opportuni collegamenti che permettono di spostarsi agevolmente su di essi.
Quando si parla di HTML è dunque necessario distinguere fra i files sorgente redatti secondo le regole di tale linguaggio, files fortemente strutturati che possono essere costituiti solo da caratteri ASCII di base, e le pagine consultabili interattivamente su schermo presentate da un browser o da un altro visore a partire dai suddetti files.
I files sorgente sono caratterizzati dalle estensioni .html o .htm (del tutto equivalenti) e possono essere prodotti in vari modi.
Possono essere redatti con un plain ASCII text editor come Notepad, Write, Wordpad, VI, ... . In questo caso l'autore si deve preoccupare di tutti i dettagli del testo e deve avere una certa padronanza del linguaggio.
Possono essere redatti con un source editor, cioè con un editor di files ASCII che tiene conto della struttura del tipo di testo che controlla (MultiEdit, Xvile, EMACS, ...). Anche in questo caso l'autore si deve preoccupare dei dettagli del testo sorgente, ma viene aiutato nel riconoscimento della sua struttura.
Le pagine Web possono essere prodotte efficientemente servendosi di un Web editor (GoLive di Adobe, Dreamweaver di Macromedia, HoTMetaL di Softquad, Front Page di Microsoft, Visual Page di Symantec, Home Page di Claris, Composer di Netscape, ...), programma che permette di costruire le pagine con una tecnica interattiva del genere WYSIWYG (What You See Is What You Get). Operando in modo WYSIWYG si compone un documento vedendolo in una forma poco diversa da quelle secondo la quale sarà visualizzato dai vari browsers ed introducendo costrutti un po' complessi come collegamenti ipertestuali e tabelle mediante manovre controllabili da appositi pulsanti molto più rapidamente che scrivendo tutti i dettagli. Con un Web editor si possono produrre rapidamente pagine semplici evitando uno studio preliminare approfondito delle caratteristiche del linguaggio, ma procedendo in modo più empirico, anche per tentativi, aiutati dalla interfaccia interattiva utilizzata. Una interfaccia WYSIWYG però non consente tutte le possibilità ed in genere induce a seguire la sua particolare visione di HTML. I migliori Web editors permettono però di alternare facilmente il modo WYSIWYG e gli interventi diretti sul testo sorgente con un loro source editor. Inoltre in genere consentono di far intervenire sul file .html un browser e spesso consentono di operare anche su opportune presentazioni strutturate del testo strutturato.
Per produrre files HTML possono essere utilizzati text editors e programmi di produttivita` sviluppati prima o indipendentemente dal WWW e che a partire dal 1997 si sono arricchiti di funzionalità di esportazione dei loro documenti in versioni HTML. A questo proposito citiamo i text editors Word di Microsoft e Wordperfect di Corel, gli spreadsheets come Excel di Microsoft e Quattro di Corel, i programmi per basi di dati come FileMaker, i sistemi computazionali come Mathematica 5, Maple 7 e MathCad 2000. Chi si rivolge ad uno di questi prodotti riesce a riutilizzare uno strumento appreso ed utilizzato per altri scopi, spesso operando con buone modalità WYSIWYG, ed ha buone possibilita` di collocare sul WWW materiali preesistenti.
A questo proposito occorre osservare che il recupero del patrimonio di documenti digitali può essere molto importante, sia per i singoli che per le aziende e le istituzioni, a causa della tendenza che ormai si sta imponendo di servirsi del Web come mezzo di comunicazione primario. I programmi di produttivita`, da un lato possono essere ben noti, dall'altro offrono meno possibilità di controllo ipertestuale di un buon Web editor.
Possono inoltre essere utilizzati convertitori verso HTML, programmi che trasformano in ipertesti per il Web files predisposti seguendo regole particolari. Questi possono essere documenti redatti per scopi diversi dalla pubblicazione per il Web, in particolare redatti per la stampa (TeX), oppure documenti destinati al Web ma compilati con un lavoro sensibilmente meno faticoso di quello richiesto dalla redazione dei documenti HTML definitivi.
Infine ricordiamo che vengono sviluppati programmi volti appositamente alla costruzione automatica di pagine Web, in genere complesse, a partire da archivi e raccolte di dati che possono essere compilati con una certa facilità, preoccupandosi solo dei contenuti delle informazioni e non della loro presentazione.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Il termine HyperText Markup Language si può tradurre con ``linguaggio a marcatori per ipertesti``. Si tratta infatti di un linguaggio artificiale finalizzato alla redazione di documenti ipertestuali che si serve sistematicamente di marcatori, cioè di scritture convenzionali che si inseriscono nel documento per organizzare brani di materiale da presentare (frasi discorsive, titoli, elenchi, tabelle, disegni, immagini, suoni, ...) specificando come tali brani devono essere disposti nella pagina che costituisce la presentazione del documento per lo schermo.
Le pagine HTML, a causa della presenza dei marcatori, costituiscono dei documenti fortemente strutturati. La struttura di un documento HTML è descrivibile con un albero (più correttamente si dovrebbe usare il termine ``arborescenza distesa``). Infatti in un documento si individuano sistematicamente dei nidi di diversi livelli, cioè porzioni chiaramente delimitate e con la possibilita` di essere contenute interamente in nidi più estesi e quella di contenere a loro volta uno o più nidi meno estesi. Questi nidi sono chiamati specificamente elementi.
Distinguiamo tre generi di elementi. I piu` frequenti e complessi sono costituiti da una terna di stringhe: un tag iniziale, una stringa contenuto ed un tag finale; pochi elementi presentano solo un tag iniziale ed uno finale, sono privi di contenuto; i due tags di un elemento dei primi due generi di dicono tags coniugati; gli elementi del terzo genere si riducono ad un solo tag detto tag vuoto o tag singolo.
I tags sono scritture strutturali delimitate dalle parentesi angolate ``<`` e ``>``. I tags iniziali e singoli dopo la ``<`` presentano una parola chiave formata solo da lettere che caratterizza il tipo dell'elemento. Dopo la parola chiave possono comparire una o piu` assegnazioni di attributo della forma
nomeAttributo = valoreAttributo
Con queste assegnazioni si determinano le caratteristiche dell'elemento: per le caratteristiche di molti elementi vi sono ampie possibilita` di scelta.
Un tag finale tra le parentesi angolate presenta solo la parola chiave che compare nel corrispondente tag iniziale preceduta da un segno ``/``.
Il contenuto di un elemento del primo genere puo` consistere in una scrittura, in un elemento o in una sequenza di elementi.
L'intero documento HTML è un nido delimitato dai tags <html> e </html> ed a sua volta è costituito da due nidi successivi, il primo delimitato da <head> e </head> ed il secondo delimitato da <body> e </body>. Al nido corrispondente all'intero documento assegnamo convenzionalmente il livello 1 e ai nidi head e body il livello 2. Nella frase precedente abbiamo introdotto la convenzione di individuare il tipo di un elemento con la stringa nella fonte Arial che caratterizza i suoi tags.
Gli elementi head dei diversi documenti sono relativamente semplici e abbastanza simili. In ogni head si trova un elemento title, delimitato dai tags <title> e </title>, che attribuisce al documento il suo titolo, stringa che ha lo scopo di presentarlo sinteticamente. Nella head si trovano altri elementi che descriveremo piu` oltre.
I corpi dei documenti, cioè i loro elementi body, possono invece essere molto diversi tra di loro, molto articolati e possono essere arricchiti da varie componenti scritte in uno dei linguaggi che possono essere ``ospitati`` da HTML. Nella presente introduzione presenteremo solo pochi semplici tipi di body.
Vi sono documenti prevalentemente discorsivi nel cui corpo si individuano successive sezioni che iniziano con una intestazione e sono costituite da successivi paragrafi.
Le intestazioni delle sezioni possono avere diverse evidenze: le intestazioni più evidenti sono racchiuse tra i tags <h1> e </h1>, quelle via via meno evidenti tra <h2> e </h2>, tra <h3> e </h3>, ... , tra <h7> e </h7>.
I paragrafi sono delimitati da <p> e </p>; quando il browser incontra il tag <p> effettua un salto a capo ed una spaziatura verticale.
All'interno di un paragrafo si possono avere richieste di salto a capo senza spaziatura verticale che si aggiunga all'interlinea: ciascuna di esse è espressa dal tag <br>. Questo tag si può inserire anche tra elementi come paragrafi ed intestazioni (e come gli elenchi e le tabelle che vedremio più oltre) per inserire spaziature verticali aggiuntive. Due linee separate da <br> sono distanziate come le linee di un paragrafo, meno di quanto lo sono l'ultima linea di un periodo e la prima del successivo.
Osserviamo che, contrariamente ai tags visti in precedenza che costituiscono coppie di tags coniugati che delimitano un loro contenuto, il tag <br> invece non possiede coniugato (e contenuto), ma è un cosiddetto tag vuoto o tag singolo.
Osserviamo che con i browsers ed i Web editors attualmente più diffusi per le parole chiave dei tags lettere maiuscole e minuscole sono equivalenti: invece di <body> si potrebbe scrivere <BoDy> o <BODY>. Qui utilizziamo prevalentemente lettere minuscole, in quanto il linguaggio XHTML, la recente variante più evoluta di HTML che si sta affiancando ad HTML e prevedibilmente lo rimpiazzerà nel giro di qualche anno, distingue fra minuscole e maiuscole e per i molti tags ereditati da HTML chiede solo lettere minuscole. Purtroppo la maggior parte dei Web editors in uso nel 2001 preferisce usare le maiuscole.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Si possono redigere testi nei quali tutte le frasi sono scritte usando un'unico tipo di caratteri. Appena possibile però si cerca di dare maggiore evidenza tipografica alle porzioni del testo che per qualche ragione rivestono maggiore importanza, a cominciare dalle intestazioni di paragrafi e capitoli. Evidentemente sono molte le situazioni nelle quali risulta utile presentare parti di un documento (caratteri, gruppi di parole, frasi, paragrafi o intere sezioni) con caratteristiche visive diversificate come le seguenti:
corpo più grande del normale,
corpo meno grande del normale,
colori diversi ,
stile dei caratteri (grassetto, corsivo, monospazio, ...)
ornamenti (sottolineato, barrato)
fonti diverse.
Con differenziazioni tipografiche come le precedenti si riesce a dare più evidenza a certe porzioni del testo e a suggerire i diversi ruoli che svolgono certe scritture (citazioni, esclamazioni, termini tecnici o in lingua straniera, personaggi, scritture che in un elenco posseggono importanza maggiore, ...). Questi brani tipograficamente differenziati si possono controllare in vari modi. Ora consideriamo solo il modo più semplice consistente nel delimitare ogni porzione con una o anche più coppie di opportuni tags coniugati, cominciando a presentare le linee del testo sorgente che ha fornito le 5 linee precedenti:
<p><font size="+1">corpo più grande del normale,</font> <p><font size="-1">corpo più piccolo del normale,</font> <br><font color="#991111">colori</font> <font color="#991111">diversi,</font> <br>stile dei caratteri (<b>grassetto<b>, <i>corsivo</i>, <tt>monospazio</tt>, ...) <br>ornamenti (<u>sottolineato</u>, <strike>barrato</strike>) <br><font face="Exotc350 Lt BT">fonti</font> <font face="Arial">diverse.</font></p>
Presentiamo ora i cosiddetti elementi tipografici fisici i, b, u, tt e strike.
Si ottiene questo brano in corsivo inserendo nel file sorgente la scrittura
<i>brano in corsivo</i>
Si ottiene questo brano in grassetto o neretto inserendo nel file sorgente la scrittura
<b>brano in grassetto o neretto<b>
Si ottengono le seguenti parole sottolineate inserendo nel file sorgente la scrittura
<u>parole sottolineate</u>
Si ottengono scritture monospaziate inserendo nel file sorgente richieste come
<tt>scritture monospaziate</tt>
Una scrittura barrata non è solo una stranezza,
come si potrebbe pensare a prima vista: essa può servire per presentare
brani che, in seguito ad una revisione del testo, sono stati cancellati.
Comunque la precedente locuzione si ottiene scrivendo
<strike>scrittura barrata</strike>
Indice pagine - inizio pagina - sez. prec. - sez. succ.
HTML dispone di due elementi che comportano la presentazione del loro contenuto rispettivamente nelle posizioni ad esponente e a deponente.
La scrittura H2O si ottiene ponendo nel sorgente
H<sub>2</sub>O .
Il polinomio generico di secondo grado ax2+bx+c si richiede scrivendo
ax<sup>2</sup>+bx+c .
Si può osservare che la precedente formula matematica è inferiore ai migliori standards di tipografia matematica: in particolare le lettere esprimenti variabili e parametri sono presentate preferibilmente in corsivo. La formula precedente andrebbe più opportunamente presentata come ax2+bx+c scrivendo nel sorgente
<i>ax</i><sup>2</sup>+<i>bx</i>+<i>c</i> .
Gli estimatori della bella stampa di testi matematici, in particolare gli utenti di un sistema di "alta tipografia" come TEX, (T<sub>E</sub>X) possono storcere il naso davanti ad una formula come la precedente, in quanto la collocazione delle varie lettere è sicuramente meno curata di quella che si ha in una pagina matematica ben stampata; inoltre la richiesta espressa in HTML risulta notevolmente pesante. Si deve anche osservare che formule più complicate delle precedenti sono pesantissime o impossibili da ottenere con il solo HTML. In effetti HTML è prevalentemente un linguaggio per la presentazione su schermo tramite Internet ed ha poco senso metterlo in competizione con TEX, sistema finalizzato alla presentazione su carta, supporto di informazioni con un potere risolutore sensibilmente maggiore di quello di uno schermo (da 300 a varie migliaia di pixels per pollice sulla carta contro circa 100 pixels per pollice sullo schermo), ma evidentemente statico, privo di possibilita` dinamiche.
I migliori sistemi per la stampa di formule consentono di effettuare scelte molto fini per la collocazione dei segni tipografici nell'area rettangolare nella quale si dispone una formula. Per questa operazione HTML ha possibilita` piuttosto limitate. In particolare, se non si adottano particolari accorgimenti, le parole di un periodo vengono separate solo da uno spazio. Si possono avere spazi maggiori solo servendosi di tabelle (v.o.), all'interno di elementi pre (v.o.) ed inserendo tra due parole di un normale blocco testuale la sequenza escape (= non breakable space), scrittura che richiede le presenza di una spaziatura unitaria. Questa richiesta in particolare ha consentito di separare dai contesti le precedenti scritture del binomio generico: la richiesta dell'ultima si indica piu` completamente come:
come <i>ax</i><sup>2</sup>+<i>bx</i>+<i>c</i> scrivendo .
Indice pagine - inizio pagina - sez. prec. - sez. succ.
In molti documenti può essere utile inserire complessi di dati organizzati in elenchi (lists) e tabelle (tables). Nelle pagine HTML si possono inserire agevolmente vari tipi di queste strutture di presentazione relativamente semplici e di dare loro caratteristiche visive adeguate.
Gli elenchi sono sequenze di stringhe (sigle, parole, locuzioni, frasi, ...) che vengono chiamate items e che sono presentate in gruppi di linee separate.
Vediamo qui le principali possibilita` per gli elenchi, rinviando per ulteriori informazioni a pagine come eheli00.htm, eheli01.htm ed alla Sinossi tematica.
HTML permette di organizzare tre tipi di elenchi i cui items vengono evidenziati con diversi accorgimenti grafici. Inoltre si possono redigere elenchi con items costituiti da altri elenchi; per queste strutture di presentazione si possono usare termini gergali come liste di sottoliste, sottosottoliste etc.
Si possono avere elenchi semplici di items evidenziati da segni iniziali come pallini e quadratini, elenchi numerati formati da items contraddistinti da numeri interi o da altri contrassegni progressivi ed elenchi di definizioni con items costituiti da due stringhe, tipicamente un termine da definire ed una sua spiegazione oppure una locuzione in una lingua e sue traduzioni in un'altra lingua o in piu` altre lingue.
Ogni elenco semplice è delimitato da una coppia di tags <ul> ed </ul>; ogni elenco numerato da <ol> e </ol>; ogni elenco di definizioni dai tags <dl> e </dl> . Ogni item di un elenco semplice o numerato compare tra i tags <li> e </li>.
In seguito alla seguente richiesta
<ul> <li>tetraedro</li> <li>cubo</li> <li>ottaedro</li> <li> dodecaedro</li> <li> icosaedro</li> </ul>
viene presentato l'elenco dei cinque solidi platonici preceduti da un pallino ed allineati sulla sinistra:
Gli elenchi semplici come il precedente vengono chiamati unordered lists; da questo termine deriva il tag ul; più chiaramente si potrebbero chiamare elenchi non numerati.
Si hanno poi gli elenchi numerati detti ordered lists e caratterizzati dai tags con parola chiave ol, i cui items vengono presentati preceduti da un numero progressivo. Una richiesta di elenco numerato è la seguente:
<ol> <li>idrogeno</li> <li>elio</li> <li>litio</li> <li>berillio</li> <li>boro</li> <li>carbonio</li> <li>azoto</li> <li>ossigeno</li> <li>fluoro</li> <li>neon</li> </ol>
Quando presenta questo brano sorgente, il browser effettua l'inserimento del numero atomico degli elementi chimici presentati:
Un semplice esempio di elenchi di definizioni (caratterizzato da marcato autoriferimento) è ottenuto con il seguente brano sorgente:
<dl> <dt> lista ul </dt><dd>elenca di items non numerata</dd> <dt> lista ol </dt><dd>elenca di items numerata</dd> <dt> lista dl </dt><dd>elenca di termini e definizioni</dd> </dl>
e viene presentato dal browser come:
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Le tabelle sono schieramenti rettangolari di caselle, chiamate piu` specificamente celle, organizzate in righe orizzontali e colonne verticali. Ogni richiesta di tabella viene delimitata da una coppia di tags del tipo <table ...> e </table>; il contenuto di questo elemento e` formato da una sequenza di elementi riga delimitati da coppie di tags <tr> e </tr>; ciascun elemento riga dovrebbe presentare un ugual numero di elementi cella, ciascuno corrispondente ad una colonna della tabella e delimitato da una coppia di tage <td> e </td>.
Presentiamo un esempio di semplice tabella con il corrispondente brano di testo sorgente.
| Cella 1,1 | Cella 1,2 | Cella 1,3 |
| Cella 2,1 | Cella 2,2 | Cella 2,3 |
| Cella 3,1 | Cella 3,2 | Cella 3,3 |
| Cella 4,1 | Cella 4,2 | Cella 4,3 |
<table>
<tr>
<td> Cella 1,1 </td>
<td> Cella 1,2 </td>
<td> Cella 1,3 </td>
</tr>
<tr>
<td> Cella 2,1 </td>
<td> Cella 2,2 </td>
<td> Cella 2,3 </td>
</tr>
<tr>
<td> Cella 3,1 </td>
<td> Cella 3,2 </td>
<td> Cella 3,3 </td>
</tr>
<tr>
<td> Cella 4,1 </td>
<td> Cella 4,2 </td>
<td> Cella 4,3 </td>
</tr>
</table> Osserviamo che con i browsers attuali molti tags finali come </p> ed </li> non sono tassativi, in quanto possono essere dedotti dalla presenza di successivi tags iniziali; lo standard XHTML, nella sua versione stretta, richiede invece la loro presenza e molti Web editors recenti aiutano ad inserirli: qui cercheremo di non dimenticarli.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Una delle caratteristiche più attraenti del Web è quella di rendere semplice l'immissione nelle sue pagine di immagini e di altri oggetti multimediali come suoni, animazioni e dinamismi interattivi e quindi di facilitare la circolazione nella Rete globale di questi materiali informativi spesso gradevoli ed attraenti, talora ricchi di significato (spesso per.
Nelle pagine HTML si possono inserire immagini fornite da files che seguono uno dei moltissimi formati grafici accettati da HTML e che possono essere costruiti servendosi di programmi e sistemi di larga diffusione (v. Grafica per il Web). In particolare ricordiamo i formati GIF, JPEG e PNG. Un file con una immagine e` da considerare una risorsa accessibile da parte del browser: quindi deve trovarsi su un disco del computer usato dall'utente, oppure deve essere accessibile su Internet attraverso la sua URL, il suo indirizzo.
Per inserire un'immagine in un documento HTML occorre servirsi di un tag singolo img.
Nella forma più semplice un tale tag contiene solo l'indicazione del file che fornisce l'immagine. Ad es.
<img src="veduta_generale.gif">
comporta l'inserimento nella pagina dell'immagine ricavata da un file che, come suggerisce il nome, potrebbe essere stato ricavato da una fotografia di un intero edificio.
Una richiesta di inserimento di un'immagine prelevata da Internet è la seguente.
<img src="http://www.worldatlas.org/iceland.gif">
In un elemento img si possono avere vari attributi, oltre all'indispensabile src. Con una richiesta della forma
<img src="url" alt="testo che sostituisce l'immagine">
si fà in modo che un browser non capace di interpretare il file che registra l'immagine corrispondente al valore dell'attributo src, presenti al lettore una scrittura che gli può dare una certa idea della figura che non può essere mostrata.
Occorre osservare che le immagini attualmente più frequenti sul Web costituiscono ancora risorse piuttosto impegnative, sia per la memoria richiesta per la loro registrazione sul computer dell'utente, sia soprattutto per il tempo richiesto per il loro caricamento attraverso la Rete. Al fine di evitare spreco di tempo e di spazio potrebbe essere opportuno utilizzare un browser privo della funzionalità di caricamento dei files immagine o operante con tale funzionalità disabilitata .
Limitiamoci infine a segnalare che nelle pagine Web oggi si possono inserire anche immagini definite con un linguaggio apposito, SVG, formate da parti con le quali si puo` interagire separatamente e che possono essere animate. Inoltre nelle pagine per il Web si possono inserire registrazioni video, animazioni complesse, registrazioni audio e dinamismi controllati da appositi linguaggi e sistemi; tutti questi eventi multimediali si possono controllare interattivamente e sincronizzare con un altro apposito linguaggio, SMIL.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Elementi essenziali dei documenti HTML sono quelli che consentono di organizzare collegamenti ipertestuali, cioè vie attraverso cui l'utente di un browser può decidere di muoversi da un punto ad un altro del complesso dei documenti che sta consultando.
Gli elementi che caratterizzano la natura ipertestuale dei documenti HTML sono chiamati anchors, ancore; qui preferiamo chiamarli agganci. Essi hanno il compito di definire le posizioni di uno stesso documento HTML o di diversi documenti tra i quali si stabiliscono i collegamenti.
Si devono distinguere gli elementi che chiamiamo ancore href, agganci origine - bersaglio o più semplicemente agganci origine, da quelli che chiamiamo ancore name o agganci bersaglio. Un collegamento HTML va da un'aggancio origine ad un aggancio bersaglio: più precisamente va all'aggancio bersaglio che viene indicato all'interno dell'aggancio origine. Esso consente a chi legge pagine HTML di far comparire sul proprio schermo, in luogo dalla videata contenente l'aggancio origine, la videata, dello stesso documento o di documento diverso, contenente l'aggancio bersaglio. Una tale manovra viene descritta significativamente con la metafora del salto dell'utente da un punto di un documento HTML ad un altro punto dello stesso documento o di un diverso documento.
Ogni aggancio origine definisce un brano cliccabile o area attivabile della pagina che il browser fa corrispondere al file HTML in esame. Questo brano spesso è una scritta opportunamente evidenziata (per default, cioè in mancanza di richieste esplicite alternative, è una scritta in blu sottolineata); altre volte si tratta di una icona che tendenzialmente suggerisce il contenuto della videata alla quale consente di saltare. Portando il cursore sul brano cliccabile il cursore cambia aspetto e, con le pagine Web più evolute, si ha la comparsa di una finestrella che segnala che il cursore si trova sopra un'area attiva e che fornisce qualche indicazione sulla videata bersaglio. Quando si clicca sul brano, cioè quando si preme il tasto di sinistra del mouse, si avvia il processo di salto alla videata bersaglio. L'effettiva presentazione della videata bersaglio viene attuata rapidamente se si passa ad un altro punto dello stesso documento, ad un altro documento già disponibile sul computer dell'utente o ad un documento rapidamente accessibile in rete. Il salto alla nuova videata richiede invece del tempo quando comporta un difficoltoso recupero dalla rete del documento del bersaglio, vuoi per la (momentanea o cronica) lentezza dei collegamenti, vuoi per l'estensione del documento da scaricare sul computer dell'utente. Il salto può anche risultare inattuabile o per cadute di qualche collegamento della rete, o per la non disponibilità del server che dovrebbe fornire il documento, o perché il documento richiesto e/o lo stesso server che lo rendeva disponibile non sono più accessibili nella Rete.
Operando con gli attuali browsers risulta facile registrare l'indirizzo Internet del documento HTML che si sta leggendo come bookmark, cioè come segnalibro, in un archivio ad albero mantenuta dal browser. Successivamente l'utente sarà in grado di recuperare il documento relativo al bookmark con pochi semplici clic, ammesso che risulti agevole ritrovare nell'albero dei bookmarks l'indicazione del documento (albero in ordine e indicazione ancora autoesplicativa) e che la relativa pagina non sia scomparsa dal Web.
Vediamo alcuni esempi di agganci origine
<a href="http://www.emis.de/projects/EULER/">Per il progetto clicca qui.</a>
Il bersaglio di questa ancora origine è il documento
contenuto nel file avente come URL, Uniform Resource Locator,
cioè come indirizzo simbolico Internet:
`` http://www.emis.de/projects/EULER/`` .
Il suo brano cliccabile contiene la scritta invito: ``
Per il progetto clicca qui `` .
<a href="elementi.htm">Tavola degli elementi/<a>
Ora il bersaglio è il file la cui specificazione è ``elementi.htm``. Questo file potrebbe essere semplicemente nel direttorio del computer dell'utente in cui si trova anche il file del documento contenente l'elemento in esame.
Può però verificasi una situazione più complessa: se nella head del documento attuale si è inserito un elemento come il seguente
<base ``http://www.assochimici.it/riferimenti/``>
il bersaglio è il file avente come URL
``http://www.assochimici.it/riferimenti/elementi.htm ``.
L'elemento base può essere utile in due situazioni. Se in un gruppo di documenti si trovano numerosi rinvii a pagine Web di uno stesso sito, l'elemento base pemette di avere indirizzi più concisi e meno proni agli errori ortografici. Se poi queste pagine si vogliono spostare da un sito ad un altro, la presenza di una base permette di attuare lo spostamento con la semplice modifica di tale elemento ed evita che si debbano cambiare tutti i singoli agganci origine.
In un lungo testo espositivo può essere utile porre agganci bersaglio all'inizio delle varie sezioni nelle quali si suddivide l'esposizione. Ad es. si potrebbe avere un file sorgente con una struttura complessiva determinata dagli elementi principali seguenti:
<html> <title>Aspetti della teoria dei grafi</title> </body> <a name="inizio"></a> <h2>Aspetti della teoria dei grafi</h2> <p><a name="indice"></a><p><b>Indice<b></p> <p><a href="#parag1">1. Nozioni di base</a></p> <p><a href="#parag2">2. Cammini, connessione e raggiungibilità</a></p> <p><a href="#parag3">3. Problemi di planarita`</a></p> <p><a href="#parag4">4. Problemi di copertura</a></p> <p><a href="#parag5">5. Panoramica delle applicazioni</a></p> <p><a href="#biblio">Bibliografia</a></p> <h3><a name="parag1"></a>1. Nozioni di base<h3> ...... <h3><a name="parag2"></a>2. Cammini, connessione e raggiungibilita`</h3> ...... <p align="right"><a href="#indice">Torna all'indice</a></p> <h3><a name="parag3"></a>3. Problemi di planarita`</h3> ...... <p align="right"><a href="#indice">Torna all'indice</a></p> <h3><a name="parag4"></a><h3>4. Problemi di copertura</h3> ...... <p align="right"><a href="#indice">Torna all'indice</a></p> <h3><a name="parag5></a><h3>5. Panoramica delle applicazioni</h3> ...... <p align="right"><a href="#indice">Torna all'indice</a></p> <h3><a name="biblio"></a><h3>Bibliografia</h3> ...... <p align="right"><a href="#indice">Torna all'indice</a></p> </body> </html>
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Le versioni più recenti di HTML e del suo successore designato XHTML spingono a redigere documenti per i quali sia chiara la distinzione fra descrizione del contenuto e descrizione dell'aspetto: in linea di massima i documenti nei quali si rispetta questa distinzione sono controllabili e riutilizzabili più agevolmente. Questa distinzione è iniziata con la possibilità di richiedere cambiamenti di stile tipografico di brani discorsivi, oltre che con richieste basate sulle caratteristiche fisiche (elementi i, b, u, tt, strike), anche attraverso richieste che fanno riferimento al significato e al ruolo che si attribuisce ai brani.
Spesso un autore vuole focalizzare l'attenzione del lettore sopra un determinato punto del suo discorso. Questo può essere fatto con un elemento em (enfasi) avente la forma
<em> testo da enfatizzare </em> .
Volendo dare una enfasi particolare ad un termine o ad una osservazione, conviene far uso di un elemento strong, forte enfasi,
<strong> testo da enfatizzare fortemente </strong> .
In genere i browsers rendono un brano em con caratteri corsivi e gli elementi strong con caratteri in grassetto. Quindi queste due richieste equivalgono, rispettivamente, a quelle degli elementi "fisici" i e b.
Il fatto di servirsi delle richieste contenutistiche consente di ritrovare facilmente nel testo sorgente i brani che si sono voluti enfatizzare o enfatizzare fortemente.
Vediamo ora gli elementi HTML che consentono di individuare in un file sorgente altre informazioni di natura particolare. Per inserire un indirizzo è consigliabile servirsi dell'elemento della forma seguente:
<address> informazione di contatto </address> .
Il testo di questo elemento in genere è presentato in grassetto corsivo e può articolarsi in diverse linee.
Per inserire una citazione fedele di un brano pubblicato in precedenza conviene utilizzare un elemento della forma
<blockquote> citazione testuale </blockquote> .
Questo elemento comporta la presentazione del relativo brano con caratteri normali, ma in linee con estensione inferiore rispetto alle normali: blockquote quindi viene spesso utilizzato per porre in evidenza brani di contenuto particolare, indipendentemente dal fatto che costituiscono o meno citazioni di altri testi originali.
Per precisare il testo dal quale è stata tratta una citazione è opportuno servirsi di un elemento della forma
<cite> testo citato </cite> .
In genere il precedente elemento viene presentato con caratteri corsivi.
Quando si introduce un nuovo termine di particolare rilievo, può essere utile servirsi dell'elemento
<dfn> termine di nuova introduzione </dfn> .
Anche il testo di questo elemento è presentato, in genere, con caratteri corsivi.
Per presentare un brano di un programma è opportuno usare
<code> linee codificate </code> .
In un tale brano, inoltre, può essere opportuno individuare in modo specifico le variabili in gioco: per ciascuna di esse è consigliabile servirsi di elementi del tipo seguente:
<var> identificatore </var> .
Il testo delle linee di codice viene reso con caratteri monospazio, ottenibili con il tag fisico <tt>, ma gli identificatori delimitati dalla coppia di tags <var> e <var> sono presentati con caratteri corsivi.
Altri due elementi riguardano richieste di stile per le informazioni che il computer fornisce agli utenti e, viceversa, per le informazioni che gli utenti forniscono al computer battendole su una tastiera (keyboard). Essi hanno, rispettivamente, le seguenti forme:
<samp> testo di output </samp>
e
<kbd> testo per la tastiera </kbd> .
In genere il testo degli elementi samp è presentato con caratteri monospazio ed il testo dei kbd con caratteri monospazio in grassetto.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
Un esempio di semplice elemento pre.
Amor, ch'al cor gentil ratto s'apprende
prese costui della bella persona
che mi fu tolta; e il modo ancor m'offende.
Amor, ch'a nullo amato amar perdona
mi prese del costui piacer si` forte
che, come vedi, ancor non m'abbandona.
(Inf., V, 100 sgg.)
Esso porta alla presentazione delle sette linee comprese fra le due contenenti lo start-tag e l'end-tag utilizzando i caratteri monospaziati di default. Queste linee ricordano da vicino tipiche citazioni di brani poetici, anche se si servono di un solo tipo di caratteri, contrariamente a quanto accade nei migliori volumi di opere letterarie.
Quando un browser incontra un tag <pre>, procede a riprodurre le linee che incontra senza trascurare i blanks ripetuti e senza effettuare il cosiddetto word wrap, cioè senza introdurre i salti a capo che potrebbero essere richiesti da linee superiori all'ampiezza corrente della finestra del browser.
Osserviamo anche che un carattere newline che segue <pre> ed un newline che precede immediatamente </pre> vengono rimossi. Quindi una successiva terzina dell'episodio di Paolo e Francesca potrebbe essere richiesta dalla scrittura che segue.
<pre> Amor condusse noi ad una morte:
Caina attende chi vita ci spense.``
Queste parole da lor ci fur porte.</pre>
L'elemento pre consente di trasformare rapidamente in documenti HTML testi predisposti come file ASCII destinati a stampe di semplicissimo livello tipografico, cioè redatti curando semplicemente la collocazione dei caratteri ASCII nelle posizioni del file.
In particolare si possono usare elementi pre per inserire, in un documento, listati di programmi o altri brani redatti in un linguaggio per l'elaboratore.
Inoltre con elementi pre si possono ottenere facilmente liste con items evidenziati con segni come -- o *, oppure numerati ed indentati. Si possono avere anche tabelle con allineamenti e spaziature predisposte servendosi in modo elementare del text editor. Naturalmente negli elementi pre non si possono avere gli effetti tipografici e grafici degli elementi HTML riguardanti liste e tabelle e l'autore deve farsi carico di tutti i problemi di allineamento.
In linea di massima i tags pre risultano utili nella messa a punto di prime versioni di documenti che interessa rendere disponibili sul Web con tempestività; per versioni più curate sono da preferire le alternative come quelle offerte da elementi ol, dl e table.
Ricordiamo anche la possibilità di servirsi di elementi pre per i disegni della cosiddetta ASCII art e per i grafici del tipo rudimentale ma facile da ottenere con pochi mezzi che in un passato ormai remoto si facevano produrre dalle stampanti a caratteri monospaziati e che negli anni recenti sono stati ripresi per i messaggi di posta elettronica e per gli SMS.
* | Merry Christmas /|\ Felice navigazione //|\\ Buon Natale o | *
Occorre osservare che alcune componenti degli elementi pre possono essere presentate diversamente dai diversi browsers, in quanto questi, per varie scelte di presentazione possono assumere valori per default differenti.
In particolare è consigliabile non inserire caratteri tabs nelle linee di un elemento pre, in quanto i diversi browsers possono presentarle con spaziature diverse.
Indice pagine - inizio pagina - sez. prec. - sez. succ.
HTML consente di comporre molti tipi di tabelle, anche molto elaborate. Qui ne presentiamo i tipi di base e diamo alcuni semplici esempi.
Le tabelle più semplici sono costituite da successive righe costituite da celle incolonnate e con contenuti simili. Sia le celle che l'intera tabella possono presentare o meno una loro cornice.
Per gli esempi basta cliccare: Esempi di tabelle
Grazie alle indentazioni delle scritture, si individua facilmente la struttura a nidi dell'elemento delimitato dalla coppia di tags table. In esso si individuano 4 successivi elementi delimitati da coppie di tags tr riguardanti le 4 successive righe dalla tabella. In ogni elemento riga si trovano 3 elementi delimitati da coppie di tags td (table data) costituenti le successive celle. Ogni cella fornisce semplicemente una indicazione convenzionale della cella nella quale compaiono gli indici della riga e della colonna alle quali la cella appartiene.
Anche nelle scritture che richiedono tabelle possono essere evitati molti end-tags: tutti i </td> possono essere trascurati, in quanto dalla comparsa dei successivi tags <td> e <tr> si può dedurre chiaramente dove finisce il contenuto di ogni cella; analogamente possono essere risparmiati i tags </tr>, in quanto questi se presenti devono precedere tags <tr> o </table>.
In gran parte delle tabelle di interesse pratico le scritture delle celle di ogni colonna sono abbastanza simili, mentre nelle celle di due diverse colonne si possono avere scritture sensibilmente diverse. Questo accade nella tabella che potrebbe comparire in pagine di argomento storico (v. esempio).
I contenuti di tabelle con informazioni più differenziate possono richiedere precise intestazioni per le diverse colonne. Il linguaggio HTML consente di richiedere queste scritture esplicative con gli elementi delimitati dalla coppia di tags th (Table Heading). In un tale elemento in genere compaiono tante celle quante sono le colonne della tabella e ogni cella fornisce l'intestazione per la corrispondente colonna.
In molti casi potrebbe anche essere opportuno far comparire un titolo o una didascalia per l'intera tabella. Questo si ottiene con un elemento caption.
Nelle richieste di tabella viste in precedenza non compare alcun attributo: esse quindi vengono composte secondo i criteri detti di default, cioè criteri seguiti in mancanza di richieste alternative. Ad es. la scritta dell'elemento caption per default compare nella parte superiore della tabella. Se la si vuole nella parte inferiore si deve porre nello start-tag un attributo della forma seguente:
<caption align="bottom">testo </caption>
Altri attributi consentono di determinare caratteristiche quali: estensioni dell'intera tabella e delle sue celle, orli per le celle, posizionamenti orizzontali e verticali delle scritte nelle celle.
Scegliendo opportunamente altri attributi, inoltre, si possono richiedere tabelle organizzate in modi più elaborati di quelli prospettati dagli esempi precedenti (v. Integrazione sulle tabelle).
Queste possibilità più avanzate sono illustrate nelle due pagine di sinossi della presente esposizione: Sinossi alfabetica e Sinossi tematica
Indice pagine - inizio pagina - sez. prec.
In seguito ad una richiesta della forma
<img src="url" align="indicatoreDiPosizione">
dove indicatore di posizione puo` assumere uno dei valori
top, middle, bottom,
left e right,
si controlla la posizione
dell'area rettangolare nella quale viene collocata l'immagine.
In conseguenza della linea sorgente
<img src="url" align=top> allineamento TOP
si ottiene una presentazione schematizzabile come segue.
.------------------. allineamento TOP | | | | | | | | | | | | | | .------------------.
In conseguenza del comando
<img src="url" align=middle> Didascalia in posizione middle
si ottiene una presentazione del tipo
.------------------. | | | | | | | | Didascalia in posizione middle | | | | | | .------------------.
In conseguenza della richiesta
<img src="url" align="bottom"> il testo prosegue in basso.
Si ottiene una presentazione del tipo
.------------------. | | | | | | | | | | | | | | .------------------. il testo prosegue in basso
In conseguenza del testo HTML
<img src="photo.jpg" align="left">
Dall'immagine risulta
chiaro che la versione dell'imputato è insostenibile.
Si ottiene una presentazione del tipo
.------------------. Dall'immagine risulta chiaro | | che la versione dell'imputato | | è insostenibile. | | | | | | .------------------.
Il brano sorgente
<img src="image.gif" align="right">
La presentazione discorsiva prosegue nella parte sinistra della finestra, mentre l'immagine è collocata sulla destra.
Comporta una presentazione del tipo
La presentazione discorsiva prosegue .------------------.
nella parte sinistra della finestra, | |
mentre l'immagine è collocata sulla | |
destra. | |
| |
| |
| |
| |
.------------------.
A questo proposito occorre osservare che un'immagine costituisce un cosiddetto inserto inline nel documento. Quindi, per evitare effetti visivi poco estetici, per il testo che l'accompagna risulta necessario provvedere a spaziature ed a salti a capo.
Intorno al rettangolo contenente un'immagine è prevista una cosiddetta buffer zone, zona tampone priva di scritte le cui dimensioni sono stabilite per default, oppure sono determinate da attributi come quelli che compaiono nella seguente richiesta
<img src="quadro.gif" hspace="n.di pixels" vspace="n.di pixels">
In questo periodo ancora lo scaricamento di una immagine dalla Rete richiede spesso molto tempo e può portare disagi non trascurabili. In conseguenza di una richiesta del tipo
<img src="url" width="n.di pixels" height="n.di pixels">
si segnala al browser quanto spazio deve essere riservato all'immagine: in questo modo esso è messo in grado di procedere a caricare la parte discorsiva del documento e renderla disponibile al lettore, evitandogli il rischio di una attesa priva di informazioni che può diventare irritante o scoraggiante. L'immagine sarà presentata successivamente, oppure il lettore rinuncerà a prenderne visione, preferendo accontentarsi del testo che la accompagna. In mancanza delle precedenti indicazioni un browser potrebbe insistere nello scaricamento dell'immagine, con il rischio di causare una lunga attesa che potrebbe anche rivelarsi inutile.
Un'immagine può comparire in un aggancio origine di un collegamento ipertestuale ed in genere il browser la presenta aggiungendole un bordo del colore che contraddistingue gli agganci origine (tipicamente blu se il bersaglio non e` ancora stato visitato, viola dopo una visita). L'estensione per default di questo bordo è modificabile con richieste della forma
<img src="url" border="n.di pixels">