Strumenti per l accesso e la condivisione dei dati in rete Internet Hyper Text Markup Language - HTML

Transcript

1 Strumenti per l accesso e la condivisione dei dati in rete Internet Hyper Text Markup Language - HTML Corso di Reti di Sensori per il Monitoraggio UD03 Corso di Laurea Magistrale in Pianificazione e Politiche per la Città, il Territorio e l Ambiente

2 L'HTML e i browser L'HTML (Hyper Text Markup Language) è il linguaggio con cui si indica come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere. L HTML NON è un linguaggio di programmazione. Più propriamente è un linguaggio di «formattazione» Il Browser è il programma che si usa per navigare nel Web. Svolge principalmente due compiti: scarica i vari files che si trovano su un computer remoto (il server) e che fanno riferimento a un determinato indirizzo legge i documenti scritti in html e, a seconda delle indicazioni ivi contenute, visualizza la pagina in un modo, piuttosto che in un altro; inoltre i vari files associati a quel documento (ad esempio le immagini, o i contenuti multimediali) vengono disposti secondo le indicazioni del codice I browser attualmente più diffusi: Chrome, Firefox, Internet Explorer / Edge, Safari, Opera

3 L'HTML e i browser Acquisire una mentalità multi-browser Per lo sviluppo dei siti non occorre tanto conoscere nei minimi dettagli il codice HTML, quanto piuttosto sapere come il codice HTML verrà visualizzato sul computer dell'utente. Infatti uno dei lavori più difficili è quello di riuscire a far vedere correttamente il proprio sito con i browser e le piattaforme più svariate.

4 La cache I files scaricati dal web vengono memorizzati in una particolare cartella del computer che prende il nome di: cache Può succedere - soprattutto a chi è alle prime armi - di continuare a modificare un file, ma di non riuscire a vederne le modifiche. Questo succede perché la pagina visualizzare è sempre quella vecchia memorizzata nella cache. In molti browser è possibile impostare le preferenze in modo che venga sempre cancellata la cache quanto si chiude il programma.

5 Motore di rendering La visualizzazione di un file html da parte del browser prende il nome di rendering della pagina Il cosiddetto «motore di rendering» è quella sezione del browser che si occupa di visualizzare la pagina applicando stili, layout ed elementi embedded secondo quanto indicato nel codice HTML. In qualsiasi momento è possibile visualizzare il codice HTML delle pagine che stiamo visitando utilizzando la funzione di visualizzazione sorgente:

6 Funzionamento di un browser Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti") non è un linguaggio di programmazione ma un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno di una pagina: le indicazioni vengono date attraverso degli appositi marcatori, detti "tag". Alcuni linguaggi di programmazione sono: C, C++, Visual Basic, Pascal, Java; Alcuni linguaggi di scripting sono: PHP, ASP, PERL, JavaScript. Ciò significa che l'html: a) non ha meccanismi che consentono di prendere delle decisioni ("in questa situazione fai questo, in quest'altra fai quest'altro") b) Non è in grado di compiere delle iterazioni ("ripeti questa cosa, finché non succede questo"), né ha altri costrutti propri della programmazione. Pur essendo dotato di una sua sintassi, non presuppone la logica ferrea e inappuntabile dei linguaggi di programmazione: se vi dimenticate di chiudere un tag, non verranno prodotti dei messaggi di errore; se non rispettate la sintassi probabilmente non otterrete la visualizzazione della pagina che desiderate, ma nient'altro. A volte può essere necessario adottare dei "trucchetti", non proprio da manuale, pur di visualizzare la pagina correttamente con i diversi browser.

7 Lo standard HTML L'organizzazione che si occupa di standardizzare la sintassi del linguaggio HTML è il W3C: World Wide Web Consortium. Ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); e - da un certo punto in poi - l'html si è evoluto in XHTML (HTML riformulato con le regole sintattiche del XML). La versione dell'html che utilizzeremo in questo corso è la 4.01 rilasciata il 24 dicembre In realtà quasi tutti i browsers supportano già da tempo la nuova versione HTML 5 che però non è rilasciata ufficialmente come release ma come recommendation. HTML 5 non soppianta la versione 4 ma integra nuove funzionalità e ottimizza alcuni aspetti.

8 HTML 5 Principali innovazioni Regole più stringenti per la strutturazione del testo in capitoli, paragrafi e sezioni; Nuovi elementi di controllo per i menu di navigazione; Miglioramenti ed estensione degli elementi di controllo per i moduli; Nuovi elementi specifici per il controllo di contenuti multimediali (tag <video> e <audio>); Estensione degli attributi di quasi tutti i tag, specialmente quelli finalizzati all'accessibilità, finora previsti solo per alcuni tag; Supporto per il Canvas che permette di utilizzare JavaScript per creare animazioni e grafica bitmap; Introduzione della geolocalizzazione, dovuta ad una forte espansione di sistemi operativi mobili (quali Android e ios, tra i più diffusi); Introduzione di un sistema alternativo ai normali cookie, più efficiente, chiamato Web Storage che consente anche un notevole risparmio di banda; Standardizzazione di programmi JavaScript, chiamati Web Workers e possibilità di utilizzare siti offline; Sostituzione del tag doctype inutilmente prolisso, con un semplice <!DOCTYPE html> Deprecati o eliminati elementi di scarso o nessun utilizzo effettivo

9 Estensioni dei files Aprite o create un documento con il blocco note, e salvate il file in qualche cartella del vostro computer con estensione "html", ad esempio miapagina.html. Una pagina web è «semplicemente» un file ASCII con estensione.html Fino a qualche tempo fa si era soliti attribuire ai file l'estensione htm, ma questo avveniva perché il dos e poi Windows 3.1 non erano in grado di gestire i file con nomi di grandezza superiore a 8 caratteri ed estensione superiore alle 3 lettere. Dunque.html era diventato.htm, così come.jpeg era diventato.jpg. Si possono utilizzare liberamente entrambe le estensioni ma ormai la consuetudine è quella di utilizzare.html Normalmente il sistema operativo associa automaticamente le estensioni.htm e.html al browser predefinito. NB: Se accade che il browser non «riconosce» la vostra pagina html verificate di non aver salvato con una «doppia estensione» (es..html.txt). Questo può succedere se il vostro sistema operativo è impostato per nascondere le estensioni per i files già associati ad un applicazione.

10 Struttura dei tag HTML

11 I «mattoncini» della pagina HTML: i tag Come abbiamo detto in precedenza, all'interno di ogni pagina è presente una serie di marcatori. I marcatori di cui si compone una pagina HTML prendono il nome di TAG Ai tag viene affidata la formattazione e disposizione dei contenuti. Hanno differenti nomi a seconda della loro funzione. Sintassi di base: I TAG vanno inseriti con le seguenti regole sintattiche: <TAG attributi>contenuto</tag> a) L apertura del tag è una strunga tra parentesi uncinate (<TAG>) b) La chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". </TAG>. c) Il primo elemento dopo l apertura della prima parentesi è detto «nome» del tag e può essere seguito da «attributi» d) Nel tag di chiusura non può esserci nulla tranne lo slash e il nome del tag e) Ciò che sta tra il tag di apertura e il tag di chiusura è detto «contenuto» del tag.

12 Esempi di tag e struttura degli attributi Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra: <p align="right">testo</p> Dall'esempio è evidente che la struttura di un attributo è: attributo="valore" ; la gamma di attributi è definito e dipende dallo specifico tag. I valori degli attributi vanno indicati tra doppi apici. In definita la struttura complessiva di un tag è la seguente: <TAG attributo_1="valore1" attributo_2="valore2">contenuto</tag> Alcuni particolari tag non hanno contenuto - perché ad esempio indicano solo la posizione di alcuni elementi (ad es. il tag delle immagini), conseguentemente questi tag non hanno la chiusura. Vengono detti appunto tag vuoti. La loro forma in origine era dunque: <TAG attributi>, tuttavia con l adozione delle specifiche XHTML si rende necessario lo slash prima della seconda parentesi; ecco un esempio di tag per inserimento di un immagine: <IMG widht="20" height="20" src="logo.gif" alt="logo aziendale" />

