Dopo aver compilato un modulo, l’utente è tenuto ad inviare i dati al server per usufruire di un particolare servizio.
Solitamente sul fondo di un form viene fornito un bottone che conclude la compilazione del modulo. La sintassi per questo particolare bottone è:

<input type="submit" value="Invia i dati" />

L’attributo type è avvalorato a submit e l’attributo value specifica un’etichetta per il bottone.
Al click del bottone di tipo submit, i dati del form vengono organizzati tramite il metodo di invio (attributo method) e quindi inviati alla pagina che li processerà (attributo action).

In alternativa all’invio dei dati, l’utente potrebbe decidere di annullare ciò che ha immesso nel modulo e riportare quindi il form stesso allo stato iniziale.
Per far ciò è necessario fornire un ulteriore bottone, questa volta di tipo reset che al click andrà a pulire in automatico ogni singolo campo del form:

<input type='reset' value='Pulisci form'/>

E’ utile posizionare questo bottone sul fondo della form, in concomitanza del bottone di submit. Il vantaggio è di fornire agli utenti un modo veloce ed efficiente per pulire i campi senza che questi debba cancellare a mano ogni singolo contenuto.

Bottoni di uso generale

Oltre i bottoni di submit e reset è possibile implementare ulteriori bottoni ai quali associare particolari funzioni definite dal programmatore.
La sintassi è la seguente:

<input type='button' value='Bottone' onClick='funzione()'/>

Il type è necessariamente impostato a button. Inoltre va definita la funzione da richiamare ad un particolare evento, in questo caso al clic del pulsante.
La parola chiave onClick rientra nella famiglia dei cosiddetti gestori di eventi dei quali sarà approfondito il significato nelle lezioni su Javascript.

Il tag BUTTON

Con l’HTML 4 è stato introdotto il tag button che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco.
Il tag button, a differenza del tag input, dà la possibilità di inserire il testo del bottone tra l’apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice html all’interno del tag, o addirittura delle immagini o oggetti.
Analizziamo il codice html sottostante:

<button>
	<img src='img/esclamativo.jpg' alt='Invia' border='1'  align='middle'>
	Invia i dati
</button>

All’interno del bottone verrà visualizzata un’immagine e quindi un testo. Niente ci avrebbe vietato l’aggiunta di ulteriore testo o immagini al contenuto del bottone.

Disabilitare un bottone

Grazie all’attributo disable, infine, è possibile disabilitare un bottone in modo tale che questo non sia cliccabile.
Inoltre il browser visualizzerà tale bottone nella pagina con uno stile a basso rilievo ad intendere che il pulsante non è abilitato. La sintassi è la seguente:

<input type='submit' value='Invia i dati' disabled />

Il bottone sarà così visibile:

Uno dei fattori che ha decretato negli anni il successo del web è senza dubbio la possibilità che offre agli utenti di interagire con esso.
Pensiamo ad esempio ai forum, alle newsletter e alla possibilità di iscriversi a portali e chat. Per ognuno di questi esempi è indispensabile ritrovarsi dinnanzi a moduli html da compilare per usufruire del servizio e fornire i dati necessari al web server.
I form sono quindi da definirsi come l’area di una pagina html adibita all’inserimento di dati da parte degli utenti. Di seguito un esempio grafico di form:

Ogni modulo html è definito innanzitutto da un tag di apertura e da uno di chiusura:

<form … >
     …
</form>

All’interno di questo contenitore vanno quindi definiti il testo e gli elementi che compongono il form.
Solitamente l’invio dei dati è organizzato in due parti:

• una pagina iniziale che contiene il modulo che consente all’utente di effettuare scelte e immettere testo
• una pagina secondaria che viene richiamata dal modulo ed ha lo scopo di processare i dati ricevuti. Solitamente trattandosi di una pagina di programmazione che risiede sul server e può essere in CGI, ASP, PHP, JSP o altro linguaggio.

A tal proposito è necessario introdurre alcuni attributi indispensabili del tag form:

<form name=‘nome_form’ action=‘pagina_secondaria.php’ method=‘GET’>
    …
</form>

L’attributo name serve per indicare un nome ad un form, necessario per processare lato client(con Javascript) i dati del modulo.
L’attributo action definisce l’url della pagina o del programma che processerà i dati del modulo html.
L’attributo method, infine, definisce il metodo di invio dei dati al server. Può assumere valore GET o POST.

Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella “query string”, cioè nella stringa di interrogazione) secondo questa forma:

pagina_secondaria.php?parametro=valore&parametro=valore

Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile).

Controlli del modulo

