AREA TERZE - Appunti MODULO 1

Transcript

1 Brescianet.com Sito didattico - Prof. Sechi Marco AREA TERZE - Appunti MODULO 1 Re: AREA TERZE - Appunti MODULO 1 by e01692 spiegato come salvare il documento offline (MHT) Page 1 of 1 Posted: Tue Jan 31, :50 pm Percorso di rete \\ \Sechi Non Buttare \2Modulo il file si chiama 3area.txt + vari file bmp BROWSER => chrome - firefox, IE, opera safari browser => prg capace di interpretare file testuali contenenti tag HTML + codice di programmazione JavaScript JavaSCRIPT: linguaggio di prg per pilotare il browser e costruire vere e proprie applicazioni. FILE DI TESTO => file contenente una sequenza di char privi di caratterizzazioni tipografiche. Un file di word non è un file testuale - notepad produce file testuali => detti editor un file di testo => file portabile poichè leggibile da qualsiasi prg o dispositivo TAG HTML => comandi testuali che dicono al browser come rappresentare la pagina web <comando>ciao</comando> ==> alla parola ciao applico le caratteristiche grafiche indicate dal comando <pippo> INDIRIZZI INTERNET => detti URL partea.htm http: => metodo di ricezione del documento // => nome del server /appunti/web_latoclient/htmlcompleto/htmlpartea.htm => nome del documento che voglio visualizzare 07/2/ AREA TERZE - Appunti MODULO 1 by e01692 pagine dinamiche => cambiano in continuazione a seconda delle richieste. Occorre usare un linguaggio di programmazione lato server (sulla macchina internet) (esempio ASP e PHP => questi linguaggi vengono letti ed eseguiti sui server internet) - Javascript è invece lato client (letto ed eseguito dal browser) F5 => tasto di rivisualizzazione (ricarica la pagina WEB) Posted: Tue Feb 07, :05 pm

