Template and information based on data provided by DERI 1 Corso di HTML Anno scolastico Classi IVBinf, IVAinf I.T. I.S Torricelli Milano SuperVisor Ing. Aristide Calcagno

Template and information based on data provided by DERI 2 Contenuti Lez.1 (Intro. All’HTML) 1. Breve inrodizione ai documenti ipermediali 2. Cosa é L’Html 3. Istruzioni o elementi HTML 4. Cosa Occore per visualizzare documenti HTML 5. Cosa occorre per scrivere documenti HTML 6. Elementi di Base di un documento HTML 7. Attributi Generici 8. I Commenti 9. Contenuto,Struttura e Presentazione di un Documento 10. Introduzione al CSS 11. Cominciamo ad utilizzare il CSS 12. Fogli di stile in linea con esempi 13. Fogli di stile incorporati 14. Identificazione e classi di elementi 15. Fogli di stile esterni

Template and information based on data provided by DERI 3 1) Breve introduzione ai documenti ipermediali  In un qualunque documento ipermediale si può facilmente individuare il contenuto ossia le parti di testo, immagini, musica che contribuiscono a trasmettere informazioni all’utente che lo sta leggendo.  Il contenuto resta comunque solo una parte del documento  In un documento ipermediale si distinguono oltre al contenuto altri due elementi: - Struttura : si intende l’organizzazione logica del documento,ovvero la sua suddivisione in capitoli,paragrafi,sottoparagrafi ecc..ed il modo in cui questi sono organizzati gerarchicamente. - Presentazione : si intende invece come il contenuto di un certo documento (organizzato secondo una certa struttura ) viene visualizzato dal punto di vista grafico. Per esempio è chiaro che il titolo di un capitolo deve essere piu in grassetto rispetto al titolo di un paragrafo.

Template and information based on data provided by DERI 4 1) Breve introduzione ai documenti ipermediali -- Riassumendo – In un documento ipermediale possiamo pensare di individuare Contenuto Struttura Presentazione

Template and information based on data provided by DERI 5 2) Che cosa è L’HTML Abbiamo introdotto I documenti Ipermediali, resta comunque il fatto che essi sono nati per permettere una navigazione a tutti gli utenti del WEB. Affinche ciò accada è necessario che tali documenti siano scritti in un LINGUAGGIO che sia Universalmente riconosciuto da tutte I PC (di diversa Architettura..SOLARIS, INTEL, SPARC) tale Linguaggio è L’HTML ( Hyper-Test-Markup-Language). Anche un documento HTML è formato da : Contenuto : quello che si intende visualizzare Struttura : che è rappresentata dalle istruzioni che vengono date per: Gestire collegamenti con altri documenti Includere oggetti multimediali Includere programmi (Script) da eseguire all’interno del documento Istruzioni : per dare una presentazione grafica (estetica) al contenuto

Template and information based on data provided by DERI 6 3) Istruzioni o elementi HTML Le Istruzioni in HTML sono rappresentati dai TAG (Contrassegno ) da cui deriva la parola Markup di HTML e sono dei caratteri ( o parole ) racchiuse tra I simboli : “ “ un esempio di tag ha il seguente Prototype: …………. ………….. La parte di documento racchiusa tra la coppia di istruzioni delimita la parte di documento su cui l’istruzione ha effetto.

Template and information based on data provided by DERI 7 3) Istruzioni o elementi HTML Altro Esempio: Titolo del Documento Istruzione di Struttura Contenuto N.B. in realtà i tag dell’’ HTML non sono delle vere istruzioni inquanto esse servono solo a definire un documento, pertanto al fine di evitare confusioni parleremo di tag che racchiudono un elemento (del nostro documento)

Template and information based on data provided by DERI 8 4) Cosa occorre per visualizzare documenti HTML Tutti I Browser di rete attualmente disponibili sono in grado di visualizzare un documento HTML. I tipi di Browser di rete più famosi sono : Microsoft Internet Esplorer 5.0 (o Superiore) Netscape Comunicator 2.0 ( o superiore) N.B. dunque i browser possono essere visti come interpreti delle istruzioni HTML o meglio come visualizzatori degli elementi HTML