Per controlli di un modulo html si intende l’insieme degli elementi che costituiscono il modulo stesso e che forniscono all’utente gli strumenti per effettuare scelte e immettere dati.
I tipi di controlli sono:

• Bottoni (submit/reset)
• Caselle di Testo (anche nascoste come pswd)
• Caselle di Spunta
• Radio Button (come caselle di spunta, ma mutex)
• Immagini (come i bottoni)
• Selezione di File
• Controlli nascosti

Per ciascuno di essi è possibile associare un’etichetta per identificare l’elemento in maniera univoca. Ogni controllo ha inoltre un nome (specificato nel codice html dall’attributo name) e un valore (specificato dall’attributo value) che può assumere significati diversi in relazione al tipo di controllo.
Il name e il value vengono accoppiati e passati dal browser al server per essere elaborati.

Il tag INPUT

Il tag <input> definisce un singolo campo che compone un modulo. La sintassi è la seguente:

<input  type=‘…’ />

L’input non prevede il tag di chiusura e l’attributo type specifica il tipo di dato che il campo contempla. Scrivere ad esempio : <input type=‘text’ /> ci permette di definire un campo di input di tipo testo.

Analizziamo il codice html che segue:

<form name='form' action='pagin.php' method='GET'>
	<table border='0'>
	<tr>
		<td>Nome :</td>
		<td><input type='text' name='nome'/></td>
	</tr>
	<tr>
		<td>Cognome:</td>
		<td><input type='text' name='cognome'/></td>
	</tr>
	<tr>
		<td>Codice Fiscale :</td>
		<td><input type='text' name='cf'/></td>
	</tr>
	</table>
</form>

Il form contiene tre campi di input di tipo testo. I campi sono tabellati e provvisti dell’attributo name. Il risultato nella finestra del browser è il seguente:

Grazie all’attributo value è inoltre possibile impostare un testo di default per ciascun campo di testo:

…
		<td><input type='text' name='nome‘ value=‘Il tuo nome’/></td>
…
		<td><input type='text' name=‘cognome’ value=‘Il tuo cognome’/></td>

Il campo di input di tipo testo permette inoltre di specificare il numero massimo di caratteri ammissibile. A tale scopo esistono alcuni attributi, tra i quali:

• SIZE (grandezza della casella mostrata nella pagina)
• MAXLENGTH (numero massimo di caratteri che l’utente può inserire)

La sintassi è la seguente:

<input type='text' name='nome' size='10' maxlength='10'/>

L’attributo COLSPAN

Finora abbiamo creato tabelle come griglie rigide, in cui il numero delle colonne era dato come costante e non modificabile.
In realtà è possibile raggruppare le celle all’interno delle colonne in modo da avere ad esempio una riga da 3 colonne e un’altra da 4. Per ottenere questo risultato è necessario specificare che una cella deve occupare il posto di 2 (o più colonne).
In questo caso si utilizza l’attributo COLSPAN all’interno del tag <td>, specificando come valore il numero di celle che devono essere occupate.
La sintassi è la seguente:

<td colspan='2'>… contenuto cella …</td>

In questo caso la cella occuperà il posto di due celle e il suo contenuto sarà visibile all’interno dello spazio creato.
Analizziamo a questo punto il codice completo di una tabella che contiene 3 righe, la prima composta da 4 celle, la seconda da 3 e la terza da 2 celle:

<html>
<head>
<title>TABELLE - COLSPAN</title>
</head>
<body>
<table border='1' width='400px'>
<tr>
	<td align='center'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 5</td>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td align='center'>Cella 8</td>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>
</body>
</html>

Il risultato nella finestra del browser è il seguente:

Quando si utilizza l’attributo colspan è facile incorrere in errori. Ad esempio realizzare una riga con 4 colonne (celle) e successivamente una riga con sole 2 colonne provoca in fase di visualizzazione effetti indesiderati.
E’ sempre consigliabile, indipendentemente dal numero di celle unite che si andranno a realizzare, preparare una bozza cartacea della tabella comprensiva di un numero uguale di celle per ogni riga. Successivamente scegliere le celle da unire evidenziandole da un segno grafico e quindi realizzare il codice html.

L’attributo ROWSPAN

Anche l’attributo ROWSPAN è utile ad unire le celle di una tabella html. A differenza di colspan però questo attributo lavora sull’unione di righe.
In altre parole è possibile far si che una cella si estenda su più righe:

<td rowspan='2'>… contenuto cella …</td>

