se nella pagina ho porzioni di video che si muovono in modo indipendente allora in quella pagina sono stati usati i frame.

Transcript

1 Brescianet.com Sito di supporto alla didattica 3T - 2 Modulo 3T - 2 Modulo HTML Avanzato Page 1 of 2 Posted: Tue Dec 04, :49 am 4/12/2012: 3T - 2 Modulo se nella pagina ho porzioni di video che si muovono in modo indipendente allora in quella pagina sono stati usati i frame. Se una pagina non aumenta la dimensione del carattere quando uso il menu visualizza->dimensione testo-> molto grande allora nella pagina sono stati usati i foglio di stile <HR align=right width=50% size=10 noshade> Posted: Tue Dec 04, :08 am MAPPAZZE CLICCABILI <IMG SRC="URL dell'immagine (.gif)" USEMAP="#pipopo"> <MAP NAME="pipopo"> <AREA SHAPE="rect" COORDS="X1,Y1,X2,Y2" HREF="URL del collegamento"> <AREA SHAPE="circle" COORDS="Xc,Yc,R" HREF="URL del collegamento"> <AREA SHAPE="poly" COORDS="X1,Y1,X2,Y2,X3,Y3,...,...,Xn,Yn" HREF="URL del collegamento"> </MAP> shape = "Triangle" => NON ESISTE!!!! shape=poly => in sequenza le coordinate dei vertici della figura il browser legge in modo seriale il file per cui le prime direttive vengono caricate e diventano operative. In altre parole i tag shape delle figure in foreground devono essere scritte per prima T 4/12/2012 7/12/2012-3T - 2 Modulo coords cerchio => coordinate CENTRO + RAGGIO OPPURE CENTRO + PUNTO SULLA CIRCONFERENZA shape=default => TUTTO QUELLO CHE NON HO PREVISTO NEI PRECEDENTI SHAPE Posted: Fri Dec 07, :57 am RICORDATEVI CHE I BROWSER FANNO APPARIRE IN MODO DIVERSO LE IMMAGINI POICHè I VALORI DI DEFAULT

2 DELLE DIRETTIVE NON COINCIDONO (VEDASI BORDO NELLE MAPPAZZE E DIRETTIVA DEFAULT) Default non può essere usato poichè non è supportato da ie quindi al posto di <AREA SHAPE=default> userò <AREA SHAPE=rect COORDS=1,1,Nrpixelorizzontali, NrPixelVerticali"> messa in fondo ESEMPIO COMPATIBILE CON TUTTI I BROWSER: <IMG SRC="immagine.gif" USEMAP="#pippo" border=0> <MAP NAME="pippo"> <AREA SHAPE="rect" COORDS="30,39,122,112" HREF=" <AREA SHAPE="circle" COORDS="189,103,34" HREF=" <AREA SHAPE="poly" COORDS="335,39,400,158,281,145" HREF=" <AREA SHAPE="rect" COORDS="1,1,533,203" HREF=" </MAP> ESEMPIO NON COMPATIBILE CON TUTTI I BROWSER (IN IE Appare il bordo e non funzia default): <IMG SRC="immagine.gif" USEMAP="#pippo"> <MAP NAME="pippo"> <AREA SHAPE="rect" COORDS="30,39,122,112" HREF=" <AREA SHAPE="circle" COORDS="189,103,34" HREF=" <AREA SHAPE="poly" COORDS="335,39,400,158,281,145" HREF=" <AREA SHAPE="default" HREF=" </MAP> 4/12/ Q lo shift rende i rettangoli dei quadrati e gli ovali dei cerchi perfetti (in tutti i prg di grafica!)==> mantiene le proporzioni 4/12/ O COLS - ROWS elenco di % => rispetto alla dimensione della finestra <FRAMESET COLS="20%,20%,20%,20%,20%"> ogni frame è 1/5 della finestra <FRAMESET COLS="200,20%,20%,20%,*"> il primo occupa sempre 200 pixel - il 2,3 e 4 il 20% della finestra e l'ultimo la parte della finestra che resta. <FRAMESET COLS="*,*,*"> 3 colonne = <FRAMESET COLS="2*,*,*">

