IL LINGUAGGIO HTML

Il concetto di ipertesto è alla base del linguaggio HTML; tale linguaggio è derivato dal protocollo internazionale SGML (Standard Generalized Markup Language) usato per la definizione di documenti distribuiti.
Infatti, l'HTML (HyperText Markup Language) è il linguaggio nel quale si scrivono gli ipertesti del World Wide Web.

L'HTML consente:

·  l'inserimento di specificazioni relative alla struttura del testo, come titoli, limiti dei paragrafi, elenco di elementi.

·  l'utilizzo di vari stili di scrittura: testo in grassetto o corsivo, citazioni, etc.

·  Connessioni ipertestuali con altri oggetti della rete: parti sensibili del documento da cui potremmo raggiungere altri documenti nel Web. Questi sono detti "links" o collegamenti

Tutto questo "valore aggiunto" al testo viene inserito in maniera codificata mediante etichette o ("tags") che vengono aggiunte al testo. Le etichette di HTML si delimitano per mezzo dei segni "<" e ">": per esempio l'etichetta <P> segna l'inizio di ogni paragrafo. La maggior parte delle etichette HTML richiede un secondo tag di chiusura caratterizzato dai segni "</" e ">": per esempio, <TITLE> e </TITLE> aprono e chiudono il titolo del documento, mentre i segni <A> e </A> delimitano i link.

La sintassi dei vari tag HTML sara' argomento dei successivi paragrafi. La cosa importante da ricordare adesso e' che i documenti HTML sono scritti in caratteri ASCII, cioe' in testo normale (plain text).
Per realizzare dei propri documenti HTML non e' necessario utilizzare un editor di tipo particolare, ma e' sufficiente un qualsiasi programma di scrittura com Winword o Write. Una volta creato il testo esso va salvato come Solo Testo o File di Testo.

 

L'ORGANIZZAZIONE DEI DOCUMENTI HTML

Prima di passare all'analisi dei primi tags HTML è necessaria una precisazione

È buona norma far precedere la creazione dei documenti dalla definizione di uno schema chiaro che stabilisca le regole che si intende seguire durante il processo di creazione e inserimento delle informazioni.

Per chairire meglio questo concetto, prendiamo come riferimento il Server dell'Università di Siena.
Le informazioni che l'ateneo ha deciso di rendere disponbili alla consultazione sono di vario genere: ci sono informazioni relative alla struttura dell'ateneo, ai servizi che l'ateneo mette a disposizione, alle varie strutture didattiche o di ricerca che ne fanno parte con annessa descrizione delle attività svolte.

Alcune notizie sono rivolte agli studenti (presenti e futuri), altre al personale docente, altre al personale amministrativo, altre a chiunque sia interessato a sapere qualcosa su Siena sia come sede universitarie che come città di turismo e di cultura.
Come si vede, la quantità di informazioni disponibili è notevole, per cui conviene già in fase di avvio pianificare l'organizzazione del server.

Nel caso del server dell'università è stato deciso di suddividere i documenti in varie sezioni scelte in base all'argomento trattato. Le informazioni relative alla didattica, per esempio, sono state accorpate in una sezione apposita.
Al suo interno sono state successivamente sviluppate alcune sottosezioni relative alle varie facoltà dell'ateneo, così come all'interno della singola facoltà sono state ripartite le informazioni relative ai vari Corsi di Laurea. Questa struttura di tipo logico è stata riprodotta anche nella organizzazione fisica dei file che rappresentano i singoli documenti; i file relativi alla facoltà di Economia, sono stati raggruppati in una singola directory che è stata posta all'interno di una altra directory chiamata, facoltà.
Questa, a sua volta, fa parte di un'altra directory (definita Root) che contiene tutti i documenti HTML del server dell'ateneo.

Questo tipo di organizzazione facilita anche la manutenzione dei documenti HTML; nel caso si debba aggiornare il programma di un insegnamento di economia sarà sufficiente posizionarsi nella apposita directory e cercare il file che contiene i programmi dei corsi. La cosa sarebbe stata molto più complessa se tutti i documenti relativi a tutti i corsi di tutte le facoltà fossero stati ammucchiati all'interno di una singola directory.

La posizione del singolo documento relativamente alla directory root è importante, come vedremo, per la realizzazione dei link.

 

 

STRUTTURA DI UN DOCUMENTO HTML

