Informatica Generale: laboratorio di informatica Sommario Accessibilità di un sito web CSS Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Accessibilità Descrivere sempre le immagini Utilizzare contrasti di colore marcati Font di dimensioni abbondanti Usare per i link una frase che abbia senso Identificare le intestazioni delle tabelle contenenti dati Prevedere l’inserimento di un sommario o di una mappa del sito Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Accessibilità Organizzare i contenuti delle pagine in modo chiaro e logico Fornire un titolo a tutti gli eventuali frames Controllare la portabilità del proprio lavoro usando diversi Browser. Usare se possibile i fogli di stile Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica CSS Cascading Style Sheet Fogli sovrapposti di stile. Con fogli di stile si intendono modelli o stili che si applicano a varie parti del documento e che descrivono il modo in cui viene reso. Supportati dai principali browser: Netscape & Explorer Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Fogli di stile Si basano su regole che selezionano un elemento HTML e ne dichiarano le caratteristiche stilistiche. In alcuni casi usando i fogli di stile e’ possibile modificare proprieta’ degli elementi che con l’HTML semplice non e’ possibile fare. Informatica Generale: laboratorio di informatica
Come usare i fogli di stile Ci sono due modalita’ per usare i fogli di stile che abbiamo creato: Esterna. Definisco il mio foglio di stile in un file esterno al documento HTML in cui verra’ usato; Interna. Definisco il foglio di stile nello stesso documento HTML in cui verra’ usato. Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Fogli di stile interno Le regole definite nel foglio di stile vengono incluse nella sezione <head> del documento HTML. Per poter includere nell’intestazione del documento HTML il foglio di stile e’ necessario usare il tag <STYLE> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica <STYLE> <head> <title> </title> <style> Definisco regole del foglio di stile </style> </head> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Fogli di stile esterno Le regole definite nel foglio di stile vengono incluse in un documento distinto da quello HTML in cui verra’ usato. I fogli di stile esterni sono file in cui sono dichiarate le regole di stile e la cui estensione e’ .css Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Fogli di stile esterno Per comunicare al browser che in un determinato documento HTML vogliamo usare un foglio di stile esterno e’ necessario usare il tag <LINK href=“….” rel=“…”> con gli attributi href e rel. Nell’intestazione del documento HTML. Informatica Generale: laboratorio di informatica
<LINK> <head> <title> <link href=“nomeFile.css” rel=“stylesheet”> </head> Path del file che contiene le regole Relazione che collega il documento HTML al file in href
Informatica Generale: laboratorio di informatica Differenze Usare un foglio di stile interno permette di definire regole di stile valide solo per il documento HTML in cui e’ specificato. Usare un foglio di stile esterno permette di definire regole di stile valide per piu’ documenti HTML, ad esempio per un intero sito Web. Informatica Generale: laboratorio di informatica
Regole di stile Sel { Prop1: Val1; …. Propn:Valn} Sintassi delle regole Sel { Prop1: Val1; …. Propn:Valn} Valore Proprietà Selettore Dichiarazione Informatica Generale: laboratorio di informatica
Regole di stile: Semantica Selettore: elemento HTML (A, IMG) a cui deve essere applicata la regola di stile. Dichiarazione: descrive il Valore che una certa Proprietà (size, height) dell’elemento deve avere Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio file style.css BODY{ margin-left : .5cm; margin-right : .5cm; color : #000066; font-family : Verdana,Arial,Helvetica; font-size : 10pt; } A:LINK{ text-decoration : none; color : #990066; A:VISITED{ color : #9999ff; Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font e CSS CSS permette di controllare diverse proprietà dei font: Dimensione Tipo Peso Indentazione Colore Interlinea Spazio tra le lettere di una parola Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font Proprietà Font-family Font-size Font-weight Line-height Letter-spacing Text-indent Color Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font-Family Questa proprietà ci permette di specificare quale tipo di font vogliamo usare. (attributo face di font) Esempio Paragrafo con font di tipo Verdana P{Font-family: Verdana} Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font-Family II Se il font specificato non e’ disponibile il browser userà un font standard. Per questo motivo e’ possibile specificare font alternativi quindi come valore di font-family si ha una lista di possibili font. Esempio P{Font-family: Verdana, ARIAL, Sans-Serif} Valori alternativi separati da virgole Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font-weight Questa proprietà consente di specificare il formato del font. I valori più usati sono: Normal Bold Bolder Lighter Esempio P{Font-weight: Bold} Paragrafo con font in grassetto Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font-size Proprietà consente di specificare le dimensioni del font utilizzando una delle seguenti unità di misura Pixel Punto Pollice Centimetro Millimetro px pt in cm mm Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Font-size Esempio Paragrafo con testo di 13 pollici P{Font-size: 13in} Paragrafo con testo di 13 pixel P{Font-size: 13px} Paragrafo con testo di 13 cm P{Font-size: 13cm} Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Text-indent Proprietà che permette di impostare il livello di indentazione della prima riga di testo di un paragrafo. I valori più usati sono i pixel (indicati con px) Esempio P{Text-indent: 18px} Paragrafo con prima riga distante 18pixel dal margine sinistro Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Color Proprieta’ che definisce il colore del testo di un elemento. Possibili valori o i nomi dei colori o i valori esadecimali. Esempio P{color: #FFFFFF} Paragrafo con testo in bianco Informatica Generale: laboratorio di informatica
Esempio: Headings h1 {color:blue} h2 {color:navy} h3 {color:olive} h4 {color:purple} h5 {color:maroon}
Informatica Generale: laboratorio di informatica Sommario Proprietà text Proprietà margin Proprietà padding Proprietà border Proprietà background Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica text-decoration Sintassi {text-decoration:valori } Possibili valori: underline testo sottolineato overline testo con riga sopra line-through testo sbarrato blink alternato visibile e invisibile none nessuno Informatica Generale: laboratorio di informatica
Esempio: text-decoration H1{text-decoration:underline} H2{text-decoration:line-through} H3{text-decoration:blink} H4{text-decoration:overline} …… ………….. <H1> first title</h1> <H2> second title</h2> <H3> third title</h3> <H4> fourth title</h4> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica text-transform Sintassi {text-transform: valori } Possibili valori: capitalize maiuscola la prima lettera di tutte le parole uppercase tutto il testo in maiuscolo lowercase tutto il testo in minuscolo none nessuno Informatica Generale: laboratorio di informatica
Esempio: text-transform H1{text-transform:capitalize} H2{text-transform:uppercase} H3{text-transform:lowercase} H4{text-transform:none} ……………. ………. <H1> first title</h1> <H2> second title</h2> <H3> third title</h3> <H4> fourth title</h4> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica text-align Sintassi {text-align: valori } Possibili valori: left testo allineato a sinistra (valore di default) right testo allineato a destra center testo allineato al centro justify testo giustificato Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: text-align H1{text-align:left} H2{text-align:right} H3{text-align:center} H4{text-align:justify} ……………. ………. <H1> first title</h1> <H2> second title</h2> <H3> third title</h3> <H4> fourth title</h4> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica margin Sintassi {margin: valori } Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale auto dimensione margine automatica Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: margin H1{margin:45px} H2{margin:105px} …………. ……… <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica margin-X Sintassi {margin-X: valori } X = {top, bottom, left, right} Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: margin-X H1{margin-top:45px} H2{margin-left:105px} …………… …………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica margin Sintassi {margin: valore1 valore2 valore3 valore4} con valore1 dimensione margine alto valore2 dimensione margine destro valore3 dimensione margine basso valore4 dimensione margine sinistro Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: margin H1{margin:45px 37px 99px 76px} ………………….. ………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica padding Sintassi {padding: valori } Possibili valori: length dimensione margine espressa in misure (cm,pt,px) percentage dimensione margine espressa in percentuale Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: padding H1{padding:45px} H2{padding:105px} …………. ……… <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica padding-X Sintassi {padding-X: valori } X = {top, bottom, left, right} Possibili valori: length dimensione margine espressa in pixel percentage dimensione margine espressa in percentuale Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: padding-X H1{padding-top:45px} H2{padding-left:105px} …………… …………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica padding Sintassi {padding: valore1 valore2 valore3 valore4} con valore1 dimensione margine alto valore2 dimensione margine destro valore3 dimensione margine basso valore4 dimensione margine sinistro Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: padding H1{padding:45px 37px 99px 76px} ………………….. ………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-style Sintassi {border-style: valori } Possibili valori: solid bordo singolo double bordo doppio inset ombreggiato dal basso outset ombreggiato dall’alto groove bassorilievo ridge altorilievo Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-style Sintassi {border-style: valori } Altri possibili valori: dotted bordo fatto da puntini dashed bordo fatto da piccole linee none nessun bordo Informatica Generale: laboratorio di informatica
Esempio: border-style H1{border-style:solid} H2{border-style:double} H3{border-style:inset} H4{border-style:outset} H5{border-style:groove} H6{border-style:ridge} <H1>first title</h1> <H2>second title</h2> <H3>second title</h3> <H4>second title</h4> <H5>second title</h5> <H6>second title</h6> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-X-style Sintassi {border-X-style: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-style Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-color Sintassi {border-color: valori } Possibili valori: colorname nome del colore #$$$$$$ codifica esadecimale del colore rgb(0-255,0-255,0-255) codifica decimale del colore Informatica Generale: laboratorio di informatica
Esempio: border-color H1{border-style:solid; border-color:red} H2{border-style:solid; border-color:rgb(22,234,54)} H3{border-style:solid; border-color:#234244} <H1>first title</h1> <H2>second title</h2> <H3>third title</h3> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-X-color Sintassi {border-X-color: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-color Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-width Sintassi {border-width: valori } Possibili valori: thin, medium,thick ampiezze predefinite di solito 'thin' <='medium' <= 'thick' length ampiezza espressa in pixel Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica border-X-width Sintassi {border-X-width: valori } con X= {top, bottom, left, right} Possibili valori: quelli visti per border-width Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica background-color Sintassi {background-color: valori } Possibili valori: colorname nome del colore #$$$$$$ codifica esadecimale del colore rgb(0-255,0-255,0-255) codifica decimale del colore Informatica Generale: laboratorio di informatica
Esempio: background-color H1{background-color:yellow} H2{background-color:red} ………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica background-image Sintassi {background-image: valori } Possibili valori: url(urlName) urlName cammino della immagine Informatica Generale: laboratorio di informatica
Esempio: background-image H1{background-image:url(img1.jpg)} H2{background-image:url(img2.jpg)} ………….. <H1> first title</h1> <H2> second title</h2> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica background-repeat Sintassi {background-repeat: valori } Possibili valori: repeat l’immagine è ripetuta sia orrizontalmente che verticalmente repeat-x l’immagine è ripetuta solo orrizontalmente repeat-y l’immagine è ripetuta solo verticalmente no-repeat l’immagine non è ripetuta Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Sommario Proprietà delle liste Proprietà del cursore CSS interni: peculiarità proprietà link Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica list-style-type Sintassi {list-style-type: valori } Possibili valori: disc, square, circle, lower-alpha, lower-latin, lower-roman, decimal, upper-alpha, upper-latin, upper-roman Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio Disc square circle lower-roman lower-alpha ……………….. OL { list-style-type:lower-alpha} <OL> <LI>first item <LI>second item <LI>third item </OL> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica list-style-image Sintassi {list-style-image: valori } Possibili valori: url(URI) cammino all’immagine Con URI = Path oppure URL (Web) Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio OL { list-style-image:url(book.gif)} <OL> <LI>first item <LI>second item <LI>third item </OL> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica list-style-position Sintassi {list-style-position: valori } Possibili valori: inside il testo delle linee successive alla prima non sono allineate con la prima outside il testo delle linee successive alla prima sono allineate con la prima Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio OL { list-style-position:inside} <OL> <LI>la seconda riga torna a capo allineate con la prima? <LI>second item <LI>third item </OL> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio OL { list-style-position:outside} <OL> <LI>la seconda riga torna a capo allineate con la prima? <LI>second item <LI>third item </OL> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Cursor Sintassi {cursor: valori } Possibili valori: default dipende dal sistema pointer il cursore come dito indice move le quattro frecce ad indicare movimento wait la clessidra help un punto interrogativo url(URI) un’immagine Con URI = Path oppure URL (Web) Informatica Generale: laboratorio di informatica
CSS interni: Peculiarità Regola semplice: Sel { Prop1: Val1; …. Propn:Valn} Regole con liste di selettori Regole con discendenti Regole con classi Regole con pseudo-classi Informatica Generale: laboratorio di informatica
Regole con liste di selettori Se voglio applicare le stesse proprietà a selettori diversi uso la seguente sintassi: ListaSel{Prop1: Val1; …. Propn:Valn} Dove ListaSel = Selettore1, Selettore2, …., Selettorem Informatica Generale: laboratorio di informatica
Esempio: liste di selettori <style type="text/css"> p, h1, div{background: #0000ff} </style> …. <h1>Questo e' un heading </h1> <p>Questo e' un paragrafo </p> <div>Questo e' un div </div> Informatica Generale: laboratorio di informatica
Regole con discendenti Se voglio applicare delle proprietà ad un selettore che pero’ e’ obbligatoriamente discendente di un altro uso la seguente sintassi: ListaSel{Prop1: Val1; …. Propn:Valn} Dove ListaSel = Selettore1 Selettore2 Selettorem Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: discendenti <style type="text/css"> p{color: green} h1 p{color: blue} </style> ……. <p>Questo e' un heading</p> <h1><p> Questo e' un heading discendente da un paragrafo </p> </h1> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Regole con classi Se voglio applicare delle proprietà ad un selettore ma non ogni qualvolta viene usato, uso la seguente sintassi: Sel.Name{Prop1: Val1; …. Propn:Valn} Dove Name = Nome che mi servira’ da identificativo quando vorro’ usare il Sel con le proprieta’ definite dalla regola Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Regole con classi Esempio: P.pippo{color:red; text-align:center} Per poter usare il selettore P di classe pippo devo fare ricorso ad un attributo standard di tutti gli elementi HTML class Sintassi: <Sel class=“nomeDellaClasseDelSelettore”> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: classi <style type="text/css"> p{color: green} p.pippo{color: blue} </style> ……. <p>Questo e' un heading</p> <p class=“pippo”> Questo e' un paragrafo di classe pippo </p> Informatica Generale: laboratorio di informatica
Regole con pseudo-classi Se voglio applicare delle proprietà ad un selettore ma solo in conseguenza di alcune azioni dell’utente uso la seguente sintassi: Sel:Keyword{Prop1: Val1; …. Propn:Valn} Dove Keyword = parola chiave del linguaggio usato nei css Informatica Generale: laboratorio di informatica
Pseudo-classi :Keyword Sel:Keyword{Prop1: Val1; …. Propn:Valn} Valori possibili per keyword: link visited active hover I primi due si applicano al selettore dei link, mentre gli altri si applicano a tutti i selettori. Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: link, visited <style type="text/css"> a:link{color: green} a:visited{color: blue} </style> ……. <a>Questo e' un link</a> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: hover <style type="text/css"> a:link{color: green} a:hover{color: blue} </style> ……. <a>Questo e' un link</a> hover: quando il mouse passa sopra il link Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio: active <style type="text/css"> a:link{color: green} a:active{color: blue} </style> ……. <a>Questo e' un link</a> active: quando viene premuto il pulsante del mouse Informatica Generale: laboratorio di informatica
Combinazioni: classi & pseudo Sel.classe:Keyword{Prop1:Val1; ..;Propn:Valn} Esempio: <style type="text/css"> a:link{color: green} a.pippo:link{color:red} </style> ……. <a class=“pippo”>link</a> <a>link2</a> Informatica Generale: laboratorio di informatica
Informatica Generale: laboratorio di informatica Esempio h1, h2, h3, h4, h5{color: red} h1, h2, h3 {color: blue} h1 {color: green} Se ho un elemento usato in più regole per la stessa proprietà il browser prende l’ultimo valore definito. Informatica Generale: laboratorio di informatica