Template and information based on data provided by DERI 9 5) Cosa occorre per scrivere documenti HTML Le pagine WEB scritte in HTML sono dei semplici file di testo, e di conseguenza sono visibili e modificabili con un qualunque programma di Word Processig. Ad esempio l’applicativo word (della suite Microsoft Office) permette di potere creare documenti che possono essere convertiti in modo automatico in pagine HTML. I file codificati in HTML si distinguono dagli altri tipi di file per l’estenzione “.html “ oppure “.htm “ dunque riassumendo possiamo dire che le pagine HTML non sono altro che dei file Ascii alle quali sono state aggiunte delle istruzioni (HTML) per definirne la struttura e la loro presentazione.

Template and information based on data provided by DERI 10 6) Architettura Client/Server del WEB All’interno di una qualunque rete Telematica LAN, MAN,WAN vi è la possibilità di realizzare programmi modulari, ovvero programmi le cui componenti possono non risiedere necessariamente su una macchina ma sono residenti in diverse macchine costituenti la rete stessa. Questo tipo di applicazioni (distribuite) utilizzano un meccanismo di comunicazione detto: CLIENT/SERVER all’interno di una rete pertanto occorre individuare il/I client(s) ed il/I server(s), Il server è una macchina che deve offrire dei servizi (dati, file,video,stampanti,scanner) ai client, mentre I client sono macchine che devono ottenere le risposte dal server per far fronte alle proprie esigenze. È utile osservare il fatto che in una rete di computer il ruolo dei client e dei server non è ASSOLUTO,cioè posso avere un PC che si comporta come CLIENT verso un PC2 e a sua volta PC si comporta da server per un PC3 PC server per PC2 PC2 request response PC3 Client per PC2 request

Template and information based on data provided by DERI 11 7) Elementi di base di un documento HTML Vedremo ora quali sono gli elementi di base (o Istruzioni di base ) indispensabili per la visualizzazione del nostro documento HTML in un qualsivoglia Browser rete. Il documento minimo (o la pagina HTML più semplice) è quello che contiene un solo elemento : l’elemento HTML. ………………. N.B. è l’elemento contenitore ovvero al suo interno può contenere altri elementi (Tag). All’interno dell’elemento HTML è possibile inserire 2 elementi di base fondamentali : BODY, HEAD …………… Contenuto dell’ elemento HEAD Contenuto dell’ elemento BODY

Template and information based on data provided by DERI 12 7 bis) Elementi di base di un documento HTML N.B. L’elemento contiene il corpo del nostro documento cioè informazioni testuali,immagini, suoni ecc.. Visualizzabili attraverso il Brwser mentre l’elemento (Intestazione ) contiene informazioni dichiarative o di impostazione globale del documento

Template and information based on data provided by DERI 13 7 bis.1) ESEMPIO 1 Suppponiamo di avere scritto il seguente codice HTML Parlare di Giuseppe Garibaldi Garibaldi fu un valoroso condottiero egli fu ferito in una gamba garibaldi che comanda che comanda il battaglion N.B. L’elemento TITLE è contenuto nell’ elemento HEAD oiche essa è una informazione di tipo dichiarativo. Il Browser iconosce il Tag e visualizza il suo contenuto all’interno della barra del titolo della finestra del browser. Continua…

Template and information based on data provided by DERI 14 7 bis.1) ESEMPIO 1 N.B. il Tag crea un nuovo paragrafo cioè fasi che il testo “ Garibaldi……….” inizi da una certa riga non ve elaborazioninga diviso delimitando dunque una unita logica per orazioni Succesive elaborazioni. OSS: I tag nella costruzione dei documenti possono anche essere omessi noi comunque li abbiamo specificati per completezza didattica. Continua…

Template and information based on data provided by DERI 15 8) I Commenti in HTML in HTML come per qualunque altro linguaggio di programmazione rappresentano un aspetto molto importante perché aiutano a migliorare la leggibilità. Tuttavia eistono delle regole che ci dicono quali istruzioni vanno commentate noi trascureremo questo aspetto ed useremo i commenti di HTML “ per Buon Senso “ cioè commenteremo quelle istruzioni HTML (Tag) che per noi sono significative alla comprensione del testo. I commenti in HTML sono racchiusi tra i Tag e tutti i caratteri compresi tra questi Tag vengono ignorati dal Browser. Esepio Di Commento : ………………. OSS. Poiché non tutti i Browser sono in grado di interpretare tutti i tag HTML (a causa delle continue versioni e dialetti dell HTML ) un Browser che incontra un Tag sconosciuto si limita ad ignorarlo.

