3I Sia: Verifica pre compito su Htm5 e Css3 + test

 Esercizio di preparazione alla verifica su HTML5 + CSS3 



Operazioni preliminari

1. Creare la cartella di lavoro preparazione-verifica.

2. Creare una sottocartella img e inserirvi le immagini fornite dal docente. 3. Creare una sottocartella css in cui sarà memorizzato il foglio di stile CSS esterno.

4. Creare nella cartella di lavoro la pagina index.html contenente la seguente struttura HTML5:

div id ="wrapper"

header

div id="container"

nav main

footer

Inserire nella struttura il contenuto riportato nella pagina seguente. 

5. Scrivere il foglio di stile CSS esterno stili.css contenente le regole per i seguenti elementi: 

Elemento 

Proprietà CSS

Body della pagina

Famiglie di font: "Century Gothic", Arial, sans-serif; Dimensione del font 10pt 

Colore di sfondo: #5D5D5D 

Altezza minima: 100vh; 

Padding e margini uguali a zero;

Blocco div avente  

id="wrapper"

Larghezza: 75% 

Larghezza minima: 700px 

Larghezza massima: 1100px



Elemento 

Proprietà CSS


Altezza minima: 100vh 

Padding uniforme pari a zero 0 

Margine inf. e sup: 0; dx e sx: auto 

Visualizzazione del contenuto (display): flex 

Direzione flex: colonna

header

Colore di primo piano: #EDEBEA 

Immagine di sfondo: ../img/bg1.png 

Ripetizione dello sfondo su entrambi gli assi 

Altezza: 95px 

Padding sup. e inf.:10px; sx e dx: 20px 

Margini: sup: 10px; tutti gli altri: 0 

flex: 0 0

Immagine presente  

nell'elemento header 

(../img/logo-castello.png)

Fluttuante a destra 

Altezza: 88px; 

Padding uniforme pari a 0; 

Margini sup. e inf: 0; sx e dx: 15px;

Blocco div avente  

id="container"

Colore di sfondo: #E5E8CA 

Padding e margini uniformi, pari a 0 

flex: 1 1 

Visualizzazione del contenuto (display): flex 

Direzione flex: riga 

Allineamento dei sottoelementi: stretch

nav

Immagine di sfondo: ../img/bg2.png 

Ripetizione dello sfondo su entrambi gli assi 

Dimensione del font: 11pt; 

Padding uniforme pari a 10px 

Margini uniformi, pari a 0 

flex: 1 1

Elementi li all'interno di  nav

Margine inferiore: 1.4em

Collegamenti ipertestuali  all'interno di nav

Decorazione del testo: none 

Colore di primo piano: #5A5A5A

main

Colore di sfondo: bianco 

Dimensione del font: 10pt 

Padding: 15px 25px 15px 25px 

flex: 5 5

Titoli all'interno del main

h1 🡪 Dimensione del font 20pt 

h2 🡪 Dimensione del font 14pt 

h3 🡪 Dimensione del font 11pt e colore di p. piano grigio



2

Elemento 

Proprietà CSS

figure

Fluttuante a destra 

Allineamento del testo al centro 

Bordo: solido nero 1px 

Padding uniforme di 5px; 

Margini sup. e dx.: 0; inf. e sx: 20px 

Non deve essere vicina ad altri elementi  

fluttanti a destra (clear: right)

figcaption

Dimensione del font: smaller 

Stile del font: italic 

Margine superiore: 5px

table, td, th 

Bordo: solido nero 1px 

Usare la proprietà: border-collapse: collapse;

footer

Colore di primo piano: #565656 

Colore di sfondo: #B1BDB6 

Allineamento del testo centrato 

Dimensione del font: 9pt; 

Margini: inferiore 10px; tutti gli altri: 0 

Padding: sup. e inf. 10px; sx e dx: 0 

flex: 0 0

Paragrafi contenuti in  footer

Margini sup. e inf.: 5px; sx e dx: 0



6. All'interno del menù di navigazione, i link puntano alle seguenti pagine: Home 🡪 index.html 

Il parco 🡪 parco.html (questa pagina non deve essere creata) 

7. Collegare il foglio esterno alla pagina web mediante l'elemento: 

<link href="css/stili.css" rel="stylesheet" type="text/css" media="screen" />



Test su Html e Css:
https://www.w3schools.com/quiztest/default.asp

Tutorial Html5: https://www.w3schools.com/html/default.asp
Tutorial Css3: https://www.w3schools.com/css/default.asp

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)