tag:blogger.com,1999:blog-45992373441870186082024-03-14T04:07:05.735-07:00Free HTML CSS PHP JAVA SCRIPTPiccoli trucchi per risolvere grandi problemi di HTML CSS PHP JavaScriptUnknownnoreply@blogger.comBlogger32125tag:blogger.com,1999:blog-4599237344187018608.post-80653541499986577212012-06-27T06:54:00.000-07:002012-06-27T06:55:19.857-07:00Pagina indietro con JavaScript<h2>
Vediamo come realizzare un semplice pulsante <span style="color: #6aa84f;"><b>« </b><b>indietro</b></span> con JavaScript</h2>
Spesso può capitare di volere inserire in una nostra pagina il pulsante <b>« indietro</b>. Può essere utile ad esempio in una schermata dove controlliamo i dati inseriti in un form, e qualora i dati siano errati, con il pulsante <b>« </b>
<b>indietro</b> si può rimandare il nostro utente alla pagina di provenienza, per controllare eventuali errori o dati mancanti.<br />
<h3>
Vediamo il codice</h3>
<pre class="brush: js;"><a href="" onClick="javascript:history.back();return false">« indietro</a>
</pre>
<h3>
Spieghiamo</h3>
Per controllare lo storico della navigazione dell'utente, utilizziamo <b>history.back()</b> di JavaScript.<br />
Possiamo ottenere lo stesso risultato anche utilizzando <b>history.go(-1)</b><span style="background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px;">. </span><br />
<h3>
Vediamo come</h3>
<pre class="brush: js;"><a href="" onClick="javascript:history.go(-1);return false">« indietro</a>
</pre>
<h3>
Spieghiamo
</h3>
Utilizzando <b>history.go(-1)</b> l'utente verrà rimandato indietro di una pagina, rispetto allo storico della sua navigazione.<br />
Volendo posso impostare un numero diverso di "passi indietro".<br />
<h3>
Vediamo come</h3>
<pre class="brush: js;"><a href="" onClick="javascript:history.go(-3);return false">« indietro</a>
</pre>
<h3>
Spieghiamo</h3>
<br />
In questo caso, cliccando <b>« indietro </b>l'utente farà 3 passi indietro sullo storico della sua navigazione.<br />
<h3>
Nota bene</h3>
Se inseriamo il link <b>« indietro </b>su una pagina B che normalmente l'utente raggiunge da un'altra pagina A del nostro sito, ma per un caso fortuito la pagina B può essere raggiunta anche da un sito esterno C, chiaramente il pulsante <b>« indietro </b>invierà l'utente, al sito esterno C dal quale proviene.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-59584196053862673172012-06-26T08:39:00.000-07:002012-06-26T08:42:39.159-07:00Trovare e gestire URL con PHP<h2>
Vediamo come trovare e gestire l'URL della pagina con PHP</h2>
La gestione dell'URL con PHP è molto semplice e sicura, essendo realizzata lato server.<br />
PHP offre diverse soluzioni per individuare l'URL intero o una parte di esso.<br />
<h3>
Vediamo un esempio</h3>
<div class="esempio">
Il tuo URL attuale è:<br><span style="color: red;">http://free-html-scripts.blogspot.it/2012/06/trovare-e-gestire-url-con-php.html</span></div>
<h3>
Vediamo il codice</h3>
<pre class="brush: php"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>URL CON PHP</title>
</head>
<body>
<?php
$url_attuale = 'http://'.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
echo '<p>Il tuo URL attuale è: <span style="color:red">';
echo $url_attuale;
echo'</span></p>';
?>
</body>
</html>
</pre>
<h3>
Spieghiamo</h3>
Ho impostato una variabile <b>$url_attuale</b> (vedi riga 11 dell'esempio riportato sopra) e grazie a <b>$_SERVER["HTTP_HOST"]</b> trovo il nome del dominio, poi concateno con il punto <b>$_SERVER["REQUEST_URI"]</b> che mi fornisce la parte di URL restante.<br />
<br />
Il risultato è l'URL completo.<br />
Da adesso in poi potremo utilizzare la variabile <b>$url_attuale</b> tutte le volte che vorremo all'interno della pagina PHP.<br />
<h3>
Nota bene</h3>
L'estensione della pagina deve essere necessariamente .php esempio: <span style="color: #6aa84f;">example</span><span style="color: red;">.php</span>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-87699469748886176732012-06-26T06:30:00.000-07:002012-06-26T06:30:25.124-07:00Trovare URL pagina con JavaScript<h2>
Vediamo come conoscere e utilizzare l'URL della nostra pagina attuale con JavaScript.</h2>
Trovare l'url della pagina con JavaScript è molto semplice, basta utilizzare <b>self.location.href</b>.<br />
<h3>
Vediamo come</h3>
<pre class="brush: js; highlight: [9]"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>URL con JavaScript</title>
<script>
function mio_url(){
document.getElementById('scriviqui').innerHTML="Il tuo URL è: <span style='color:red'>" + self.location.href + "</span>";
}
</script>
</head>
<body>
<a href="#" onClick="mio_url()">Stampa a video il mio URL</a>
<p id="scriviqui"></p>
</body>
</html>
</pre>
<div>
<br /></div>
<h3>
Spieghiamo</h3>
In questo semplice esempio, creo la funzione<b> mio_url()</b>, con la quale individuo l'elemento che nella pagina ha <b>id=scriviqui</b> e ci stampo dentro l'url della mia pagina, trovato con <b>self.location.href</b>.
Da notare che per stampare l'URL ho utilizzato <b>innerHTML</b> (vedi riga 9 dell'esempio riportato sopra).
<br />
<br />
Volendo posso utilizzare l'URL così recuperato, per stampare un alert, un piccolo messaggio a video con il risultato.<br />
<h3>
Vediamo come</h3>
<pre class="brush: js; highlight: [9]"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>URL con JavaScript</title>
<script>
function mio_url(){
alert("Il tuo URL è:\n" + self.location.href);
}
</script>
</head>
<body>
<a href="#" onClick="mio_url()">Visualizza alert con il mio URL</a>
</body>
</html>
</pre>
<h3>
Spieghiamo</h3>
In questo caso stamperemo l'URL della nostra pagina attuale in un messaggio alert (vedi riga 9 dell'esempio riportato sopra).Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-52319353732193164662012-06-24T03:52:00.000-07:002012-06-24T04:15:52.351-07:00Overlay Banner con chiusura a tempo<h2>
Vediamo come realizzare un overlay, ovvero un livello sopra i contenuti, con chiusura a tempo.</h2>
<h3>
Esempio</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiE7J31FbzRbgHoLYQursV6mhuUehtXNADXZl-6KeIWh7CaYnX_pwJbwLH7INcKfS5ajjSJ-K3eCK_cpt2ii7q-H7B15XQjKHkC-OAWtx2mgHECYa-oMCzPRQm2KIx4UFqnjGAN2jt5oA/s1600/banner.gif" imageanchor="1" style="margin-left: 0em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiE7J31FbzRbgHoLYQursV6mhuUehtXNADXZl-6KeIWh7CaYnX_pwJbwLH7INcKfS5ajjSJ-K3eCK_cpt2ii7q-H7B15XQjKHkC-OAWtx2mgHECYa-oMCzPRQm2KIx4UFqnjGAN2jt5oA/s1600/banner.gif" /></a></div>
<br />
Con un Overlay possiamo facilmente e con poche righe di codice, visualizzare un div contenente testo e foto, o solitamente un banner pubblicitario, che scompare dopo un tempo prestabilito.<br />
<h3>
Vediamo il codice Java Script</h3>
<pre class="brush: js;"><script type="text/javascript">
function timeout(){
setTimeout(function(){
document.getElementById('banner').style.display="none"
}, 5000);
}
</script>
</pre>
<h3>
Un po' di CSS</h3>
<pre class="brush: css;"><style type="text/css">
body {
margin:0 auto;
}
#content {
position: absolute;
height: 70%;
width: 70%;
left:15%;
top:15%;
text-align:center;
background: #EAEAEA;
}
#banner {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
left:0;
top:0;
}
#banner img{
position: absolute;
left: -234px;
margin: 50% 0 0 50%;
top: -30px;
}
</style>
</pre>
<h3>
E in fine i contenuti</h3>
<pre class="brush: xml;"><body onLoad="timeout()">
<div id="content"><p>Contenuto</p></div>
<div id="banner">
<img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
</div>
</pre>
Niente paura a fine guida ho riportato il codice completo dell'esempio.
<br />
<div>
<br /></div>
<h3>
Spieghiamo</h3>
Sfruttiamo <b>SetTimeout </b>del <b>JavaScript</b>, indicando il nome del <div> che contiene il nostro banner, (vedi riga 4 del codice JavaScript).<br />
Il valore che ho preimpostato, 5000, (vedi riga 5 del codice JavaScript) corrisponde a 5 secondi e può essere modificato a piacimento.<br />
A seguire, c'è un po' di CSS che serve a impostare una velina semitrasparente sopra i contenuti, così da far capire all'utente che "sotto c'è qualcosa".<br />
Molto probabilmente il codice CSS andrà ottimizzato in base al sito esistente.<br />
<br />
E in fine, un paio di <div>, uno per i contenuti della pagina (vedi riga 3 del codice HTML), l'altro per contenere il banner o quello che vogliamo (vedi riga 5 del codice HTML).<br />
<h3>
Nota bene</h3>
È importante non sottovalutare la riga 1 del codice HTML, dove ho richiamato la funzione JavaScript <b>timeout()</b>.<br />
Quella riga richiama e avvia la funzione JavaScript, ed è fondamentale per il funzionamento dell' Overlay.
<br />
<h3>
Tutto il codice dell'Overlay</h3>
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OVERLAY</title>
<script type="text/javascript">
function timeout(){
setTimeout(function(){
document.getElementById('banner').style.display="none"
}, 5000);
}
</script>
<style type="text/css">
body {
margin:0 auto;
}
#content {
position: absolute;
height: 70%;
width: 70%;
left:15%;
top:15%;
text-align:center;
background: #EAEAEA;
}
#banner {
position: absolute;
z-index: 1;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.8);
left:0;
top:0;
}
#banner img{
position: absolute;
left: -234px;
margin: 50% 0 0 50%;
top: -30px;
}
</style>
</head>
<body onLoad="timeout()">
<div id="content"><p>Contenuto</p></div>
<div id="banner">
<img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
</div>
</body>
</html>
</pre>Unknownnoreply@blogger.com8tag:blogger.com,1999:blog-4599237344187018608.post-24015662222419547272012-06-22T14:13:00.000-07:002012-06-24T03:01:00.050-07:00Aprire link in una finestra personalizzata<br />
Vediamo come fare per aprire il nostro link in un pop up con caratteristiche personalizzate.<br />
<br />
Premetto che personalmente non amo molto le finestre personalizzate, perché ho l'impressione di forzare la volontà dell'utente, nell'aprire una finestra "come dico io".<br />
<br />
Ma effettivamente, in alcuni casi, può risultare interessante offrire all'utente un pop up che, per la tipologia di informazione fornita, può risultare comodo se visualizzato estemporaneamente alla pagina. Vediamo perciò come fare per aprire con un link, una piccola finestra di dimensioni personalizzate.<br />
<br />
Per aprire la nostra finestra personalizzata chiediamo aiuto a JavaScript che grazie a <b>window.open</b> e a pochi parametri, ci permette di personalizzare ogni aspetto della nuova finestra.<br />
<h3>
Esempio</h3>
<div class="esempio">
<a href="javascript:window.open('http://www.example.com', '', 'left=100,top=100,width=650,height=500,menubar,toolbar,resizable');">Clicca per aprire un pop up del sito Example.com</a>
</div>
<h3>
Il codice di base è semplice</h3>
<pre class="brush: js;"><a href="#" onClick"javascript:window.open('http://www.example.com', '', 'width=600,height=400,menubar,toolbar,resizable');">Example.com</a></pre>
<h3>
Struttura</h3>
window.open(<span style="color: #cc0000;">url</span>,<span style="color: #3d85c6;">nome</span>,<span style="color: #6aa84f;">specifiche</span>,<span style="color: #f1c232;">replace</span>)
<br />
<h3>
Spieghiamo</h3>
<ul>
<li>Con <b>window.open</b> chiediamo al JavaScript di aprire una nuova finestra;</li>
<li>Con <span style="color: #cc0000;">url</span>, specifichiamo l'url della pagina da raggiungere;</li>
<li>Sarebbe possibile aprire una nuova finestra vuota, semplicemente omettendo l'url;</li>
<li>Con <b>nome </b>possiamo specificare l'attributo di destinazione o il nome della finestra. <br />I valori possibili sono: </li>
<ul>
<li><span style="color: #3d85c6;">_blank</span><i><span style="color: #3d85c6;"> </span>(l'url viene aperto in una nuova finestra, impostazione predefinita);</i></li>
<li><span style="color: #3d85c6;">_parent</span>
<i> (l'url viene aperto nel frame principale);</i></li>
<li><span style="color: #3d85c6;">_self
</span><i><span style="color: #3d85c6;"> </span>(l'url sostituisce la pagina corrente);</i></li>
<li><span style="color: #3d85c6;">_top
</span><i><span style="color: #3d85c6;"> </span>(l'url sostituisce ogni set di frame presente);</i></li>
<li><span style="color: #3d85c6;">nome </span><i>(si può impostare il nome della finestra);</i></li>
</ul>
<li>Con specifiche possiamo impostare una serie di valori separati da virgola. <br />I valori possibili sono:</li>
<ul>
<li><span style="color: #6aa84f;">channelmode</span>=<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>no</b></li>
<li><span style="color: #6aa84f;">directories</span>=<b>yes/no </b>oppure <b>1/0 </b> predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">fullscreen</span>=
<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>no</b></li>
<li><span style="color: #6aa84f;">height</span>=valore in <b>pixels </b>predefinito minimo <b>100</b></li>
<li><span style="color: #6aa84f;">left</span>=valore in <b>pixels </b>predefinito <b>0</b></li>
<li><span style="color: #6aa84f;">location</span>=
<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">menubar</span>=
<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">resizable</span>=<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">scrollbars</span>=<b>
</b><b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">status</span>=
<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">titlebar</span>=
<b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">toolbar</span>=<b>
</b><b>yes/no </b>oppure <b>1/0 </b>predefinito <b>yes</b></li>
<li><span style="color: #6aa84f;">top</span>=valore in <b>pixels </b>predefinito <b>0</b></li>
<li><span style="color: #6aa84f;">width</span>=valore in <b>pixels </b>predefinito minimo <b>100</b></li>
</ul>
<li>Con replace si gestisce l'elemento nella cronologia. <br />I valori possibili sono:</li>
<ul>
<li><span style="color: #f1c232;">true
</span><i>(l'url si inserisce in cronologia);</i></li>
<li><span style="color: #f1c232;">false
</span><i>(l'url crea una nuova storia cronologica);</i></li>
</ul>
</ul>
<h3>
</h3>
<h3>
Spieghiamo</h3>
In questo esempio linchiamo la pagina http://www.example.com, lasciando vuoto il secondo parametro obbligatorio che quindi di default sarà _blank, poi impostiamo la larghezza della pagina a 600px, l'altezza a 400px, impostiamo il menù della pagina, che senza un valore settato risulta yes di default, lo stesso per la toolbar e per resizabile che hanno sempre yes di default.<br />
<br />
Volendo si può scorporare la funzione, se ad esempio si deve utilizzare più volte nella pagina lo stesso link, questa soluzione può essere sicuramente più versatile.<br />
<h3>
Vediamo un esempio con JavaScript in head</h3>
<br />
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nuova Finestra Example.com</title>
<script type="text/javascript">
function nuova_finestra()
{
window.open('http://www.example.com', '', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable')
}
</script>
</head>
<body>
<a href="#" onclick="nuova_finestra()">Example.com</a>
<input type="button" value="Button Nuova Finestra" onclick="nuova_finestra()" />
</body>
</html></pre>
<h3>
Spieghiamo</h3>
Ho scorportato la funzione JavaScript e l'ho posta in <head> tra i tag <script>.<br />
Tutte le volte che dalla pagina vorrò richiamare la funzione <b>nuova_finestra()</b>, righe nell'esempio da 6 a 11, basterà inserire nel link o nell'onclick <b>nuova_finestra() </b>come riportato nell'esempio alle righe 15 e 16, rispettivamente un link e un button.<br />
Sia il link che il button producono lo stesso risultato.<br />
<br />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-3030920404187877802012-06-20T05:59:00.001-07:002012-06-27T01:56:20.903-07:00Tabella che scrolla con intestazione fissa<h2>Vediamo come realizzare una tabella che scrolla in verticale, con la testatina che rimane fissa</h2>
<h3>Esempio</h3>
<div class="esempio" style="position: inherit;">
<style type="text/css">
/*il div che contiene lo scroll*/
body article {
height: 355px;
width: 462px;
overflow-y:auto;
overflow-x:hidden;
}
/*la tabella*/
body article table {
border-collapse:collapse;
}
/*tutte le righe*/
body article table tr {
height:30px;
}
/*tutte le celle*/
body article table tr td {
border:1px solid #EBD13F;
color: #C60;
background: #F3F4D0;
text-align:center;
}
/*la colonna di sinistra*/
body article table tr th {
border: 1px solid #039;
color:#069;
background: #D7EBEE;
}
/*la testata riga fissa*/
body article table .testata {
position: absolute;
}
/*le celle della riga fissa*/
body article table .colonna {
background-color: green;
color: white;
border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
body article table .primariga {
padding-top:30px;
}
</style>
<article>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr class="testata">
<th class="colonna" scope="col" width="52">test</th>
<th class="colonna" scope="col" width="62">co1 1</th>
<th class="colonna" scope="col" width="122">col 2</th>
<th class="colonna" scope="col" width="102">col 3</th>
<th class="colonna" scope="col" width="102">col4</th>
</tr>
<tr class="primariga">
<th class="primariga" scope="row" width="52">aaa
</th><td class="primariga" width="62">124</td>
<td class="primariga" width="122">23555</td>
<td class="primariga" width="102">346</td>
<td class="primariga" width="102">4575</td>
</tr>
<tr>
<th scope="row">bbb</th>
<td>51</td>
<td>984</td>
<td>98456</td>
<td>984</td>
</tr>
<tr>
<th scope="row">ccc</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ddd</th>
<td>51</td>
<td>23434</td>
<td>5456</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">eee</th>
<td>18</td>
<td>835</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">fff</th>
<td>1</td>
<td>6513535</td>
<td>833</td>
<td>289</td>
</tr>
<tr>
<th scope="row">ggg</th>
<td>19</td>
<td>8135</td>
<td>854</td>
<td>81</td>
</tr>
<tr>
<th scope="row">hhh</th>
<td>51</td>
<td>651</td>
<td>33456</td>
<td>21</td>
</tr>
<tr>
<th scope="row">iii</th>
<td>15</td>
<td>1535</td>
<td>1456456</td>
<td>55</td>
</tr>
<tr>
<th scope="row">lll</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">mmm</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">nnn</th>
<td>651</td>
<td>6513</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ooo</th>
<td>51</td>
<td>651</td>
<td>54545</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">ppp</th>
<td>18</td>
<td>84545</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">qqq</th>
<td>1</td>
<td>651</td>
<td>8545</td>
<td></td>
</tr>
<tr>
<th scope="row">rrr</th>
<td>19</td>
<td>81</td>
<td>8</td>
<td>81</td>
</tr>
<tr>
<th scope="row">sss</th>
<td>51</td>
<td>651</td>
<td>3</td>
<td>21</td>
</tr>
<tr>
<th scope="row">ttt</th>
<td>15</td>
<td>15</td>
<td>1</td>
<td>55</td>
</tr>
<tr>
<th scope="row">uuu</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">vvv</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">zzz</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
</tbody></table>
</article></div>
<br />
Può capitare di dover pubblicare i dati impaginati in una tabella, e a causa delle molte righe, o a causa della impaginazione del sito, si voglia lasciare fissa la testatina della tabella e scrollare i dati.
Con questo esempio, realizzato utilizzando poche righe di codice CSS, vediamo come fare.
<br />
<h3>
Vediamo il codice CSS</h3>
<pre class="brush: css;"><style type="text/css">
/*il div che contiene lo scroll*/
.article {
height: 355px;
width: 462px;
overflow-y:auto;
overflow-x:hidden;
}
/*la tabella*/
.article table {
border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
height:30px;
}
/*tutte le celle*/
.article table tr td {
border:1px solid #EBD13F;
color: #C60;
background: #F3F4D0;
text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
border: 1px solid #039;
color:#069;
background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
background-color: green;
color: white;
border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
padding-top:30px;
}
</style>
</pre>
<h3>
E il codice HTML della tabella</h3>
<pre class="brush: xml;"><div class="article">
<table cellspacing="0" cellpadding="0">
<tr class="testata">
<th width="52" class="colonna" scope="col">test</th>
<th width="62" class="colonna" scope="col">co1 1</th>
<th width="122" class="colonna" scope="col">col 2</th>
<th width="102" class="colonna" scope="col">col 3</th>
<th width="102" class="colonna" scope="col">col4</th>
</tr>
<tr class="primariga">
<th width="52" class="primariga" scope="row">aaa
<td width="62" class="primariga">124</td>
<td width="122" class="primariga">23555</td>
<td width="102" class="primariga">346</td>
<td width="102" class="primariga">4575</td>
</tr>
<tr>
<th scope="row">bbb</th>
<td>51</td>
<td>984</td>
<td>98456</td>
<td>984</td>
</tr>
<tr>
<th scope="row">ccc</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ddd</th>
<td>51</td>
<td>23434</td>
<td>5456</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">eee</th>
<td>18</td>
<td>835</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">fff</th>
<td>1</td>
<td>6513535</td>
<td>833</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">ggg</th>
<td>19</td>
<td>8135</td>
<td>854</td>
<td>81</td>
</tr>
<tr>
<th scope="row">hhh</th>
<td>51</td>
<td>651</td>
<td>33456</td>
<td>21</td>
</tr>
<tr>
<th scope="row">iii</th>
<td>15</td>
<td>1535</td>
<td>1456456</td>
<td>55</td>
</tr>
<tr>
<th scope="row">lll</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">mmm</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">nnn</th>
<td>651</td>
<td>6513</td>
<td>65</td>
<td>5</td>
</tr>
<tr>
<th scope="row">ooo</th>
<td>51</td>
<td>651</td>
<td>54545</td>
<td>1651</td>
</tr>
<tr>
<th scope="row">ppp</th>
<td>18</td>
<td>84545</td>
<td>51</td>
<td>651</td>
</tr>
<tr>
<th scope="row">qqq</th>
<td>1</td>
<td>651</td>
<td>8545</td>
<td>&nbsp;</td>
</tr>
<tr>
<th scope="row">rrr</th>
<td>19</td>
<td>81</td>
<td>8</td>
<td>81</td>
</tr>
<tr>
<th scope="row">sss</th>
<td>51</td>
<td>651</td>
<td>3</td>
<td>21</td>
</tr>
<tr>
<th scope="row">ttt</th>
<td>15</td>
<td>15</td>
<td>1</td>
<td>55</td>
</tr>
<tr>
<th scope="row">uuu</th>
<td>651</td>
<td>650651</td>
<td>06501</td>
<td>560</td>
</tr>
<tr>
<th scope="row">vvv</th>
<td>51</td>
<td>984</td>
<td>984</td>
<td>984</td>
</tr>
<tr>
<th scope="row">zzz</th>
<td>651</td>
<td>651</td>
<td>65</td>
<td>5</td>
</tr>
</table>
</div>
</pre>
<h3>
Spieghiamo</h3>
Come prima cosa notiamo nel codice HTML della tabella, la presenza di un div con class article.<br />
Ho utilizzato questo div per realizzare lo scroll della tabella, vedi riga n. 6 del codice CSS.<br />
<br />
Alla riga n. 31 del CSS imposto la riga che rimarrà fissa anche scrollando. Quella che nel codice HTML si trova alla riga di codice n. 3.<br />
<br />
Ho dovuto impostare una correzione sulla prima riga di dati della tabella, per evitare che finisca sotto la riga di intestazione fissa. Per fare questo ho utilizzato una classe primariga, che nel CSS si trova alla riga di codice n. 41.<br />
<br />
<h3>
Nota bene</h3>
Questa soluzione non è particolarmente adatta, se i dati della tabella provengono da un database e possono variari di molto in larghezza, in modo incontrollato. Potrebbe succedere che il contenuto di una cella sia più lungo del valore width da noi impostato inizialmente, e quindi si verifichi un disallineamento delle celle.Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-4599237344187018608.post-65700635199509177902012-06-07T06:07:00.000-07:002012-06-27T01:56:20.906-07:00Download file con password<h2>
Vediamo come realizzare un elenco di link per il download, protetti da password</h2>
<h3>
Esempio</h3>
<div class="esempio">
<style type="text/css">
.ullipuz {
background: #039;
padding:3px;
margin:3px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.lillipuz {
background: #D7F2F4;
list-style:none;
padding:3px;
margin:3px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
label {
font-size: 0.8em;
color: #009;
padding:3px;
margin:3px;
}
.plain {
color: #FFF;
background: #CCC;
padding:3px;
margin:3px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
</style>
<br />
<h2>
Download file tramite password</h2>
<div class="plain">
Inserisci la password e avvia il download del tuo file</div>
<ul class="ullipuz ">
<li class="lillipuz ">
<form>
<label>Download <strong class="re">file1.zip</strong></label>
<input name="_pswd" type="password" />
<input name="submit1" type="submit" value="download" />
</form>
</li>
<li class="lillipuz ">
<form>
<label>Download <strong>file2.pdf</strong></label>
<input name="_pswd" type="password" />
<input name="submit2" type="submit" value="download" />
</form>
</li>
<li class="lillipuz ">
<form>
<label>Apri la <strong>Home Page di Google</strong></label>
<input name="_pswd" type="password" />
<input name="submit3" type="submit" value="download" />
</form>
</li>
</ul>
</div>
<br />
Capita spesso di avere documenti più o meno riservati, che si desidera <b>condividere solo con una cerchia ristretta di persone</b> e non con tutti gli utenti del nostro sito.<br />
In questa guida vediamo come fare per visualizzare un elenco di documenti pronti al download, ma che possono essere scaricati solo dopo avere inserito una password<i> (che avremo comunicato solo a chi deve scaricare il nostro file)</i>.<br />
<br />
Vedremo anche come creare e <b>proteggere con password una serie di link</b> interni o esterni al nostro sito.<br />
<br />
Come sempre anticipo il <a href="https://sites.google.com/site/freehtmlscripts/download-file.zip?attredirects=0&d=1" target="_blank">link dello script completo</a><i> (si tratta di uno ZIP con tutti i file dell'esempio)</i> per i frettolosi che non vogliono leggere tutta la guida. Il link è ripetuto anche in fondo, per chi invece vuole seguire la guida passo passo.<br />
<br />
Per spiegare meglio lo script PHP ho suddiviso il codice in varie sezioni, così da poterle individuare più semplicemente.<br />
<h3>
Vediamo prima di tutto se il nostro server supporta PHP</h3>
Se siamo sicuri che il nostro server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo.<br />
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta <a href="http://free-html-scripts.blogspot.it/2012/06/verificare-se-il-server-supporta-php.html" target="_blank">seguire questi semplici passi</a>.<br />
<h3>
Analizziamo lo script</h3>
Lo script è composto da 6 sezioni di codice:
<br />
<ol>
<li>nel primo blocco di codice definiamo le nostre preferenze (url del sito), messaggi ecc...;</li>
<li>nel secondo blocco di codice definiamo dove si trova il file da scaricare, la password da inserire e come si chiama il file;</li>
<li>il blocco successivo si occupa di verificare la password e avviare il download;</li>
<li>poi come sempre ho inserito un po di CSS per rendere il tutto gradevole <i>(anche l'occhio vuole la sua parte) </i>questo codice può essere modificato o cancellato completamente;</li>
<li>due righe di codice per visualizzare i messaggi che lo script rende;</li>
<li>finalmente i link che visualizzerà l'utente finale;</li>
</ol>
<h3>
Prima sezione di codice le preferenze</h3>
<pre class="brush: php;">
//imposto messaggio di password corretta
$ok = '<p class="green">Ok password corretta inizio il download tra 5 secondi...</p>';
// imposto messaggio di errore
$errore = '<p class="red">Attenzione password errata, prova nuovamente!</p>
<p><a href="mailto:info@example.com?subject=Richiesta nuova password">Richiedi nuova password</a></p>';
// imposto messaggio di benvenuto
$plain = '<p class="plain">Inserisci la password e avvia il download del tuo file</p>';
// imposto l'url dove si trova questo file
// se ad esempio si vuole installare lo script nella cartella download
// $site sarà: http://www.example.com/download
$site = 'http://www.example.com';
</pre>
<h3>
Seconda sezione di codice i file e le password</h3>
<pre class="brush: php; highlight:[8,9,10,11,12,13,20]">// inserisco il nome, la password e la cartella del file 1
if(isset($_POST["submit1"])){
$dir = "dir-dwnload-1234"; /*nome cartella dove si trova il file da scaricare*/
$file = "file1.zip"; /*nome file da scaricare*/
$pswd = "pippo"; /*password per questo file*/
}
// inserisco il nome, la password e la cartella del file 2
else if(isset($_POST["submit2"])){
$dir = "dir-dwnload-1234"; /*nome cartella dove si trova il file da scaricare*/
$file = "file2.pdf"; /*nome file da scaricare*/
$pswd = "pluto"; /*password per questo file*/
}
// inserisco il nome, la password e la cartella del file 3
else if(isset($_POST["submit3"])){
$dir = ""; /*nome cartella dove si trova il file da scaricare*/
$file = ""; /*nome file da scaricare*/
$pswd = "paperino"; /*password per questo file*/
$site = 'http://www.google.it'; /*l'url del link da raggiungere con la password*/
}
</pre>
<h3>
Tersa sezione di codice controllo e download</h3>
<pre class="brush: php;">// controllo
if($_POST["_pswd"] != $pswd){
$msg = $errore;
}
if(($_POST["_pswd"] == $pswd)&&($pswd != "nopsw")){
$msg = $ok;
// avvio il download
header("Refresh: 5; URL=".$site."/".$dir."/".$file."");
}
</pre>
<h3>
Quarta sezione il codice CSS</h3>
<pre class="brush: css;"><style type="text/css">
* {
padding:3px;
margin:3px;
}
body {
font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
width:500px;
}
ul, li, p {
-webkit-border-radius: 5px;
border-radius: 5px;
}
ul {
background: #039;
}
li {
background: #D7F2F4;
list-style:none;
}
label {
font-size: 0.8em;
color: #009;
}
.red {
color: #FFF;
background: #F00;
}
.green {
color: #FFF;
background: #0C0;
}
.plain {
color: #FFF;
background: #CCC;
}
</style>
</pre>
<h3>
Quinta sezione di codice stampa dei messaggi</h3>
<pre class="brush: php;">// gestiamo i messaggi proventienti da controllo
if((isset($msg))&&($pswd != "nopsw")){
echo $msg;
}else{
echo $plain;
}
</pre>
<h3>
Sesta sezione di codice i link ai file</h3>
<pre class="brush: xml; highlight:[9,10,11,12,13,14,15]"><ul>
<li>
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label>Download <strong class="re">file1.zip</strong></label>
<input type="password" name="_pswd">
<input type="submit" name="submit1" value="download">
</form>
</li>
<li>
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label>Download <strong>file2.pdf</strong></label>
<input type="password" name="_pswd">
<input type="submit" name="submit2" value="download">
</form>
</li>
<li>
<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<label>Apri la <strong>Home Page di Google</strong></label>
<input type="password" name="_pswd">
<input type="submit" name="submit3" value="download">
</form>
</li>
</ul>
</pre>
<h3>
Spieghiamo</h3>
<b>Nella prima parte</b> è fondamentale impostare la variabile $site con l'url della cartella contenente tutti i file <i>(sia PHP che le cartelle contenenti i file da scaricare)</i>. Se ad esempio si vuole installare lo script e i file da scaricare, nella cartella download-file <i>(quella che si trova nel file ZIP dell'esempio)</i> l'url sarà: <span style="color: #3d85c6;">http://www.example.com/download-file</span>;<br />
<br />
<b>Nel secondo blocco di codice</b> si impostano: il nome della cartella dove si trova il file da scaricare, il nome del file e la password. Da notare che per inserire un link protetto da password basta inserire la password e aggiungere la riga di codice con l'url del link esempio: <span style="color: #3d85c6;">$site = 'http://www.google.it';</span> <i>(vedi riga 20 del secondo esempio di codice)</i>. Gli altri valori vanno lasciati vuoti;<br />
<br />
<b>Il terzo blocco</b> di codice controlla la password. Qui non va modificato nulla;<br />
<br />
<b>Quarto blocco</b> è composto da codice CSS per rendere più gradevole la parte visiva. Questo codice si può modificare a proprio piacimento o direttamente cancellare, senza compromettere il funzionamento dello script;<br />
<br />
Anche il <b>quinto blocco</b> di codice non va modificato. Serve a visualizzare i messaggi dello script.<br />
<br />
<b>Nel sesto blocco</b> di codice c'è l'HTML per visualizzare i vari link.<br />
<br />
Se dobbiamo aggiungere altri link, basta duplicare le righe contrassegnate nel secondo esempio (dalla 8 alla 13) e le righe del sesto esempio (dalla 9 alla 15). Nei due blocchi di codice va impostato lo stesso valore <b>submitX </b>che dovrà essere corrispondente e univoco, per collegare il link dell'HTML con l'if del PHP.<br />
<h3>
Nota bene</h3>
Questo script è utile per celare l'effettivo link del tuo download. Tuttavia per file molto importanti, potrebbe essere interessante aumentare la sicurezza dei download, proteggendo la cartella in altro modo, con sistemi che utilizzano protezioni lato server direttamente sulle cartelle e sui file stessi.<br />
<br />
<span style="color: #cc0000;">Per questo motivo ti consiglio di utilizzarlo con cautela, a tuo rischio e pericolo, e soprattutto su file di relativa importanza.</span><br />
<h3>
Download</h3>
<a href="https://sites.google.com/site/freehtmlscripts/download-file.zip?attredirects=0&d=1" target="_blank">Da questo link è possibile scaricare l'intero script</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-67489926721716138272012-06-06T11:12:00.002-07:002012-06-24T03:01:42.483-07:00Inviare messaggi dal sito<h2>
Vediamo come realizzare un form per inviare messaggi dal sito</h2>
<h3>
Esempio</h3>
<div class="esempio">
<style type="text/css">
input, textarea {
font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #900;
border: 1px solid #CCC;
background-color: #FFFEF0;
display:block;
}
input[type="submit"]:hover {
background-color: #0C0;
color:#FFF;
}
label {
font-size: 0.7em;
color: #CCC;
}
.red {
color:#FFF;
background-color: #C00;
width:375px;
padding:2px;
}
.green {
color:#FFF;
background-color: #0C0;
width:375px;
padding:2px;
}
</style>
<br />
<h2>
Scrivi un messaggio</h2>
<em>Tutti i campi sono obbligatori</em><br />
<form>
<input onblur="if(this.value=='') this.value='Nome e Cognome';" onfocus="if(this.value=='Nome e Cognome') this.value='';" type="text" value="Nome e Cognome" />
<input onblur="if(this.value=='') this.value='Email';" onfocus="if(this.value=='Email') this.value='';" type="text" value="Email" />
<label>messaggio</label>
<textarea cols="50" rows="7"></textarea>
<input disabled="" type="submit" value="scrivi" />
</form>
</div>
<br />
Con questo Script in PHP<i> </i>sarà possibile <b>inviare messaggi dal sito</b>, direttamente sulla nostra casella di posta. Lo Script <b>controlla che tutti i campi siano compilati</b>, prepara la mail e la spedisce su una casella di posta predefinita. Unico requisito richiesto, è che il nostro Server supporti PHP.<br />
Se vuoi scaricare subito il file completo senza leggere tutta la guida <a href="https://sites.google.com/site/freehtmlscripts/contatto.php?attredirects=0&d=1" target="_blank">puoi trovarlo qui</a>.<br />
<h3>
Vediamo se il nostro server supporta PHP</h3>
Se siamo sicuri che il nostro Server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo. <br />
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta <a href="http://free-html-scripts.blogspot.it/2012/06/verificare-se-il-server-supporta-php.html" target="_blank">seguire questi semplici passi</a>.<br />
<h3>
Analizziamo lo script per inviare mail dal sito:</h3>
Lo script che ho preparato appositamente per questa guida, è suddiviso in 4 parti:<br />
<ol>
<li>una sezione per impostare le preferenze del nostro FORM MAIL: la casella email che riceverà i messaggi dal sito, l'oggetto del messaggio, il testo dei vari messaggi resi dal form ecc...;</li>
<li>lo script che invia fisicamente la mail alla nostra casella di posta;</li>
<li>un po' di codice CSS per dare un aspetto gradevole al form e ai messaggi di errore o consenso che il form rende;</li>
<li>il codice HTML del form che servirà all'utente per compilare il messaggio da inviare tramite il sito;</li>
</ol>
<h3>
Impostiamo le preferenze dello Script</h3>
<pre class="brush: php;">/** MODIFICA CON I TUOI DATI ******************************************/
//imposta il tuo indirizzo email
$miamail = "miaemail@example.com";
// imposta l'oggetto della mail che riceverai
$oggettomail = "Messaggio dal sito";
// imposta un messaggio per email inviata correttamente
$inviato = '<p class="green">Ok e-mail inviata correttamente.</p>';
// imposta un messaggio per errore invio
$errore = '<p class="red">Attenzione: non &egrave; stato possibile inviare l&acute;email...</p>';
// imposta un messaggio per tutti i campi obbligatori
$tutticampi = '<p class="red">Attenzione: tutti i campi sono obbligatori...</p>';
// etichetta per input Nome e Cognome
$_nomecognome = "Nome e Cognome";
// etichetta per input email
$_email = "Email";
// etichetta per textarea messaggio
$_messaggio = "Messaggio";
/* FINE MODIFICA CON I TUOI DATI **************************************/
</pre>
<h3>
Vediamo lo script che prepara e invia la mail</h3>
<pre class="brush: php;">//recupero i dati dal form per l'invio
$nome = $_POST['nome'];
$email = $_POST['email'];
$messaggio = $_POST['messaggio'];
//vediamo se l'utente sta componendo il form o ha cliccato su scrivi
if($_POST['submit'] == 'scrivi'){
//controllo tutti i dati
//se aggiungi altri campi obbligatori al form devi aggiungerli anche qui nell'if
if(($nome != $_nomecognome) && ($email != $_email) && !empty($messaggio)){
//imposto il mittente della mail
$headers .= 'From: "'.$nome.'" <'.$email.'>';
//spedisco la mail
$mail = mail($miamail, $oggettomail, $messaggio, $headers);
//controllo il corretto invio dei dati
if($mail){
//stampo un messaggio dopo l'invio dei dati
$msg = $inviato;
}else{
//stampo un messaggio in caso di errore
$msg = $errore;
//fine se tutti i campi sono compilati
}
}else{
//stampo un messaggio se mancano i campi obbligatori
$msg = $tutticampi;
}
}
</pre>
<h3>
Un po' di CSS per rendere gradevole il Form</h3>
<pre class="brush: css;"><style type="text/css">
body {
font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
input, textarea {
font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #900;
border: 1px solid #CCC;
background-color: #FFFEF0;
display:block;
}
input[type="submit"]:hover {
background-color: #0C0;
color:#FFF;
}
label {
font-size: 0.7em;
color: #CCC;
}
.red {
color:#FFF;
background-color: #C00;
width:375px;
padding:2px;
}
.green {
color:#FFF;
background-color: #0C0;
width:375px;
padding:2px;
}
</style>
</pre>
<h3>
Vediamo l'HTML del form per compilare il messaggio</h3>
<pre class="brush: xml;"><h2>Scrivi un messaggio</h2>
<p><em>Tutti i campi sono obbligatori</em></p>
<form name="form-mail" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="text" name="nome" value="<?php echo $_nomecognome; ?>" onblur="if(this.value=='') this.value='<?php echo $_nomecognome; ?>';" onfocus="if(this.value=='<?php echo $_nomecognome; ?>') this.value='';" />
<input type="text" name="email" value="<?php echo $_email; ?>" onblur="if(this.value=='') this.value='<?php echo $_email; ?>';" onfocus="if(this.value=='<?php echo $_email; ?>') this.value='';"/>
<label><?php echo $_messaggio; ?></label>
<textarea name="messaggio" cols="50" rows="7"></textarea>
<input type="submit" name="submit" value="scrivi" />
</form>
</pre>
<h3>
Spieghiamo</h3>
<b>Nelle prime righe del codice</b> trovo le variabili che una volta impostate fanno funzionare lo script secondo le nostre impostazioni.<br />
Nel personalizzare le variabili, è importante rispettare la sintassi, senza cancellare gli apici che aprono e chiudono i valori impostati. Nell'esempio che segue, la parte in rosso è il contenuto della variabile che va modificato a proprio piacimento, la parte in grigio non va modificata:<br />
<span style="color: #999999;">$miamail = "</span><span style="color: red;">miaemail@example.com</span><span style="color: #999999;">";</span><br />
<br />
<b>Nella seconda parte del codice</b> c'è il motore dello script, la parte cioè che confeziona il messaggio e lo spedisce alla nostra casella di posta. In questa sezione di codice non c'è nulla da modificare. Il codice va lasciato così com'è.<br />
<br />
<b>La terza parte di codice</b> è composta da un po' di CSS che ho inserito per rendere gradevole la visualizzazione del form. Questo codice può essere modificato, ampliato o anche cancellato completamente.<br />
<br />
<b>La quarta e ultima parte di codice</b> è l'HTML che serve per marcare il FORM.<br />
<br />
<h3>
Download</h3>
Seguendo questo link puoi scaricare <a href="https://sites.google.com/site/freehtmlscripts/contatto.php?attredirects=0&d=1" target="_blank">il file completo e funzionante</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-64211423602082167502012-06-06T09:03:00.000-07:002012-06-27T02:01:07.793-07:00Verificare se il server supporta PHPSpesso ci capita di volere installare piccoli script per il nostro sito internet, ma la prima condizione che ci viene richiesta per installare lo script, è che il nostro server supporti PHP... <br />
<h3>
Vediamo come verificare se il nostro server supporta PHP</h3>
Normalmente se il nostro server è su piattaforma UNIX / LINUX il supporto a PHP è nativo. A volte è anche possibile usufruire di PHP su alcuni server in ambiente WINDOWS che lo hanno installato.<br />
<br />
Per verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi:<br />
<ol>
<li>creiamo un file vuoto</li>
<li>lo chiamiamo <b>phpinfo.php</b></li>
<li>nel file scriviamo questa semplice riga: <b><?php phpinfo(); ?></b></li>
<li>carichiamo il file sul nostro server via FTP</li>
<li>navighiamo il file con un browser esempio: http://www.example.com/phpinfo.php</li>
<li>se compaiono le specifiche del nostro server OK altrimenti non abbiamo PHP</li>
</ol>
<h3>
Downlaod</h3>
<div>
Se vuoi, <a href="https://sites.google.com/site/freehtmlscripts/phpinfo.php?attredirects=0&d=1" target="_blank">da questo link</a> puoi scaricare il file <a href="https://sites.google.com/site/freehtmlscripts/phpinfo.php?attredirects=0&d=1" target="_blank">phpinfo.php</a> già pronto per l'upload sul tuo server.</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-37816590263277472872012-05-30T02:52:00.002-07:002012-06-27T02:01:07.781-07:00Come sapere quale Browser ha il nostro utente<h2>Vediamo come fare per sapere quale Browser sta utilizzando il nostro utente</h2>
<br />
Questo fantastico script gratuito scritto in PHP si chiama <a href="http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/" target="_blank">Browser.php</a>. Grazie a un'attenta analisi del Browser riesce ad individuare:<br />
<ol>
<li>Tipo di Browser dell'utente</li>
<li>Versione del Browser</li>
<li>User Agent completo</li>
<li>Piattaforma del supporto</li>
</ol>
<div>
Esempio:</div>
<br />
<iframe class="esempio" frameborder="0" height="170" src="http://demo.extrabold.it/free-html-scripts/browser/Browser.php" width="95%"></iframe><br />
<h3>Spieghiamo:</h3>
Lo script si occupa di individuare e immagazzinare i dati proveniente dal Browser dell'utente, come riportato nell'esempio sopra. Sta poi a noi interpretarli e utilizzarli.<br />
<br />
L'autore ad esempio consiglia un utilizzo di questo tipo:<br />
<pre class="brush: php;">$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
echo 'Stai Navigando con FireFox versione 2 o superiore';
}</pre>
In pratica controllo con if se il Browser è FireFox e se la versione è uguale o superiore a 2
quindi stampo il messaggio con echo.<br />
<br />
Ho fatto un paio di test con Smartphone Android, iPhone e Tablet Android, e in ogni situazione lo script ha risposto segnalando puntualmente il Browser la sua versione, l'user agente e la piattaforma utilizzata, senza commettere mai errori.<br />
<br />
Può sembrare superfluo dirlo, ma per il corretto funzionamento dello script è meglio non dimenticare di includerlo nel nostro file padre.<br />
<br />
Esempio di inclusione nel nostro file:<br />
<br />
<pre class="brush: php; highlight:3">
<?php
//includo il file Browser.php nel mio file padre (ad esempio: example.php)
include("Browser.php");
//imposto il browser
$browser = new Browser();
//controllo con if se il Browser dell'utente
//risponde alle caratteristiche impostate
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
//stampo il messaggio Firefox SI
echo 'Stai Navigando con FireFox versione 2 o superiore';
}else{
//altrimenti stampo il messaggio FireFox NO o inferiore a 2
echo 'Stai Navigando con un Browser diverso da FireFox o inferiore a 2';
}
?>
</pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-78741287510409514782012-05-29T09:07:00.000-07:002012-06-27T02:01:07.798-07:00DOCTYPE HTML 5<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaUMGOP4u8BTJw-jx9n1aWWxkhTyFKzGxE5qfzf8WYcFZ5wWTlexYJdD3e51Yn0fHFLavV8vrTzc_B683gAJ6QyeuwQGUrPCkIF7R514Ej04ahJeGLxTOjUD6_76xDxY54Yy9sp1M6B8/s1600/html5logo.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaUMGOP4u8BTJw-jx9n1aWWxkhTyFKzGxE5qfzf8WYcFZ5wWTlexYJdD3e51Yn0fHFLavV8vrTzc_B683gAJ6QyeuwQGUrPCkIF7R514Ej04ahJeGLxTOjUD6_76xDxY54Yy9sp1M6B8/s200/html5logo.jpg" width="200" /></a></div>
L'<b>HTML5</b> è un linguaggio di <a href="http://it.wikipedia.org/wiki/Markup">markup</a> per la progettazione delle pagine web attualmente in fase di definizione (bozza) presso il <a href="http://it.wikipedia.org/wiki/World_Wide_Web_Consortium">World Wide Web Consortium</a>. La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il <a href="http://it.wikipedia.org/wiki/WHATWG">WHATWG</a>. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i <a href="http://it.wikipedia.org/wiki/Browser">browser</a> esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.<br />
<br />
L'HTML5 si propone come evoluzione dell'attuale <a href="http://it.wikipedia.org/wiki/HTML">HTML 4.01</a> ed è stato concepito in alternativa all'ormai fallito <a href="http://it.wikipedia.org/wiki/XHTML#XHTML_2.0">XHTML 2</a><a href="http://it.wikipedia.org/wiki/HTML5#cite_note-0">[1]</a>. Il World Wide Web Consortium ha annunciato che sarà pronto per il <a href="http://it.wikipedia.org/wiki/Luglio">luglio</a> <a href="http://it.wikipedia.org/wiki/2014">2014</a>.<br />
<div>
<br /></div>
<div>
Fonte: <a href="http://it.wikipedia.org/wiki/HTML5" target="_blank">Wikipedia</a></div>
<div>
<h3>
Struttura</h3>
</div>
<table bgcolor="#99CCFF" border="0" cellpadding="10" cellspacing="7" style="width: 400px;">
<tbody>
<tr>
<td align="center" bgcolor="#FFFFFF" colspan="2"><header></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" colspan="2"><nav></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF"><article><br />
<div style="background: #FFFFFF;">
<div style="border: solid 7px #99CCFF; padding: 15px 0;">
<section></div>
</div>
</td>
<td align="center" bgcolor="#FFFFFF"><aside></td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" colspan="2"><footer></td>
</tr>
</tbody></table>
<h3>
Codice</h3>
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DTD HTML 5.0</title>
</head>
<body>
<p>CONTENUTO</p>
</body>
</html></pre>
<br />
<a href="http://www.w3.org/html/wg/">Sito del W3C HTML Working Group</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-82014701003051068252012-05-29T08:12:00.001-07:002012-06-27T01:59:32.292-07:00DOCTYPE XHTML Mobile 1.0<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s1600/470px-Struttura_html.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s320/470px-Struttura_html.svg.png" width="226" /></a></div>
DTD Versione ridotta per supporti Mobile.<br />
<pre class="brush: xml;"><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DTD XHTML Mobile 1.0</title>
</head>
<body>
<p>CONTENUTO</p>
</body>
</html>
</pre>
<div>
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-31176068071160267552012-05-29T07:49:00.001-07:002012-06-27T01:59:32.286-07:00DOCTYPE XHTML 1.1<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s1600/470px-Struttura_html.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s320/470px-Struttura_html.svg.png" width="226" /></a></div>
L'ultima versione di XHTML è la <b>XHTML 1.1</b>, che è una riformulazione dell'XHTML Strict, quindi ha una sola DTD. Non accetta i tag e gli attributi più criticati della precedente versione (come la struttura a <a href="http://it.wikipedia.org/wiki/Frameset">frameset</a>). Questa versione invece supporta i tag del cosiddetto markup «ruby», che consente di visualizzare i set di caratteri delle lingue orientali.<br />
<div>
<br /></div>
<div>
Fonte: <a href="http://it.wikipedia.org/wiki/XHTML#XHTML_1.1" target="_blank">Wikipedia</a></div>
<pre class="brush: xml;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DTD XHTML 1.1</title>
</head>
<body>
<p>CONTENUTO</p>
</body>
</html>
</pre>
<div>
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-2548578579621869992012-05-29T07:45:00.001-07:002012-06-27T01:59:32.285-07:00DOCTYPE XHTML 1.0 Strict<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s1600/470px-Struttura_html.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkaryIMo8Aoa3uK_YvRU6MwxFFW06hxcujqUW8CmGRYz7l9uJhIshKsGBtH6YtUbKAsmDw7Zaz7DBHaNfia7fd-RUEt0SLd7y5W3g9JdZ_2GhbMHLqd61wkYrZQ_TpSPkuD4oNqR3FMMs/s320/470px-Struttura_html.svg.png" width="226" /></a></div>
<b>XHTML 1.0 Strict</b> rispetto alla versione Transitional non accetta i tag HTML definiti deprecati, non è tollerante a non conformità sintattiche e prevede controlli più rigorosi anche rispetto al valore di alcuni attributi dei tag (per esempio, l'attributo id deve avere valori univoci all'interno dello stesso documento).<br />
<br />
Fonte: <a href="http://it.wikipedia.org/wiki/XHTML#XHTML_1.0" target="_blank">Wikipedia</a><br />
<pre class="brush: xml;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DTD XHTML 1.0 Strict</title>
</head>
<body>
<p>CONTENUTO</p>
</body>
</html>
</pre>
<div>
<br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-7773930127389636622012-05-29T04:28:00.001-07:002012-06-27T02:01:07.795-07:00Includere un file con PHP<h2>
Includere un file HTML figlio in un file HTML padre con PHP</h2>
Questo tipo di inclusione lato-server, permette la ripetizione di uno stralcio di codice in uno o più file padre.<br />
<br />
Per includere lo stralcio di codice, utilizzeremo il costrutto include. L'unica accortezza che dovremo rispettare, sarà cambiare l'estensione del file padre in PHP. Il file padre si dovra chiamare ad esempio: example<span style="color: red;">.php</span>.<br />
<h3>
Vediamo il codice</h3>
<pre class="brush: php;"><?php include("menu.htm"); ?>
</pre>
<h3>
Spieghiamo</h3>
Grazie al costrutto <b>include </b>possiamo inserire lo stralcio di codice contenuto in menu.htm all'intero del nostro file padre.<br />
Ci sono da notare alcuni aspetti importanti affinché l'inclusione vada a buon fine:<br />
<ol>
<li>l'url del file figlio è relativo rispetto al file padre. Il file riportato nell'esempio menu.htm si troverà nella stessa cartella del file padre.</li>
<li>Volendo possiamo inserire codice PHP nel file figlio, ma in questo caso dovremo rinominare il file da menu.<span style="color: red;">htm</span> a menu.<span style="color: red;">php</span>. Inoltre il codice PHP contenuto in menu.php dovrà essere aperto e chiuso con php. </li>
</ol>
<h4>
Esempio di contenuto dinamico nel file menu.php:</h4>
<pre class="brush: php;"><?php echo"Ciao"; ?></pre>
In alcuni casi sarà possibile "forzare" l'inclusione con il <b>costrutto require</b>.<br />
<br />
<pre class="brush: php;"><?php require("menu.htm"); ?>
</pre>
Esiste infine la possibilità di utilizzare il costrutto <b>include_once</b> o<b> require_once</b>, particolarmente utile in script complessi, per evitare l'inclusione multipla indesiderata<br />
<br />
<pre class="brush: php;"><?php include_once("menu.htm"); ?>
<?php require_once("menu.htm"); ?>
</pre>
<br class="Apple-interchange-newline" />Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-63045765163110215762012-05-29T03:25:00.000-07:002012-06-27T02:01:07.792-07:00Slide Show semplice con JavaScript<h2>
Vediamo come visualizzare immagini in un div, senza ricaricare la pagina.</h2>
<div>
Con poche righe di codice, e con l'ausilio di JavaScript, realizzeremo un semplice visualizzatore di foto, che non ricarica necessariamente tutto il codice della pagina. Utile ad esempio, per allegare più foto a un articolo.</div>
<h3>
Esempio:</h3>
<div class="esempio">
<p style="text-align:center;"><b>Foto di Ilari Blasi</b></p>
<script type="text/javascript">
<!--
function zoom(foto)
{
var image = foto;
document.getElementById('fotozoom').innerHTML='<img src=' + image + '>';
}
//-->
</script>
<br />
<ul style="float: left;">
<li><a onclick="javascript:zoom('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAejR7GUX-ifs_wpCQBADuQen1xjc3YZ_xU_uTIOdl66zF8t8gAsPQx2c9LAZMMfRpKFBmr7BaGfLbrgxu-Rt_dM4hewhXiTPg2eU2yW8cxYKpYIttQA8_AeF5GbxQP2jBpHPZuPnbs4/s1600/22.jpg');">Foto 1</a></li>
<li><a onclick="javascript:zoom('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxhurRm7bv0PrF7dwZdiU4EtwkH6N0Bv9zOXusZvWQyAQkalvPF475X4Oc6DoBT1OrchCde8DHy4_oCFxiw_sIyTXjiyg-4sMzET5MJoLV3U79CR8RrGHtp3CUfYuF0Ik4MN8Iv23-3Q/s1600/33.jpg');">Foto 2</a></li>
<li><a onclick="javascript:zoom('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7met56yrC67xPEfdXp1DfrduUzHJM-mAgQn0PfvI4OMazV_wfD14W96Ho8KKLqfyFZuwPRQnl8jAkt7hK4VN5-c0-jMU-53dNr3YWU6viuQOopZEcmX-SdeQjL9jtbgW9-a77daZoZs/s1600/11.jpg');">Foto 3</a></li>
</ul>
<div id="fotozoom" style="float: left;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7met56yrC67xPEfdXp1DfrduUzHJM-mAgQn0PfvI4OMazV_wfD14W96Ho8KKLqfyFZuwPRQnl8jAkt7hK4VN5-c0-jMU-53dNr3YWU6viuQOopZEcmX-SdeQjL9jtbgW9-a77daZoZs/s1600/11.jpg" /></div>
<br style="clear: both;" /></div>
<br />
Per realizzare questo semplice visualizzatore di foto, abbiamo bisogno di tre cose:<br />
<ol>
<li>Il codice JavaScript che prende l'url della foto cliccata e lo memorizza in una variabile</li>
<li>Un menù di link alle foto da visualizzare</li>
<li>Il <div id="fotozoom"> nel quale pubblicheremo la foto cliccata</li>
</ol>
<h3>
Vediamo il codice</h3>
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Foto Show</title>
<script type="text/javascript">
<!--
function zoom(foto)
{
var image = foto;
document.getElementById('fotozoom').innerHTML='<img src=' + image + '>';
}
//-->
</script>
</head>
<body>
<ul>
<li><a href="#" onclick="javascript:zoom('2.jpg');">Foto 1</a></li>
<li><a href="#" onclick="javascript:zoom('3.jpg');">Foto 2</a></li>
<li><a href="#" onclick="javascript:zoom('1.jpg');">Foto 3</a></li>
</ul>
<div id="fotozoom"><img src="1.jpg" alt=""></div>
</body>
</html>
</pre>
<h3>
Spieghiamo</h3>
Il codice dalla riga 6 alla riga 14 memorizza il link al clic, lo rende una variabile e predispone il codice HTML da stampare per visualizzare la foto;<br />
<br />
Il codice HTML dalla riga 19 alla 23 serve soltanto a visualizzare un menù di esempio, che potremo ricreare a nostro piacimento;<br />
<br />
Il div alla riga 25 serve a contenere la foto che sceglieremo con il clic sul menù.<br />
<br />
Da notare che ho preimpostato la prima foto nel div, che ho anche riporposto sul link 3. Questo per fare in modo che alla prima visualizzazione della pagina ci sia già una prima foto visualizzata, senza dovere cliccare nulla.<br />
<h3>
Download</h3>
Per comodità è possibile <a href="https://sites.google.com/site/freehtmlscripts/semplice-slide-show.zip?attredirects=0&d=1" target="_blank">scaricare il file ZIP</a> con il codice di esempio.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-34626251370330144712012-05-28T14:14:00.000-07:002012-06-27T02:01:07.778-07:00Includere file esterno con JavaScript<h2>
Includere un file HTML figlio in un file HTML padre con JavaScript</h2>
Le inclusioni sono comode per inserire uno stralcio di codice in più pagine, senza doverlo ripeterlo ogni volta uguale.<br />
<br />
Esistono sostanzialmente due metodi per includere uno stralcio di codice esterno, in un file HTML: lato-server e lato-client. Quello che vediamo adesso è realizzato con JavaScript e appartiene alle inclusioni lato-client, cioè realizzate dal browser dell'utente.<br />
<br />
Per includere lo stralcio di codice, che nell'esempio è un menù, abbiamo bisogno di:<br />
<ol>
<li>Una pagina padre, che chiameremo example.htm </li>
<li>Lo stralcio di codice da includere che scriveremo nel file che chiameremo menu.js</li>
</ol>
<h4>
vediamo il codice della pagina padre example.htm
</h4>
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="menu.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inclusione con JavaScript</title>
</head>
<body>
<noscript>
<strong>
<p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
</strong>
</noscript>
<script type="text/javascript">
document.write(inclusione);
</script>
</body>
</html></pre>
<div>
<h4>
e vediamo anche il codice del menù da includere nella pagina padre menu.js</h4>
</div>
<pre class="brush: js;">inclusione="<ul><li><a href='home.htm'><span>Home</span></a></li><li><a href='prodotti.htm'><span>Prodotti</span></a><li><a href='chi.siamo.htm'><span>Chi siamo</span></a></li><li><a href='contatti.htm'><span>Contatti</span></a></li></ul>";
</pre>
<h3>
Spieghiamo:</h3>
Il primo codice di esempio è il file che chiameremo example.htm. È la nostra pagina padre, nella quale includeremo lo stralcio di codice.<br />
<br />
Da notare il codice alla riga 4 che richiama il file esterno menu.js;<br />
<br />
Il codice dalla riga 11 alla 15 serve per stampare un alert, nel caso in cui l'utente abbia JavaScript disabilitato sul browser;<br />
<br />
Il codice dalla riga 17 alla 19 stampa il contenuto del file incluso;<br />
<br />
Il secondo codice di esempio è il file che chiameremo menu.js.<br />
Guardandolo bene ha una stranezza: è scritto tutto su una riga senza andare mai a capo...<br />
Questo perché la stringa che nell'esempio si chiama inclusione, non permette codice a capo.<br />
<br />
Altra cosa che dovremo tenere a mente per evitare che il JavaScript generi un errore, è evitare l'utilizzo dei doppi apici <span style="color: red;">"</span>. Basterà utilizzare l'apice singolo <span style="color: red;">'</span>.<br />
<h4>
Ad esempio:</h4>
<div class="esempio">
inclusione"<a href=<span style="color: red;">"</span>http://www.example.com<span style="color: red;">"</span> title=<span style="color: red;">"</span>Example<span style="color: red;">"</span>>pippo</a>";</div>
<h4>
diventerà:</h4>
<div class="esempio">
inclusione"<a href=<span style="color: red;">'</span>http://www.example.com<span style="color: red;">'</span> title=<span style="color: red;">'</span>Example<span style="color: red;">'</span>>pippo</a>";</div>
<h4>
oppure potrebbe diventare...:</h4>
<div class="esempio">
inclusione"<a href=<span style="color: red;">\"</span>http://www.example.com<span style="color: red;">\"</span> title=<span style="color: red;">\"</span>Example<span style="color: red;">\"</span>>pippo</a>";</div>
<h3>
Download</h3>
Per chiarezza è possibile <a href="https://sites.google.com/site/freehtmlscripts/includejs.zip?attredirects=0&d=1" target="_blank">scaricare i due file example.htm e menu.js (ZIP)</a>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-15291940829674331742012-05-28T06:43:00.002-07:002012-06-27T02:01:07.772-07:00Includere un file con SSI<h2>
Includere un file HTML figlio in un file HTML padre, con SSI</h2>
Questo metodo di<b> inclusione lato server</b>, è molto utile quando si vuole utilizzare una parte di codice, ripetuto in più pagine di un sito internet, come ad esempio un menù, il logo in alto o gli indirizzi di solito in basso nella pagina.<br />
Vediamo prima di tutto il codice:<br />
<pre class="brush: php;"><!--#include virtual="menu.htm"--></pre>
<h3>
Spieghiamo:</h3>
la sintassi del <b>Server Side Include (SSI)</b> è molto semplice: <b>comando parametro e valore</b>, dove valore è l'url del nostro spezzone di codice da includere.<br />
<div>
<br />
Nell'esempio ho riportato l'url relativo riferito al menù che voglio inserire nella mia pagina. Se il menù si trovasse in una cartella chiamata INC l'esempio cambierebbe in:</div>
<pre class="brush: php;"><!--#include virtual="INC/menu.htm"--></pre>
<br />
Nel file menu.htm non ci devono essere i tag strutturali della pagina HTML ma soltanto lo spezzone di codice da includere.<br />
<br />
Un esempio completo di pagina padre e inclusione di spezzone potrebbe essere questo:<br />
<h4>
file padre example.shtml</h4>
<pre class="brush: xml;"><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Inclusione con SSI</title>
</head><span style="font-family: 'Times New Roman'; white-space: normal;"><body></span>
<p>Contenuto della pagina padre parte superiore della pagina</p>
<!--#include virtual="menu.htm"-->
<p>Contenuto della pagina padre parte inferiore della pagina</p>
</body>
</html></pre>
<pre class="brush: xml;"></pre>
<h4>
file figlio menu.htm</h4>
<pre class="brush: xml;"> <ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Prodotti</span></a>
<li><a href='#'><span>Chi siamo</span></a></li>
<li><a href='#'><span>Contatti</span></a></li>
</ul></pre>
<h3>
Nota:</h3>
Affinché l'inclusione vada a buon fine dobbiamo rispettare due vincoli:<br />
<br />
<ol>
<li>Il nostro server deve avere SSI attivato</li>
<li>La nostra pagina padre deve avere l'estensione shtml. Si dovrà chiamare ad esempio: example.shtml.<br />Va invece bene qualsiasi estensione per il file figlio che può essere nominato, come riportato nell'esempio: menu.htm. Nel file figlio sarà possibile inserire solo codice HTML.</li>
</ol>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-59455730638504912612012-05-28T05:52:00.000-07:002012-06-27T02:01:37.511-07:00Includere un filmato flash<h2>
Vediamo come includere un filmato in Flash nella nostra pagina HTML</h2>
Diamo per scontato che il filmato sia già pronto per essere pubblicato sul web.<br />
Significa che abbiamo già realizzato il nostro filmato con Flash, lo abbiamo salvato in formato .FLA e abbiamo già esportato il file che nell'esempio riportato sotto ho chiamato miofile.swf dove .SWF è il file compilato da visualizzare nella nostra pagina HTML.<br />
<br />
Con questo semplice codice posso includere un file con estensione SWF in una pagina HTML<br />
<br />
<pre class="brush: xml;"><p>
<object
type="application/x-shockwave-flash"
data="http://www.example.com/miofile.swf"
width="800"
height="650">
<param
name="movie"
value="http://www.example.com/miofile.swf "/>
</object>
</p></pre>
<h3>
Spieghiamo:</h3>
Da notare che ho inserito <object...> all'interno di un tag paragrafo.<br />
Questa accortezza serve solo a non "infastidire" il <a href="http://validator.w3.org/" target="_blank">validatore</a>, nel caso in cui utilizziamo un <a href="http://free-html-scripts.blogspot.it/search/label/DTD" target="">DTD Strict</a>, altrimenti possiamo tranquillamente fare a meno del tag <p>.<br />
<br />
In pratica se non utilizzo un <b>DTD Strict</b> potrò avere un codice validato anche cancellando la prima e l'ultima riga dell'esempio.<br />
<h3>
Consiglio:</h3>
Sarebbe meglio non scalare il filmato importato, questo per evitare che la grafica venga ricampionata dal browser. Per fare questo, basta realizzare il filmato flash direttamente delle dimensioni che verranno utilizzate nella pagina HTML.<br />
<br />
Nell'esempio ho ipotizzato un filmato con width="800" ed height="650", in questo caso il foglio di lavoro del filmato flash dovrà essere creato base 800px e altezza 650px.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-39202150776381195002012-05-27T13:11:00.000-07:002012-06-27T02:01:07.782-07:00Redirect con JavaScript<h2>Semplice redirect con JavaScript</h2>
Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.<br />
<pre class="brush: js;"><script type="text/javascript">
<!--
top.location.replace("http://www.example.com");
-->
</script></pre>
<h3>
Spieghiamo:</h3>
Si tratta dell'oggetto<b> location.replace</b> grazie al quale è possibile sostituire il nostro documento con il nuovo url.<br />
<br />
È possibile utilizzare, con lo stesso risultato anche altri due oggetti del JavaScript: <b>location.reload</b> e <b>location.href</b> utilizzandoli come illustrato nei due esempi che seguono:
<pre class="brush: js;"><script type="text/javascript">
<!--
top.location.reload("http://www.example.com");
-->
</script></pre>
<pre class="brush: js;"><script type="text/javascript">
<!--
top.location.href("http://www.example.com");
-->
</script></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-36247792636238963112012-05-27T12:50:00.000-07:002012-06-27T02:01:07.780-07:00Redirect con PHP<h2>
Semplice redirect con PHP</h2>
Con questo semplice codice è possibile effettuare un redirect della nostra pagina con PHP.<br />
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.<br />
<pre class="brush: php;"><?php
header("Refresh: 5; URL=http://www.example.com");
exit;
?>
</pre>
<h3>
Spieghiamo:</h3>
Tramite questo redirect in PHP è possibile impostare un tempo e un url.<br />
Se ad esempio impostiamo il parametro Refresh a 5, il nostro redirect verrà avviato dopo 5 secondi.<br />
<br />
Se nella pagina è presente altro codice che non voglio eseguire, blocco lo script con exit;<br />
Altrimenti non serve e lo posso tranquillamente togliere.<br />
<br />
È possibile anche utilizzare la forma contratta, senza impostare un tempo al redirect, che avrà quindi effetto immediato:
<br />
<pre class="brush: php;"><?php
header("Location: http://www.example.com");
exit;
?> </pre>
<h3>
Spieghiamo:</h3>
Anche in questo caso è possibile togliere exit; se nella pagina non c'è altro codice che non si desidera venga eseguito.<br />
<br />
È possibile con una piccola astuzia, utilizzare questo redirect, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro Refresh a 30, e indicare come url la pagina attuale.<br />
<br />
In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi<br />
Esempio:<br />
<pre class="brush: php;"><?php
header("Refresh: 30; URL=http://www.url-della-mia-pagina.it");
echo"Questa pagina viene ricaricata ogni 30 secondi...";
?></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-60892061479226792762012-05-27T12:27:00.000-07:002012-06-27T02:01:07.790-07:00Redirect con HTML<h2>
Semplice redirect in HTML</h2>
Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.<br />
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.<br />
<pre class="brush: xml;"><meta http-equiv="Refresh" content="5; url=http://www.example.com"></pre>
<h3>
Spieghiamo:</h3>
Si tratta del metatag<b> Refresh</b> grazie al quale è possibile impostare un tempo e un url al nostro redirect.<br />
Se ad esempio impostiamo il content a 5, il nostro redirect verrà avviato dopo 5 secondi.<br />
<br />
È possibile con una piccola astuzia, utilizzare questo metatag, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro content a 30, e indicare come url la pagina attuale.<br />
<br />
In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi<br />
<br />
<pre class="brush: xml;"><meta http-equiv="Refresh" content="30; url=http://www.url-della-mia-pagina.it">
</pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-18969371517146729102012-05-27T05:53:00.000-07:002012-06-27T02:01:07.773-07:00Link che apre in _blank con JavaScript<h2>
Creare un link che apre in una nuova pagina del browser</h2>
Se vogliamo che il nostro clic apra in una nuova pagina del browser, possiamo farlo modificando con JavaScript il codice <a href come segue:<br />
<h3>
Vediamo il codice JavaScript:</h3>
<pre class="brush: js;"><a href="http://www.example.com/"
title="Apri EXAMPLE in una nuova pagina"
onClick="window.open(this.href);return false">Example</a></pre>
<h3>
Spieghiamo:</h3>
Questa soluzione utilizza l'onClick del JavaScript per generare una nuova pagina del browser.<br />
<h4>
PRO:</h4>
È utile se utilizziamo un <a href="http://free-html-scripts.blogspot.it/2012/05/doctype-xhtml-10-transitional.html" target="_blank">DOCTYPE XHTML 1.0 Transitional</a> oppure un <a href="http://free-html-scripts.blogspot.it/2012/05/codice-doctype-html-401-transitional.html" target="_blank">DOCTYPE HTML 4.01 Transitional</a> e vogliamo mantenere la validazione W3C del codice.<br />
<h4>
CONTRO:</h4>
Non funziona correttamente se l'utente ha JavaScript disabilitato sul browser<br />
Se utilizzeremo questa soluzione, sarà buona norma inserire un <noscript> nella pagina, che visualizzerà un messaggio se l'utente non ha JavaScript abilitato:<br />
<br />
<pre class="brush: xml;"><noscript>
<p style="color:red; text-align:center;">
Attenzione: per visualizzare correttamente
il contenuto della pagina occorre avere JavaScript abilitato.
</p>
</noscript></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-45081605067664916182012-05-27T05:04:00.001-07:002012-06-27T02:01:07.784-07:00Menù orizzontale con sottomenù<h2>Vediamo come creare un semplice menù con sottomenù</h2>
<h4>Esempio:</h4>
<div class="esempio" style="height: 180px;">
<style type="text/css">
.cssmenu {
border:none;
margin:0px;
padding:0px;
font-family:verdana, geneva, arial, helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
/*1° livello*/
.cssmenu ul {
list-style:none;
margin:0;
padding:0;
}
.cssmenu li {
float:left;
padding:0px 8px 0px 8px;
list-style:none;
}
.cssmenu li a {
color:darkGoldenrod;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.cssmenu li a:hover {
color:green;
text-decoration:none;
text-decoration:underline;
}
/*2° livello*/
.cssmenu li ul {
background:green;
display:none;
height:auto;
position:absolute;
width:225px;
z-index:1;
}
.cssmenu li:hover ul {
display:block;
}
.cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.cssmenu li ul a {
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
color:white;
}
.cssmenu li ul a:hover {
background:darkgreen;
color:greenyellow;
}
.cssmenu p {
clear:left;
}
/*link active*/
.cssmenu .active > a {
color:red;
}
.cssmenu .active > a:hover {
text-decoration:underline;
color:maroon;
}
</style>
<div class="cssmenu">
<ul>
<li class="active"><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Home</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Prodotti</a>
<ul style="margin:0; padding:0;">
<li><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Prodotto 1</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Prodotto 2</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Chi siamo</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4599237344187018608#">Contatti</a></li>
</ul>
</div>
</div>
Questo semplice menù è realizzato esclusivamente utilizzando codice CSS.<br />
Con una semplice struttura HTML composta da <ul> e <li>, sarà possibile creare tutti i menù e sottomenù necessari al nostro sito.<br />
<br />
<h3>
Browser</h3>
Ho testato il funzionamento e la rappresentazione grafica del menù con tutte le ultime versioni dei browser più utilizzati:<br />
<img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6jDwGI4NHGS81qWfWB_1EIbVpDEfv-WhPU0ulNv50DhIDGzUhZ64XBlNGfQm5Bma5na21fx8LOsi4KHLnHNfsbD_JserU19g5yzIrdf6yWyXbdtshk9oyd3MIUnww83HkU6XFwco9CUw/s200/Apps-Safari-icon.png" /> <img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3fg6hN1F33avS4KI_LwcjftU5vhB4XBice-AfxLbmaSagzKWavJu-hsFChJxXXDGB0zZZJUXK4CWkejaSKOUN1vDNgSmhrHWAuiQWECSL7fzMNsczlgtNSSV7Z5nRF6XhGhBlNQDJGjA/s320/chrome-icon.png" />
<img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhmT8FAfKuXV8w0fErzyRC1Fw27zNrq-nU5gDh96MFu10yzpEMK4tRAvjI0QU5ED8OWtmc-6iMcS9aUigBfWtAcIQyw1etAyv5BJmOF4VZg4E_NCIK8X9VTkPgYfeYvUJrzi0lIxLBHx4/s1600/firefox2009-128-ombra.png" />
<img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZP0q-PH8hrwNv1Wmjf5mP2JyjXZc3TY_jAJSuyQoiSFrYZTJnCgJj-eKpEDra-Usagi0J1eCzsnVqvyjSQrmTdqeqjyjmTe9HhBaXbZ3nRx88dU77LCPCdteK4uq8tVCQRtWm8HMTIbU/s1600/Internet_Explorer_9.png" />
<br />
<br />
<h3>
Vediamo il codice </h3>
CSS:
<br />
<pre class="brush: css;"><style type="text/css">
.cssmenu {
border:none;
margin:0px;
padding:0px;
font-family:verdana, geneva, arial, helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
/*1° livello*/
.cssmenu ul {
list-style:none;
margin:0;
padding:0;
}
.cssmenu li {
float:left;
padding:0px 8px 0px 8px;
}
.cssmenu li a {
color:darkGoldenrod;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.cssmenu li a:hover {
color:green;
text-decoration:none;
text-decoration:underline;
}
/*2° livello*/
.cssmenu li ul {
background:green;
display:none;
height:auto;
position:absolute;
width:225px;
z-index:1;
}
.cssmenu li:hover ul {
display:block;
}
.cssmenu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.cssmenu li ul a {
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
color:white;
}
.cssmenu li ul a:hover {
background:darkgreen;
color:greenyellow;
}
.cssmenu p {
clear:left;
}
/*link active*/
.cssmenu .active > a {
color:red;
}
.cssmenu .active > a:hover {
text-decoration:underline;
color:maroon;
}
</style>
</pre>
<div>
<br /></div>
<div>
<br /></div>
HTML:
<br />
<pre class="brush: xml;"><div class='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Prodotti</span></a>
<ul>
<li><a href='#'><span>Prodotto 1</span></a></li>
<li><a href='#'><span>Prodotto 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>Chi siamo</span></a></li>
<li><a href='#'><span>Contatti</span></a></li>
</ul>
</div>
</pre>
<h3>
Spieghiamo:</h3>
Nel Css ho indicato dove apportare modifiche. Se vogliamo personalizzare il primo livello di menù, quello visibile senza intervento del mouse basterà modificare il codice CSS preceduto da:<br />
<pre class="brush: css;">/*1° livello*/</pre>
<br />
Per modificare graficamente il secondo livello basterà modificare il codice CSS preceduto da:<br />
<pre class="brush: css;">/*2° livello*/</pre>
<br />
È anche possibile modificare l'aspetto grafico del menù appartenente alla pagina che stiamo visualizzando, ossia la pagina attiva. Basterà modificare il codice CSS preceduto da:<br />
<pre class="brush: css;">/*link active*/</pre>
<br />
<br />
Nel codice HTML dovremo semplicemente specificare il link che appartiene alla pagina attuale modificando <li> in<br />
<pre class="brush: xml;"><li class='active'></pre>
ossia link attivo.<br />
<br />
Per comodità è possibile <a href="https://sites.google.com/site/freehtmlscripts/menutop.html?attredirects=0&d=1" target="_blank">scaricare l'intero file HTML + CSS</a>.Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-4599237344187018608.post-13260385354182919972012-05-26T07:36:00.001-07:002012-06-27T02:01:07.770-07:00Layout 2 colonne 100%<h2>
Vediamo come impostare un layout 2 colonne con larghezza 100%</h2>
<h3>
Il layout prevede 4 macro aree:</h3>
<ol>
<li><b>Header </b>per contenere il logo in testa alla pagina</li>
<li><b>Navigation </b>per un menù a sinistra</li>
<li><b>Content </b>per una colonna centrale di contenuti</li>
<li><b>Footer </b>per indirizzo telefoni ecc. a pié di pagina</li>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yDSjPGyVJe3oz8l1G-QLxyvvfxPuj2uoTAjxwNOzOQpA6Lyn17b-l2aIhoGnjgzEec8DitBCgRokJmL46Ul6ifU9MZUgmFLM2bRUy4wjfNGmvgBj_oAI1b-bB06YxDXtkhrYBF39iFs/s1600/2c100%25.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="167" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yDSjPGyVJe3oz8l1G-QLxyvvfxPuj2uoTAjxwNOzOQpA6Lyn17b-l2aIhoGnjgzEec8DitBCgRokJmL46Ul6ifU9MZUgmFLM2bRUy4wjfNGmvgBj_oAI1b-bB06YxDXtkhrYBF39iFs/s400/2c100%25.jpg" width="400" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
HEAD:
<br />
<pre class="brush: xml;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 2 colonne larghezza in percentuale</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</pre>
CSS:
<br />
<pre class="brush: css;"><style type="text/css">
* {
margin:0;
padding:0;
}
div#wrapper {
float:left;
width:100%;
}
div#header {
height:80px;
background: #FF9;
}
div#content {
margin: 0 0% 0 25%;
background-color:#FFF;
}
div#navigation {
background:#E8E8FF;
float:left;
width:25%;
margin-left:-100%;
}
div#footer {
background: #CCC;
clear:left;
width:100%;
}
</style>
</pre>
BODY:
<br />
<pre class="brush: xml;"></head>
<body>
<div id="container">
<div id="header">
<H1>HEADER</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
</div>
<div id="wrapper">
<div id="content">
<h2>CONTENUTI</h2>
<p><img src="https://www.google.com/images/srpr/logo3w.png" alt="" width="275" height="95" align="left" id="segnaposto" style="background-color: #CCCC33" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="navigation">
<h2>MENU</h2>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
<br style="clear:both" />
</div>
<div id="footer">
<h2>FOOTER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
</div>
</div>
</body>
</html>
</pre>
<h3>
Spieghiamo: </h3>
Con questo<b> layout suddiviso in 2 colonne</b>, visualizzeremo una<b> pagina al 100%</b> della finestra del browser.
<br />
Chiaramente le modifiche che si possono fare sono infinite.<br />
<br />
Ad esempio potremmo voler distanziare il layout a destra e a sinistra rispetto alla finestra del browser,<br />
in questo caso basterebbe aggiungere al codice CSS riportato sopra:<br />
<pre class="brush: css;">#container {
margin: 0 5%;
}
</pre>
per avere uno spazio a destra e a sinistra corrispondente al 5% della finestra del browser.<br />
<h3>
Download:</h3>
Per comodità è possibile <a href="https://sites.google.com/site/freehtmlscripts/Layout2C100.html?attredirects=0&d=1" target="_blank">scaricare il file HTML</a> completo.Unknownnoreply@blogger.com0