Linguaggi di markup XHTML. Validazione. Linguaggi di markup

Transcript

1 2 Linguaggi di markup XHTML Claudio Fornaro Ver Un linguaggio di markup contiene blocchi di testo organizzati secondo il loro proprio significato logico e strutturale: intestazioni paragrafi liste numerate liste di definizioni etc. 3 4 Linguaggi di markup Definiti dal W.W.W. Consortium (W3C) HTML HyperText Markup Language: primo linguaggio di markup utilizzato nelle pagine HTML, mescola struttura del documento e presentazione grafica XHTML extensible HTML: evoluzione del precedente per ovviare a sintassi ambigua, si basa su XML, quasi esclusivamente strutturale (elementi presentazionali in fogli stile separati) Validazione Servizi gratuiti di validazione online: validator.w3.org

2 5 6 Il documento HTML Nel seguito HTML viene usato col significato di XHTML (salvo indicazione) I file HTML e XHTML sono file di testo con estensione.html o.htm Frammisti al testo vi sono dei TAG che delimitano porzioni di testo (ad esempio per indicare un titolo): tag di apertura: <nometag> tag di chiusura: </nometag> (non ha spazi) Il documento HTML I tag di apertura possono contenere attributi che completano la specificazione del tag: <a href="./link.html"> 7 8 Tipi di elementi I tag delimitano blocchi di testo di tipo: Block-level: indipendenti tra loro, es. titoli, paragrafi, liste, etc. in genere vengono visualizzati preceduti e seguiti da un ritorno a capo, es. <p>, <h1>, <ul> Inline: sono interni a elementi block-level e non rompono il flusso del blocco stesso (non introducono ritorni a capo), vengono usati ad esempio per rendere in grassetto una parola, es. <strong>, <img> Caratteri speciali Alcuni caratteri come < e & sono usati per costituire elementi di markup e non possono quindi essere utilizzati nel testo Al loro posto si utilizzano delle sequenze di escape appropriate, ad esempio per rappresentare il carattere < si può utilizzare la sequenza < oppure il codice ASCII: < mentre per & si può usare & (notare il ; in fondo)

3 9 10 Regole di XHTML Utilizzare solo caratteri minuscoli per scrivere i nomi dei tag e degli attributi (HTML invece non fa distinzione) <a href="./link.html"> Una sequenza di white spaces (spazi, tab, ritorni a capo) viene visualizzata collassata ad un solo spazio Regole di XHTML Tutti i tag di apertura devono avere il corrispondente tag di chiusura I tag che non devono racchiudere testo devono avere la forma (con spazio): <tag /> come ad es. <br /> I tag devono essere annidati correttamente: <tag1><tag2> esempio</tag2></tag1> Regole di XHTML Gli attributi devono essere sempre tra virgolette (o apici) : <img src="img.gif" /> Tutti gli attributi devono avere valori, quelli che non li hanno in HTML devono avere un valore uguale all attributo: <input checked="checked" /> Regole di XHTML Nei commenti non si possono usare i doppi trattini perché usati nel tag stesso

4 13 14 Stile logico e fisico Stile logico: i tag identificano la struttura del documento <strong>testo grassetto</strong> Stile fisico: i tag cambiano l aspetto di alcune parti del documento <b>testo grassetto</b> In entrambi i casi in genere si ottiene un carattere grassetto, ma il secondo è poco espressivo del contenuto Struttura del documento HTML <!DOCTYPE> <html> <head> <title>titolo</title> Altri elementi di head </head> <body> Corpo del documento </body> </html> Il DOCTYPE Indica ai browser come interpretare (e visualizzare) i documenti XHTML, quale modello di documento (DTD Document Type Definition) è stato usato Usato dai servizi di validazione per conoscere a quale standard attenersi Il DOCTYPE Transitional più compatibile con il vecchio HTML, utile per il supporto di browser datati, depreca ma non impedisce l uso di tag presentazionali e altri (es. attributo target nei link) Strict più rigoroso, non tollera tag presentazionali, no per browser datati Frameset permette l uso di frame, stile anni 90

5 17 18 Aspetti grafici di HTML Nel seguito, i tag vengono descritti nella loro forma standard e nel loro aspetto grafico tipico (peraltro variabile a seconda dei browser) Tutti gli aspetti relativi alla forma grafica sono modificabili tramite i fogli stile CSS e attualmente questa è la scelta preferita anche quando non si usa un DTD Strict Il DOCTYPE Si deve indicare all inizio di ogni pagina (X)HTML Esempio di DOCTYPE XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Il tag <html> Il tag <html> delimita l inizio e la fine del documento HTML E l elemento radice del documento in quanto da esso discendono tutti gli altri Indica il namespace in uso e la lingua del documento e dell XML: <html xmlns=" xml:lang="it-it" lang="it-it"> <html xmlns=" xml:lang="it-it" lang="it-it"> Il tag <html> L attributo opzionale lang specifica la lingua in cui è scritta la pagina <html lang="it-it"> Ha solo due elementi discendenti : <head> <body>

6 21 22 Il tag <head> Descrive il contenuto del documento: titolo <title> metadati <meta>: parole chiave, l autore, etc. utilizzabili per la classificazione (ad esempio dai motori di ricerca) script <scritpt>: programmi per rendere interattiva la pagina style sheet <style>: istruzioni relative all aspetto grafico altri tag, ad es. <base> Il tag <title> Dà un titolo alla pagina del documento Viene usato come titolo della finestra del browser Viene usato per farne un bookmark/favorite Viene usato dai motori di ricerca per l indicizzazione e come link alla pagina Non può essere formattato in alcun modo Il tag <meta> Tra gli altri tag in <head> si deve indicare il Content Type che specifica il tipo del documento e il Character Set: <meta http-equiv="content-type" content="text/html; charset=iso " /> <meta http-equiv="content-type" content="text/html; charset=iso " /> Questo può essere sostituito da questa prima riga del documento HTML: <?xml version="1.0" encoding="iso "?> <?xml version="1.0" encoding="iso "?> ma in molti browser non funziona Il tag <body> Racchiude il contenuto che ha una forma grafica nella pagina HTML: Titoli Paragrafi Immagini Liste Ha parametri che si applicano all intera pagina (trattati più avanti)

