<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Nome sito</title>
<meta name="title" content="Nome sito">
<meta name="description" content="Descrizione sito">
<meta name="keywords" content="Parole chiave per i motori di ricerca, tipo, grafica,accessori web,gadget">
<meta name="author" content="Tuo nome">
<meta name="robots" content="index,follow">

<!--Web set free realizzato da Penelope - https://www.iltelaiodipenelope.it -->

<style type="text/css">
body {background-image: url('images/sfondo_verdino_xx.jpg');
text-align:center;
font-family : "Tahoma"; 
color : #645042; 
font-size : 12px;
margin-top: 0px
}
h1,h2,h3{margin: 0; color: #55583a;}
h1{margin: 0;font-size:120%}
h2{margin-bottom: 8px;font-size: 110%;text-align:center;}
h3{margin-bottom: 5px;font-size: 110%;font-style: oblique;text-align:center;}

a:link { 
text-decoration: none; 
cursor:nw-resize;
font-family: "Tahoma"; 
font-size: 12px;
color:#47502c; 
}
a:visited { 
text-decoration:none; 
cursor:nw-resize;
font-family: "Tahoma"; 
font-size: 12px;
color:#975545; 
}
a:hover {
text-decoration: line-through; 
color: #b4c51b;
}
a:active { 
font-family: "Tahoma"; 
font-size: 12px; 
color: #e27878; 
}
div#header {
border:0 none;
background-image: url('images/penelope_verdino_topx.png');
text-align:center;
margin-left:auto;      
margin-right:auto;
width: 1010px;
height:260px
}
div#corpo {
border: 0px none;
background-image: url('images/penelope_verdino_striscia.png');
text-align:center;
margin-left:auto;      
margin-right:auto;
width: 1010px
}
div#footer {
border: 0px none;
background-image: url('images/penelope_verdino_footer.png');
text-align:center;
margin-left:auto;      
margin-right:auto;
width: 1010px;
height:115px
}
table.base{  
border:0px;
text-align:center;
font-family: "Tahoma"; 
font-size: 12px; 
color : #787c54; 
margin-left:auto;
margin-right:auto
}
table.bordi{  
border:10px solid #dcdfbd;
text-align:center;
font-family: "Tahoma"; 
font-size: 12px; 
color : #787c54;
margin-left:auto;
margin-right:auto
}
td.bordo_left {
border-left:1px dotted #787c54;
text-align:center;
font-family: "Tahoma"; 
font-size: 12px; 
color : #787c54; 
}
/* Barra menu */
div#menu {
border: 0px none;
text-align:center;
width: 641px;
height: 55px;
margin-left:auto;      
margin-right:auto
}
ul.voci_menu{ 
font: bold 14px Tahoma;
padding: 10px 0 0px 0; 
margin: 0;
text-align: center; 
}
ul.voci_menu li{
display: inline;
}
ul.voci_menu li a{
font-family: "Tahoma"; 
font-size: 14px;
color:#8c9153;
text-decoration: none;
background: url('images/img_q_out.png') no-repeat left;; padding-left:15px; padding-right:30px; padding-top:0px; padding-bottom:0px
}
ul.voci_menu li a:hover {
font-family: "Tahoma"; 
font-size: 14px;
color: #707442;
text-decoration: underline;
background: url('images/img_q_hover.png') no-repeat left;; padding-left:15px; padding-right:30px; padding-top:0px; padding-bottom:0px 
}
/* Barra menu */

img.images{
border:10px solid #dcdfbd;
}

/* Back to top button */
div#fixed { 
border: 0px none;
background-image:url('images/penelope_verdino_top_pagex.png');
position:fixed;
bottom:0px;
right:10px;
width:145px; 
height: 42px
}
</style>

</head>

<body>

<div id="header">
<table class="base" cellpadding="2" cellspacing="2" width="98%">
 <tr>
	<td height="50"></td>
 </tr>
 <tr>
	<td><img border="0" src="images/img_logo.png" width="470" height="59" alt="Logo Sito"><br><br>
