Da WIKI CoderDojo Firenze.
(il mio Blog html)
 
(il mio Blog html)
Riga 13: Riga 13:
  
 
Il codice seguente è composto dalle sezioni di base della pagina html:<br/>&lt;head&gt;: contiene il titolo (tag &lt;title&gt;) della pagina e le impostazioni di stile comuni (tag &lt;style&gt;)<br/>&lt;body&gt;: 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).
 
Il codice seguente è composto dalle sezioni di base della pagina html:<br/>&lt;head&gt;: contiene il titolo (tag &lt;title&gt;) della pagina e le impostazioni di stile comuni (tag &lt;style&gt;)<br/>&lt;body&gt;: 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).
 +
<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="cellamenuselezionata"&gt;Home&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="cellamenu" &gt;&lt;a href="cosafaro.html"&gt;Cosa far&ograve; da grande&lt;/a&gt;&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="corpohome"&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;<div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;margin-left:200px;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;margin-top:10px;width:300px;text-align:center;"><br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;span style="position:relative;left:10px;top:80px;"&gt;Questa &egrave; la home page del blog di margherita&lt;/span&gt;<br/>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&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;&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;<br/></span></div>
 +
 +
 +
asas

Versione delle 17:56, 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.

passo1: 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).

<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>


asas