6. I tag di intestazione 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.
7. I tag di intestazione 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.
8.
9. Il corpo di una pagina Html 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 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 .
10. Il corpo di una pagina Html 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
11.
12. 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. Bisogna considerare anche che è necessario che sul computer di chi visualizza la pagina sia installato il tipo di carattere indicato nel tag <FONT>.
13. Impostare i caratteri 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 </FONT> 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.
14. Impostare i caratteri 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>
15. Paragrafi e allineamenti 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 <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>. 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.
16. Paragrafi e allineamenti 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. 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.
17. Paragrafi e allineamenti 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.
18. 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.
19. Formattazione 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. <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.
20. Titoli ed elenchi 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.
21. Titoli ed 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>
22. Titoli ed 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>
23. Titoli ed elenchi 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.
24. Gestione delle immagini - 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. Gli attributi del tag <IMG> che ci permettono di personalizzare l'impaginazione dell'immagine sono: 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" >
25. Gestione delle immagini - Tag IMG 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. <IMG SRC="image.jpg" ALIGN="bottom"> I valori di ALIGN ammessi sono: Bottom, Middle, Left, Right .
26. Gestione delle immagini - Tag IMG 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" >
27.
28. 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-Reference (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.
29. I collegamenti ipertestuali 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.andrea.infussi.it” > La ANDREA.INFUSSI </A>
30. I collegamenti ipertestuali 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>
31. I collegamenti ipertestuali 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:andrea.infussi@andrea.infussi.it” > Scrivimi per informazioni </A>
32. I collegamenti ipertestuali 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.
33. I collegamenti ipertestuali 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.
34. Le Tabelle – Il 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> .
35. Le Tabelle – Il Tag 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.
36. Le Tabelle – Il Tag TABLE La larghezza di una tabella si specifica tramite l'attributo WIDTH 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.
37. Le Tabelle – Il Tag TABLE 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.
38. Le Tabelle – Il Tag TABLE 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. 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. <TABLE CELLPADDING ="numero di pixel" > ... </TABLE> In mancanza di indicazioni il valore predefinito è 1 pixel.
39. Le Tabelle – Il Tag TABLE 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.
40. Le Tabelle – Il Tag TABLE 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.
41. Le Tabelle – Il Tag TABLE Considerando ad esempio la tabella a due righe e due colonne : <TABLE> <TR> <TD> cella 1 </TD> <TD> cella 2 </TD> </TR> <TR> <TD> cella 3 </TD> <TD> cella 4 </TD> </TR> </TABLE> 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>
42. Le Tabelle – Il Tag 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>
43. Le Tabelle – Il Tag 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.
44. Le Tabelle – Il Tag TABLE 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.
45. I Frames – Il 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.
46. I Frames – Il Tag FRAMESET 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.
47. I Frames – Il Tag FRAMESET 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.
48. I Frames – Il Tag FRAMESET 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>
49. I Frames – Il Tag 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.
50.
51. I Frames – Il Tag FRAMESET 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> .
52. I Frames – Il Tag 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> </FRAMESET> Modificando liberamente questi parametri è possibile ottenere diverse strutture basate su frame annidati.
53. I Forms – Il Tag FORM Uno dei fattori che ha decretato il successo del Web è senz’altro la possibilità di interagire : la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), ma soprattutto di partecipare a vere e proprie comunità virtuali. Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form ). L’invio dei dati è solitamente organizzato in due parti: una pagina principale che contiene i vari campi dei form, che consentono all’utente di effettuare delle scelte, scrivere del testo, inserire un’immagine una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp o altro.
54. I Forms – Il Tag FORM Per creare una pagina con dei moduli, bisogna utilizzare l’apposito tag <form> : si tratta di un elemento di blocco , <form name ="datiUtenti" action ="paginaRisposta.php"> …. </form> Come si può vedere, " name " serve per indicare il nome del form, " action " indica l’URL del programma o della pagina di risposta che processerà i dati. Grazie all ’"action" è anche possibile far sì che i dati vengano inviati in e-mail al webmaster (si tratta infatti a tutti gli effetti di un riferimento a un URL). <form action="mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito" enctype="text/plain" method="POST">
55. I Forms – Il Tag FORM Quando creiamo un form possiamo scegliere due metodi ( Method ) di invio: GET e POST . Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella " querystring ", cioè nella " stringa di interrogazione ") secondo questa forma: http://www.prova.it/paginaRisposta.php?nome=Mario&cognome=Rossi& datiInviati=prova+invio I dati (nella forma nome del campo = valore del campo ) sono appesi alla pagina dopo il punto interrogativo.
56. I Forms – Il Tag FORM Alcuni server hanno tuttavia hanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per l’invio in get è: <form name="datiUtenti" action="paginaRisposta.php" method="GET">
57. I Forms – Il Tag FORM Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile). In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è: <form name="datiUtenti" action="paginaRisposta.php" method="POST">
58. I Forms – Il Tag FORM Prima di passare i dati alla pagina di risposta, che si trova sul server, questi vengono codificati (Enctype - tipo di codifica) dal browser in modo da non poter dare adito ad errori (ad esempio gli spazi vengono convertiti in "+"). Normalmente non è necessario specificare come si vuole effettuare la codifica dei dati, perché è sottinteso l’invio di semplice testo. A volte però, come quando è necessario inviare un’immagine, è tuttavia indispensabile dichiarare espressamente quali dati vogliamo inviare. Per farlo è necessario utilizzare l’attributo "enctype" <form name="datiUtenti" action="paginaRisposta.php" enctype ="text/plain"> Ma nel caso di invio di immagini dovremo dichiarare: <form name="datiUtenti" action="paginaRisposta.php" method="post" enctype ="multipart/form-data">
59. I Forms – Il Tag FORM Infine grazie all’attributo " target " è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente (o in una determinata parte di un frameset ): <form name="datiUtenti" action="paginaRisposta.php" method="get" target="_blank">
60. I Forms – Il Tag INPUT Per quel che riguarda i campi dei form il tag più utilizzato è l’ <INPUT >, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo ( type ) di input. Ad esempio: <input type="text"> crea un campo di testo. <input type="button"> crea un bottone.
61. I Forms – Il Tag INPUT Per quel che riguarda i campi dei form il tag più utilizzato è l’ <INPUT >, che è senza chiusura. Per specificare un determinato tipo di campo è sufficiente indicare il tipo ( type ) di input. Ad esempio: <input type="text"> crea un campo di testo. <input type="button"> crea un bottone.
62. I Forms – Il Tag INPUT I vari <input> sono dotati di attributi che consentono di indicare il tipo di campo, il nome ( ad esempio per interagire con JavaScript ), e il valore (per lo più il testo visualizzato). <input type ="text" name ="tuoTesto" value ="qui il tuo testo">
63. I Forms – Il Tag INPUT Ogni form deve avere obbligatoriamente un bottone di invio . La sintassi tradizionale per creare un bottone di invio è: <input type="submit" value="invia i dati"> Ad esempio: <form action=http://www.html.it target="_blank"> <input type="submit" value=“Invia"> </form>
64. I Forms – Il Tag INPUT Un altro bottone utile è il " reset " che – una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall’utente. Ecco un esempio: <form> <input type="text"><br> <input type="reset" value="cancella"> </form>
65. I Forms – Il Tag BUTTON Con l’HTML 4 è stato introdotto il tag < button > che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco. Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire il testo del bottone tra l’apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice HTML all’interno del tag. Esempio: <form action=http://www.google.it target="_blank"> <input type="text"><br> <button type="button"> bottone generico </button> <button type="reset“> cancella </button> <button type="submit"> invia </button> </form>
66. I Forms – Il Tag BUTTON Con il tag button è possibile realizzare bottoni di invio complessi: <button name="vai" type="submit"> <img src=“immagine.gif" width="23" height="67" title="invia adesso" border="1" vspace="5" alt="invia adesso" align="middle"> </button>
67. I Forms – Il Tag BUTTON Grazie all’attributo " disable " è infine possibile disabilitare i bottoni. Es: <input type="submit" value="invia" disabled> o anche: <button type="submit" disabled> invia </button>
68. I Forms – Il type image Il campo " image " ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice: <input name="invia" type="image" src="invia.gif" alt="invia il modulo" title="invia il modulo" width="78" height="38"> come si può vedere, se non si specifica nulla, l’immagine ha valore di submit. Gli attributi del campo immagine sono molto simili a quelli del tag <img> .
69. I Forms – Il type text Per consentire all’utente di inserire del testo è possibile utilizzare un campo testo . Se il campo è su una singola linea avremo: <input name="mioTesto" type="text" value="qui il tuo testo" size="40" maxlength="200"> "maxlength" indica il numero massimo di caratteri che l’utente può inserire, "size" si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).
70. I Forms – Il tag textarea Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una " textarea " ( "area di testo" ). Ecco la sintassi: <textarea name="testo" cols="40" rows="10"> qui puoi scrivere il tuo testo </textarea>
71. I Forms – Il tag textarea Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una " textarea " ( "area di testo" ). Ecco la sintassi: <textarea name="testo" cols="40" rows="10"> qui puoi scrivere il tuo testo </textarea> " rows " indica il numero di righe della textarea, " cols " il numero di caratteri (cioè di colonne) che ogni riga può contenere. Come si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra l’apertura e la chiusura del tag
72. I Forms – Il type password Esiste infine il campo password che codifica i caratteri insieriti con degli asterischi: <input name=“chiave" type="password" size="18" maxlength="8"> da notare che la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando sul monitor dell’utente. L’invio dei dati attraverso il web avviene,se non vengono adottate altre misure di sicurezza, 'in chiaro'.
73. I Forms – Il type text - attributi I campi di testo possono essere anche di sola lettura. Ad esempio: <input name="mioTesto" type="text" value="leggere l'informativa" size="25" maxlength="8" readonly > o disabilitati: <input name="mioTesto" type="text" value="leggere l'informativa" size="25" maxlength="8" disabled >
74. I Forms – Il type checkbox Con i checkbox possiamo consentire all’utente di operare delle scelte multiple. Ad esempio: <fieldset> <legend>Linguaggi conosciuti</legend><br> <input type="checkbox" name="html" value="html"> html <br> <input type="checkbox" name="css" value="css"> css <br> <input type="checkbox" name="javascript" value="javascript"> JavaScript </fieldset>
75. I Forms – Il type checkbox Si possono anche selezionare uno o più valori di default: <input name="html" type="checkbox" value="html" checked > ed è anche possibile disabilitare una casella: <input name="html" type="checkbox" value="html" disabled >
76. I Forms – Il type radiobutton I "radio button" ( "bottoni circolari" ) invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l’altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore: HTML<input type="radio" name="linguaggio" value="html"> CSS <input type="radio" name="linguaggio" value="css"> JavaScript <input type="radio" name="linguaggio" value="javascript"> Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante. <input type="radio" name="linguaggio" value="html" checked disabled >
77. I Forms – Il tag select Grazie al tag < select > è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all’interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso l'attributo " value " . Con l’attributo " selected " si può indicare una scelta predefinita: <fieldset> <legend>Siti per webmaster</legend> <select name="siti" > <option value=“Italia" selected>Italia <option value=“Francia">Francia <option value=“Inghilterra">Inghilterra </select> </fieldset>
78. I Forms – Il tag select Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l’attributo " multiple " l’aspetto del tag select cambia notevolmente: <select name="siti" multiple > <option value="http://www.html.it">www.html.it <option value="http://freephp.html.it">frephp.html.it <option value="http://freasp.html.it">freasp.html.it <option value="http://font.html.it">font.html.it <option value="http://cgipoint.html.it" >cgipoint.html.it </select> Utilizzando il tasto " ctrl " l’utente può così effettuare delle scelte multiple. Tramite l’attributo " size " si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l’altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.
79. I Forms – Il tipo hidden Potremmo avere la necessità di passare dei parametri "di servizio", senza far percepire la loro presenza all’utente. In questo caso possiamo utilizzare dei campi nascosti, presenti all’interno del form ma invisibili all’utente (ricordiamoci sempre di specificare la coppia "nome-valore" ): <input type="hidden " name="urlDiProvenienza" value=" www.andrea.infussi.it ">