<!-- Inizio menu barra -->
<div  id="menu">
<ul class="voci_menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>		
</ul>
</div><!-- Fine menu barra --></td>
 </tr>
</table>
</div>

<div id="corpo">
<table class="base" cellpadding="2" cellspacing="2" width="98%">
 <tr>
	<td valign="top"><!-- Inizio Spazio CorpoPagina -->
<h1>Nome sito...</h1>
<h2>Breve descrizione e/o frase di benvenuto...</h2><br>

* Questo  un esempio, un box con immagini a rotazione<br><br>
	
<!-- Immagini a rotazione -->
<table class="bordi" cellpadding="0" cellspacing="0" width="580">
 <tr>
   <td><script type="text/javascript">
// Autore sconosciuto
// Spiegato da https://www.iltelaiodipenelope.it

hoje = new Date()
numero_de_imagens = 3 
segundos = hoje.getSeconds()
numero = segundos % numero_de_imagens

if (numero == 0){
banner = "images/bambolina.jpg"
}
if (numero == 1){
banner = "images/margherite.jpg"
}
if (numero == 2){
banner = "images/papaveri.jpg"
}
document.write('<img src="' + banner + '" border=0 alt="Testo">')
</script></td>
 </tr>
</table><!-- Immagini a rotazione --><br><br>
	
Lo spazio corpo/pagina e la colonna cresceranno man mano che si aggiungono contenuti<br> 
puoi inserire quindi accessori, gadget e tutto ci che ti occorre in base al tipo di spazio che vuoi realizzare.<br>
Puoi utilizzare lo spazio corpo/pagina per un iframe in cui far visualizzare tutte le altre pagine del sito<br><br>

*Nello zip di questo template trovi il font per realizzare in grafica o in html<br>  
il nome del logo ed eventuali altre scritte/titoli, leggi il tutorial in <a target="_blank" href="https://www.iltelaiodipenelope.it/tutorial/html/font_personalizzato_sito.php">Font personalizzato</a><br><br>

- Puoi fare tutte le modifiche che ritieni necessarie alla struttura,<br>
ma non alterare in nessun modo la grafica e non togliere il credits del telaio^^<br><br>
Buon lavoro... buon sito Penelope &#9829;<br><br>	

<!-- Fine Spazio CorpoPagina --></td>
	<td width="310" valign="top"><!-- Inizio Spazio Colonna -->
<table class="base" cellpadding="2" cellspacing="2" width="280">
 <tr>
	<td><h3>Titolo...</h3>
	Testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br><br>
	<img border="0" src="images/penelope_verdino_barretta_1.png" width="260" height="20" alt=""><br><br>
	<h3>Titolo...</h3>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br><br>
	<img border="0" src="images/penelope_verdino_barretta_1.png" width="260" height="20" alt=""><br><br>
	<h3>Titolo...</h3>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo</td>
 </tr>
</table><br>

- Spazio accessorio/gadget<br><br>

- Spazio accessorio/gadget<br><br>
	<!-- Fine Spazio Colonna --></td>
 </tr>
</table><br>

<!-- Testo per info, eliminalo --><h2>* Qui c' una table con tre celle per delle anteprime di immagini e testo, occorre fare attenzione agli spazi per i contenuti</h2><br><!-- Testo per info, eliminalo -->
	
<!-- Inizio Spazio Ante agrgomenti -->
<table class="base" cellpadding="2" cellspacing="2" width="98%">
 <tr>
	<td width="329" valign="top"><img border="0" src="images/penelope_ornamento_1.png" width="280" height="15" alt=""></td>
	<td width="329" valign="top"><img border="0" src="images/penelope_ornamento_2.png" width="123" height="20" alt=""></td>
	<td width="330" valign="top"><img border="0" src="images/penelope_ornamento_1.png" width="280" height="15" alt=""></td>
 </tr>
 <tr>
	<td width="329" valign="top"><img class="images" border="0" src="images/penelope_img_esempiox.png" width="258" height="175" alt=""><br><br>
	<em>Argomento...<br>
	Testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo...</em><br><br></td>
	<td class="bordo_left" width="329" valign="top"><img class="images" border="0" src="images/penelope_img_esempiox.png" width="258" height="175" alt=""><br><br>
	<em>Argomento...<br>
	Testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo...</em><br><br></td>
	<td class="bordo_left" width="330" valign="top"><img class="images" border="0" src="images/penelope_img_esempiox.png" width="258" height="175" alt=""><br><br>
	<em>Argomento...<br>
	Testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo...</em><br><br></td>
 </tr>