3 la prima è il doppio delle altre ogni frame è 1/5 della finestra tag frame tramite la direttiva SRC indica la pagina da caricare divisioni verticali ed orizzontali contemporanee nei frames: esercizio POTENZIAMENTO 1 1) localizzo le righe di divisione che attraversano l'intera finestra e quindi inizio ad impostare il frameset cols o rows a seconda. metterò TANTI * O MISURE QUANTE SONO LE RIGHE CHE HO IDENTIFICATO <FRAMESET COLS="*,2*"> 2) analizzo I SINGOLI FRAME DELLA DIVISIONE PRECEDENTE. SE NON HANNO RIGHE DI DIVISIONE USO IL Tag frame src=nomefile ALTRIMENTI RIPETO L'IDENTIFICAZIONE DELLE RIGHE CHE ATTRAVERSANO L'INTERO FRAME <FRAMESET COLS="*,2*"> <FRAMESET rows="*,*,*"> <FRAMESET COLS="*,2*"> <FRAMESET rows="*,*,*"> <FRAMESET COLS="*,*"> LA CLASSE CHIEDE DI FARE L'ESERCIZIO 2.4 (3t) 18/12/2012: 3T - 2 Modulo

4 localizzo le righe di divisione che attraversano l'intera finestra e quindi inizio ad impostare il frameset cols o rows a seconda. metterò TANTI * O MISURE QUANTE SONO LE RIGHE CHE HO IDENTIFICATO 3O - 10/12/2012 Ricordarsi: SRC="" ==> frame bianco (vuoto) LA CLASSE CHIEDE DI FARE L'ESERCIZIO 2.4 (3O) I frame sono comodi poichè consentono di raggiungere qualsiasi pagina del sito con pochi click Posted: Tue Dec 18, :00 am 3O - 11/12/2012 I motori di ricerca indicizzano le singole pagine del frameset per cui se io clicco su un link in una pagina di google la pagina richiamata potrebbe non possedere + il contesto gerarchico originale imposto dalla struttura del frame.i link non funzionano + correttamente poichè non ho i frames nella videata del browser. i frame sono usati nelle intranet o nelle applicazioni webapps I frames sono comodi anche perchè la parte grafica comune a tutte le pagine del sito può essere isolata senza doverla inserire in ogni documento del sito (immaginate se così fosse una modifica dovrebbe essere replicata nelle 3000 pagine del sito) NOFRAMES => indica il contenuto che deve essere mostrato se il browser non supporta i frames (browser obsoleti: esempio Ie 3.0) Domanda : come riesce un vecchio browser a riconoscere NOFRAMES? spiegata Se voglio costruire una pagina con 3 frame in realtà devo scrivere 4 files: 1==> definisce la divisione in frame (contiene le direttive frameset, frame) 2,3,4 => il contenuti di ogni singolo frame. La pagina 1 non contiene BODY (se non uso NOFRAME) LA CLASSE CHIEDE DI FARE L'ESERCIZIO 2.4 (3Q) ssi => SERVER SIDE INCLUDES => CONSENTE DI ISOLARE LE PARTI COMUNI DI UNA PAGINA IN UNO SCRIPT SUL SERVER WEB. IN QUESTO MODO DISEGNO AD ESEMPIO UN MENU E LO INSERISCO NELLE 3000 PAGINE DEL SITO. sul BROWSER APPARE UNA SOLA PAGINA NON SUDDIVISA IN FRAME => UTILE PER I MOTORI DI RICERCA riprendere da scrolling

5 a.htm <frameset ROWS="*,2*"> <FRAME SRC="B.HTM"> b.htm <frameset ROWS="*,2*"> <FRAME SRC="c.HTM"> C.HTM <frameset ROWS="*,2*"> OPPURE <frameset ROWS="*,2*"> <frameset ROWS="*,2*"> <frameset ROWS="*,2*"> --- 3O 15/12 /2012 SCROLLING => valori YES, NO, AUTO

