Una tabella si inserisce con il tag <TABLE>, e si chiude corrispondentemente con </TABLE>.
Prima di inserire una tabella in una pagina html occorre conoscere il numero di righe e il numero di colonne che ci serviranno, e, insomma, immaginarsela già completa.
Consideriamo dapprima una tabella molto semplice, con tre righe e cinque colonne, all'interno della quale inseriremo i pronomi personali tedeschi al singolare.
| Nominativo | Ich | du | er | es | sie |
| Accusativo | mich | dich | ihn | es | sie |
| Dativo | mir | dir | ihm | ihm | ihr |
La sua struttura html sarà la seguente (nelle sue linee essenziali):
<TABLE>
<TR>
<TD> <I>Nominativo</I> </TD> <TD>Ich</TD> <TD>du</TD> <TD>er</TD> <TD>es</TD> <TD>sie</TD>
</TR>
<TR>
<TD> <I>Accusativo</I></TD> <TD>mich</TD> <TD>dich</TD> <TD>ihn</TD> <TD>es</TD> <TD>sie</TD>
</TR>
<TR>
<TD> <I>Dativo</I></TD> <TD>mir</TD> <TD>dir</TD> <TD>ihm</TD> <TD>ihm</TD> <TD>ihr</TD>
</TR>
</TABLE>
Si osservi attentamente che:
– <TABLE>...</TABLE> è inserito nel tag <BODY>...</BODY> (come potete verificare controllando la struttura html complessiva di questo esempio, cliccando sul tasto destro del mouse posizionato sul documento come è visualizzato dal vostro browser, o attraverso il menu Visualizza di Explorer).
– <TR>...</TR> serve per contenere una riga della tabella.
– <TD>...</TD> contiene ogni colonna presente nella riga stessa (il numero di colonne dev'essere ovviamente lo stesso per ogni riga all'interno di una stessa tabella).
(Il tag <I>...</I> serve per rendere il testo corsivo.)
Per quanto riguarda i bordi della tabella, questi sono controllati dall'attributo BORDER="pixels" (inserito nel tag TABLE).
L'attributo CELLPADDING="pixels" (da inserire sempre nel tag TABLE) definisce invece lo spazio tra i contenuti delle celle e i bordi corrispondenti.
In questa tabella, per es.:
| Nominativo | Ich | du | er | es | sie |
| Accusativo | mich | dich | ihn | es | sie |
| Dativo | mir | dir | ihm | ihm | ihr |
lo spazio tra i contenuti delle celle e i bordi è stato creato con un'istruzione di questo tipo:
<TABLE cellpadding="6">
Visualizza la pagina html corrispondente.
Se vogliamo che in una riga siano posizionati dei titoli utilizzeremo, al posto dei tags <TD>...</TD>, i tags <TH>...</TH>., che formatteranno i contenuti delle celle così marcate direttamente come titoli.
Per creare poi un titolo alla tabella nel suo insieme, si può utilizzare il tag CAPTION (come in questo esempio), ma la soluzione più comoda è quella di inserire semplicemente un paragrafo (<P>titolo</P>) prima della tabella, come in quest'altro esempio (clicca qui).
| Singolare | Plurale | |||||||
| Nominativo | Ich | du | er | es | sie | wir | ihr | sie |
| Accusativo | mich | dich | ihn | es | sie | uns | euch | sie |
| Dativo | mir | dir | ihm | ihm | ihr | uns | euch | ihnen |
Se vogliamo che, come nella tabella sopra, all'interno di una riga alcune colonne si uniscano, apparendo visualizzate come una colonna unica, dobbiamo inserire nel tag TD, che introduce appunto il contenuto di una cella, l'attributo COLSPAN="numero", in cui il numero specificherà il numero di colonne che vanno fuse insieme.
Visualizzate la fonte html corrispondente, osservando anche che la stringa <TD></TD> serve ad introdurre una cella vuota.
L'attributo ROWSPAN è utilizzato, corrispondentemente, per unire insieme delle righe di una stessa colonna, come nell'esempio qui linkato.
Le immagini si inseriscono con il tag <IMG src="nome file"> che non va chiuso in quanto contiene al suo stesso interno il rimando all'immagine.
Ve ne fornisco un esempio:
<IMG src="cassata.jpg" alt="Cassata siciliana">
Il file contenente l'immagine andrà possibilmente posizionato nella cartella che contiene anche il file html in questione, e ciò per le stesse ragioni per cui è opportuno collocare tutte le pagine di un sito nella stessa cartella. Se fosse posizionato altrove occorrerebbe infatti specificare al browser il "cammino" che porta al file stesso (digitando l'URL completa).
L'attributo ALT="nome immagine" è il corrispondente dell'attributo TITLE posto nelle ancore o in altri tags: visualizza il titolo dell'immagine, o qualsiasi altra (breve) informazione si ritenga opportuno fornire: essa verrà visualizzata passando con il cursore sull'immagine, oppure sullo schermo al posto dell'immagine stessa mentre questa viene scaricata dal server, o qualora ci fossero problemi nella sua visualizzazione.
<IMG src="susanna.jpg" alt="Paolo Veronese, Susanna al bagno" width="680" height="695" border="0" hspace="27">
Inutile ricordare che nella definizione delle dimensioni occorrerà tener presente delle proporzioni e delle dimensioni dell'immagine originale (che sia in formato .gif o .jpeg).
Per approfondimenti sul soggetto, cfr. html.it e i riferimenti.
La possibilità di creare collegamenti ipertestuali è uno dei principali motivi del successo del World Wide Web, e di conseguenza le "ancore" (<A>...</A>) sono probabilmente i tags più importanti nell'HTML.
Grazie ai tags <A>...</A> è possibile infatti collegare il nostro contenuto a altri testi, immagini, elementi multimediali.
Perché funzioni, l'elemento <A> deve essere associato ad attributi che specifichino il tipo di rimando che si vuole effettuare: diverse saranno cioè le specificazioni per i link a pagine Web, a indirizzi elettronici, o a paragrafi dello stesso documento.
Il marcatore che serve ad introdurre link a pagine Web (esterne o collocate nello stesso sito) e a indirizzi e-mail, o infine a creare link interni a un documento è HREF, abbreviazione di Hypertext Reference.
Per esempio:
Nel codice sopracitato, quindi, cliccando sul testo "Visita cani.net" (compreso tra i tag A in apertura e chiusura) si raggiunge l'URL http://www.cani.net indicato dall'attributo HREF.
E' possibile sostituire al testo un'immagine con effetto identico.
Non è necessario, in questo caso, specificare tutto il percorso che porta al documento linkato, in quanto questo si trova nella stessa cartella del documento d'origine.
Si osservi l'uso dei link a documenti dello stesso sito visualizzando la struttura HTML della prima pagina di questa lezione.
Occorrerà rispettare una sintassi leggermente diversa da quella indicata per le URL. Il codice è il seguente:
<A HREF="mailto: indirizzo elettronico">Testo</A>
Per esempio: <A HREF="mailto:eva.cappellini@libero.it">Eva Cappellini</A>
Eccone la realizzazione pratica:
Cliccando su questo link viene automaticamente aperto il tuo programma di posta predefinito con il campo "TO" già impostato su webmaster@html.it.
<A HREF="http://www.cani.net" TITLE="il più grande e completo sito italiano dedicato ai cani">Visita cani.net</A>
che darà luogo alla visualizzazione seguente:
Trascuriamo qui il problema dello stile del rimando (il suo colore, l'eventuale sottolineatura ecc.): viene impostato di default in blu sottolineato, ma può poi essere modificato a piacere attraverso l'uso dei fogli di stile o dei tag di stile HTML (come avete visto, in queste pagine i rimandi sono realizzati in rosso o in arancione, e ciò attraverso indicazioni di fogli di stile).
Finora abbiamo analizzato link a risorse esterne o altre pagine di uno stesso sito.
È possibile creare collegamenti con punti specifici di uno stesso documento, grazie al codice <A NAME= "ancora">. In altri termini se con i collegamenti visti finora "agganciamo" alla nostra pagina un documento, con l'attributo NAME creiamo un link verso un punto specifico del documento nel quale ci troviamo.
Per avere un esempio pratico di ciò che si intende, cliccate sul link che segue e visualizzerete l'inizio di questo paragrafo: Prova.
Ecco le procedure per creare collegamenti a punti interni del documento:
– Inserire il tag <A NAME="nome del paragrafo"> nel punto del documento da raggiungere, e chiuderlo con il tag </A>. Per "nome del paragrafo" intendiamo il nome identificativo, scelto arbitrariamente, del punto in cui il browser dovrà visualizzare la pagina.
– Nel collegamento dal quale si vuole raggiungere il punto del nuovo documento occorre introdurre l'istruzione necessaria secondo la seguente sintassi: <A HREF="#nome del paragrafo">testo</A>
Il cancelletto (#) indica che si tratta di un link interno. L'esempio considerato rimanda ad un punto della stessa pagina, perché se a destra del cancelletto c'è il nome del link interno, a sinistra non è scritto nulla.
Se volessimo raggiungere un punto preciso di un documento esterno la sintassi corretta dovrebbe essere: <A HREF="nome_file.htm#nome_del_paragrafo">Visita questo sito</A>. Dove "nome_file.htm" è il nome del documento da raggiungere, mentre "nome_del_paragrafo" indica il punto preciso all'interno dello stesso.
***************************************************************************************
| (0) | Presentazione. | ||||||||
| (1) | Nozioni introduttive di HTML. | ||||||||
| (2) | Tabelle, immagini, links. | ||||||||
| (3) | Introduzione ai fogli di stile CSS. | ||||||||
| (4) | Modelli scaricabili. | ||||||||
| (5) | Riferimenti. | ||||||||