Appunti di Html by Fabio Mocciaro

Ultima Revisione: 29/05/ 2008 Dispensa realizzata da Fabio Mocciaro

Appunti di html

L’Html è il linguaggio con cui le pagine web vengono scritte e progettate, anche se molti progettisti si rifiutano di pensare all'html come ad un linguaggio di layout. In effetti l'Html non è nato per essere un linguaggio di progettazione, ma per essere un linguaggio di visualizzazione, che possa essere mostrato in modo diverso a seconda dei diversi computer e dei diversi sistemi operativi. L'Html, però, è il linguaggio del web e quindi se si vuole costruire un sito o una pagina web bisogna conoscerlo. Magari non è necessario conoscere tutti i tag e tutti gli attributi, anche perchè oggi disponiamo di editor WYSIWYG molto potenti e precisi, ma conoscere almeno a grandi linee il linguaggio Html è fondamentale e risulta di grande aiuto nella realizzazione di qualunque progetto web. Allora in queste pagine troverete argomentazioni, che non costituiscono una bibbia dell'Html, ma racchiudono in modo semplice e sintetico i concetti di base di questo linguaggio.

Introduzione • Notizie storiche: com'è nato il linguaggio Html. • Come funziona: cos'è un file Html e come si crea.

Struttura • • • •

I tag essenziali: <HTML>, <HEAD> e <BODY>. I tag di intestazione: <TITLE> e <META>. Il corpo di una pagina Html: <BODY> e i suoi attributi. I collegamenti ipertestuali: cosa sono e come si creano.

Gestione del testo • • • •

Impostare i caratteri: <FONT> e i suoi attributi. Paragrafi e allineamenti: <P> e ALIGN. Attributi di formattazione logica e fisica: stili fisici e stili logici del testo. Titoli ed elenchi puntati e numerati: tag e attributi per definirli.

Le immagini in Html • Tag IMG: inserimento delle immagini e definizione degli attributi.

Usare le tabelle in Html • Tag TABLE: <TABLE> e i suoi attributi.

Cosa sono i frame Tag FRAMESET: <FRAMESET> e i suoi attributi.

Notizie storiche Tim Berners-Lee stava cercando un modo per gestire e distribuire fra i colleghi grandi quantità d'informazioni e nel 1989 propose l'adozione del linguaggio HTML al laboratorio europeo per la fisica delle particelle (CERN). Egli propose una rete di documenti connessi tramite collegamenti ipertestuali e ospitati da computer chiamati server ipertestuali. Seguendo i progressi di questa idea, la piccola rete iniziale divenne il World Wide Web. Berners-Lee creò un'applicazione del linguaggio SGML (Standard Generalised Markup Language), un sistema standard utilizzabile per specificare la struttura di un documento, e lo chiamò HTML (HyperText Markup Language). Il linguaggio HTML riduce enormemente la complessità dei linguaggi SGML per migliorare la trasmissione dei dati via Internet. La prima bozza del linguaggio HTML includeva elementi quali i titoli, i paragrafi e gli elenchi di punti. Il linguaggio HTML è stato concepito per rappresentare documenti dalla struttura molto semplice e non era adatto a gestire la grande varietà d'informazioni attualmente in uso, quindi è stato manipolato in migliaia di modi per comprendere la grande varietà d'informazioni disponibili nel Web.

Il concetto che sta alla base del World Wide Web e l'idea più rivoluzionaria concepita da Berners-Lee è l'uso dell'ipertesto per collegare fra loro le informazioni disponibili in Internet. Un ipertesto è un modo non lineare di organizzazione delle informazioni. Quando si usa un sistema ipertestuale si può saltare da un argomento a un altro argomento correlato per trovare rapidamente le informazioni cui si è interessati e poi tornare al punto di partenza o passare a un altro argomento. L'autore dell'ipertesto sceglie i termini da trasformare in collegamenti ipertestuali e la destinazione del clic dell'utente. Nel Web i collegamenti ipertestuali, che possono essere testi o immagini, possono inviare ad un'altra pagina Web o possono aprire o prelevare un file, ad esempio un suono, un'immagine, un filmato o un file eseguibile. Inizialmente Internet era costituita solo da file di testo e binari; quando furono introdotte queste nuove funzionalità ipertestuali, si dovette coniare un nuovo termine: ipermedia, il concatenamento d'informazioni di natura eterogenea tramite il World Wide Web.

Come funziona Un file HTML non è altro che un file di testo, sostanzialmente identico ai file di tipo TXT che si possono scrivere con un comune editor di testo, come il blocco note di windows. Per funzionare come pagina web, questo file di testo deve essere rinominato con il suffisso .HTML o .HTM e deve contenere, oltre al testo vero e proprio, anche le istruzioni che consentono al browser di riconoscerlo e gestirlo correttamente. Queste istruzioni sono chiamate Tag (marcatori). Un tag è un comando racchiuso tra i segni < (minore) e > (maggiore), chiamati anche parentesi angolari. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. Nella maggior parte dei casi i tag funzionano in coppia, richiedono cioè un'istruzione d'apertura ed una di chiusura secondo lo schema: <TAG DI INIZIO>elemento cui si applica l'istruzione</TAG DI FINE> È anche possibile includere coppie di tag all'interno d'altre coppie di tag mantenendo una sequenza simmetrica. A titolo d'esempio, il tag <B> identifica il grassetto ed il tag <I> il corsivo. Così per formattare in grassetto e corsivo una parola si deve scrivere: <B><I>Testo</I></B> oppure: <I><B>Testo</B></I> ma non:

<B><I>Testo</B></I> I tag in generale possono contenere attributi che ne definiscono determinate proprietà. Ogni attributo può assumere differenti valori. Quasi tutti i tag prevedono attributi che sono specifiche aggiuntive che ne influenzano il risultato. La sintassi è: <TAG ATTRIBUTO="valore">; ad esempio: <IMG SRC="foto.jpg">. Le virgolette che racchiudono il valore di un attributo a volte sono obbligatorie ed a volte no. In ogni caso sono sempre accettabili anche quando non sono necessarie. Come già detto, per creare un file HTML è sufficiente un editor di testo come il blocco note di Windows. Esistono anche programmi specializzati nell'elaborazione di pagine web e sono i cosiddetti editor tipo WYSIWYG (What You See Is What You Get: quello che vedi è quello che ottieni) come Macromedia Dreamweaver e Adobe GoLive! per citarne alcuni soggetti al pagamento di una licenza; Nvu, invece, come prodotto OpenSource e Freeware. Con questi software si opera in modo grafico e intuitivo, manipolando oggetti e pulsanti tramite il mouse e quindi non si deve scrivere a mano il codice HTML riga per riga e tag per tag. Lo svantaggio è che non tutti questi editor generano un codice ottimizzato e perfettamente standard. Conoscendo bene il linguaggio HTML si può abbozzare una pagina o un intero sito con un editor WYSIWYG e in seguito apportare a mano al codice HTML generato tutti i ritocchi necessari per raffinare e perfezionare ulteriormente i risultati.

Struttura

I tag essenziali La struttura essenziale di ogni pagina web e costituita da: I tag <HTML> e </HTML> all'inizio ed alla fine del documento; essi indicano al browser che tutto ciò che è compreso nel mezzo è una pagina web. I tag <HEAD> e </HEAD> racchiudono l'intestazione del documento dove si possono inserire informazioni che non vengono visualizzate nella pagina, ma che ne descrivono caratteristiche come titolo, autore e parole-chiave. Quando il browser incontra questi simboli capisce che si tratta d'istruzione da eseguire e non di testo da visualizzare sullo schermo. I tag <BODY> e </BODY> racchiudono il corpo del documento dove si inserisce il contenuto da visualizzare nella pagina (testo, collegamenti, immagini e così via).

Esempio di pagina web vuota: <HTML> <HEAD></HEAD> <BODY></BODY> </HTML> Il codice base di ogni pagina web può contenere altri elementi aggiuntivi come: <!DOCTYPE attributi>: questo tag serve a dichiarare la versione HTML su cui il documento è basato e va inserito all'inizio del file prima di <HTML>....</HTML>. <!- commento ->: questo tag consente di commentare alcune parti del codice della pagina e può essere inserito in qualsiasi punto. Quando nel codice HTML si inseriscono questi tag aggiuntivi bisogna fare sempre attenzione a non accrescere esageratamente ed inutilmente le dimensioni della pagina che incidono sensibilmente sui tempi di trasmissione, caricamento e visualizzazione nel browser.

I tag di intestazione I tag di intestazione sono:<TITLE> e <META>. Con <TITLE> si definisce il titolo della pagina web. Il titolo appare sulla barra superiore della finestra del browser quando la pagina viene visualizzata durante la navigazione. Questo tag richiede un'istruzione di apertura ed una di chiusura. La sintassi corretta è: <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> È buona norma specificare il titolo di ogni pagina web perché una pagina senza titolo è anonima e poco professionale. Non è possibile inserire nella stessa intestazione più di un tag <TITLE>. Mediante il tag <META> si possono inserire nell'intestazione dei dati che non vengono visualizzati nella pagina ma servono al browser e ai motori di ricerca per gestirne i contenuti in modo più efficace. È possibile specificare con il tag <META> informazioni come: il nome dell'autore della pagina, una breve descrizione dei contenuti della pagina ed un elenco schematico di parole-chiave legate ai contenuti. Il tag <META> non richiede chiusura ma l'aggiunta di alcuni attributi e dei rispettivi valori. La sintassi generica è: <META ATTRIBUTO1="VALORE" ATTRIBUTO2="VALORE">

dove la voce ATTRIBUTO1 serve ad indicare il tipo di informazione e la voce ATTRIBUTO2 serve a specificare il contenuto concreto della meta-informazione. Per inserire nell'intestazione il nome dell'autore si utilizza: <META NAME=author CONTENT="nome e cognome"> Per inserire nell'intestazione una descrizione del documento si utilizza: <META NAME=decription CONTENT="breve descrizione della pagina"> Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza: <META NAME=keywords CONTENT="parola1, parola2, parola3, parola4> Le parole chiave possono essere separate sia da spazi che da virgole; alcuni motori di ricerca prediligono la prima tecnica, altri la seconda.

Il corpo di una pagina Html La sezione <BODY> è il corpo principale del documento HTML dove vanno inseriti tutti i contenuti che devono apparire nella pagina web. Vedremo adesso alcune caratteristiche generali del corpo del documento, come lo sfondo della pagina, il colore del testo ed il colore dei collegamenti ipertestuali, che possono essere specificate mediante attributi da aggiungere al tag <BODY>. Per impostare un colore come sfondo della pagina web si usa l'attributo BGCOLOR. Se vogliamo realizzare una pagina con lo sfondo nero scriveremo allora: <BODY BGCOLOR="#000000"> dove il codice del colore è in formato esadecimale. Si può indicare il colore mediante il nome in inglese anziché il formato esadecimale: <BODY BGCOLOR="black"> Questa però non è una pratica comune perché non tutti i browser sono in grado di interpretare correttamente tale genere di espressione. È possibile impostare come sfondo della pagina web un'immagine in formato GIF o JPEG utilizzando l'attributo BACKGROUND secondo la sintassi: <BODY BACKGROUND="percorso e nome del file">

Se l'immagine si trova nella stessa cartella della pagina HTML e si chiama sfondo.gif scriveremo: <BODY BACKGROUND="sfondo.gif"> Inserendo un'immagine come sfondo della pagina web, questa viene automaticamente replicata dal browser in modo da coprire l'intero spazio visibile. Allora è opportuno scegliere un'immagine che si presti ad essere replicata e affiancata in un numero indefinito di copie, senza che si vedano le giunture o si creino stacchi poco estetici. Per impostare a priori il colore del testo del testo della pagina si usa l'attributo <TEXT> secondo la sintassi: <BODY TEXT="#codice del colore"> Se non specificato, il colore di default del testo è il nero. Tramite gli attributi del tag <BODY> si possono definire anche i colori dei collegamenti ipertestuali. I colori da definire sono tre: per i collegamenti ipertestuali in condizioni normali si usa l'attributo LINK="codice del colore"; per i collegamenti attivi, nel momento cioè in cui vi si fa clic, si usa l'attributo ALINK="codice del colore"; per i collegamenti già visitati si usa l'attributo VLINK="codice del colore". In pratica per personalizzare il colore dei collegamenti la sintassi è: <BODY LINK="colore1" ALINK="colore2" VLINK="colore3">