13 Disposizione dei tag Una pagina HTML può essere vista come un «flusso» sequenziale di tag dove però occorre rispettare la gerarchia di apertura e chiusura dei tag senza intersecarli. Questa sequenza è corretta: Quest altra no: <TAG1>contenuto 1<TAG2>contenuto 2</TAG2></TAG1> <TAG1>contenuto 1<TAG2></TAG1>contenuto 2</TAG2> Nella sequenza corretta è altrettanto corretto affermare che il TAG2 è un contenuto del TAG1. Tecnicamente il TAG2 è annidato nel TAG1. Possiamo scrivere il codice anche andando a capo per renderlo più leggibile: <TAG1> contenuto 1 <TAG2>contenuto 2</TAG2> </TAG1> Si consideri infine la proprietà di base per cui i contenuti nel flusso HTML tutte le interruzioni di riga e tutti gli spazi vengono renderizzati come un unico spazio. Per inserire più spazi o più righe esistono apposite codifiche. Vedremo più avanti che alcuni tag costituiscono interruzione del flusso e quindi mandano il contenuto a nuova riga mentre altri no.

14 Annidamento e indentazione La logica di tipo strettamente gerarchico dell HTML fa si che sia quantomeno conveniente «indentare» le righe di codice in modo da rendere più leggibile il listato e limitare l inserimento di errori come ad esempio l omissione del tag di chiusura o l errato annidamento. Ad esempio il seguente frammento di codice: <TAG1 attributi>contenuto 1<TAG2>contenuto 2</TAG2></TAG1> E più leggibile se scritto così: <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1> Ma ancor meglio così: <TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2> </TAG1> In questo molti editor aiutano lo sviluppatore con l indentazione automatica e la colorazione del codice. Per indentare si utilizza generalmente il carattere di tabulazione (TAB).

15 Commenti Un strategia adottata universalmente da tutti gli sviluppatori per rendere più comprensibile un listato (esiste una sintassi per i commenti per ogni linguaggio), è quella di inserire dei «commenti» nei punti significativi. Si tratta di indicazioni significative per lo sviluppatore, ma sostanzialmente «invisibili» al browser; i commenti quindi non hanno alcuna influenza nel rendering della pagina. La sintassi dei commenti HTML è la seguente: <!-- questo è un commento HTML --> Il commento può anche comprendere più righe di codice: <!-- questo è un commento che comprende più righe di testo <b>testo in grassetto</b> --> Si noti che tutti i tag compresi nei commenti non vengono renderizzati.

16 Commenti <html> <!-- qui inizia la pagina --> <head> </html> <!-- qui l intestazione --> </head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title> <!-- qui il titolo --> HTML.it </title> <body> <!-- qui il contenuto visibile della pagina--> </body> Lorem ipsum factum

17 Maiuscolo / minuscolo L'HTML è «case unsensitive», cioè indipendente dal maiuscolo e minuscolo. E quindi del tutto indifferente scrivere tag e attributi in maiuscolo o in minuscolo. vengono renderizzati allo stesso modo dal browser. <P ALIGN="RIGHT"> e <p align="right"> NB: naturalmente i contenuti sono invece «case sensitive» in quanto sono ciò che viene visualizzato materialmente nella pagina. Fino a qualche tempo fa, per aumentare la leggibilità del codice, era consuetudine scrivere in maiuscolo il nome del tag (es: <P>) e in minuscolo gli attributi (es: align="right"). Quindi: <P align="right">. Tuttavia oggi, per analogia con l'xhtml (che è figlio dell'xml e dell'html ed è «case sensitive») è consigliabile scrivere tutto in minuscolo, fermo restando che se per errore dovessimo scrivere dei tag in maiuscolo ciò non costituisce un errore.

18 Struttura di una pagina HTML

19 Macrostruttura della pagina Una pagina HTML è sostanzialmente composta di una riga che definisce un tipo di documento tra i diversi standard definiti nel corso degli anni, e il documento stesso che a sua volta è composto di intestazione e corpo. Nel corpo viene inserita la gran parte dei contenuti da visualizzare. Definizione tipo documento Documento Intestazione Corpo

20 La pagina HTML tipo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </html> </head> <body> </body> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>titolo della pagina</title> contenuto.

21 La pagina tipo in HTML 5 <!doctype html> <html lang="en"> <head> </html> </head> <body> </body> <meta charset="utf-8"> <title>titolo della pagina</title> contenuto

22 Tipo del documento: la «doctype declaration» Detta DTD (Document Doctype Declaration), la prima riga di codice di una pagina HTML definisce quale tipo di definizione si intende utilizzare. I più comuni doctype sono: HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Frameset XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset XHTML 1.1 HTML 5 Le versioni sono sostanzialmente 3: HTML 4 e 5 e XMTML già descritte nella prima lezione. Le varianti sono: Strict, Transitional, Frameset La variante Strict non contiene gli elementi «deprecati» a differenza della Transitional. Frameset è uguale Transitional ma consente in più l uso dei frames. Il doctype più comunemente usato è ancora il HTML 4.1 Transitional che è anche quello che utilizzeremo nel corso.

23 Doctype declaration La DTD è la prima riga del listato HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Apertura del doctype HTML Indica che il linguaggio utilizzato per il documento corrente è l'html PUBLIC Indica che il documento è pubblico -//W3C//DTD HTML 4.01 Transitional//EN Indica che il documento si riferisce ad una specifica del W3C, che il DTD è HTML versione 4.01 Transitional e che la lingua è l'inglese E' la URL alla quale è raggiungibile la specifica relativa alla DTD del documento; questa indicazione è facoltativa (e nella prassi frequentemente omessa).

24 L intestazione (HEAD) Nell HEAD della pagina vengono inseriti elementi non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato dal browser. <head></head> In particolare in questa sezione vengono inseriti 4 fondamentali elementi: Il Title (il titolo della pagina che compare sulla barra della finestra del browser) I meta-tag (ad esempio quelli a beneficio dei motori di ricerca) Gli script di carattere generale (come ed esempio le definizioni di funzioni) I rifermenti ai fogli di stile Il tag head non ha attributi.

25 Il tag TITLE Il TITLE è il titolo della pagina e compare in alto sulla barra del browser. <title>titolo della pagina</title> È bene compilarlo da subito, onde evitare di dimenticarlo e di avere pagine senza titolo. Questo elemento è strategico per almeno due motivi: 1) Viene visualizzato sulle barre delle finestre ma soprattutto delle schede di molti browser e consente l individuazione dei diversi contenuti a colpo d occhio senza dover visualizzare necessariamente la pagina; 2) Il valore del tag è la parola chiave che assume l importanza maggiore nell indicizzazione automatica effettuata dai motori di ricerca.

26 Set di caratteri Si utilizzano i CHARSET per indicare al browser quale set di caratteri utilizzare nel rendering: <meta http-equiv="content-type" content="text/html; charset=iso "> Questo meta-tag indica l utilizzo del set iso , ovvero il set di caratteri latini utilizzati nei paesi occidentali. <meta charset="utf-8"> Questo meta-tag (espresso nella forma breve prevista dall HTML 5) indica l utilizzo del set esteso utf-8, detto anche Unicode, che comprende il set base dell iso più una serie di altri caratteri usati in quasi tutte le lingue vive e in alcune lingue morte, nonché simboli matematici e chimici, cartografici, l'alfabeto Braille, ideogrammi ecc. In teoria, qualsiasi codifica dei caratteri può essere utilizzata, ma nessun browser è in grado di interpretarle tutte. L utilizzo di una codifica molto ampia come l unicode aumenta la possibilità che la maggiornaza dei browser visualizzino correttamente i contenuti.

27 Il corpo (BODY) Nel BODY si inserisce la gran parte del contenuto di una pagina. <body></body> Il tag BODY può essere pensato come il «foglio» su cui disponiamo i contenuti ovvero la superficie sopra la quale vengono renderizzati tutti gli altri elementi. Tale superficie dispone dei segueni attributi: BGCOLOR (colore di sfondo) BACKGROUND (immagine di sfondo) LEFTMARGIN e TOPMARGIN (margini in orizzontale e in verticale) TEXT (colore del testo) LINK (colore dei collegamenti ipertestuali) ALINK (colore dei link attivi) VLINK (colore dei link visitati) Oltre ai cosiddetti «attributi globali», in particolare quelli per i fogli di stile: STYLE, CLASS e ID Va detto però che tutti gli attributi di cui sopra, tranne TEXT, sono considerati DEPRECATI in virtù dell adozione dei fogli di stile

28 URL, nomi e percorsi

