Informatica Generale: laboratorio di informatica

Informatica Generale: laboratorio di informatica
Sommario Accessibilità di un sito web CSS 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

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

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

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

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

<STYLE> <head> <title> </title> <style> Definisco regole del foglio di stile </style> </head> 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

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

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

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

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

Font Proprietà Font-family Font-size Font-weight Line-height Letter-spacing Text-indent Color 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

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

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

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

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

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

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}

Sommario Proprietà text Proprietà margin Proprietà padding Proprietà border Proprietà background 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

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

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

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

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

Esempio: margin H1{margin:45px} H2{margin:105px} …………. ……… <H1> first title</h1> <H2> second title</h2> 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

Esempio: margin-X H1{margin-top:45px} H2{margin-left:105px} …………… …………….. <H1> first title</h1> <H2> second title</h2> 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

Esempio: margin H1{margin:45px 37px 99px 76px} ………………….. ………….. <H1> first title</h1> <H2> second title</h2> 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

Esempio: padding H1{padding:45px} H2{padding:105px} …………. ……… <H1> first title</h1> <H2> second title</h2> 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

Esempio: padding-X H1{padding-top:45px} H2{padding-left:105px} …………… …………….. <H1> first title</h1> <H2> second title</h2> 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

Esempio: padding H1{padding:45px 37px 99px 76px} ………………….. ………….. <H1> first title</h1> <H2> second title</h2> 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

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

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

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

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

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

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

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

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

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

Sommario Proprietà delle liste Proprietà del cursore CSS interni: peculiarità proprietà link 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

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

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

Esempio OL { list-style-image:url(book.gif)} <OL> <LI>first item <LI>second item <LI>third item </OL> 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

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

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

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

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

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

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

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

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

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

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

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

Informatica Generale: laboratorio di informatica

Presentazioni simili

Presentazione sul tema: "Informatica Generale: laboratorio di informatica"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

Informatica Generale: laboratorio di informatica

Presentazioni simili

Presentazione sul tema: "Informatica Generale: laboratorio di informatica"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back