avrà colore verde, grandezza di 24 punti tipografici ed un margine sinistro di 5 pixel. Il tag DIV, così come A, SPAN o anche P indicano, come vedremo in seguito, l'applicazione di uno stile ad un elemento del documento, stile che viene definito attraverso un attributo speciale STYLE. Cosa sono i punti e i punti e virgola che vedete nell'esempio? Semplice, sono dei separatori. Ricordate innanzitutto che ogni proprietà (ad esempio il colore o la grandezza del carattere) è separata tramite il segno [:] dai valori che ad essa si riferiscono; i valori, a loro volta, sono separati da [;]. Ovviamente, esistono diverse proprietà che è possibile utilizzare negli stili, e che in parte vedremo nel nostro corso; se volete dare un'occhiata ad un elenco completo, vi consigliamo di raggiungere l'url del W3C www.w3.org. FOGLIO DI STILE Ma cos'è un foglio di stile, o style sheet? In poche parole, è un raggruppamento di stili che possono venire applicati ad una pagina html. Il CSS1 (Cascade Style Sheets One) è uno standard accettato dal W3C e si riferisce ai fogli di stile. Il CSS1 fa riferimento al fatto che in un foglio sono definiti degli stili che il browser deve interpretare in sequenza. Le migliori modalità d'utilizzo dei fogli di stile sono essenzialmente basate su tre metodi: 1. Il metodo in linea, che passa attraverso l'HTML classico. 2. Metodo degli stili incorporati all'interno del tag ; 3. Metodo degli stili in un file di configurazione, con estensione .css. In un file esterno con estensione "css" (es: styles.css) che può essere richiamato per ogni elemento html della pagina al quale si vuole dare una particolare formattazione non prevista dall'html tradizionale Metodo in linea

Internet

Metodo degl stili incorporati Il metodo degli stili incorporati è quello che dà maggior controllo al progettista di pagine HTML; mentre quello degli stili definiti in un file di configurazione è efficace per la manutenzione di molte pagine HTML contemporaneamente (ad esempio per un sito). Ecco un esempio. Prova dei fogli di stile

Testo in rosso su fondo bianco

Il resto del testo è giallo su fondo blu

Questo testo risulta indentato grazie agli stili precedentemente definiti

Ora commentiamo il codice compreso nei TAG . Con BODY s'indicano gli stili che interessano l'intero corpo del foglio. Lo sfondo (background) ed il colore del testo (color) accettano tre coppie di numeri: la prima coppia da informazioni sul rosso (FF), la seconda sul verde (FF), la terza sul blu (FF). Per cui se è #FF0000 allora è indicato il rosso, se è #00FF00 è indicato il verde, se è #0000FF è indicato il blu, se è #FFFFFF è indicato il bianco, se è #000000 è indicato il nero, etc. E' possibile indicare il margine destro e sinistro: vengono espressi solitamente in pollici (inc), anche se sono possibili anche altrae unità di misura. Metodo degli stili in un file di configurazione, con estensione .css Come accennato poc'anzi possiamo inserire queste righe tra i tag del documento oppure salvarle in un file esterno con estensione css. In quest'ultimo caso il tag va eliminato, giacché l'istruzione che impone al navigatore di richiamare il file css contiene in sé la definizione delle proprietà; ecco il codice da includere all'interno del tag head: L'utilità di questo metodo di lavoro è facilmente intuibile, dato che basta definire gli stili una volta per tutti in un solo file per poi richiamarli all'occorrenza in qualsiasi pagina. Una volta create le classi per esempio: possiamo assegnarne le proprietà a qualsiasi elemento del nostro documento avvalendoci dell'attributo CLASS

Systems Comunicazioni