Un documento HTML é costituito essenzialmente da due parti:

  1. la testata
  2. il corpo

Ogni documento HTML inizia con il tag

<HTML>

Di seguito troviamo la testata che é identificata dai tag

<HEAD> ......................... </HEAD>

Nella testata si trova il titolo contraddistinto dai tag

<TITLE> ............................ </TITLE>

Ció che é contenuto fra i tag <TITLE> e </TITLE> é il titolo del documento che é visualizzato nella barra del titolo della finestra del browser WWW.
Il titolo é importante poiché viene registrato come richiamo nel bookmark quindi deve essere significativo rispetto al contenuto del documento che lo contiene.

Fa seguito alla testata il corpo del documento, identificato dai tag

<BODY>...........................</BODY>

Un documento HTML si conclude con il tag

</HTML>

Quindi la struttura di una pagina HTML si puó riassumere con questo diagramma:

<HTML>

<HEAD>

<TITLE>

Titolo del documento

</TITLE>

</HEAD>

<BODY>

Corpo del documento

</BODY>

</HTML>

 

Il contenuto del tag HEAD è una collezione non ordinata dei seguenti elementi:

    TITLE – definisce il titolo del documento ed è sempre necessario;
    ISINDEX – fornisce una semplice chiave di ricerca;
    BASE – definisce l’URL di riferimento per completare gli indirizzi HTTP relativi presenti nel documento;
    META – fornisce informazioni aggiuntive con coppie nome/valore;
    LINK – definisce collegamenti con altri documenti;
    STYLE – per definire lo stile della pagina (non disponibile);
    SCRIPT - permette l’uso di linguaggi per script (non disponibile).

TITLE
Il titolo, obbligatorio in ogni documento, deve essere relativamente corto, ma nello stesso tempo significativo in quanto appare nelle liste contenenti i siti risultato di una particolare ricerca. Le specifiche dell’HTML 2.0 indicavano che un titolo può essere troncato e che comunque può essere lungo al massimo 63 caratteri.

Un esempio può essere il seguente:

   <TITLE>Il linguaggio HTML</TITLE>

ISINDEX
Fornisce una semplice chiave di ricerca. Tale elemento indica che l’utente ha a disposizione un’area in cui poter inserire una stringa di ricerca; non ci sono restrizioni sul numero di caratteri che possono essere immessi. L’attributo PROMPT può essere usato per specificare un prompt per l’area, ad esempio:

   <ISINDEX PROMPT= "Search Phrase">

Quando l’utente preme il tasto d’invio, la stringa di ricerca viene inviata al server identificato dal codice URL per quel documento.

BASE
Definisce l’URL di riferimento per il documento in esame per gli URL relativi presenti nel documento (ad esempio nell’attributo HREF dell’elemento A). Questo è tipicamente usato quando un documento viene duplicato su un altro server. Per esempio, dato

   <BASE HREF="http://foo.com/index.html">

l’elemento IMG

   <IMG SRC= "images/bar.gif">

si riferisce all’immagine

   http://foo.com/ images/bar.gif

In assenza dell’elemento BASE, viene preso come riferimento l’indirizzo http del server su cui è presente il documento in questione.

META
Tale elemento può essere introdotto per fornire particolari proprietà del documento, come l’autore, la data di validità, una lista di parole chiave, etc.. L’attributo NAME specifica il nome della proprietà, mentre l’attributo CONTENT specifica il valore della proprietà:

   <META NAME="Author" CONTENT="Dave Raggett">

Un altro esempio dell'attributo NAME è il seguente:

   <META NAME="Refresh" CONTENT="20">

