Dispensa n. 7 Primo avviso ai naviganti: ipertesti e siti web

Paolo Monella, Laboratorio di Informatica Specialistica per Lettere Moderne, A.A. 2007/08

Cos'è un sito web veramente

Cos'è, alla fine, questo "ipertesto"?

...è quello che state leggendo! Ovvero un testo costituito di più nodi collegati tra di loro da link (o hyperlink). L'esempio più noto di ipertesto è un sito web, in cui i nodi sono le singole, e i link sono i collegamenti cliccabili. Se ci riflettiamo, l'interno Internet è un enorme ipertesto...!

I singoli nodi di un ipertesto possono dunque essere costituiti da singoli file, ad es. file di testo codificati con il markup html: ricordate? <em>testo</em> significa che la parola "testo" va rappresentata con em(phasis), cioè in corsivo; <u> significa u(nderlined)/sottolineato; <p> significa paragrafo etc.

Immaginiamo dunque un ipertesto costituito da pagine (formattate con il linguaggio di markup) html, cioè "pagine html". Questi nodi/pagine sono collegati tra di loro tramite hyperlink. L'intero ipertesto (cioé, nel nostro caso, i file che lo compongono) può essere memorizzato su qualunque supporto: una cartella del nostro hard disk o della nostra penna usb; o un intero CD-Rom, come succede per gli ipertesti commerciali (ad es. un'enciclopedia multimediale) venduti spesso in allegato ai giornali. Oppure, lo possiamo salvare su una cartella di un computer "server", e possiamo istruire il computer "server" a rendere la cartella visibile a tutti i visitatori che si colleghino a quel computer via internet... et voilà: un "sito web" non è altro che questo!

Com'è fatto un sito web "dentro"

Un sito web può essere definito semplicemente come una cartella salvata su un computer detto "server" e visibile dall'esterno di quel computer, via internet. Questa cartella, ovviamente, contiene dei file, e anche delle sottocartelle. Sbirciamo dentro un sito vero (uno dei miei): Yahoo Geocities è uno dei tanti fornitori di spazio web gratuito per costruire il proprio sito.

Quando inseriamo nel nostro browser l'indirizzo di una cartella, senza specificare il file preciso che vogliamo aprire, il nostro browser controlla se essa contiene un file-indice chiamato "index.html": se c'è, lo apre.

Riassumendo...

...un sito web non è altro che un ipertesto

• costituito di pagine html collegate tra di loro da hyperlink
• salvato su una cartella (su uno "spazio web") su un "server". Il server permette ai computer che si colleghino ad esso via internet di accedere alla cartella leggendo i files in essa contenuti.

Un po' di HTML

HTML, cioé HyperText Markup Language. Abbiamo visto come questo markup language nasca specificamente per marcare ipertesti, e sia diventuto ben presto l ostandard per le pagine web.

Terminologia di base

Tutto il metatesto all'interno di un documento HTML è contenuto tra parentesi uncinate < >. Ogni porzione di metatesto racchiusa tra parentesi uncinate è detta tag (coda, etichetta); ad esempio, <p> (che indica l'inizio di un paragrafo) è un tag.

La porzione di testo compresa tra un tag di apertura (ad esempio <p>) e uno di chiusura (ad esempio </p>) è detta elemento. Rimanendo al nostro esempio, un elemento "paragrafo" è introdotto da un tag di apertura p<p> e chiuso da un tag di chiusura </p>. Ecco come apparirà all'interno del file HTML:

<p>Io sono un elemento paragrafo. Ho un inizio e una fine, e contengo riflessioni assai profonde.</p>

Dentro un tag

Ogni tag, all'interno delle parentesi uncinate, comprende:

• il nome dell'elemento (ad es. <a href="http://www.unipa.it">)
• gli eventuali attributi dell'elemento (ad es. <a href="http://www.unipa.it">); laddove href è l'attributo, e http://www.unipa.it, racchiuso tra virgolette doppie, è il valore dell'attributo.

Gerarchia

Un elemento può includerne altri al suo interno: ad esempio, tenendo presente che <i> significa italic, cioé corsivo, va da sè che un elemento <p> può includerne molti <i>, in quanto un paragrafo può includere porzioni di testo corsivo.

Anzi, una pagina HTML ha una sua ben precisa gerarchia interna di elementi fondamentali. Eccola:

 <html>

    <head>
      ...
    </head>

    <body>
      ...
    </body>
 </html>

Laddove html indica l'intero testo HTML, e include tutto il resto; head contiene lo header, ovvero le informazioni sul documento stesso (che non verranno visualizzate a schermo dal browser); e body comprende, appunto, il "corpo" del documento stesso (cioé tutto il testo che andrà visualizzato), e a sua volta include titoli (<h1> <h2> etc.), paragrafi (<p>), elenchi puntati (<ul>) o numerati (<ol>) che a loro volta includono le varie righe (inglese lines: <li>), link (inglese anchors: <a>), eccetera.

Per saperne di più

Una buona guida di partenza per imparare facilmente l'HTML ed altri linguaggi di markup o di programmazione è il sito www.html.it, e in particolare, per l'HTML, questa pagina. Tra parentesi, subito dopo aver imparato l'HTML, consiglio di passare all'XHML, che è un linguaggio ancora più standard e con ottime prospettive di sviluppo per il futuro.

Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.