L'attributo CLASS assegna dunque ad un elemento html uno stile già impostato, a differenza dell'attributo STYLE per il quale dobbiamo specificare di volta in volta i parametri; nell'esempio che avete visto il testo "Systems Comunicazioni" apparirà in rosso e i caratteri avranno la dimensione di 12 punti. TIPI DI CARATTERI Occorre conosce almeno le seguenti cose: 1. font-family, la famiglia generale dei font: ad esempio san serif, a cui appartengono: arial, helvetica. E' buona norma indicare sia il tipo di font desiderato, sia la famiglia; in tal modo se sul client non è disponibile il font richiesto esisterà però la famiglia del font. 2. font-size, la dimensione in punti del font: ad esempio 12pt; 3. font-style, lo stile: normal, etc. 4. line-height, la distanza tra le righe scritte espresse in punti; 5. text-align, l'allineamento del testo:right, left, center; 6. text-indent, l'indentazione del testo espresso in pollici. Nell'esempio in basso vediamo come costruire le classi .verdegigante e .rossopiccolo. Tradotta in una pagina html la classe .rossopiccolo genere un testo di colore rosso. Come potete notare, ogni classe viene definita anteponendo al suo nome un punto [.], mentre i parametri ad essa relativi vanno invece racchiusi tra parentesi graffe. Grazie agli stili, però, è anche possibile ridefinire tag html già esistenti: In tal modo il tag , che normalmente assolve a ben altre funzioni, renderà il testo al quale è associato di colore verde e grandezza 24. E' bene comunque tenere presente che nei navigatori meno recenti, non essendovi il supporto dei css sarà impossibile ridefinire . Il DHTML porta anche delle innovazioni, rappresentate proprio dai fogli di stile (style). Il foglio di stile consente di avere un maggior controllo sulla pagina creata. Vediamo qualche esempio. Prova di DHTML

Introduzione al DHTML

