Logo Vallepiatta
 

CONFRONTO CON E SENZA CSS

Sono state messe in evidenza in rosso le particolari differenze tra i due codici HTML senza e con CSS.

CODICE HTML SENZA CSS CODICE HTML CON CSS
<html>

<head>

<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Esempio senza CSS</title>




</head>

<body background="images/fondonuovo.jpeg" topmargin="0" leftmargin="0">
<table border="0" width="100%">

<tr>

<td width="5%"><img border="0" src="images/studenti/HtmlFacile-2.gif" width="80" height="80" align="left"></td>

<td width="90%" valign="bottom"><h1 align="center"><font face="Courier New">PAGINA SENZA CSS</font></h1></td>

<td width="5%"><img border="0" src="images/studenti/HtmlFacile-2.gif" width="80" height="80" align="right"></td>

</tr>

</table>

<hr>

<p align="justify"><font face="Courier New" size="2">&nbsp;&nbsp;&nbsp;Questa
pagina č costruita senza usare i fogli di stile.</font></p>

<p align="justify"><font face="Courier New" size="2">&nbsp;&nbsp;&nbsp;Ricordo al lettore di confrontare il codice HTML di questa pagina con quello della seguente per poter valutare in pieno le notevoli differenze giā illustrate nella pagina che introduce ai fogli di stile; gli ricordo inoltre che per poter vedere il codice HTML č sufficiente fare clic su <b>Visualizza</b> e poi su <b>HTML</b>.</font></p>

<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>
<p align="justify">&nbsp;</p>


<hr>

<table border="0" width="100%">

<tr>

<td width="33%"><p align="left"><a href="index.htm"><font face="Courier New">HOME</font></a></p></td>

<td width="11%"><p align="left"><font face="Courier New"><a href="ST_html_stile_0.htm"><img border="0" src="images/studenti/arrow-le.gif" alt="Stile 0" width="22" height="22"></a></font></p></td>


<td width="12%"><p align="center"><font face="Courier New"><a href="ST_html_stile_1.htm"><img border="0" src="images/studenti/arrow-up.gif" alt="Inizio pagina" width="22" height="22"></a></font></td>

<td width="11%"><p align="right"><font face="Courier New"><a href="ST_html_stile_2.htm"><img border="0" src="images/studenti/arrow-ri.gif" alt="Stile 2" width="22" height="22"></a></font></td>

<td width="33%"><p align="right"></td>

</tr>

</table>

</body>

</html>
 		<html>


<head>

<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">

<title>Esempio con CSS</title>

<link rel="stylesheet" type="text/css" href="stilemio.css">

</head>

<body>


<table border="0" width="100%">

<tr>

<td class="td5"><img class="img left" src="images/studenti/HtmlFacile-2.gif" width="80" height="80"></td>

<td class="td90"><h1 class="h1 center">PAGINA CON CSS</h1></td>

<td class="td5"><img class="img right" src="images/studenti/HtmlFacile-2.gif" width="80" height="80"></td>

</tr>

</table>

<hr>

<p class="p1 justify">Questa pagina č costruita usando i fogli di stile.</p>


<p class="p1 justify">Ricordo al lettore di confrontare il codice HTML di questa pagina con quello della precedente per poter valutare in pieno le notevoli differenze giā illustrate nella pagina che introduce ai fogli di stile; gli ricordo inoltre che per poter vedere il codice HTML č sufficiente fare clic su <b>Visualizza</b> e poi su <b>HTML</b>.</p>



<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>
<p class="justify">&nbsp;</p>

<hr>

<table border="0" width="100%">

<tr>

<td class="td33"><p class="left"><a href="index.htm">HOME</a></p></td>


<td class="td11"><p class="left"><a href="ST_html_stile_1.htm"><img class="img" src="images/studenti/arrow-le.gif" alt="Stile 1" width="22" height="22"></a></p></td>

<td class="td12"><p class="center"><a href="ST_html_stile_2.htm"><img class="img" src="images/studenti/arrow-up.gif" alt="Stile 2" width="22" height="22"></a></p></td>

<td class="td11"><p class="right"><a href="ST_html_stile_3.htm"><img class="img" src="images/studenti/arrow-ri.gif" alt="Stile 3" width="22" height="22"></a></p></td>

<td class="td33"><p class="right"></p></td>

</tr>

</table>

</body>

</html>

Qui sotto invece viene riportato il codice CSS del foglio di stile usato.

CODICE DEL FOGLIO DI STILE stilemio.css
body {
font-family: "Courier New", Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: black;
background-color: transparent;
background-image: url("images/fondonuovo.jpeg");
margin-top: 0px;
margin-left: 0px;
}

.td5 {
width: 5%;
vertical-align: bottom;
}

.td11 {
width: 11%;
vertical-align: bottom;
}

.td12 {
width: 12%;
vertical-align: bottom;
}

.td33 {
width: 33%;
vertical-align: bottom;
}

.td90 {
width: 90%;
vertical-align: bottom;
}

.left {
text-align: left;
}

.right {
text-align: right;
}

.center {
text-align: center;
}

.justify {
text-align: justify;
}

.img {
border: none;
}

.p1 {
text-indent: 30px;
}