Template and information based on data provided by DERI 16 9) Contenuto, Struttura e presentazione di un documento Abbiamo introdotto gli elementi di base per scrivere l nostro primo documento HTML. Diamo ora una definizione più formale di documento HTML e dei suoi elementi costitutivi introducendo la Presentazione di un documento. L’HTML è un linguaggio per la descrizione della struttura di un documento,composto da degli elementi. In particolare possiamo considerare un documento HTML come un contenitore di elementi dove un elemento può essere: un elemento semplice un contenitore di elementi un link Un oggetto multimediale Ogni elemento è caratterizzato da un eventuale insieme di proprietà ( attributi ) e da un eventuale contenuto. Possiamo dunque riassumere schematicamente la struttura di un elemento HTML nel seguente modo : Ad Es. BR Ad Es. TABLE Ad Es. HREF Ad Es. OBJECT Continua…

Template and information based on data provided by DERI 17 9 bis) Contenuto, Struttura e presentazione di un documento Nome Proprietà1=“valoreProprietà1” NomeProprietà2=“valoreProprietà2” ………………………………………. NomeProprietàN=“valoreProprietàN” CONTENUTO Tag Apertura Elemento Opzionale Tag di Chiusura Elemento se Previsto Elemento Documento HTML N.B. come si evince dalla figura le proprietà ed il contenuto di un elemento( Tag ) sono opzionali. Il tag di chiusura di alcuni elementi è obligatorio, per altri è opzionale, per altri ancora è proibito.

Template and information based on data provided by DERI 18 10) Introduzione al CSS Abbiamo introdotto gli elementi di base per scrivere la struttura del nostro primo documento HTML. Per la presentazione degli elementi,ovvero per dar loro una una veste grafica (puramente estetica) si utilizza un altro linguaggio in parallelo all’ HTML che prende il nome di CSS ( Cascading-Style-Sheets). Il CSS è un linguaggio di tipo dichiarativo che serve per definire lo stile di presentazione di un documento HTML o di alcuni suoi elementi.tale linguaggio è stato affiancato all’HTML per permettere all’utente di creare documenti ipermediali con la stessa bellezza grafica che si può ottenere con i word processor più evoluti. Continua…

Template and information based on data provided by DERI 19 11) Cominciamo a utilizzare il CSS Vediamo ora come implementare la presentazione di un documento utilizzando espliciti comandi CSS. Premettiamo che la presentazione degli elementi viene genericamente chiamata stile e viene implementata da una delle più importanti proprietà degli elementi : la proprietà STYLE. Oss: in quale parte del documento HTML è possibile inserire “lo stile” ovvero i comandi CSS? I comandi CSS possono essere inseriti: All’interno di elementi del documento tra i tag del BODY. Si parla in tal caso di fogli di stile in linea o inline style All’interno del documento tra i tag el e. Si parla in tal caso di fogli di stile incorporati o internal style sheet All’esterno del documento, in un file separato. Si parla in tal caso di fogli di stile esterni o external style sheet

Template and information based on data provided by DERI 20 12) Fogli di stile in linea Riprendiamo l’Esempio 1 e cominciamo a dare una prima veste grafica applicando al paragrafo “ Garibaldi…….” un nuovo formato ed un colore. Parlare di Giuseppe Garibaldi Garibaldi fu ferito fu ferito in una gamba garibaldi che comanda che comanda il battaglion Una volta visualizzato all’interno del Browser questo listato apparirà come illustrato qui a lato la proprietà STYLE colorerà il testo el paragrafo in blue ed aumenterà la dimensione del corpo del carattere a 20pt in generale per i fogli di stile in linea lo stile viene inserito nel Tag di apertura di un qualsiasi elemento HTML secondo la seguente sintassi di prototype : Continua…

Template and information based on data provided by DERI bis) Fogli di stile in linea <TagInizioElementoSTYLE= “ NomeProprietàSTY LE1: Valore1; NomeProprietàSTYLE2: Valore2; …………………………………….. NomeProprietàSTYLEN: ValoreN” > Una volta visualizzato all’interno del Browser questo listato apparirà come illustrato qui a lato la proprietà STYLE colorerà il testo el paragrafo in blue ed aumenterà la dimensione del corpo del carattere a 20pt in generale per i fogli di stile in linea lo stile viene inserito nel Tag di apertura di un qualsiasi elemento HTML secondo la seguente sintassi di prototype : Continua… Nel nostro caso abbiamo: <P STYLE= “COLOR : RGB(0,0,255); FONT-SIZE: 20pt” > TagInizioElemento NomeProprietàSTYLE1 Valore2