I collegamenti ipertestuali I collegamenti ipertestuali si creano associando l'indirizzo (percorso/nome file) del nodo di destinazione ad un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine. Questa associazione è basata sull'utilizzo del tag <A HREF> dove A sta per ancoraggio ed HREF è l'abbreviazione di Hypertext-Refernce (riferimento ipertestuale). Per creare un collegamento verso un'altra pagina dello stesso sito la sintassi è: <A HREF="pagina2.html"> Vai a pagina 2 </A> Affinché il collegamento funzioni è fondamentale scrivere il nome del file di destinazione correttamente, rispettando maiuscole e minuscole. Nel caso in cui il file di destinazione non si trovi nella stessa directory del file di posizione bisogna specificare anche il percorso completo. Il tag <A HREF> permette di puntare un collegamento anziché ad una pagina web ad un'immagine. La sintassi è: <A HREF="foto.jpg"> Vai a foto </A>

Anche in questo caso bisogna specificare correttamente il nome dell'immagine e l'eventuale percorso; supponendo che l'immagine si trovi nella cartella images si dovrà scrivere: <A HREF="images/foto.jpg"> Vai a foto </A> Se si vuole creare un collegamento ad un file da aprire o da scaricare come ad esempio un filmato o un pacchetto compresso la sintassi è: <A HREF="file.zip"> Scarica il file in formato zip </A> dove “file.zip” è il file che verrà scaricato sul computer di chi naviga. Per creare un collegamento verso un'altro sito web è sufficiente inserire nel tag <A HREF> l'indirizzo completo del sito in questione: <A HREF=http://www.enaippalermo.net> Sito istituzionale dell’Ente</A>

Quando una pagina è molto lunga e suddivisa in sezioni distinte si possono creare dei collegamenti all'interno della stessa pagina che permettono al lettore di saltare facilmente da un punto all'altro del testo. Per creare i collegamenti interni bisogna innanzitutto definire le destinazioni (ancore) nei vari punti prescelti mediante il tag <A NAME="nome scelto dal webmaster">. Supponiamo di aver definito due destinazioni all'interno della nostra pagina: <A NAME="sezione1"> Sezione 1 </A> <A NAME="sezione2"> Sezione 2 </A> adesso possiamo creare i collegamenti che ci portano alle due destinazioni secondo la sintassi: <A HREF="#sezione1"> Vai alla sezione 1 </A> <A HREF="#sezione2"> Vai alla sezione 2 </A> Si possono anche combinare collegamenti esterni ed interni, cioè definire un collegamento ipertestuale che punta ad un'ancora specifica all'interno di un'altra pagina web. <A HREF="pagina2.html#sezione1"> Vai alla sezione 1 della pagina 2 </A> Naturalmente anche in questo caso bisogna aver definito in precedenza l'ancora di destinazione nella pagina2.html.

