Progettazione web: esercitazione 04

D’ora in avanti, ogni volta che vi si chiederà di creare un file .html, dovrete sempre scrivere la struttura fondamentale di un file HTML in esso. Ricorda che, in VS Code, puoi ottenere una buona bozza di quella struttura fondamentale con: “!” + Tab

  1. Crea una nuova cartella, chiamata “es04” e aprila all’interno di VS Code
  2. Nella cartella es04, in VS Code, crea il file hello-css.html
  3. Nella cartella es04, in VS Code, crea il file dummy.html
  4. Nella cartella es04, in VS Code, crea il file styles.css
  5. Collega i due file .html al foglio di stile styles.css
  6. Riempi i tre file sopra indicati in modo tale da ottenere questo risultato:

hello-css.html:

Esercitazione 04a

dummy.html:

Esercitazione 04b

Informazioni utili

  1. il link “another page” in hello-css.html deve portare alla pagina dummy.html
  2. il link “Go back” in dummy.html deve portre alla pagina hello-css.html
  3. il link “obsolete link” in dummy.html deve portare a un file .html che non esiste nella cartella di lavoro.
  4. i font utilizzati per le due pagine HTML sono, in ordine: “Helvetica”, “Arial”, sans-serif
  5. Il testo, nel body, deve essere, in maniera predefinita, di 18px
  6. La dimensione dei titoli h1 è doppia rispetto a quella del testo normale
  7. La dimensione dei titoli h2 è 1.6 volte quella del testo normale
  8. Lo sfondo grigio chiaro è il colore #EEEE
  9. Il colore del testo grigio scuro è il colore #414141

Extra

Collega dummy.html a un altro foglio di stile, mantenendo il collegamento a styles.css. In questo nuovo foglio di stile, aggiungi una sola regola, la quale mette un background verde (lightgreen) alla pagina dummy.html. Essa risulterà infine così:

Esercitazione 04c

Bello, vero?