Template and information based on data provided by DERI bis) Fogli di stile in linea Analiziamo le proprietà utilizzate COLOR :ha tre parametri rappresentati da numeri interi compresi da 0 a 255 e che rappresentano i colori Red, Green, Blue. FONT-SIZE : ha un solo parametro ( un numero intero seguito da pt o px ) che indica la dimenzione del carattere N.B. Un elenco delle proprietà di STYLE e presente nell’ appendice del vostro libro di testo (comunque li vedremo tutti in seguito) possono essere visti come interpreti delle istruzioni HTML o meglio come visualizzatori degli elementi HTML

Template and information based on data provided by DERI bis) ESEMPIO 3 Consideriamo il seguente pezzo di codice HTML : Parlare di Giuseppe Garibaldi -- > esempio di H1 esempio di P ciccio pasticcio <!-- questo nel mio Browser funziona l'altro no Menu Dei Prodotti... -->

Template and information based on data provided by DERI bis) Fogli di stile in linea Analiziamo le proprietà utilizzate dall ESEMPIO3 Oltre alla proprietà BACKGROUND ha tre parametri rappresentati da numeri interi che serve fondamentalmente per colorare lo sfondo di una stringa di testo abbiamo introdotto un elemento della struttura : H1 rappresenta un particolare titolo ovvero un modo di evidenziare un certo testo. Esistono ben 6 elementi di differenti titoli da H1…H6 per capire meglio si ha : Esempi di H1...H6 esempio di H1 esempio di H2 esempio di H3 esempio di H4 esempio di H5 esempio di H6 Continua…

Template and information based on data provided by DERI bis) Fogli di stile in linea Utilizzando i fogli di stile in linea si ottiene : Esempi di H1...H6 esempio di H1 esempio di H2 esempio di H3 esempio di H4 esempio di H5 esempio di H6 Continua…

Template and information based on data provided by DERI 26 13) Fogli di stile incorporati Supponiamo di avere due elementi P (Paragrafi ), entrambi Blue. Se volessimo cambiare colore di Background ad entrambi per esempio da magenta a verde, dovremmo andare nel codice di ogni elemento e modificarne lo stile. Un sistema siffstto di stile è certamente funzionante ma che di fatto non risponde alla filosofia tipica del CSS. Il consiglio è dunque di servirsi di fogli di stile in linea esclusivamente per piccoli e circoscritti ritocchi, e non per la struttura generale di un sito Web. Per ovviare a questo problema,(ovvero andare a modificare ogni volta il codice sorgente modificando gli style sheet) possiamo seguire una strada più semplice ed efficace utilizzando i fogli di stile incorporati. ESEMPIO: Quinto esempio P{COLOR:RGB(255,0,0) } Quinto esempio : primo P Quinto esempio : secondo P Selettore Di Elemento Continua…

Template and information based on data provided by DERI bis) Fogli di stile incorporati Generalizzandola sintassi per i fogli di stile incorporati è la seguente. Selettore { NomeProprietàSTYLE1:Valore; NomeProprietàSTYLE1:Valore1; NomeProprietàSTYLEN:ValoreN; } Continua… Dove conn Selettore si possono selezionare uno o più elementi all’interno del documento Ai quali va applicato uno stile. Nell esempio abbiamo applicato lo stile agli elementi di tipo P È questo un esempio di Internal Style Sheet, ovvero lo stesso style sheet condiviso tra più elementi dello stesso documento.relativamente al nostro esempio abbiamo precise indicazioni sulla presentazione di tutti gli elementi P all’interno del documento HTML: in particolare tutti gli elementi Pavranno colore rosso. P.S. per motivi espositivi useremo come sinonimi i termini Stile e Style sheet.

