torna a medea

Risorse

Il computer e le prof
Consiglietti pratici per sopravvivere
a scuola
Quarta parte


testo e immagini: Paola Musarra

version française: version franšaise

al sommario

Le tabelle invisibili


Stiamo vivendo momenti sempre più difficili: instabilità ; precariato, commercializzazione del sapere...

Come affrontare una formazione in informatica?

Dopo aver spulciato attentamente ogni corso che vi propongono, dopo aver calcolato quanto tempo e quanto denaro vi porterà via, convincetevi che in questo campo ogni formazione può essere solo un'autoformazione.

Se davvero desiderate riferirvi al contesto nel quale operate (nazione, regione, città, quartiere, scuola, classe, alunni...), vi converrà impadronirvi dei codici, delle tecniche, per adattare con elasticità alle esigenze della vostra azione pedagogica i mezzi che la tecnologia vi mette a disposizione.

Il solo investimento davvero redditizio è la conoscenza.

Perché le tabelle?

A che servono le tabelle? E' semplice. A strutturare la pagina video. Una tabella vi permetterà infatti di disporre con eleganza tutti gli elementi (testi, immagini...) all'interno della finestra di visualizzazione.

Per il momento, voi conoscete solo due istruzioni per creare una struttura visiva: la divisione in paragrafi (<p ...> ... </p>) et l'a capo (<br>).

Aggiungiamo un'altra istruzione, con il suo tag di chiusura:
<center> ... </center>
L'avevate già incontrata all'interno dell'istruzione <p ...> : <p align="center"> (o anche: <div align="center"> con la chiusura </div>).

Questa istruzione, che dovrà essere inserita all'interno dei tag <body ...> ... </body>, vi permetterà di centrare la vostra tabella, che altrimenti sarà allineata (per difetto) a sinistra.

Adesso costruiremo una tabella che vi consentirà di visualizzare sullo schermo un testo abbastanza lungo, che sarà contenuto in una specie di scatola invisibile.



Esempio 1


In questo esempio, senza tabella, la scrittura va da un estremo all'altro della finestra di visualizzazione. E' una cosa abbastanza sgradevole, ancora frequente in Rete. Soprattutto con i grandi schermi, la lettura diventa difficile.

Esempio 2


Nell'Esempio 2 la pagina è più ariosa e la lettura più agevole: Il testo è contenuto in una tabella invisibile, centrata.

Il colore dei caratteri e la loro grandezza sono due fattori fondamentali per una corretta visualizzazione:

Esempio 3


Penso di avervi dato un'idea di quello che potete fare, se ne avete voglia. Ecco le istruzioni per costruire una semplice tabella:

<table...>
       <tr>
              <td...>
              ...............
              </td>
       </tr>
 </table>


E' tutto! Guardiamo da vicino le istruzioni:
  1. <table...> ... </table>
    L'istruzione <table> apre la tabella; a questa indispensabile introduzione corrisponde il tag di chiusura </table>.
    Sapete già che le istruzioni sono annidate: la prima ad essere aperta dovrà essere chiusa per ultima.
    Avete notato i puntini di sospensione nell'istruzione di apertura? Ciò significa che questo tag può essere completato da altri parametri riguardanti le dimensioni, il colore o l'immagine di sfondo, la cornice... Negli esempi 2 e 3 la larghezza (width) della tabella è indicata in percentuale rispetto alla finestra di visualizzazione:

    <table width=80%>

  2. <tr> ... </tr>
    Queste istruzioni (table row) marcano l'inizio e la fine di una fila orizzontale di dati.


  3. <td...> ... </td>
    Questi tag (table data) delimitano le celle, nelle quali potrete inserire tutti i dati che desiderate: testo, immagini... Le dimensioni della cella si adattano automaticamente al contenuto. All'interno di ogni fila orizzontale (tr) potete inserire più celle di dati; in questo caso bisognerà stare ben attenti nel calcolare le dimensioni della tabella. Ne riparleremo quando ci occuperemo di tabelle "visibili".
Per il momento, ci siamo accontentati di un solo <td> per fila.
Ne volete due? Forse ricorderete il gattino di Paola Rosati, che accoppieremo ai primi versi di un testo di Charles Baudelaire:

In questo esempio, la prima cella contiene il testo, la seconda l'immagine:

<tr><td>(texte)</td><td>(image)</td></tr>

Ecco la mia traduzione:
Vieni, bel gatto, sul cuore mio amoroso,
non sfoderar gli artigli
e lasciami tuffar nei tuoi begli occhi,
ove si unisce l'agata al metallo
          ...........    

Una precisazione: dal momento che le dimensioni della tabella sono indicate in percentuale (<table width=80%>), la visualizzazione dipenderà dalla definizione e dalle dimensioni dello schermo, che possono variare da un utente all'altro. Il testo quindi potrà "stirarsi" orizzontalmente oppure addensarsi al centro, pur rispettando il <br> alla fine di ogni verso.

D'altra parte, se utilizzate dei valori fissi espressi in pixel (il pixel è l'unità di misura di base, che corrisponde a un punto sullo schermo) per definire le dimensioni della tabella e delle celle, correte il rischio di far apparire in basso la sbarra di scorrimento orizzontale (orrore!) qualora il contenuto della pagina non entrasse integralmente nella finestra di visualizzazione, oppure di vedere la vostra tabella annegata in uno spazio enorme, o peggio ammucchiata tutta a sinistra, se non l'avete centrata.

Volete un consiglio? Abituatevi alla fluidità della vostra pagina Web, lasciatela respirare, giocate con le dimensioni e i colori per creare sorprese visive e scoprire i segreti di una mise en page elegante e armoniosa.

Biblio

  • Per chi avesse ancora bisogno di convincersi che l'informatica e le scienze umane possono andare d'accordo:
    Teresa Numerico, Arturo Vespignani (a cura di), Informatica per le scienze umanistiche, Il Mulino, Bologna 2003, 15 euro.
  • Per chi ha apprezzato Lo stile del Web dello stesso autore:
    Franco Carlini, Parole di carta e di web - Ecologia della comunicazione, Einaudi, Torino 2004.

torna su

torna a medea