In questo quarto articolo relativo alle pagine html e la formattazione css vogliamo creare un sito web per la scuola, e il sito sarà composto da quattro o cinque pagine web, che avranno lo stesso layout.
Le pagine sono:
1) Home Page (deve contenere le notizie, gli articoli, tipo un corriere delle scuola).
2) Pagina dalla quale si puo' scaricare il PTOF (Piano Triennale dell'Offerta Formativa)
3) Pagina con la mappa di Google o di OpenStreetMap dove si trova la mia scuola
4) altre pagine simili
In questo esercizio rimane la stessa struttura delle cartelle e dei file:
QuartoEsempio (cartella) --> indice.html (file html) --> mappa.html (file html) --> ptof.html (file html) --> eccetera eccetera (altri file html... ) --> css (cartella) ------------> stile.css (file css) ---> img (cartella) ------------> logo.jpg (una immagine JPEG che rappresenti una P) ------------> le varie immagini che uso negli articoli, inclusa una foto della mia scuola.
Ecco la struttura base che dovrai replicare e modificare per le altre pagine
indice.html:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Il Corriere dell'ITIS Pininfarina</title>
<meta charset="utf-8">
<link href="css/stile.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>Oggi è martedì all'ITIS Pininfarina</h1>
</header>
<nav>
<ul>
<li>Offerta Formativa</li>
<li>Orario</li>
<li>PininBar</li>
</ul>
</nav>
<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>
<img src="../PrimoEsempio/img/irlanda-clima.jpg" alt="mio">
<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. Praesent malesuada elit eu mollis ultricies. Donec mollis nisl at magna tincidunt tincidunt. Suspendisse tempus malesuada turpis, ac molestie magna sollicitudin ac. Maecenas at massa at ipsum vehicula sagittis vitae vel erat. Praesent id est commodo, dignissim purus at, condimentum nibh. Praesent egestas tempor neque, nec convallis massa hendrerit quis. Maecenas sit amet mi dignissim lacus pretium dictum vitae consequat sem. Curabitur condimentum fermentum augue, eu feugiat mi lacinia et. Sed dictum dui ut vehicula congue.Ut id ornare lectus. In cursus fermentum felis, vestibulum faucibus nisi sodales ut. Quisque congue, orci ut rutrum iaculis, felis neque ultricies nulla, sed feugiat augue quam vitae ligula. Phasellus a enim sit amet neque vehicula placerat. Nam odio arcu, rutrum et lectus id, sollicitudin iaculis nibh. Nulla auctor, lectus sed vulputate vulputate, dolor orci scelerisque ante, in porta odio sapien a libero. Suspendisse suscipit fermentum mi quis mattis. Nunc purus ligula, bibendum sit amet tempor nec, vestibulum eu massa. Pellentesque eu nisl tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Etiam viverra, dolor eget mattis venenatis, metus tellus elementum neque, a laoreet sem mauris a sapien. Nulla metus tellus, fringilla sed lorem rhoncus, aliquet maximus metus. Vestibulum blandit eros sed maximus porta. Donec tincidunt eleifend est non cursus. In quis ante sed est consectetur accumsan non et orci. Donec mauris urna, dapibus a quam condimentum, malesuada efficitur dui. Cras ligula elit, sollicitudin et ullamcorper eu, pulvinar et eros. </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 id congue. Praesent malesuada elit eu mollis ultricies. Donec mollis nisl at magna tincidunt tincidunt. Suspendisse tempus malesuada turpis, ac molestie magna sollicitudin ac. Maecenas at massa at ipsum vehicula sagittis vitae vel erat. Praesent id est commodo, dignissim purus at, condimentum nibh. Praesent egestas tempor neque, nec convallis massa hendrerit quis. Maecenas sit amet mi dignissim lacus pretium dictum vitae consequat sem. Curabitur condimentum fermentum augue, eu feugiat mi lacinia et. Sed dictum dui ut vehicula congue.Ut id ornare lectus. In cursus fermentum felis, vestibulum faucibus nisi sodales ut. Quisque congue, orci ut rutrum iaculis, felis neque ultricies nulla, sed feugiat augue quam vitae ligula. Phasellus a enim sit amet neque vehicula placerat. Nam odio arcu, rutrum et lectus id, sollicitudin iaculis nibh. Nulla auctor, lectus sed vulputate vulputate, dolor orci scelerisque ante, in porta odio sapien a libero. Suspendisse suscipit fermentum mi quis mattis. Nunc purus ligula, bibendum sit amet tempor nec, vestibulum eu massa. Pellentesque eu nisl tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. </p>
<p>Etiam viverra, dolor eget mattis venenatis, metus tellus elementum neque, a laoreet sem mauris a sapien. Nulla metus tellus, fringilla sed lorem rhoncus, aliquet maximus metus. Vestibulum blandit eros sed maximus porta. Donec tincidunt eleifend est non cursus. In quis ante sed est consectetur accumsan non et orci. Donec mauris urna, dapibus a quam condimentum, malesuada efficitur dui. Cras ligula elit, sollicitudin et ullamcorper eu, pulvinar et eros. </p>
</article>
</section>
<section>
<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>
</section>
<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 Nome _ Cognome
</p>
</div>
<div id="foot-content-2-2">
<p>
qui piazzeremo le icone "social"
</p>
</div>
</div>
</footer>
</body>
</html>
E per agire sulla formattazione occorre agire sul css, che va cambiato come segue:
body {
font-family:Verdana,sans-serif;
font-size:0.8em;
}
header, footer, section, article {
border:1px solid rgba(74, 60, 181, 0.92);
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header, footer {
color:white;
background-color:rgba(64, 40, 151, 0.96);
margin-bottom:5px;
}
section {
background-color:#ddd;
color:rgba(64,40,130, 1);
}
section img {
float: left;
display: block;
width: 20%;
padding: 10px;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
Puoi prendere qualche regola nell'articolo precedente su questo sito:
https://www.e-guernica.net/it/sidebarhtmlcss
Esercizio 1:
Modificare i contenuti degli articoli e mettere nella barra di navigazione in alto 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.
Esercizio 3:
Aggiungere un logo (logo.png) al sito in alto a sinistra nella parte <header> e una Favicon nella parte head (è un immagine con formato .ico oppure .gif oppure .png)
Esercizio 4:
Aggiungere contenuti e completare graficamente il sito.