7 25 26 Attributi di base (core) dei tag Quasi tutti i tag hanno i seguenti attributi (quindi non verranno più citati): id: assegna un identificatore ad un elem. del documento (ad es. ad un paragrafo) class: indica a quale classe o classi appartiene un elemento (es. un paragrafo) style: permette di specificare regole CSS per la formattazione di un singolo elemento title: permette di aggiungere un testo descrittivo ad un tag (visualizzato come tip) Titoli Sei livelli, il testo è incluso nei tag: <h1>titolo di importanza massima</h1> <h6>titolo di importanza minima</h6> I livelli superiori hanno dimensioni maggiori dei livelli inferiori Sono di tipo block-level Allineati a sinistra Titoli NON si devono usare con il solo scopo di cambiare la dimensione del carattere, ma per il solo scopo di indicare un titolo In HTML e XHTML Transitional si può aggiungere l attributo di allineamento align con valori: left, right, center, justify: <h1 align="center">centrato</h1> Con DTD Strict si deve ricorrere ai CSS Paragrafi Il testo viene suddiviso in paragrafi racchiusi dal tag <p>: <p>inizio di un paragrafo fine del paragrafo</p> E un elemento di tipo block-level Allineati a sinistra Attributo align Lascia spazio extra prima di ciascun paragrafo

8 29 30 Paragrafi Non è una buona idea (e tipicamente non funziona perché il browser li collassa) ottenere righe vuote con trucchetti quali <p></p><p></p><p></p> Non ha senso che contenga sezioni di tipo block-level come ad esempio liste e <div> Ritorni a capo Si utilizza il tag <br /> Per inserire più righe vuote si ripete: <br /><br /><br /> Ha un significato non strutturale Con DTD Strict il tag <br /> può comparire solo tra tag <hn>, <p>, <pre>, <div>, o <address> Esercizi Scrivere una pagina XHTML Transitional con DOCTYPE, <html>, <head>, il <meta> con il Content Type, i titoli con gli attributi align, paragrafi e ritorni a capo. Visualizzarla con IE e con Mozilla. Validarla su validator.w3.org Modificare la pagina precedente in modo che sia validata come XHTML Strict Divisioni <div> Il testo può essere suddiviso in sezioni generiche dai tag <div> e </div> Salvo l allineamento a sinistra, non ha alcuna forma grafica predefinita, viene usato per la formattazione mediante CSS E un elemento di tipo block-level Attributo align <div align="center"> equivale a <center> (non strutturale, non Strict)

9 33 34 Divisioni <span> Piccole porzioni di testo possono essere raggruppate tra <span> e </span> Non ha alcuna forma grafica predefinita, viene usato per la formattazione mediante CSS E un elemento di tipo inline Citazioni Per citare un blocco di testo si usano i tag <blockquote> e </blockquote> E un elemento di tipo block-level In genere viene visualizzato con una indentazione a sinistra e a destra L attributo cite può essere usato per una breve descrizione o la citazione della fonte (anche un sito Web) Citazioni Per citare una frase si possono usare i tag <q> e </q> E un elemento di tipo inline In genere viene visualizzato tra virgolette L attributo cite può essere usato per una breve descrizione o la citazione della fonte (anche un sito Web) Non è supportato da molti browser (IE6) Indirizzi Blocco di testo strutturale contenente un indirizzo (utile per i motori di ricerca) E racchiuso dai tag <address> e </address> E un elemento di tipo block-level Visivamente ha un carattere corsivo Non può contenere altri elementi di tipo block-level

10 37 38 Indirizzi <address> Pinco Pallino<br /> Corso Duca 24<br /> Torino 10129<br /> <br /> </address> Testo pre-formattato Per non collassare spaziature multiple, TAB e ritorni a capo (es. codice di programmazione) si racchiude il testo nei tag <pre> e </pre> Non è soggetto a word-wrapping e il browser inserisce delle scroll-bar In genere viene utilizzato un font monospaziato (es. Courier) Può contenere tag di modifica font quali <strong> e tag di tipo link <a> Liste Tre tipi di liste: ordered <ol> unordered <ul> definition <dl> Sono strutture di tipo block-level e quindi non devono essere in paragrafi Gli elementi della lista possono anche contenere altri elementi block-level quali paragrafi e altre liste Liste ordinate Liste in cui l ordine è importante Racchiuse tra i tag <ol> e </ol> L ordinamento viene rappresentato mediante numerazione che inizia da 1 Gli elementi sono racchiusi tra i tag <li> e </li> e sono indentati L attributo compact richiede di compattare visivamente la lista (spesso ignorato dai browser)

