tag:blogger.com,1999:blog-11977141532169492182024-03-05T05:56:42.239-08:00Lezioni di informaticaAnonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.comBlogger38125tag:blogger.com,1999:blog-1197714153216949218.post-49627114444090672882014-01-13T02:27:00.000-08:002014-01-13T02:32:58.130-08:00TwitAntonio: manda un tweet al candidato<span style="font-family: Arial, Helvetica, sans-serif;">Iniziativa della comunità <a href="http://www.spaghettiopendata.org/" target="_blank"> Spaghetti Open Data (SOD)</a>, " <i>gruppo di cittadini italiani interessati al rilascio di dati pubblici in formato aperto, in modo da renderne facile l'accesso e il riuso (open data)</i>" , <b>TwitAntonio </b>è un progetto che raccoglie i tweet di tutti i candidati alle elezioni, utilizzando le API di Twitter.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Esso permette, accedendo all'indirizzo<a href="http://www.twitantonio.it/" target="_blank"> http://www.twitantonio.it/ </a>di selezionare il candidato alle elezioni politiche (tramite i campi 'nome', 'circoscrizione', 'lista') cui inviare un tweet: l'applicazione si collega direttamente al servizio fornito da Twitter Inc. e consente all'utente di autenticarsi per utilizzarlo.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span>
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitantonio.it/" target="_blank">http://www.twitantonio.it/</a></span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.twitantonio.it/video" target="_blank">Video del progetto</a></span>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-10450101550283479622013-12-28T00:59:00.000-08:002013-12-28T01:08:49.453-08:00Aggiungere file css al template Joomla con T3 FrameworkSe state utilizzando un cms come Joomla ed un template che utilizza il framework T3 (Maggiori info sul framework <a href="http://www.joomlart.com/joomla/whats-new-in-the-new-t3-framework" target="blank">qui</a>, è possibile aggiungere file css al proprio template in due semplici passi:<br />
<br />
<br />
<ol>
<li>Aggiungi il file css aggiuntivo alla cartella in cui si trova il tuo template (puoi utilizzare un software come filezilla per fare l'upload del file). Il percorso sarà del tipo: <i>nomesito/joomla/template/nometemplate/css</i></li>
<li>Apri il file default xml che si trova in <i>nomesito/template/nometemplate/etc/layou</i>t ed inserisci il percorso del tuo css subito dopo questo codice:</li>
</ol>
<div>
<div>
<i><stylesheets></i></div>
<div>
<i> <file media="all">css/layout.css</file></i></div>
<div>
<i> <file media="all">css/template.css</file></i></div>
<div>
<i> <file media="all">css/modules.css</file></i></div>
<div>
<i><br /></i></div>
<div>
<i>Scrivi qui : <file media="all">css/mio.css</file></i></div>
</div>
Salva il file e fai l'upload.
Vedrai che il tuo foglio si stile sarà letto dal template.Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com1tag:blogger.com,1999:blog-1197714153216949218.post-45002423399548407042012-01-30T02:15:00.000-08:002012-01-30T02:15:50.289-08:00Colore esadecimaleMolto carino, il sito. Clicca sul colore desiderato e lo sfondo diventa di quel colore.<br />
Puoi vedere l'esadecimale di quel colore e riutilizzarlo ;-)<br />
<a href="http://users.libero.it/luclep/itaint.htm" target="_blank">http://users.libero.it/luclep/itaint.htm</a>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com1tag:blogger.com,1999:blog-1197714153216949218.post-77029872104257146632012-01-26T05:34:00.000-08:002012-01-26T05:34:08.677-08:00Appup, le apps sul tuo netbookLe Apps si sa sono ormai un 'fenomeno di costume'. MA perché limitarsi solo a tablet e smatphone?<br />
Sul sito <a href="http://www.appup.com/" target="_blank">http://www.appup.com</a> trovi anche apps per Windows da installare direttamente sul proprio pc.Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-8232562813080536512011-12-04T12:52:00.000-08:002011-12-04T12:52:35.081-08:00JAVASCRIPT II : GLI ALERT<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Abbiamo visto come stampare sulla pagina del browser una scritta. Adesso vediamo come vengono scritti gli alert (quelle finestre che ci avvisano di qualcosa).</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Apriamo il blocco note</span></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><html></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <head></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <script type ="text/javascript"></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <!--</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> var msg ="Questo è un messaggio di alert";</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> window.alert (msg);</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> alert ("Questo è un altro messaggio");</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> //--></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </script></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </head></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><body></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">RIcarica la pagina (f5) per ricaricare l'alert</span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></body></span></b></div><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></html></span></b></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Questo codice carica due alert. Copiate e incollate</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Alla prossima.......</span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-56255027621984021452011-12-04T12:43:00.000-08:002011-12-04T12:47:03.616-08:00JAVASCRIPT I : IL NOSTRO PRIMO SCRIPT<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Cominciamo questa prima lezione scrivendo il primo programma che ogni utente che si affaccia ad un nuovo linguaggio di programmazione non può non incontrare : "Hello World".</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Prima di creare lo script vediamo alcune premesse:</span><br />
<br />
<ul><li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Il codice javascript è sempre racchiuso tra i tag <span class="Apple-style-span" style="color: red;"><b><script type ="text/javascript"></b></span> Codice javascript<span class="Apple-style-span" style="color: red;"><b> </script></b></span> . Type indica al browser che tipo di linguaggio stiamo utilizzando.<br />
</span></li>
<li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Se vogliamo utilizzare un file javascript esterno (opportunamente nominato file.js) deve scrivere il tag <span class="Apple-style-span" style="color: red;"><b><script src="script.js"></script><br />
</b></span></span></li>
<li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Il tag <script> può essere inserito nei tag : <head></head> oppure nei tag: <body></body>. La differenza sta nel fatto che nel secondo caso viene utilizzato una sola volta durante il flusso d'esecuzione del codice e la prima è che viene riutilizzato ogni volta che è opportunamente richiamato (vedremo questa cosa più in la).<br />
</span></li>
<li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Dopo il tag <script> viene utilizzato il tag di commento <span class="Apple-style-span" style="color: red;"><b><!--</b></span> per indicare al browser di passare il controllo al javascript e finisce con<b> <span class="Apple-style-span" style="color: red;">//--></span></b> per far sì che il compilatore javascript legga l'ultima riga come commento (i commenti in javascript sono scritti : <span class="Apple-style-span" style="color: red;"><b>//</b></span> oppure <span class="Apple-style-span" style="color: red;">/* */</span>) e il commento html venga chiuso per poter ripassare il controllo al browser.</span></li>
<li><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Le istruzioni terminano con un ;</span></li>
</ul><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Adesso apriamo il nostro editor e creiamo il nostro file HelloWorld.html.</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><html></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><head></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b> <script type ="text/javascript"></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><!--</b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b> document.write ("Hello World");</b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>//--></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b> </script></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b></head></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><body></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b></body></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b></html></b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Notiamo che le stringhe in javascript sono racchiuse tra virgolette. Un altro modo per stampare il messaggio è quello di passarlo ad una variabile e poi richiamarla nel metodo write.</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>var msg ="Hello World"</b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>document.write (msg);</b></span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Da notare che in javascript le variabili non hanno un tipo ma questo viene impostato dopo l'inizializzazione della variabile;</span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-27690202981822638462011-11-11T03:13:00.000-08:002011-11-11T03:13:21.351-08:00Lez 2: Creiamo il nostro database<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Apriamo Mysql command line, ovvero il prompt dei comandi che abbiamo installato sul pc e immettiamo la password per accedere a Mysql (quella scelta durante l'installazione per intenderci).</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Adesso creiamo il nostro database:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>create database NomeDatabase;</b></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Facciamo attenzione al punto e virgola finale che indica a Mysql di eseguire il comando (se lo dimentichiamo rimarrà in attesa di un altro comando) e a premere il tasto invio dopo aver eseguito il comando.</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">NomeDatabase è il nome che daremo al nostro database.</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Per usare il database (e crearci tabelle o fare query) usiamo il comando:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>use database NomeDatabase;</b></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Per eliminare il database:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>drop database NomeDatabase;</b></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Alla prossima...</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-85620591069480301402011-10-23T09:24:00.000-07:002011-10-23T09:32:13.266-07:00Lez. 1 :Scaricare Mysql serverIn questa prima lezione del nostro corso di Mysql faremo una cosa semplicissima ma importante: scarichiamo il nostro programma dal sito ufficiale.<br />
Andiamo sul sito ufficiale<a href="http://dev.mysql.com/downloads/" target="_blank"> Mysql</a> e scarichiamo <a href="http://dev.mysql.com/downloads/mysql/5.5.html" target="blank">Mysql server </a>( noi useremo il prompt dei comandi di mysql ma è possibile scaricare e installare anche l'interfaccia grafica del programma).<br />
Installiamo il tutto, scegliamo la password e ricordiamocela perché ci servirà per entrare nel server mysql.<br />
Adesso da programmi andiamo su Mysql Command line client. Ci verrà chiesta la password (mettiamo quella che abbiamo scelto in fase di installazione).<br />
Adesso possiamo creare i nostri database, le tabelle ecc.<br />
Questo però lo vedremo alla prossima......Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-8686437586476398052011-07-07T03:07:00.000-07:002011-07-07T03:09:49.092-07:00Come creare un rete locale<div style="text-align: justify;">Per far sì che diversi pc facciano parte della stesse <b>rete</b>, dovete far sì che essi facciano parte dello stesso gruppo di lavoro.</div><div><div style="text-align: justify;">Come fare? Semplicissimo: su <b>risorse del computer</b> ( o <b>computer</b> in Windows 7 e Windows vista), cliccare con il tasto destro e poi su<b> proprietà</b>.</div></div><div><div style="text-align: justify;">Qui verrà visualizzato il <b>nome del computer</b> e il <b>gruppo di lavoro</b>. </div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Cliccando su <b>cambia impostazioni</b> potremo cambiare questi due parametri. Ad esempio per ogni pc il gruppo di lavoro deve essere ufficio, solo così i vari computer potranno "dialogare in rete".</div></div><div><div style="text-align: justify;">Quando tutti i pc faranno parte dello stesso gruppo di lavoro, basterà andare su <b>risorse di rete</b> e vedremo la nostra rete ufficio e i pc ad essa collegati.</div></div><div><div style="text-align: justify;"><br />
</div></div><div><div style="text-align: justify;">Prerequisiti: collegati tutti con il cavo ethernet.</div></div><div><div style="text-align: justify;"><br />
</div></div><div><div style="text-align: justify;">Alla prossima....</div></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com1tag:blogger.com,1999:blog-1197714153216949218.post-77301119665194422011-07-07T02:59:00.000-07:002011-07-07T03:08:17.482-07:00Come impostare una stampante in rete su Windows<div style="text-align: justify;">Ho scoperto, da pochissimo, che per impostare un stampante in rete su <b>Windows 7</b> o su <b>Windows xp</b>, bisogna installarla come stampante locale e non come stampante di rete (cosa che facevo tranquillamente con il vecchio Windows 2000).</div><div style="text-align: justify;">Innanzitutto dovete condividere la stampante sul pc su cui è installata fisicamente (tramite cavo usb si suppone). Andate in <b>Pannello di controllo- dispositivi e stampanti </b>e cercate la stampante da condividere (premettiamo che sia già stata installata). Con il tasto destro sull'icona della stampante, su condividi potremmo creare la nostra condivisione (ci sarà una mano sotto alla stampante in Windows xp e due omini in Windows 7).</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Adesso andiamo sugli altri pc che devono stampare in rete.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Sempre da Pannello di controllo - dispositivi e stampanti - scegliere <b>Aggiungi stampante</b> (in alto per Windows 7 e a sinistra su Windows xp ). </div><div style="text-align: justify;">Qui troveremo l'opzione aggiungi <b>stampante locale</b>. Scegliamo crea nuova porta, porta locale, e gli mettiamo l'indirizzo del pc su cui è installata la nostra stampante con il nome della stessa. (es <b>\\pcfisso\stampante</b>).</div><div style="text-align: justify;">A questo punto ti chiederà di installare i driver (puoi prenderli da un elenco di Windows o dal dischetto fornito con la stampante).</div><div style="text-align: justify;">Se tutto è andata correttamente dovreste poter vedere la stampante condivisa sul pc e magari provate a fare un stampa di prova.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Prerequisiti: tutti i pc devono far parte dello stesso <a href ="http://lezioninformatica.blogspot.com/2011/07/come-creare-un-rete-locale.html">gruppo di lavoro</a></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Alla prossima..</div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com2tag:blogger.com,1999:blog-1197714153216949218.post-67337879746240065902011-06-21T01:17:00.000-07:002011-06-21T23:41:35.978-07:00CSS III Lezione: il testo<div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>Lezione 3 : i CSS</b></span></span></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Vediamo alcune proprietà per formattare il testo:</span></span></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Per allineare il testo useremo:</span></span></div><div style="margin-bottom: 0cm;"><br />
</div><ul><li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-align : center; \* testo al centro*\</b></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-align : left; \* testo a sinistra *\</b></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-align : right; \* testo a destra *\</b></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-align : justify; \* testo giustificato *\</b></span></span></div></li>
</ul><div style="margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Il <b>grassetto e il corsivo </b>del nostro testo sarà applicato con:</span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">f<b>ont-style: italic </b> \* se vogliamo scrivere il testo in corsivo*\</span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">a <b>font-style</b> è possibile associare:</span></span></div><ul><li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>italic</b></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>normal </b></span></span> </div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>oblique</b></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>inherit</b></span></span></div></li>
</ul><div style="margin-bottom: 0cm;"><br />
</div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">f<b>ont-weight: bold </b>\* se vogliamo scrivere testo in grassetto *\</span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Le proprietà di <b>font-weigth </b>sono:</span></span></span></div><ul><li><div style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>normal</b></span></span></span></div></li>
<li><div style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>bold</b></span></span></span></div></li>
<li><div style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>bolder</b></span></span></span></div></li>
<li><div style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>lighter</b></span></span></span></div></li>
<li><div style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>inherit</b></span></span></span></div></li>
</ul><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Per il testo sottolineato:</span></span></span></div><ol><li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">t</span></span></span></span></span><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>ext-decoration: underline;</b></span></span></span></span><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"> \*testo sottolineato*\</span></span></span></span></span></div></li>
</ol><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Le proprietà di t<b>ext-decoration</b> sono:</span></span></span></div><ul><li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>o</b></span></span></span></span><em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>verline (linea sopra il testo)</b></span></span></span></span></em></div></li>
<li><div style="margin-bottom: 0cm;"><em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>underline (sottolineato)</b></span></span></span></span></em></div></li>
<li><div style="margin-bottom: 0cm;"><em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>line-through</b></span></span></span></span></em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b> (sbarrato)</b></span></span></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>blink (lampeggiante -non IE)</b></span></span></span></span></em></div></li>
<li><div style="margin-bottom: 0cm;"><em><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><span style="font-style: normal;"><b>none (nessuno)</b></span></span></span></span></em></div></li>
</ul><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Per decidere di quanto il testo deve rientrare:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-indent: 10px</b></span></span></span></div><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>text-indent: 10%</b></span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Per lo spazio tra i caratteri:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">l<b>etter-spacing: 6px;</b></span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Per indicare la famiglia di font che il browser utilizzerà per la pagina bisogna utilizzare il tag:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"> <span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-family: Arial, verdana, Sans-serif; </b></span></span></span> </div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">La dimensione del font:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><ul><li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-size: 30px;</b></span></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-size: 30pt;</b></span></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-size: 30%;</b></span></span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-size: 8em;</b></span></span></span></div></li>
</ul><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Cosa cambia tra le misure? Il pixel è il formato video, mentre il point il formato di stampa, l'em e la percentuale sono misure relative (a differenza delle prime due che sono misure assolute), ad esempio se l'em è 1, e abbiamo dichiarato il font base a 12 px, il font con l'em sarà del 150% in più ovvero di 18 px, la percentuale è simile all'em.</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">I tag font possono essere raggruppati:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><pre style="font-weight: normal;"><span style="color: black;"><code> </code><code> <span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>p {</b></span></span></code></span>
<code> </code>
<strong> <span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-weight: bold;</b></span></span></strong>
<strong> <span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-size: 18px;</b></span></span></strong>
<strong> </strong><strong><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>font-family: Verdana, Arial,Sans-serif;</b></span></span></span></strong>
<strong><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b> font-style: italic;</b></span></span></span></strong><strong><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b> </b></span></span></strong>
<code> <span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>}</b></span></span></code></pre><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Può essere riscritta come:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> <b>p {</b></span></span></span></div><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b> font:bold, small-caps,italic, 18px ,Arial;</b></span></span></span></div><div style="margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b> }</b></span></span></span></div><div style="margin-bottom: 0cm;"><br />
</div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Con l'ordine:</span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">font-weigth, font-variant (questo attributo ha solo due varianti small-caps, che trasforma tutte le lettere maiuscole in una dimensione minore come fossero lettere minuscole, e normal), font-style, font-size, font-family.</span></span></span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-4703489188136045042011-06-20T03:56:00.000-07:002011-06-20T03:56:54.437-07:00CSS: II Lezione La sintassi<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">CSS: Lezione 2 La sintassi</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Nei css, esterni o interni alla classe, abbiamo visto che è possibile ridefinire le caratteristiche di alcuni tag html (nella lezione precedente abbiamo modificato il tag h1), ma possiamo anche ridefinire altre classi ed apllicarle ad un contenitore.</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Ad esempio, se nell'<b><head></b> scriviamo:</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><style type=" text/css"></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> .<span style="color: black;">miaclasse </span><span style="color: black;">{</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">font-family: Verdana, Arial,Sans-serif;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">color: red;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">font-size: 11px;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">text-align: center;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 14.15pt;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">}</span></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></style></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">E nel body scriviamo:</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;"> <b><p class= “miaclasse”> Questo testo è arial e in rosso e allineato al centro </p></b></span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><i><span style="font-size: small;">Attenzione: la classe è preceduta da un punto e può essere riutilizzata per più contenitori.</span></i></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Invece se scriviamo:</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><style type ="text/css"></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> #<span style="color: black;">mioid </span><span style="color: black;">{</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">font-family: Verdana, Arial,Sans-serif;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">color: red;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">font-size: 11px;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">text-align: center;</span></span></b></div><div class="Testopreformattato" style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 14.15pt;"><b><span style="font-size: small;"><span style="color: black;"> </span><span style="color: black;">}</span></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></style></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Abbiamo creato un<b> id.</b> Qual'è la differenza con la classe, direte voi?</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">L'id può essere applicato ad un solo elemento, la classe a più di uno. Solitamente questo è utilizzato col tag <div>, ma nessuno vieta di utilizzarlo con qualche altro contenitore htm.</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Per richiamarlo all'interno del body si scrive:</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><div id= “mioid”> Questo contenitore è rosso, in Arial e allineato al centro </div></span></b></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: small;">Facciamo un esempio:</span></div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><html></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <head></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <title> Primi esercizi con Css</title></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <style type="text/css"></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> .miaclasse {</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-family: Verdana, Arial,Sans-serif;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> color: red;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-size: 16px;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> text-align: center;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> } </span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> #mioid {</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-family: Verdana, Arial,Sans-serif;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> color: #990066;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-size: 11px;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> text-align: rigth;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> }</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> H1 {</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> color: #009900;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-size: 22px;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> text-align: center;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> font-style: italic;</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> }</span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><br />
</div><div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> </style></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> </head></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><body></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <H1> Questo è il titolo della pagina</H1></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><div id = "mioid"></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><ul></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <li> Primo elemento </li></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"> <li> Secondo elemento </li></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></ul></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></div></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><div class ="miaclasse"> Documento creato da: </div></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"><p class = "miaclasse"> Firma</p></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></body></span></b></div><b><span style="font-size: small;"><span style="font-family: Arial,Helvetica,sans-serif;"> </span></span></b> <br />
<div class="MsoNormal" style="font-family: Arial,Helvetica,sans-serif;"><b><span style="font-size: small;"></html></span></b></div><br />
<br />
<br />
Il risultato:<br />
<br />
<br />
<title> Primi esercizi con Css</title><br />
<style type="text/css">
.miaclasse {
font-family: Verdana, Arial,Sans-serif;
color: red;
font-size: 16px;
text-align: center;
}
#mioid {
font-family: Verdana, Arial,Sans-serif;
color: #990066;
font-size: 11px;
text-align: rigth;
}
H1 {
color: #009900;
font-size: 22px;
text-align: center;
font-style: italic;
}
</style><br />
<h1>Questo è il titolo della pagina</h1><br />
<div id="mioid"><br />
<ul><li> Primo elemento </li>
<li> Secondo elemento </li>
</ul><br />
</div><br />
<div class="miaclasse">Documento creato da: </div><br />
<div class="miaclasse">Firma</div><br />
<br />
<br />
<br />
Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-27088337513529632542011-06-14T01:21:00.000-07:002011-06-14T01:21:14.435-07:00CSS: I lezione<div style="text-align: justify;"><b>I CSS: Lezione I</b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">I css, detti anche fogli di stile, sono nati con il preciso compito di occuparsi della formattazione di una pagina web, cosa che prima era demandata al linguaggio html.</div><div style="text-align: justify;">Oggi, i contenitori vengono sempre creati con i tag html mentre per la formattazione il loro uso è deprecato a favore dei fogli di stile.</div><div style="text-align: justify;">Formattare un testo in css vuol dire anche creare un codice che può essere utilizzato per un intero sito web senza che si debba modificare a mano ogni singola pagina.</div><div style="text-align: justify;">I css, <b>Cascading Style Sheets</b>, possono essere utilizzati in tre modi:</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"></div><ol><li>Come fogli di stile in linea</li>
<li>come fogli di stile incorporati</li>
<li>come fogli di stile esterni</li>
</ol><br />
<div style="text-align: justify;"><br />
</div><div style="text-align: justify;"></div><ol><li>Fogli di stile in linea</li>
</ol><div><br />
<div style="text-align: justify;"><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">In questo caso non ci spostiamo molto da quello che è l'utilizzo dell'html, infatti le proprietà verranno dichiarate nel contenitore (ricordiamo che esso può essere ad esempio un paragrafo <p> o <div> o <span>), e avrà effetto solo ed esclusivamente su questo contenitore.</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Ad esempio:</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b><div style = “font-size: 8px; color: red”> testo in rosso </div></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br />
</span></div><pre class="western" style="text-align: justify;"></pre><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;">Come avrai già notato gli attributi vengono seguiti dai due punti invece che dall'uguale, questa è una prima differenza nella sintassi dei Css.</span><br />
<ol start="2"><li><span style="font-family: Arial, sans-serif;"></span><span class="Apple-style-span" style="font-family: Arial, sans-serif;">Fogli di stile incorporati</span></li>
</ol></div><br />
<div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Le proprietà vengono inserite nell'head della pagina html e hanno effetto su tutta la pagina, non sul tutto il sito web, utilizzando il tag<b> <style type= “text/css”></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Ad esempio:</span><br />
<span style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b><html></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"></span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> <head></span></span></b></div><div align="JUSTIFY" lang="en-GB" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b> <style type = “text/css”></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"><span lang="en-GB"></span></span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> body {background-color: red;}</span></span></b></div><pre class="western" style="margin-bottom: 0.5cm; orphans: 2; text-align: justify; widows: 2;"><b><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> </style></span></span>
<span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> </head></span></span></b></pre><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Nota che:</span></div><ol><li><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Sono utilizzate le parentesi graffe</span></div></li>
<li><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Al posto dell'uguale utilizziamo i due punti</span></div></li>
<li><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Gli argomenti sono separati dal punto e virgola invece della virgola</span></div></li>
<li><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Non vi sono le virgolette</span></div></li>
</ol><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;">Una migliore indentazione sarebbe:</span><br />
<span style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"> </span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"><html></span></span></b></div><div align="JUSTIFY" lang="en-GB" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b> <head></b></span></div><div align="JUSTIFY" lang="en-GB" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b> <style type = “text/css”></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"><span lang="en-GB"></span></span><span style="font-family: Arial, sans-serif;"><span lang="fr-FR"> H1</span></span><span style="font-family: Arial, sans-serif;"><span lang="fr-FR"> {</span></span></b></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span lang="fr-FR"> font-size: 13px;</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span lang="fr-FR"></span></span></strong><strong><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> font-family: Arial;</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> color: red;</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span lang="en-GB"></span></span></strong><strong><span style="font-family: Arial, sans-serif;"> }</span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"> </style></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"> </head></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;">Con gli argomenti uno sotto l'altro.</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;">In questo caso tutti gli elementi racchiusi tra i tag H1 avranno il colore rosso, font Arial e grandezza 13. </span></span></strong> </div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><ol start="3"><li><strong><span style="font-family: Arial, sans-serif;">Fogli di stile esterni</span></strong></li>
</ol></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;">All'interno dell'head viene richiamato un foglio si stile esterno alla pagina:</span></span></strong><br />
<strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;"><br />
</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"> </span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"><html></span></span></b></div><div align="JUSTIFY" lang="en-GB" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><b> <head></b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><b><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> </span></span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"><link rel="stylesheet" type="text/css" href="fogliodistile.css"></span></span><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> </span></span> </b></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span lang="en-GB"> </span></span></strong><strong><span style="font-family: Arial, sans-serif;"></head></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;">Stando ben attenti a inserire il percorso corretto in cui si trova il foglio di stile, in questo modo potremo applicare la stessa formattazione a tutte le nostre pagine web, basta inserire questa dicitura nell'head delle pagine in cui vogliamo utilizzarlo.</span></span></strong></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><strong><span style="font-family: Arial, sans-serif;"><span style="font-weight: normal;">Vedremo meglio la sintassi dei css nelle prossime lezioni....</span></span></strong></div></div><br />
</div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-84676613519979379972011-06-14T01:10:00.000-07:002011-06-14T01:10:37.816-07:00HTML: Lezione 15 I Form (II parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
P.elenco-ctl { font-family: "Lohit Hindi" }
-->
</style> <br />
<div class="elenco-western" style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Lez 15 i Forms II parte</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Vediamo gli attributi che possiamo utilizzare con ogni campo.</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><ol><li><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><input type= text”> </b><input type="text”" /></span></div></div></li>
</ol><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><ul><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>size:</b> larghezza del campo, a seconda di questo attributo si definisce la quantità di dati che visualizzeremo.</span></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Maxlength</b>: massima quantità di dati che possiamo immettere</span></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>name:</b> nome interno al campo, che il programma che preleverà i dati</span></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>value</b>: valore di default. </span></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>align: </b>l'allineamento del field. Puoi scegliere tra : top, middle, bottom, right, left.</span></li>
</ul><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Gli stessi attributi si possono applicare ai field password, che sono sempre campi di testo, quello che cambia e che la password immessa non è visibile sul monitor.</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Per la textarea, invece abbiamo gli attributi:</span></div></div><ol start="2"><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><textarea> Questa è l'area di testo </texarea ></b><textarea></textarea></span></div></div></li>
<ul><li><div style="margin-bottom: 0cm; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>cols e rows</b>, ovvero il numero massimo di righe e di colonne del campo.</span></div></div></li>
<li><div style="margin-bottom: 0cm; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Nam</b>e= aggiungere un nome interno al field</span></div></div></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>wrap </b>= questo attributo può essere, <b>wrap = “off “(</b>il testo è visto come una lunga serie senza gli a capo), <b>wrap = “virtual</b>” (il testo va a capo, ma quando viene inviato diventa una riga unica, 2<b>wrap=physical</b> “il testo va a capo e quando viene inviato rimane così com'è, con tutti gli a capo).</span></li>
</ul></ol><div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><ol start="2"><li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">La <b>checkbox, </b>permette di selezionare più scelte, a differenza dei bottoni radio, per cui ne vale solo una.</span></li>
</ol><div><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Name= </b>nome del campo, utili per il programma che riceverà le informazioni.</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><br />
<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Value= </b>indica quale opzione è stata scelta, e quindi, ciò che verrà inviato al programma ricevente.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Align= </b>il solito allineamento.</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Se aggiungiamo l'attributo <b>checked="checked",</b> vuol dire che stiamo scegliendo questa opzione come standard.</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Inutile dire che questi attributi valgono anche per il type = radio, ovvero per i bottoni radio.</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> </div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I menù a discesa, permettono anch'essi la scelta tra varie opzioni, funziona come i bottoni radio o la checkbox.</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Il tag è :</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm; margin-left: 0.64cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><select></span></b></div></div><div style="margin-bottom: 0cm; margin-left: 1.27cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><option value= “primascelta”> primo </option></span></b></div></div><div style="margin-bottom: 0cm; margin-left: 1.27cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><option value = “secondascelta”> secondo </option></span></b></div></div><div style="margin-bottom: 0cm; margin-left: 0.64cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></select></span></b></div></div><div style="margin-bottom: 0cm; margin-left: 0.64cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Gli attributi di <b>select </b>sono:</span></div></div><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>name </b>= nome del menù a discesa. Viene scritto select .</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Size</b> = quante scelte sono visibili nello stesso momento, di default è una.</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Multiple</b> = è presente la scelta multipla.</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Gli attributi di <b>option</b></span></div></div><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>value</b> =cosa verrà inviato al programma ricevente.</span></div></div></li>
</ul><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Selected</b> = la voce selezionata di default.</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I bottoni di invio <b>< input type = “submit”>,</b> hanno come attributi</span></div></div><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>name </b>= il nome del bottone</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>value</b> = il nome visualizzato sul bottone</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>align</b> = allineamento</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>tabindex =</b> ordine in cui i campi verranno attivati.</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm; margin-left: 0.64cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Il tasto reset <input type = “reset”> ha come attributi:</span></div></div><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>name</b> = il nome del bottone</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>value </b>= il nome visualizzato</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>align</b> = l'allineamento</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>tabindex </b>= ordine in cui i campi verranno attivati.</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm; margin-left: 0.64cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Gli attributi dell' <b><input type =”image”></b> sono:</span></div></div><ul><li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>name </b>= il nome dell'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>src</b> = l'indirizzo dell'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>align</b> = l'allineamento</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>border </b>= il bordo intorno all'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>height </b>= l'altezza dell'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>width</b> = la larghezza dell'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>vspace</b> = lo spazio bianco sopra e sotto l'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>hspace</b> = lo spazio a destra e sinistra dell'immagine</span></div></div></li>
<li><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>tabindex </b>= ordine in cui i campi verranno attivati</span></div></div></li>
</ul><div style="margin-bottom: 0cm;"><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> </div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Facciamo un esempio:</span></div></div><div style="margin-bottom: 0cm;"><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><html></span></b></div></div><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></b><br />
<div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <title> Il mio form </title></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <body></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <form name = "Contattaci" method ="post" action="http://www.miodominio.com/myformhandler.cgi" ></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></b></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <fieldset></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><p align = "center"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span lang="en-GB"> </span><legend > dati utente :</legend></span></b></div></div><div style="margin-bottom: 0cm;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> </span></b></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <input type = "text" name = "nome" value = "Il tuo Nome"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span lang="en-GB" style="font-family: Arial, Helvetica, sans-serif;"><b><input type = "text" name = "cognome" value = "Il tuo Cognome"></b></span></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></p></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><p align ="center"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <label > Scrivici: <br/></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <span lang="en-GB"><textarea cols ="60" rows="10" wrpa ="physycal"></span></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Scrivi qui il tuo messaggio</span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></textarea></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></p></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></fieldset></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><p align = "center"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><label> Password: <input type ="password"></label><br/></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><label> Linguaggio di programmazione preferito: <br /></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <select></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option>Java</option></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option>C++</option></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option> Php </option></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option> Altro </option></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></select></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></label><br/></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><label> Linguaggi conosciuti: <br /></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <span lang="en-GB"><select multiple ="multiple" size ="5"></span></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span lang="en-GB"> </span><span lang="fr-FR"><option>Java</option></span></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span lang="fr-FR"> </span><span lang="en-GB"><option>C++</option></span></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option> Php </option></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option> Html</option></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> <option> Css </option></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></select></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><p></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><fieldset></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><p align = "center"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><label> Accetti termini e condizioni?</span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><input type= "radio" name = "option1" checked = "checked"> Si</span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><input type = "radio" name= "option2" > No </span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></label></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></filedset><br /></span></b></div></div><div lang="en-GB" style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><input type ="submit" name ="invia" value="Invia" align ="center"></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></p></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></form></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></body></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"></html></span></b></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><div style="margin-bottom: 0cm;"><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Il risultato sarà:</span></div></div></div></div><form action="http://www.miodominio.com/myformhandler.cgi" method="post" name="Contattaci"><br />
<fieldset><div align="center"><legend> dati utente :</legend><br />
<br />
<input name="nome" type="text" value="Il tuo Nome" /><br />
<input name="cognome" type="text" value="Il tuo Cognome" /><br />
<br />
</div><div align="center"><label> Scrivici: <br />
<br />
<textarea cols="60" rows="10" wrpa="physycal"><br /> Scrivi qui il tuo messaggio<br /> </textarea><br />
</label></div></fieldset><div align="center"><br />
<label> Password: <input type="password" /></label><br />
<br />
<label> Linguaggio di programmazione preferito: <br />
<br />
<br />
<select> <option>Java</option> <option>C++</option> <option> Php </option> <option> Altro </option> </select><br />
</label><br />
<br />
<label> Linguaggi conosciuti: <br />
<br />
<select multiple="multiple" size="5"> <option>Java</option> <option>C++</option> <option> Php </option> <option> Html</option> <option> Css </option> </select><br />
<br />
</label></div><fieldset><div align="center"><label> Accetti termini e condizioni?<br />
<input checked="checked" name="option1" type="radio" /> Si<br />
<input name="option2" type="radio" /> No <br />
</label><br />
<br />
<br />
<input align="center" name="invia" type="submit" value="Invia" /></div><br />
<title> Il mio form </title><br />
<fieldset><div align="center" style="text-align: -webkit-auto;"><br />
</div></fieldset></fieldset></form>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-55483251838997685642011-06-14T00:37:00.000-07:002011-06-14T00:37:07.310-07:00HTML: Lezione 14 I Form (I parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
A.western:link { so-language: zxx }
A.ctl:link { so-language: zxx }
-->
</style> <br />
<div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Lez 14 I forms I parte</b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">I forms sono semplicemente dei moduli che ci permettono di interagire con l'utente. In realtà, per lavorare su questo tipo di elementi abbiamo bisogno, oltre che della pagina che verrà visualizzata dall'utente anche di una pagina secondaria che verrà creata con un linguaggio più complesso come asp o php, ad esempio.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"> Quindi sono dei form quei moduli che ci permettono di iscriverci ad un sito web o di fare una ricerca all'interno di un sito. </span> </span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><br />
</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Dato che questo è un corso di html, ci occuperemo solo della parte grafica di questi elementi.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;">L'inizio e la fine di un form viene indicata dal tag </span> </span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><br />
</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><!--Questo è un form--></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b></form></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Per dare un nome al form utilizziamo l'attributo name:</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form name=”mandaci un'email></b></span></span></div><div align="JUSTIFY"><br />
<legend><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; line-height: 24px;">Con action, indichiamo l'indirizzo a cui inviare il form.</span></legend></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: black;"><span lang="en-GB"><form name= “mandaci un'email” action= “</span></span><span style="color: navy;"><span lang="zxx"><u><a class="western" href="mailto:lezioninformatica@gmail.com">mailto:lezioninformatica@gmail.com</a></u></span></span><span style="color: black;"><span lang="en-GB">”></span></span></b></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Infine, dobbiamo indicare se il metodo di invio è di tipo post o get.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span lang="en-GB"><<b>form name= “mandaci un'email” method= “post” action= “</b></span></span><b><span style="color: navy;"><span lang="zxx"><u><a class="western" href="mailto:lezioninformatica@gmail.com">mailto:lezioninformatica@gmail.com</a></u></span></span><span style="color: black;"><span lang="en-GB">”></span></span></b></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Il metodo get è indicato quando devono essere inviati pochi parametri e per lo più testuali, dato che questi vengono passati come indirizzo alla pagina che li riceverà.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Quindi nell'url di risposta avremo tutti i dati dopo il punto interrogativo:</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form name="datiUtenti" action="paginadirisposta.php"method="GET"></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b>paginadirisposta.php?nome=Mario&cognome=Rossi&datiInviati=messaggio+ di+ prova</b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Il metodo post, invece, è indicato se abbiamo una gran mole di dati e se dobbiamo passare dei dati sensibili come una password, infatti esso non usa la barra degli indirizzi, ma contatta la pagina che deve gestire i dati e poi li invia direttamente ad essa</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form name="datiUtenti" action="paginadirisposta.php"method="POST"></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">All'interno di un form, indichiamo con fieldtest delle aree in cui andremo a suddividere il nostro form</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <fieldset></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <legend> dati utente</legend></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> </fieldset></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: black;"><span lang="en-GB"> </span></span><span style="color: black;"><fieldset> </span> </b></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <legend>dati di fatturazione</legend></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: black;"> </span><span style="color: black;"><span lang="en-GB"></fieldset></span></span></b></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: black;"> <fieldset> </span> </b></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <legend>termini e condizioni</legend></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> </fieldset></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b></form></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="font-family: 'Times New Roman'; line-height: normal;"></span></span><br />
Avremo:<br />
<br />
<form><fieldset><legend> dati utente</legend></fieldset><br />
<fieldset><legend>dati di fatturazione</legend></fieldset><br />
<fieldset><legend>termini e condizioni</legend></fieldset><br />
</form></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Abbiamo creato un form con tre sezioni e con il tag <b><legend></b>, gli abbiamo assegnato un nome.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Se vogliamo dare un etichetta ad un campo, dobbiamo usare il tag <b><label></b></span></span><br />
<span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Vediamo come creare i campi.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Essi possono essere di testo, dei bottoni, una checkbox, ecc....</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Per crearli dobbiamo scrivere: <b><input type = text></b>, ad esempio se vogliamo creare un campo di testo.</span></span><br />
<span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><form></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <fieldset></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <legend> dati utente</legend></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> </fieldset></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <label> Nome: <input type= “text”></label></b></span></span></div><div align="JUSTIFY" lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b> <input type=”text”><label> : Cognome </label></b></span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b></form></b></span></span><br />
<span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></span><br />
<span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Il risultato sarà: </span></span><br />
<form><fieldset><legend> dati utente</legend></fieldset><label> Nome: <input type="“text”" /></label><br />
<input type="”text”" /><label> : Cognome </label></form><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Vediamo i vari tipi di campi:</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><ul><li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type=”text”> </b></span><span style="color: black;">= inserisce una riga di testo</span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><textarea> </b></span><span style="color: black;">più righe di testo </span><span style="color: black;"><b></texarea></b></span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type= “password”></b></span><span style="color: black;"> = inserisce il campo per una password</span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type=”checkbox” name = “option” value=”Accetto”> Accetto termini e condizioni =</b></span><span style="color: black;"> consente la scelta di più opzioni spuntando una casella</span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type= “radio” name = “option” value=”Accetto”></b></span><span style="color: black;"> Accetto termini e condizioni = come checkbox, con la differenza che si può spuntare solo una casella</span></span></div></li>
<li><div lang="en-GB" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;"><b><select><br />
<option>Privato</option><br />
<option>Partita iva</option><br />
</select></b></span></span></div></li>
</ul><div style="line-height: 150%; margin-bottom: 0cm;"><select> <option>Privato</option> <option>Partita iva</option> </select><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span lang="en-GB">= con option e select creiamo dei menù a discesa. </span></span><span style="color: black;">Questi contengono tante opzioni, quanti option ci sono tra il campo select.</span></span></div><ul><li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type= “submit” value= “invia”> </b></span><span style="color: black;">= bottone di invio</span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type= “submit” value= “cancella”></b></span><span style="color: black;"> = riporta i tutto ai valori di default</span></span></div></li>
<li><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><b><input type= “image” src =”immagine.jpg” value= “invia”></b></span><span style="color: black;"> = hanno lo stesso effetto dei valori di invio ma con la differenza che viene visualizzata un'immagine al posto del bottone</span></span></div></li>
</ul><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Nota che qui il tag input non ha bisogno di chiusura.</span></span></div><div align="JUSTIFY" style="line-height: 150%; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif;">Vedremo che questi tag possono essere formattati a piacere.</span></span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Alla prossima....</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><br />
Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-30243835989269495732011-05-31T01:11:00.000-07:002011-05-31T01:11:42.495-07:00HTML: Lezione 13 Le immagini<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
A:link { so-language: zxx }
-->
</style> <br />
<div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Lez 13 Le immagini</b></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Per inserire un immagine, dobbiamo usare il tag <b><img></b></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Scriveremo:</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><img src = “indirizzoimmagine.jpg”></b>, se vogliamo usare un link ad un immagine in posizione relativa.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><img src=”<span style="color: navy;"><span lang="zxx"><u><a href="http://www.immagine.jpg/">http://www.immagine.jpg</a></u></span></span>”></b>, se vogliamo usare un link ad un immagine in posizione assoluta.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b>Notiamo che questo tag non ha bisogno di chiusura.</b></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Le immagini che possiamo inserire in una pagina web, sono essenzialmente di tre tipi:</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">jpg, png o gif.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Aggiungendo gli attributi width e height, possiamo modificare altezza o larghezza delle immagini.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img src= “miaimmagine.png width”= “100” height =”250”>.</span></b></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Attenzione: gli attributi altezza e larghezza modificano le dimensioni dell'immagine, ma non il suo peso, quindi se abbiamo foto molto pesanti, il browser ci metterà un po' a caricarle. È bene, quindi, ridimensionare le foto più grandi, prima di utilizzarle. Molti programmini, come <a href="http://www.fotosizer.com/" target="_blank">Fotosizer</a>, permettono di farlo.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">L'attributo alt, indica al browser il testo alternativo, da mostrare se, per qualsiasi motivo, non si riesce a caricare l'immagine.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img src= “miaimmagine.gif” alt=”immagine personale”></span></b><br />
<b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></b></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">Se la descrizione dell'immagine è molto lunga, possiamo utilizzare l'attributo </span><b>longdesc</b><span style="font-weight: normal;">, al posto di alt.</span></span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Per far sì che, passando col mouse sull'immagine compaia un testo di spiegazione, possiamo usare l'attributo title:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><b><img src= “miaimmagine.jpg” title= “questa è l'immagine”></b></span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Possiamo aggiungere dei bordi all'immagini o toglierli, impostando il valore border a 0 (è il caso, ad esempio, di un'immagine che si trasforma in link, che in automatico diventa bordata di blu:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img src= “miaimmagine.gif” border=”1”></span></b></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">Per aggiungere spazio sopra e sotto l'immagine, possiamo usare il tag </span><b>Vspace</b><span style="font-weight: normal;">, e per aggiungerlo a destra e sinistra </span><b>Hspace.</b></span></div><div style="margin-bottom: 0cm; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><img src = “immagineconbordi.jpg” Vspace= “40” Hspace = “20”>.</span></b></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Con questi attributi, non è possibile dare spazi diversi a destra e a sinistra dell'immagine.</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Possiamo inserire l'immagine all'interno di un contesto e allinearla con l'attributo align:</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><ul><li><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “default” </b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;">allinea l'immagine usando gli attributi di default del browser. </span></span></span> </span></div></li>
</ul><ul><li><div style="margin-bottom: 0cm; orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “left”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea l'immagine al margine sinistro.</span></span></span></span></div></li>
</ul><ul><li><div style="margin-bottom: 0cm; orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “right”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea l'immagine al margine destro.</span></span></span></span></div></li>
<li style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “top”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea l'immagine alla parte superiore nella parte sinistra.</span></span></span></span><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; orphans: 2; widows: 2;"></div></li>
</ul><ul><li><div style="margin-bottom: 0cm; orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “middle”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea l'immagine al centro con il testo intorno.</span></span></span></span></div></li>
</ul><ul><li><div style="margin-bottom: 0cm; orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “bottom”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea ll'immagine alla parte inferiore con il testo intorno.</span></span></span></span></div></li>
</ul><ul><li><div style="orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><b>Align= “center”</b></span></span><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;"> allinea l'immagine al centro</span></span></span></span></div></li>
</ul><div style="orphans: 2; text-align: justify; widows: 2;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-style: normal;"><span style="font-weight: normal;">Per avere un'idea di come si dispone il testo intorno all'immagine puoi visitare il sito </span></span></span><span style="color: navy;"><span lang="zxx"><u><a href="http://www.pagetutor.com/align/index.html">http://www.pagetutor.com/align/index.html</a></u></span></span></span></div><div style="font-weight: normal; margin-bottom: 0cm; text-align: justify;"><br />
</div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-46601780590820562182011-05-31T01:02:00.000-07:002011-05-31T01:02:41.599-07:00HTML: Lezione 11 I link (II parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
PRE.cjk { font-family: "WenQuanYi Micro Hei", monospace }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b>Lez 12 I link II parte</b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">I link, di default, sono di colore blu e di quando è visitato diventa di colore viola, però è possibile cambiare questi attributi.</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Gli attributi dei link possono essere modificati in tutta la pagina, aggiungendo il valore al tag body:</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b><body link="#3300FF" vlink="#990066" alink="#CC0000"> </b></span></span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Questo codice significa che il link è celeste (link = “”), quelli visitati saranno di colore viola (vlink = “”), e al passaggio del mouse diventeranno rossi (alink= “”). Questo per tutti i link che andremo ad inserire nella nostra pagina. Provare per credere!</span></span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Se invece vogliamo cambiare il colore di un solo font, basterà applicare il tag font dopo <a>.</span></span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Ad esempio:</span></span></div><div align="JUSTIFY" style="font-style: normal; font-weight: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b><a href= “indirizzo.html><font color= “#FF3300”> Il mio link </font></a></b></span></span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Infine se scriviamo:</span></span></div><div align="JUSTIFY" style="font-style: normal; margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><pre class="western" style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a </b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>target="_blank" href="http://www.ilmiosito.it">visita il mio sito</a></b></span></span></span>
<span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>Target=”_blank”, </b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">vuol dire che il nostro link si aprirà in una nuova finestra, lasciando intatta quella su cui ci troviamo.</span></span></span></span>
<span style="color: black;"><span style="font-size: small;">Se scriviamo:</span></span>
<span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a title="Corsi di informatica" </b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>href="http://www.lezioninformatica.blogspot.it" target="_blank" >Visita Lezioni di informatica</a></b></span></span></span>
<span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">L'attributo </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>title</b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"> riporta un testo che spiega di cosa si occupa il link a cui stiamo accedendo. Prima di cliccarci sopra, possiamo portare il mouse sul link e aspettare, dopo qualche secondo comparirà il testo esplicativo.</span></span></span></span></span></pre>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-3990944397449406422011-05-31T00:59:00.000-07:002011-05-31T01:00:58.295-07:00HTML: Lezione 11 I link (I parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
A:link { so-language: zxx }
-->
</style> <br />
<div style="margin-bottom: 0cm; text-align: justify;"><b><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Lez 11 I link prima parte</span></b></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">L<span style="font-size: small;">a particolarità delle pagine web è proprio quella di essere collegate tra di loro da link. Ogni elemento di una pagina web può essere un link, basta solo racchiuderlo tra gli appositi tag. Quindi può essere un link una frase, ad esempio, o un'immagine o un menù.</span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Il tag da utilizzare sarà:</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;"><b><a href=”risorsarsacuipuntare.html”></b></span><span style="font-size: small;"> Questo è un link </span><span style="font-size: small;"><b></a></b></span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;"><b><br />
</b></span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;">Il risultato sarà una scritta su cui cliccare e che porterà alla pagina </span><span style="font-size: small;"><i>risorsacuipuntare.html</i></span><span style="font-size: small;"> (sempre che una pagina html con questo nome sia stata opportunamente creata).</span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Se la pagina a cui puntare è del tipo: pagina.zip, pagina.exe, verrà chiesto all'utente di scaricare il file in questione, se invece punta ad un'immagine verrà visualizzata sul proprio browser.</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: small;">Se invece l'indirizzo è </span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href="mailto:indirizzoemil@nomesito.it"> Manda una e-mail</a></b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">, si aprirà il client di posta predefinito (come Outlook o Windows mail) del vostro pc con l'indirizzo email già scritto nella barra del destinatario.</span></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">I link possono avere un </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>percorso relativo o un percorso assoluto</b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">, riportare a pagine interne al nostro sito o ad esterne.</span></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">Se vogliamo che il link punti ad un </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>sito esterno</b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"> dovremmo scrivere il percorso completo del sito completo di http, ad esempio:</span></span></span></span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"><br />
</span></span></span></span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"><</span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>a href=”</b></span></span></span><span style="color: navy;"><span lang="zxx"><u><a href="http://facebook.it/"><span style="font-size: small;"><b>http://facebook.</b></span></a></u></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>com> Link a facebook </a></b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">, rimanda al sito di facebook</span></span></span></span></span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"><br />
</span></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;">Il link: </span></span> </span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href=”</b></span></span></span><span style="color: navy;"><span lang="zxx"><u><a href="http://lezioninformatica.blogspot.com/2011/04/html-lezione-4-creare-le-tabelle-i.html"><span style="font-size: small;"><b>http://lezioninformatica.blogspot.com/2011/04/html-lezione-4-creare-le-tabelle-i.html</b></span></a></u></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b>”> creare tabelle html </a></b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;"> , rimanda esattamente alla pagina in cui si parla delle tabelle.</span></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Possiamo, quindi usare dei percorsi assoluti (quelli utilizzati qui sopra) anche per indicare le pagine del nostro stesso sito web.</span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;">In realtà, per navigare all'interno della propria pagina web è preferibile utilizzare dei percorsi relativi. </span></span> </span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">Se la pagina collegata al link si trova nella stessa cartella in cui scriveremo il link basterà scrivere: </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href=”nomepagina.html”> link nella stessa cartella </a></b></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">Se invece la pagina si trova in una sottodirectory dovremmo scrivere il percorso dal punto in cui ci troviamo, ad esempio : </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href=”cartella/sottocartella/file.html> Link in cui siamo scesi di due sottocartelle </a></b></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">Se invece dobbiamo salire di una cartella rispetto a dove ci troviamo : </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href=”../file.html>, di due cartelle : <a href=”../../file.html> </b></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">e così via.</span></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><span style="font-weight: normal;">Allo stesso modo possiamo salire e scendere di una cartella : </span></span></span></span><span style="color: black;"><span style="font-size: small;"><span style="font-style: normal;"><b><a href=”../scendo/file.html”></b></span></span></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Una cosa da ricordare è che le maiuscole e le minuscole fanno la differenza, quando si scrive il nome del file non bisogna lasciare spazi vuoti ma scrivere ad esempio file_con_più_parole.html.</span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Infine, possiamo creare delle ancore all'interno della pagina stessa. Le ancore sono dei link che rimandano ad un contenuto della stessa pagina. Prendete ad esempio la pagina di un manuale che, nella parte superiore ha l'elenco dei titoli dei vari paragrafi e, cliccandoci sopra, ti porta direttamente a quel paragrafo.</span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><span style="color: black;"><span style="font-size: small;">Il link viene scritto: </span></span> </span></div><div style="font-style: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b><a href="#ancora1">Primo paragrafo</a></b></span></span></div><div style="font-style: normal; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">La destinazione del link sarà racchiusa dal tag:</span></span></div><div style="font-style: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b><a name="ancora1">In questo paragrafo parleremo di ….</a></b></span></span></div><div style="font-style: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;"><b><br />
</b></span></span></div><div style="font-style: normal; margin-bottom: 0cm; text-align: justify;"><span style="color: black;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: small;">Alla prossima.....</span></span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-12087932726147113372011-05-26T11:14:00.000-07:002011-05-26T11:14:13.670-07:00HTML: lezione 10 Gli elenchi<style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style><style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Lez. 10 <b>Gli elenchi</b></span></div><div></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Gli elenchi possono essere<b> ordinati</b> (quindi numerati) o no (contrassegnati da punti).</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Per creare<b> elenchi ordinati</b> dobbiamo utilizzare il tag <b><ol></b>. Ogni elemento della lista sarà contrassegnato dal tag <b><li></b></span></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Quindi avremo:</span></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"><ol></span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"> <li> Primo elemento</span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"> <li> Secondo elemento</span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"></ol></span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><i><span style="font-size: small;"><br />
</span> </i></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><i><span style="font-size: small;">Nota bene: i tag li non vengono chiusi.</span></i></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Di defaul utilizzando il tag<b> <ol> </b>viene utilizzata la notazione numerica, se vogliamo cambiarla dovremmo aggiungere l'attributo type, così : <b><old type =”I”></b></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Quindi avremo:</span></div><div style="text-align: justify;"></div><ul style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type=”1”</b> per i numeri arabi</span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type=”a”</b> per le lettere minuscole</span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type = “A”</b> per le lettere maiuscole</span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type = “i”</b> per i numeri romani in minuscolo</span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type = “I” </b>per i numeri romani in maiuscolo</span></div></li>
</ul><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Aggiungendo <b><ol start = “6”></b> , ad esempio imponi che il primo numero della lista sia un cinque. Se il type un numero romano comincerà dal simbolo V</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Gli elenchi non ordinati sono contrassegnati dal tag <b><ul></b></span></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Quindi:</span></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><br />
</div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"><ul></span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"> <li>Primo elemento</span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"> <li> Secondo elemento</span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><b><span style="font-size: small;"></ul></span></b></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Anche qui si può inserire il type:</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><ul style="font-family: Arial,Helvetica,sans-serif; text-align: justify;"><li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type= “disc” </b><span style="font-weight: normal;">per un cerchio pieno</span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type= “circle” </b><span style="font-weight: normal;">per un cerchio vuoto</span></span></div></li>
<li><div style="margin-bottom: 0cm;"><span style="font-size: small;"><b>type= “square” </b><span style="font-weight: normal;">per un quadrato pieno</span></span></div></li>
</ul><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Apriamo un editor di testo e scriviamo:</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><html></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <head></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <title> Gli elenchi </title></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> </head></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <body></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <h1> Questo è il mio elenco</h1></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <ul type="disc"></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <li>Primo elemento</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><ul type =circle"></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <li> <p>elemento interno</p></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"></ul></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <li> Secondo elemento</span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> </ul></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <ol type ="I" start = "3"></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <li> <font color = "red">Terzo elemento </span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> <li> Quarto elemento</font></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> </ul></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> </body></span></div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"><br />
</span> </div><div style="text-align: justify;"></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"></html></span></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><br />
</div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;">Il risultato sarà:</span></div><div style="font-family: Arial,Helvetica,sans-serif; font-weight: normal; margin-bottom: 0cm; text-align: justify;"><span style="font-size: small;"> </span></div><br />
<h1>Questo è il mio elenco</h1><br />
<ul type="disc"><li>Primo elemento<br />
<br />
<ul type="circle""><li> elemento interno<br />
<br />
</li>
</ul></li>
<li> Secondo elemento<br />
<br />
</li>
</ul><ol start="3" type="I"><li> <span style="color: red;">Terzo elemento <br />
<br />
</span></li>
<li><span style="color: red;"> Quarto elemento</span></li>
</ol><br />
Alla prossima.....Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-61622308031970774712011-05-21T01:05:00.000-07:002011-05-21T01:07:12.747-07:00HTML: Lezione 9 Il testo (III Parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> <br />
<div style="margin-bottom: 0cm;"><title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
-->
</style> </div><div style="margin-bottom: 0cm;">Il testo III parte</div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;">Il tag <font> è quello che ci permette di modificare il tipo di carattere, la grandezza, il colore ecc...</div><div style="margin-bottom: 0cm;">Bisogna ricordare che esso è un tag deprecato dal W3C, ma noi stiamo imparando l'HTML ed è giusto sapere che questo tag esiste.</div><div style="margin-bottom: 0cm;">Di default il nostro browser visualizza sempre il font Times new Roman, quindi dobbiamo dirgli che tipo di font vogliamo che venga visualizzato per quella frase. Anche qui valgono le regole già dette nella lez. 7, ovvero che se vogliamo utilizzare un font particolare è meglio crearlo come immagine, altrimenti se la macchina client non ha quel font installato la vedrà diversamente da come volevamo.</div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;">Gli attributi da assegnare a font sono quindi:</div><div style="margin-bottom: 0cm;"><br />
</div><ul><li><div style="margin-bottom: 0cm;"><b>Face = nome del font</b></div></li>
</ul><div style="margin-bottom: 0cm;"><font face = Arial> testo in Arial</font></div><div style="margin-bottom: 0cm;"><br />
</div><ul><li><div style="margin-bottom: 0cm;"><b>color = colore testo</b></div></li>
</ul><div style="margin-bottom: 0cm;"><font color = “#ff63cde”> testo in violetto </font></div><div style="margin-bottom: 0cm;"><font color =”violet”>testo in violetto </font></div><div style="margin-bottom: 0cm;">Anche qui possiamo usare il nome o l'esadecimale del colore.</div><div style="margin-bottom: 0cm;"><br />
</div><ul><li><div style="margin-bottom: 0cm;"><b>Size =grandezza del font</b></div></li>
</ul><div style="margin-bottom: 0cm;">La grandezza del font può essere espressa con un numero da 1 a 7:</div><div style="margin-bottom: 0cm;"><font size=7”> testo più grande</font></div><div style="margin-bottom: 0cm;">oppure con un numero relativo rispetto alla grandezza del font di base, ed in questo caso aggiungiamo un più o un meno:</div><div style="margin-bottom: 0cm;"><font size= “+3”> testo più grande di 3 rispetto al testo base </font></div><div style="margin-bottom: 0cm;">Il testo base di default è 3, se non gli abbiamo assegnato un altro valore</div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;">Detto questo apriamo la tabella creata nella quarta lezione e divertiamoci a formattare il testo (le modifiche al fiale originale sono evidenziate in grassetto)</div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><html></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><head></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><b><title> Il testo formattato</title></b></div><div style="margin-bottom: 0cm;"></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></head></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><b><body basefont="4"></b></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><table align ="center" border="1" <b>bordercolor ="red" bgcolor="#3399FF"</b> cellspacing="0"></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><tr><td colspan="2"><b><h1>Prima riga larga quanto due celle</h1></b></td><tr></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><tr></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><td rowspan= "2"><b><font size="-2"></b> prima cella seconda riga alta due righe</font></td></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><td> <b><font color ="red"></b>seconda cella seconda riga la metà</font></td></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><tr></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"><td><b><font size ="5"></b> terza cella seconda riga la metà</font></td></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></tr></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></table></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></body></div><div style="margin-bottom: 0cm;"><br />
</div><div style="margin-bottom: 0cm;"></html><br />
<br />
Il risultato sarà qualcosa di questo tipo : </div><br />
<br />
<table align="center" bgcolor="#3399FF" border="1" bordercolor="red" cellspacing="0"><tbody>
<tr><td colspan="2"><h1>Prima riga larga quanto due celle</h1></td> </tr>
<tr> </tr>
<tr> <td rowspan="2"> prima cella seconda riga alta due righe</td> <td><span style="color: red;">seconda cella seconda riga la metà</span></td> </tr>
<tr> <td><span style="font-size: large;"> terza cella seconda riga la metà</span></td> </tr>
</tbody></table><br />
<div>Alla prosssima....<br />
<br />
</div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-87227184929727984972011-05-17T05:33:00.000-07:002011-05-17T05:33:38.284-07:00Algoritmi interativi: I primi n numeri di Fibonaccipackage algoritmi_iterativi;<br />
<br />
/**<br />
* Generare i primi n numeri della successione di FIbonacci<br />
* @author linformatico<br />
* @version 1.0- Maggio 2010<br />
*<br />
*/<br />
public class Fibonacci {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>private int nuovo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>private int ultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>private int penultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>private int numeriDaAddizionare;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>public Fibonacci (int n){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>numeriDaAddizionare = n;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>penultimo= 0;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>ultimo = 1;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>public int getPenultimo (){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return penultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>public int getUltimo (){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>return ultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>public void successivo (){<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>int i=2;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>while ( i <= numeriDaAddizionare) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>nuovo = ultimo + penultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println ("Il numero successivo è : " + nuovo);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>penultimo = ultimo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>ultimo = nuovo;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>i++;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>public static void main(String[] args) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>final int SEQUENZA = 10;<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>Fibonacci serie = new Fibonacci (SEQUENZA);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println("Il primo numero della serie di Fibonacci è : " + serie.getPenultimo());<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>System.out.println ("Il secondo numero della serie di FIbonacci è : " + serie.getUltimo());<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>serie.successivo();<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>}<br />
<br />
}Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-79470628879552595542011-05-14T01:57:00.000-07:002011-05-31T01:05:36.587-07:00Filezilla e Aruba: ip not allowed<div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Se state cercando di connettervi al vostro sito <b>Aruba</b> tramite ftp <b>Filezilla</b> e non vi riuscite perché vi viene mostrato l'errore <b>Ip not address allowed</b>, non preoccupatevi. Si tratta di un'impostazione di Aruba che filtra gli indirizzi ip che accedono al sito web.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Basterà andare sulla pagina di Aruba e accedere col proprio nome utente e password.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Nella schermata iniziale vi verrà mostrato il link : <b>FiIltro accessi ip.</b></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Entrateci e in alto a destra vedrete il vostro indirizzo ip. Copiatelo e aggiungetelo agli indirizzi.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Una volta cliccato su Aggiungi e scritto correttamente il <b>captcha</b> (le lettere visibili nell'immagine in basso) cliccate su Salva e provate a riconnettervi con Aruba.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Adesso dovreste riuscire ad entrare nel vostro sito.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Attenzione: se usate un indirizzo ip dinamico, questo cambierà ad ogni riavvio del pc e dovrete ripete la procedura ogni volta, quindi il mio consiglio è di utilizzare un indirizzo statico.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Adesso sto cercando di capire come togliere definitivamente il filtro Accessi da Aruba, appena lo scopro ve lo faccio sapere.</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Spero di esservi stata utile.</span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com7tag:blogger.com,1999:blog-1197714153216949218.post-12207619845255351582011-05-14T01:46:00.001-07:002011-05-14T01:48:34.427-07:00HTML: Lezione 8 Il testo (II Parte)<title></title> <style type="text/css">
<!--
@page { margin: 2cm }
P { margin-bottom: 0.21cm }
A:link { color: #0000ff }
-->
</style> <br />
<div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Il testo e i contenitori </span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Il </span></span><span class="Apple-style-span" style="font-family: Arial, sans-serif;">testo può essere racchiuso in appositi “contenitori” che lo rendono più ordinato e leggibile.</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>Titolo:</b></span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Il nostro testo può essere racchiuso tra i tag che lo identificano come titolo. I tag titolo sono 6 e si distinguono a seconda della grandezza che danno al testo. Si va dal più piccolo </span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b><h6> al</b></span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> più grande </span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b><h1>.</b></span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> Il tag titolo dà al testo il grassetto e lascia una riga vuota tra sé e il resto del testo all’interno della pagina. </span></span> </div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Il tag titolo riveste un’importanza fondamentale per i motori di ricerca che utilizzano questa informazione per estrapolare le informazioni sul contenuto di una pagina.</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>Paragrafo:</b></span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Con il tag</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b><p> Questo è un paragrafo </p></b></span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Con questo tag si racchiude un paragrafo di testo. Esso lascia una riga vuota dopo il tag di chiusura e una prima del tag di apertura.</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>Blocco di testo:</b></span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">I<b>l tag <div> manda la frase a capo ma a differenza di <p> non lascia righe vuote.</b></span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">In alternativa per andare a capo dopo la fine della riga è possibile usare il tag </span></span><span style="font-family: 'Courier New', monospace;"><span style="font-size: medium;"><b><br /></b><span class="Apple-style-span" style="color: #881280;">. </span></span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Con due <br /> uno dopo l’altro abbiamo lo stesso effetto dopo il tag </p> ovvero lascia una riga vuota.</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Infine abbiamo l’elemento <b><span></b> che racchiude un blocco di testo che non va a capo ma può essere utile per associare una parte di testo ad uno stile con i CSS. LO span è un elemento inline (vedi </span></span><span style="color: blue;"><u><a href="http://basic.html.it/guide/lezione/15/classificazione-di-elementi-e-tag-xhtml/">http://basic.html.it/guide/lezione/15/classificazione-di-elementi-e-tag-xhtml/</a></u></span>)</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><br />
</div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">All’interno dei tag contenitore è possibile inserire il tag align, ad esempio </span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b><p align =”justify”> </b></span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">o <</span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><b>div align =”center”></b></span></span><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"> anche se l’uso di questi tag è deprecato ed è sostituibile con i fogli di stile.</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Facciamo un esempio: </span></span> </div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;">Apriamo il nostro editor di testo e scriviamo</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span style="font-family: Arial, sans-serif;"><span style="font-size: small;"><br />
</span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><htm></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><head></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><title> I contenitori HTML</title></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><meta name ="robots" content ="index, follow"></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><meta name= "keywords" content ="il testo in htm, i tag <p> <div> <br/> in html, html, corso html, i tag contenitori"></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><meta name ="description" content ="il teto in html"></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></head></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><body></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><h1 align="center"> I CONTENITORI IN HTML</h1></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p align="left"> Questo è il primo paragrafo del mio testo</p></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div align="right">Questo è il mio primo blocco di testo formattato a destra</div></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><div><b>Questo è il mio secondo blocco di testo in grassetto</b></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><hr noshade size="3" width="70%" align="center" /></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></div></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><p> </span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span><i><font color ="#990066" face="Arial">Secondo paragrafo in Arial e viola</font><br/></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span> <span class="Apple-tab-span" style="white-space: pre;"> </span>Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote <br/><br/><br/></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Dopo riprendo a scrivere</i></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></p></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><span class="Apple-tab-span" style="white-space: pre;"> </span></body></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"></html></span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br />
</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;">Il risultato sarà una cosa del tipo:</span></div><div align="JUSTIFY" style="margin-bottom: 0cm;"><span class="Apple-style-span" style="font-family: Arial, sans-serif;"><br />
</span></div><br />
<h1 align="center">I CONTENITORI IN HTML</h1><div align="left">Questo è il primo paragrafo del mio testo</div><div align="right">Questo è il mio primo blocco di testo formattato a destra</div><div><b>Questo è il mio secondo blocco di testo in grassetto</b><br />
<hr align="center" noshade="" size="3" width="70%" /></div><i><span style="color: #990066; font-family: Arial;">Secondo paragrafo in Arial e viola</span><br />
<br />
Sono andato a capo all'interno del secondo paragrafo e dopo di me lascio due righe vuote <br />
<br />
<br />
<br />
<br />
Dopo riprendo a scrivere</i><br />
<br />
<i><br />
</i><br />
Alla prossima....<br />
<br />
Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-24161329776551764092011-05-03T07:42:00.000-07:002011-05-03T07:43:14.919-07:00HTML: Lezione 7 Il testo (I parte)<div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Il testo<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Quando scriviamo testo in un sito web è bene ricordare che esso verrà visualizzato sul pc dell’utente a seconda che egli abbia o meno gli stessi font installati sul proprio computer. Quindi se usiamo un font particolare, molto probabilmente il nostro utente non potrà visualizzarlo e lo trasformerà in uno dei font installati sul proprio pc. Quindi è inutile ricorrere a scritte troppo elaborate, se proprio lo vogliamo fare (per un logo o per il titolo della pagina) possiamo elaborare la scritta come immagine ed inserirla in questo maniera.<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Vediamo i tag:<o:p></o:p></span><br />
<span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">aggiungendo in <b style="mso-bidi-font-weight: normal;"><body test=""></b> possiamo dare un colore a tutto il testo, se non viene impostato allora sarà nero, per default.<o:p></o:p></span><br />
<span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Con il tag <b style="mso-bidi-font-weight: normal;"><basefont =""></b></span><span class="Apple-style-span" style="font-family: Arial, sans-serif; font-size: 16px; line-height: 18px;">, inserito all’interno dell’head, possiamo dare degli attributi generali al testo della pagina.</span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-US" style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><basefont face="arial,verdana,courier" size="5" color ="#FFFFFF"> . <o:p></o:p></span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Vediamo cosa significa questa scritta:<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Size</span></b><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"> = grandezza testo tra 1 e 7;<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">color </span></b><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">= colore del testo;<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">face</span></b><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"> = tipo di carattere<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">(Questi attributi non hanno effetto sul testo contenuto in una tabella, anche se come tag è deprecato)<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Fondamentali per la nostra pagina web sono i <b style="mso-bidi-font-weight: normal;">link</b>, ovvero i collegamenti tra una pagina e l'altra. Se vogliamo far diventare la nostra frase un link dobbiamo aggiungere il tag <b style="mso-bidi-font-weight: normal;"><a href><o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><a href="indirizzolink"></span></b><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"> Clicca qui per visitare questa pagina<b style="mso-bidi-font-weight: normal;"></a><o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;">Il nostro testo può essere formattato come solitamente facciamo con programmi come Open Office o Microsoft Word. Vediamo alcuni tag:<o:p></o:p></span></div><div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-align: justify; text-indent: -18.0pt;"><br />
<ul><li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><b> testo in grassetto </b></span></b></li>
<li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><i> testo i ncorsivo </i></span></b></li>
<li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><u> testo sottolineato </u></span></b></li>
<li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><strike> testo sbarrato </strike></span></b></li>
<li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><sup> apice </sup></span></b></li>
<li><span style="font-family: Symbol; font-size: 12pt; line-height: 115%;"><span style="font: normal normal normal 7pt/normal 'Times New Roman';"> </span></span><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif; font-size: 12pt; line-height: 115%;"><sub> pedice </sub></span></b></li>
</ul></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;">Adesso apriamo il file salvato durante la creazione della prima tabella e diamogli un po’ di formattazione e salviamo il file come tabella formattata.html (le modifiche sono evidenziate in grassetto):<o:p></o:p></span><br />
<span style="font-family: Arial, sans-serif;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"><html><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> <head><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> <title> La mia tabella</title><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> <meta name ="robots" content ="index, follow"><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> </span><span style="font-family: Arial, sans-serif;"><meta name= "keywords" content ="tabella, creare tabelle in html, html, corso html"><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <meta name ="description" content ="la mia prima tabella html"><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span lang="EN-US" style="font-family: Arial, sans-serif;"><basefont size="7"><o:p></o:p></span></b></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> <meta name = "author" content ="IlmioNome"><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> </head><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span lang="EN-US" style="font-family: Arial, sans-serif;"> <b style="mso-bidi-font-weight: normal;"><body bgcolor="#000000" text="white"><o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: Arial, sans-serif;">Questa è la mia tabella<o:p></o:p></span></b></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <table align ="center" border="1" <b style="mso-bidi-font-weight: normal;">bordercolor=”black” bgcolor="black"</b> cellspacing="0"><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <tr><td colspan="2" align= "center">Prima riga larga quanto due celle</td><tr><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <tr><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <td rowspan= "2<b style="mso-bidi-font-weight: normal;">"><b> prima cella</b></b> seconda riga alta due righe</td><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <td> <b style="mso-bidi-font-weight: normal;"><b>seconda cella</b></b> seconda riga la <<b style="mso-bidi-font-weight: normal;">i>metà</i></b></td><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <tr><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> <td<b style="mso-bidi-font-weight: normal;">><b> terza cella</b></b> seconda riga la <b style="mso-bidi-font-weight: normal;"><i>metà</i></</b>td><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> </tr><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> </table><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"> </body><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"></html><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;">Il risultato sarà una pagina con sfondo nero e scritte in bianco.</span><br />
<span style="font-family: Arial, sans-serif;"><br />
</span><br />
<span style="font-family: Arial, sans-serif;">Alla prossima....</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: Arial, sans-serif;"><br />
</span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0tag:blogger.com,1999:blog-1197714153216949218.post-37852386638347142742011-05-02T10:18:00.000-07:002011-05-02T10:18:11.644-07:00HTML: Lez 6 Lo sfondo<div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Lo sfondo<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Come abbiamo già visto per le tabelle, è possibile applicare un colore di sfondo o un'immagine alla nostra pagina.<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Gli attributi disponibili sono gli stessi visti per le tabelle, solo che verranno inseriti all'interno del tag body:<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><body bgcolor=””></span></b><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"> = seguito dal nome inglese del colore o il numero esadecimale corrispondente al colore. Ad es. se vogliamo il colore rosso possiamo scrivere <i style="mso-bidi-font-style: normal;"><body bgcolor="red"></i> oppure <i style="mso-bidi-font-style: normal;"><body bgcolor="#FF0000"><o:p></o:p></i></span></div><div class="MsoNormal" style="text-align: justify;"><br />
</div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Il modo in cui i colori verranno visualizzati dal visitatore della nostra pagina web dipende dalla risoluzione dello suo schermo che va <b style="mso-bidi-font-weight: normal;">da 256 a 65.536 colori.<o:p></o:p></b></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><b style="mso-bidi-font-weight: normal;"><br />
</b></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Per essere sicuri che il visitatore del nostro sito web veda i colori così come vorremmo è possibile attenersi alla tavola di colori <b style="mso-bidi-font-weight: normal;">web safe</b>, per essere perlomeno certi che i colori siano visibili allo stesso modo anche dai monitor più vecchi (anche se oggigiorno sono sempre meno le persone che hanno un monitor a 256 colori). La lista dei colori web safe si può trovare alla pagina <b style="mso-bidi-font-weight: normal;"><a href="http://www.coloriwebsafe.it/" target ="blank">www.coloriwebsafe.it</a>.</b><o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><b style="mso-bidi-font-weight: normal;"><br />
</b></span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><body background="immagine.jpg"> </span></b><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">= diamo alla pagina un'immagine di sfondo.<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><body bgproperties="fixed"></span></b><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"> = lo sfondo rimarrà fisso anche se l'utente scorre la pagina<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><body leftmargin="0"></span></b><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"> = se non vogliamo che vi sia del margine tra la pagina e il bordo </span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">sinistro della finestra del browser<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><b style="mso-bidi-font-weight: normal;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><body rightmargin="0"></span></b><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"> = se non vogliamo che vi sia del margine tra la pagina e il bordo </span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">sinistro della finestra del browser<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">E' bene ricordare che questi tag sono deprecati dal W3C e che è consigliato l'uso di questi attributi in un foglio di stile, piuttosto.<o:p></o:p></span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;">Alla prossima.... </span></div><div class="MsoNormal" style="text-align: justify;"><span style="font-family: "Arial","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br />
</span></div>Anonymoushttp://www.blogger.com/profile/07912196611215182803noreply@blogger.com0