29 Riferimenti alle risorse esterne alla pagina Un documento come una pagina web è composta dalla parte di testo e da altre risorse di carattere non testuale come immagini, contenuti multimediali ma anche librerie di stili e di script. Queste risorse sono di fatto «esterne» alla pagina stessa. Non sono cioè contenute nel file HTML. Un esempio intuitivo di questo tipo di risorse sono le immagini; esse infatti sono semplicemente «collegate» alla pagina, non inserite nel codice. Per queste risorse, il codice HTML prevede l utilizzo di «indirizzi» da cui il browser può prelevare (scaricare) la risorsa stessa. Ecco perché, anche una singola pagina web non è quasi mai un solo file ma un gruppetto di file: tipicamente troviamo: il file HTML le immagini i fogli di stile gli script

30 Percorsi assoluti e percorsi relativi I siti web composti di poche pagine possono essere gestiti utilizzando una sola cartella. La generalità dei siti però ha molte pagine per cui è necessario mettere ordine alla numerosità dei file necessari. Nella maggioranza dei siti web abbiamo esigenze come ad esempio: inserire le immagini in una cartella specifica o in più cartelle dedicate dividere il sito in varie sezioni utilizzando cartelle diverse gestire tutti i documenti dello stesso tipo in modo più efficiente organizzandoli in cartelle dedicate I siti web sono dunque organizzati in strutture ordinate. Si parla anche di albero di un sito a sottolineare la natura strettamente gerarchica di tale struttura. L organizzazione di un sito in cartelle e sottocartelle è da tempo la prassi. Per questo occorre imparare a muoverci tra i vari file che costituiscono il sito, in modo da essere in grado di creare collegamenti verso i documenti che risiedono ai diversi livelli di profondità della struttura. I collegamenti si effettuano sulla base di un «indirizzo», detto anche «percorso» che può essere di due tipi: ASSOLUTO RELATIVO

31 I percorsi assoluti e gli URL Indipendentemente dalla cartelle in cui è localizzata la risorsa a cui vogliamo puntare, i percorsi assoluti contengono per esteso la sequenza delle cartelle e sottocartelle che portano dalla radice alla risorsa stessa. Ad esempio, l indirizzo è un percorso assoluto ed è composto dei seguenti elementi: Indica al browser di utilizzare il protocollo per navigare nel web (l http) css/ Indica che la risorsa si trova sul sito « Indica che la risorsa indicata si trova all interno della cartella "css" index.html Indica che il file da collegare è quello chiamato «index.html» Per tutte le risorse ospitate sui server web pubblici esiste dunque un percorso assoluto univoco da cui prelevarle; questo percorso è detto URL (Universal Resource Locator). NB: per collegare una risorsa ospitata su un server diverso da quello del nostro sito è ncessario utilizzare un URL assoluta.

32 Percorsi relativi Raramente si sviluppa un sito web operando direttamente all interno delle cartelle pubbliche del server. Spesso si lavora «in locale» ovvero sul nostro computer o su un computer della nostra rete interna, oppure si lavora su un server provvisorio e si effettua il «deploy» definitivo dei files una volta terminato lo sviluppo. I tutti questi casi l utilizzo di percorsi assoluti è un serio problema. Infatti lo spostamento dei files comporta spesso il cambiamento della «radice» dei percorsi, ovvero il nome o l indirizzo IP del server provvisorio oppure anche la lettera che identifica l unità disco in cui sono memorizzati i files. E prassi consolidata utilizzare per tutti i riferimenti alle risorse dello stesso sito dei percorsi relativi I percorsi relativi fanno riferimento alla posizione delle risorse in base a quella in cui ci si trova il documento che le collega. Ad esempio la posizione delle immagini di una pagina web è relativa a quella della posizione del file HTML che le deve visualizzare. NB: il percorso relativo più semplice è quello in cui documento e risorsa collegata si trovano nella stessa cartella. In questo caso è sufficiente scrivere il nome del file senza i nomi di alcuna cartella.

33 Percorsi relativi Vediamo ora un esempio in cui dalla pagina «index.html» si voglia far riferimento alla pagina «interna.html», che si trova all interno della cartella «interna», che a sua volta si trova all interno della cartella «prima». Il percorso da indicare sarà seguente: «prima/interna/interna.html» Si noti che il percorso non inizia da una «radice» (« «C:/» o simili) ma dalla prima sottocartella in cui si deve passare per raggiungere il file «interna.html».

34 Percorsi relativi Ora un esempio opposto al precedente: dalla pagina «interna.html» vogliamo far riferimento a una pagina ("index.html") che si trova più in alto di due livelli: In questo caso il percorso sarà il seguente: «../../../index.html» La notazione «../» (doppio punto + slash) è appunto la notazione che indica di risalire di un livello l albero gerarchico delle cartelle. Nell esempio, dovendo risalire due livelli occorre inserire la notazione due volte.

35 Altre note A volte si può trovare un percorso indicato in questo modo: «/css/index.html». Il primo elemento è uno slash invece che il nome di una radice o di una cartella. Si tratta di una notazione che in origine era supportata dai sistemi Unix ma che oggi è supportata anche da quelli Windows: il carattere '/' indica la directory principale del sito, altrimenti detta «root». Si tratta dunque di un modo alternativo di esprimere percorsi assoluti. Altra Un'altra cosa importante da sapere è che quando metterete il vostro sito all'interno dello spazio web, l'indicazione della index all'interno di una directory è facoltativa. Al posto di questo: è sufficiente indicare la directory: Verificate solo con il vostro gestore dello spazio web (cioè "hosting"), se le pagine index della directory devono avere forma index.html, index.htm, index.asp, index.php, home.asp, o altro.

36 Note sulla nominazione dei file Una volta realizzato un sito web, per pubblicarlo occorre caricarlo su un server pubblico. Esistono due famiglie di sistemi operativi orientati a svolgere la funzione server: Windows e Unix. Questi due sistemi operativi utilizzano differenti modi per gestire i file; vediamo alcuni accorgimenti: Maiuscole e minuscole possono fare la differenza. In ambiente Unix (e Linux) la stessa lettera scritta nei due modi viene trattata come due caratteri distinti mentre in ambiente Windows questo non accade. Quindi il file Index.html può convivere con un file index.html SOLO su server Unix/Linux, e sono due file distinti. E consigliabile non lasciare spazi vuoti nei nomi dei file (gli spazi vuoti non sempre vengono interpretati correttamente), meglio ovviare a questa necessità con un "trattino basso" (cioè "_"). Ad esempio: mio_file.html Nota sui collegamenti: Quando si crea un collegamento occorre fare attenzione a non avere una notazione simile a questa: «file:///c cartella/nomefile.html» Succede utilizzando alcuni editor lavorando in locale: significa che si sta facendo riferimento (assoluto) al proprio computer e quindi quando si caricano i file sullo spazio spazio web i collegamenti non funzioneranno più.

37 Elementi HTML di base

38 Attributi deprecati Molti degli attributi che vedremo in questa unità didattica e nelle seguenti sono considerati DEPRECATI, ovvero obsoleti in quanto sostituiti da specifiche più moderne ed efficaci. E però importante conoscerle perché sono comunque supportate dai browser e utilizzate da moltissimi sviluppatori. Dal punto di vista didattico inoltre, lo studio di questi elementi è utili per comprendere evoluzione e potenzialità del linguaggio, soprattutto per quanto riguarda l integrazione con i fogli di stile CSS,

39 Colore di sfondo della pagina Il colore di sfondo di una pagina si applica mediante un attributo del tag body: BGCOLOR. Es. <body bgcolor="blue"> bgcolor sta per "background color", cioè "colore di sfondo". Un set di colori è disponibile utilizzando apposite parole chiave in inglese, ma tutta la gamma RGB è applicabile mediante una codifica esadecimale.

40 Codifica dei colori in HTML Nella storia del web e dei dispositivi informatici, la cosiddetta «profondità colore», ovvero il numero di toni cromatici visualizzabili, dagli schermi digitali è progressivamente passata dai 256 ai 65K per arrivare oggi a 16M di colori possibili grazie all utilizzo di una codifica a 24bit. Poiché, soprattutto in passato, non vi era modo di sapere quale video utilizzasse ogni utente è stata codificata una cosiddetta "palette sicura" che comprende i 256 colori che sicuramente chiunque sarebbe stato in grado di visualizzare correttamente. Si tratta della cosiddetta palette «web safe» che ormai è comunque quasi completamente caduta in disuso. Per indicare un colore si usa la seguente codifica: #RRGGBB Dove i tre gruppi di caratteri possono assumere i valori esadecimali da 00 a FF (ovvero da 0 a 256 in decimale) RR è la componente rossa, GG la componente verde, BB la componente blu.

