L'esempio precedente non contiene una valida formattazione della pagina e del menu.
E' posssibile provare e migliorarlo.
Si ricorda di agire sul file con estensione
.html
solo per il contenuto e la sua gerarchia.
Tutta la formattazione grafica e il layout è demandato al file con estensione
.css
In questo esercizio dovete creare una struttura delle cartelle e dei file come segue:
SecondoEsempio (cartella) --> indice.html (file html) --> css (cartella) ------------> mio_stile.css (file css) ---> img (cartella) ------------> irlanda-clima.jpg (una immagine JPEG che descriva il clima irlandese)
E' possibile riscrivere il file indice.html in maniera maggiormente leggibile indentando il codice
<!DOCTYPE html>
<html lang="it-IT">
<head>
<meta charset="UTF-8">
<title>Secondo esempio</title>
<link href="css/mio_stile.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>
<header>
<nav>
<h1>Menu principale</h1>
<ul>
<li><a href="http://www.e-guernica.net/it/paginaweb01">Prima pagina web</a></li>
<li><a href="http://www.e-guernica.net/it/esperimentiArduino">Esperimenti su Arduino</a></li>
<li><a href="http://www.e-guernica.net/it/wiki_scuola/SistemiDiNumerazione">Sistemi di numerazione</a></li>
</ul>
</nav>
</header>
<hgroup>
<h1 id="primo">test</h1>
<p>mio gruppo</p>
</hgroup>
<div>
<h1>Sezione della pagina</h1>
<section>
<h1>Main heading</h1>
<p>Some text</p>
<h2>Un titolo di livello 2</h2>
<p>Some more text</p>
<h3>Un titolo di livello 3</h3>
<p>A bit more text</p>
<h2>Un titolo di livello 2</h2>
<p>The last bit of text</p>
</section>
<figure>
<img src="img/irlanda-clima.jpg"
alt="Picture of the Irish south coast">
<figcaption>Looking out into climate of Ireland</figcaption>
</figure>
<footer class="myfooter">
<div id="foot-content-1">
<p>January 2016</p>
</div>
<div id="foot-content-2">
<div id="foot-content-2-1">
<p>
© Copyright by Fausto
</p>
</div>
<div id="foot-content-2-2">
<p>
qui piazzeremo le icone "social"
</p>
</div>
</div>
</footer>
</div>
</div>
</body>
</html>
E per agire sulla formattazione occorre agire sul css
header {
background: #faf;
color: #FFF;
padding: 20px;
margin: 10px;
}
header nav
{
border: 4px solid #000;
padding: 20px;
}
header nav h1 {
padding-left: 20px;
font-size: 40px;
color: cadetblue;
}
header nav ul li{
list-style-type: none;
margin: 10px;
padding: 15px;
display:inline;
}
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857;
color: #333;
}
a:visited, a:hover {
background-color: rgb(221, 143, 143);
padding: inherit;
color: rgb(196, 23, 23);
};
hgroup h1.primo {
padding-left: 20px;
font-size: 50px;
color: rgb(74, 20, 222);
}
section
{ border: 4px dashed #000; }
article
{ border: 2px dotted #000; }
section, article
{padding: 4px; margin: 4px; display:block;}
.myfooter {
background-color: aquamarine;
font-size: 0.8em;
padding-top: 0;
padding-bottom: 58px;
}
.myfooter #foot-content-1 {
float:left;
width:220px;
padding:10px;
background:#bfb;
}
.myfooter #foot-content-2-1 {
float:left;
width:460px;
padding:10px;
background:#ddf;
}
.myfooter #foot-content-2-2 {
float:right;
padding-left:300px;
padding-right: 100px;
padding-top: 10px;
padding-bottom: 10px;
background:#dff;
}
/* THIS PART IS NOT YET USED
input:valid {
outline: 5px solid green;
}
input:invalid {
outline: 5px dashed red;
}
*/