In questo caso infatti il contenuto della cella verrà visualizzato in una cella estesa su due righe (rowspan=’2′). E’ possibile inoltre combinare insieme rowspan e colspan se vogliamo ad esempio che una cella si estenda sia in orizzontale che in verticale.
Riprendendo il codice html proposto nella sezione precedente, modifichiamolo in modo tale che la prima cella si estenda su tutte e tre le righe lasciando intatte le colonne con attributo colspan:

<html>
<head>
<title>TABELLE - ROWSPAN</title>
</head>
<table border='1' width='400px'>
<tr>
	<td align='center' rowspan='3'>Cella 1</td>
	<td align='center'>Cella 2</td>
	<td align='center'>Cella 3</td>
	<td align='center'>Cella 4</td>
</tr>
<tr>
	<td align='center'>Cella 6</td>
	<td colspan='2' align='center'>Cella 7</td>
</tr>
<tr>
	<td colspan='3' align='center'>Cella 9</td>
</tr>
</table>

</body>
</html>

Di seguito è visibile la modifica apportata alla tabella con l’estensione della prima cella su tutte le righe:

Come per l’attributo colspan, anche con rowspan bisogna prestare particolare attenzione nella progettazione di una tabella e quindi valgono le regole definite in precedente. L’unica attenzione in più richiesta è quella di non perdere di vista il numero di righe su cui si estende una cella onde evitare di ritrovarsi con un numero di celle maggiore o minore su una delle righe successive.

Oltre che testo e immagini spesso è necessario inserire dei dati in tabelle e visualizzarle a video all’interno di pagine web.
Inoltre spesso una struttura tabellare è utilizzata per realizzare il layout di un sito web e per disporre i diversi elementi che costituiscono la pagina html. Ad esempio per formattare la pagina con un menu superiore, una barra laterale e un corpo centrale si utilizza una tabella con due colonne di cui una di larghezza minore per il menu laterale e una colonna larga per il corpo.
Per realizzare una tabella è necessario definire il tag:

<table border='1'>
… …
</table>

Al cui interno andranno specificate per ogni riga le celle che la compongono e quindi il contenuto. A tale scopo è necessario introdurre due tag fondamentali:

• TR è il tag che definisce una riga di una tabella;
• TD è il tag che definisce una singola cella della tabella.

La sintassi completa per realizzare una tabella è quindi la seguente:

<table border='1'>
    <tr>
        <td>Cella</td>
        …
    </tr>
    …
</table>

E’ necessario, così come definito nelle lezioni precedenti, attenersi ad una corretta nidificazione dei tag. Nel caso delle tabelle il tag TD deve essere sempre instanziato all’interno del tag TR.
Il codice html seguente descrive un esempio completo di tabella:

<html>
<head>
	<title>TABELLE HTML</title>
</head>
<body>
<h2 align='center'>La prima tabella</h2>

<table border='1'>
	<tr>
		<td>Cella 1</td>
		<td>Cella 2</td>
	</tr>
	<tr>
		<td>Cella 3</td>
		<td>Cella 4</td>
	</tr>
           <tr>
		<td>Cella 5</td>
		<td>Cella 6</td>
	</tr>
	<tr>
		<td>Cella 7</td>
		<td>Cella 8</td>
	</tr>
</table>
</body>
</html>

Analizzando il codice si evidenzia la presenza di una tabella con bordo di 1px composta da quattro righe e due colonne.
Il risultato all’interno del browser è il seguente:

Intestazione delle tabelle

E’ buona norma, soprattutto in presenza di tabelle che contengono dati, impostare una riga iniziale che funga da intestazione per le tabelle.
La sintassi è simile a quella vista per realizzare una singola riga con l’unica differenza che al posto del tag TD va utilizzato il tag TH:

<tr>
	<th>TITOLO COLONNA 1</th>
	<th>TITOLO COLONNA 2</th>
	…
</tr>

Il browser interpreterà il tag TH ed evidenzierà il contenuto utilizzando un carattere in grassetto e lo allineerà al centro della cella. Nonostante solitamente questo tag si usi nella prima riga della tabella, nulla vieta di utilizzare il tag TH in altri punti della stessa, come ad esempio riga del totale in fondo ad una tabella:

Altri attributi del tag TD

Tra gli attributi maggiormente utilizzati per il tag TD se ne identificano essenzialmente due: ALIGN e VALIGN, che rispettivamente hanno la funzione di definire un allineamento orizzontale e verticale del contenuto della cella.
Ad esempio scrivere la seguente riga di codice html:

<td align='center' valign='top'>
    Contenuto della cella...
</td>