È consigliabile inserire nelle proprie pagine web un indirizzo di posta elettronica cui i visitatori possano rivolgersi. Allora si può inserire un indirizzo cliccabile, associato cioè alla casella e-mail corrispondente, in modo che l'invio del messaggio sia quasi automatizzato. La sintassi è: <A HREF="mailto:info@enaippalermo.net> Scriveteci per informazioni </A> Fin ora abbiamo visto collegamenti associati ad un testo, ma i collegamenti possono essere associati anche ad un'immagine. Quindi è possibile avere un'immagine cliccabile che ci porti ad un'altra pagina web, a un sito, ad una sezione e via dicendo. Per associare un collegamento ad un'immagine si usa il tag <IMG SRC> con l'attributo BORDER="0". Ad esempio: <A HREF="pagina2.html"><IMG SRC="pagina2.gif" BORDER="0"></A> Se non si specifica l'attributo BORDER="0" l'immagine apparirà contornata da un profilo colorato e ciò è sconsigliabile dal punto di vista estetico. Quando si clicca su un collegamento in una pagina web, viene caricata la nuova destinazione (immagine, pagina o sito) nella stessa finestra del browser. Seguendo i vari collegamenti ipertestuali, il lettore potrebbe non ricordarsi più il punto di destinazione. Per prevenire questo inconveniente si può fare in modo che la destinazione del collegamento venga visualizzata in una nuova finestra del browser che si sovrappone a quella di partenza. Per ottenere questo risultato basta aggiungere al tag <A HREF> di partenza l'attributo TARGET. Ad esempio: <A HREF="pagina2.html" TARGET="_blank"> Vai a pagina 2 </A> Il valore dell'attributo TARGET (nell'esempio:_blank) è un nome convenzionale e può essere inventato di sana pianta senza alcun vincolo. Il suo effetto è di aprire in ogni caso una finestra a sé stante.

Gestione del testo

Impostare i caratteri Le prime versioni del linguaggio HTML così come le prime versioni dei browser consentivano unicamente la scelta tra due tipi di caratteri, uno a spaziatura variabile, analogo al Times, che è il tipo di carattere predefinito, ed uno a spaziatura fissa analogo al Courier. Nella versione 3.2 di HTML è stato introdotto il tag <FONT> che permette di personalizzare l'aspetto del testo tramite gli attributi FACE per impostare il tipo di carattere, COLOR per impostare il

colore del testo e SIZE per impostare la dimensione del testo. La sintassi per impostare il tipo di carattere è: <FONT FACE="tipo di carattere"> testo </FONT> Quando si usa questo tag bisogna prestare attenzione al fatto che questa istruzione non è interpretata correttamente dalle versioni più vecchie dei browser. In particolare per Internet Explorer il tag è supportato a partire dalla versione 4.x e per Netscape a partire dalla versione 3.x. Bisogna considerare anche che è necessario che sul computer di chi visualizza la pagina sia installato il tipo di carattere indicato nel tag <FONT>. Infatti, se il browser non trova sul computer di chi naviga il carattere previsto lo sostituisce con quello predefinito, cambiando radicalmente lo stile della pagina. Per aggirare il problema è possibile indicare una serie di caratteri alternativi secondo la sintassi: <FONT FACE=" Verdana, Arial, Helvetica, sans-serif"> testo </A> In questo modo se il primo carattere della lista non è presente sarà visualizzato il secondo; se anche il secondo non è presente sarà visualizzato il terzo, e così via. Così facendo si ha un maggiore controllo sul tipo di carattere che deve essere visualizzato nella pagina web. Per impostare il colore del testo, la sintassi è: <FONT COLOR="#colore"> testo </FONT> dove il colore va impostato nel formato esadecimale. Questo comando prevale sul colore eventualmente definito nel tag <BODY>. Infine per modificare le dimensioni dei caratteri la sintassi è: <FONT SIZE="valore"> testo </FONT> dove il valore si esprime con un numero intero che può essere indicato in senso relativo o assoluto. In senso relativo il valore va da -3 (molto piccolo) a +3 (molto grande). In senso assoluto il valore va da 1 (molto piccolo) a 7 (molto grande). Evidentemente tutti gli attributi del tag <FONT> esaminati possono essere combinati fra loro secondo la sintassi: <FONT FACE="tipo di carattere" COLOR="#colore" SIZE="dimensione"> testo </FONT>

Paragrafi e allineamenti Paragrafi Quando si scrive il codice HTML, per mandare a capo il testo che segue non basta premere il tasto Invio. Anche se nel codice una frase sembra andare a capo, ciò non accade una volta che la pagina viene visualizzata nel browser. Per mandare a capo il testo di una pagina web si usano i tag <BR>, <P> o <DIV>. Il tag <BR> equivale ad un'interruzione di riga che non spezza il paragrafo. Infatti, il testo che segue va a capo mantenendo tutte le caratteristiche del testo precedente e senza che si crei spazio vuoto tra le righe. Il tag <BR> non richiede un corrispondente tag di chiusura, basta inserirlo nel punto in cui si vuole che la frase vada a capo. Il tag <P> crea invece un'interruzione di paragrafo; il testo successivo va a capo, lasciando una riga di spazio vuoto, e può essere formattato in maniera diversa rispetto al testo precedente. Il tag <P> può essere usato singolo oppure con la rispettiva chiusura </P> (vi consiglio di chiuderlo sempre). Il tag <DIV> che si usa con la chiusura </DIV> serve a creare un blocco di testo che va a capo e può assumere caratteristiche di formattazione diverse dal testo precedente senza tuttavia creare spazio vuoto tra il nuovo testo e quello precedente.

Allineamenti di testo Per impostare gli allineamenti di testo che valgono paragrafo per paragrafo si usa l'attributo ALIGN del tag <P> secondo la sintassi: <P ALIGN="valore">paragrafo da allineare</P> dove il valore di ALIGN può essere: left per l'allineamento a sinistra, center per l'allineamento al centro, right per quello a destro e justify per l'allineamento giustificato. L'allineamento a sinistra è quello predefinito, quindi specificare l'attributo ALIGN="left" è superfluo, mentre il valore justify è stato introdotto a partire da Html 4.0 e quindi non tutti i browser sono in grado di interpretarlo correttamente. Allo stesso modo di <P ALIGN="valore">....</P> si può usare il tag <DIV ALIGN="valore">....</DIV> per identificare e formattare in modo omogeneo interi blocchi di testo anziché i singoli paragrafi. Quindi usando il tag <DIV>....</DIV> si contrassegna una sezione di testo, costituita da uno o più paragrafi. Esiste anche un tag che permette di definire un paragrafo di testo preformattato. Si tratta del tag <PRE>....</PRE> che fa in modo che il testo venga visualizzato dal browser nel modo in cui è stato digitato nel codice HTML usando un carattere a spaziatura fissa.

Formattazione I tag per la formattazione del testo si suddividono in stili fisici e stili logici. Gli stili fisici sono tag definiscono in modo univoco gli attributi grafici dei caratteri. I principali tag fisici sono: <B>... </B>: testo in grassetto; <I>... </I>: testo in corsivo; <U>... </U>: testo sottolineato; <STRIKE>... </STRIKE>: testo barrato o depennato; <SUP>... </SUP>: testo apice; <SUB>... </SUB>: testo pedice. Usare il tag <U>... </U> è sconsigliabile perché un testo sottolineato può creare confusione con i collegamenti ipertestuali che solitamente appaiono sottolineati. Gli stili logici sono tag che determinano l'aspetto del testo in base al presunto scopo della formattazione. I principali tag logici sono: <ADDRESS>... </ADDRESS>: indirizzo per contatti, il testo viene visualizzato in corsivo; <BLOCKQUOTE>... </BLOCKQUOTE>: citazione a blocchetto, il testo viene rientrato di circa 1 cm dal margine sinistro. Si possono sommare più tag <BLOCKQUOTE> consecutivi per avere rientri maggiori di 1 cm. A tal proposito bisogna sottolineare che il linguaggio HTML non permette di definire un rientro destro. <CITE>... </CITE>: citazione, il testo viene visualizzato in corsivo; <DFN>... </DFN>: definizione, il testo viene visualizzato in corsivo; <KBD>... </KBD>: digitazione da tastiera, il testo viene visualizzato in carattere a spaziatura fissa; <SAMP>... </SAMP>: testo esemplificativo, il testo viene visualizzato in carattere a spaziatura fissa; <STRONG>... </STRONG>: rafforzamento, il testo viene visualizzato in grassetto; <VAR>... </VAR>: variabile, il testo viene visualizzato in corsivo. I tag logici rappresentano una soluzione elegante dal punto di vista formale, ma il loro risultato in fase di visualizzazione può variare secondo il browser dell'utente.

Titoli ed elenchi Titoli Mediante l'inserimento di opportuni titoli il testo di una pagina HTML può essere suddivisa in capitoli e sottocapitoli. Per i titoli HTML sono previsti sei livelli gerarchici. Il tag per definire un titolo è <Hn>... </Hn> dove n è un valore che va da 1 a 6. Ciò significa che si possono avere sei livelli di titolazione, da <H1> (livello superiore) a<H6> (livello inferiore). In visualizzazione i titoli appaiono come paragrafi a sé stanti con caratteristiche di formattazione legate al livello di titolazione. L'aspetto dei titoli può essere personalizzato per quanto riguarda l'allineamento e la formattazione. È importante inserire dei titoli nei testi delle pagine web perché questo incrementa notevolmente la leggibilità e perché i motori di ricerca, quando catalogano i siti web, spesso si basano anche sui titoli presenti nella pagina per classificarne gli argomenti.

Elenchi Il primo tipo di elenco che vedremo è quello puntato; le voci di questo elenco non hanno un ordine di successione ed ogni voce viene evidenziata da un simbolo. Il tag è <UL> (Unordered List) e funziona con il rispettivo </UL>. Nel mezzo del tag <UL>... </UL> ciascuna voce è identificata dal tag <LI>. Esempio: <UL> <LI> voce a <LI> voce b <LI> voce c </UL> Al tag <UL> si può aggiungere l'attributo TYPE="tipo di simbolo" che permette di scegliere un simbolo personalizzato. I valori previsti sono: disc: punto pieno

circle: punto vuoto square: quadrato nero. Un altro tipo di elenco è quello numerato; le voci di questo elenco hanno un preciso ordine di successione ed ogni voce viene evidenziata da un numero oppure opzionalmente, da una lettera. Il tag è <OL> (Ordered List) e funziona con il rispettivo </OL>. Nel mezzo del tag <OL>... </OL> ciascuna voce è identificata dal tag <LI>. Al tag <OL> si può aggiungere l'attributo TYPE="tipo di numerazione" che permette di scegliere numeri o lettere. I valori previsti sono: 1:numeri arabi I:numeri romani maiuscoli i:numeri romani minuscoli A:lettere maiuscole a:lettere minuscole Si può anche usare l'attributo START="numero" per far iniziare il conteggio da un qualsiasi valore.

Le immagini in Html

Tag IMG Per inserire un'immagine in una pagina HTML basta inserire il tag: <IMG SRC="nome immagine">; questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estensione e l'eventuale percorso. Usando il tag in questo modo l'immagine appare allineata alla base della riga di testo corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute. Adesso vedremo gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine. Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel). Ad esempio:

<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50"> Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine. Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i valori di WIDTH e HEIGHT perché così il browser ha maggiori informazioni per collocare l'immagine ed il caricamento della pagina risulta molto più rapido. Oltre alle dimensioni di visualizzazione possiamo definire anche l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo ALIGN. Esempio: <IMG SRG="image.jpg" ALIGN="bottom"> I valori di ALIGN ammessi sono: Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore predefinito); Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il testo si spezza e prosegue sotto l'immagine; Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato destro; Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato sinistro. Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio orizzontale, in pixel). Ad esempio scrivendo: <IMG SRC="image.jpg" VSPACE="10" HSPACE="20"> oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono rimanere 10 pixel vuoti, e a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti. Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve essere espresso in pixel secondo la sintassi: <IMG SRC="image.jpg" BORDER="5"> Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può definire una didascalia associata all'immagine. La sintassi corretta è: <IMG SRC="nome immagine" ALT="breve descrizione testuale">

Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si passa con il mouse sopra l'immagine. I vantaggi principali dell'usare l'attributo ALT sono: i visitatori possono capire prima del caricamento completo il contenuto delle immagini; i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina; diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una pagina per catalogarla con precisione. Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG> all'interno della coppia di tag <A HREF> e </A> secondo la sintassi: <A HREF="index.html"><IMG SRC="index.gif"></A> Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad esempio un menù grafico di navigazione per un sito web. Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la funzione a colpo d'occhio. Attenzione: quando un'immagine è cliccabile, appare generalmente circondata da un bordo di colore blu che risulta anti-estetico. In questo caso basta indicare all'interno del tag <IMG> l'attributo BORDER="0" per fare in modo che il bordo resti invisibile.

Usare le tabelle in Html Tag TABLE Oltre ad avere la funzione di rappresentare dati di ogni genere allineati in righe e colonne, le tabelle in HTML si utilizzano per costruire l'intera struttura di una pagina web. Infatti, con le tabelle si può definire il layout di una pagina web in modo da disporre il testo su colonne multiple e di ottenere tipi di allineamenti complessi. Se ad esempio vogliamo realizzare una pagina che contenga del testo disposto su tre colonne un modo per farlo è utilizzare una tabella a tre colonne con i bordi invisibili. Il tag per creare una tabella è <TABLE> con il rispettivo </TABLE>. Nell'area compresa tra <TABLE> e </TABLE> ogni riga si definisce con la coppia di tag <TR>....</TR> (Table row). All'interno di ogni riga si creano le celle desiderate; ogni cella si definisce con la coppia di tag <TD>.....</TD> (Table data). Ad esempio con la sintassi: <TABLE> <TR> <TD>cella 1</TD> <TD>cella 2</TD> </TR>

<TR> <TD>cella 3</TD> <TD>cella 4</TD> </TR> si crea una tabella con quattro celle vale a dire con due righe e due colonne. La larghezza di una tabella si specifica tramite l'attributo WIDHT che può essere espresso in pixel con valore assoluto, o in percentuale rispetto alla larghezza della pagina. Con la sintassi: <TABLE WIDTH="600">....</TABLE> si crea una tabella con una larghezza di 600 pixel. Con la sintassi: <TABLE WIDTH="90%">....</TABLE> si crea una tabella con una larghezza pari all'90% della pagina. Se non si specifica la larghezza, la tabella si estende orizzontalmente in modo da occupare l'intera pagina. Con l'attributo ALIGN="valore" del tag <TABLE> si può definire l'allineamento della tabella rispetto alla pagina. Il valore di ALIGN può essere left, center o right. Ha senso specificare l'allineamento solo nel caso in cui si è definita una tabella con una larghezza inferiore a quella della pagina. Vediamo adesso come personalizzare l'aspetto di una tabella. Per definire il bordo di una tabella si usa l'attributo BORDER secondo la sintassi: <TABLE BORDER="spessore">.....</TABLE> dove lo spessore deve essere espresso da un numero intero di pixel. Se non si imposta alcun valore il bordo delle celle resta invisibile. Per impostare uno sfondo personalizzato di una tabella si usano gli stessi attributi del tag <BODY> cioè: BGCOLOR="#colore" per definire un colore di sfondo omogeneo e BACKGROUND="image" per collocare sullo sfondo un'immagine. Questi due attributi possono essere inseriti all'interno del tag di apertura <TABLE> per assegnare la caratteristica all'intera tabella, o all'interno del tag di apertura <TD> per assegnare la caratteristica ad una singola cella. Se non viene impostato nessun valore lo sfondo della tabella rimane neutro. Si può regolare a piacere la spaziatura tra le celle e all'interno delle celle. Con l'attributo CELLSPACING si definisce la spaziatura tra una cella e quelle adiacenti. La sintassi è: <TABLE CELLSPACING="numero di pixel">...</TABLE> In mancanza di indicazioni il valore predefinito è 2 pixel.

Con l'attributo CELLPADDING si definisce la spaziatura interna della cella, ovvero la quantità di spazio vuoto tra il margine della cella ed i suoi contenuti. La sintassi è: <TABLE CELLPADDING="numero di pixel">...</TABLE> In mancanza di indicazioni il valore predefinito è 1 pixel. Nel tag <TD> si possono specificare gli attributi WIDTH e HEIGHT che permettono di definire la larghezza e l'altezza di ogni cella. Quindi con: <TD WIDTH="numero di pixel o percentuale rispetto alla larghezza della tabella">...</TD> si fissa la larghezza della cella, e con: <TD HEIGHT="numero di pixel o percentuale rispetto alla larghezza della tabella">...</TD> si fissa l'altezza della cella. Tutte le celle di una stessa colonna devono avere la stessa larghezza e tutte le celle di una stessa riga devono avere la stessa altezza. Se vengono indicati valori differenti il browser si basa automaticamente su quello più elevato. Per non incorrere in errori di visualizzazione, quando si fissano valori specifici di altezza e larghezza delle celle, bisogna essere sicuri che il contenuto di ogni cella non ecceda lo spazio disponibile. Per creare una tabella con un numero non costante di celle per ogni riga/colonna si usano gli attributi ROWSPAN e COLSPAN del tag <TD>. <TD ROWSPAN="numero">...</TD> estende la cella attraverso il numero di righe specificato. <TD COLSPAN="numero">...</TD> estende la cella attraverso il numero di colonne specificato. Considerando ad esempio la tabella a due righe e due colonne descritta precedentemente, utilizzando ROWSPAN possiamo in pratica unire la cella1 e la cella3 o la cella 2 e la cella 4: <TABLE> <TR> <TD ROWSPAN="2">cella 1 + cella 3</TD> <TD>cella 2</TD> </TR> <TR> <TD>cella 4</TD> </TR>

</TABLE> e utilizzando COLSPAN possiamo in pratica unire la cella 1 e la cella 2 o la cella 3 e la cella 4: <TABLE> <TR> <TD COLSPAN="2">cella 1 + cella 2</TD> </TR> <TR> <TD>cella 4</TD> </TR> </TABLE> Per formattare i contenuti i contenuti di una cella si utilizzano appositi attributi del tag <TD>. Per l'allineamento orizzontale dei contenuti di una cella si utilizza: <TD ALIGN="valore">......</TD> dove ALIGN può assumere i valori left (predefinito), center e right. Per l'allineamento verticale dei contenuti di una cella si utilizza: <TD VALIGN="valore">......</TD> dove VALIGN può assumere quattro differenti valori: - top: allineamento al margine superiore della cella; - middle (predefinito): allineamento al centro dell'altezza della cella; - bottom: allineamento al margine inferiore della cella; - baseline il contenuto della cella si allinea alla base della prima riga di testo delle celle adiacenti. Generalmente il testo contenuto in una cella scorre a capo automaticamente (wrap) secondo le dimensioni della cella stessa. È possibile forzare il testo di una cella affinché non vada mai a capo aggiungendo al tag <TD> l'attributo NOWRAP:

<TD NOWRAP>.....</TD> Bisogna prestare attenzione al fatto che usando NOWRAP le celle adiacenti variano automaticamente, in base all'allargamento della cella con l'attributo.

Cosa sono i frame Tag FRAMESET I frame sono un particolare tipo di struttura HTML, che consente di suddividere la finestra del browser in diversi riquadri distinti. Un'insieme di frame non è un'unica pagina, ma in ogni riquadro appare una pagina HTML a sé stante. Grazie all'uso dei frame la navigazione di un sito può risultare comoda e molto rapida per il visitatore perché solo una parte dello schermo viene ricaricata o aggiornata mentre uno o più frame restano fissi. L'applicazione più tipica consiste nel creare un frame (di solito a sinistra), che occupi circa il 20/30% dell'intera larghezza della pagina, contenente il menù del sito. Questa parte della finestra resta fissa in ogni pagina del sito e cliccando su una voce del menù appare il contenuto della pagina corrispondente. Se decidete di usare i frame nelle vostre pagine HTML dovete sapere che questi presentano alcuni svantaggi. Il più significativo è un problema di compatibilità; infatti essendo i frame un'innovazione abbastanza "recente", le versioni più datate dei browser non sono in grado di visualizzarli correttamente. Inoltre alcuni motori di ricerca non riescono a catalogare in modo efficace i siti basati su frame, quindi si corre il rischio di diminuire la popolarità delle proprie pagine web. Aldilà delle possibili controindicazioni, vediamo come si costruiscono le pagine HTML basate sui frame. Innanzitutto bisogna costruire una pagina contenitore che indica al browser la presenza e la disposizione dei vari frame. Questa pagina differisce dalla normale sintassi HTML perché al posto del tag <BODY> si utilizza il tag <FRAMESET>. Mediante attributi del tag <FRAMESET> si deve specificare se i frame devono essere disposti in orizzontale oppure in verticale. L'attributo da aggiungere al tag <FRAMESET> è ROWS (righe) per una disposizione orizzontale oppure COLS (colonne) per una disposizione verticale. Inoltre bisogna specificare un gruppo di valori che definisca le dimensioni di ogni frame. La sintassi è: <FRAMESET ROWS="altezza riga 1, altezza riga 2">...</FRAMESET> Oppure <FRAMESET COLS="larghezza colonna 1, larghezza colonna 2">...</FRAMESET> Il numero di valori indicati determina automaticamente il numero di frame. Le dimensioni dei frame possono essere indicate in percentuale (rispetto le dimensioni della finestra) , in pixel o in senso relativo. Per indicarle in percentuale scriveremo:

<FRAMESET COLS="30%,70%">...</FRAMESET> oppure: <FRAMESET ROWS="10%,90%">...</FRAMESET> In pixel scriveremo: <FRAMESET COLS="80,400">...</FRAMESET> oppure: <FRAMESET ROWS="40,600%">...</FRAMESET> Per indicare le dimensioni in senso relativo si usa il simbolo asterisco *, ad esempio l'attributo ROWS="10%,*" produce due frame di cui il primo occupa il 10% dell'altezza della finestra e l'altro tutta la parte restante. A questo punto bisogna definire il contenuto dei frame attraverso il tag <FRAME SRC="nome file.html">. Evidentemente le pagine che andranno collocate in ciascun frame devono essere preparate prima. Ad esempio se vogliamo ottenere una struttura contenente due frame affiancati, di cui quello a sinistra occupi il 30% della larghezza della finestra e l'altro il restante spazio dobbiamo: 1. preparare un file HTML con il testo da inserire nel frame sinistro che possiamo salvare con un nome del tipo paginasinistra.html; 2. preparare un file HTML con il testo da inserire nel frame destro che possiamo salvare con un nome del tipo paginadestra.html; 3. preparare la pagina contenitore dove inserire il seguente codice: <FRAMESET COLS="30%,*"> <FRAME SRC="paginasinistra.html"> <FRAME SRC="paginadestra.html"> </FRAMESET> e salvarla con un nome qualsiasi. Ricordate che se si tratta della pagina iniziale del sito, Ă¨ opportuno chiamarla index.html. Fin'ora abbiamo visto come creare strutture con frame affiancati orizzontalmente o verticalmente. Il linguaggio HTML ci permette di creare anche strutture con un numero irregolare di frame (frame annidati); ad esempio un frame orizzontale superiore e due affiancati inferiori oppure un frame verticale sinistro e due frame sovrapposti a destra e cosĂŹ via. Per

costruire questo tipo di strutture si devono impostare nella pagina contenitore molteplici tag <FRAMESET>...</FRAMESET>. Riprendendo l'esempio precedente, se vogliamo dividere il frame di destra in due frame orizzontali scriveremo: <FRAMESET COLS="30%,*"> <FRAME SRC="paginasinistra.html"> <FRAMESET ROWS="30%,70%"> <FRAME SRC="paginadestrasopra.html"> <FRAME SRC="paginadestrasotto.html"> </FRAMESET> Modificando liberamente questi parametri è possibile ottenere diverse strutture basate su frame annidati. Vediamo adesso come personalizzare l'aspetto dei frame inserendo degli attributi ai tag <FRAMESET> e <FRAME> nella pagina contenitore. Si può regolare la spaziatura tra i frame inserendo nel tag di apertura <FRAMESET> l'attributo FRAMESPACING="numero". Il valore di FRAMESPACING è lo spazio vuoto in pixel tra un frame e l'altro. Per regolare invece, lo spazio vuoto intorno ai contenuti di un frame si hanno a disposizione due attributi del tag <FRAME>: MARGINHEIGHT="numero", ci consente di definire lo spazio vuoto in pixel da lasciare sopra e sotto i contenuti del frame; MARGINWIDTH="numero", ci consente di definire lo spazio vuoto in pixel da lasciare a destra e sinistra dei contenuti del frame. Possiamo scegliere se visualizzare o meno il bordo dei frame con l'attributo FRAMEBORDER da inserire nel tag <FRAMESET>. FRAMEBORDER può assumere il valore "yes" oppure "no". Si può anche regolare lo spessore in pixel del bordo con l'attributo BORDER="numero", ed il colore del bordo con l'attributo BORDER="#colore". Però questi ultimi due attributi non sono standard, quindi non tutti i browser possono interpretarli correttamente.

Tag Html Un elenco dei principali tag, da conoscere per realizzare pagine html. Ad ogni tag è associata una breve descrizione.

Tag di base <html>...</html> » Definire un documento Html. <head>...</head> » Definire le informazione di intestazione come il titolo ed i meta-tag. <title>...</title> » Definire il titolo che appare alla cima della finestra di browser. <body>...</body> » Il corpo del documento Html.

Corpo di un documento Html <body>...</body> » Il corpo del documento Html. <body bgcolor="#??????"> » Colore di sfondo del documento. <body background="nomefile.xxx"> » Immagine come sfondo. <body text="#??????"> » Colore del testo del documento. <body link="#??????"> » Colore dei collegamenti ipertestuali. <body alink="#??????"> » Colore dei collegamenti ipertestuali attivi. <body vlink="#??????"> » Colore dei collegamenti ipertestuali già visitati.

Formattazione <p>...</p> » Definire un nuovo paragrafo. <p align=?> » Allineare un paragrafo a destra,sinistra e a centro. <br> » Inserire una interruzione di riga. <blockquote>...</blockquote> » Indentare il testo da entrambi i lati.

Testo <pre>...</pre> » Testo preformattato. <hl>...</hl> a <h6>...</h6> » Titoli. <b>...</b> » Testo in grassetto. <i>...</i> » Testo in corsivo.

<cite>...</cite> » Citazione, generalmente in corsivo. <em>...</em> » Enfatizzare una parola (grassetto o corsivo). <strong>...</strong> » Enfatizzare una parola (grassetto o corsivo). <sub>...</sub> » Testo apice. <sup>...</sup> » Testo pedice

Caratteri <font>...</font> » Attributi dei caratteri. <font size="value">...</font> » Grandezza dei caratteri con valori da 1 (più piccolo) a 7 (più grande). <font face="name">...</font> » Tipo di caratteri. <font color="#??????">...</font> » Colore dei caratteri. È preferibile usare i fogli di stile CSS per impostare i caratteri.

Elenchi <dl>...</dl> » Elenco definizioni. <dt> » Precede ogni termine di definizione. <dd> » Precede ogni definizione. <ol>...</ol> » Elenco ordinato. <li>...</li> » Precede ogni voce dell'elenco aggiungendo un numero. <ul>...</ul> » Elenco non ordinato. <div align=?> » Tag usato per allineare grossi blocchi di testo.

Collegamenti <a>...</a> » Origine e destinazione di un collegamento ipertestuale. <a href="url">...</a> » Collegamento ipertestuale.

<a href="#name">...</a> » Collegamento ad un'ancora nel documento stesso. <a href="URL#name">...</a> » Collegamento ad un'ancora in un altro documento. <a name="name">...</a> » Ancora in un documento. <a href="mailto:e-mail">...</a> » Collegamento ad una e-mail.

Tabelle <table>...</table> » Creare una tabella. <table border="pixel"> » Grandezza del bordo della tabella. <table cellspacing="pixel"> » Spazio tra le celle di una tabella. <table cellpadding="pixel"> » Spazio tra il bordo e il contenuto delle celle di una tabella. <table height="pixel" or "%"> » Altezza di una tabella. <table width="pixel" or "%"> » Larghezza di una tabella. <td>...</td> » Righe di una tabella. <td colspan="colonne"> » Estendere la cella attraverso il numero di colonne specificato <td rowspan="righe"> » Estendere la cella attraverso. <td nowrap> » Forzare il testo di una cella affinché non vada mai a capo. <th>...</th> » Tabella d'intestazione con il testo in grassetto, allineato al centro. <tr>...</tr> » Colonne di una tabella. <tr align="?"> o <td align="?"> » Allineare il contenuto di una cella a destra, sinistra o a centro. <tr valign="?"> o <td valign="?"> » Allineamento verticale di una cella a centro, sotto o sopra.

Principi di web design In maniera superficiale abbiamo affermarmato che per creare un sito web è sufficiente avere un'editor Html WYSIWYG e cercare sul mercato un server dove poterlo pubblicare. Effettivamente le cose non stanno proprio in questo modo, perchè nella progettazione e nella

realizzazione di un sito web bisogna prendere decisioni con cognizione di causa, e questo è possibile soltanto conoscendo i concetti fondamentali del web design. Ecco, quindi, i principi che vi aiuteranno a pianificare e sviluppare siti web caratterizzati dall'efficacia di navigazione e da un uso bilanciato di grafica, testo e colore:

Variabili di un progetto web I browser Uno dei problemi che bisogna risolvere consiste nel riuscire a produrre una visualizzazione corretta sui vari browser disponibili. Ogni browser contiene un programma chiamato parser, che interpreta i tag contenuti in un file Html e visualizza i risultati sulla finestra del browser, che tecnicamente è chiamata canvas. Purtroppo la logica di interpretazione dei tag Html varia da browser a browser e questo ha come conseguenza interpretazioni differenti e talvolta in conflitto fra loro per il modo in cui deve essere visualizzato il file Html. Provate allora a visualizzare le vostre pagine web con Microsoft Internet Explorer e con Netscape Navigator e sicuramente resterete sorpresi dalle differenze di visualizzazione. A questo punto, viene da chiedersi per quale motivo si deve rendere il proprio lavoro compatibile con più browser. Il motivo è molto semplice, infatti, per un autore web l'obiettivo principale dovrebbe essere la realizzazione di pagine accessibili dal maggior numero possibile di utenti. Generalmente non si può sapere a priori quali browser verranno impiegati per la visualizzazione e non si può sempre supporre che gli utenti usino l'ultima versione di un determinato browser o sistema operativo, quindi un buon progettista web deve collaudare durante ed alla fine del processo di sviluppo il proprio lavoro con il maggior numero possibile di browser e loro versioni per far sì che le pagine web progettate vengano visualizzate correttamente nella maggior parte dei casi. Tenete anche in considerazione che i browser esibiscono subdole differenze anche a seconda della piattaforma utilizzata. Ad esempio Netscape Navigator per Windows non è esattamente identico a Netscape Navigator per Macintosh. Quindi se ne avete la possibilità, testate le vostre pagine web anche con sistemi operativi differenti. Alla luce di queste considerazioni può sembrare impossibile creare pagine web che vengano sempre visualizzate correttamente, ma non è effettivamente così. Un modo efficace per creare pagine visibili correttamente dai diversi browser consiste nell'usare l'approccio a "minimo comune denominatore". Questo approccio offre un'ampia accettabilità da parte dei browser in quanto l'autore web sceglie di utilizzare la penultima release di Html. Ad esempio quando furono introdotti i browser che supportavano Html 4.0, molti continuarono a lavorare in Html 3.2, confidando sul fatto che il codice sarebbe stato visualizzato in modo più uniforme in quanto tutti i tipi di browser l'avrebbero riconosciuto. Usare una specifica Html non aggiornata non significa che il vostro sito sarà graficamente meno interessante, ma solo che si dovrà rinunciare ad

utilizzare le estensioni più recenti. L'approccio a minimo comune denominatore è il metodo di programmazione più sicuro ed è ampiamente utilizzato nei siti interessati alla massima diffusione possibile delle informazioni. Un altro modo per aggirare il problema è quello di includere nelle pagine del proprio sito web un avviso del tipo: "Questo sito è ottimizzato per Internet Explorer 5.0". Ciò significa utilizzare alcune estensioni specifiche di un browser ed essere consapevoli che il proprio sito non viene visualizzato correttamente da altri browser e non voler risolvere il problema. Adottare questo tipo di tecnica è sicuramente un metodo molto rapido di progettare pagine web ma potrebbe avere come conseguenza l'allontanamento di un significativo numero di lettori che se ne andranno immediatamente solo perché ritengono di non avere un browser adatto. L'uso di questa tecnica è indicato nel caso in cui si deve progettare un sito per un'intranet aziendale e quindi si conosce quale browser verrà utilizzato. Nella progettazione di un sito web si può scegliere di impiegare gli standard più recenti. Secondo alcuni sviluppatori, così facendo, i propri utenti aggiorneranno subito i loro browser. Questa strategia di progettazione porta sicuramente a risultati interessanti. Basti pensare all'uso di Macromedia Flash grazie al quale si possono creare pagine web dinamiche ed interattive che hanno sicuramente un maggiore effetto rispetto alle pagine web statiche. Le animazioni prodotte con Flash, per essere visualizzate richiedono che sia installata nel browser un estensione in grado di leggerle. Le ultime versioni dei browser hanno questa estensione, mentre le vecchie versioni potrebbero non averla, a meno che l'utente non l'abbia installata. Il problema quindi si ripresenta, perché molti utenti non saranno in grado di visualizzare le pagine web create con questo potente strumento. Se proprio non si vuole fare a meno di questa tecnologia, è preferibile creare due versioni delle vostre pagine web, una flash ed una html. In questo modo darete la possibilità all'utente di scegliere quale versione delle vostre pagine visualizzare senza escludere nessuno. Se invece non si ha intenzione di adottare una soluzione di questo tipo, è preferibile che i contenuti più importanti del sito non facciano affidamento sulle tecnologie più recenti, in modo che il messaggio possa essere recepito anche dagli utenti che usano browser meno recenti. Come si è visto, rendere le pagine accessibili al maggior numero possibile di utenti è abbastanza difficile; allora è compito del progettista web fare le giuste scelte per garantire una buona visibilità a tutti.

La risoluzione dello schermo Indipendentemente della cura che si pone nella progettazione, a causa delle varie risoluzioni disponibili non si può mai sapere il modo in cui gli utenti visualizzeranno le pagine. La gamma di risoluzioni visualizzabili dipende dalla caratteristiche del monitor e della scheda video installata nel computer. Le tre risoluzioni più utilizzate sono: 800x600, 1024x768 e 1280x1024 pixel. Aldilà di queste considerazioni, la risoluzione dello schermo scelta dagli utenti è un fattore

su cui il progettista web non ha alcun controllo. Bisogna allora decidere di realizzare il sito in modo da gestire più risoluzioni. Realizziamo una pagina web per 800x600 pixel e visualizziamola ad una risoluzione di 640x480 pixel. Saremo costretti a eseguire continui scorrimenti a destra e sinistra per leggere il testo. La presenza della barra di scorrimento orizzontale, al contrario della barra di scorrimento verticale, è considerata negativa e scomoda da molti utenti. Alcuni progettisti sostengono che si dovrebbero sviluppare le pagine basandosi sul minimo comune denominatore che attualmente è rappresentato dalla risoluzione di 800x600 pixel. Si capisce però che utilizzando questa risoluzione per progettare le pagine web, si ha a disposizione meno spazio per gestire i contenuti di una pagina. È anche possibile progettare una pagina web che si adatti alle varie risoluzioni dello schermo. Provate, a cambiare la risoluzione del vostro monitor, vi accorgerete che le pagine si adattano alla grandezza della finestra del browser. Adottare questa tecnica è un'ottima soluzione ma è sicuramente più impegnativo che sviluppare un layout dalle dimensioni "fisse". Si può anche pensare di realizzare diverse versioni delle vostre pagine per ogni risoluzione e fare scegliere all'utente quale versione utilizzare, ma si tratta di una tecnica troppo laboriosa e poco usata. Alla luce di queste considerazioni resta a voi la scelta di ottimizzare le vostre pagine per un determinato tipo di risoluzione.

La velocità di connessione La velocità di connessione è una variabile che influenza notevolmente la progettazione delle pagine web. La maggior parte degli utenti non sopporta che il caricamento di una pagina richieda più di 20-25 secondi e quindi se la vostra pagina viene caricata lentamente il visitatore potrebbe andarsene prima ancora di iniziare a visualizzare i contenuti del sito. È necessario quindi eseguire il collaudo del sito a varie velocità di connessione per verificare che i tempi di caricamento delle pagine non superino i 20-25 secondi evitando di perdere potenziali visitatori. Come velocità di connessione base, per effettuare il collaudo delle vostre pagine, si può considerare 28.8 Kbps, tipica degli utenti che utilizzano vecchi modem. Per poter effettuare un giusto collaudo delle nostre pagine dobbiamo sapere in che modo le pagine vengono inviate all'utente. Quando si digita l'indirizzo web nel proprio browser, questo si connette al server web appropriato e richiede il file specificato. Il server, allora, fornisce il file in modo che il browser possa prelevarlo. La prima volta che si visita un sito, sarà necessario caricare sia il file Html che ogni immagine cui fa riferimento il codice Html. Se successivamente si ritorna a visitare lo stesso sito, il browser preleva e analizza il file Html. Poi il browser controlla se le immagini specificate nel file Html sono già memorizzate nell'area cache del nostro computer. La cache è un'area di memorizzazione temporanea delle pagine web e delle immagini, ed il browser tenta sempre di caricare le immagini dall'area cache piuttosto che ricaricarle dal web. Questa breve spiegazione ci fa capire che dobbiamo stare attenti quando collaudiamo il nostro sito alle diverse velocità di connessione, poiché dobbiamo immaginare di essere un utente che visita il

sito la prima volta. Proprio questo è il momento in cui l'utente sperimenta i tempi di prelevamento più lunghi. Allora per effettuare un collaudo che ci dia realmente il tempo di caricamento è necessario svuotare ogni volta l'area cache del proprio browser. La velocità di visualizzazione delle pagine è maggiormente influenzata dal numero e dalle dimensioni delle immagini contenute nelle pagine web. Bisogna quindi non complicare troppo il progetto delle pagine riducendo il numero immagini. Considerando come connessione base 28.8 Kbps, nessuna immagine del sito web dovrebbe superare i 10-15 KB. In fase di progetto, teniamo anche conto della funzionalità cache del browser, riutilizzando le immagini e la grafica quanto più possibile all'interno del sito. Questo ci permetterà di avere oltre ad un aspetto uniforme delle pagine, anche un caricamento più rapido delle pagine. Infatti una volta che un'immagine è stata prelevata, questa permane nell'area cache per il numero di giorni specificato nelle apposite impostazioni del browser. La maggior parte degli utenti non cambia queste impostazioni ed è quindi probabile che le immagini rimarranno nel disco fisso dell'utente per qualche tempo. Ogni volta che l'utente torna a visitare il nostro sito, verrà utilizzata la copia locale delle immagini, evitando di prelevare nuovamente le immagini dal server web.

I titoli dei link I browser più recenti possono far comparire una breve spiegazione testuale di un link prima che l'utente lo selezioni. Grazie a questa spiegazione gli utenti avranno un anticipazione di dove li condurrà il link migliorando loro la navigazione. Se gli utenti decidono di seguire un link dopo aver letto dove porterà, impiegheranno sicuramente meno tempo a capire la pagina di arrivo e tutto questo li aiuterà a diminuire il loro disorientamento. La spiegazione testuale di un link viene chiamata titolo e si ottiene aggiungendo l'attributo TITLE al tag A HREF (da non confondere con il META-tag TITLE nella sezione <head>) . Esempio: <A HREF="http://www.enaippalermo.net" TITLE="Ente di Formazione Professionale">www.enaippalermo.net </A> Mettendo il cursore del browser sopra questo link, dopo circa un secondo apparirà il titolo:" Ente di Formazione Professionale ". Il titolo, che appare proprio mentre l'utente sta pensando a che tipo di sito è www. enaippalermo.net, gli dà una chiara indicazione su cosa può aspettarsi di trovare seguendo quel link. Questo farà perdere meno tempo ai vostri utenti che non dovranno necessariamente seguire un link per capire di cosa tratta e stabilire se sono interessati o meno. È evidente che il titolo dei link è un attributo sicuramente utile che bisogna però usare in modo appropriato. Innanzitutto non si deve esagerare con la lunghezza, è preferibile scrivere titoli dei link lunghi al massimo 50/60 caratteri perché i titoli più corti sono anche i più efficaci. Inoltre, non è necessario aggiungere un titolo a ciascun link. Se, dal testo e dal contesto del link,

risulta ovvio capire il tipo di destinazione, mettere il titolo del link ha come effetto una riduzione dell'usabilità perché si aggiunge un elemento superfluo che l'utente deve vedere. Se poi, il titolo di un link si limita a ripetere il testo del link stesso, allora è puramente superfluo. Infatti, non ha alcun senso scrivere: <A HREF="http://www. enaippalermo.net " TITLE=" Ente di Formazione Professionale "> Ente di Formazione Professionale </A> Il titolo del link, quindi, deve essere riservato ad informazioni integrative ed il suo uso non deve esimere dal rendere il testo del link comprensibile di per se, perché gli utenti non devono essere costretti a puntare il cursore sul link per poterne capire il significato. Vediamo adesso come si comportano i browser nei confronti di questo attributo. Il titolo nel tag A HREF è previsto già dalla versione 2.0 di Html, ma, come al solito, il supporto a questo attributo non è garantito da tutti i browser. Ad esempio Internet Explorer lo riconosce a partire dalla versione 4.0 Fortunatamente, se un browser non supporta i titoli dei link li ignora senza causare problemi. Infatti dal momento che non si tratta né di un nuovo tag né di un elemento che influisce sull'impaginazione, le pagine appariranno identiche sia che il browser riconosca l'attributo TITLE per un link, sia che lo ignori. L'unico svantaggio nell'uso dei titoli dei link nasce dal fatto che questi aggiungono circa un decimo di secondo al tempo di caricamento via modem di una pagina web. Ma la maggiore usabilità della navigazione, che si ottiene dai titoli dei link, rende questo svantaggio del tutto accettabile.

Favicon A partire dalla versione 5, Microsoft Internet Explorer, consente di associare ad ogni collegamento inserito nei "Preferiti" un'icona. Vedremo come creare questa icona e quale è il codice da inserire nelle pagine web affinché sia visualizzata dagli utenti che aggiungeranno il vostro sito web tra i loro "Preferiti". L'icona destinata a questo uso deve avere dimensioni pari a 16x16 pixel, deve usare pochi colori(immagini a 8bit), chiamarsi favicon e la sua estensione deve essere .ico (quindi chiamarsi necessariamente “favicon.ico”. Per generare l'icona bisogna usare un software specifico come IconCoolEditor o IconForge. In alternativa si può creare un'immagine di 16x16 pixel con un software di grafica. Se vogliamo, ad esempio, usare come icona una piccola versione del nostro logo, i passi da seguire sono i seguenti: 1. 2. 3. 4.

apriamo l'immagine del logo con un software di grafica come Gimp; cambiamo le dimensioni dell'immagine in 16x16 pixel; salviamo l'immagine come favicon.bmp; apriamo favicon.bmp con IconCoolEditor o IconForge, ma va già bene Gimp, assicuriamoci che l'icona non utilizzi più di 256 colori e salviamola come favicon.ico.

Si potrebbe pensare che sia sufficiente rinominare favicon.bmp in favicon.ico, ma non è effettivamente cosi. È necessario salvare il file con estensione ".ico" con un software specifico.

Adesso che l'icona è pronta, basta trasferirla nella directory radice del sito web ed aggiungere nelle pagine tra i tag <HEAD> e </HEAD> il codice: <LINK REL="shortcut icon" HREF="http://www.nome del sito.suffisso/favicon.ico"> Fatto questo, non ci resta che salvare le pagine e pubblicarle.

I fogli di stile css Un foglio di stile è un insieme di modelli, o stili, che si applicano a varie parti del documento e descrivono il modo in cui viene reso. Agli inizi dello sviluppo del linguaggio Html e del web, i progettisti ed i programmatori sentirono l'esigenza di avere un tipo di fogli di stile che potesse essere applicato ai documenti Html per poterne avere un maggiore controllo. Furono vagliate diverse proposte e una di queste, i Cascading Style Sheet (CSS, fogli di stile sovrapposti), è stata realizzata e rappresenta oggi lo standard di riferimento. La specifica CSS è la forma di fogli di stile consigliata dal World Wide Web Consortium (W3C) come forma appropriata per l'uso con l'Html ed è quindi anche quella che è stata adottata dai due principali produttori di browser, Microsoft e Netscape. Purtroppo però, anche i CSS non sono supportati allo stesso modo da tutti i browser; quindi, se si decide di usare i fogli di stile, il consiglio sempre valido è quello di collaudare il proprio lavoro con il maggior numero possibile di browser e loro versioni per far sì che le pagine web progettate vengano visualizzate correttamente nella maggior parte dei casi. I fogli di stile CSS si basano su regole che selezionano un elemento Html e ne dichiarano la caratteristiche stilistiche. Queste regole possono essere incluse nella sezione <HEAD> di un documento Html, ed in questo caso si tratta di foglio di stile interno, oppure in documento distinto chiamato foglio di stile esterno. I fogli di stile esterni consentono di definire regole che devono essere applicate a più documenti Html; ad esempio si può creare un foglio di stile esterno che definisca i caratteri e le dimensioni del testo di un intero sito web. Così facendo, se decidiamo di cambiare le dimensioni del testo, non avremo bisogno di modificare tutte le pagine del sito, ma sarà sufficiente aggiornare il foglio di stile esterno e tutte le pagine verranno aggiornate. Vediamo adesso come aggiungere un foglio di stile interno ad un documento Html; le regole di stile devono essere contenute nell'elemento <STYLE> della sezione <HEAD> secondo la sintassi: <HEAD> <TITLE>Esempio CSS interno</TITLE> <STYLE TYPE="text/css"> P {FONT-SIZE: 16 px}

</STYLE> </HEAD> In questo modo tutti gli elementi <P> del documento avranno il testo di dimensioni pari a 16 pixel. L'elemento <STYLE> può contenere un qualsiasi numero di stili diversi e l'attributo TYPE dell'elemento <STYLE> serve a definire l'impiego del linguaggio CSS. Se vogliamo nel nostro documento un paragrafo con una dimensione del testo diversa da quella indicata nel foglio di stile possiamo usare l'attributo STYLE: <P STYLE="FONT-SIZE: 14px">Testo con dimensioni pari a 14 pixel</P> Le regole di stile sono costituite da due parti:un selettore che determina l'elemento a cui deve essere applicata la regola (P) ed una dichiarazione che descrive il valore della proprietà specificata (FONT-SIZE: 16 px). Passiamo adesso ai fogli di stile esterni; un foglio di stile esterno è un documento con estensione .css che contiene le regole di stile. Un esempio di foglio di stile esterno chiamato style.css o miosito.css, può essere: P {COLOR: #000033} H1 {COLOR: #000033} Il file miosito.css non contiene codice Html, ma solo le regole di stile CSS che nello specifico sono: utilizzare il colore #000033 (blu scuro) per il testo dei paragrafi e per i titoli H1. Per aggiungere questo foglio di stile esterno ad un file Html, si deve aggiungere l'elemento <LINK> nella sezione <HEAD> del file stesso secondo la sintassi: <HEAD> <TITLE>Esempio CSS esterno</TITLE> <LINK HREF="style.css" REL="stylesheet"> </HEAD> L'attributo HREF specifica l'indirizzo URL del foglio di stile che contiene tutte le regole che devono essere applicate e l'attributo REL specifica le relazioni esistenti fra il documento collegato e il documento corrente. Tutte le pagine che impiegheranno questo foglio di stile esterno utilizzeranno le regole in esso contenute.

Font e css I fogli di stile CSS ci permettono di controllare diverse proprietà dei font su cui con l'Html semplice non si ha alcun controllo, come l'interlinea, lo spazio tra le lettere di una parola e l'indentazione della prima riga di testo di un paragrafo. Il supporto dei browser per queste

proprietà può presentare molte differenze, quindi è sempre consigliabile collaudare con cura il proprio lavoro per assicurarsi una visualizzazione corretta sulla maggior parte dei browser. Le proprietà dei font che si possono controllare con i CSS, sono più di 50, ma in questo articolo ci soffermeremo su quelle più utilizzate.

Font-Family La proprietà Font-Family ci consente di specificare la famiglia di font. Supponiamo di voler utilizzare il font Verdana per l'elemento <P>: <STYLE TYPE="text/css"> P {FONT-FAMILY: VERDANA} </STYLE> In questo modo tutti i paragrafi della pagina utilizzeranno il Verdana come font per il testo. Ricordatevi che è necessario che gli utenti abbiano installato sul proprio computer il font da voi specificato altrimenti il browser lo sostituirà con il font standard. È consigliabile allora specificare dei font alternativi che il browser tenterà di caricare in successione: <STYLE TYPE="text/css"> P {FONT-FAMILY: VERDANA, ARIAL} </STYLE> Questo codice chiede al browser di usare il font Verdana; se il font Verdana non è presente sul sistema dell'utente, si deve usare il font Arial. Per garantire una migliore omogeneità su più browser e sistemi operativi si può specificare un nome generico. Ad esempio con il codice: <STYLE TYPE="text/css"> P {FONT-FAMILY: VERDANA, ARIAL, SANS-SERIF} </STYLE> si dice al browser che se i font Verdana e Arial non sono disponibili deve essere utilizzato un font Sans-serif, vale a dire un font senza grazie. Le famiglie di font generiche che si possono specificare sono: • Serif ovvero font con grazie; • Sans-serif ovvero font senza grazie; • Monospace ovvero font a spaziatura fissa.

Font-Size La proprietà FONT-SIZE ci consente di specificare le dimensioni dei font utilizzando una delle unità di misura tra quelle supportate dai fogli di stile CSS. Vediamo, allora, quali sono le unità di misura CSS:

Con la sintassi: <STYLE TYPE="text/css"> P {FONT-FAMILY: VERDANA, ARIAL; FONT-SIZE: 14px} </STYLE> diciamo al browser di utilizzare per i paragrafi caratteri Verdana o Arial con una dimensione di 14 pixel. Specificare le dimensioni dei caratteri in questo modo significa bloccare i caratteri; quindi per i vostri utenti non sarà possibile ingrandire il testo sfruttando l'apposita funzione dei browser. Bloccare i caratteri, per i sostenitori dell'usabilità, è considerata un'eresia, ma a volte può risultare molto comodo e dare buoni risultati. In ogni caso, se decidete di bloccare i caratteri, il consiglio è di esprimere le dimensioni in pixel e non in punti, perché i pixel sono uguali dappertutto al contrario dei punti che a seconda della piattaforma potrebbero essere o troppo grandi o troppo piccoli rispetto a quanto desiderato.

Font-Weight La proprietà FONT-WEIGHT consente di specificare un valore numerico o descrittivo riguardante il peso dei caratteri. I valori più usati sono: normal, bold, bolder e lighter. Questi valori vanno però sperimentati perché non sono disponibili per tutti i font (ad eccezione di bold che è quasi sempre disponibile). Se vogliamo che il testo dei paragrafi delle nostre pagine sia Verdana grassetto a 14 pixel la sintassi da usare è: <STYLE TYPE="text/css"> P {FONT-FAMILY: VERDANA; FONT-SIZE: 14px; FONT-WEIGHT: BOLD} </STYLE>

Line-Height Grazie ai fogli di stile CSS è possibile specificare una percentuale o un valore assoluto di interlinea. La percentuale si basa sulla dimensione dei font, nel senso che, se impostiamo un valore pari a 200% per un font di 10 pixel, otterremo un'interlinea di 20 pixel. Come valori assoluti possiamo usare una qualsiasi delle unità di misura riconosciute dai fogli di stile CSS. Ad esempio con la sintassi: <STYLE TYPE="text/css"> P {LINE-HEIGHT: 20px} </STYLE> creiamo un'interlinea di 20 pixel.

Letter-Spacing La regolazione dello spazio che separa le lettere di una parola è il kerning. Con la proprietà LETTER-SPACING si imposta il kerning usa utilizzando una qualsiasi delle unità di misura. Per ottenere una spaziatura fra le lettere di 2 punti la sintassi è: <STYLE TYPE="text/css"> P {LETTER-SPACING: 2pt} </STYLE>

Text-Indent Utilizzando la proprietà TEXT-INDENT possiamo impostare il livello di indentazione della prima riga di testo di un paragrafo. Ad esempio: <STYLE TYPE="text/css"> P {TEXT-INDENT: 18px} </STYLE>

definisce un'indentazione di 18 pixel. Possiamo utilizzare anche un valore negativo per ottenere una prima riga sporgente.

Color La proprietà COLOR definisce il colore del testo di un elemento. Si possono specificare i nomi dei colori oppure i valori esadecimali. Per ottenere un paragrafo con il testo di colore bianco basta scrivere: <STYLE TYPE="text/css"> P {COLOR: #FFFFFF} </STYLE>

Come è fatto un CSS: regole e commenti Quanto visto finora riguarda essenzialmente il rapporto tra CSS e (X)HTML: tutti gli elementi, gli attributi e le funzionalità analizzate fanno parte della specifica del secondo linguaggio. Con questa lezione entriamo nel vivo dell'argomento. Iniziamo con l'analisi degli elementi costitutivi di un foglio di stile. Aprite questo file, dopo averlo scaricato, con il vostro editor preferito. Tutto quello che ci trovate dentro appartiene a due tipologie di dichiarazioni: regole (ingl. rules) e commenti. Ecco, un foglio di stile non è altro che questo: un insieme di regole, accompagnate, volendo, da qualche nota di commento. Andiamo innanzitutto a spiegare cos'è e com'è fatta una regola. Com'è fatta una regola

L'illustrazione mostra la tipica struttura di una regola CSS. Essa è composta da due blocchi principali: • il selettore • il blocco delle dichiarazioni Il selettore serve a definire la parte del documento cui verrà applicata la regola. In questo caso, ad esempio, verranno formattati tutti gli elementi <H1>: lo sfondo sarà rosso, il colore del testo bianco. I selettori possono essere diversi e a queste varie tipologie dedicheremo una delle prossime lezioni. Per il momento sia chiara la funzione che essi svolgono.

Il blocco delle dichiarazioni è delimitato rispetto al selettore e alle altre regole da due parentesi graffe. Al suo interno possono trovare posto più dichiarazioni. Esse sono sempre composte da una coppia: • proprietà • valore La proprietà definisce un aspetto dell'elemento da modificare (margini, colore di sfondo, etc) secondo il valore espresso. Proprietà e valore devono essere separati dai due punti. Una limitazione fondamentale da rispettare è questa: per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori. Questa regola è pertanto errata: body {color background: black;} Mentre questa è perfettamente valida e plausibile: p {font: 12px Verdana, arial;} Ancora, se in un blocco si definiscono più dichiarazioni, come nell'esempio in figura 1, esse vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser più datati lo richiedono: aggiungetelo sempre per sicurezza e per una maggiore compatibilità. Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità. Commenti Per inserire parti di commento in un CSS racchiudetelo tra questi segni: • /* come segno di apertura • */ come segno di chiusura Proprietà singole e a sintassi abbreviata Nelle definizione delle regole è posssibile fare uso di proprietà singole e proprietà a sintassi abbreviata. Con questa espressione traduciamo il termine inglese shorthand properties reso spesso, alla lettera, con il termine scorciatoie. Le proprietà singole sono la maggior parte: impostano per un dato elemento o selettore un singolo aspetto. Con le shorthand properties, è possibile invece definire con una sola dichiarazione un insieme di proprietà. Chiariamo con un esempio.

Ogni elemento presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. È possibile definire per ciascuno di essi un valore usando quattro proprietà singole separate: • • • •

margin-top margin-right margin-bottom margin-left

La regola sarebbe questa: div { margin-top: 10px; margin-right: 5px; margin-bottom: 10px; margin-left: 5px; } Lo stesso risultato si può ottenere usando la proprietà a sintassi abbreviata margin: div {margin: 10px 5px 10px 5px;} Approfondiremo nel corso dell'analisi delle proprietà usi e costrutti sintattici di ciascuna. Per il momento ci limitiamo all'elenco: background | border | border-top | border-right | border-bottom | border-left | cue | font | liststyle | margin | outline | padding | pause |

Id e classi: due selettori speciali I CSS non sarebbero uno strumento così potente senza questi tipi di selettori. Classi e ID sono davvero una delle chiavi per sfruttare al meglio questo linguaggio. In (X)HTML esistono due attributi fondamentali applicabili a tutti gli elementi: sono class e id. Dichiarare questi attributi a prescindere dai CSS non ha alcun senso e non modifica in alcun modo la presentazione della pagina. Ecco un esempio. abbiamo assegnato al paragrafo un attributo class="testorosso":

<p class="testorosso">....</p> Come vedete non succede nulla. Il problema è che il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile. In questa seconda pagina, abbiamo definito un CSS incorporato creando un selettore di tipo classe e assegnando ad esso il nome testorosso: <style type="text/css"> .testorosso { font: 12px arial, Helvetica, sans-serif; color: #FF0000; } </style> Il testo del nostro paragrafo sarà ora formattato secondo i nostri desideri: testo rosso, carattere arial. dimensione di 12px.

Lo stesso meccanismo è valido per i selettori di tipo ID. Ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'ID #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo. In un documento potrò avere senza problemi questa situazione: <p class="testorosso">....</p> <div class="testorosso">....</div> <table class="testorosso">...</table> <p class="testorosso">....</p> La classe .testorosso presente nel CSS formatterà allo stesso modo il testo dei paragrafo, del div e della tabella. Ma non questa: <p id="testorosso">....</p> <div id="testorosso">...</div> Concludendo: una classe consente di superare le limitazioni intrinseche nell'uso di un selettore di elementi. Se imposto questa regola:

p {color: red;} tutti i paragrafi della mia pagina avranno il testo rosso. E se volessi diversificare? Avere, ad esempio, anche paragrafi con il testo nero? Sarei prigioniero della regola iniziale. Scrivo due classi, una per il rosso e una per il nero, le applico di volta in volta secondo le mie necessità e il gioco è fatto. La strategia dovrà dunque essere questa. Se uno stile va applicato ad un solo specifico elemento usate un ID. Se invece prevedete di usarlo più volte ovvero su più elementi definite nel CSS una classe. Chiariti i concetti di base, passiamo ad analizzare usi e sintassi.

Classe Per definire una classe si usa far precedere il nome da un semplice punto: .nome_della_classe Questa è la sintassi di base. Un selettore classe così definito può essere applicato a tutti gli elementi di un documento (X)HTML. Esiste un secondo tipo di sintassi: <elemento>.nome_della_classe Esso è più restrittivo rispetto alla sintassi generica. Se infatti definiamo questa regola: p.testorosso {color: red;} lo stile verrà applicato solo ai paragrafi che presentino l'attributo class="testorosso". Anche qui è importante stabilire un minimo di strategia. Il secondo tipo di sintassi va usato solo se pensate di applicare una classe ad uno specifico tipo di elemento (solo paragrafi o solo div, e così via). Se invece ritenete di doverla applicare a tipi diversi usate la sintassi generica. Una terza possibile modalità è quella che prevede la dichiarazione di classi multiple: p.testorosso.grassetto {color:red; font-weight:bold;} Questa regola applicherà gli stili impostati a tutti gli elementi in cui siano presenti (in qualunque ordine) i nomi delle classi definiti nel selettore. Avranno dunque il testo rosso e in grassetto questi paragrafi:

ma non questo, perchè solo uno dei nomi è presente come valore di class: <p class="grassetto">...</p>

ID La sintassi di un selettore ID è semplicissima. Basta far precedere il nome dal simbolo di cancelletto #: #nome_id Con questa regola: #titolo {color: blue;} assegniamo il colore blue all'elemento che presenti questa definizione: <h1 id="titolo">...</h1> Come per le classi è possibile usare una sintassi con elemento: p#nome_id In realtà questa modalità è assolutamente superflua. Se l'id è univoco non abbiamo alcun bisogno di distinguere l'elemento cui verrà applicata. Inoltre: la sintassi generica si rivela più razionale e utile. Se si dichiara un ID semplice è possibile assegnarlo a qualunque tipo di elemento. Posso usarlo su un paragrafo, ma se poi cambio idea posso passare tranquillamente ad un div senza dover modificare il foglio di stile. Usando la seconda sintassi, invece, sono costretto a rispettare l'elemento definito nel selettore.

CSS: Gestione dello sfondo Sin dalle origini di HTML è stato possibile definire un colore o un'immagine di sfondo per le nostre pagine web. La scelta si restringe comunque a due elementi: il corpo principale della pagina (<BODY>) o le tabelle. Un'altra limitazione riguarda il comportamento delle immagini di sfondo: esse vengono infatti ripetute in senso orizzontale e verticale fino a riempire l'intera area della finestra, del frame o della tabella. Proprio questo comportamento ha fatto sempre propendere per la scelta di piccole textures in grado di dare la sensazione visiva

dell'uniformità. Grazie ai CSS queste limitazioni vengono spazzate via e le possibilità creative, compatibilità permettendo, sono davvero infinite. Ecco la lista delle proprietà, applicabili, ed è questa la prima grande innovazione dei CSS, a tutti gli elementi: 1. 2. 3. 4. 5.

background-color background-image background-repeat background-attachment background-position

Ciascuna di essa definisce un solo, particolare aspetto relativo allo sfondo di un elemento. La proprietà background, invece, è una proprietà a sintassi abbreviata con cui possiamo definire sinteticamente e con una sola dichiarazione tutti i valori per lo sfondo. La analizeremo alla fine. Prima è necessario chiarire significato e sintassi delle proprietà singole.

background-color Definisce il colore di sfondo di un elemento. Questa proprietà non è ereditata. Sintassi selettore {background-color: <valore>;} Valori • un qualunque colore • la parola chiave transparent Usando transparent come valore un elemento avrà come colore quello dell'elemento parente. Esempi body { background-color: white; } p { background-color: #FFFFFF; } .classe1 { background-color: rgb(0, 0, 0)

background-image Definisce l'URL di un'immagine da usare come sfondo di un elemento. Questa proprietà non è ereditata. Sintassi

selettore { background-image: url(<valore>); } Valori • un URL assoluto o relativo che punti ad un'immagine • la parola chiave none. Valore di default. Usare none equivale a non impostare la proprietà: nessuna immagine verrà applicata come sfondo. Esempi body {background-image: url(sfondo.gif); } div body {background-image: url(http://www.server.it/images/sfondo.gif); } Usando questa proprietà da sola si ottiene lo stesso risultato che in HTML si aveva con l'attributo background. Una buona norma e il buon senso vogliono che quando si definisce un'immagine come sfondo si usi sempre anche un colore di sfondo e che questo colore consenta una lettura agevole del testo. Se le immagini sono disabilitate, ad esempio, il browser mostrerebbe il suo colore di sfondo predefinito: se questo è bianco e il nostro testo pure sarebbe evidentemente un disastro. Attenzione, dunque!

background-repeat Con questa proprietà iniziano le novità. Essa consente di definire la direzione in cui l'immagine di sfondo viene ripetuta. Proprietà non ereditata. Sintassi selettore {background-repeat: <valore>;} Valori • repeat. L'immagine viene ripetuta in orizzontale e verticale. E' il comportamento standard. • repeat-x. L'immagine viene ripetuta solo in orizzontale. • repeat-y. L'immagine viene ripetuta solo in verticale. • no-repeat. L'immagine non viene ripetuta. Esempi

body { background-image: url(sfondo.gif); background-repeat: repeat; } div { background-image: url(sfondo.gif); background-repeat: repeat-x; }

background-attachment Con questa proprietà si imposta il comportamento dell'immagine di sfondo rispetto all'elemento cui è applicata e all'intera finestra del browser. Si decide, in pratica, se essa deve scorrere insieme al contenuto o se deve invece rimanere fissa. Proprietà non ereditata. Sintassi selettore {background-attachment: <valore>;} Valori • scroll. L'immagine scorre con il resto del documento quando si fa lo scrolling della pagina • fixed. L'immagine rimane fissa mentre il documento scorre Questa proprietà consente risultati estetici di grande impatto ed è consigliabile, per ottenerne il meglio, usarla sia in combinazione con le altre proprietà sia con immagini grandi. Esempi body { background-image: url(back_400.gif); background-repeat: repeat-x; background-attachment: fixed; }

background-position Definisce il punto in cui verrà piazzata un'immagine di sfondo non ripetuta o da dove inizierà la ripetizione di una ripetuta. Si applica solo agli elementi blocco o rimpiazzati. Attenzione alla compatibilità e alla resa, non omogeena, tra i vari browser. Proprietà non ereditata. Sintassi selettore {background-position: <valore> o <valori>;} Valori I valori possibili sono diversi. Tutti però definiscono le coordinate di un punto sull'asse verticale e su quello orizzontale. Ciò può avvenire nei seguenti modi:

• con valori in percentuale • con valori espressi con unità di misura • con le parole chiave top, left, bottom, right body { background-image: url(back_400.gif); background-repeat: no-repeat; background-position: 50px 50px; } Significa che l'immagine apparirà a 50px dal bordo superiore e a 50px da quello sinistro della finestra. Potevo usare invece dei pixel altre unità di misura o percentuali. Come al solito, la scelta delle percentuali mi assicura una maggiore affiidabilità a risoluzioni diverse. Allo stesso modo potevo utilizzare le parole chiave. Se, ad esempio, uso: body { background-image: url(back_400.gif); background-repeat: no-repeat; background-position: center center; } l'immagine di sfondo apparirà centrata in entrambe le direzioni. Logica vuole, trattandosi di definire le coordinate che si impostino due valori. Definendone uno solo esso sarà usato sia per l'asse orizzontale che per quello verticale.

background E veniamo alla proprietà background. Con essa, ricordiamolo, possiamo definire in un colpo solo tutti gli aspetti dello sfondo. Per essere valida, la dichiarazione non deve contenere necessariamente riferimenti a tutte le proprietà viste finora, ma deve contenere almeno la definizione del colore di sfondo. Sintassi selettore {background: background-color background-image background-repeat backgroundattachment background-position;} I valori non vanno separati da virgole. L'ordine non è importante, ma quello dato è il più logico e andrebbe rispetatto: si va in ordine di importanza. Esempi

body { background: white url(sfondo.gif) repeat-x fixed; }

Appunti sul colore

Croce e delizia di chiunque si trovi a lavorare con le immagini, il colore è una delle componenti maggiormente difficili da gestire e comprendere e tutte le teorie sul colore sono legate alla spiegazione della natura fisica della luce. Sulla natura del colore possiamo dire che si tratta di una percezione visiva, è il nostro cervello a codificare come colori le sensazioni che riceve quando la luce colpisce i nostri occhi. Per una formulazione scientifica della relazione tra lo stimolo della luce e la percezione del colore si deve arrivare al 600. E precisamente al 1666, quando Newton fece un esperimento entrato nella storia: l'esperimento di dispersione della luce. Newton scoprì che un fascio di luce bianca - priva quindi di colore - quando attraversa un prisma di vetro viene scomposta in uno spettro di luci, ossia ogni componente cromatica subisce una rifrazione diversa dalle altre componenti. Newton riuscì anche a compiere il processo inverso, cioè ricompose la luce bianca, facendo passare i diversi fasci colorati in un secondo prisma rovesciato. Newton chiamò i colori derivanti dalla rifrazione colori spettrali, e nel trattato Optiks scrive: "il rosso, il giallo, il verde, l'azzurro e il violetto che tende al viola, insieme all'arancione, all'indaco, e a un'indefinita varietà di gradazioni intermedie".

Newton distinse sette colori derivanti la rifrazione, fra i quali anche l'indaco, compreso fra il violetto e l'azzurro, ma era probabilmente suggestionato dalla convinzione che i fenomeni naturali fossero tutti riconducibili al numero sette, considerato all'epoca un numero perfetto. In realtà la percezione visiva dell'occhio umano comprende milioni di colori, riconducibili a sei famiglie di colori dell'iride: rosso, arancione, giallo, verde, azzurro e violetto. Newton infine ricondusse i colori spettrali a tre bande di colore predominanti: Rosso(R), Verde(G) e Blu(B), detti colori primari, la cui somma in diverse proporzioni genera tutte le tonalità dello spettro (sintesi additiva). La somma dei tre colori primari in proporzioni eguali produce la luce bianca, mentre sottraendo dalla luce bianca un colore dato si ottiene il colore complementare - ad esempio rosso e ciano (sintesi sottrativa). È da questi due processi che derivano le due fondamentali terne di colori: Rosso, Verde e Blu per la sintesi additiva, la cui somma in proporzioni uguali produce il bianco; Ciano, Magenta e Giallo per la sintesi sottrattiva, la cui somma in proporzioni uguali produce il nero.

Per la teoria newtoniana percepiamo un oggetto di un colore poiché questo assorbe tutte le componenti cromatiche della luce tranne la componente che ne caratterizza il colore e che viene riflessa. Ad esempio un oggetto ci appare rosso perché riflette il colore rosso, mentre assorbe tutte le altre componenti della luce. Quindi gli oggetti che percepiamo come bianchi riflettono tutti i colori dello spettro, mentre quelli neri li assorbono tutti. L'esempio migliore per comprendere come effettivamente il fenomeno avvenga in natura ci è dato dal mondo sottomarino. Con i pesci, e poche altre specie animali, condividiamo la percezione dei colori, negata alla maggior parte dei mammiferi. Pensiamo alle riprese sottomarine di certi meravigliosi e coloratissimi pesci....perché sono così colorati? Non sarebbe più prudente, per sfuggire ai predatori, un tono un pó più dimesso? No, perché in profondità la componente cromatica della luce che riesce a penetrare è quella blu. E quindi per non essere notati non c'è nulla di meglio che essere di qualsiasi colore tranne il blu! La componente cromatica blu della luce che arriva in profondità, viene assorbita e non riflessa, in tal modo agli occhi di un predatore un pesciolino, ad esempio rosso, appare nero e si confonde facilmente nell'ambiente sottomarino. La natura è prudente, solo se sono colpiti dalla luce bianca delle nostre telecamere - cioè reagendo a tutte le componenti cromatiche - i pesci ci rivelano i loro colori sgargianti.

Quale colore? Per comunicare cosa? Lo scopo di un sito Web è quello di trasmettere contenuti. Quando un utente visita un sito si muove in un ambiente virtuale più o meno strutturato e articolato. Dunque è importante che il sito sia in grado di fornire una segnaletica immediata, che permetta all'utente di muoversi agevolmente, e di indirizzarsi verso i suoi obiettivi. È essenziale che l'utente sappia sempre dove si trova, in modo da sapersi orientare, ripetere un percorso e avere la sicurezza di avere colto tutte le informazioni, inerenti alla sua ricerca, disponibili in quel sito. Un sito è l'immagine di un ente o di un'idea, e la coerenza grafica è un elemento che ne rafforza molto l'identità, e ne facilita la memorizzazione. L'utente che naviga in un sito in cui vige il principio dell'armonia visiva, dove tutti i colori delle componenti grafiche - barra di navigazione, banner, bottoni, testi - sono legati tra loro da un attributo comune, sperimenta una piacevole esperienza visiva. Il colore e l'interfaccia devono quindi guidare l'orientamento dell'utente, e definire l'identità visiva di un sito in tutte le sue pagine. La scelta del colore da impiegare purtroppo non è sempre intuitiva. Quando il sito ha come scopo principale quello di pubblicizzare un prodotto, la scelta del colore automaticamente si focalizza verso il colore del prodotto stesso. Quando invece il sito ha come scopo quello di veicolare contenuti diversi (supponiamo un portale), la scelta del colore è problematica, in quanto è possibile scegliere un colore base generale che può presentare delle discordanze con il messaggio del contenuto selezionato. Ad esempio il blu (o un azzurro spento) che simboleggia pace e quindi fiducia e tranquillità, autorevolezza, attendibilità, serietà e rigore scientifico, può essere il colore predominante per un sito aziendale. Tuttavia se il rosso identifica l'area delle offerte, si incontrano delle sovrapposizioni in quanto il rosso e il blu suscitano diversi atteggiamenti. Quale messaggio viene veicolato? Quello di relax e pace corrispondente al colore blu, o quello di forza e movimento corrispondente al colore rosso?

Il teorema Per creare l'identità di un sito complesso, ad esempio un portale, occorre scegliere i colori non facendo strettamente ricorso alle informazioni che questo intende veicolare, in quanto un sito web è in continuo mutamento, mobile, interattivo, e variabile nei suoi contenuti. La gestione dei colori di un sito non è assolutamente simile a quello di un libro o di un qualsiasi messaggio cartaceo. È indispensabile che ogni sito abbia un teorema definito che regoli l'impiego del colore in tutte le sue pagine, in modo da creare un mondo fantastico, unico e quindi riconoscibile. Il teorema deve giocare sulle tre proprietà che caratterizzano ogni colore (la tinta, la luminosità e la saturazione), e sui rapporti quantitativi cromatici.

Tinta, saturazione e luminosità La tinta (hue) è il colore riflesso o trasmesso attraverso un oggetto. In generale è identificata dal nome del colore, come ad esempio rosso, arancione, blu e verde. La luminosità (lightness), è la chiarezza o la scurezza relativa del colore ed è comunemente misurata come percentuale da 0% (nero) a 100% (bianco). La saturazione (croma) è la potenza o la purezza del colore. Rappresenta la quantità di grigio rispetto alla tonalità ed è calcolata come percentuale da 0% (grigio) a 100% (saturazione completa). Si attribuisce saturazione nulla ai colori acromatici (scala di grigi), e saturazione massima ai colori puri.

Possibili teoremi potrebbero essere l'impiego: • di colori diversi per tinta, ma con chiarezza e saturazione costanti, per ogni contenuto; • di soli colori vivaci;

• di soli colori attenuati; • di spostamenti di tinta.

Rapporti quantitativi tra i colori È indubbio che un colore assume un valore solo in rapporto ai colori a cui viene accostato. Supponiamo ad esempio di dover progettare il sito della Ferrari. Il colore della Ferrari è il rosso, dunque, per antonomasia, lo è anche il sito. Tuttavia, se l'intera pagina web appare rossa, la forza e l'energia di questo colore perde efficacia. Perché il rosso trasmetta tutta la sua potenza deve essere messo in contrasto con altri colori. Una pagina nera con solo un pallino o una barra rossa, sarà più efficace in quanto comunicherà "io sono rosso, tutto il resto no".

? La scelta dei colori assume una funzione puramente segnaletica e rafforza il sistema di identificazione con il settore scelto che ricorre per tutto il sito.

La palette dei colori si limita alle tonalità websafe per assicurare la massima compatibilità con il sistema in uso dall'utente. Le tinte, sono scelte su una gamma molto vicina alle tendenze attuali e prediligono toni molto abbassati e dominati dal grigio per non creare un impatto violento che renda ingestibile l'introduzione di altri elementi visivi nelle pagine.

Esempio Su incarico della Microsoft, l'interfaccia del nuovo sistema operativo XP è stata rigorosamente analizzata, in tutte le sue componenti, dalla Scuola Politecnica di Milano, tramite tre docenti: N. Silvestrini, una delle massime autorità nel settore del Colore, M. Hachen, esperto di Scienza della Visione, e F. Crepaldi, net semiologo.

Secondo questa ricerca il colore blu, utilizzato nella schermata di login, risulta essere una buona scelta in quanto ottimo elemento di supporto e di identificazione aziendale. Il blu, con le sue sfumature, determina una buona leggibilità dei positivi e dei negativi, garantisce ampie gamme di trasparenze fisiche e percettive, molto gradite da parte dell'utenza, e ha una diffusa preferenza percettiva e culturale, almeno in Europa, a partire dal XII secolo. Rimanda infatti a due delle nostre più profonde esperienze naturali: il colore del cielo e il colore del mare. Anche la scelta del colore verde acceso per individuare il pulsante “start”, vero e proprio punto di partenza per qualsiasi "esperienza" con il Personal Computer, risulta ben motivata. Il verde è il colore che più si addice per questo pulsante: richiama subito il concetto di avvio di un'operazione e determina un notevole grado di sicurezza nell'utente.

Inoltre, se si analizza in profondità il pulsante, si può notare come il colore verde non sia piatto. La definizione tridimensionale non è più affidata unicamente a una colorazione dei bordi in bianco e nero leggermente sfumati, ma è stata accuratamente studiata in modo tale che la diffusione del colore verde faccia apparire il bottone simile a un led. Poiché il colore verde dei led è associato solitamente al corretto funzionamento dello specifico dispositivo hardware, nel caso di Xp lo stesso colore comunica il corretto funzionamento del sistema. Si ha dunque l'idea immediata di uno strumento funzionante.

Risulta essere una buona scelta anche la colorazione in rosso del bottone che permette la chiusura della finestra. Nelle precedenti versioni quest'elemento grafico risultava abbastanza uniforme rispetto a quelli adiacenti, e di difficile riconoscibilità. Averlo evidenziato in rosso fa porre attenzione sulla funzione critica a esso collegata: quella della chiusura definitiva della finestra. Infine, questa interessante analisi, evidenzia l'ottima sequenza di pulsanti di colore verde, giallo e rosso che corrispondono rispettivamente alle funzioni“Standby”, “Spegni” e “Riavvia”. Anche in questocaso si è infatti in presenza di richiami forti, precisie facilmente riconoscibili da parte dell'utenza.Concludendo è emersa l'importanza di una cultura aggiornata sul colore per gli operatori del web.

Conoscere le "regole" del colore non significa volere definire un codice cromatico internazionale, in quanto questo non solo sottrarrebbe la libertà di espressione grafica, ma priverebbe Internet della sua forza e bellezza, ossia la libertà, il fatto di essere lo specchio dell'umanità. ?

â&#x20AC;&#x153;Le regole ci devono essere, ma contestualizzate, all'interno di ogni sito, in modo tale che il navigatore, imparandole, possa muoversi agevolmente, e ricordare l'dentitĂ del sito.â&#x20AC;? Pagina 1 di 42