41 Codifica dei colori in HTML Si noti che con la codifica #RRGGBB si possono ottenere i colori fondamentali rosso, verde e blu ponendo a FF la rispettiva coppia di caratteri: #FF0000, #00FF00, #0000FF. Inoltre si possono ottenere i colori «secondari» giallo, ciano e magenta ponendo a FF due coppie: #FFFF00, #00FFFF, #FF00FF. Infine bianco e nero si ottengono con #FFFFFF e # I toni di grigio si possono ottenere con tutte le combinazioni di tre coppie uguali, da # a #FEFEFE NB. Esiste la possibilità di utilizzare una notazione a tre caratteri che permette di definire 256 colori: es. #A61 che corrisponde a #AA6611

42 Codifica dei colori in HTML Per 140 colori sono stati inoltre attribuiti dei nomi specifici. Ne riportiamo alcuni a titolo esemplificativo: Nome colore HEX Colore AliceBlue #F0F8FF AntiqueWhite #FAEBD7 Aqua #00FFFF Aquamarine #7FFFD4 Azure #F0FFFF Beige #F5F5DC Bisque #FFE4C4 Black # BlanchedAlmond #FFEBCD Blue #0000FF BlueViolet #8A2BE2 Brown #A52A2A BurlyWood #DEB887 CadetBlue #5F9EA0 Chartreuse #7FFF00 Chocolate #D2691E I nomi colore possono essere utilizzati liberamente al posto del codice colore.

43 Usare immagini come sfondo Per inserire un immagine come sfondo è sufficiente utilizzare la seguente sintassi: <body background="imgsfondo.gif"> Per ora presupponiamo che l immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, quindi inseriamo il nome del file immagine senza percorso. NB: L immagine di sfondo verrà ripetuta in orizzontale e in verticale. (Tramite i CSS si può tuttavia personalizzare la modalità di ripetizione in orizzontale e in verticale). È anche possibile combinare l attributo background con quello bgcolor, in modo che mentre l immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina: <body bgcolor="#0000ff" background="imgsfondo.gif"> È utile assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#ffffff"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l utente ha impostato nella finestra del sistema operativo: quindi se l utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera. Dal punto di vista estetico, l utilizzo di immagini come sfondo va ponderata accuratamente per evitare di creare pagine eccessivamente cariche, poco gradevoli e di rendere difficile la lettura dei contenuti testuali.

44 Un esempio introduttivo sui CSS. Gli stili per il BODY Tutti gli attributi del body che abbiamo visto finora (da eccezione dell attributo "lang") sono caratteristiche che riguardano il layout della nostra pagina HTML. Come si può vedere, con una sintassi di questo genere: <body leftmargin="0" topmargin="0" background="sfondo1.gif" bgcolor="#66ccff" lang="it"> </body> il layout e il contenuto sono mischiati tra loro. Gli attributi "background" e "bgcolor" sono, come si diceva, deprecati nelle specifiche del W3C. In un approccio di impaginazione che utilizzi i fogli di stile, l aspetto che riguarda la visualizzazione deve essere separato dal contenuto. Il nostro body deve quindi essere ripulito degli attributi di stile per diventare: <body lang="it"> mentre le regole che indicano come visualizzare lo sfondo vanno inserite altrove nel documento.

45 Un esempio introduttivo sui CSS. Gli stili per il BODY Le regole di utilizzo dei fogli di stile (i CSS) verranno trattate nelle prossime lezioni, ma vediamo una breve anticipazione: I fogli di Stile sono estremamente potenti e offorno una grande versatilità sia nella formattazione dei contenuti sia nella loro disposizione nella pagina. Con riferimento alla slide precedente, osserviamo che per applicare l immagine di sfondo sia possibile utilizzare la seguente sintassi: <body lang="it" style="background-image: url(sfondo.gif)"> si noti l utilizzo dell attributo STYLE che contiene la regola per l applicazione dello sfondo. Nell attributo STYLE possono essere inserite più regole separate da un punto e virgola. Ad esempio vediamo come è possibile impedire la ripetizione dell immagine: <body lang="it" style="background-image:url(sfondo.gif); background-repeat:no-repeat"> oppure mantenere «fissa» l immagine di sfondo anziché permettere che scorra con lo scroll della pagina: <body lang="it" style="background-image:url(sfondo.gif); background-attachment:fixed">

46 Colore di base per il testo Se non si imposta nessun colore per il testo, esso viene di default reso in nero. Abbiamo però la possibilità di assegnare un colore per il testo di tutta la pagina, semplicemente utilizzando l attributo TEXT del tag body: <body text="blue"> Tuttavia il nero non sempre è leggibile con tutti i colori di sfondo. Tipicamente i siti sono classificati in due tipologie: testo chiaro su fondo scuro oppure testo scuro si fondo chiaro. Se ad esempio vogliamo utilizzare uno sfondo blu è necessario utilizzare un colore chiaro per il testo, altrimenti si corre il rischio di rendere illeggibile il contenuto. Questo esempio: <body bgcolor="#0000ff" text="#ffffff"> produce una pagina con fondo blu e testo bianco.

