Da WIKI CoderDojo Firenze.

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.
Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione
Estratto da "https://kata.coderdojo.it/wiki/index.php?title=Il_mio_Blog_HTML&oldid=77"