2 => apertura di una pagina HTML <HEAD> => sezionecontente il titolo del documento ed una serie di info che classificano il documento (usato dai motori di ricerca ricordarsi di salvare con l'estensione HTM o HTML affinchè sia IE ad aprire il documento spiegato il motivo per cui comandi sconosciuti vengono ignorati dai browser. (compatibilità in avanti) cosa succede se scrivo <PIPPO>Ciao</PIPPO>? <BODY BGCOLOR="#FFFFFF"> tag con direttiva => una direttiva modifica il comportamento di default (predefinito) di un tag Scala RGB => metodo di rappresentazione universale del colore - Utilizza per rappresentare un colore le qta di colore ROSSO, VERDE e BLU che determinano il colore rappresentato. Per ogni colore le quantità unitarie ammesse vanno da 0 a 255 <BODY background=pallino rosso.gif> le direttive hanno un nome (esempio bgcolor) e un valore. se il valore contiene uno spazio è necessario limitare il valore con 2 ". <BODY background="pallino rosso.gif"> mostrato come risolvere l'effetto a piastrella della direttiva BACKGROUND del tag BODY I prg che permettono di creare dei documenti HTML si dicono Editor di pagine WEB (esempio frontpage) Il font è il carattere utilizzato. Il carattere dipende dal sistema operativo (WINDOWS) che utilizzo abcdrefds I font hanno caratteri che occupano orizzontalmente spazi diversi (utile per l'allineamento giustificato). L'unico font che non rispetta questa regola è il courier che viene detto font monospaziato. Il tag TT viene generalmente usato per allineare del testo in modo semplice ESEMPI VISTI IN CLASSI (esclusa direttiva color) <HEAD><TITLE>Titolo del documento</title> </HEAD> <BODY> ciao 1 ciao 1 ciao 1 ciao 1 AFFERMAZIONE VERA! <TT>Questo testo ha lettere che occupano tutte il medesimo spazio </TT> AFFERMAZIONE FALSA Questo testo ha lettere che occupano tutte il medesimo spazio <HR>

3 Carattere Normale Carattere + grande Carattere + piccolo Carattere size=1 Carattere size=2 Carattere size=3 Carattere size=4 Carattere size=5 Carattere size=6 Carattere size=7 Carattere size=8 (non esiste) Carattere size=7 in Arial Narrow Carattere size=7 in Arial Carattere size=7 in Arial Black </BODY> </HTML> 14/2/ AREA TERZE - Appunti MODULO 1 by e01692 <BODY BGCOLOR=BLACK TEXT=YELLOW> => sfondo nero scrittura in giallo Posted: Tue Feb 14, :51 pm paragrafo HTML equivale a invio di WORD equivale a shift +invio di WORD P => direttiva ALIGN => LEFT, RIGHT, JUSTIFY e CENTER <center>titolo</center> equivale a: TITOLO Codifica ASCII => codifica internazionale per i simboli alfabetici e numerici A => 65A~ src del tag IMG indica il percorso del file immagine da caricare => nelle esercitazioni il file immagine è sempre nella stessa cartella del file HTML che ha il tag IMG le dimensioni vanno generalmente messe - Perchè? spiegato le dimensioni in % sono rispetto alla finestra del browser e non al video <IMG SRC="copper.gif" width=50% height=100%> A => esempio con immagine <A HREF="ciao.htm"><IMG SRC="copper.gif" BORDER=0></a> mostrato come azzerare l'elenco dei link visitati. spiegato meccanismo di cache o file temporanei <A HREF="mailto:forrest@bubbagump.com">Mail!</A> questo metodo di richiesta di info funziona solo se l'utente utilizza il proprio PC con il prg di posta configurato

4 sulla sua casella arrivato alle immagini prima di Gif Wizard 28/2/ AREA TERZE - Appunti MODULO 1 by e => zero Posted: Tue Feb 28, :38 pm... 9 => nove 10 => dieci => uso la posizione per aumentare le possibilità di rappresentazione 00 => 0 01 => 1 10 => 2 11 => => 4 ESADECIMALE (usato perchè consente di rappresentare i numeri binari in modo + compatto) ho 16 simboli a disposizione => da 0 a F 0 => => 9 10 => A 11 => B 12 => C 13 => D 14 => E 15 => F 16 => => => 1F 32 => 20 FF = 15*16+15 =255 FA = 15*16+10 per trasformare un numero esadecimale (HEX) in decimale basta prendere il numero corrispondente al 1 digit e moltiplicarlo * 16 + il il numero corrispondente al 2 digit per trasformare un numero decimale in hex il primo digit corrisponde alla parte intera della divisione per 16 e il 2 digit è il resto 17 : 16 => 1 e resto :16 = 8 (divisione intera) e resto 0 => 80

5 ROSSO => FF VERDE => 00 FF 00 BLU => FF NERO => BIANCO => FF FF FF <A HREF=url>frase che spiega il link</a> TABELLE: Le tabelle sono usate anche per posizionare gli oggetti <table border=1> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td> </table> definizione altezze e larghezze (intera tabella) <table border=1 width=333 height=333> definizione altezze e larghezze (alcune righe e colonne) <table border=1 width=333 height=333> <tr> <td>1,1</td> <td WIDTH=50%>1,2</td> <td>1,3</td> <tr height=50%> <td>2,1</td> <td>2,2</td> <td>2,3</td> <tr> <td>3,1</td> <td>3,2</td> <td>3,3</td>

6 </table> INTESTAZIONI (centro verticalmente ed orizzontalmente con titolo in grassetto) <tr> <th>col 1</th> <th>col 2</th> <th>col 3</th> <table border=1 width=100% height=100%> <tr> <td align=left valign=bottom BGCOLOR=SILVER>1,1</td> <td align=right valign=bottom>1,2</td> <td align=center valign=bottom>1,3</td> <tr height=50%> <td align=left valign=middle>2,1</td> <td align=center valign=middle>2,2</td> <td align=rigth valign=middle>2,3</td> <tr> <td align=left valign=top>3,1</td> <td>3,2</td> <td align=right valign=bottom>3,3</td> </table> <TH>X</TH> è equivalente a <TD ALIGN=CENTER VALIGN=MIDDLE>X</TD> GUARDARE pr_tab.htm le dimensioni in % sono proporzionali alla dimensione della finestra del browser se sono nel tag table le dimensioni in % sono proporzionali alla dimensione della tabella se sono nei tag tr e td BACKGROUND => direttiva per mettere un'immagine di sfondo cellpadding => distanza tra testo e bordo della cella cellspaceing => distanza tra le celle <TABLE border=1 cellpadding=10> <TR><TD>1</TD><TD>2</TD><TD>3</TD><TD>4</TD></TR> <TR><TD BACKGROUND=" COLSPAN=3>6</TD></TR> <TR><TD COLSPAN=4>7</TD></TR> <TR><TD>8</TD><TD COLSPAN=2>9</TD><TD>10</TD></TR> </TABLE> <BLOCKQUOTE> => rientranza del testo sia a dx che sx

7 ESERCIZI => e e 1.10 caricare i files zippati con IE sul registro equivalente di <CENTER> => allinea in orizzontale Lista non ordinata <UL> Lista ordinata <OL> </OL> LIST ITEM => LI UNORDER LIST => UL ORDER LIST => OL Lista ordinata con sottoelenchi <OL> <LI>Capitolo 1 <OL> <LI>Paragrafo 1.1 <LI>Paragrafo 1.2 <LI>Paragrafo 1.3 <LI>Paragrafo 1.4 </OL> <LI>Capitolo 2 <LI>Capitolo 3 <OL> <LI>Paragrafo 3.1 <LI>Paragrafo 3.2 </OL> <LI>Capitolo 4 </OL> DIRETTIVA TYPE PER UL LISTE NON ORDINATE <UL TYPE=square> <UL TYPE=disc>

8 <UL TYPE=circle> <UL TYPE=1> <UL TYPE=a> <UL TYPE=A> <UL TYPE=i> <UL TYPE=I> LISTE DI DEFINIZIONE le chiusure di DD e DT non sono necessarie <DL> <DT>Parola 1</DT> <DD>spiegazione 1</DD> <DT>Parola 2</DT> <DD>spiegazione 2</DD> <DT>Parola 3</DT> <DD>spiegazione 3</DD> </DL> 13/3/ AREA TERZE - Appunti MODULO 1 by e01692 help su ROWSPAN e COLSPAN pr_tab.htm Posted: Tue Mar 13, :51 pm

9 index.htm => nome predefinito della pagina HTML che verrà inviata al client (IE, OPERA,..) se nell'url non viene specificato il file esempio: è come se scrivessi: soluzioni: eser 5 INDEX.HTM <html> <body bgcolor=silver> <UL> <li>link al <A href=primo.htm>primo.htm</a> <li>link al secondo.htm <li>link al terzo.htm </ul> </body> <html> <body bgcolor=#ffff00> File primo.htm link al <A href=index.htm>index.htm</a> </body> ESER 6 X23 X23 Xiyj ESER 8 (parziale) <html> <body> <TABLE width=300 height=300 BORDER=0> <TR height=50%> <TD width=50%> <TABLE width=150 height=100 BORDER=1> <TR> <TD ROWSPAN=2 BGCOLOR=#00ff00>A</TD> <TD COLSPAN=2>B</TD> </TR> <TR> <TD>C</TD> <TD BGCOLOR=#0000ff>D</TD> </TR> </TABLE>

10 </TD> <TD width=50%> </TD> </TR> <TR> <TD> </TD> <TD> </TD> </TR> </TABLE> </body> rosso in hex (esadecimale) => consente la rappresentazione di qtà + compatta ff TAG => NOBR (ha chiusura) => evita che il testo vada a capo quando arriva sul margine destro della finestra (utile per i menu) spiegato esempi sulla linea orizzontale <hr width=200 align=right color=red size=5> <hr width=50% noshade size=10> <hr width=50% size=10> MAPPE CLICCABILI <IMG SRC="Eser_H2.gif" USEMAP="#caio"> <MAP NAME="caio"> <AREA SHAPE="rect" COORDS="133,15,236,113" HREF="bianco.htm"> <AREA SHAPE="circle" COORDS="59,66,17" HREF="azzurro.htm"> <AREA SHAPE="poly" COORDS="X1,Y1,X2,Y2,X3,Y3,...,...,Xn,Yn" HREF="URL del collegamento"> <AREA SHAPE="default" HREF="yellow.htm"> </MAP> nelle mappe cliccabili le figure in foreground (davanti) vanno scritte prima di quelle in background (dietro) <AREA SHAPE="default" HREF="yellow.htm"> oppure (soluzione sempre compatibile) <AREA SHAPE="rect" COORDS="0,0,larghezza in pixel, altezza in pixel" HREF="yellow.htm"> 20/3/ AREA TERZE - Appunti MODULO 1 by e01692 Posted: Tue Mar 20, :45 pm

11 nelle mappe cliccabili le figure in foreground (davanti) vanno scritte prima di quelle in background (dietro) <AREA SHAPE="default" HREF="yellow.htm"> oppure (soluzione sempre compatibile) <AREA SHAPE="rect" COORDS="0,0,larghezza in pixel, altezza in pixel" HREF="yellow.htm"> ---- GESTIONE IMMAGINI: vedere: le immagini sono tabelle di punti colorati (detti pixel). La loro composizione determina l'immagine visualizzata un'immagine bitmap è descritta proprio in questo modo ovvero descritte con un insieme di pixel (punti colorati) un bit => è un qualcosa che assume due stati: acceso spento /1 o 0 / vero o falso 8 bit => sono un byte il bit è l'unità fondamentale dell'informazione decido di salvare un'immagine in Bianco e nero per registrarla devo usare sequenze di 0 e 1 (non ci sono altri modi) per cui se un pixel è nero scrivo 1 e se è bianco 0 immaginiamo questo file immagine bmp (bitmap) Immaginiamo che X sia nero e _ bianco: otteniamo _XXX_ X X XXXXX X X X X se a _ sostituisco uno spazio riconosco una lettera A XXX X X XXXXX X X X X con 2 colori posso immaginare: 0 => bianco 1 => nero mi basta 1 bit per ogni pixel se ho 4 colori (immaginiamo rosso, bianco nero e verde) un singolo bit non basta. Me ne servono 2 00 => bianco 01 => rosso 10 => verde 11 => nero

12 per registrare la lettera A rossa su sfondo rosso dovrò scrivere: quindi ogni pixel richiede 2 bit per cui la dimensione del file aumenta a del doppio aumentando i colori devo aumentare il numero di bit necessario per ogni pixel se decido di usare 3 bit posso costruire 8 combinazioni in generale con N bit 2^N combinazioni ad ogni combinazione posso far corrispondere un colore esempio 000 Bianco 001 Azzurro 010 Giallo 011 Marrone 100 Verde 101 Grigio 110 Viola 111 Nero questa associazione si dice palette per evitare problemi sulla colorazione in internet la palette non deve essere decisa dall'utente ma deve essere universale la scala di colore RGB è la palette universale usata per gestire le immagini in internet + bit uso + colori posso inserire nell''immagine ma ottengo una crescita della dimensione del file un'immagine 1024x768 pixel con 2^32 colori occupa circa 2,5 megabyte In internet un'immagini di grandi dimensioni richiede molto tempo per essere visualizzata (devo trovare un meccanismo di ottimizzazione) in RGB il nero è 24 bit a 0 in RGB il bianco è 24 bit a => bianco => rosso => verde => blu => nero

13 con RGB uso 24 bit per cui 2^24 colori = Riprendere da qui 20/3/2012 formato => modalità di registrazione di un file formati immagini + diffusi: jpeg: usato per le foto poichè si adatta molto bene alle repentine variazioni di colore il jpeg rovina (modifica l'immagine con l'obiettivo di ridurne la dimensione) l'alterazione non sembre risulta impercettibile se esagero con la compressione gif: adatta alle immagini al tratto: fumetto un'immagine gif gestisce al massimo 256 colori => 8 bit png tiff (usato in stampa e nei fax) bmp (non usato poichè non è compresso: ovvero un'immagine registrata in bmp richiede moltissimo spazio) formato standard => riconosciuto dalla maggior parte dei prg 27/3/ AREA TERZE - Appunti MODULO 1 by e01692 formato => modalità di registrazione di un file formati immagini + diffusi: jpeg: usato per le foto poichè si adatta molto bene alle repentine variazioni di colore gif: adatta alle immagini al tratto: fumetto png tiff (usato in stampa e nei fax) bmp (non usato poichè non è compresso: ovvero un'immagine registrata in bmp richiede moltissimo spazio) formato standard => riconosciuto dalla maggior parte dei prg jpeg, tiff, gif, png, bmp Posted: Tue Mar 27, :48 am formato TIFF => comprime l'immagine (file + piccolo) mantiene la qualità originale - usato in stampa formato GIF => immagini al tratto (esempio fumetti) => - ammette la trasparenza - consente le gif animate - compressione senza perdere la qualità - non ammette immagini con + di 256 colori Il jpg, gif e png usano lo stesso algoritmo di compressione del WINZIP una fotografia salvata in jpg viene compressa ma perdo parte della qualità originale INTRANET => utilizzo i servizi di internet a livello locale (LAN o rete locale) Il frame ha il vantaggio di rendere accessibili subito tutti i documenti nel sito Il frame non è adatto alla indicizzazione dei documenti fatta dai motori di ricerca che non riconoscono la struttura logica con cui i diversi frames sono stati composti perchè in intranet posso usare i frames? spiegato frameset => direttiva cols, rows

14 <FRAMESET rows="33%,33%,33%"> equivale a <FRAMESET rows="*,*,*"> per evitare calcoli <FRAMESET cols="*,3*,*"> al posto di <FRAMESET cols="20%,60%,20%"> oppure <FRAMESET cols="20%,60%,*"> => l'* in fondo indica la parte restante la direttiva SRC del tag frame definisce la pagina da caricare pagina divisa in 3 frame verticali esempio 1 <FRAMESET cols="*,3*,*"> <FRAME SRC="ooo.htm"> <FRAME SRC="ooo.htm"> esempio 2 <FRAMESET cols="*,3*,*" BORDER=20> <FRAME SRC="ooo.htm"scrolling=YES NORESIZE> <FRAMESET rows="*,3*"> <FRAME SRC="ooo.htm"> il tag <NOFRAMES> è ignorato dai vecchi browser che mostrano in realtà solo il contenuto delimitato da questo tag <noframes> <body> la pagina corrente utilizza i frame. Questa caratteristica non è supportata dal browser in uso. </body> </noframes> i nuovi browser invece non leggono la parte delimitata da questo tag scrolling = YES => mostra la barra di scorrimento scrolling = NO => non mostra la barra di scorrimento scrolling = AUTO => mostra la barra di scorrimento se serve (documento molto lungo) NORESIZE => impedisce il ridimensionamento del frame NAME=> fornisce il nome al frame => utile nei link

15 BORDER => dimensione in pixel del bordo BORDERCOLOR => colorazione del bordo TARGET e NAME sono direttive case sensitive (distinguono tra maiuscolo e minuscolo) Se il TARGET contiene un nuovo nome allora verrà creata una nuova finestra (con quel nome) che viene riempita con il file indicato nella direttiva href se non uso la direttiva target il frame che verrà usato è quello del link PAGINA INDEX.HTM che gestisce il frame <FRAMESET cols="400,*"> <FRAME SRC="menu.htm"scrolling=YES NORESIZE NAME=MENU> <FRAME SRC="" NAME=CONTENUTO> bianca.htm <BODY BGCOLOR=#FFFFFF> Sono Pagina Bianca.htm </BODY> </HTML> gialla.htm <BODY BGCOLOR=#FFFF00> Sono Pagina gialla.htm </BODY> </HTML> menu.htm <BODY> <A HREF=bianca.htm>Pagina bianca (link senza TARGET)</A> <A HREF=bianca.htm TARGET=CONTENUTO>Pagina bianca (link con TARGET=CONTENUTO)</A> <A HREF=gialla.htm TARGET=CONTENUTO>Pagina gialla (link con TARGET=CONTENUTO)</A> <A HREF=bianca.htm TARGET=Contenuto>Pagina bianca (link con TARGET=Contenuto)</A> <A HREF=gialla.htm TARGET=Contenuto>Pagina gialla (link con TARGET=Contenuto)</A> </BODY> </HTML> 03/04/ AREA TERZE - Appunti MODULO 1 by e01692 riprendere dai link magici Posted: Tue Apr 03, :56 am Se il nome del frame nella direttiva target è inesistente si apre una nuova finestra di IE (browser) Qualsiasi link che usa quel target modificherà il contenuto della finestra appena aperta TARGET MAGICI _self => frame contenitore

16 _top => indica la finestra padre _parent => indica il frame padre (o contenitore) _blank QUesto esempio <FRAMESET cols="*,*"> <FRAME SRC="sottoframe"> Questa pagina è un sottoframe <FRAMESET rows="*,*"> <FRAME SRC="" NAME=SOPRA> <FRAME SRC="" NAME=SOTTO> è equivalente a: <FRAMESET cols="*,*"> <FRAMESET rows="*,*"> <FRAME SRC="" NAME=SOPRA> <FRAME SRC="" NAME=SOTTO> esempio somma primi n numeri n oppure (definizione ricorsiva) s=0 s(n)=s(n-1)+n SUGGERIMENTO ESERCIZIO 5: usare la ricorsione Eser5.htm <FRAMESET cols="*,2*"> <FRAMESET ROWS=*,2*> <FRAME SRC="eser5_1.htm"> Eser5_1.htm <FRAMESET cols="*,2*">

17 <FRAMESET ROWS=*,2*> <FRAME SRC="eser5_2.htm"> Eser5_3.htm <FRAMESET cols="*,2*"> <FRAMESET ROWS=*,2*> Menu finale con tutti gli esempi <BODY> <A HREF=bianca.htm>Pagina bianca (link senza TARGET)</A> <A HREF=bianca.htm TARGET=CONTENUTO>Pagina bianca (link con TARGET=CONTENUTO)</A> <A HREF=gialla.htm TARGET=CONTENUTO>Pagina gialla (link con TARGET=CONTENUTO)</A> <A HREF=bianca.htm TARGET=Contenuto>Pagina bianca (link con TARGET=Contenuto)</A> <A HREF=gialla.htm TARGET=Contenuto>Pagina gialla (link con TARGET=Contenuto)</A> <A HREF=sottoframe.htm TARGET=CONTENUTO>Pagina bianca (link con TARGET=sottoframe)</A> <A HREF=frame.htm TARGET=CONTENUTO>frame.htm (link con TARGET=CONTENUTO)</A> <HR> <A HREF=gialla.htm TARGET=_self>Pagina gialla (link con TARGET=_self)</A> <A HREF=gialla.htm TARGET=_top>Pagina gialla (link con TARGET=_top)</A> <A HREF=gialla.htm TARGET=_parent>Pagina gialla (link con TARGET=_parent)</A> <A HREF=gialla.htm TARGET=_blank>Pagina gialla (link con TARGET=_blank)</A> </BODY> </HTML> pubblicare l'esercitazione 2 (fino al 6 escluso) entro il 22/4 alle Powered by phpbb Forum Software phpbb Group All times are UTC Page 1 of 1