11 41 42 Liste ordinate L attributo type specifica il tipo di numerazione (valori possibili: 1 numerico, è il default a e A lettere minuscole e maiuscole i e I numeri romani minusc./maiusc. L attributo type può anche essere inserito in <li> e modifica il tipo di numerazione della lista per quel solo item Liste ordinate L attributo start specifica il valore iniziale della numerazione, deve essere un numero anche se il tipo è letterale L attributo value può essere usato in <li> per modificare il valore della numerazione della lista da quel punto in avanti Liste ordinate Liste ordinate <ol> <li>item 1 <ol> <li>item a</li> <li>item z</li> </ol> </li> <li>item n</li> </ol>

12 45 46 Liste non ordinate Liste non ordinate Liste in cui l ordine non è importante Racchiuse tra i tag <ul> e </ul> Gli elementi sono preceduti da un elemento grafico quale il pallino Gli elementi sono racchiusi tra i tag <li> e </li> e sono indentati L attributo type specifica il tipo di pallino (disc, circle e square) type può anche essere inserito in <li> Liste di definizioni Liste di definizioni Liste di descrizioni di termini Racchiuse tra i tag <dl> e </dl> Ogni elemento della lista è composto da almeno una delle seguenti parti: termine da definire tra <dt> e </dt>, mostrato non indentato definizione del termine tra <dd> e </dd>, mostrato indentato nella riga successiva

13 49 50 Esercizi Modificare la pagina dell esercizio precedente in modo da aggiungere Citazioni Indirizzi Testo pre-formattato Liste semplici Liste annidate Visualizzarla con altri browser Validarla Separatori orizzontali Linee orizzontali ombreggiate che separano visivamente e logicamente regioni di testo Si ottiene con il tag: <hr /> E un elemento di tipo block-level Attributo size: spessore in pixel Attributo width: larghezza in pixel o in percentuale sulla finestra (default: 100%) Separatori orizzontali Separatori orizzontali L attributo align (left, right, center) indica la posizione della linea quando non è larga quanto la finestra <hr align="left" width="50%" /> L attributo noshade elimina l ombreggiatura Si preferisce utilizzare i fogli stile CSS

14 53 54 Elementi del testo Elementi inline, fisici (non logici, quindi possibilmente da evitare): <i> </i> Corsivo <b> </b> Grassetto <tt> </tt> Macchina da scrivere (Courier) <u> </u> Sottolineato (no Strict) <s> </s> Barrato (no Strict) <strike> </strike> Barrato (nostrict) Elementi del testo Elementi inline fisici (seguito): <sub> </sub> Pedice <sup> </sup> Esponente <big> </big> Font più grosso di 1 incremento <small> </small> Font più piccolo di 1 incremento Elementi del testo Elementi del testo Elementi inline logici: <abbr> </abbr> Abbreviazione (Sig.), graficamente normale <acronym> </acronym> Acronimo, graficamente normale <cite> </cite> Citazione, corsivo <code> </code> Listato, Courier <dfn> </dfn> Definizione, corsivo <kbd>.. </kbd> tasto di tastiera, Courier

15 57 58 Elementi del testo Elementi del testo Elementi inline logici: <q> </q> Quotazione, tra virgolette <samp> </samp> Esempio, Courier <em> </em> Enfatizzato, corsivo <strong> </strong> Forte enfasi, grassetto <var> </var> Variabile di programma, corsivo Caratteri speciali Alcuni caratteri con codifica alternativa: " " " Virgolette ' ' ' Apostrofo & & & E commerciale < < < Minore di > > > Maggiore di  Trademark Non-breakable space Euro Caratteri speciali Alcuni caratteri accentati: À À à à é é è è ì ì ò ò ù ù «» ª ª º º ² ² ³ ³

16 61 62 Commenti Note non mostrate nella visualizzazione della pagina Racchiusi tra i tag  Spesso usati per: introdurre note di copyright delle pagine (in <head>) nascondere parti di codice non riconosciuta dai vecchi browser (ad esempio <style>, <script>, etc.) Commenti Esempio <style type="text/css">  </style> Un browser riconosce i CSS controlla l interno dei commenti nei tag <style> Esercizi Modificare la pagina dell esercizio precedente in modo da aggiungere Separatori orizzontali Elementi fisici e logici del testo Caratteri speciali e accentati Commenti Visualizzarla con altri browser Validarla Gli hyperlink Puntatori unidirezionali detti anchor a oggetti esterni al documento HTML L oggetto (testo, immagine, ) racchiuso dai tag <a> a </a> è sensibile al click e viene visualizzato sottolineato e di colore blu (violetto se già visitato) L attributo href specifica l URL dell oggetto a cui si riferisce (target) <a href="

17 65 66 Gli hyperlink L URL target può essere assoluto: oppure relativo alla posizione sul server del file HTML che contiene il link: altrofile.html../images/bullet.gif Gli hyperlink Il tag <base> nella sezione <head> può essere usato per specificare un URL assoluto da usare per completare un URL relativo invece dell URL della pagina corrente <base href=" /> Gli hyperlink I colori dei link possono essere modificati mediante i seguenti attributi del tag <body> (ma è preferibile usare i fogli stile CSS che permettono di modificare anche il colore dei link quando il mouse vi è sopra): link: colore dei link non visitati vlink: colore dei link visitati alink: colore dei link quando si fa click Gli hyperlink L attributo target specifica dove aprire la pagina o l oggetto riferito da href Entrambi gli attributi id e name di <a> definiscono un fragment identifier: un identificatore di una posizione nel testo, in questo caso non si indica href e non si ha una resa grafica particolare (in genere il contenuto è vuoto) <a name="top"></a>

18 69 70 Gli hyperlink Un fragment viene utilizzato preceduto dal carattere #: #top Un fragment permette ad un anchor di saltare direttamente alla visualizzazione del paragrafo che lo contiene: <a href="#top">back to top</a> Il fragment indicato in href può essere relativo ad un altro documento: <a href=" Go to the top of cnn</a> Gli hyperlink L attributo id permette di definire un anchor in qualsiasi tag: <p id="top">inizio</p> Se il tag <a> deve essere usato sia come anchor sia come fragment, oppure se si vuole applicare al testo su cui fare click una formattazione tramite regola CSS, allora possono esserci sia href sia id/name (meglio entrambi) Gli hyperlink Attributo title: permette di associare qualche informazione al target link, si presenta sotto forma di tooltip Attributo accesskey: associa il link ad uno shortcut da tastiera, al posto di fare click sul testo si premono i tasti ALT+quello_specificato: <a href=" accesskey="y">yahoo!</a> Alcuni tasti sono riservati: F, E, V, T, H Gli hyperlink Attributo target: permette di indicare il nome di quale finestra o frame il link deve essere aperto, di default Oltre ai nomi delle finestre si possono usare: _blank (finestra nuova) _self (sé stessa) _parent e _top (solo con i frame)

19 73 74 Gli hyperlink Un immagine può essere associata ad un anchor e appare riquadrata da un bordo (le immagini sono trattate più avanti) <a href="about.html"> <img src="about.gif" alt="about Button" border="0" height="55" width="55" /> </a> border="0" elimina il bordo Gli hyperlink Attenzione: se tra la chiusura del tag <img> e il tag </a> c è un white space (spazio, tab, ritorno a capo), si forma una piccola riga in basso a destra dell immagine detta tick che è indice di poca cura dei dettagli: eliminare il white space Caratteri Il testo tra i tag <font> e </font> viene visualizzato modificato in base agli argomenti: color: colore del testo size: dimensione del testo: valore da 1 (piccolo) a 7 (grande) valore incrementale (+/ 1, +/ 6) rispetto al valore corrente, il valore iniziale è 3 face: nomi dei font da utilizzare in ordine di preferenza (se il browser non li trova) Caratteri Esempio <p><font face="arial, Helvetica, Sans-serif" color="red" size="+2"> Testo modificato</font> Testo non modificato</p> Se il browser non trova nessuno dei fonti elencati, usa un font di default (in genere tipo Times)

20 77 78 Caratteri Per cambiare tutto il font di un documento si può usare il tag <basefont> nella sezione <head> Attributi: color size face Colori E possibile cambiare i colori di quasi ogni elemento grafico Modalità duramente contrastata a favore dei CSS I colori si possono esprimere mediante i loro nomi o mediante i codici RGB in esadecimale preceduti da #: #FFAA22 I codici esadecimali del tipo xxyyzz si possono abbreviare in xyz: #FA Colori Attributo color in quasi tutti i tag Attributo text nel tag <body> per il colore del testo della pagina Attributo bgcolor nel tag <body> per il colore di sfondo della pagina Attributi link, vlink e alink nel tag <body> per il colore dei link (vedi link) Colori Principali colori Black (#000000) Green (#008000) Silver (#C0C0C0) Lime (#00FF00) Gray (#808080) Olive (#808000) White (#FFFFFF) Yellow (#FFFF00) Maroon (#800000) Navy (#000080) Red (#FF0000) Blue (#0000FF) Purple (#800080) Teal (#008080) Fuchsia (#FF00FF) Aqua (#00FFFF)

21 81 82 Esercizi Modificare la pagina dell esercizio precedente in modo da aggiungere Hyperlink Caratteri Colori Visualizzarla con altri browser Validarla Immagini Gli unici due formati supportati dallo standard sono: GIF (8 bit, con trasparenza, animate) JPEG (24 bit, resa fotografica) Altri formati non standard supportati da molti browser: BMP PNG (tipo GIF) molti altri mediante plug-in Immagini Per inserire un immagine in un punto della pagina HTML si usa il tag <img> E un elemento di tipo inline (!!!) L attributo src identifica l URL (assoluto o relativo) da cui prelevare l immagine <img src="images/logo.gif" /> Le immagini sono in genere raccolte in una o più directory (es. images) Immagini L attributo alt fornisce un testo alternativo alla visualizzazione (per browser non grafici) o quando manca l immagine o quando il cursore è sopra l immagine (tip) <img src="logo.gif" alt="logo" /> Poiché alcuni browser (FF) usano title per il tip, utilizzare sia alt (per IE) sia title (che ha priorità su alt) Se l immagine è solo decorativa si usa un attributo vuoto (alt="")

22 85 86 Immagini Immagini L attributo align può essere usato per allineare l immagine con il testo: top, middle, bottom: allineano la riga precedente e quella successiva del testo top top top top top top top top con l immagine middle middle middle middle bottom bottom bottom bottom right, left: spostano l immagine nella direzione indicata, il testo seguente avvolge l immagine dall altra parte Immagini Immagini Per interrompere il flusso del testo che avvolge l immagine (quindi per andare a capo sotto l immagine), si usa il tag <br> con l attributo clear avente valori left, right, both o none: <br clear="left" /> Qui c è un <br clear="left" />

23 89 90 Immagini Immagini In un immagine avente attributo align con valori left o right si possono aggiungere gli attributi: hspace per aggiungere un margine (in pixel) a destra e a sinistra dell immagine vspace per aggiungere un margine (in pixel) sopra e sotto l immagine Immagini L immagine viene normalmente mostrata nelle sue dimensioni originali Si possono dare le dimensioni con gli attributi width e height (in pixel o % sulla larghezza del contenitore-finestra) Le dimensioni esplicite: ridimensionano l immagine (se necessario) permettono al browser di mostrare la pagina prima che tutte le immagini vengano scaricate dal server (pre-layout) Immagini Un immagine all interno di tag <a> diventa un link (ossia cliccabile) Si può impostare il bordo dell immagine a 0 con l attributo border <a href=" <img src="logo.gif" alt="cnn Logo" border="0" /></a>

24 93 94 Immagine di sfondo Per aggiungere una immagine di sfondo ad una pagina HTML si utilizza l attributo background nel tag <body> riferendolo ad un URL assoluto o relativo contenente un immagine L immagine viene ripetuta orizzontalmente e verticalmente (tiled ) Esercizi Modificare la pagina dell esercizio precedente in modo da aggiungere Immagini di vario tipo Uno sfondo alla pagina Visualizzarla con altri browser Validarla Image map Immagine contenente più punti sensibili al click, corrispondenti a diversi URL Due tipi: server-side image maps client-side image maps Image map Nelle server-side IM: 1. L utente fa click in un punto dell immagine 2. Il browser manda al server Web le coordinate del punto su cui si è fatto il click 3. Il server determina quale URL sia associato a quelle coordinate e lo manda al browser 4. Il browser richiede l URL che il server gli ha mandato Poco usate, lente, poco user-feedback (mostra solo le coordinate x e y nella barra di status)

25 97 98 Image map Nelle client-side IM il browser: carica l immagine, carica il file con la descrizione delle zone sensibili dell immagine associa le zone agli URL corrispondenti Veloce: il browser conosce gli URL User-feedback: l URL di destinazione viene mostrato quando il mouse è sopra Lo sviluppo e test non richiede un server Image map Server-side IM Un tag <a> con attributo href punta al file delle zone sul server (o ad un cgi) Il tag <a> contiene un tag <img> con attributo vuoto ismap <a href=" <img src="http//abc.com/shapes.gif" ismap="ismap" /> </a> Image map Client-side IM L immagine <img> viene dotata dell attributo usemap che identifica un tag <map> che definisce le zone attive <img src="img.gif" usemap="#mappa" /> L immagine diventa un link nonostante non ci sia alcun tag <a> Conviene impostare border a 0 Image map Client-side IM Il tag <map> può essere collocato in qualsiasi punto del documento (spesso alla fine, documentare con commenti!) e può essere anche in un file separato E necessario che <map> abbia l attributo name e/o id (meglio entrambi) perché possa essere referenziato dall attributo usemap di <img>

26 Image map Client-side IM I tag <map> e </map> racchiudono le forme geometriche che definiscono le zone attive dell immagine Ogni forma geometrica è descritta da un tag <area /> Image map Client-side IM Attributi principali di <area>: href: URL associato alla zona shape: forma della zona (rect, circle, poly) coords: coordinate x,y dei punti che definiscono la shape, separati da virgole, il punto 0,0 è il top-left, x e y possono essere in pixel o in percentuale su dim. immagine alt: testo alternativo per quella zona Image map Client-side IM Valori per shape e relative coords: rect: rettangolo (default), coords contiene 4 valori: gli angoli top-left e bottom-right circle: cerchio, coords contiene 3 valori: il centro e il raggio poly: poligono qualsiasi, coords contiene 2xn valori: ciascuno è un angolo default: la restante area dell img (no IE) Image map Client-side IM <img src="shapes.gif" usemap="#figure" alt="img map" border="0" width="400" height="200" />  <map name="figure" id="figure"> <area shape="rect" coords="6,50,140,143 href="rectangle.html" alt="rectangle" /> <area shape="circle" coords="195,100,50" href="circle.html" alt="circle" /> <area shape="poly" coords="255,122,306,53,334,62,338,0,388,77, 374,116,323,171,255,122" href="poly.html" /> <area shape="default" href="def.html" alt="" /> </map>

27 Image map Client-side IM Altri attributi principali di <area>: target: frame o finestra in cui aprire il link nohref: indica che la zona non deve essere attiva (es. all interno di una zona attiva) <map name="donut" id="donut"> <area shape="circle" coords="150,150,81" nohref="nohref" alt="" /> <area shape="circle" coords="150,150,146" href="donut.html" alt="donut" /> <area shape="default" nohref="nohref" alt=""/> </map> Esercizi Modificare la pagina dell esercizio precedente in modo da aggiungere Imagemap server-side (non essendoci il server a rispondere, mostra solo le coordinate del punto su cui è) Imagemap client-side (per stabilire le coordinate, utilizzare temporanemanente un Imagemap server-side identica) Visualizzarla con altri browser Validarla Griglie rettangolari di celle organizzate in righe e colonne Utilizzate nella modalità Transitional anche per disporre gli elementi di una pagina (layout), deprecato Strict non ne accetta l uso per il layout, ma solo per la presentazione di dati tabulari Ogni tabella è racchiusa nei tag <table> e </table> E un elemento di tipo block-level Ogni riga è racchiusa nei tag <tr> e </tr> Ogni riga contiene celle di tipo: intestazione: racchiuse da tag <th> e </th>, centrate, in grassetto dato: racchiuse da tag <td> e </td>, allineate a sinistra, font normale

28 La dimensione delle celle dipende dal contenuto Ogni cella può contenere anche elementi di tipo block-level (e altre tabelle) I tag <caption> e </caption> aggiungono una didascalia alla tabella, hanno attributo align con valori top, bottom, left, right L attributo border di <table> indica lo spessore delle linee <table border="1"> <caption>basic Fruit Comparison Chart</caption> <tr><th>fruit</th><th>color</th></tr> <tr><td>apple</td><td>red</td></tr> <tr><td>kiwi</td><td>green</td></tr> <tr><td>watermelon</td><td>pink</td></tr> </table> Alcuni browser non mostrano i contorni di una cella se questa non contiene valori, per mostrarla correttamente si può utilizzare Per far occupare ad una cella lo spazio di più celle, si aggiunge nel tag <td> o <th> corrispondente alla cella da espandere l attributo: rowspan="n_righe" per estendersi in verticale su un n. di righe pari a n_righe colspan="n_col" per estendersi in orizzontale su un n. di colonne pari a n_col

29 <table border="1"> <tr> <td rowspan="2">element 1</td> <td>element 2</td> </tr> <tr> <td>element 3</td> </tr> </table> <table border="1"> <tr> <td colspan="3">element 1</td> </tr> <tr> <td>element 2</td> <td>element 3</td> <td>element 4</td> </tr> </table> Dove è sbagliato il seguente codice? <table border="1"> <tr> <td>element 1</td> <td>element 2</td> <td rowspan="2">element 3</td> </tr> <tr> <td>element 4</td> <td>element 5</td> <td>element 6</td> </tr> </table> Esercizi Riprodurre la seguente tabella 4x4 (introducendo testo per le celle)

30 Attributo width per: table: dimensione della tabella in pixel o in percentuale th e td: dimensione della cella in pixel Spazio tra le celle: attributo cellspacing in <table>, in pixel o % Spazio tra le linee delle celle e il contenuto: attributo cellpadding in <table>, in pixel Allineamento testo nelle singole celle, attributi di <td> e <th>: align: allineamento orizzontale (left, right, center, justify, char) valign: allineamento verticale (top, middle, bottom, baseline) <table border="1" cellspacing="0" cellpadding="0" width="100%"> <tr> <td align="left">left</td> <td align="center">center</td> <td align="right">right</td> </tr> <tr> <td valign="top" height="100">top</td> <td valign="middle">middle</td> <td valign="bottom">bottom</td> </tr> </table>

31 L attributo bgcolor si può applicare a: <table>, <tr>, <th> e <td> Lo spazio lasciato da cellspacing ha in genere il colore dello sfondo L attributo background si può applicare a: <table>, <th> e <td> L attributo align in <table> posiziona la tabella nella pagina I valori right e left fanno avvolgere la tabella (didascalia inclusa) dal testo che segue (<br clear= /> per ripristinare il normale flusso) Esercizi. Riprodurre l aspetto delle seguenti pagine (centrate) Soluzioni <table width="80%" align="center" cellpadding="10"> <tr><td bgcolor="white"> <h1 align="center">heading</h1> <hr width="80%" />

32 Soluzioni <body bgcolor="navy" link="white" alink="white" vlink="white"> <table width="80%" align="center" cellpadding="10" bgcolor="white"> <tr><td colspan="5"><h1>demosite</h1></td></tr> </table> <table width="80%" align="center" cellpadding="10" border="1" bgcolor="maroon"> <tr><td align="center"><a href="#">link 1</a></td>...</tr> </table> <table width="80%" align="center" cellpadding="20" bgcolor="white"> <tr><td colspan="5" bgcolor="white"> <h2>page Heading</h2> <hr width="80%" align="left" /> <p>lorem ipsum dolor... Esercizi Top-Left-Bottom TLB Layout Design fluido (stretchable) Si ridimensiona per occupare tutta la finestra del browser Possibile grazie alle tabelle (meglio se si usano i CSS) Si definiscono le dimensioni di solo alcune parti della tabella <table width="100%"> <tr> <td width="20"> </td> <td width="150">barra sinist.</td> <td width="20"> </td> <td>contenuto principale</td> <td width="100">barra dest.</td> <td width="20"> </td> </tr> </table>

33 Esempio ottenuto con tabelle Photoshop e altri lo producono automat Suggerimenti: Indentazione per leggibilità Usare sempre <table> con gli attributi border, cellpadding e cellspacing Verificare che le somme dei width di <th> e <td> sia pari a quella di <table> Non annidare troppe tabelle (codice complesso e più lento da visualizzare) Commentare le parti delle tabelle e le tabelle stesse quando sono annidate La struttura logica della tabella può opzionalmente essere evidenziata suddividendola in sezioni: intestazione: tra <thead> e </thead>, opzionale e unica corpo: tra <tbody> e </tbody>, possono esserci più sezioni <tbody> nella stessa tabella terminazione: tra <tfoot> e </tfoot>, opzionale e unica

34 Per definire le caratteristiche relative a gruppi di colonne della tabella, prima di <thead> si raggruppano le colonne stesse con i tag <colgroup> Ciascuna colonna viene identificata da un tag generico <col />, nell ordine da sinistra a destra Esempio <colgroup> gruppo 1 <col /> colonna 1 </colgroup> <colgroup> gruppo 2 <col align="center" /> colonna 2 <col align="left" /> colonna 3 </colgroup> L attributo rules di <table> permette di specificare quali linee debbano essere disegnate intorno alle celle/colonne/righe (none, groups, rows, cols, all) L attributo frames di <table> permette di specificare quali linee debbano essere disegnate intorno alla tabella (box, above, below, hsides, vsides, lhs, rhs, void, border) Esercizio Riprodurre la seguente tabella

35 Soluzione <table border="1" frame="box" rules="groups"> <caption>fun with Food</caption> <colgroup> <col /> </colgroup> <colgroup> <col align="center" /> <col align="left" /> </colgroup> Esercizio Riprodurre le tabelle I frame I frame Un documento HTML visualizzare nella stessa finestra più pannelli (frame) indipendenti, ma collegabili Ogni pannello può contenere documenti diversi e avere scrollbar Attualmente non più molto usati per alcuni problemi di usability Vantaggio: poter operare su un panel e tenerne un altro aperto in consultazione

36 I frame Il documento principale: non contiene un tag <body>, ma una coppia <frameset> e </frameset> contiene soltanto l indicazione e la disposizione dei singoli frame ha un DTD di tipo particolare: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " l1-frameset.dtd"> I frame Per separare la finestra del browser in porzioni verticali: <frameset cols="valori"> essendo valori un elenco separato da virgole delle percentuali di spazio da assegnare a ciascun frame <frameset cols="20%, 80%"> I frame Per separare la finestra del browser in porzioni orizzontali: <frameset rows="valori"> essendo valori un elenco separato da virgole delle percentuali di spazio da assegnare a ciascun frame <frameset rows="20%, 80%"> I frame All interno dei tag <frameset>, vari tag <frame /> specificano i documenti da visualizzare in ciascun frame Attributi di <frame>: src: URL da visualizzare nel frame name: nome del frame (per vecchi browser) id: identificatore del frame (nuovi browser) (sia name sia id allo stesso valore) frameborder: spessore del bordo

37 I frame Altri attributi di <frame>: scrolling: presenza o no di scrollbar, valori: auto (default), yes, no noresize="noresize": impedisce che il frame possa essere ridimensionato marginheight: distanza del contenuto dai bordi superiore e inferiore marginwidth: distanza del contenuto dai bordi sinistro e destro I frame Per supportare i browser che non supportano i frame (vecchi browser, ma anche PDA, cellulari, etc.), dopo i <frame /> e prima di </frameset> si può aggiungere una sezione tra i tag <noframes> e </noframes> Qui viene riportato il codice HTML (da <body> a </body>) da visualizzare in alternativa I frame <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " frameset.dtd"> <html xmlns=" lang="en"> <head> <title>example</title> <meta http-equiv="content-type" /> </head> <frameset cols="20%,80%"> <frame src="links.html" name="links" id="links" /> <frame src="display.html" name="display" id="display" /> <noframes> <body> <p><a href=" /> <a href=" </body> </noframes> </frameset> </html> I frame Per aprire un link presente in un frame in un altro frame: dare un name e un id al frame destinatario aggiungere nel tag <a> l attributo target con il nome/id del frame destinatari Esempio <a href=" target="display">

38 I frame Valori predefiniti di target: _blank: carica la pagina in una nuova finestra _self: carica la pagine nel frame corrente _top: elimina la struttura a frame della finestra e vi carica la pagina intera _parent: come _top ma limitato alla finestra genitore, nel caso di frame annidati I frame Si possono usare i frame per creare layout come con le tabelle I valori per gli attributi cols e rows possono essere: valori percentuali valori in pixel l asterisco * (lo spazio che resta) I frame I frameset posso essere annidati: <frameset cols="200, *"> <frame src="links.html" name="controls" id="controls" /> <frameset rows="100, *"> <frame src="header.html" name="header" id="header" /> <frame src="display.html" name="display" id="display" /> </frameset> </frameset> I frame Riprodurre la seguente schermata, a sinistra un elenco di link a motori di ricerca, a destra un titolo fisso e sotto lo spazio dove vengono aperte le pagine

39 I frame Riprodurre la seguente schermata, i frame laterali sono larghi 100 pixel, quello superiore è alto 100 pixel, tutti i frame devono avere un contenuto I frame Frame flottanti o inline frame Si comportano come ogni altro oggetto oggetto inline (il testo lo avvolge come un immagine) Sono interni ad un documento con un normale <body> (DTD non Frameset) Racchiuso tra i tag <iframe> e </iframe> (notare che ha il tag di chiusura) I frame Attributi di <iframe>: width: larghezza in pixel o percentuale height: altezza in pixel o percentuale src: URL da cui prelevare il contenuto align: allineamento (come <img>) marginheight: distanza del contenuto dai bordi superiore e inferiore marginwidth: distanza del contenuto dai bordi sinistro e destro I frame All interno dei tag <iframe> e </iframe> si inserisce testo HTML da visualizzare se il browser non supporta gli Iframe (<noframe> implicito) L attributo target di <a> può riferirsi ad un Iframe

40 I frame I frame Esercizio Google Maps fornisce il codice HTML per includere in un Iframe la mappa di un luogo, provare a inserire una in una propria pagine HTML Multimedia in Flash Tag <embed> non standard, ma utilizzato da quasi tutti i browser <embed src="test.swf" id="flash1" name="flash1" width="320" height="240" quality="autohigh" bgcolor="#ffffff" type="application/x-shockwave-flash" pluginspage=" go/getflashplayer"> <noembed> <img src="test.gif" alt="" height="250" width="320" /> </noembed> </embed> Multimedia in Flash Tag <object> standard, ma non sempre funzionante correttamente <object type="application/x-shockwave-flash" data="test.swf" width="320" height="240"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <img src="test.gif" alt="" width="320" height="240" /> </object>

41 Multimedia in Flash Tag <object> standard, qui utilizzato con gli ActiveX di Microsoft <object classid="clsid:d27cdb6e-ae6d-11cf-96b " codebase=" shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="flash1" name="flash1" width="320" height="240"> <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <img src="test.gif" alt="" width="320" height="240" /> </object> Multimedia in Flash In genere si utilizzano entrambe le modalità <object classid="clsid:d27cdb6e-ae6d-11cf-96b " > <param name="movie" value="test.swf" /> <param name="quality" value="high" /> <embed src="test.swf" > <noembed> </noembed> </embed> </object> Permettono di ricevere input dall utente Le informazioni vengono inviate al server web che: le fa elaborare ad una applicazione predisposta (CGI) che produce dei risultati invia questi risultati al browser Un form è racchiuso tra i tag <form> e </form> Contiene codice HTML e speciali tag detti field o controlli (es. <input>) I field sono elementi di tipo inline e sono identificati dagli attrib. id e name Le informazioni vengono passate al server come coppie del tipo field-name/valore o field-id/valore

42 Attributi di <form>: action: URL del programma CGI che deve ricevere i dati assoluto o relativo (se il CGI è nello stesso server) per fare prove usare: <form action=" method="post"> oppure (non funziona bene con le checkbox): <form action=" rm/showform.php" method="get"> Attributi di <form>: method: protocollo di trasmissione dei dati, principali valori: get: default, passa i dati insieme all URL hp?name=pinco+pallino&age=92&sex=m Pochi dati, posso essere inseriti in un link post: trasmette i dati nella stessa connessione attraverso cui ha mandato la richiesta per l URL Name=Pinco+Pallino&Age=92&Sex=m Attributi di <form>: enctype: metodo di codifica dei dati: application/x-www-form-urlencoded: default, cambia gli spazi in + e i caratteri non alfanumerici in %nn (nn è il codice ASCII) text/plain: trasmette senza codifica, preferibile se action èdi tipo mailto in quanto produce un testo strutturato a righe: First Name=Pinco Last Name=Pallino Sex=m Submit=Invia Attributi di <form>: enctype (continua): multipart/form-data: separa i campi trasmessi con dei delimitatori speciali, permette inoltre di trasmettere uno o più file al server passandone anche il nome, i dati inviati hanno questo aspetto: Content-type: multipart/form-data; boundary= Content-Length: Content-Disposition: form-data; name="nomeutente" Joe Content-Disposition: form-data; name="myfile";

43 Attributi di <form>: id e name: identificano il form, in genere si utilizzano entrambi con gli stessi valori. XHTML-Strict depreca l uso di name ma alcuni browser riconoscono solo quello Attributi comuni a tutti i field: name: identifica il field, viene usato per l elaborazione lato server dei form e anche per i JavaScript id: identifica il field, in genere viene usato per i CSS e i JavaScript Si utilizzano entrambi e, ove possibile, assegnando gli stessi valori (con eccezioni) XHTML-Strict depreca name, ma alcuni browser lo richiedono per l uso con script Campo TEXT Una sola riga di input <input type="text" /> Attributi: name id (lo stesso di name) size: ampiezza (n. di caratteri) maxlength: contenuto massimo (n. caratteri) value: contenuto iniziale Campo PASSWORD Una sola riga di input I caratteri inseriti non vengono visualizzati, al loro posto vengono visualizzati degli asterischi o altri caratteri neutri <input type="password" /> Attributi: come per il campo TEXT Attenzione: i dati non vengono trasmessi cifrati grazie a questo tipo di input (si usano altri metodi, ad es. connessioni SSL)

44 Campo TEXTAREA Area di input multilinea <textarea> </textarea> Attributi: rows: numero di righe cols: numero di caratteri per ogni riga name, id (uguali) Il contenuto iniziale viene definito scrivendolo tra i due tag (è testo semplice, non HTML) <textarea> </textarea> Campo MENU A DISCESA Gli elementi del menu sono racchiusi in tag <option> : <select id="gadg" name="gadg"> <option>super Gadget</option> <option>mega Gadget</option> <option>gadget</option> </select> Al server viene mandata la coppia: gadg/stringa tra <option> dell elemento selezionato Campo MENU A DISCESA Attributi di <select> : size: numero di righe visibili (default=1), se maggiore di 1 si parla di liste name, id (uguali) multiple="multiple": permette di selezionare più di un elemento (Control-click); al server viene mandata una coppia field/valore per ciascun elemento selezionato; in questo caso l attributo selected (prossima slide) può essere usato su più elementi Campo MENU A DISCESA Attributi di <option> : value: valore che viene inviato al server quando viene selezionato l elemento corrispondente, se value non è presente viene mandato il testo compreso tra <option> e </option> selected="selected": preseleziona un elemento

45 Campo MENU A DISCESA Il tag <optgroup label="titolo"> dà un titolo alle sezioni di <option> <select name="gadgettype" id="gadgettype"> <optgroup label="s* Gadgets"> <option value="sg-01">super Gadget</option> </optgroup> <optgroup label="m* Gadgets"> <option value="meg-g5">mega Gadget</option> <option value="mo-45">mongo Gadget</option> </optgroup> <option selected="selected">gadget</option> </select> Campo CHECKBOX Elementi da spuntare Non mutuamente esclusivi <input type="checkbox" /> Attributi: name: uguale per tutte le ckbox collegate tra loro (come se fossero gli elementi di una lista) id: diverso per identificare ciascuna checkbox value: valore che viene inviato al server, se non esiste, viene inviato on checked="checked": preseleziona la ckbox Campo CHECKBOX <input type="checkbox" name="dev" id="supermag"/>super-magneto<br /> <input type="checkbox" name="dev" id="krypto"/>kryptonite Coating<br /> <input type="checkbox" name="dev" id="antigrav"/>anti-gravity<br /> Al server viene mandata una coppia name/valore per ciascun elemento selezionato (valore è on oppure quello indicato con value nell elemento selez.) Campo CHECKBOX Per distinguere i vari elementi o si usa value in ciascun elemento (indispensabile nel caso precedente) o si utilizza un name diverso per ciascun elemento: <input type="checkbox" name="supermag" id="supermag"/>super-magneto<br /> <input type="checkbox" name="krypto" id="krypto"/>kryptonite Coating<br /> <input type="checkbox" name="antigrav" id="antigrav"/>anti-gravity<br />

46 Campo RADIO-BUTTON Elementi da spuntare Mutuamente esclusivi <input type="radio" /> Attributi: name: uguale per tutti i radio-button mutuamente esclusivi id: diverso per identificare ciascuna checkbox value: valore che viene inviato al server, se non esiste, viene inviato on selected="selected": preseleziona il radio Campo RADIO-BUTTON Per distinguere i vari elementi si usa value in ciascun elemento: <input type="radio" name="device" id="supermag" value="supermag" />Super-magneto<br /> <input type="radio" name="device" id="krypto" value="krypto" />Kryptonite Coating<br /> <input type="radio" name="device" id="antigrav" value="antigrav" />Anti-gravity<br /> Bottone di invio Richiede al browser di inviare all URL specificato in action i contenuti di tutti i campi del form <input type="submit" /> Attributi: name id (lo stesso di name) value: scritta sul bottone, inviata al server (per avere diversi bottoni associati allo stesso form ma richiedenti operazioni diverse) Bottone di reset Azzera o riporta al valore di default tutti i campi del form <input type="reset" /> Attributi: name id (lo stesso di name) value: scritta sul bottone, inviata al server

47 Bottone generico Mostra un bottone cliccabile <input type="button" /> Deve essere associato mediante linguaggi di scripting a un evento che faccia eseguire un azione, ad es. con l attributo onclick: onclick="alert('hello!');" Altri attributi: name id (lo stesso di name) value: scritta sul bottone Bottone generico 2 Metodo alternativo per mostrare un bottone <button>press Me!</button> Il testo tra i due tag è la scritta sul bottone, ma a differenza di <input> può essere composto da elementi in-line e block (es. immagini, ma non trasmette le coordinate) Attributi: name, id (uguali) value: valore (stringa) da trasmettere al server type: valori button, submit e reset Bottone grafico Immagine che si comporta come un bottone, ma invia anche le coordinate di dove è stato cliccato <input type="image" /> Attributi: name, id (uguali) src: URL dell immagine da visualizzare alt, align, vspace, hspace: come per <img> File upload Permette di caricare un file sul server <input type="file" /> E necessario un enctype di tipo multipart/form-data Crea un bottone che apre una finestra di dialogo per selezionare il file Attributi: name, id (uguali) maxlength: contenuto massimo (n. caratteri) size: ampiezza (n. di caratteri)

48 Etichette Nome: Associano un testo ad un campo Permette di formattare tutte le label con una sola regola CSS Utile per gli screen reader 1 o modo il campo associato è tra i tag: <label>nome: <input type="text" /> </label> Etichette 2 o modo il campo associato è indicato mediante il suo id nell attributo for <label for="cnome">nome:</label> <input type="text" id="cnome" /> Questo secondo metodo permette di collocare <label> e <input> in 2 celle diverse di una tabella usata per il layout Fieldset Raggruppano più campi, in genere sono incorniciati <fieldset> </fieldset> Attributi di <field>: Solo quelli di base Il tag interno <legend> </legend> racchiude il titolo del fieldset Attributi di <legend>: align: top, bottom, left, right Fieldset <fieldset> <legend>customer Identification</legend> <label>customer Name: <input type="text" name="cn" id="cn" size="25" /> </label> <br /> <label>password: <input type="password" name="pass" id="pass" size="8" /> </label> </fieldset>

49 Informazioni non visibili Permettono di passare dati al server senza intervento dell utente <input type="hidden" /> Attributi: name, id (uguali) value: valore (stringa) da trasmettere al server Ad es. correlano collegamenti consecutivi dello stesso utente (trasmettono ai form successivi i dati accumulati dai precedenti) Informazioni non visibili Il server crea la pagina del secondo form includendo in campi hidden i dati ottenuti dal primo form, così il secondo form può inviarli tutti insieme al server Attributi comuni a tutti i campi: accesskey: <label>customer <u>n</u>ame: <input type="text" accesskey="n" /> tabindex: specifica l ordine in cui con il tasto TAB ci si può spostare da campo a campo (i campi con tabindex di valore pari a 0 vengono considerati dopo tutti quelli con valore > 0) title: può essere usato per suggerire all utente cosa immettere in un campo Attributi comuni a tutti i campi: disabled: il campo viene reso inutilizzabile, in genere è grigio, i suoi dati non vengono spediti al server, l opzione (la dis/ri-abilitazione) viene gestita da script per renderlo utilizzabile solo in determinati casi (es. certi campi sono stati completati) readonly: il campo non è modificabile, ma si comporta come un campo normale (solo per campi text, password e textarea), opzione gestibile con script