vuoi
o PayPal
tutte le volte che vuoi
TESTO DEL COMPITO
Esercizio 1
Scrivere il codice HTML e CSS per ottenere la visualizzazione mostrata in Figura 1 (pagina
successiva) quando il documento è caricato in un browser. Se il documento viene stampato,
invece, si realizzi il layout descritto sotto.
Oltre alle caratteristiche tipografiche già evidenti in figura, si tenga presente che:
● Il layout occupa l'intero viewport in larghezza.
● C'è una barra di navigazione con diverse opzioni ("Acquista i prodotti", "Esplora gli
ambienti", ..., "Altro"). La voce selezionata (in questo caso, "Acquista i prodotti") ha una
linea blu sotto; le voci di menu hanno sfondo bianco e testo in nero; i sottomenu non
sono rilevanti. Ai fini dell’esercizio, NON è necessario aggiungere le icone accanto alle
voci “Acquista i prodotti” ed “Esplora gli ambienti”.
● La sezione principale contiene un'immagine grande del prodotto selezionato, una serie
di immagini più piccole a sinistra e una parte con informazioni aggiuntive (ad es., nome
del prodotto, prezzo, descrizione ecc.). La sezione principale occupa il 65% del viewport
in larghezza, la sezione a sinistra occupa il 15% del viewport in larghezza, mentre la
sezione a destra occupa il 25% del viewport in larghezza.
● La barra di navigazione occupa l’80% dello spazio in larghezza
● Al passaggio del mouse su un'immagine, il colore di sfondo diventa più scuro rispetto
agli altri.
● Cliccando su una delle immagini a lato, l’immagine grande al centro viene aggiornata di
conseguenza. Ai fini di questo esercizio, è possibile usare Javascript.
● A destra, ci sono informazioni sul prodotto, incluso il nome, il prezzo e una descrizione.
● Colori e dimensioni esatte di margini e padding non rilevanti, purché appropriate.
Se il documento viene stampato:
● Realizzare lo stesso layout precedente ma senza la barra di navigazione in alto
● La pagina ha sfondo di colore grigio chiaro (lightgray)
Vincoli:
● non è ammesso usare attributi @id e @class nel sorgente HTML;
● non è ammesso usare tabelle per organizzare il layout
Risorse:
Immagini disponibili su EOL.
Per gli studenti DSA non è richiesto includere la barra laterale a destra, con le
informazioni sul prodotto (ÖNNESTAD nell’immagine)
Figura 1 - Resa della pagina in un browser
jEdit − Esercizio1.html
1 <!DOCTYPE html>
2 <head>
3 <title>Esercizio 01</title>
4 <link rel="stylesheet" href="Esercizio1.css" type="text/css">
5 </head>
6 <body>
7 <nav>
8 <h4>Acquista i prodotti</h4>
9 <h4>Esplora gli ambienti</h4>
10 <h4>Offerte</h4>
11 <h4>Ispirazione</h4>
12 <h4>IKEA for business</h4>
13 <h4>Progettazione e servizi</h4>
14 <h4>Altro</h4>
15 </nav>
16 <div>
17 <aside>
18 <img onclick="changeImage(this.src)" src="Onnestad1.jpeg">
19 <img onclick="changeImage(this.src)" src="Onnestad2.jpeg">
20 <img onclick="changeImage(this.src)" src="Onnestad3.jpeg">
21 <img onclick="changeImage(this.src)" src="Onnestad4.jpeg">
22 <img onclick="changeImage(this.src)" src="Onnestad5.jpeg">
23 <img onclick="changeImage(this.src)" src="Onnestad6.jpeg">
24 </aside>
25 <article>
26 <img src="Onnestad1.jpeg">
27 </article>
28 <section>
29 <p>Novità</p>
30 <p>ONNESTAD</p>
31 <p>Poltrona, Radbyn bianco verde</p>
</p>
32 <p>99
33 <p>Lorem ipsum dolore sit amet, consectetur adipiscing elit, sed do eiusmod
tempor
34 idicictuiut labore et dolore magna aliqua.</p>
35 </section>
36 </div>
37
38 <script>
39 changeImage(newSrc)
function {
40 document.querySelector(’article img’).src newSrc;
=
41 }
42 </script>
43</body>
44</html> 24/06/24, 15:21 :: page 1
jEdit − Esercizio1.css
1 *{
2 font−family: Arial;
3 }
4
5 nav{
6 display: flex;
7 flex−direction: row;
8 justify−content: space−between;
9 border−bottom: 2px solid lightgrey;
10 width: 80%;
11}
12
13nav>h4:nth−child(1){
14 margin−bottom: 0;
15 border−bottom: 8px solid cornflowerblue;
16}
17
18body>div{
19 margin−top: 50px;
20 display: flex;
21 flex−direction: row;
22}
23
24aside{
25 display: flex;
26 flex−direction: column;
27 gap: 20px;
28 width: 15vw;
29 padding: 10px;
30}
31
32aside img{
33 height: 100%;
34 width: 100%;
35}
36
37article img{
38 height: 100%;
39 width: 100%;
40}
41
42article{
43 width: 65vw;
44 padding: 5px;
45}
46
47section{
48 margin−left: 40px;
49 width: 25vw;
50}
51
52section>p:nth−child(1){
53 color: orange;
54 font−size: 15px;
55 font−weight: bold;
56 margin−bottom: 4px;
57}
58
59section>p:nth−child(2){
60 font−size: 20px; 24/06/24, 15:21 :: page 1
jEdit − Esercizio1.css
61 font−weight: bold;
62 margin−bottom: 4px;
63 margin−top: 0px;
64
65}
66
67section>p:nth−child(3){
68 font−size: 18px;
69 color: grey;
70 margin−bottom: 4px;
71 margin−top: 0px;
72
73}
74
75section>p:nth−child(4){
76 font−size: 25px;
77 font−weight: bold;
78}
79
80section>p:nth−child(5){
81 font−size: 17px;
82 color: grey;
83}
84
85
86@media print {
87 nav{
88 visibility: hidden;
89 }
90
91 body{
92 background−color: lightgrey;
93 }
94}
95 24/06/24, 15:21 :: page 2
Esercizio 2
Scrivere il codice HTML e CSS per ottenere la visualizzazione mostrata in Figura 1 (per
semplicità non considerare le differenze tra dispositivi).
Oltre alle caratteristiche tipografiche già evidenti in figura, si tenga presente che:
l’area principale occupa l’intera larghezza del viewport ed è divisa in due parti che
○ occupano rispettivamente i 2/3 e 1/3 dello spazio in larghezza
cliccando sul titolo di una notizia di apre la pagina corrispondente; creare un link
○ arbitrario, NON è richiesto creare anche le pagine relative alle notizie
cliccando sulle aree a destra (Eventi, Pubblicazioni) si accede alle pagine
○ corrispondenti; le destinazioni dei link non sono rilevanti
la barra in alto con sfondo scuro è in posizione fissa anche dopo lo scrolling dei
○ contenuti
colori e dimensioni esatte di margini e padding non rilevanti, purchè appropriate
○
Vincoli:
non è ammesso usare attributi e nel sorgente HTML
○ @id @class
NON è ammesso usare tabelle per organizzare il layout
○ non è possibile usare Javascript (eventuali comportamenti dinamici vanno
○ nell'esercizio successivo).
Risorse:
Immagini disponibili su: http://diiorio.nws.cs.unibo.it/twe/resources/1002/
Figura 1 - Resa della pagina in un browser:
jEdit − Esercizio2.html
1 <!DOCTYPE html>
2<head>
3 <title>Esercizio 2</title>
4 <link href="Esercizio2.css" rel="stylesheet" type="text/css">
5</head>
6<body>
7 <header>
<img src="http://diiorio.nws.cs.unibo.it/twe/resources/1002/euflag.png">
8 <p>Un sito ufficiale dell’Unione Europea</p>
9
10 </header>
Il main e 11 <h1>Notizie, eventi e pubblicazioni</h1>
l’aside sono 12 <div>
contenuti inserisco il sito e il testo dentro il tag <a>
13 <main>
dentro un <div>
div 14 <p>COMUNICATO STAMPA | 8 Febbraio 2022</p>
15 <a href="www.sovranitàdigitale.com">Sovranita’ digitale: la Commissione
16 propone una legge per fare fronte alla carenza di semiconduttori
e rafforzare la leadership tecnologica Europea</a>
17 </div>
18 <div>
19 <p>COMUNICATO STAMPA | 4 Febbraio 2022</p>
20 <a href="www.sicurezzaalimentare.com">Sicurezza alimentare: riparte il
21 commercio UE−USA di mlluschi bivalvi</a>
</div>
22 <div>
23 <p>COMUNICATO STAMPA | 2 Febbraio 2022</p>
24 <a href="www.tassonomiaUE.com">Tassonomia dell’UE: la commissione presenta un
25 atto delegato complementare
sul clima per accelearare la decarbonizzazione</a>
26 </div>
27
28 </main>
29 <aside>
30 <div>
31 <h3><a href="www.eventi.com">Eventi</a></h3>
32 <p>Prossimi eventi organizzati dalla Commissione europea</p>
33 </div>
34 <div>
35 <h3><a href="www.pubblicazioni.com">Pubblicazioni</a></h3>
36 <p>Pubblicazioni dell’UE aaccessibili da EU Bookshop e altre fonti</p>
37 </div>
38 </aside>
39 </div>
40 <p><a href="www.tuttelenotizie.com">Tutte le notizie ></a></p>
41</body>
42</html> 22/05/24, 18:42 :: page 1
jEdit − Esercizio2.css
1*{
2 font−family: Arial;
3 }
4
5 Altezza in pixel
6 header{
7 background−color:gray;
8 color:white;
9 height: 30px;
10 Per mettere la bandiera di
11 display: flex;
12 align−items: center; fianco al testo e centrarla
13 verticalmente
14 position: sticky; Il blocco viene mantenuto
15 top: 5px; in alto quando di scrolla
16} la pagina ad un altezza di
17 5px
18img{
19 width: 40px; dimensione della
20 height: 20px; bandiera
21 padding: 0.5em;
22}
23 dispongo il main
24body>div{ e l’aside uno di
25 display: flex; fianco all’altro
26}
27
28aside{
29 margin: 2em;
30
31 display: flex;
32 flex−direction: column;
33 gap: 20px;
34}
35
36aside div{
37 background−color: aliceblue;
38 border: 1px solid gray;
39 padding: 10px;
40}
41
42h1{
43 border−bottom: 3px solid black;
44}
45
46main{
47 width: 66vw;
48 border−right: 1px solid grey
49}
50
51main>
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