6 NORESIZE => spiegato BORDER = nr pixel BORDER=OFF => equivale a border=0 svolgere eser 2.3 per martedì (3Q) --- 3Q 15/12 /2012 RIPRENDERE DA BORDERCOLOR Occulto i bordi FRAMEBORDER=NO BORDER =0 => non riduce a zero lo spessore della divisione ma lo riduce al minimo possibile quando le linee continue che attraversano il frame sono sia orizzontali che verticali <frameset cols="*,*,*"> <frameset rows="*,*,*"> <frameset rows="*,*,*"> <frameset rows="*,*,*"> <frameset rows="*,*,*"> <frameset cols="*,*,*"> <frameset cols="*,*,*"> <frameset cols="*,*,*"> alcuni browser, quando le linee continue che attraversano il frame sono sia orizzontali che verticali supportano questa sintassi <frameset rows="*,*,*" cols="*,*,*"> un link in un frame richiamerà la pagina indicata in href nel frame stesso. NAME => direttiva per dare un nome ad un frame - è case sensitive. Inserendo in <A> la direttiva TARGET posso indicare il frame di destinazione del link svolgere amabilmente l'esercizio 2.3 (3T) 21/12/2012-3T - 2 Modulo suggerimento eser 2.3 Posted: Fri Dec 21, :59 am File Eisenhower.htm <HTML> <HEAD> <TITLE>Pagina X</TITLE> </HEAD> <BODY BGCOLOR=GREEN> <A HREF=eisenhower.htm border=0 target=giallo><img SRC="

7 height=100% width=100%></a> </BODY> </HTML> Pagina Eser2-3.htm <FRAME SRC="x.htm" noresize> <frameset ROWS="*,2*" BORDERCOLOR="#FFOOOO"> <FRAME SRC="y.htm" name=giallo> <FRAME SRC="z.htm" name=z> TARGET MAGICI <A HREF=y.HTM>Link senza TARGET</A> =>usa il frame che ospita il link <A HREF=y.HTM TARGET=_self>Link con _self</a> ==> come il precedente <A HREF=y.HTM TARGET=_top>Link con _top</a> ==> usa la finestra intera del browser come destinazione <A HREF=y.HTM TARGET=_blank>Link con _blank</a> ==> usa sempre una nuova finestra come destinazione <A HREF=y.HTM TARGET=_parent>Link con _parent</a> ==> usa il frameset genitore. Se non ci sono richiami a pagine che contengono frameset allora _parent coincide con _top ESEMPIO: index.htm <FRAME SRC="menu.htm"> <frameset ROWS="*,2*"> <FRAME SRC="y.htm" name=alto> <FRAME SRC="b.htm" name=basso> B.htm <html> <FRAME SRC="menu.HTM"> </html> MENU.HTM <HTML> <HEAD>

8 <TITLE>Pagina X</TITLE> </HEAD> <BODY BGCOLOR=silver> <H1>MENU<br> <A HREF=y.HTM>Link senza TARGET</A><br> <A HREF=y.HTM TARGET=_self>Link con _self</a><br> <A HREF=y.HTM TARGET=_top>Link con _top</a><br> <A HREF=y.HTM TARGET=_blank>Link con _blank</a><br> <A HREF=y.HTM TARGET=_parent>Link con _parent</a><br> </h1> </BODY> </HTML> Y.HTM <HTML> <HEAD> <TITLE>Pagina Y</TITLE> </HEAD> <BODY BGCOLOR=Yellow> Sono la pagina Y </BODY> </HTML> /12/2012-3Q <frameset cols="*,2*" FRAMEBORDER=NO> <FRAME SRC="menu.htm" noresize name=menu> <frameset ROWS="*,*,*"> <FRAME SRC="menu.HTM"> <FRAME SRC="y.htm" name=alto> <FRAME SRC="b.htm" name=basso> /12/2012-3O <A HREF=x.HTM TARGET=_TOP>Link con _TOP (non è un link magico)</a><br> <A HREF=Y.HTM TARGET=_TOP>Link con _TOP (non è un link magico)</a><br> se uso un target non magico il comportamento è: - se non esiste un frame con quel nome apre una nuova finestra e tutti i link con quel target andranno a popolare quel frame - se esiste un frame con quel nome inserisce in tale frame il link indicato in href Fare forms => consentono l'invio di dati ad un server che tramite degli script li elabora ed invia