comporta un allineamento al centro del contenuto della cella (align=’center’) ed inoltre un allineamento verso l’alto (valign=’top’) dello stesso contenuto.
Altri valori che può assumere l’attributo valign sono: BOTTOM, MIDDLE e BASELINE.
Di default la maggior parte dei browser utilizza MIDDLE come valore di valign.

Nelle lezioni precedenti è stato analizzato e approfondito il concetto di collegamento ipertestuale e quindi la sintassi del tag <a>.
Fino a questo momento si è sempre utilizzato del semplice testo per evidenziare un link, ma è pratica comune nel mondo web rendere un’immagine, un logo o un’icona cliccabile.
Immaginiamo ad esempio ad un menu html, che a differenza di quello proposto in precedenza, proponga per ogni link un bottone sottoforma di immagine gif o png.

Realizzare un link mediante un’immagine consiste essenzialmente nell’annidare un tag <img> all’interno del tag <a>:

<a href=‘pagina.html’><img src=‘immagine.jpg’ /></a>

In linea generale potremo sostenere che tutto ciò che compare all’interno del tag <a> diventa in automatico cliccabile.
Il codice sottostante descrive l’utilizzo di un logo png come link:

<html>
    <head>
    <title>IMMAGINI COME LINK</title>
    </head>
    <body>
    <div>Clicca sotto per accedere alla home : </div>
    <p align='justify'>
	<a href=‘home.html’><img src=‘home.png' align='left'/></a>
    </p>
    </body>
</html>

Di seguito è visibile il risultato nella finestra del browser, da notare che di default il browser applica un bordo blu ad indicare che l’immagine è un link.
Per rimuove il bordo è necessario semplicemente impostare l’attributo border=‘0’.

Le mappe.

Abbiamo visto che le immagini possono essere utilizzate come link con altre pagine di un sito web.
A volte è necessario far sì che solo una determinata parte di un’immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente collegamento.
La logica di una mappa html è quella di suddividere l’immagine in aree dette anche zone calde (hotspot) grazie alle quali, facendo clic su di esse, è possibile raggiungere le destinazioni dei link.
Per creare una mappa di immagine cliccabile dobbiamo utilizzare diversi comandi HTML che passiamo in rassegna:

• map genera la mappa con riferimento all’immagine da mappare;
• area genera le aree sensibili al click del mouse;
• img visualizza l’immagine da mappare, con riferimento alla mappa.

Ciascuno di questi tag ha come scopo finale quello di realizzare una mappa immagine.
Di seguito un esempio di codice html per la realizzazione di una mappa:

<map name="MiaMappa">
    <area href="pag_1.html" shape="rect" coords="100, 200, 300, 400">
    <area href="pag_2.html" shape="rect" coords="500, 600, 700, 800">
</map>
<img src="miafoto.jpg" usemap="#MiaMappa" border="0">

Analizzando nel dettaglio il codice proposto si può notare come la mappa sia contenuta all’interno del tag MAP a cui viene assegnato un nome tramite l’attributo name.
All’interno del MAP si trovano i tag AREA a cui vengono assegnati i seguenti attributi:

• href : riferimento al collegamento ipertestuale associato all’area;
• shape : descrive la forma dell’area e può assumere il valore rect, circle e polygon;
• coords : elenca le coordinate dell’area cliccabile, separate da virgole.

