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'/>

Informatica per le scienze umane
R. Botteri, F. Donatantonio , M. Ceracchi
(2011) Collana Quaderni di Lettere – Ed. C.E.S.D. srl

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso “Informatica per le Scienze Umane” il cui obiettivo è quello di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica, che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati all’attività di un umanista, mediante le lezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo per facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi, affinare e personalizzare le ricerche di area umanistica in Internet e consultare/creare archivi e biblioteche digitali.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

Fondamenti di Informatica
R. Botteri, F. Donatantonio, M. Ceracchi
(2011) Collana Quaderni di Psicologia – Ed. C.E.S.D. srl

Il presente compendio raccoglie, in un unico testo, una selezione di temi tratti dalle lezioni del corso di “Fondamenti di Informatica” per la Facoltà di Psicologia ed ha l’obiettivo di fornire le conoscenze di base degli aspetti teorici e pratici dell’informatica che l’allievo potrà poi valorizzare nel prosieguo degli studi e nell’ ambiente di lavoro.
Nella stessa ottica gli argomenti presentati approfondiscono aspetti più strettamente legati alla psicologia, mediante le sezioni dedicate:
- all’utilizzo dell’informatica nelle diverse realtà professionali;
- al tipo di relazione che esiste fra l’uomo e il personal computer;
- all’uso ed allo sviluppo di strumenti informatici operativi di semplice utilizzo, tesi a facilitare l’apprendimento altrui mediante la creazione di modelli didattici innovativi.
La natura semplificata della trattazione delle varie componenti del programma rende tale compendio fruibile anche al lettore che intende avvicinarsi all’informatica, a Windows 7 e alla Suite MS Office 2010, indipendentemente dalla necessità di sostenere un esame universitario.

In questo articolo realizzeremo un plugin jQuery che ci permetta di implementare una tabella HTML con le righe di due colori alternati.
In altre parole la nostra tabella avrà tutte le righe pari (2,4,6 ecc..) di un colore e quelle dispari (1,3,5 ecc..) di un altro colore.
Personalizzeremo, inoltre, il plugin con ulteriori caratteristiche. Ad esempio al passaggio del mouse su una riga, questa si animerà cambiando di colore e font.

Iniziamo subito lo sviluppo del plugin, che chiameremo “tzebra“, determinando quali saranno i parametri da passare alla funzione:

• Colore per righe dispari
• Colore per righe pari
• Colore per animazione riga

Una volta terminato il lavoro vorremmo poter invocare il plugin con questa sintassi:

$('#myTable').tzebra({
	color1: '#e0ffff',
	color2: '#add8e6',
	focusColor: '#00ffff'
});

Ottenendo quindi il seguente risultato:

Introduciamo il codice del plugin:

(function($){
	$.fn.tzebra = function(options) {

	var defaults = {
	   color1: "#FFFFFF",
	   color2: "#CCCCCC",
	   focusColor: ''
	};

	var options = $.extend(defaults, options);

	return this.each(function() {
		var id_table = $(this).attr('id');

		$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
		$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

		if(options.focusColor!=''){
			$('#'+id_table+ ' tbody tr').css('cursor','pointer');

			$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color1);
				$(this).css('font-weight','normal');
			});

			$('#'+id_table+ ' tbody tr:even').mouseover(function() {
				$(this).css('background-color',options.focusColor);
				$(this).css('font-weight','bold');
			}).mouseout(function(){
				$(this).css('background-color',options.color2);
				$(this).css('font-weight','normal');
			});
		}

		return false;
	});

	};
})(jQuery);

Analizziamo il codice focalizzando l’attenzione sulle istruzioni fondamentali che lo compongono.
Innanzitutto passiamo alla funzione i parametri all’interno dell’array “options“, per intenderci i tre colori da noi scelti. Nell’array “default” abbiamo invece impostato i tre colori di default qualora i parametri in input siano nulli.
Nella variabile “id_table” scriviamo l’ID della tabella, utilizzando il metodo attr; l’ID ci servirà per accedere alla nostra tabella.
I passi successivi creano l’effetto zebrato:

$('#'+id_table+ ' tbody tr:odd').css('background-color',options.color1);
$('#'+id_table+ ' tbody tr:even').css('background-color',options.color2);

Tramite un opportuno selettore impostiamo rispettivamente il colore per le righe pari(odd) e poi per quelle dispari(even), manipolando la proprietà background-color grazie al metodo css di jQuery.
Le righe pari avranno come colore di sfondo options.color1, mentre le righe dispari avranno come colore options.color2
A questo punto abbiamo reso zebrata la nostra tabella, resta da animare le righe al passaggio del mouse.
Da notare che di default abbiamo settato il focusColor a blank per permettere una maggiore personalizzazione del nostro plugin, infatti potremo evitare di passare come parametro il terzo colore (il colore del focus riga) lasciando la tabella al semplice stato zebrato.
Una volta controllato che sia stato impostato il focusColor aggiungiamo gli eventi mouseover e mouseout sulle righe della nostra tabella, modificando il css prima per le righe dispari e poi per quelle pari.
I seguenti passi, ad esempio, aggiungono l’animazione sulle righe pari:

$('#'+id_table+ ' tbody tr:odd').mouseover(function() {
	$(this).css('background-color',options.focusColor);
	$(this).css('font-weight','bold');
 }).mouseout(function(){
	$(this).css('background-color',options.color1);
	$(this).css('font-weight','normal');
});

Al passaggio del mouse su una riga questa cambia di colore e il font diventa grassetto, quando il muose lascia la riga si ritorna allo stato precedente ripristinando colore e font.

Il plugin è concluso e pronto per l’uso.
Prima però è necessario salvare il codice in un file con estensione .js che chiameremo jquery.tzebra.js rispettando così la sintassi proposta da jQuery (jquery.[nome del plugin].js).

Richiamiamo il codice del plugin, realizziamo una semplice tabella e invochiamo il metodo tzebra:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tabella zebrata</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.tzebra.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
    $('#myTable').tzebra({
		color1: '#e0ffff',
		color2: '#add8e6',
		focusColor: '#00ffff'
	});
});
</script>

</head>
<body>

<table id='myTable' border='0' cellpadding="0" cellspacing="0">
<thead>
<tr><th>Nome</th><th>Cognome</th><th>Voto Informatica</th><th>Voto Lettere</th></tr>
</thead>
<tbody>
<tr><td>Marco</td><td>Rossi</td><td>30</td><td>21</td></tr>
<tr><td>Luigi</td><td>Bianchi</td><td>22</td><td>26</td></tr>
<tr><td>Marco</td><td>Neri</td><td>24</td><td>24</td></tr>
<tr><td>Giuseppe</td><td>Rossi</td><td>18</td><td>20</td></tr>
<tr><td>Enrico</td><td>Giallo</td><td>20</td><td>18</td></tr>
<tr><td>Fabio</td><td>Neroni</td><td>27</td><td>30</td></tr>
</tbody>
</table>

</body>
</html>

L’unica attenzione che dobbiamo riporre nello scrivere il codice HTML della tabella è di racchiudere l’intestazione nel tag thead e il corpo nel tag tbody.
Al caricamento della pagina invochiamo tzebra passando i tre colori scelti, oppure volendo solo i primi due per gestire unicamente l’effetto zebrato.

Cliccando qui è possibile vedere in azione il plugin tzebra.

Cliccando qui è possibile scaricare il codice del plugin tzebra.

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.