9 delle risposte correlate la pagina indicata IN action è di tipo dinamico (asp o php) per vedere come funzionano vedi: -index.htm <form action=y.htm> cognome: <input type=text name=cognome value="dammi il cognome" size=100 maxlength=7><br> provincia: <input type=text value="brescia"><br> <input type=submit value="cliccheggia Qui per mandarmi i dati"> </form> soluzione 2.3 pagina PRINCIPALE <frameset cols="*,*,*,*"> <FRAME SRC=y.htm name=risposta> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAMESET ROWS="*,*,*"> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> <FRAme src=clintonf.htm MARGINWIDTH=0 MARGINHEIGHT=0 scrolling=no> pagine DI UNO DEI PRESIDENTI Pagina di risposta <html> <body> <h1>sono Bill Clinton</h1> </BODY> </HTML> pagina immagine <html> <body> <a href=clinton.htm TARGET=RISPOSTA> <img BORDER=0

10 src= HEIGHT=100% WIDTH=100%> </a> </BODY> </HTML> 8/1/2013 3T - 2 Modulo riprendere da type=password e dalle direttive di form riprendere con maxlength e size (3T già illustrato) Posted: Tue Jan 08, :57 am ACTION=Leggo.asp METHOD => GET, POST POST => non visualizza nel browser i parametri => nell'url vedo leggo.asp e basta GET => visualizza nel browser i parametri => nell'url vedo leggo.asp?cognome=sechi&provincia=bs <form action=y.htm method=get> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <input type=submit value="cliccheggia qui per inviare i dati"> </form> Q 22/12/2012 NAME => direttiva case sensitive => serve per identificare i controlli mediante linguaggio di prg (esempio javascript sul client - asp/php sul server) <form action=y.htm method=get> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <input type=cancel value="annulla input"> </form> GETPOST) la pagina che viene richiamata non presenta la valorizzazione dei parametri y.htm?cognome=sechi&nome=marco&prov=trento dove: ACTION => pagina da caricare=> solitamente è una pagina dinamica (con estensione <> da.htm)? => iniziano gli argomenti del form & separa le singole valorizzazioni del form <form action=y.htm method=post> Cognome: <input type=text name=cognome><br> Provincia: <input type=text name=provincia><br> <input type=reset value="annulla input"> </form>

11 in questo caso (METHOD=POST) la pagina che viene richiamata non presenta la valorizzazione dei parametri ALTRI BOTTONI: resetto i valori al valore iniziale annullando qualsiasi input <Input type=reset value="annulla"> bottone che richiama uno script (programmino) scritto in JS <input type=button onclick='javascript:alert("ciao a tutti")' value="saluta"> BUTTON è il tipo di bottone + diffuso poichè posso testare l'input prima di inviare i dati al server CONTROLLO DELL'INPUT SUL SERVER (tramite asp o php) ==> Se il controllo dell'input è eseguito dal server i dati devono essere inviati, controllati dal server e poi, se ho un errore, il server deve rispondere con una segnalazione ==> perdita di tempo CONTROLLO DELL'INPUT SUL CLIENT (Tramite JS) => il browser controlla immediatamente la correttezza dell'input dando l'impressione di essere molto veloce poichè in internet non avviene alcun transito di dati type=password => uguale a text => non mostra i dati digitati e non consente il "Copia" tutte le direttive di text sono presenti anche in password: ESEMPIO: <form action=y.htm METHOD=POST NAME=DATI> cognome: <input type=text name=cognome VALUE="ROSSI" size=50 maxlength=6><br> nome: <input type=text name=nome><br> provincia: <input type=text name=prov value="brescia"><br> Password: <INPUT TYPE=PASSWORD NAME="Passwd"> <br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> <Input type=reset value="annulla"> <input type=button onclick='javascript:alert("ciao a tutti")' value="saluta"> <input type=button onclick='javascript:alert("ciao a tutti " + document.dati.cognome.value)' value="saluta 2"> </form> RADIO BUTTON: I gruppi di opzioni mutuamente esclusive sono determinate dalla proprietà name. Controlli con lo stesso nome appartengono allo stesso gruppo Nei radio value contiene il valore che verrà inviato al server (se nessun radio è selezionato viene inviata la stringa vuota) ESEMPIO <form action=y.htm METHOD=GET NAME=DATI> cognome: <input type=text name=cognome VALUE="ROSSI" size=50 maxlength=6><br>

