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 |
1
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
Posta un commento