INFORMAZIONE E PRESENTAZIONE

2. PRIMA PARTE: INTRODUZIONE INFORMAZIONE E PRESENTAZIONE • Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. • L’informazione è costituita da due aspetti essenziali: • I contenuti • La formattazione dei contenuti • I contenuti sono forniti attraverso linguaggi di marcatura che caratterizzano i vari oggetti del documento • La formattazione è determinata dall’interpretazione del programma utente.

3. PRIMA PARTE: INTRODUZIONE BROWSER E STILI • Ogni browser ha una rappresentazione predefinita degli oggetti della pagina: generalmente i collegamenti sono blu, i titoli sono rappresentati con caratteri grandi. In pratica, ogni browser ha uno stile predefinito su cui l’utente (ma non l’autore) può intervenire in minima parte. • Per permettere agli autori di avere un maggiore controllo sulla rappresentazione dei contenuti, sono nati marcatori (come ad esempio font) il cui scopo non era più caratterizzare gli oggetti del documento, ma fornire una formattazione degli stessi.Come conseguenza i contenuti risultano indissolubilmente legati alla loro rappresentazione grafica.

4. PRIMA PARTE: INTRODUZIONE I FOGLI DI STILE A CASCATA (CSS) • Compito dei CSS (Cascading Style Sheets: Fogli di Stile a Cascata) è ripristinare la separazione dei contenuti e dalla formattazione. • I CSS possono essere visti come lo strumento per la definizione da parte dell’autore degli stili predefiniti del browser • I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato.

5. PRIMA PARTE: XHTML UN DIVERSO APPROCCIO • Nella realizzazione di pagine web tramite XHTML+CSS è richiesto un diverso approccio rispetto a quanto si farebbe impaginando per mezzo di tabelle con i programmi del tipo WYSIWYG • Anziché lanciare l’editor WYSIWYG e cominciare a disegnare la struttura della pagina, è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche • Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale

6. PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE STRUTTURA DI UN FOGLIO DI STILE • Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato • Di seguito è rappresentata la struttura di una regola: REGOLA SELETTORE PROPRIETÀ h1 { font-size : 2em; font-weight : bold; } VALORE DICHIARAZIONE