12 nome: <input type=text name=nome><br> provincia: <input type=text name=prov value="brescia"><br> NAZIONALITA':<input type=radio name=nazione VALUE=ANGLOSASSONE> UK <input type=radio name=nazione VALUE=FRANCESE>FR <input type=radio name=nazione CHECKED VALUE=ITALICO>IT<br> SESSO:<input type=radio name=sesso checked VALUE=M> Maschio <input type=radio name=sesso VALUE=F>Femmina<br> Password: <INPUT TYPE=PASSWORD NAME="Passwd"> <br> <Input type=submit value="cliccheggia qui per inviare i tuoi dati"> <Input type=reset value="annulla"> </form> mandando il submit sulla barra degli indirizzi appare: (si noti la valorizzazione di nazione e sesso) file:///c:/users/sechi.m/desktop/y.htm? cognome=rossi&nome=&prov=brescia&nazione=anglosassone&sesso=m&passwd= 11/1/2013-3T - 2 Modulo I radiobutton sono usati se voglio fornire un meccanismo con una sola possibiltà di scelta. Se nei checkbox metto lo stesso nome funzionano come i radiobutton. Questo controllo si usa quando ho delle scelte multiple Lingue parlate: ita<input name=lingua1 type=checkbox checked value=it> fra<input name=lingua2 type=checkbox value=fr> ing<input name=lingua3 type=checkbox checked value=uk><br> LISTBOX o COMBOBOX sono usati per scelte esclusive. La direttiva value manda il codice della scelta al server che lo registra nel proprio Database size => MOSTRA IL NR DI RIGHE VISIBILI (SE >1 => LISTBOX) Nato a:<select size=3> <OPTION value=an>ancona <option selected value=bs>brescia <OPTION value=mi>milano </SELECT> SELECTED ==> SCELTA PREDEFINITA 3Q 8/1/ TEXTAREA => ricordarsi cosa succede con wrap=off - Ricordarsi che size, value e maxlength non esistono nelle textarea HARD e SOFT come valori di WRAP sono identici sul client 3O 8/1/ Posted: Fri Jan 11, :00 am <TEXTAREA NAME="COMMENTS" ROWS=6 COLS=50>

13 Ciao sono io </TEXTAREA> i controlli type=hidden non risultano visibili => usati sul form per memorizzare dati transitori utili al programmatore (ad esempio il nome dell'utente che si è collegato) per personalizzare la pagina rendendola + famigliare unica direttiva utile di hiodden è value formato => modalità di registrazione di un file solo quei prg che conoscono quel formato sono in grado di leggere il contenuto di files che usano tale formato. formati grafici su internet devono essere leggibili da qualsiasi dispositivo (portabili). formati proprietari => modalità di registrazione coperta da brevetti e quindi usabile solo con alcuni tipi di applicazione. formato bmp (bitmap) nxm pixel con colori che dsipendono dalla profondità di colore 8bit => posso esprimere 256 colori rgb =>256^3 =2^24 se mantengo la stessa immagine ma aumento il nr di colori => la dimensione in byte aumenta se salvo in un altro formato <> da bmp ottengo una dimensione del file + piccola. I formati grafici di internet hanno come primo obiettivo la riduzione delle dimensioni per ridurre il traffico di rete. 15/1/2013-3T - 2 Modulo bitmap => formato + loffe => non implica alcun risparmio in termini di dimensioni => la qualità dell'immagine salvata resta inaltwerata (se non diminuisco il nr di colori!). Non è usata in internet Posted: Tue Jan 15, :01 am GIF => adatta x immagini al tratto. (fumetti) Il GIF diminuisce il nr di bit necessari per ogni pixel alle reali necessità => se ho un'immagine con 8 colori il gif userà una palette a 3 bit - usabile se la palette è inferiore a 256 colori JPG => adatta x immagini fotografiche TIFF =>

14 --- 3Q - 12/1/ *.bmp => estensione file immagine di tipo bitmap senza alcuna compressione. La qualità dell'immagine è massima (chiaramente in relazione ai pixel usati) GIF => palette con al massimo 256 colori - oltre devo usare il JPG e PNG JPG => comprime sfruttando incapacità umane di rilevare particolari variazioni di colore (stesso metodo usato anche dall'mp3 relativamente alle frequenze audio) la compressione dell'immagine avviene: - sostituzione di un gruppo di pixel con il colore medio (differenza non rilevabile da occhio umano) - i gruppi di pixel con un determinato colore vengono registrati mentre gli altri no (esempio immagine in bn) grafica vettoriale: l'immagine non è basata su punti ma su equazioni matematiche. vantaggi => se ingrandisco la qualità rimane sempre ottima. dimensione file estremamente piccola: contiene l'equazione e le dimensioni google maps usa questo tipo di formato. Non è adatta alle foto poichè le variazioni di colore sono troppo repentine per essere descritte con equazioni semplici. Prg di grafica vettoriale (vari cad - freehand) formati di grafica vettoriale dxf grafica pittorica o bitmap => photoshop, mspaint GIF (vantaggi/svantaggi) - uso trasparenza - uso animazione colori massimi - interlacciato (spiegato) fare esercizio 2.6 e /1/2013-3T - 2 Modulo GIF (vantaggi/svantaggi) - uso trasparenza - uso animazione colori massimi = adatto ad immagini al tratto - interlacciato (spiegato) - non distruttiva (qualità identica all'originale bmp) Posted: Fri Jan 18, :02 am jpg => formato di compressione distruttivo jpg => usa lo stesso meccanismo di compressione di winzip - winrar, stufflit etc per cui non è necessario comprimerli quando li invio via posta Q 15/1/2013 Nell'interlacciato l'immagine diventa sempre + nitida con il passare del tempo. Quando non è interlacciata l'immagine nel browser si forma dall'alto verso il basso.

