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>
© 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.