Template and information based on data provided by DERI 28 14) Identificazione e classi di elementi Sorge ora un altra esigenza : se avessi 10 paragrafi e ne volessi solo lcuni Blue, come potrei fare ? Finora abbiamo genericamente parlato di elemento P intendendo con ciò tutti gli elementi di tipo P. Vogliamo ora distinguere e/o raggruppare all’interno di tutti gli elementi di tipo P soltanto determinati elementi. Per far ciò utilizziamo 2 importanti proprietà degli elementi: ID CLASS Continua… ID serve per identificare univocamente un elemento. Ovvero il valore della proprietà ID identifica univocamente l’elemento all’interno del documento. ESEMPIO : N.B. per quanto appena detto non è possibile identificare 2 elementi con lo stesso valore ID serve per identificare univocamente un elemento.

Template and information based on data provided by DERI 29 14) Identificazione e classi di elementi Vediamo ora: CLASS : serve per far appartenere più elementi di un documento alla stessa classe. In generale si fanno appartenere elementi distinti alla stessa classe quando riconosciamo loro una proprietà comune. Riprendendo dunque l’ ESEMPIO5 possiamo riscriverlo nel seguente modo. Continua… Sesto esempio P.codice{ COLOR:RGB(255,0,0)} P.pseudo{ COLOR:RGB(0,0,255)} } primo P secondo P Dire come verra visualizzata la pagina

Template and information based on data provided by DERI 30 Contenuti Lez.2 (Intro. All’HTML) Finire I selettori di classe Fogli di stile Esterni Esercitazioni e verifica Elementi di strutturazione di un documento Le tabelle Costruire le tabelle riga per riga Un esempio di HTML e CSS Strutturazione del testo Come definire un area I caratteri speciali Gli elenchi

