Salta al contenuto principale

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>
                            &copy; 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;
}
*/