In questo caso viene effettuato un refresh della pagina dopo un intervallo di tempo della durata indicata in CONTENT (nell'esempio 20 secondi). Un uso del tag META di questo tipo può essere utile per creare l'effetto di animazione, caricando una sequenza di immagini.

L’attributo HTTP-EQUIV può essere usato al posto di NAME ed ha uno speciale significato quando il file viene inviato con il protocollo HTTP. Un esempio può essere il seguente:

   <META HTTP-EQUIV="Expires" CONTENT="Tue, 20 Aug 1996 14:25:27 GMT">

che crea un header del documento del tipo:

   Expires: Tue, 20 Aug 1996 14:25:27 GMT

LINK
Tale elemento fornisce un metodo per definire collegamenti con altri documenti e risorse; gli attributi di tale elemento sono:

    HREF: specifica l’URL della risorsa collegata;
    REL: fornisce il tipo di collegamento tra il documento e la risorsa collegata (non necessario);
    REV: stabilisce la relazione inversa (non necessario);
    TITLE: fornisce un titolo indicativo per la risorsa collegata (non necessario).

I tipi di collegamenti che possono essere indicati sono:

Top – si indica il documento al top della gerarchia;
Contents – si indica il documento che serve come Table of Contents;
Index – si indica il documento che serve come indice per il documento corrente;
Glossary - si indica il documento che fornisce il glossario dei termini presenti nel documento corrente;
Copyright – fornisce l’indicazione del copyright per il documento corrente;
Next - si indica il documento successivo al corrente;
Previous - si indica il documento precedente al corrente;
Help - si indica il documento che fornisce l’help;
Search - si indica il documento contenente materiale di ricerca collegato al documento corrente.

Alcuni esempi possono essere:

    <LINK REL=Contents HREF=toc.html>
    <LINK REL=Previous HREF=toc.html>
    <LINK REL=Next HREF=toc.html>
    <LINK REL=Chapter REV=Contents HREF=toc.html>

 

 

 

 

 

 

 

L'elemento BODY

Questa parte della struttura di un documento HTML contiene il testo del documento. I possibili attributi dell’elemento BODY sono:

Attributi

Possibili valori

Significato

BGCOLOR

Specifiche del colore

Colore del background del documento

TEXT

Specifiche del colore

Colore del testo del documento

LINK

Specifiche del colore

Colori per link ipertestuali non visitati

VLINK

Specifiche del colore

Colori per link ipertestuali visitati

ALINK

Specifiche del colore

Colori per link ipertestuali attivi

BACKGROUND

URL

URL per l’immagine usata per sfondo

L’utente può definire questi attributi all’interno del suo documento; nel caso in cui non vengano specificati, i colori per lo sfondo e per i collegamenti ipertestuali vengono definiti di default dal browser.

L’elemento BODY può contenere una vasta gamma di elementi:

I LINK

Uno degli aspetti più importanti nello sviluppo di una pagina HTML è la realizzazione dei "Link", cioè l'individuazione di parole chiave attraverso le quali è possibile aprire direttamente un nuovo documento collegato in qualche modo al documento di partenza.
Facciamo un esempio: supponiamo di leggere un documento HTML che descrive le attrattive turistiche della città di Firenze nel seguente modo:

Su Piazza della Signoria si affaccia la Galleria degli Uffizi , considerata una delle più belle d'Europa insiema al Louvre di Parigi e al Museo Hermitage di Leningrado.

Leggere questa frase potrebbe invogliare il lettore a visitare la Galleria degli Uffizi e le opere in essa contenute, per cui potrebbe essere utile usare la parole "Galleria degli Uffizi" come termine chiave per richiamare un altro documento contenente una riproduzione digitale di alcuni dipinti.
Un altro link potrebbe essere messo in corrispondenza di "Louvre" in modo da rimandare ad un altro documento che contiene informazioni più approfondite sulla galleria parigina.

Il collegamento è realizzabile tramite il comando:

<A HREF="URL">.....</A>

Al posto di URL bisogna inserire il nome del file che si intende richiamare tramite questo link, mentre il termine successivo che precede </A> serve per poter attivare tale collegamento.

Per esempio, la seguente frase:

·  "Su Piazza della Signoria si affaccia la Galleria degli Uffizi"

consente, clikkando su "Galleria degli Uffizi" di attivare il collegamento suddetto ed è realizzato tramite queste istruzioni:

Su Piazza della Signoria si affaccia la <A HREF="http://www.uffizi.firenze.it//main.html">Galleria degli Uffizi </A>

In questo caso al posto di URL viene inserito non solo il nome del file a cui si fa riferimento, ma anche il termine http:// seguito dal nome della macchina su cui tale documento è presente (www.uffizi.firenze.it), nonchè dal percorso necessario per arrivare dalla root del server alla directory contenente il documento in questione.

Il nome della macchina può essere omesso solo se il documento a cui si fa riferimento è presente sulla stessa macchina dove risiede il documento da cui parte il collegamento.

Esiste anche un altro tipo di collegamento definito interno, dove il link è utilizzato non per passare da un documanto all'altro, ma semplicemente per andare in un altro punto dello stesso documento di partenza.

Si pensi, ad esempio, ad un indice che contenga tutti gli argomenti presenti nel documento. Una volta individuato l'argomento di interesse, non sarà necessario scorrere tutto il documento per trovarlo ma sarà sufficiente selezionare la voce nell'indice per essere trasportati direttamente al paragrafo relativo.

In questo caso sarà necessario mettere prima del capoverso in questione un secondo tag del tipo:

<A NAME="argomento">......</A>

dove al posto di argomento inserirò un termine di identificazione del paragrafo.

Il termine dell'indice che sarà collegato al paragrafo sarà preceduto da <A HREF="#argomento"> e seguito da </A>.

Come vediamo il tag è sempre lo stesso solo che è omesso sia il nome della macchina che il nome del file, dato che il link rimanda allo stesso documento di partenza.
Il termine argomento è preceduto da un cancelletto (#) per distinguere il collegamento di tipo interno da un eventuale collegamento verso un altro file di nome "argomento".

Combinando opportunamente la sintassi del link interno e di quello esterno sarà possibile effettuare un collegamento ad un capoverso di un documento diverso da quello di partenza, sempre che questo sia fornito degli opportuni tag <A NAME="** ">.

Inseriamo in una tabella i possibili attributi dell'elemento A:

Attributo

Possibili valori

Significato

Note

NAME

Stringa

Nome per un link

Unico all'interno del documento

HREF

URL

Indirizzo di rete per la risorsa collegata

Può essere un altro documento HTMl, un'immagine, etc.

REL

Stringa

Relazione tra le due risorse

-

REV

Stringa

Relazione inversa

-

TITLE

Stringa

Titolo per la risorsa collegata

Avvertenza

È possibile usare l'URL mailto: nell'attributo HREF. Esempio:

<A HREF="mailto:webmaster@info@marinsalta.net">webmaster@marinsalta.net</A>

In questo caso, selezionando tale collegamento, il browser fa partire un compositore di e-mail in cui è già indicato il nome del ricevente.

FORMATTAZIONE DEI PARAGRAFI

Quando scriviamo un documento HTML il fatto che una parte di testo inizi a nuova riga é ininfluente per il browser WWW. Per inserire un nuovo paragrafo il tag è:

<P>

Inserendo questo tag il testo che lo seguirà sarà posizionato a riga nuova lasciando una riga vuota rispetto al testo precedente.
Per andare a capo di una riga soltanto si usa il tag:

<BR>

Per allineare il testo a destra, sinistra o centrato si usano i seguenti tag:

<P ALIGN=RIGHT>Testo allineato a destra</P>
<P ALIGN=CENTER>Testo centrato</P>
<P ALIGN=LEFT>Testo allineato a sinistra</P>

cioè si utilizza l'opzione ALIGN per il tag <P>. Ovviamente in questo caso il tag <P> va chiuso con il rispettivo </P>.

Solo per centrare un testo si può anche utilizzare il tag:

<CENTER>Testo centrato</CENTER>

Per dividere un documento in più parti si utilizza il tag:

<HR>

con le opzioni SIZE e WIDTH definite in pixel per determinare lo spessore e la larghezza:

<HR SIZE=50 WIDTH=100>

Per inserire uno spazio vuoto (il browser non è sensibile a più di uno spazio bianco inserito con la barra spaziatrice) è possibile usare l'elemento:

&nbsp;

FORMATTAZIONE DEI CARATTERI

La formattazione dei caratteri in HTML viene eseguita tramite l'inserimento di tag opportuni.

LIVELLI DI INTESTAZIONE

HTML permette di definire sei livelli di intestazione.
Nella seguente tabella si puó vedere il comando HTML ed il risultato generato:

Comando HTML

 

Pagina WWW

 

 

 

<H1>Titolo 1</H1>

 

Titolo 1

<H2>Titolo 2</H2>

 

Titolo 2

<H3>Titolo 3</H3>

 

Titolo 3

<H4>Titolo 4</H4>

 

Titolo 4

<H5>Titolo 5</H5>

 
Titolo 5

<H6>Titolo 6</H6>

 
Titolo 6

Ciascuno dei sei livelli di intestazione, oltre alla resa grafica mostrata, inserisce una riga vuota sopra e sotto il titolo.

Comando HTML

 

Pagina WWW

 

 

 

<B>Parole in grassetto</B>

 

Parole in grassetto

<I>Parole in corsivo</I>

 

Parole in corsivo

<PRE>Testo preformattato</PRE>

 

 
Testo preformattato

<CENTER>Testo centrato</CENTER>

 

Testo centrato

<FONT SIZE="3">Grandezza Font 3</FONT>

 

Grandezza Font 3

CARATTERI SPECIALI

In HTML l'inserimento di caratteri speciali quali lettere accentate, carattere maggiore e minore ecc... si esegue tramite una serie di codificazioni. Qui si riportano alcune delle principali.

&lt;

 

 

<

 

minore

 

&gt;

 

>

 

maggiore

&amp;

 

&

 

e commerciale

&quot;

 

"

 

doppio apice

&agrave;

 

à

 

a con accento grave

&aacute;

 

á

 

a con accento acuto

&egrave;

 

è

 

e con accento grave

&eacute;

 

é

 

e con accento acuto

&igrave;

 

ì

 

i con accento grave

&iacute;

 

í

 

i con accento acuto

&ograve;

 

ò

 

o con accento grave

&oacute;

 

ó

 

o con accento acuto

&ugrave;

 

ù

 

u con accento grave

&uacute;

 

ú

 

u con accento acuto

&Agrave;

 

À

 

A con accento grave

&Egrave;

 

È

 

E con accento grave

&Igrave;

 

Ì

 

I con accento grave

&Ograve;

 

Ò

 

O con accento grave

&Ugrave;

 

Ù

 

U con accento grave

 

COLORI E SFONDO

Il browser Netscape consente l'utilizzo di alcune opzioni che consentono di cambiare il "look" della pagina HTML.
Cio' e' ottenibile attraverso l'utilizzo di alcuni attributi attributi che devono essere associati al tag <BODY>. Essi sono:

·  BACKGROUND="nomefile": con questo attributo si impone che lo sfondo sia realizzato utilizzando l'immagine nomefile; Il browser, indipendentemente dalla dimensione della finestra, provvederà a riempire tutto lo sfondo, eventualmente affiancando piu' ripetizioni dell'immagine indicata.

·  BGCOLOR="#rrggbb": questo attributo specifica il colore dello sfondo (in caso di assenza del BACKGROUND di cui sopra) espresso attraverso il valore attribuito alle componenti rossa, verde, blu (RGB). Tali componenti vanno inseriteutilizzando il formato esadecimale e con valore compreso tra 00 e ff (che corrisponde all'intervallo 0-255 in notazione decimale).

·  TEXT="#rrggbb": indica il colore del testo; le regole di inserimento delle componenti RGB sono analoghe al caso precedente.

·  LINK="#rrggbb": indica il colore dei termini usati come link, quando essi non sono stati ancora selezionati.

·  ALINK="#rrggbb": indica il colore dei link attualmente selezionati.

·  VLINK="#rrggbb": indica il colore dei link relativi a siti già visitati.


  Quella che segue è una tabella di corrispondenza tra i valori numerici esadecimali ed i principali colori:

Nel caso in cui non tutte queste opzioni siano state specificate dal programmatore HTML, il browser provvedera' ad associare ad alcuna di esse (BGCOLOR, TEXT, LINK, ALINK ,VLINK) dei valori predefiniti.

 

LISTE

In HTML é possibile inserire liste ordinate e non ordinate:

LISTE NON ORDINATE

Comando HTML

 

Pagina WWW

 

 

 

 
<UL>
    <LI>Testo 1
    <LI>Testo 2
</UL>

 
  • Testo 1
  • Testo 2

LISTE ORDINATE

Comando HTML

 

Pagina WWW

 

 

 

 
<OL>
    <LI>Testo 1
    <LI>Testo 2
</OL>

 
  1. Testo 1
  2. Testo 2

In entrambe i casi il testo che segue i tag <UL> o <OL> é indentato rispetto al testo che lo precede.

É possibile anche inserire delle liste all'interno di altre liste come nell'esempio che segue:

Comando HTML

 

Pagina WWW

 

 

 

 
Orario del corso
<UL>
    <LI>Martedi
        <UL>
            <LI>16.00-18.00
        </UL>
    <LI>Mercoledi
        <UL>
            <LI>16.00-18.00
        </UL>
    <LI>Giovedi
        <UL>
            <LI>16.00-18.00
        </UL>
    <LI>Venerdi
        <UL>
            <LI>16.00-18.00
        </UL>
</UL>

 

Orario del corso

  • Martedi
    • 16.00-18.00
  • Mercoledi
    • 16.00-18.00
  • Giovedi
    • 16.00-18.00
  • Venerdi
    • 16.00-18.00

Come si può notare, il linguaggio HTML ha una sua gerarchia per la simbologia con cui indica le liste annidate. È comunque possibile variare tale simbologia nel seguente modo:

Un altro modo per realizzare una lista senza alcun elenco, nè puntato nè numerato è il seguente:

Comando HTML

 

Pagina WWW

 

 

 

 
<DL>
    <DT>Nome del primo termine
    <DD>Definizione del primo termine
    <DT>Nome del secondo termine
    <DD>Definizione del secondo termine
</DL>

 

Nome del primo termine

Definizione del primo termine

Nome del secondo termine

Definizione del secondo termine

 

LE IMMAGINI

Uno dei punti di forza delle pagine accessibili tramite World Wide Web è la possibilità di inserire delle immagini all'interno di documenti HTML. Tale opzione rende l'informazione più accattivante agli occhi dell'utente, ma oltre a questo fornisce un altro importantissimo mezzo di comunicazione al programmatore HTML. In molti casi, infatti, una semplice immagine è in grado di dare un contributo informativo molto superiore ad una intera pagina scritta.
Bisogna però ricordare che una immagine, per quanto piccola possa essere, porta ad un incremento delle dimensioni del documento, per cui l'utente che vuole consultare un testo arricchito con immagini dovrà attendere un lasso maggiore di tempo per ricevere il documento completo: è buona norma quindi inserire con oculatezza le immagini all'interno dei documenti HTML per non obbligare l'utente ad inutili attese.

  L'HTML prevede un comando apposito per inserire un'immagine: IMG. Questo è un comando aperto, quindi non necessita di alcun tag di chiusura.
  IMG prevede l'inserimento di alcuni parametri:


Qui c'è un'immagine di prova  Vediamo dunque un esempio di questo comando:
<IMG SRC="images/wav.gif" ALIGN="LEFT">
inserisce un'immagine allineata a sinistra come in questo caso.
  Come potete notare sono stati usati i due parametri SRC=... per specificare l'immagine sorgente e ALIGN=... per indicare l'allineamento desiderato. Il comando inoltre non ha richiesto chiusura.
  Un'importante considerazione riguarda il formato in cui deve essere salvata l'immagine: anche se molti altri formati vengono supportati con le nuove versioni dei browser, quelli universalmente riconosciuti sono il GIF ed il JPEG. Entrambi garantiscono un'alta fedeltà nella riproduzione insieme ad un buon fattore di compressione. Vi consigliamo di utilizzare immagini in uno di questi due formati.

  Come secondo esempio si può visualizzare nuovamente la stessa immagine con gli attributi:
<IMG SRC="images/wav.gif" WIDTH=100 HEIGHT=100>

Qui c'è un'immagine di prova


che portano l'immagine ad assumere dimensioni prefissate (100x100 pixel). L'utilizzo dei parametri WIDTH ed HEIGHT comporta naturalmente una riscalatura dell'immagine originaria, indipendentemente dalla sua effettiva risoluzione.
  Se non volete nessun bordo potete inserire BORDER=0.

  Se non viene specificato altrimenti tramite il desiderato allineamento, l'immagine viene inserita nel testo esattamente nel punto in cui appare il comando IMG, disponendo il testo ai suoi lati.
  Nel caso in cui il file dell'immagine non sia disponibile o ci sia un errore nel listato HTML, il browser può cercare di avvertire che c'è un'immagine non riconosciuta visualizzando il seguente simbolo:


  Naturalmente per visualizzare le immagini è necessario usare un browser grafico. Se questo non è il caso ed il vostro browser è di tipo testuale, allora conviene inserire il parametro ALT: quando il browser testuale incontra l'istruzione per l'immagine la salta cercando direttamente l'ALT e visualizzando il testo ivi contenuto.
  Nel nostro caso, ad esempio, potremmo inserire:
<IMG SRC="images/wav.gif" ALT="File audio">
per permettere, anche a chi non dispone di un editor grafico, di avere informazioni su tutti gli elementi della pagina.

  Le immagini possono naturalmente essere inserite all'interno di comandi <A HREF="..."> per utilizzarle come pulsanti di collegamento od icone. Il browser, se non altrimenti specificato, mette automaticamente un bordo intorno all'immagine per indicare che è un link. Se non lo volete usate il parametro BORDER=0 dentro IMG come:

<A HREF="link.htm">
<IMG SRC="images/wav.gif" BORDER=0>
</A>

LE TABELLE

All'interno di un documento HTML e' possibile inserire dei dati di qualunque tipo (numeri, nomi, percentuali) all'interno di tabelle. Il tag che identifica l'inizio di una tabella e' <table>, accompagnato sempre al tag </table> che indica invece la fine della suddetta tabella.
Il tag table prevede una opsione BORDER che ci consente di definire la grandezza del bordo che deve essere associato alla tabella. Tale grandezza va rappresentata con un numero postivo intero: ponendo <table border =0> si intende una tabella priva di bordo

All'interno della tabella stessa saranno presenti altri tag che mi permetteranno di inserire i dati nei vari campi della tabella stessa.

Questi sono:

·  <TR></TR> che identificano inizio e fine di ogni riga della tabella

·  <TH></TH> che identificano l'intestazione della tabella. Viene associato questo tag ad ogni termine utilizzato per identificare un insieme di dati (riga o colonna) inseriti nella tabella

·  <TD></TD> che identificano ogni dato singolo che e' stato inserito della tabella.

Applicando le semplici regole ora introdotte e' possibile realizzare una tabella come quella sottostante

Studenti

maschi

femmine

Italiani

120

65

Stranieri

17

13

Totale

137

78

Essa è stata realizzata utilizzando le seguenti istruzioni:

<table border=2>
<tr>
<th>Studenti</th><th>maschi</th><th>femmine</th>
<tr>
<th>Italiani<th><td>120</td><td>65</td>
<tr>
<th>Stranieri<th><td>17</td><td>13</td>
<tr>
<th>Totale<th><td>137</td><td>78</td>
</table>

Vediamo quali sono gli attributi dell'elemento TABLE:

ALIGN

Specifica la posizione della tabella relativamente ai margini della finestra; i possibili valori sono LEFT (default), RIGHT e CENTER.

WIDTH

Specifica la grandezza della tabella in pixel o in percentuale (rispetto alla grandezza della finestra).

BORDER

Indica lo spessore del bordo della tabella; per non avere bordo si scriverà BORDER=0.

CELLSPACING

Specifica, in pixel, lo spazio tra le celle.

CELLPADDING

Specifica, in pixel, lo spazio tra il contenuto di una cella ed il suo bordo.

Analizziamo adesso quali sono gli attributi dell'elemento TR:

ALIGN

Posiziona, orizzontalmente, il contenuto all'interno di una cella; i possibili valori sono LEFT, CENTER e RIGHT.

VALIGN

Posiziona, verticalmente, il contenuto all'interno di una cella; i possibili valori sono TOP, MIDDLE e BOTTOM.

Questi due attributi definiscono il modo di visualizzazione del contenuto di ciascuna cella della riga.
Infine, esaminiamo gli attributi degli elementi TH e TD:

NOWRAP

La presenza di quest'attributo impedisce al testo di suddividersi su due righe.

ROWSPAN

Dispone la cella su più righe.

COLSPAN

Dispone la cella su più colonne.

ALIGN

Posiziona, orizzontalmente, il contenuto all'interno di una cella; i possibili valori sono LEFT, CENTER e RIGHT.

VALIGN

Posiziona, verticalmente, il contenuto all'interno di una cella; i possibili valori sono TOP, MIDDLE e BOTTOM.

WIDTH

Specifica, in pixel, le dimensioni della cella in larghezza.

HEIGHT

Specifica, in pixel, le dimensioni della cella in altezza.

Per mostrare l'uso dei principali attributi descritti, possiamo creare le seguenti tabelle:

Nome

Paolino Paperino

Indirizzo

Via del Sicomoro, 254 Paperopoli

utilizzando questa sequenza di comandi <TABLE BORDER =2 WIDTH=70%>
<TR>
<TH width=30%> Nome </TH>
<TD width=70%> Paolino Paperino</TD>
<TR>
<TH WIDTH=30%> Indirizzo </TH>
<TD WIDTH=70%> Via del Sicomoro, 254 Paperopoli</TD>
</TABLE>

oppure la seguente tabella:

Questa è una tabella di prova per il corso di Poggibonsi

1

1

1

1

1

utilizzando questa sequenza di comandi:
<TABLE BORDER=2 CELLSPACING=10 CELLPADDING=10>
<TR ALIGN=LEFT VALIGN=MIDDLE>
<TD COLSPAN=5 NOWRAP>Questa è una tabella di prova per il corso di Poggibonsi
<TR ALIGN=LEFT VALIGN=MIDDLE>
<TD>1
<TD>1
<TD>1
<TD ALIGN=RIGHT>1
<TD>1
</TABLE>

 

FORM in HTML

Ogni documento HTML può contenere una o più form. La form inizia con il comando <FORM> e termina con il comando corrispondente </FORM>. Tutto ciò che è compreso fra queste due istruzioni delimita l'area destinata a raccogliere i dati inviati dall'utente, i quali sono gestiti da una serie di appositi comandi. Essi sono riportati qui di seguito.

·         ACTION Indica la URL (Uniform Resource Locator) del programma CGI al quale il server passerà i dati di ingresso provenienti dalla form compilata dal client. Per esempio,l'assegnazione seguente:

ACTION="http://lisa.dfc.unifi.it/cgi-bin/post-query"

fa in modo che venga eseguito il programma post-query sul server lisa.

I più usati comunque sono GET e POST. In particolare il POST è il metodo più adatto ad inviare dati di una certa lunghezza, poiché con il GET, per ragioni pratiche, non si possono inviare al server più di 256 byte di informazione. È importante notare che i metodi usati dalle form impostano la struttura dei dati inviati nell'ambito del medesimo protocollo di comunicazione tra client e server (HTTP) e della medesima interfaccia (CGI) usata per lo scambio di informazioni tra server e applicazione richiesta dal client.

* text - crea un'area ipertestuale in cui l'utente può inserire una singola linea di testo. I dati immessi vengono associati ad una variabile specificata con NAME (vedi dopo). text è il tipo di INPUT di default: esso viene automaticamente selezionato quando viene omesso TYPE.

* checkbox - crea una casella ipertestuale, la cui selezione da parte dell'utente dà origine, nei dati trasmessi, ad una assegnazione NAME = VALUE. Sono ammessi più checkbox identici in una stessa form, anche se ciò comporta doppioni di dati trasmessi. checkbox può servire, ad esempio, per creare un documento ipertestuale che domanda all'utente quali linguaggi di programmazione egli conosce:

Linguaggi di programmazione conosciuti:

C

C++

Pascal

Basic

Fortran

L'utente in questo caso può selezionare anche più di una casella.

* radio - crea una serie di caselle ipertestuali con selezionamento esclusivo. Ognuna di queste caselle ha lo stesso NAME delle altre e un VALUE particolare. L'utente può selezionare una sola di queste caselle e quindi inviare una unica assegnazione NAME = VALUE. Ad esempio, con il tipo radio si possono creare documenti ipertestuali dove viene domandato quale mezzo di pagamento l'utente ha intenzione di usare:

Pagamento in:

contanti

assegno

carta di credito

bancomat

* hidden - crea un campo nascosto per l'utente. Il valore imposto ad un campo hidden può costituire l'informazione di "stato" per il server, cioè quella informazione che non deve essere modificata dal client.

* password - crea un campo di testo ove i caratteri immessi vengono visualizzati con asterischi(*). Ciò dà la possibilità di generare documenti ipertestuali interattivi in cui l'utente può digitare una password con la dovuta riservatezza. È utile, per esempio, quando si richiede che solo alcuni utenti abbiano l'accesso a dati riservati.

* reset - cancella tutti i dati impostati nei campi dall'utente e li riporta ai loro valori iniziali o di default. reset crea un pulsante ipertestuale.

* submit - dà l'istruzione di invio dati. submit crea un pulsante ipertestuale, che può anche essere etichettato assegnando una stringa all'attributo VALUE. Se viene dato un NAME, si provvede pure ad inviare una assegnazione NAME = VALUE. Premendo tale pulsante, l'utente invia al server tutti i dati che egli ha impostato nei campi. Volendo, è possibile creare una form costituita dal solo pulsante di invio.