Da WIKI CoderDojo Firenze.
(il mio Blog html)
(il mio Blog html)
Riga 26: Riga 26:
 
<br/>'''cosafaro.html'''
 
<br/>'''cosafaro.html'''
 
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp; &nbsp; &lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;title&gt;Il mio Blog&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;body{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-family:Arial, Helvetica;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-image:url('personcina.png');<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.cellamenu{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color:#D4E6CA;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height:50px;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width:25%;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align:center;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cursor:pointer;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.cellamenuselezionata{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color:#99FF66;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height:50px;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width:25%;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align:center;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cursor:pointer;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="SelezionaPagina(document.getElementById('home'));"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="menu" align="center" style="border:0;width:800px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="home" class="cellamenu"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="chisono" class="cellamenu" &gt;&lt;a href="chisono.html"&gt;Chi Sono&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="cosapiace" class="cellamenu"&gt;&lt;a href="cosamipiace.html"&gt;Cosa mi piace&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="cosafaro" class="cellamenuselezionata" &gt;Cosa farò da grande&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr id="corpocosafaro"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Da grande farò .....&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ma io sono già grandeeeeeeeee&lt;/p&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="piedipagina" align="center" style="border:0;width:800px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;"&gt;MDV Copyleft 2014&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div>
 
<div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;">&lt;html&gt;<br/>&nbsp; &nbsp; &lt;head&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;title&gt;Il mio Blog&lt;/title&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;body{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;font-family:Arial, Helvetica;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-image:url('personcina.png');<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.cellamenu{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color:#D4E6CA;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height:50px;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width:25%;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align:center;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cursor:pointer;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;.cellamenuselezionata{<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color:#99FF66;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height:50px;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width:25%;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;text-align:center;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;cursor:pointer;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/head&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;body onload="SelezionaPagina(document.getElementById('home'));"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="menu" align="center" style="border:0;width:800px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="home" class="cellamenu"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="chisono" class="cellamenu" &gt;&lt;a href="chisono.html"&gt;Chi Sono&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="cosapiace" class="cellamenu"&gt;&lt;a href="cosamipiace.html"&gt;Cosa mi piace&lt;/a&gt;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td id="cosafaro" class="cellamenuselezionata" &gt;Cosa farò da grande&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr id="corpocosafaro"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Da grande farò .....&lt;/p&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;p&gt;Ma io sono già grandeeeeeeeee&lt;/p&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;table id="piedipagina" align="center" style="border:0;width:800px;"&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;"&gt;MDV Copyleft 2014&lt;/td&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;tr&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/table&gt;<br/>&nbsp;&nbsp; &nbsp;&lt;/body&gt;<br/>&lt;/html&gt;</span></div>
<span style="font-family:courier new,courier,monospace;"></span>Di seguito un'immagine di come si presenta la homepage del blog.
+
Di seguito un'immagine di come si presenta la homepage del blog.<br/>[[File:Schermata-Il mio Blog-mini.png|Homepage del Blog]]

Versione delle 18:17, 29 ago 2014

Il mio Blog HTML

Questo tutorial descrive la creazione di un semplice blog con HTML e CSS.
L'esercizio consiste nella creazione di quattro pagine HTML:

  • index.html, homepage del blog;
  • chisono.html, contenente una descrizione del proprietario del blog;
  • cosamipiace.html, contenente una descrizione delle preferenze del proprietario del blog;
  • cosafaro.html, contenente una descrizione dei progetti futuri del proprietario del blog.

I quattro file sono quasi uguali: disegnano un riquadro centrale con un menu sovrastante su uno sfondo personalizzato e si distinguono solo per il contenuto del riquadro centrale.

passo 1: realizzazione della pagina homepage

Il codice seguente è composto dalle sezioni di base della pagina html:
<head>: contiene il titolo (tag <title>) della pagina e le impostazioni di stile comuni (tag <style>)
<body>: contiene tre tabelle allineate in verticale che si riferiscono alle tre parti della pagina e cioè: menu (in alto), corpo (centrale) e piedipagina (in basso).

index.html

<html>
    <head>
        <title>Il mio Blog</title>
        <style>
            body{
                font-family:Arial, Helvetica;
                background-image:url('personcina.png');
            }
            .cellamenu{
                background-color:#D4E6CA;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
            .cellamenuselezionata{
                background-color:#99FF66;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
        </style>
    </head>
    <body onload="SelezionaPagina(document.getElementById('home'));">
        <table id="menu" align="center" style="border:0;width:800px;">
            </tr>
                <td id="home" class="cellamenuselezionata">Home</td>
                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td>
                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td>
                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td>
            <tr>
        </table>
        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;">
            <tr id="corpohome">
                <td>
                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;margin-left:200px;
                                    margin-top:10px;width:300px;text-align:center;">
                        <span style="position:relative;left:10px;top:80px;">Questa è la home page del blog di margherita</span>
                    </div>
                </td>
            </tr>
        </table>
        <table id="piedipagina" align="center" style="border:0;width:800px;">
            </tr>
                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td>
            <tr>
        </table>
    </body>
</html>

passo 2: realizzazione delle altre tre pagine del blog

Le altre tre pagine html si distiguono da questa solo per la modifica del contenuto della tabella con id="corpo". Di seguito i sorgenti di queste pagine.

chisono.html

<html>
    <head>
        <title>Il mio Blog</title>
        <style>
            body{
                font-family:Arial, Helvetica;
                background-image:url('personcina.png');
            }
            .cellamenu{
                background-color:#D4E6CA;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
            .cellamenuselezionata{
                background-color:#99FF66;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
        </style>
    </head>
    <body onload="SelezionaPagina(document.getElementById('home'));">
        <table id="menu" align="center" style="border:0;width:800px;">
            </tr>
                <td id="home" class="cellamenu"><a href="index.html">Home</a></td>
                <td id="chisono" class="cellamenuselezionata" >Chi Sono</td>
                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td>
                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td>
            <tr>
        </table>
        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;">
            <tr id="corpochisono">
                <td>
                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;width:300px;
                                    margin-left:10px;margin-top:10px;text-align:center;">
                        <span style="position:relative;left:10px;top:80px;">Questa sono io</span>
                    </div>
                    <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;width:300px;
                                            margin-left:200px;margin-top:50px;text-align:center;">
                        <span style="position:relative;left:10px;top:80px;">Questa è la mia foto</span>
                    </div>
                </td>
            </tr>
        </table>
        <table id="piedipagina" align="center" style="border:0;width:800px;">
            </tr>
                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td>
            <tr>
        </table>
    </body>
</html>


cosamipiace.html

<html>
    <head>
        <title>Il mio Blog</title>
        <style>
            body{
                font-family:Arial, Helvetica;
                background-image:url('personcina.png');
            }
            .cellamenu{
                background-color:#D4E6CA;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
            .cellamenuselezionata{
                background-color:#99FF66;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
    </style>
    </head>
    <body onload="SelezionaPagina(document.getElementById('home'));">
        <table id="menu" align="center" style="border:0;width:800px;">
            </tr>
                <td id="home" class="cellamenu"><a href="index.html">Home</a></td>
                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td>
                <td id="cosapiace" class="cellamenuselezionata">Cosa mi piace</td>
                <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td>
            <tr>
        </table>
        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;">
            <tr id="corpocosapiace">
                <td>
                    <p>Queste sono le cose che mi piacciono:</p>
                    <ul>
                        <li>leggere</li>                    
                        <li>programmare</li>                    
                        <li>mangiare</li>                    
                        <li>nuotare</li>                    
                    </ul>
                    <p>e poi mi piace questo video:</p>
                    <iframe width="420" height="315" src="http://www.youtube.com/embed/OXrU2ECBH-E?rel=0" frameborder="0" allowfullscreen></iframe>
                </td>
            </tr>
        </table>
        <table id="piedipagina" align="center" style="border:0;width:800px;">
            </tr>
                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td>
            <tr>
        </table>
    </body>
</html>


cosafaro.html

<html>
    <head>
        <title>Il mio Blog</title>
        <style>
            body{
                font-family:Arial, Helvetica;
                background-image:url('personcina.png');
            }
            .cellamenu{
                background-color:#D4E6CA;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
            .cellamenuselezionata{
                background-color:#99FF66;
                height:50px;
                width:25%;
                text-align:center;
                cursor:pointer;
            }
        </style>
    </head>
    <body onload="SelezionaPagina(document.getElementById('home'));">
        <table id="menu" align="center" style="border:0;width:800px;">
            </tr>
                <td id="home" class="cellamenu"><a href="index.html">Home</a></td>
                <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td>
                <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td>
                <td id="cosafaro" class="cellamenuselezionata" >Cosa farò da grande</td>
            <tr>
        </table>
        <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;">
            <tr id="corpocosafaro">
                <td>
                    <p>Da grande farò .....</p>
                    <p>Ma io sono già grandeeeeeeeee</p>                    
                </td>
            </tr>
        </table>
        <table id="piedipagina" align="center" style="border:0;width:800px;">
            </tr>
                <td style="text-align:center;border-top:1px solid red;width:100%;font-weight:bold;font-size:12px;background-color:#FFFFFF;">MDV Copyleft 2014</td>
            <tr>
        </table>
    </body>
</html>

Di seguito un'immagine di come si presenta la homepage del blog.
Homepage del Blog