(il mio Blog html) |
(il mio Blog html) |
||
Riga 13: | Riga 13: | ||
Il codice seguente è composto dalle sezioni di base della pagina html:<br/><head>: contiene il titolo (tag <title>) della pagina e le impostazioni di stile comuni (tag <style>)<br/><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). | Il codice seguente è composto dalle sezioni di base della pagina html:<br/><head>: contiene il titolo (tag <title>) della pagina e le impostazioni di stile comuni (tag <style>)<br/><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). | ||
− | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/> <head><br/> <title>Il mio Blog</title><br/> <style><br/> body{<br/> font-family:Arial, Helvetica;<br/> background-image:url('personcina.png');<br/> }<br/> .cellamenu{<br/> background-color:#D4E6CA;<br/> height:50px;<br/> width:25%;<br/> text-align:center;<br/> cursor:pointer;<br/> }<br/> .cellamenuselezionata{<br/> background-color:#99FF66;<br/> height:50px;<br/> width:25%;<br/> text-align:center;<br/> cursor:pointer;<br/> }<br/> </style><br/> </head><br/> <body onload="SelezionaPagina(document.getElementById('home'));"><br/> <table id="menu" align="center" style="border:0;width:800px;"><br/> </tr><br/> <td id="home" class="cellamenuselezionata">Home</td><br/> <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td><br/> <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td><br/> <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa | + | <div style="background:#eee;border:1px solid #ccc;padding:5px 10px;"><span style="font-family:courier new,courier,monospace;"><html><br/> <head><br/> <title>Il mio Blog</title><br/> <style><br/> body{<br/> font-family:Arial, Helvetica;<br/> background-image:url('personcina.png');<br/> }<br/> .cellamenu{<br/> background-color:#D4E6CA;<br/> height:50px;<br/> width:25%;<br/> text-align:center;<br/> cursor:pointer;<br/> }<br/> .cellamenuselezionata{<br/> background-color:#99FF66;<br/> height:50px;<br/> width:25%;<br/> text-align:center;<br/> cursor:pointer;<br/> }<br/> </style><br/> </head><br/> <body onload="SelezionaPagina(document.getElementById('home'));"><br/> <table id="menu" align="center" style="border:0;width:800px;"><br/> </tr><br/> <td id="home" class="cellamenuselezionata">Home</td><br/> <td id="chisono" class="cellamenu" ><a href="chisono.html">Chi Sono</a></td><br/> <td id="cosapiace" class="cellamenu"><a href="cosamipiace.html">Cosa mi piace</a></td><br/> <td id="cosafaro" class="cellamenu" ><a href="cosafaro.html">Cosa farò da grande</a></td><br/> <tr><br/> </table><br/> <table id="corpo" align="center" style="border:1px solid #000000;width:800px;background-color:#D4E6CA;height:600px;"><br/> <tr id="corpohome"><br/> <td><br/> <div style="background-image:url('nuvola2.png');background-repeat:no-repeat;height:184px;margin-left:200px;<br/> margin-top:10px;width:300px;text-align:center;"><br/> <span style="position:relative;left:10px;top:80px;">Questa è la home page del blog di margherita</span><br/> </div><br/> </td><br/> </tr><br/> </table><br/> <table id="piedipagina" align="center" style="border:0;width:800px;"><br/> </tr><br/> <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><br/> <tr><br/> </table><br/> </body><br/></html></span><br/></div> |
+ | <br/>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 | |
− | + |
Versione delle 18:58, 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).
<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>
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