7. La sintassi di base dei CSS selettore{ proprietà: valore; proprietà: valore; proprietà: valore; } Diciamo che vogliamo ad esempio un colore rosso come sfondo della pagina web: con i CSS si ottiene così: body { background-color: #FF0000; }

8. Attraverso i selettori vengono associate le regole agli elementi del documento HTML (o XML). • Selettore fa match con gli elementi E BODY { font-family: Arial; font-size: 12 pt; } H1 { font-size: 18 pt; } P { font-size: 10 pt; }

10. Tutti i selettori e proprietà http://www.w3schools.com/css/css_examples.asp

11. PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE LE REGOLE • Una regola è costituita da: • uno o più selettori (separati da una virgola ‘,’) a cui associare un insieme di dichiarazioni racchiuse fra parentesi graffe ‘{ }’ • le varie di dichiarazioni sono separate da un punto e virgola ‘;’ • ogni dichiarazione è costituita da due elementi separati dai due punti ‘:’: • la proprietà • il valore (o l’insieme di valori) assegnato alla proprietà

12. 1: TAG XHTML 3: IDENTIFICATORI h1, h2, p { ... } #identificatore { ... } .classe { ... } 2: CLASSI PRIMA PARTE: I SELETTORI I SELETTORI • I selettori indicano al browser quali elementi della pagina si dovranno applicare le dichiarazioni della regola • I selettori possono essere essenzialmente di tre tipi:

13. PRIMA PARTE: I SELETTORI TIPI DI SELETTORI • I selettori più generici sono i selettori di tipo i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato. Ad esempio, sono selettori di tipo:p {…}a {…}div {…}strong {…}* {…}

14. PRIMA PARTE: I SELETTORI LE CLASSI • Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class:<div class="notizia"><h1>Titolo</h1><p>Testo …</p></div><div class="notizia altraClasse"><h1>Titolo</h1><p>Testo …</p></div> • Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto‘.’.notizia {…} • È possibile combinare fra loro più classi:<div class="classe1 classe2">…</div>.classe1.classe2 {…} • Il selettore può anche specificare a quale elemento la classe deve essere associata:p.classe {…}h1.classe {…}

15. PRIMA PARTE: I SELETTORI IDENTIFICATORI • Gli ‘identificatori’ selezionano invece un oggetto unicoall’interno della pagina. L’associazione avviene tramite l’attributo id:<div id="testata"><h1>Titolo</h1><p>Testo ...</p></div>ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina. • Il selettore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘#’#testata {…} • Il selettore può anche specificare a quale elemento l’identificatore deve essere associato:p#testata {…}h1#testata {…} • Classi e identificatori possono essere usati contemporaneamente:<div id="idval" class="classval">#idval.classval {…}

16. PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML COLLEGARE I CSS A UN DOCUMENTO XHTML • Esistono diversi modi di collegare un foglio di stile ad un documento XHTML • Fogli di stile incorporati • Fogli di stile esterni • Fogli di stile importati • Attributo style:<p style="font-weight:bold"> • La priorità della regola è massima, indipendentemente dal peso dei selettori • Questo metodo è sconsigliabile

17. PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML FOGLI DI STILE INCORPORATI • Si specificano gli stili direttamente nel codice XHTML attraverso il tag <style> da inserire nel tag <head>: <head> <style type="text/css"> /*<![CDATA[*/ … /*]]>*/ </style> </head> • Le stringhe /*<![CDATA[*/ e /*]]>*/ servono a rispettare le regole dell’XML • Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari

18. PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML FOGLI DI STILE ESTERNI • I fogli di stile esterni sono richiamati attraverso il tag <link> da inserire nel tag <head>:<head><link rel="stylesheet" href="file.css" type="text/css" /></head> • Attraverso il tag <link> è possibile associare diversi fogli di stile contemporaneamente

19. PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML FOGLI DI STILE IMPORTATI • Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole • Se presenti, le regole @importdevono essere inserite prima delle normali regole per gli stili: @import "file1.css"; @import "file2.css"; body {…} • Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import • Le regole @import possono comparire anche negli stili incorporati

20. PRIMA PARTE: I VALORI LUNGHEZZE • Unità di misura relative (stadard di fatto, le piu usate) • em: pari alla dimensione dei caratteri • ex: pari alla dimensione del carattere ‘x’ (rara) • px: pixel, la loro dimensione dipende dallo schermo • Unità di misura assolute: • in: pollici (1in = 2.54 cm) • cm • mm • pt: punti (nei CSS 2, 1pt = 1/72in) • pc: picas (1pc = 12pt) • Le unità di misura relative non possono essere ricondotte direttamente ai metri senza considerare altri fattori, come ad esempio dimensione e risoluzione dello schermo

21. PRIMA PARTE: I VALORI COLORI • Nomi predefiniti: black, green, navy • Valori RGB • #rrggbb (r,g,b = {0÷ F}) • #rgb (r,g,b = {0÷ F}) corrisponde a #rrggbb • rgb(r,g,b) (r,g,b = {0÷255}) • rgb(r%,g%,b%) (r,g,b = {0.0÷100.0}) • Per esempio, i valori aqua, #00FFFF, #0FF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua.

22. PRIMA PARTE: COLORI E SFONDI COLORE IN PRIMO PIANO (TESTO E BORDI) • Il colore del testo e dei bordi è definito tramite la proprietà color • Il valore predefinito è quello ereditato dal testo del blocco padre • Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, e non è necessariamente nero

23. PRIMA PARTE: COLORI E SFONDI SFONDI • Lo sfondo può essere • Trasparente • Caratterizzato da una tinta piatta • Riempito del tutto o in parte da una immagine • Lo sfondo può essere gestito attraverso le seguenti proprietà: • background-color • background-image • background-repeat • background-position • background-attachment • background (riassume le diverse proprietà)

24. PRIMA PARTE: COLORI E SFONDI COLORE DELLO SFONDO • La proprietà background-color può assumere i seguenti valori: • transparent • <colore>Il valore predefinito è transparent • A differenza di color, il valore per la proprietà background-color non è ereditato • Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco

25. PRIMA PARTE: COLORI E SFONDI COLORI DI TESTO E SFONDO DEFINITI SEPARATAMENTE • Le proprietà color e background-color dovrebbero essere sempre specificate in coppia per evitare conflitti con le impostazioni predefinite • In figura si vede il risultato ottenuto con una impostazione di Windows a contrasto elevato quando il testo è impostato sul blu (#009) ma lo sfondo non è esplicitamente impostato

26. PRIMA PARTE: COLORI E SFONDI BACKGROUND-IMAGE • Per inserire un’immagine di sfondo è sufficiente specificarne l’url tramite la proprietà background-image:background-image:url(/im/sfondo.png); • L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente • L’immagine scorrerà assieme al testo • Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none;

27. PRIMA PARTE: COLORI E SFONDI BACKGROUND-REPEAT • Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta • background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) • background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente • background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente • background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine

28. PRIMA PARTE: COLORI E SFONDI BACKGROUND-ATTACHEMENT • Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina • background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito) • background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body>)

29. PRIMA PARTE: COLORI E SFONDI BACKGROUND-POSITION • Tramite background-position è possibile stabilire la posizione iniziale dell’immagine. • I valori ammessi sono: • Unità di lunghezza • Unità percentuali • Parole chiave: • left | center | rightper il posizionamento orizzontale • top | center | bottomper il posizionamento verticale • I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale

30. PRIMA PARTE: COLORI E SFONDI BACKGROUND-POSITION • Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding • Quando sono utilizzate le unità percentuali si ha il seguente comportamento: • Sia X% il valore percentuale per la posizione orizzontale • Sia Y% il valore percentuale per la posizione verticale • Il punto dell’immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell’area del padding

31. PRIMA PARTE: COLORI E SFONDI BACKGROUND • La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente • Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; }