47 Colore di base per i link I link sono i collegamenti ipertestuali e per questo sono elementi «sensibili» alle operazioni dell utente. Assumono quindi diversi «stati», per ognuno dei quali è possibile stabilire alcune proprietà, in primis il colore: stato attributo HTML 4.1 descrizione normale Link Normalmente il link quando si trova «a riposo» deve essere evidenziato in modo tale che sia facile per l utente individuarlo. Nell HTML standard il link è sempre sottolineato (è possibile eliminare la sottolineatura soltanto usando i CSS) e di colore blu (#0000FF). visitato visited Un link è visitato, quando l URL della pagina compare nella cronologia dell utente. Di default i link visitati sono di color violetto (#800080). attivo active Il collegamento è attivo nel momento in cui il link è stato cliccato e sta avvenendo il passaggio da una pagina all altra. Non si tratta di una caratteristica particolarmente utile oggi, ma quando i modem avevano una velocità molto inferiore a quella odierna, vedere un link "attivo" era comunque un indicazione sul fatto che qualcosa stava avvenendo. Un ulteriore condizione in cui un link si rileva "attivo" è quando si utilizza il tasto destro del mouse su di lui. Potremmo dire che un link è attivo quando «ha il focus». mouse over (solo CSS: hover) Con l HTML 4.01 al passaggio del mouse sul link si può fare ben poco, coi fogli di stile invece è possibile creare qualche effetto di visualizzazione. La sintassi HTML 4.1 è dunque: <body link="red" alink="yellow" vlink="green">

48 Titoli Nulla ci vieta di scrivere direttamente all interno del tag body, come già abbiamo visto negli esempi precedenti, senza utilizzare nessun altro tag. E tuttavia più corretto e versatile racchiudere il testo in appositi tag a seconda della funzione che il testo deve svolgere. La pagina risulterà così più semplice da leggere, da modificare e formattare. Il primo gruppo di tag orientato a delimitare i testi è quello dei titoli. <h1>titolo 1</h1> Titolo di primo livello <h2>titolo 2</h2> Titolo di secondo livello <h3>titolo 3</h3> Titolo di terzo livello <h4>titolo 4</h4> Titolo di quarto livello <h5>titolo 5</h5> Titolo di quinto livello <h6>titolo 6</h6> Titolo di sesto livello "H" sta per "heading", cioè titolo: le grandezze previste sono sei. Dall <h1>, che è il più importante, si va via via degradando fino all <h6> e il testo è formattato in grassetto. L heading occupa tutta la larghezza dell elemento in cui è contenuto e lascia una riga vuota prima e dopo di sé in quanto è uno degli elementi «di blocco».

49 Paragrafi Il secondo tag finalizzato a delimitare i testi è quello del paragrafo. Il paragrafo è l unità di base entro cui suddividere un testo. La sintassi è la seguente: <p>...</p> Anche il paragrafo occupa tutta la larghezza dell elemento in cui è contenuto. (ad esempio, se il paragrafo è contenuto nel body occuperà tutta la larghezza della pagina). Il paragrafo ha l attributo ALIGN che serve per definire l allineamento nel testo: <p align= center >...</p> L attributo ALIGN può assumere 4 valori: «left», «right», «center», «justify». Anche il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura essendo elemento «di blocco».

50 Blocchi di testo DIV Il terzo tag utilizzato per delimitare i testi è il blocco di testo, ovvero il DIV. Il DIV va a capo ma, a differenza del paragrafo, non lascia spazi prima e dopo la sua apertura. E sempre un elemento «di blocco». La sintassi è la seguente: <div>...</div> Elemento «di blocco» per eccellenza, il DIV è ampiamente utilizzato per creare il layout della pagina soprattutto utilizzando i fogli di stile. In HTML 4.01 possiede anch esso l attributo ALIGN come il paragrafo: <div align= center >...</div>

51 Contenitori Il quarto e ultimo tag utilizzato per delimitare i testi è il contenitore SPAN. La sintassi è la seguente: <span>...</span> Lo SPAN è un contenitore generico che può essere annidato in altri elementi come i paragrafi o i titoli. SPAN è l elemento «inline» per eccellenza. «Inline» è il contrario di «di blocco», ovvero indica un tag che non manda a capo il testo ma lo fa continuare sulla stessa linea. Si usa in modo particolare per formattare piccole porzioni di testo all interno dei blocchi più generali. L utilizzo di SPAN con i fogli di stile offre la maggiore versatilità.

52 Disposizione del testo Le differenze tra <P>, <DIV> e <SPAN> sono dunque le seguenti: P lascia spazio prima e dopo la propria chiusura DIV non lascia spazio prima e dopo la propria chiusura ma, essendo un elemento di blocco, va a capo SPAN, essendo un elemento inline, non va a capo Per quel che riguarda gli heading (<h1>,, </h6>) occorre ricordare che la grandezza del carattere è sempre relativa, ovvero varia a seconda delle impostazioni che l utente ha sul proprio browser. Tutti questi «tag-contenitori» permettono di allineare il testo utilizzando l attributo ALIGN, tuttavia va ricordato che tale attributo è disapprovato dal W3C, dal momento che per allineare il testo bisognerebbe invece utilizzare i fogli di stile. E stato definitivamente eliminato con l HTML 5 ma è comunque ancora supportato da tutti i browser e ampiamente utilizzato.

53 Disposizione del testo Per andare a capo molti webmaster utilizzano l apertura arbitraria di paragrafi che non contengono nulla e che vengono lasciati aperti: <p> <p> <p> Si tratta in buona sostanza di un errore, visto che per andare a capo esiste un apposito tag, il BR: <br /> BR sta per «break», cioè «interruzione». Per andare a capo è quindi sufficiente scrivere un BR. Per saltare una riga ne occorrono due: <br /><br /> BR è un tag vuoto e quindi non ha l elemento di chiusura. Come per gli altri tag vuoti, in osservanza all XHTML va scritto con uno spazio e uno slash prima della seconda parentesi.

54 Disposizione del testo Un ulteriore tag per dividere la pagina in parti è HR («horizontal rule») che serve per tracciare una linea orizzontale. Si tratta di un altro tag vuoto; la sintassi è la seguente: <hr /> e produce un effetto simile al seguente: Questo tag ha anche alcuni attributi (sempre deprecati, perché la formattazione andrebbe fatta con i CSS): L attributo NOSHADE evita di sfumare la linea, SIZE indica l altezza in pixel, WIDTH è la larghezza in pixel o in percentuale, ALIGN l allineamento. <hr noshade size="5" width="50%" align="center" /> Il risultato è simile al seguente: HR è ormai quasi inutilizzato, sia per l effetto grafico non propriamente gradevole, sia per la più ampia versatilità che si può ottenere da un lato con i fogli di stile, dall altro con le grafiche raster (GIF, PNG ecc).

55 Tag per le formattazioni fondamentali

56 Stili fisici e stili logici Tipograficamente attribuire lo stile ad un testo un testo significa definire la variante del carattere (tondo, corsivo, grassetto ecc). Nell HTML invece possiamo parlare di due tipologie di stili, LOGICI e FISICI: STILI FISICI Definiscono graficamente lo stile del carattere, indipendentemente dalla funzione del contenuto del tag STILI LOGICI Forniscono informazioni sul ruolo svolto dal contenuto del tag e in base a questo adottano uno stile grafico.

57 Grassetto TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA <b> </b> Questo <b>testo</b> è in grassetto Questo testo è in grassetto Grassetto Fisico Lo stile "grassetto" dovrebbe essere ottenuto con i fogli di stile (così come tutte le formattazioni), ma evidentemente la possibilità di ottenere un testo in grassetto semplicemente scrivendo "<b>testo</b>". E di fatto ancora talmente comoda da non essere ancora caduta in disuso. Corsivo TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA <i> </i> Questo <i>testo</i> è in corsivo Questo testo è in corsivo Corsivo Fisico Attenzione a non abusare del corsivo perché la leggibilità del corsivo nei browser è generalmente inferiore rispetto al carattere normale.

58 Sottolineato TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA <u> </u> Questo <i>testo</i> è sottolineato Questo testo è sottolineato Sottolineato Nel web le sottolineature del testo sono da evitare, per non confondere il lettore con i link. Un testo sottolineato indica infatti la presenza di un collegamento ipertestuale. Fisico/Logico Barrato TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA <strike> </strike> Questa <strike>parola</strike> è sbagliata Questa parola è sbagliata Barrato Fisico Utilizzato, ad esempio, per l inserimento di «Correzioni» in un testo.

59 Preformattato Molti tag tradiscono l origine scientifica e informatica del Web (sono presenti tag per blocchi di codice di programmazione, per definizioni, per l indicazione delle variabili ecc). E il caso di PRE, utile per riportare frammenti di codice di programmazione nel testo della pagina, e gli APICI/PEDICI. TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA <pre> </pre> Codice PHP :<pre>php_function {zval **parameters; zval *value; char* str;</pre> Codice PHP: PHP_FUNCTION { zval **parameters ; zval *value; char* str; Preformattato Fisico Apice / Pedice TAG SINTASSI VISUALIZZAZIONE DESCRIZIONE TIPOLOGIA  E=mc² E=mc 2 Apice Fisico  Acqua=H₂O Acqua=H 2 O Pedice Fisico

60 Font del testo Il tipo di carattere (cioè il "font") che il browser visualizza di default è il «Times», ottimo per la carta stampata poiché dotato di "grazie" (abbellimenti tipografici delle lettere, che aiutano per la leggibilità), non altrettanto leggibile sullo schermo (anzi, si ottiene l effetto contrario). Si preferisce utilizzare dei caratteri senza grazie, ad esempio: TIMES Times VERDANA Verdana ARIAL Arial HELVETICA Helvetica Dimensioni, colore, tipo di carattere si possono assegnare con il tag FONT <font> </font> ATTENZIONE: il tag <FONT> è disapprovato dal W3C. La formattazione del testo in tutti i siti moderni viene effettuata per mezzo dei fogli di stile CSS.

61 Font del testo Il primo attributo di FONT serve per attribuire il tipo di carattere, ed è FACE: TAG SINTASSI VISUALIZZAZIONE <font face="font type" > </font> <font face="arial">testo in Arial</font> <font face=«times">testo in Times</font> <font face="comic">testo in Comic</font> Testo in Arial Testo in Times Testo in Comic ATTENZIONE: In HTML non è possibile utilizzare dei font speciali, ovvero font che non siano quelli presenti nel sistema operativo degli utenti. Ci sono tuttavia molti font che sono presenti di default su tutti i sistemi più diffusi. (NB con i fogli di stile è possibile invece applicare anche font diversi da quelli installati sul client) Per questo motivo è bene tener conto di due accorgimenti: scegliere font «sicuri», che siano cioè senz altro presenti sul pc dell utente; non indicare un solo font, ma una serie di font che gradualmente si allontanano dal risultato che vorremmo ottenere, ma non di molto, fino ad indicare la famiglia a cui il nostra carattere appartiene. Indicando la famiglia il browser dell utente cercherà di trovare nella propria cartella dei fonts il primo carattere indicato, se non lo trova passerà al secondo, e solo come ultima scelta sceglierà di utilizzare il carattere predefinito.

62 Colore del testo Il secondo attributo di FONT serve per attribuire il colore al carattere, ed è ovviamente COLOR: TAG SINTASSI VISUALIZZAZIONE <font color="blue" > </font> <font color="blue">testo in blu</font> <font color="#ff0000">testo in rosso</font> Testo in blu Testo in rosso Nell indicazione del colore è possibile utilizzare sia i codici mnemonici sia quelli esadecimali.

63 Dimensione del testo Il terzo attributo di FONT serve infine per attribuire la dimensione del carattere, ed è SIZE. In HTML si distinguono due fondamentali modalità di attribuzione della dimensione: Valori assoluti (con numeri interi da 1 a 7) Valori relativi (relativi alla dimensione che il testo assume nella sua specifica posizione) TAG SINTASSI VISUALIZZAZIONE <font size="2">testo dim.2</font> <font size="5">testo dim.5</font> Testo dim.2 Testo dim.5 <font size="5" > </font> <font size="7">testo dim.7</font> Testo dim.7 <font size="-1">testo meno 1</font> Testo meno 1 <font size="+2">testo più 2</font> Testo più 2 <font size="+4">testo più 4</font> Testo più 4 NB: i valori relativi agiscono sulla dimensione assunta dal testo nella specifica posizione. Es se applico un +2 all interno di un tag che ha dimensione 5 ottengo una dimensione di 7, non di 5.

64 Elenchi, link, immagini e tabelle

65 Gli elenchi dell HTML Se abbiamo la necessità di inserire un elenco di termini, possiamo utilizzare le «liste», che sono sostanzialmente di due tipi: Elenchi ordinati Elenchi non ordinati Entrambi i tipi funzionano nel medesimo modo: si apre il tag, si elencano i vari elementi della lista (ciascuno con il proprio tag), si chiude il tag dell elenco. La sintassi ha quindi questa forma: <elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento </elenco> come si può vedere, il tag che individua l elemento della lista non ha bisogno di chiusura (la sua chiusura, in questo caso, è opzionale). Le liste di definizioni hanno una struttura leggermente diversa che vedremo a breve.

66 Elenchi ordinati Detti anche «elenchi numerati», gli elenchi ordinati sono contraddistinti dall enumerazione degli elementi che compongono la lista. Avremo quindi una serie progressiva ordinata e individuata da lettere o numeri. Ecco un esempio di codice Il tag da utilizzare per aprire un elenco ordinato è <ol> («ordered list») e gli elementi sono individuati dal tag <li> («list item»). contenuto che precede la lista <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol> cesto che segue la lista 1. primo elemento 2. secondo elemento 3. terzo elemento

67 Elenchi ordinati - tipi di numerazione Da notare che il tag che individua l elenco lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (come avviene per il <p>); fa eccezione però l inclusione di un elenco all interno di un elenco preesistente: in questo caso non viene lasciato spazio, né prima, né dopo. Gli elementi dell elenco sono sempre rientranti di uno spazio verso destra come accade utilizzando i programmi di videoscrittura. Lo stile di enumerazione visualizzata di default dal browser è quello numerica. E però possibile indicare uno stile differente specificandolo per mezzo dell attributo type. Ad esempio: <ol type="a"> <li>primo elemento <li>secondo elemento <li>terzo elemento </ol>

68 Elenchi non ordinati Anche detti «elenchi puntati», gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list") Gli elementi dell elenco sono contraddistinti anch essi dal tag <li> <ul> <li>primo elemento <li>secondo elemento <li>terzo elemento </ul> il tipo di segno grafico utilizzato per individuare gli elementi dell elenco di default dipende dal browser, ma di solito è un «pallino pieno». Anche per questo simbolo sono possibili alcune varianti sempre utilizzando l attributo TYPE del tag <ul>. NB: anche l attributo type è deprecato dal W3C, perché si tratta di una caratteristica che riguarda la formattazione, e dunque andrebbe effettuata utilizzando i CSS. Con i fogli di stile c è infatti anche la possibilità di scegliere un immagine (ad esempio una GIF) come segno distintivo per l elenco puntato.

69 Elenchi nidificati Nel caso di annidamento delle liste, indentazione e simboli vengono adeguati automaticamente: <ul> <li>primo della 1a lista</li> <li>secondo della 1a lista</li> <ul> <li>primo della 2a lista</li> <li>secondo della 2 lista</li> <ul> </ul> </ul> <li>primo della 3a lista</li> <li>terzo della 1a lista</li> </ul>

70 Link e ipertestualità Una delle caratteristiche su cui si basa il web è il fatto di essere costituito non da testi ma da ipertesti. I collegamenti ipertestuali o link sono il «ponte» che consente di passare da un testo ad un altro I link sono formati da due componenti: Il contenuto «attivo», ovvero quella parte della pagina che può essere «cliccata» per spostarsi ad un altra pagina (tipicamente un testo o un immagine). Essendo la parte fondamentale dell interazione, l utente deve essere sempre in grado di distinguerlo dal resto del contenuto della pagina. La risorsa verso cui il collegamento punta. Può essere o un altra pagina (sullo stesso sito o su un sito diverso), oppure un collegamento «interno» a un punto della pagina in cui si trova.

71 Link «esterni» La sintassi per creare un link con riferimento a una pagina web diversa da quella di partenza è il seguente: <a href=" Iuav di Venezia</a> Il nome del tag <a> deriva da «anchor», ovvero àncora, l elemento che tiene collegati origine e destinazione del flusso di navigazione. Il rendering dell esempio sarà il seguente: Università Iuav di Venezia Facendo «click» sopra la scritta, l utente visualizzerà la home page dell Università Iuav raggiungibile dell indirizzo inserito nell attributo HREF del tag <a>. Per ciò che riguarda la sintassi, il tipo di documento di destinazione è indifferente. Sia che si tratti di una pagina HTML di un sito, un immagine, un file.pdf, un file.zip, o un file.exe la sintassi è la stessa; sarà il browser a comportarsi in modo diverso a seconda del tipo di risorsa. Tipicamente: Le immagini.gif,.jpg,.png vengono direttamente visualizzate nel browser I documenti.html vengono direttamente visualizzate nel browser Alcuni documenti come i.pdf o i.doc possono venire visualizzati dal browser tramite un «plugin» oppure scaricati come download con relativa richiesta della posizione in cui salvare il file. I file.zip, file.exe e molti altri vengono scaricati con la funzione di download.

72 Protocolli nell HREF La navigazione tra le pagine web e i download avvengono secondo un protocollo definito HTTP (Hypertext Transfer Protocol). Esistono altri protocolli associati ad altre funzioni come ad esempio l FTP definito per trasferire files tra cartelle locali e remote. Un protocollo specifico è denominato MAILTO. Serve ad attivare un programma di posta elettronica. Questo protocollo è utilizzabile nei link con la seguente modalità: <a href="mailto:pippo@gmail.com">invia una a Pippo</a> Il click sul collegamento aprirà il programma di posta elettronica predefinito dell utente.

73 Link «interni» È possibile anche creare un indice interno al documento, utilizzando link «interni». Per creare un link interno si utilizza l attributo NAME anziché HREF. NAME definisce il nome del punto da contrassegnare all interno di una pagina. Si noti che questa tecnica ha un senso in pagine relativamente lunghe che comportano un abbondante scroll. <a name="primo">lorem ipsum factum. eccetera </a> La mancanza dell attributo HREF rende questi contrassegni «invisibili» all utente. Tuttavia essi servono come riferimento per lo «scroll» della pagina che avviene cliccando un secondo elemento così definito: <a href="#primo">vai al primo paragrafo</a> Il cancelletto indica che il collegamento deve cercare un contrassegno chiamato «primo» all interno della pagina stessa. NB: se non si specifica il nome del contrassegno a cui si vuol puntare, viene comunque creato un link che punta ad inizio pagina. Per creare un indice interno alla pagina si procede dunque in due fasi distinte: 1. creazione del contrassegno a cui puntare (attributo NAME) 2. creazione del link con relativo riferimento interno (attributo HREF con cancelletto) NB: è fondamentale non confondere le due fasi.

74 Attributi dei link Abbiamo due importanti attributi del tag <a>: Il primo è TARGET. LA seguente sintassi: <a href=" target ="_blank" >Università Iuav di Venezia</a> Apre la nuova pagina in una nuova finestra del browser anziché sostituire quella di origine. E consuetudine aprire i link su _blank quando si puntano pagine di altri siti mentre lasciare il default per le pagine interne. Altri valori per TARGET sono «_parent», «_self» e «_top» ma hanno significato nell impiego dei frames, cosa che è deprecata. Un secondo attributo è TITLE (da non confondere con il tag presente in intestazione): <a href=" title="università IUAV" >Università Iuav di Venezia</a> TITLE attiva il cosiddetto «tooltip» per il link, ovvero l etichetta che compare passando col mouse sopra il link senza cliccarlo. L utilizzo di etichette con questo attributo è una pratica fortemente consigliata per migliorare l usabilità delle pagine web.

75 Immagini i formati consentiti Le immagini ovviamente possono essere inserite non solo come sfondo di una pagina web, ma anche come contenuto. I formati ammessi nel Web sono sostanzialmente tre: GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone. Supporta la trasparenza anche se non con le sfumature possibili col il PNG. JPG (Joint Photographic experts Group) supporta i 16M di colori, è l acronimo del gruppo di ricerca che ha ideato questo formato, idoneo per le immagini di qualità fotografica. Non supporta le trasparenze. Permette livelli di compressione regolabili in funzione della qualità richiesta. PNG (Portable Network Graphic) un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); anch esso supporta i 16M di colori ed è ormai letto da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno in primis il supporto al canale alfa che lo rende adatto a creare trasparenze molto morbide. Il livello di compressione è in genere intermedio tra GIF e JPG. NB: qualsiasi altro formato non è supportato (psd, tiff, ecc) e impedisce la visualizzazione dell immagine nella pagina oppure attiva la funzione di download del file.

76 Il tag IMG e le immagini Il tag per inserire una immagine è <img>; la sintassi è la seguente: <img src=" /> L attributo essenziale è SRC, che significa «source», ovvero origine; tramite SRC si specifica l indirizzo web da cui recuperare l immagine da visualizzare. Per il riferimento al file immagine valgono tutte le regole già trattate riguardo ai percorsi e i nomi dei file. Le immagini sono il primo elemento «esterno» alla pagina che trattiamo. Occorre comprendere come l accesso ai contenuti di un sito sia per lo più un processo ASINCRONO, ovvero regolato da flussi di informazioni che hanno tempi correlati ma non sincronizzati. Un esempio può chiarire meglio il concetto: Immaginiamo una pagina web con due immagini al suo interno. Il browser per prima cosa scaricherà il file HTML e lo interpreterà. Dalla lettura del codice capirà che deve scaricare altri 2 files (per esempio due JPG), inizierà il download, ma nel frattempo inizierà il rendering del testo. Il rendering completo (e l eventuale riassetto del layout) avverrà nel momento in cui entrambi i JPG saranno nella cache. NB: normalmente le immagini e i multimedia sono gli elementi «pesanti» di una pagina; se le immagini sono delle grafiche necessarie al layout occorre fare attenzione a renderle il più «leggere» possibile per velocizzare l impaginazione ed evitare fastidiosi effetti di riassetto/riallineamento delle varie parti della pagina.

77 Posizione del tag IMG e attributi principali L immagine NON è un elemento di blocco. Si allinea con il testo nel punto in cui viene inserito il tag e aumenta l interlinea in base alla sua altezza in pixel. Gli attributi principali del tag IMG sono i seguenti: WIDTH / HEIGHT Larghezza e altezza (in pixel). Non sono obbligatori ma è opportuno utilizzarli in modo che il browser disponga fin dall inizio lo spazio sulla pagina evitando un riassetto durante il caricamento. ALT E una didascalia «non-scritta» dell immagine; viene letta dai software per ipovedenti e, in alcuni browser attiva un tooltip. TITLE E l attributo specifico per il tooltip, supportato da tutti i browser. BORDER E lo spessore del bordo in pixel. Se lo spessore è impostato a 0 non viene applicato alcun bordo all immagine, mentre se viene omesso il bordo è di 1 pixel e, nel caso l immagine sia in un tag <a> assume gli stili dei link. Ecco un esempio che li utilizza tutti: <img src="logo.gif" title="logo aziendale" alt="logo aziendale" width="90" height="10" border ="1">

78 Immagini con collegamento ipertestuale Per rendere un immagine un collegamento ipertestuale è sufficiente nidificarla all interno di un tag <a>: <a href=" <img src="immagine.gif" border="0" /> </a> Si noti l attributo BORDER a zero per evitare un antiestetico bordo attorno all immagine. Oppure anche: <a href=" Università Iuav di Venezia <br /> <img src="immagine.gif" border="0" /> </a> Dove abbiamo un link composito formato da testo (codice in rosso) e immagine a seguire (codice in blu), entrambi parte del collegamento ipertestuale.

79 Allineamento delle immagini Un attributo essenziale del tag IMG è ALIGN. ALIGN consente l allineamento dell immagine rispetto al flusso del testo. Di seguito sintassi e valori ammessi: <img src="immagine.gif" align="left" /> bottom (default) middle top left right

80 Spazi attorno alle immagini Altri due pratici attributi del tag IMG sono HSPACE e VSPACE che governano gli spazi tra immagine e testo attorno ad essa nelle due direzioni. <img src="immagine.gif" hspace="20" vspace ="20" /> VSPACE HSPACE HSPACE VSPACE

81 Le tabelle in HTML Le tabelle HTML hanno avuto in passato un importanza fin troppo elevata nella realizzazione dei siti web visto che sono state largamente impiegate per realizzare i layout delle pagine oltre che per organizzare i contenuti per righe e colonne. Oggi l impaginazione mediante tabelle è fortemente sconsigliato e disapprovato dal W3C che, prima con i fogli di stile, poi con le novità dell HTML 5, ha definito modalità più efficaci e versatili per suddividere le pagine nelle diverse sezioni di contenuto. I tag necessari per realizzare tabelle sono i seguenti: <table> apre la tabella <tr> «table row»: indica l apertura di una riga <td> «table data»: indica una cella all interno di una riga (ovviamente i tre tag vanno chiusi con </table>, </tr> e </td>) La prima cosa che si nota è la mancanza di un tag per le colonne. Infatti, la natura sequenziale del codice HTML fa si che la tabella venga definita come serie di righe con n celle e che le colonne vengano a generarsi in funzione di queste. Una delle proprietà più interessanti delle tabelle HTML è quella di auto-adattarsi sia al contenuto sia al contenitore facilitando un utilizzo razionale dello spazio.

82 Le tabelle in HTML Ecco un esempio di sintassi per una tabella e relativo rendering: <table border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> Nell esempio vediamo già il primo attributo di <table> ovvero BORDER, con cui è possibile specificare lo spessore dei bordi in pixel. La resa grafica di default è generalmente poco gradevole ma è possibile migliorarla sensibilmente con i fogli di stile.

83 Dimensionamento delle celle di una tabella Gli attributi WIDTH e HEIGHT consentono di specificare larghezza e altezza in pixel e possono essere utilizzati sia per <table>, sia per <tr> e <td>. Oltre alle misure in pixel è possibile utilizzare dimensioni in percentuale con l apposito carattere (es: 50%), nel qual caso le dimensioni si adattano in funzione del contenitore in cui è inserita la tabella. <table width="300" border="1"> <tr> <td>prima cella</td> <td>seconda cella</td> </tr> <tr> <td>terza cella</td> <td>quarta cella</td> </tr> </table> <table width="75%" border="1"> <tr> <td width="25%">prima cella</td> <td width="75%">seconda cella</td> </tr> <tr> <td width="25%">terza cella</td> <td width="75%">quarta cella</td> </tr> </table>

84 Raggruppamento di celle in una tabella Esistono due attributi per unire tra loro le celle di una tabella: si tratta di COLSPAN e ROWSPAN. Si applicano entrambi solo al tag <td>. Il primo permette di specificare quante colonne occupa la cella, il secondo quante righe. L utilizzo di questi attributi è tutt altro che intuitivo per cui molto spesso ci si avvale di editor grafici. La sintassi negli esempi che seguono: <table border="1"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="2" align="center"> cella unita </td> </tr> </table> cella unita <table border="1"> <tr> <td> </td> <td rowspan="2" align="center"> cella unita </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> cella unita NB: le celle vuote, ovvero senza alcun carattere di contenuto vengono renderizzate senza bordo per cui è consuetudine inserire uno spazio con la sequenza

85 Attributi del tag TABLE Per quel che riguarda il tag <table>, vediamo i principali attributi, quelli che ci permettono di regolare le distanze tra i margini della tabella (o della cella) e il suo contenuto: border (vedi sopra) specifica la larghezza dei bordi di una tabella (in pixel) cellspacing specifica la distanza (in pixel) tra una cella e l altra, oppure tra una cella e il bordo. Di default è un pixel, dunque occorrerà sempre azzerarlo esplicitamente, quando non lo si desideri cellpadding indica la distanza tra il contenuto della cella e il bordo. Se il valore viene indicato con un numero intero, la distanza è espressa in pixel; il cellpadding tuttavia può anche essere espresso in percentuale. Di default la distanza è nulla.

86 Attributi validi per TABLE e per le celle Oltre a WIDTH e HEIGHT di cui abbiamo già trattato, altri tre attributi importanti applicabili sia alla tabella sia alle celle sono BGCOLOR, BACKGROUND e ALIGN. I primi due attributi hanno comportamento analogo a quanto visto per il tag body permettendo infatti di applicare un colore o una immagine allo sfondo della tabella o della singola cella. <table width="300" border="1" align="center" bgcolor="#00ff00"> <tr> <td width="50%" background="sfondo.gif"> <font color="#ffffff">prova</font> </td> <td width="50%"> </td> prova </tr> </table> Per quanto riguarda l attributo ALIGN va specificato che il comportamento sulla tabella è diverso da quello sulle celle. Nel caso della tabella, l allineamento riguarda la posizione della tabella rispetto alla pagina; nel caso delle celle riguarda invece la posizione del contenuto rispetto alla cella.

87 I moduli HTML

88 Interazione e uso dei moduli Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire in modo bidirezionale, ovvero di inviare informazioni e non solo di scaricarle. Per realizzare questo tipo di servizi sono necessari strumenti co cui l utente può inserire i dati da inviare ad un sistema di gestione; per farlo si utilizzano i moduli, detti anche FORM. Invio dati ACTION Pagina di programmazione lato server (cgi, asp, php, js etc.. NAME

89 Tag FORM e attributi NAME e ACTION Il tag da utilizzare per creare un modulo è <form>. Il tag form è un elemento di blocco perciò lascia uno spazio prima dell apertura e dopo la chiusura. I due principali attributi del tag <form> sono NAME, che contraddistingue il «pacchetto dei dati inviato» e ACTION, che altro non è se non la URL di una pagina sul server che si occupa di elaborare i dati inviati. Ecco la sintassi di utilizzo di FORM: <form name="datiutenti" action="paginarisposta.php"> campi da compilare </form> NAME Indica il nome del form ACTION URL della pagina

90 I due metodi di invio dei dati e l attributo METHOD Una volta creato il form dobbiamo scegliere tra i due metodi di invio: GET e POST utilizzando l apposito attributo METHOD. Metodo GET: la pagina di risposta viene contattata e contemporaneamente le vengono inviati i dati tramite la «query string» che èuna parte della URL. Metodo POST: l'invio dei dati avviene in uno step successivo a quello della chiamata della pagina. Le due fasi sono: 1. viene contattata la pagina sul server che deve processare i dati, 2. vengono inviati i dati stessi Differenze rispetto a GET: a) i dati inviati non compaiono nella URL; è quindi preferibile se non si desidera che l utente li veda; b) la quantità di dati inviabili è superiore ed è possibile inviare immagini o altri files. In questo esempio si utilizza il metodo GET: <form name="datiutenti" action="paginarisposta.php" method="get">.</form>

91 I campi dei moduli Esistono dei tag che identificano i «campi» utili alla compilazione del modulo. Essi variano in funzione del tipo di ausilio che si vuole dare all utente (ad esempio, le caselle combinate permettono la scelta tra una lista di voci precompilata). La gran parte dei tipi di campo si realizza con l impiego del <input>. Si tratta di un tag vuoto, dotato di attributo TYPE che consente di specificare le varianti (es. testo, pulsante, lista ecc). Vediamo un primo esempio, la casella di testo semplice: <input type="text" name="nome" value="inserisci il tuo nome"> In questo esempio vediamo due degli attributi più diffusi, NAME e VALUE. L attributo VALUE è valido per la maggior parte degli elementi di un form: definisce il contenuto del campo. Anche l attributo NAME è valido per la maggior parte degli elementi: esso definisce l etichetta associata al campo, appunto, il suo nome.

92 I pulsanti Altri esempi: 3 tipi di pulsante: Il tipo «button» è un pulsante generico che si utilizza per lo più con javascript. <input type="button" value="invia i dati"> Il pulsante «submit» invece ha lo stesso aspetto ma è il pulsante più importante del form; salvo poche eccezioni, deve essere sempre presente in quanto è il controllo con cui l utente effettua l invio dei dati alla pagina indicata in ACTION: <input type="submit" value="vai al portale IUAV"> Un terzo tipo di pulsante è il «reset» che riporta tutti gli elementi del form allo stato iniziale: <input type="reset" value="cancella testo"> L attributo VALUE in questo caso è il testo che compare sul pulsante stesso. Non è un dato che si invia.

93 I pulsanti Il comportamento di «submit» e «reset»: <form action=" <input type="submit" value="vai al portale IUAV"> </form> CLICK <form action="..."> <input type="text" value="scrivi un testo"> <input type="reset" value="cancella testo"> </form> CLICK TESTO

94 Il pulsante grafico Il tipo «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. <input name="invia" type="image" src="invia.gif" alt="invia dati" title="invia dati" width="78" height="38"> OK L immagine «invia.gif» assume il comportamento di un «submit». Gli attributi del campo immagine sono molto simili a quelli del tag <img>. Il pulsante grafico ha il grande vantaggio di rendere illimitata la gamma di possibilità nella realizzazione di pulsanti di invio ma ha uno svantaggio in termini di usabilità: a schermo non dà l effetto di «pressione» di un tasto, tipico dei pulsanti classici.

95 Varianti del campo di testo Per i campi di testo esistono due principali varianti : Text e Textarea. Per l INPUT TEXT, visto all inizio, sono previsti i seguenti attributi: MAXLENGTH indica il numero massimo di caratteri che l'utente può inserire, SIZE indica le dimensioni del campo di testo (in numero di caratteri NON in pixel). <input name="miotesto" type="text" value="prova" size="40" maxlength="200" /> La TEXTAREA è invece un campo adatto all inserimento di testi di una certa lunghezza e con più di una riga. Non è un tipo di <input> bensì un tag preciso: <textarea> <textarea name="testo" rows="5" cols="40"> qui puoi scrivere il tuo testo </textarea> Con gli attributi ROWS e COLS si aatribuiscono le dimensioni in righe e colonne in unità carattere (non in pixel) TEXTAREA non è un tag vuoto e non è prevista una lunghezza massima.

96 Ancora un campo di testo: «password» L INPUT type PASSWORD è identico al type TEXT con la sola eccezione di visualizzare asterischi o pallini (dipende dal browser) al posto dei caratteri: <input type="password" maxlength="16" size="40" name= password" />

97 Scelta di opzioni Per la scelta di opzioni abbiamo tre tipi di strumenti: 1. La scelta ad opzioni multiple (CHECKBOX) 2. La scelta ad opzione esclusiva (RADIO BUTTON) 3. La lista di opzioni - multipla o esclusiva (CASELLA COMBINATA) I primi due offrono visibilità completa a tutte le opzioni quindi sono più adatte a rose di pochi elementi mentre la lista di opzioni è «scrollabile» e si chiude automaticamente quindi consente di gestire numerose opzioni in poco spazio. Vediamo la sintassi per i checkbox, adatti per scelte multiple, e relativo rendering: <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 NB: si noti come gli elementi definiti da questo codice HTML siano effettivamente 3 campi diversi.

98 Scelta di opzioni Nell esempio con i radio button optiamo per un layout orizzontale, quindi senza <BR />: HTML<input type="radio" name="linguaggio" value="html"/> CSS <input type="radio" checked="checked" name="linguaggio" value="css"/> JavaScript <input type="radio" name="linguaggio" value="javascript"/> Essendo il radio button lo strumento per le scelte ad opzione esclusiva (una sola scelta valida), il gruppo di elementi è considerato un unico campo. Per questo motivo il NAME con lo stesso valore è ciò che raggruppa le diverse opzioni della scelta. L attributo VALUE, come per i checkbox, è il contenuto del campo che viene inviato alla pagina di destinazione. Vediamo inoltre anche l attributo CHECKED che deve essere valorizzato con il testo «checked» che consente di pre-impostare una scelta iniziale. CHECKED è valido anche per i checkbox.

99 Scelta di opzioni Per creare un menu di opzioni si utilizza un tag apposito: <select>. Con questo tag, ciascuna voce deve essere compresa all'interno del tag <option> (con chiusura opzionale). Il valore viene sempre specificato con l'attributo VALUE. Analogo all attributo CHECKED visto precedentemente, con l'attributo SELECTED si può pre-impostare una scelta iniziale. Inoltre con l attributo MULTIPLE è possibile attivare la scelta multipla: <select name="siti" multiple="multiple"> <option value="iuav" selected="selected"> <option value="google"> <option value="facebook"> </select> Esiste infine l attributo SIZE con cui è possibile decidere di tenere la casella aperta con un numero fisso di righe visibili (es. <select name="siti" size="3"> - casella aperta con tre righe visibili e scrollbar per lo scorrimento).