Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator
Esercizio 02
Un esempio che mostra altri tag HTML5 di utilità. In questo caso vediamo aside e section. Per il CSS, interessante l’ennesimo uso del float. Il testo è generato con https://it.lipsum.com
<!DOCTYPE html>
<html lang="it">
<head>
<title>MioSito.it</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div id="logo"> <img src="img/logo.png" alt="logo" ></div>
<div id="title">MioSito.it</div>
</header>
<aside>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="conatti.html">Contatti</a></li>
</ul>
</aside>
<main>
<h1>Pagina Ufficiale di Tizio Incognito</h1>
<h2>Studente, sportivo, appasionato di Fortnite</h2>
<section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien fermentum, eleifend turpis non, semper velit.
Nunc aliquam ante sit amet felis pulvinar, vitae congue massa dignissim. Vestibulum at erat interdum, dapibus erat tempor, malesuada ante.
Praesent maximus volutpat elementum. Integer porttitor risus at odio interdum ornare sit amet nec ipsum. Mauris eget maximus mauris, vitae mattis erat.
Praesent in libero turpis. Donec dignissim pellentesque tortor vitae varius.
Nullam accumsan, urna quis eleifend dictum, massa tellus molestie mauris, volutpat facilisis urna nunc at lectus.
Curabitur scelerisque id eros sit amet egestas. In eleifend tempus magna id feugiat.</section>
<br>
<section>Nullam laoreet rutrum nulla nec gravida. Sed vitae nisl ligula. Proin ut eros sed elit lobortis rutrum.
Nam finibus orci velit, non finibus tortor auctor a. Fusce vehicula pretium purus, congue tincidunt nisi malesuada id.
Nullam odio risus, efficitur at sodales at, tempor sit amet tellus. Pellentesque aliquam orci ac nibh vulputate rutrum.
Vestibulum eros eros, tempus eget porta hendrerit, ullamcorper quis eros. In hac habitasse platea dictumst.
Mauris eget risus ac lacus eleifend aliquam. Sed elit ex, sollicitudin ut turpis a, interdum gravida nisi.
Donec id felis non augue mattis mollis. Suspendisse accumsan pretium metus a accumsan. Etiam pretium vestibulum mauris, a varius mi suscipit a.
Donec nisi turpis, pretium nec vestibulum nec, molestie non purus. Aenean rhoncus orci consequat tortor venenatis pretium</section>
</main>
<footer>
<p>Realizzato da Tizio Incognito</p>
</footer>
</body>
</html>Il foglio di stile:
header{
background-color: orange;
width: 100%;
text-align: left;
padding: 20px 0 20px 20px;
height: 13em;
}
#logo{
float:left;
display:block;
}
#title{
float:left;
display:block;
padding: 50px 0 0 50px;
font-size: 3em;
}
aside{
background-color: lightslategray;
width: 15%;
float: left;
display: block;
height: 30em;
}
main{
margin: 10px 0 0 10px;
float: left;
display: block;
height: 30em;
width: 80%;
}
footer{
clear: both;
text-align: center;
font-weight: bold;
background-color: grey;
height: 4em;
padding: 1em 0 0 0;
}
Ultima modifica 21 Febbraio 2022