Infine al tag IMG viene associato l’attributo usemap (mappa da utilizzare) che accetta il nome della mappa preceduto dal cancelletto (#).
Il punto cruciale nella realizzazione di una mappa immagine è l’individuazione delle coordinate da assegnare alle varie aree. A tale scopo è necessario utilizzare appositi programmi di editing di immagini o in alternativa applicazioni che individuate le coordinate creano al volo il codice html da includere all’interno del tag MAP.

L‘allineamento delle immagini è dipeso in sostanza dagli elementi che circondano l’immagine.
Se ad esempio definiamo un’immagine dopo un div o un paragrafo questa verrà posizionata a capo rispetto al contenuto del blocco precedente.
Più interessante è invece l’allineamento di un’immagine rispetto al testo che lo circonda.

L’attributo align permette di definire il tipo di allineamento dell’immagine:

• LEFT: l’immagine è allineata alla sinistra del testo
• RIGHT: l’immagine è allineata alla destra del testo
• TOP: il testo è allineato con il margine superiore destro dell’immagine
• MIDDLE: il testo è allineato con il centro dell’immagine
• BOTTOM: il testo è allineato con il margine inferiore destro dell’immagine

Analizziamo  ad esempio il seguente codice html:

<html>
<head>
<title>POSIZIONAMENTO IMMAGINI</title>
</head>
<body>
<div>Posizionamento di un immagine rispetto al testo : </div>
<p align='justify'>
	<img src='img/promessi.jpg' align='left'/>

Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte…
….
</body>
</html>

All’interno del paragrafo viene definita un’immagine con allineamento a sinistra e di seguito il testo. Il browser interpreterà il codice e darà come risultato la seguente schermata:

In alternativa l’attributo align avrebbe potuto assumere valore right o center:

Bordo delle immagini.

Tramite l’attributo border è possibile impostare una bordatura alle immagini, specificando in pixel lo spessore del bordo:

<img src=‘immagine.jpg’ border=‘2’ alt='Testo alternativo' />

In questo caso l’immagine apparirà con un bordo nero di 2px:

Margine delle immagini.

Nonostante le regole CSS permettano di definire un margine tra un’immagine e gli elementi che lo circondano esiste la possibilità di utilizzare due attributi: vspace e hspace che rispettivamente permettono di definire una spaziatura verticale e una orizzontale per l’immagine in questione.
Ad esempio scrivendo:

<img src=‘immagine.jpg’ alt='Testo alternativo' hspace=‘20’ vspace=’10’ />

impostiamo un’immagine con una spaziatura verticale di 10px e una orizzontale di 20px. In questo caso il margine è suddiviso in maniera equa tra i due lati, in altre parole verticalmente l’immagine avrà un margine destro di 5px e un margine sinistro di 5px, ugualmente un margine superiore di 10px e uno inferiore di 10px.

Fino ad ora si è concentrata l’attenzione alla formattazione del testo, quindi paragrafi, titoli e contenitori di testo, consapevoli che il moderno web non mette a disposizione solo questo tipo di informazioni.
Siamo lontani dai siti web dei primissimi anni ’90, quando le pagine erano composte totalmente da testo, oggi è impensabile non visualizzare in una pagina web un’immagine, un video o qualche altro elemento grafico.
Per inserire un’immagine in una pagina html si utilizza il tag <img>. La sintassi per inserire un’ipotetica immagine è:

<img src=‘immagini/foto.jpg’ />

Il tag <img> si compone essenzialmente di un attributo obbligatorio src, che indica l’url dell’immagine da visualizzare.
In fase di visualizzazione quando il browser incontra il tag img, analizza l’url associato e carica l’immagine, ponendola all’interno della pagina dove questa è stata definita dallo sviluppatore.
Il seguente codice HTML descrive in maniera completa l’inserimento di un immagine in una pagina html:

<html>
     <head>
     <title>IMMAGINI</title>
     </head>

     <body>

          <div>La nostra prima immagine : </div>

          <!-- INSERISCO L’IMMAGINE logo.jpg -->
          <img src=‘img/logo.jpg’ />

     </body>
</html>

Il risultato nel browser è il seguente:

Non avendo specificato allineamento e altri attributi, l’immagine viene stampata a sinistra e dopo l’elemento che lo precede nel codice (nel nostro caso il div che contiene il testo).

I formati per le immagini web.

Nonostante non siano definiti in maniera precisa i formati ammissibili per le immagini è bene sottolineare che nella scelta del formato va tenuta in grande considerazione la pesantezza dell’immagine (espressa in byte).
I formati più indicati per il web sono sostanzialmente tre:

Indipendentemente dal formato utilizzato è importante ricordare che abusare delle immagini incide negativamente sulle prestazioni del browser. Difatti caricare una pagina html con molte immagini richiede un tempo maggiore rispetto ad una pagina con testo e poche immagini.
Una volta scelte le immagini da inserire queste vanno ottimizzate, regolando la dimensione e il formato. La regola alla quale attenersi per scegliere il formato corretto è riassunta di seguito:

• se bisogna inserire una foto allora scegliamo il formato jpg;
• se bisogna inserire un logo o un disegno scegliamo il formato gif o png.

L’attributo ALT e le regole di accessibilità.

Un aspetto importante di cui tener conto è che non tutti i browser visualizzano le immagini presenti in una pagina html, o ad esempio per scelta un utente potrebbe non visualizzare le immagini.
Alcuni utenti, quali gli ipovedenti, non sono in grado di mettere a fuoco del tutto le immagini inserite nelle pagine web, i non vedenti sono del tutto esclusi anche da questa pur limitata possibilità; altri ancora utilizzano browser che non supportano immagini e interpretano solamente i testi contenuti nelle pagine stesse.
Pensare di creare pagine web alternative a quelle che utilizzano le immagini significherebbe di fatto discriminare tali utenti da una completa fruizione di tutto ciò che di positivo spesso riserva la rete.
Fornire invece un testo equivalente per le immagini garantisce in tutti i casi sopraelencati l’accessibilità, oltre a essere utile indistintamente a tutti gli utenti: si tratta in ogni caso di un elemento irrinunciabile per assicurare sempre e comunque accessibilità alle immagini inserite in una pagina web.

L’attributo ALT permette appunto di definire un testo da visualizzare in assenza dell’immagine.

<img src=‘img/logo.jpg’  alt=‘Il logo del corso HTML’ />

Seppur non obbligatorio come attributo, l’uso dell’attributo alt è opportuno sulle principali immagini incluse in una pagina, in modo particolare nel caso in cui l’immagine rappresenta un prodotto, un servizio, o comunque un elemento relativo alla pagina.
Utilizzando l’attributo alt si potrà notare come in Internet Explorer il testo venga visualizzato anche in presenza dell’immagine qualora l’utente trascini su di essa il puntatore del mouse; negli altri browser invece il testo viene visualizzato solo in assenza dell’immagine.

Altezza e larghezza delle immagini.

Gli attributi width e height possono essere usati per impostare l’altezza e la larghezza di una immagine. Per impostare l’altezza e la larghezza viene usato, solitamente, un valore in pixel.
A differenza dei centimetri, i pixel sono unità di misura relative che dipendono dalla risoluzione dello schermo. Ad un utente con uno schermo ad alta risoluzione, 25 pixel possono corrispondere ad 1 centimetro, mentre gli stessi 25 pixel su uno schermo a bassa risoluzione possono corrispondere sullo schermo a 1.5 centimetri.
Se non vengono impostate l’altezza e la larghezza, l’immagine verrà inserita con le sue dimensioni originali. Bisogna comunque tenere in considerazione che il browser conosce le dimensioni di un’immagine solo nel momento in cui questa viene caricata completamente, in ogni caso è consigliabile indicare le dimensioni dell’immagine favorendo la realizzazione del layout al browser.
Gli attributi width e height possono inoltre essere utilizzati per scalare le immagini troppo grandi.

Il codice html sottostante descrive l’utilizzo degli attributi width e height:

<html>
     <head>
     <title>ALTEZZA E LARGHEZZA IMMAGINI</title>
     </head>
     <body>
     <div>Dimensione delle immagini : </div>

     <img src='img/logo.jpg' width='82px' height='200px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='70px' height='170px' alt='Il logo del corso HTML!'/>
     <img src='img/logo.jpg' width='50px' height='150px' alt='Il logo del corso HTML!'/>

     </body>
</html>

Nel codice sono presenti tre immagini in sequenza con dimensioni diminuite di volta in volta.
Di seguito è mostrato il risultato:

In definitiva la sintassi per impostare altezza e larghezza di un immagine è:

<img src=”‘immagine.jpg’” alt=”" width=”‘100px’” height=”‘100px’” />

Come detto nelle lezioni precedenti, i link permettono di collegare tra loro le varie sezioni di un sito web.
Solitamente lo strumento che viene reso disponibile agli utenti per accedere alle varie pagine è il cosiddetto menu. Nel menu sono raccolti e ordinati i link alle varie pagine.
Gli aspetti grafici dei menu sono vari e spesso molto accattivanti, devono non solo facilitare la navigazione del sito ma anche attirare l’attenzione dell’utente verso i vari contenuti proposti.

Progettazione del menu.

Il menu che realizzeremo sarà un menu di tipo orizzontale. I vari link saranno disposti l’uno di fianco all’altro all’interno di bottoni dalla forma rettangolare.
Grazie alle conoscenze fin’ora acquisite utilizzeremo DIV e paragrafi per disporre i vari elementi del menu. Inoltre verrà introdotto un minimo di regole di stile per rendere più gradevole l’aspetto del menu.

Ecco il codice html completo:

<html>
<head>
	<title>MENU</title>
</head>

<body>
<h2 align='center'>Titolo del sito</h2>

<div align='center' style='background-color:blue; padding:4px;'>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>HOME</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CHI SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>DOVE SIAMO</a></span>
	<span style="background-color:orange; border:2px solid black; padding:4px; 	width:150px"><a href='#'>CONTATTI</a></span>
</div>

<hr/>

<p align='justify'>
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un'ampia costiera dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni…
….
</p>

<hr/>

</body>
</html>

Una volta salvato il file con estensione .html il risultato è il seguente:

Analizzando il codice html si può innanzitutto notare la nidificazione di tag DIV, SPAN e A per realizzare la parte alta della pagina.
Andando per ordine, all’interno del tag body viene definito innanzitutto un titolo grazie al tag <h2>, le successive righe di codice implementano il menu orizzontale: un DIV contenitore con allineamento centrale al quale è associato la seguente riga di stile che definisce un colore di sfondo e una spaziatura interna di 4px:

style=’background-color:blue; padding:4px;‘

Nelle lezioni dedicate al CSS saranno approfondite le regole di stile.

Il DIV conterrà i singoli bottoni che comporranno il menu, dove ogni bottone sarà identificato da uno span al cui interno sarà presente il link:

<span style="background-color:orange; border:2px solid black; padding:4px; width:150px">
     <a href=‘index.html'>HOME</a>
</span>

Tralasciando nel dettaglio le regole di stile è importante notare la sintassi e la nidificazione del link.
Continuando ad analizzare il codice si può notare la presenza di un separatore lineare <hr/> e la presenza di un paragrafo che racchiude il testo della pagina.

Un link oltre che puntare all’inizio di un nuovo documento HTML, permette di visualizzare il documento attualmente aperto a partire da un determinato punto che chiameremo segnalibro.
Questi tipi di link vengono denominati link interni, difatti sono definiti in una pagina HTML e puntato ad una porzione della stessa pagina.
Per realizzare un link interno è necessario procedere in questo modo:

• definire il segnalibro assegnandogli un nome univoco;
• definire un link che conduca al segnalibro.

La seguente riga di codice descrive un segnalibro o ancora:

<a name="capitolo1"></a>

Il nome capitolo1 viene assegnato al link dall’attributo name dell’elemento a. Il link che permetterà di raggiungere il segnalibro sarà:

<a  href="#capitolo1">Vai al capitolo 1</a>

Il tag a definisce un link ipertestuale con l’ancora capitolo1 come destinazione. Il simbolo # indica al browser che l’ancora va ricercata all’interno della pagina attuale.
Diversamente è possibile collegare un link ad un segnalibro definito in un’altra pagina nel seguente modo:

<a href="index.html#capitolo1">Vai al capitolo 1</a>

In questo caso l’ancora capitolo1 sarà ricercata nella pagina index.html.
I link interni vengono utilizzati soprattutto per facilitare la lettura e navigazione di pagine HTML con un grande contenuto di informazioni.

Utilizzo dei segnalibri.

Lo scopo principale di un segnalibro html è quello di facilitare la navigazione di pagine complesse, un classico esempio che ne chiarisce l’utilità è quello di una pagina HTML che contiene il testo di un libro suddiviso per capitoli.
Un indice iniziale linkato sul titolo di ogni capitolo, poterà l’utente a visualizzare il testo del capitolo in questione. Oppure, ad esempio, una semplice pagina html suddivisa in paragrafi che fornisce nella parte alta un menu dove ogni voce conduce ad un paragrafo e quindi ad un segnalibro.
Il seguente codice html descrive un esempio completo:

<html>
    <head>
        <title>SEGNALIBRI</title>
    </head>
    <body>
        <h2>I Promessi Sposi</h2>
        <a href='#capitolo1'>Capitolo 1</a><br/>
        <a href='#capitolo2'>Capitolo 2</a><br/>
        <a href='#capitolo3'>Capitolo 3</a><br/>
        <hr/>
        <p align='justify'>
	<a name='capitolo1'></a>
	<h3>CAPITOLO 1</h3>
	Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non 	interrotte di monti, tutto a seni e a golfi …
	...
        </p>
        <hr/>
        <p align='justify'>
	<a name='capitolo2'></a>
	<h3>CAPITOLO 2</h3>
	Si racconta che il principe di Condé dormì profondamente la notte avanti la 	giornata di Rocroi …
	...
        </p>
        <hr/>
        <p align='justify'>
            <a name='capitolo3'></a>
            <h3>CAPITOLO 3</h3>
	 Lucia entrò nella stanza terrena, mentre Renzo stava angosciosamente 	informando Agnese, la quale angosciosamente lo ascoltava …
	 ...
        </p>
        <hr/>
    </body>
</html>

All’apertura della pagina nel browser verrà visualizzata la parte alta, che contiene il titolo e i tre link che conducono ai capitoli dei Promessi Sposi.

Evitando quindi di scrollare la pagina si potrà visualizzare in cima il capitolo 2, cliccando sull’apposito link.

Da notare infine come il funzionamento dei segnalibri sia dipeso non solo dalla struttura della pagina ma anche dalla quantità di spazio che questa occupa nella finestra del browser.
Definire uno o più segnalibri in una pagina che viene visualizzata per intero nel browser (senza la presenza dello scroll laterale) non produce l’effetto desiderato perché il segnalibro in questione punterebbe ad una porzione di pagina già in visualizzazione.

Come collegare i documenti.

I collegamenti ipertestuali sono la base del web. Chiunque navighi sul web si imbatte continuamente nei cosiddetti link che uniscono una pagina html ad un’altra in maniera tale che nessuna di queste resti irraggiungibile.
La caratteristica primaria degli ipertesti è quella di formattare i documenti in forma non sequenziale. Grazie ai collegamenti ipertestuali (link) è possibile leggere i documenti senza seguire necessariamente un ordine sequenziale.
La peculiarità di saltare da un punto all’altro del documento è tipica del WWW, dove spesso seguendo un documento si passa da un sito all’altro senza soluzione di continuità.
La maggiora parte dei link vengono individuati nel browser con un testo sottolineato di colore blu.
Passando il puntatore del mouse sul testo evidenziato il cursore assume il simbolo della mano e nella barra di stato della finestra viene mostrato l’url del link che è possibile raggiungere al successivo clic del tasto sinistro.

Il tag <a>.

La struttura base per creare un link è la seguente:

<a href="http://www.sito.com">vai al sito</a>

Nel parametro href inseriamo l’indirizzo della pagina o del sito; fra i tag <a> e </a> metteremo il testo o l’oggetto che vogliamo rendere cliccabile.
Difatti tra i tag <a> può anche non comparire un testo, bensì un’immagine o un oggetto che fungono da richiamo ad un’altra pagina. Successivamente sarà descritto un esempio nel quale un’immagine fungerà da link.
All’interno dell’attributo href è possibile specificare anche solo il nome della pagina a cui collegare il link, ad esempio scrivendo:

<a href="pagina.html">Link relativo</a>

Questa soluzione è adottata qualora ci stessimo riferendo ad una pagina dello stesso dominio di appartenenza della pagina nella quale è definito il link. Inoltre come link si può far riferimento direttamente ad una directory, il server in questo caso restituisce il file index.html o altri file di default per cui è stato settato.

Ad esempio se si scrivesse:

<a href="http://www.sito.com/cartella/">Link a directory</a>

verremmo indirizzati al file index.html presente nella directory denominata cartella. Qualora il file non sia presente il browser lancerà un errore 404 che indica l’assenza della risorsa richiesta.

L’attributo target.

Con l’attributo target possiamo far capire al browser su quale finestra dovrà aprire il collegamento:

<a href="http://www.sito.com/" target="nome finestra">Link in altra finestra</a>

Questo attributo risulta indispensabile qualora ci si trovasse a lavorare con una pagina strutturata su più frame (più sottofinestre), per aggiornare tramite link solo il contenuto di una finestra.
Con l’uso sempre minore dei frame (che vedremo nelle lezioni successive), l’attributo target viene particolarmente utilizzato per aprire un collegamento in una nuova finestra senza sovrascrivere il contenuto della finestra di partenza (utile per saltare da un sito ad un altro).
In questo caso l’attributo target assume il parametro “_blank”:

<a href="http://www.sito.com/" target="_blank">Link in nuova finestra</a>

Il risultato ottenuto è mostrato sotto:

Il clic sul link della prima finestra attiva l’apertura di una seconda finestra che contiene la risorsa richiesta.

Ulteriori parametri per l’attributo target sono:

• target=”_parent” Apre il collegamento nel frame o nella finestra genitore   della finestra.
• target=”_self” Apre il collegamento nello stesso frame o finestra.
• target=”_top” Apre il collegamento nel frame o finestra più importante.

Assegnare un titolo al link.

Per i collegamenti ipertestuali è possibile assegnare un testo di commento, attivato quando il mouse passa sull’area di link simile.
Questa pratica può essere utile sostanzialmente per due motivi :

• per aiutare i motori di ricerca ad indicizzare in maniera efficiente un sito;
• per fornire a prima vista all’utente una sorta di introduzione al contenuto della pagina linkata.

Il seguente codice HTML descrive l’utilizzo dell’attributo title:

<html>
    <head>
        <title>TITOLO DEL LINK</title>
    </head>
    <body>
        <p align='justify'>
	Per prenotare gli esami di informatica &egrave; necessario consultare la tabella accessibile da<br/>
	<a href='esami.html' title='Qui è possibile consultare il calendario degli esami'>
		qui...
	</a>
        </p>
    </body>
</html>

Il risultato ottenuto è mostrato sotto, al passaggio del mouse sul link viene visualizzato per alcuni secondi il titolo.