</table><!-- Fine Spazio Ante agrgomenti --><br>

<!-- Testo per info, eliminalo --><h2>* Qui c' una table con tre celle superiori e una cella unica inferiore che cresce in base ai contenuti</h2><br><!-- Testo per info, eliminalo -->
	
<img border="0" src="images/penelope_ornamento_3.png" width="787" height="39" alt=""><br><br>
	
<table class="base" cellpadding="2" cellspacing="2" width="96%">
 <tr>
	<td width="305"><!-- Inizio Spazio Info sito -->
	<h3>Articoli...</h3>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo</td>
	<td class="bordo_left" width="317"><h3>BlogRoll</h3>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a><br>
	- <a href="#">Nome Pagina Link</a> - <a href="#">Nome Pagina Link</a></td>
	<td class="bordo_left" width="304"><h3>Resources</h3>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<br> 
	testo testo testo testo testo testo testo<br>
	testo testo testo testo testo testo testo<!-- Fine Spazio Info sito --></td>
 </tr>
 <tr>
	<td width="926" colspan="3"><!-- Spazio contenuti/gadget/accessori --><br><br>	
SPAZIO PER INSERIRE CONTENUTI - GADGET - ACCESSORI<br><br>
<!-- Spazio contenuti/gadget/accessori --></td>
 </tr>
</table>
</div><!-- Attensione a non cancellare questo tag div -->

<div id="footer">
<table class="base" cellpadding="2" cellspacing="2" width="98%">
 <tr>
	<td height="30">&nbsp;</td>
 </tr>
 <tr>
	<td>? Nome sito 
<script type="text/javascript">
// Script Calcolo Tempo Trascorso Penelope - https://www.iltelaiodipenelope.it
 var dataIniziale = new Date('2023-10-13'); // Imposta qui la data
 var dataAttuale = new Date();

 function differenzaDate(inizio, fine) {
    var anni = fine.getFullYear() - inizio.getFullYear();
    var mesi = fine.getMonth() - inizio.getMonth();
    var giorni = fine.getDate() - inizio.getDate();

    if (mesi < 0 || (mesi === 0 && fine.getDate() < inizio.getDate())) {
        anni--;
        mesi += 12;
     }

    if (giorni < 0) {
        var ultimoGiornoMesePrecedente = new Date(fine.getFullYear(), fine.getMonth(), 0).getDate();
        giorni = ultimoGiornoMesePrecedente - inizio.getDate() + fine.getDate();
        mesi--;
     }

      return { anni: anni, mesi: mesi, giorni: giorni };
  }

  var differenza = differenzaDate(dataIniziale, dataAttuale);
  
document.write("online da... " + differenza.anni + " anni, " + differenza.mesi + " mesi e " + differenza.giorni + " giorni");
</script><br>
	
<script type="text/javascript">
copyright=new Date();
update=copyright.getFullYear();
document.write("Copyright  2013 - "+ update + " - Nome Autore - Tutti i diritti riservati.");
</script><br>
Webdesign:. <a target="_blank" href="https://www.iltelaiodipenelope.it/">Penelope &#9829;</a></td>
 </tr>
</table>
</div>

<div id="fixed">
<table class="base" cellpadding="0" cellspacing="0" width="96%">
 <tr>
	<td height="27">&nbsp;</td>
 </tr>
 <tr>
	<td><a href="javascript:history.back()"><img border="0" src="images/back_scuro.png" width="53" height="15" alt="Torna indietro"></a> 
    <a href="#top"><img border="0" src="images/top_scuro.png" width="53" height="15" alt="Torna su..."></a></td>
 </tr>
</table>
</div>

</body>

</html>