Mettiamo una sidebar

In questo terzo articolo relativo alle pagine html e la formattazione css mettiamo una sidebar laterale a sinistra dove sarà possibile inserire dei link.

In questo esercizio rimane la stessa struttura delle cartelle e dei file:
 

 

TerzoEsempio (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)

 

<!DOCTYPE html> 
<html lang="it-IT"> 
<head> 
     <meta charset="UTF-8">
     <title>Terzo esempio</title>
    <link href="css/mio_stile.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div>
            <header>
                <h1>Il mio sito principale</h1>
            <nav>
                <ul>
                <li><a href="indice.html">home Page</a></li>
                <li><a href="pagina2.html">Pagina 2</a></li>
                <li><a href="pagina3.html">Pagina 3</a></li>
                </ul>
            </nav>
            </header>
            <hgroup>
                <h1 id="primo">Questo è il nuovo sito della scuola</h1>
                <p>La scuola più bella del mondo</p>
            </hgroup>
            <aside>
                    <p>
                        <ul>
                            <li>
                                Notizie 
                            </li>
                            <li>
                                Curiosità 
                            </li>
                            <li>
                                Ultimo Articolo
                            </li>
                            <li>
                                Pagine più visitate
                            </li>
                        </ul>
                    </p>
            </aside>
            <h1>Home Page</h1>
            
            <section>
                <h1>Main heading</h1>
                    <h2>Notizie del giorno</h2>

                    <article>
                        <h2>Primo articolo</h2>
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus erat, euismod non mattis eu, eleifend gravida nulla. Nulla laoreet ullamcorper ligula id congue. </p>
                        <p>Etiam viverra, dolor eget mattis venenatis, metus tellus elementum neque, a laoreet sem mauris  </p>
                    </article>

                    <article>
                    <h2>Secondo Articolo</h2>
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus erat, euismod non mattis eu, eleifend gravida nulla. Nulla laoreet ullamcorper ligula  </p>
                    <p>Etiam viverra, dolor eget mattis venenatis, metus tellus elementum neque, a laoreet sem mauris a. </p>
                    </article>
                    <h2>Buone notizie</h2>
                    <article>
                    <h2>AstroRoboCup 2018</h2>
                    <p>
                    Gli studenti del Pinin hanno vinto il secondo premio nella gara di AstroRoboCup 2018
                    </p>
                    </article>
                <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>
            
                <figure>
                    <img src="img/irlanda-clima.jpg"
                    alt="Picture of the Irish south coast">
                    <figcaption>Looking out into climate of Ireland</figcaption>
                </figure>
            </section>
        </div>
        <footer class="myfooter">
            <div id="foot-content-1">
                <p>May 2018</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>
</body>
</html>

E per agire sulla formattazione occorre agire sul css, che va cambiato come segue:

header { 
    background: #faf; 
    color: #FFF;
    margin: 1px;
}
header nav
{ 
    border: 1px solid #000; 
    padding: 2px;
    background: #001205; 
}
header nav h1 {
    padding-left: 100px;
    font-size: 80px;
    color: #ffffff;
}
header nav ul li{
    list-style-type: none;
    margin: 15px;
    padding: 10px;
    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);  
}


aside {
    margin-right: 10px;
    margin-top: 100px;
    width: 12%;
    border: 2px dotted #000; 
    float: left;  
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    text-align: left;
}
aside ul li{
    list-style-type: none;
    margin: 10px;
    padding: 15px;
    display:block;
}
section
{ 
    border: 4px dashed #000; 
    float: right;
    width: 80%;
}
article {
    margin:5px;
    margin-bottom:15px;
    padding:8px;
    background-color:red;
    color: white;
    border: 2px dotted #000; 
}
.myfooter {
    background: aquamarine;
    font-size: 0.8em;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 2px;
    clear: both;
}
.myfooter #foot-content-1 {
    float: left;
    background: red;
    padding-right: 50px;
    padding-left: 50px;
}
.myfooter #foot-content-2 {
    float: left;
    background: yellow;
    padding-right: 50px;
    padding-left: 50px;
}
.myfooter #foot-content-2-1 {
    background: green;
    float: left;
    padding-right: 50px;
    padding-left: 50px;
}
.myfooter #foot-content-2-2 {
    background: #00eeff;
    float: right;
    padding-right: 50px;
    padding-left: 50px;
}

Esercizio 1:

Modificare i contenuti della sidebar mettendo dei link validi e cliccabili


Esercizio 2:

Aggiungere le icone "Social" nel footer a destra mettendo delle immagini per Twitter, Facebook, Instagram

come in http://www.tommasovitale.it/ oppure in http://www.consulenzavincente.it/

Tali immagini devono essere cliccabili al proprio profilo social e, nel caso della mail, devono richiamare il programma predefinito per spedire una email.