15 Solo al termine della trasmissione capisco il contenuto (esempio tramonto sul mare). + salvataggi di una immagine jpg determina un forte peggioramento della qualità senza grandi diminuzioni delle dimensioni del file. Conviene quindi tenere sempre il file bmp originale O -15/1/ tiff => questo formato comprime ma non è distruttivo. non alta come quella del JPG il livello di compressione. nato per gestire le trasmissioni via fax. Tiff usato in stampa poichè la qulità è massima con la risoluzione utilizzata. Molte Macchine foto registrano in tiff. I CSS consentono di definire un aspetto della pagina indipendente dal browser css la { => altrgr+shift+[ la } => altrgr+shift+] dimensioni misurate con: pt => punti tipografici (1/72 pollice => unità indipendente dal monitor usato) px => pixel (la dimensione è legata alla grandezza del singolo pixel MODALITA' IN LINEA: sul tag inserisco la direttiva style (modalità usata quando si tratta di uno stile estemporaneo) <FONT style="font-family:verdana;font-size:24pt;color:green">testo comune</font> MODALITA' INCLUSA: Ho uno stile che si ripete all'interno della stessa pagina <body> <STYLE TYPE=text/css> P { font-size:15px; font-family:verdana; color:green } FONT { font-size:20px; font-family:arial; color:black } </STYLE> per distinguere lo stile per lo stesso tag uso le pseudoclassi: esempio <STYLE TYPE=text/css> P.Rosso { font-size:32pt; font-family:verdana; color:red } P.Argento { font-size:32px; font-family:verdana; color:silver } </STYLE> nel file scrivo: <p class=argento>ciao</p> <p class=rosso>ciao</p> FOGLI DI STILE ESTERNI: Usati per uniformare l'aspetto grafico di un sito. Tutte le ipotetiche 3000 pagine del mio sito hanno l'inclusione al file layout.css. Se modifico le impostazioni nel file css tutte le 3000 pagine cambieranno di aspetto.

16 Le pagine che usano il css esterno devono contenere l'istruzioene: <LINK REL="stylesheet" TYPE="text/css" HREF="layout.css"> FILE LAYOUT.CSS (non ha il tag style al suo interno) P.verde { font-size:32pt; font-family:verdana; color:green } P.giallo { font-size:32px; font-family:verdana; color:yellow } BODY { font-size:48px} Imparare i CSS indicati in rosso (tranne display, Visibility Imparare bene i css sui link A:hover, A:link,A:visited CSS BACKGROUNDesempio body { background-image: url( Regnew.gif) ; background-repeat:repeat-y} 22/1/2013-3T - 2 Modulo z-index: => i numeri + bassi sono in foreground Posted: Tue Jan 22, :02 am /1/2013-3T ---- riprendere da z-index A:hover => attivato quando vado sopra il link mostrata direttiva background A:hover { text-decoration: none; background:red } png => unisce vantaggi del GIF e del JPG spiegato cursor con i css posso definire dei salti pagina che l'html non prevede. Domande CSS =>tipo inlinea, inclusi ed esterni abbinati a direttive relative a: font, sfondo e link Esempio CSS che mostri come sfondo un'immagine ripetuta orizzontalmente - colore di sfondo verde - cuursore una mano - tale css deve essere esterno - css conclusi /1/2013-3Q le { e } ==> alt + digitare sul tastierino il codice 123 o 125 cursor: hand => comodo per indicare un'area sensibile al click - esempio: <img src= onclick=alert("ciao") style="cursor:hand"> direttive page-break non son da farsi con i metatags si istruiscono i motori di ricerca consentendo una corretta classificazione del documento (ad esempio un documento che parla scuola ma che non contiene tale parola non viene

17 correttamente classificato da uno spider (motore di ricerca)) <meta http-equiv="content-language" content="it"> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> I metatags consentono di indicare il prg editor html utilizzato <meta name="generator" content="microsoft FrontPage 5.0"> <meta name="progid" content="frontpage.editor.document"> con questo meta indico le parole chiave che classificano il mio documento. Gli spider di solito ignorano questo meta (a meno che non si sia cacciata vile pecunia) proprio per l'uso non sempre corretto da parte dei web master- <meta name="keywords" content="parola1, parola2, parola3"> robot => sinonimo dio motore di ricerca. indicizzare una pagina => costruire una struttura dati che consenta una ricerca veloce. Tutte le pagine in un motore di ricerca saranno indicizzate. noindex => istruisco il motore in modo che ignori la mia pagina (non sarà possibile ricercarla!) <meta name="robots" content="valori"> Istruisco il motore in modo che indicizzi automaticamente la pagina ogni 20 gg (si pensi all'home page di un sito di un quotidiano) <meta name="revisit-after" content="20 days"> guardiamo la pagina di ricerca di google (avanzata) seguente: 80&bih=817 se seleziono la lingua dei documenti il motore utilizzarà la classificazione indicata nel seguente meta: <meta name="language" content="lingua1,lingua2"> Il motore di ricerca alla scadenza reindicizza tale pagina <meta name="expires" content="mon, 27 Dec :00:00 GMT"> Posso con i meta istruire il browser in modo che non salvi in cache i documenti. In questo modo sono sicuro che l'utente consulti sempre l'ultima versione disponibile sul sito <META NAME="Pragma" content="no-cache"> (NetScape) <META HTTP-EQUIV="expires" CONTENT="0"> (Internet Explorer) ricarico la pagina ogni tot secondi (o reindirizzo su un'altra <meta http-equiv="refresh" content="1; url=pioppo.htm"> Powered by phpbb Forum Software phpbb Group All times are UTC Page 1 of 2

18 Brescianet.com Sito di supporto alla didattica 3T - 2 Modulo 25/1/2013 : 3T - 2 Modulo cookies => sono file registrati sul client che consentono di creare DEi profili utente. Con i meta posso dichiarare una scadenza del cookies pubblicare esercitazioni entro le del giorno prima della giornata della spintaneità! Sabato 2/2/2013 iniziano gli orali (5 spintanei al giorno) {3Q e 3T } Sabato 2/2/2013 scritto 2 modulo {3O } dopo tale data interrogazioni ad oltranza di EXCEL (4 per gg) non fare eser 10 e 11 del modulo 2 Page 2 of 2 Posted: Fri Jan 25, :23 am 3Q - 22/1/2013 ricordare esempio relativo all'uso di refresh nei metatag Powered by phpbb Forum Software phpbb Group All times are UTC Page 2 of 2