Esercizio su HTML

In questo esercizio faremo pratica con formattazioni, elenchi e tabelle. Il risultato finale dell’esercizio dovrebbe essere quello mostrato di seguito (fare clic sull’immagine per ingrandirla):

Attenzione! L’esercizio non comporta alcuna valutazione per l’esame.

Istruzioni

  1. Con un editor di testo (ad esempio, gedit oppure notepad), creare un nuovo file.
  2. Marcare opportunamente il documento in modo da abilitare i caratteri accentati.
  3. Aggiungere un titolo di primo livello con il seguente testo: Un pasto prelibato

    • Sottolineare il testo.
    • Allineare al centro il testo.
  4. Aggiungere un titolo di secondo livello con il seguente testo: Portate
  5. Aggiungere un elenco puntato come mostrato nella soluzione con il testo riportato di seguito:
    Filetti Di Trota Con Salsa Worcester
    Sardine Al Cartoccio Su Spinaci Novelli
    Fonduta Ai 4 Formaggi Con Verdure
  6. Aggiungere un titolo di secondo livello con il seguente testo: Informazioni
  7. Aggiungere un elenco puntato come mostrato nella soluzione con il testo riportato di seguito (carattere Arial):
    Filetti Di Trota Con Salsa Worcester
    Tempo di cottura: 25 minuti
    Valore energetico: Kcal 170 a porzione
    Dose: per 6 persone
    Sardine Al Cartoccio Su Spinaci Novelli
    Tempo di cottura: 15 minuti
    Valore energetico: Kcal 254 a porzione
    Dose: per 1 persona
    Fonduta Ai 4 Formaggi Con Verdure
    Tempo di cottura: 40 minuti
    Valore energetico: Kcal 633 a porzione
    Dose: per 6 persone

    • Colorare in giallo i tempi di cottura.
    • Colorare in verde il testo dei paragrafi relativi alle dosi.
  8. Aggiungere un paragrafo con il seguente testo: Tabella 1. Filetti Di Trota Con Salsa Worcester

    • “Tabella 1.” in grassetto, “Filetti Di Trota Con Salsa Worcester” in corsivo.
    • Allineamento a sinistra.
  9. Aggiungere una tabella con 3 righe e 2 colonne come mostrato nella soluzione. La colonna di sinistra è di intestazione ed è allineata a destra. La tabella deve essere allineata a sinistra e avere un bordo di dimensione 1.
  10. Aggiungere due paragrafi+tabelle simili per le altre portate (come mostrato nella soluzione). Il secondo paragrafo+tabella è allineato al centro. Il terzo paragrafo+tabella è allineato a destra.
  11. Aggiungere un titolo di secondo livello con il seguente testo: Informazioni complessive

    • Allineamento al centro.
  12. Disporre il seguente testo in una tabella senza bordo e allineata al centro (come mostrato nella soluzione):
    Tempo di cottura Valore energetico Dose
    Filetti Di Trota Con Salsa Worcester 25 minuti Kcal 170 a porzione per 6 persone
    Sardine Al Cartoccio Su Spinaci Novelli 15 minuti Kcal 254 a porzione per 1 persona
    Fonduta Ai 4 Formaggi Con Verdure 40 minuti Kcal 633 a porzione per 6 persone

    • La prima riga è di intestazione.
    • Il testo nella prima colonna è in corsivo.
    • La prima e la seconda colonna sono allineate a sinistra.
    • La terza colonna è allineata al centro.
    • La quarta colonna è allineata a destra.
  13. Salvare il documento in una nuova cartella sulla scrivania, assicurandosi che l’estensione sia html.
  14. Aprire il file con il browser e catturare la finestra con GIMP. Salvare l’immagine nella cartella.
  15. Comprimere la cartella in un archivio ZIP.
  16. Inviare l’archivio ZIP a un collega e chiedere di valutare l’elaborato. Ricambiate il favore e valutate l’elaborato del collega.