Template and information based on data provided by DERI 31 Lez.2 Nell’esempio 6 abbiamo introdotto un altro tipo di selettore: il selettore di classe “.” ( nel nostro esempio P.pseudo e P.codice),al quale abbiamo potuto fare riferimento secondo il seguente prototype: TipoElemento.NomeClasse Con questo tipo di notazione (nota come Dot-Notation ci si riferisce a tutti gli elementi P di classe “codice” e “Pseudo” attribuendo ad essi differenti colori di ForeGround. È utile osservare il fatto che sia l’elemento di tipo H1 che l’elemento di tipo P appartengono alla classe “Pseudo” appare dunque evidente che una stessa classe può essere assegnata a diversi elementi con la seguente dicitura: *.NomeClasse Continua…

Template and information based on data provided by DERI 32 Lez.2 Il carattere “ * “ è detto selettore universale e viene spesso utilizzato con il selettore di classe : questo carattere può essere sostituito al “TipoElemento” per estendere a tutti gli elementi una determinata classe. Ad esempio la dicitura: *.Codice Indica che viene estesa a qualunque elemento la classe codice. Riportiamo di seguito alcuni tra i più semplici selettori. Lo stile viene applicato a : Un particolare tipo di elemento ( Selettore di Elemento) NomeElemento{……..} Tutti gli elementi di un certo tipo che appartengono alla stessa classe (Selettore di Classe) NomeElemento.NomeClasse{……….} Tutti gli elementi di qualsiasi tipo della stessa classe *.NomeClasse{……} Continua… N.B : nell’appendice A del libro sono riportati alcuni esempi di selettori con una loro classificazione

Template and information based on data provided by DERI 33 14) Fogli di stile Esterni Finora abbiamo trattato separatamente Struttura e presentazione del nostro documento ipermediale, ma di fatto queste due componenti sono inglobato in un unico file.html, vediamo dunque di separare in due file distinti la struttura dalla presentazione, precisamente: Prova.html : dove risiede la struttura del documento HTML Esempio.css: dove risiede la presentazione del documento scritto nel linguaggio di stile css. File prova.html primo P secondo P Vediamo dunque un esempio di fogli di stile esterni riprendendo l’esempio N°6 (ottenendo l’Esempio n°7) P.codice{ COLOR:RGB(255,0,0) P.pseudo { COLOR:RGB(0,0,255) File esempio.css N.B : notiamo la presenza dell’elemento LINK che serve ad indicare un collegamento tra il nostro documento HTML ed un altro. L’attributo REL indica la relazione con un foglio di stile il cui nome è definito da HREF (esempio.css) ed il cui tipo text è def. Da type

Template and information based on data provided by DERI 34 Lez.2 Ricapitolando nei vari esempi precedenti abbiamo visto che con il CSS: Utilizzando L’ inline style (all’interno del documento tra I tag BODY) ogni elemento ha il suo stile,dunque non c’è condivisione di stili tra gli elementi. Utilizzando L’internal style sheet (all’interno del documento tra I tag e lo stesso stile viene condiviso da più elementi di documenti HTML diversi. N.B : Se per un particolare elemento (del nostro documento) sono definiti più stili (ad esempio : uno interno per tutto il documento,uno in linea ed uno esterno) quale di essi viene applicato?? Esiste una priorità per gli stili come mostrato: Browser default ( OGNI Brrowser ha un suo CSS di default External style sheet Internal style sheet Inline style Priorità Bassa Priorità Alta

Template and information based on data provided by DERI 35 Lez.2 Elementi di strutturazione di un documento Le Tabelle : Le tabelle rappresentano uno degli strumenti più utilizzati in HTML a livello professionale. N.B : nella sezione appendici di questo volume sono presenti tutti gli attributi di tali elementi. Gli elementi fondamentali per definire la struttura fondamentale di una tabella sono: Table: indica l’inizio e la fine di una tabella caratterizzata dai tag TR : indica l’inizio di una nuova riga TD : indica l’inizio di una cella (o colonna)

Template and information based on data provided by DERI 36 Lez.2 Elementi di strutturazione di un documento Esempio1 : primo esempio di tabella A B C D E F

Template and information based on data provided by DERI 37 Lez.2 Elementi di strutturazione di un documento Vediamo ora in css come sia possibile definire la Presentazione di una tabella, esaminando in particolare I selettori per le tabelle. Supponiamo che la tabella dell’esempio precedente appartenga alla classe “ risultati” : ……… ………. Per selezionare tutta la tabella scriveremo al posto dei puntini: Table.risultati Per selezionare tutta la terza riga della tabella scriveremo al posto dei puntini: Table.risultati:row[3]

Template and information based on data provided by DERI 38 Lez.2 Elementi di strutturazione di un documento In Particolare: row-odd Selezioniamo le righe dispari row-even Selezioniamo le righe pari In maniera analoga: per selezionare la terza colonna della tabella scriveremo: table.risultati.column[3] Ed in particolare : table.risultati.column[3] Column-odd Selezioniamo le colonne dispari Selezioniamo le colonne pari

Template and information based on data provided by DERI 39 Lez.2 Elementi di strutturazione di un documento Riassumendo possiamo dire che: È possibile applicare gli attributi di stile o a tutta la tabella,oppurealla singola riga e/o colonna Esempio : supponiamo di voler dare alla nostra tabella un bordo di stile “ double”di spessore 5punti e di colore verde. Secondo esempio table.risultati { borde-style:double;border-width:5pt;bordercolor:green } A B C D E F

Template and information based on data provided by DERI 40 Lez.2 Elementi di strutturazione di un documento Secondo esempio table.risultati { borde-style:double;border-width:5pt;bordercolor:green } Alfabeto A B C D E F Modifichiamo l’esempio precedente,inserendo il frammento di codice indicato in grassetto:

Template and information based on data provided by DERI 41 Lez.2 Elementi di strutturazione di un documento Costruiamo la Tabella riga per riga: In HTML una tabella è vista come un insieme di righe e non un insieme di colonne, questo vuol dire che si considerano tanti elementi TR composti da tante celle (TD) dunque una tabella in HTML va riempita per riga e non diversamente. Ad esempio supponiamo di voler riempire una tabella contenebte l’orario scolastico delle materie: Secondo esempio table.risultati { borde-style:double;border-width:5pt;bordercolor:green } Orario scolastico della settimana LUNEDI MARTEDI MERCOLEDI GIOVEDI VENERDI SABATO Prima ora Italiano Matematica Storia ……………

Template and information based on data provided by DERI 42 Lez.2 Elementi di strutturazione di un documento Un Esempio di HTML e CSS: Aggiungiamo ora qualcosa all’esempio riepilogativo di HTML + CSS utilizzando la tabella dell’orario scolastico Appena definita. L’esempio consiste nell aggiungere una veste grafica (Presentazione) alla tabella “ orario scolastico settimanale “ in modo da avere: i giorni della settimana con un font più grande Le ore della settimana Ogni materia con lo stesso colore di background Lo stesso colore di foregroud per i laboratori di tutte le materie, indipendentemente dal colore di background dato a quella materia.