Le parti da osservare sono: 1) dove vengono definiti gli stili che si vogliono usare 2) dove in JAVASCRIPT viene definita la funzione changeHead() 3) la definizione dell'id="H1_1" Il file consente che ogni volta si passa sopra al titolo H1 viene aggiunta lasottolineatura e levato il corsivo; mentre ogni volta il mouse lascia il titolo esso torna all'aspetto di partenza. Tutte queste azioni avvengono senzanessuna ulteriore comunicazione tra browser e server, ma solo in locale dove èarrivato l'HTML contenente la parte JavaScript. POSIZIONAMENTO ASSOLUTO I css hanno alcune proprietà che consentono di abilitare il "posizionamento assoluto" degli elementi html che permette agli oggetti di apparire sullo schermo in precise aree definite da coordinate x, y. Non solo gli elementi possono essere posizionati in orizzontale e verticale, ma è possibile ottenere degli interessanti effetti sovrapponendo questi oggetti sul piano verticale sfruttando l'attributo z-index, che rappresenta una sorta di terza dimensione. Prima di andare oltre, però, diamo un'occhiata alla seguente tabella nella quale abbiamo riassunto le regole di posizionamento degli elementi tramite i css: Proprietà Valori possibili Descrizione Position Absolute | relative | static Indica in che modo gli elementi vengono posizionati nella pagina Left | auto La distanza dal margine sinistro della pagina Top | auto La distanza dal margine superiore della pagina Width | auto L'altezza del box (n.b. se non viene impostato alcun valore il layer si adatta automaticamente al contenuto dell'elemento) Height | auto L'altezza del box (n.b. se non viene impostato alcun valore il layer si adatta automaticamente al contenuto dell'elemento) Clip | auto Il box che definisce l'area visibile di un elemento (default rect, rettangolo) Overflow auto | scroll | visible | hidden Gestisce le modalità di visualizzazione di un elemento nel caso in cui la sua lunghezza non rientri nelle coordinate di spessore e di altezza assegnategli: auto (inserisce lo scroll solo quando il contenuto supera le dimensioni) scroll (inserisce lo scroll di pagina in qualunque caso) visible (visualizza il contenuto per intero) hidden (solo i contenuti che rientrano nel layer) Z-index Definisce l'ordine nel quale verrà visualizzato un elemento (l'elemento col valore più in alto sarà in primo piano) Visibility visible | hidden Indica la condizione di visibilità dell'elemento, rispettivamente visibile o nascosto Va comunque sempre ricordato che Navigator supporta esclusivamente le proprietà position, left, top, visibility, e z-index, mentre Internet Explorer le supporta tutte. Vediamo ora come creare un testo posizionato in maniera assoluta:

Vi presento Giulia.

Creata la class "giulia", abbiamo definito il suo posizionamento assoluto grazie alla proprietà "position", alla quale è stato assegnato il parametro "absolute" (position:absolute). Le coordinate x e y vengono espresse, nella sintassi css, con i riferimenti "left" (sinistro) e "top" (alto) ai quali seguono dei valori in pixel. Con x=0 avremmo dunque il nostro oggetto attaccato al bordo sinistro della pagina (provate a ridimensionare la finestra e noterete che non cambierà posizione), mentre con y=0 lo ritroverete in alto. Naturalmente, avendo la pagina un layout pressoché infinito, dato che una volta superato il bordo inferiore appaiono delle barre di scorrimento che possono scorrere a piacere, posizionare i nostri oggetti lungo coordinate che vanno da x, y uguale a 0 fino a infinito. Nell'esempio il testo applicato alla classe "giulia" è posizionato ad una distanza di 100 pixel dalla parte superiore della pagina (top: 100 px) e a 50 pixel dal lato sinistro (left: 50 px). Abbiamo introdotto, come avrete notato, due nuove ed importanti proprietà: "visibility" e "z-index". La prima specifica se un elemento debba essere visibile (visible) o meno (hidden), mentre la seconda controlla il cosiddetto "layering" di un elemento e cioè, nel caso in cui due oggetti dovessero venire a sovrapporsi, quale di questi debba essere posto in primo piano: l'elemento con il valore di "z-index" più alto verrà considerato in cima all'ipotetica pila. STILI DINAMICI - EVENTI Le pagine dinamiche assumono dei comportamenti, behaviors; utilizzando il dom, linguaggi come javascript o vbscript possono accedere ad ogni proprietà di un oggetto, rendendolo "sensibile" alle azioni degli utenti. Un esempio classico sono le famose istruzioni javascript "onMouseOver" e "onClick" utili per creare bottoni e menu che si animano al passaggio del mouse o al clic di un sui tasto. I behaviors consentono però una maggiore libertà: assegnando dei ben definiti "comportamenti" alle classi di stile impostate precedentemente, possiamo far sì che il nostro testo possa allargarsi, evidenziarsi, cambiare colore o addirittura carattere, spostarsi in alto alla pagina o gironzolare lungo tutto il foglio elettronico in virtù di un evento da noi definito. Per essere più precisi, dobbiamo dire che solo il navigatore di Microsoft permette di accedere alle proprietà dei css, mentre dobbiamo ricordare che gli script di Netscape consentono unicamente di modificare le proprietà relative al posizionamento assoluto degli oggetti. L'esempio successivo renderà un po' più chiare le cose e ci mostrerà come accedere alle proprietà di stile degli elementi html attraverso il dom

Vi presento Giulia

Il nuovo attributo ID, aggiunto al tag DIV, equivale all'attributo NAME, ma svolge una funzione esclusiva e cioè presentare l'elemento html, cui dobbiamo accedere, al dom, che in questo caso viene ammesso a gestirne le proprietà. In Netscape possiamo accedere alle proprietà di "giuliaCiarcia" utilizzando la seguente riga: document.giulietta. + proprietaStile; in cui "document" è l'oggetto che rappresenta il documento e giuliaCiarcia è l'elemento html che abbiamo definito col tag ID. "proprietaStile" ci permette di definire le nuove proprietà di stile e va sostituito con l'attributo corrispondente al tipo di formattazione che si vuole assegnare: fontSize ad esempio per la grandezza (misurata in punti che corrispondono ad 1/72 di pollice), o color per il colore (assegnabile con i nomi dei colori in inglese o con un valore esadecimale). Per accedere allo stesso elemento con Explorer la sintassi è la seguente: document.all.+ giulietta.style.+ proprietaStile; Notiamo che sono presenti due oggetti in più rispetto all'esempio precedente: l'oggetto "all", prerogativa del dom di Explorer che consente l'accesso a TUTTI gli elementi della pagina, e l'oggetto "style" che, come abbiamo visto prima, permette di accedere ai css. Vediamo adesso un esempio pratico di come potere accedere, con Explorer, alle proprietà degli stili di un elemento html e controllarle. Stili dinamici

Se mi passi di sopra, cambio colore!!!
Se clicchi divento più grande.
Se clicchi due volte cambio ancora colore!

Nell'esempio, all'elemento incluso nel tag

, etichettato con ID "testo" e allineato al centro (align= "center"), viene associata la classe "testoGiallo" (class="testoGiallo"). La riga document.all.testo. + className = "testoBlu", assegnata all'evento ONMOUSEOVER, che gestisce il passaggio del mouse sull'oggetto, causerà un cambio di stile dell'elemento nel momento in cui il puntatore vi passerà sopra. Difatti, sappiamo già che "document.all" riguarda il dom di Explorer e la sua possibilità di accedere a tutti gli elementi della pagina; "testo" altro non è se non l'ID che abbiamo assegnato all'elemento stesso, mentre className è il parametro che ci permette di modificare o assegnare la classe di stile che viene racchiusa tra i due apici ('testoBlu'). Infine, il tutto termina con un [;] ed è racchiusa da virgolette. Le funzioni successive ONCLICK, ONDBLCLICK e ONMOUSEOUT definiscono rispettivamente gli eventi successivi al clic, al doppio clic e all'allontanamento del mouse. Riguardo la sintassi dell'evento ONCLICK e ONMOUSEOUT troviamo le voci "fontSize" e "color"; tali proprietà consentono al navigatore di modificare lo stile relativo rispettivamente alla grandezza e al colore del carattere (notate che, in quanto numerico, il valore assegnato al parametro fontSize non va racchiuso fra apici). All'apertura del documento il testo apparirà di colore giallo con una formattazione di default, al passaggio del mouse diventerà blu (come specifica la classe "testoBlu"), al suo allontanarsi assumerà un colore verde , ad un clic si ingrandirà e ad un doppio clic, infine, cambierà ancora colore. Gli eventi load e unload Tali eventi interessano il BODY; un esempio è il seguente:

Pagina di Aladdin's Lamp Un esempio utile con unload potrebbe essere quando l'utente abbandona la pagina senza fare il submit dei dati di una form.

POSIZIONAMENTO DINAMICO Controllare la posizione assoluta di un elemento è un'operazione analoga a quella già descritta in relazione agli stili dinamici ma in più offre la possibilità di ottenere effetti di spostamento graduale del testo e animazioni di qualsiasi genere. Per fare un esempio, pensiamo di voler muovere l'elemento "giuliaCiarcia", cui abbiamo assegnato la classe "giulia" (vedi il primo esempio pratico di definizione dello stile giulia), di 450 pixel a destra. Basterà cambiare le coordinate che gli abbiamo assegnato al momento della definizione degli stili utilizzando questa sintassi:

Ciao a tutti

Ecco quindi che dai 50 pixel per la proprietà "left" della classe "giulia", tali proprietà passeranno bruscamente a 500 causando lo spostamento immediato dell'oggetto (in questo caso un semplice testo) al passaggio del mouse. Naturalmente, con qualche riga di codice in più è possibile creare un effetto di spostamento graduale, argomento che meglio approfondiremo. TABELLE Vedremo ora come sbarazzarci dei frame nella costruzione di una tabella, utilizzando al loro posto una barra di scorrimento; diciamo subito, però, che il codice funzionerà solo con Internet Explorer, mentre con gli altri navigatori la tabella apparirà nella forma consueta. Internet Explorer, come già sappiamo, supporta le proprietà di "overflow" dei css, ovvero i controlli relativi allo scorrimento dei contenuti all'interno di un oggetto. Il loro uso, però, è limitato esclusivamente ai tag DIV o SPAN, che hanno proprietà di spessore e altezza definite e che in tal modo possono forzare lo scorrimento di quei contenuti che occupino più spazio di quello messo a disposizione della tabella. Iniziamo con il definite lo spessore di ogni colonna della tabella, utilizzando l'elemento dell'html 4.0; ripetiamo poi lo stesso valore di spessore per le colonne della riga, in modo che tutti i navigatori, anche quelli privi del supporto per l'html possano vedere la tabella. Il codice necessario a questa operazione è, in pratica, il seguente: Adesso creiamo un'ulteriore tabella, che annideremo utilizzando il tag DIV, in modo che possa gestire l'overflow. Al valore complessivo della somma dei pixel di ogni singola colonna (450), dovremo ora aggiungere altri 30 pixel, per lasciare posto alla barra di scorrimento. Ecco quindi, il perché del valore 480 impostato come spessore del DIV:

Il parametro overflow impostato su auto permetterà al navigatore di visualizzare la barra di scorrimento solo se i contenuti della tabella eccedono dalla sua dimensione; in caso contrario non verrà mostrato nulla.

Nicola Rossi

HomePage

[email protected]

JAVASCRIPT STYLE SHEETS Il JSSS (JavaScript Style Sheets) non è uno standard del W3C. E' stato introdotto dalla Netscape con JavaScript e si riferisce sempre ai fogli di stile. Le differenze tra JSSS e CSS1 sono minime ed esiste la seguente regola: se, ad esempio, in CSS1 si parla di font-style in JSSS si parla di fontStyle, ovvero sparisce il trattino e la lettera successiva si trasforma in maiuscolo. Il vantaggio di JSSS è che, basandosi su JavaScript, permette facilmente la gestione di eventi e azioni senza l'intervento del server; inoltre JSSS interagisce col browser ottenendo informazioni sul client d'esecuzione. Questo permette all'autore di HTML di avere un maggior controllo sull'esecuzione del suo lavoro sul client. La base di tutto è l'uso comunque di JavaScript. JavaScript è più un linguaggio di programmazione case-sensitive C-like che un linguaggio per le marcature HTML, ma non può esistere al di fuori di una pagina HTML. In ogni caso è un linguaggio di scripting e non va confuso con il linguaggio Java. Essendo un linguaggio di scripting, il codice prodotto è soggetto a visione e personalizzazione da parte dell'utente, per cui va impiegato laddove ciòè utile. JavaScript è nato in un momento di massimo splendore dell'object oriented e fa uso di tale terminologia, che adesso vedremo brevemente. L'OGGETTO L'oggetto di JavaScript fa riferimento ad un oggetto del mondo reale che si rappresenta e possiede delle proprietà (stato) e può fare delle azioni (metodi). Un oggetto si descrive con una funzione JavaScript, che ne definisce le proprietà e le azioni. Un oggetto, in generale, viene prima definito come tipo, poi viene definita una variabile di quel tipo ed istanziata. Per aprire un commento si usa . Ad esempio definiamo l'oggetto casa di colore giallo e poi istanziamolo. LA PROPRIETÀ La proprietà è uno stato dell'oggetto, una caratteristica, un attributo che assume un valore. Ad esempio la casa è gialla, la porta è chiusa. La proprietà di un oggetto può far riferimento a qualunque tipo di variabile JavaScript. Per accedere alla proprietà si usa il nome dell'oggetto, nell'esempio casa.colore . IL METODO Il metodo è una funzione che agisce su uno stato dell'oggetto. Aggiungiamo, ad esempio, un metodo che cambia lo stato della porta della casa. function apriporta( onOff ) { if( onOff == "on" ) {this.porta_aperta = true;} else {this.porta_aperta = false;} } OGGETTI JSSS Esistono in JSSS tre altri oggetti: tags (per le marcature), classes (per le classi), ids (per gli identificativi). Tags Con tags si può puntare ad una marcatura H1 ad esempio. Si può gerarchicamente puntare a partire da document, cioè: document.tags.nomeMarcatura ma si può anche omettere document. Classes Le classes sono un raffinamento delle marcature, ad esempio la marcatura

.left vista nelle lezioni precedenti. Il puntamento da adottare è document.classes.nomeClasse[.nomeMarcatura]. In DHTML CSS è possibile, difatti, definire una classe stile, ad esempio è possibile definire: P.left {font-family:garamond; font-size:12pt; font-style:normal; line-height:11pt; text-align:left} Per individuare questo stile, si farà riferimento a:

bla bla

o in alternativa document.classes.left Ids L'ids individua il nome dell'id. Ad esempio se si è usato

. È possibile arrivarci con document.ids.Ed. CSS1 IN JSSS Vediamo di tradurre una pagina dallo standardCSS1 in JSSS: non è difficile, usando ciò che abbiamo visto finora, ma abbastanza lungo. Supponiamo il seguente esempio in CSS1 : Prova dei fogli di stile CSS1

etc.... Lo possiamotradurre nel seguente modo in JSSS: Prova dei fogli di stile JSSS