Federico Parrella. 10 dicembre 2010

Dimensione: px
Iniziare la visualizzazioe della pagina:

Download "Federico Parrella. 10 dicembre 2010"

Transcript

1 Federico Parrella 10 dicembre 2010

2 Fogli di stile Introduzione ai CSS per il web Dicembre 2010 Federico Parrella Questo è un documento didattico ad uso interno. Non può essere ridistribuito in tutto o in parte, né può essere riprodotto in nessuna forma senza il preventivo assenso di Federico Parrella che ne detiene la proprietà intellettuale. Non può essere utilizzato per fini commerciali, né trasformato o alterato per creare un altro documento.

3 CSS introduzione 2 Cascading Style Sheet Introdotti a partire dal 1996 dal W3C, e i fogli di stile sono utilizzati per aggiungere stile (tipografia, colore, spaziature, etc.) alle pagine web. 1 Il W3C è il consorzio nato nell ottobre del 1994 con lo scopo di definire protocolli comuni per il World Wide web. Comprende oltre 500 membri internazionali che contribuiscono a definire gli standard, le specifiche, le linee guida, le applicazioni ed i programmi di supporto per ottimizzare al pieno le potenzialità del web.

4 CSS introduzione 3 I css consentono di dividere i contenuti delle pagine web descritti nel codice (x)html e, dalla loro veste grafica attraverso delle regole di stile. 1 Acronimo di HyperText Markup Language, è un linguaggio usato per descrivere la struttura dei documenti ipertestuali disponibili su Internet. Tutti i siti web sono scritti in HTML, codice che viene letto ed elaborato dal browser, il quale genera la pagina che viene visualizzata sullo schermo del computer. L HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive il contenuto, testuale e non, di una pagina web. (Wikipedia).

5 CSS xhtml 4 xhtml Presupposti per lavorare con i CSS

6 CSS xhtml 5 Semantic Markup Il corretto utilizzo dei fogli di stile prevede una conoscenza adeguata della struttura di un documento xhtml. Contrariamente a quanto sviluppato per il web negli anni precedenti, e il codice xhtml non deve contenere elementi descrittivi per la presentazione grafica. 1 Ancora oggi si utilizzano HTML 4 e precedenti in molti siti web, per scarsa conoscenza degli standard e pigrizia progettuale. L HTML base si utilizza nella composizione di rich (principalmente newsletter promozionali) per via della bassa compatibilità dei client nel rendering xhtml e css. A questo scopo sono utili i Tips & Resourcer di Campaign Monitor:

7 CSS xhtml 6 L xhtml è un linguaggio di marcatura che consente di aggiungere strutture e significati semantici al contenuto delle pagine web. Per farlo si avvale di marcatori html, come titoli <h1> </h6>, paragrafi <p>, elenchi <ul><li>, link ipertestuali <a href>, etc.

8 CSS xhtml 7 L xhtml descrive gli elementi di una pagina web (un collegamento ad un sito, una lista di elementi, un paragrafo di testo, etc). e Non descrive le informazioni grafiche: un elenco puntato con il fondo celeste, un titolo dal font graziato corpo 24px, una colonna larga con il bordo viola, etc. (Questo è il lavoro dei fogli stile) 1 Ad oggi solo alcuni siti hanno una struttura realmente semantica. L attuale versione CSS 2.1 necessita di codice aggiuntivo per l impaginazione a griglia, l uso di sfondi multipli, la scelta di font incorporati, etc. I CSS 3 superano i limiti attuali dando flessibilità ai progettisti, ma sono supportati, in parte, solo da Firefox e Safari.

9 CSS xhtml 8 Modalità di sviluppo delle pagine web OGGI IERI XHTML Struttura HTML Struttura e presentazione CSS Presentazione JAVASCriPT Comportamenti e interazione utente JAVASCriPT Comportamenti e interazione utente

10 CSS xhtml 9 CSS Zen Garden Una dimostrazione di cosa si può realizzare per mezzo del design basato sui CSS

11 CSS xhtml 10 CSS Zen Garden

12 CSS xhtml 11 CSS Zen Garden #145

13 CSS xhtml 12 CSS Zen Garden #171

14 CSS xhtml 13 CSS Zen Garden #178

15 CSS xhtml 14 CSS Zen Garden #209

16 CSS xhtml 15 CSS Zen Garden #213

17 CSS xhtml 16 Adottare un approccio semantico per il codice delle pagine web ha molti vantaggi: Usabilità La pagina web visualizzata senza codice css o javascript rimane in ogni caso navigabile e fruibile. e Accessibilità Browser per non vedenti, ad esempio, leggeranno la pagina con l enfasi data dalla marcatura. r Indicizzazione I motori di ricerca sapranno attribuire il significato e il giusto peso ad ogni elemento della pagina. t 1 Provate a disabilitare i fogli di stile di un sito. Riuscite ancora a capire la tipologia e gerarchia dei contenuti in pagina? 2 Esistono alcune regole per aiutare la scansione di pagine web per non vedenti, ipovedenti e disabili in genere. Molte partono da un codice semantico. 3 Le tecniche attuali SEO (Search engine optimization) si basano, tra l'altro, sul markup delle pagine e sull'ottimizzazione dei contenuti.

18 CSS xhtml 17 Elementi html maggiormente utilizzati per realizzare strutture semantiche Elemento address dl, dt, dt ol li, ul li blockquote q label th thead tfoot fieldset button cite abbr acronym Proprietà Consente di contrassegnare gli indirizzi Indica un elenco di definizione, termine e descrizione di definizione Indica una lista ad elenco ordinata o non ordinata Definisce un blocco di testo come citazione Definisce una citazione in linea con il testo Etichetta per i moduli Contrassegna le intestazioni delle colonne e le righe all'interno delle tabelle Contrassegna l intestazione di una tabella Contrassegna il piè di pagina di una tabella Gruppi di elementi per un modulo Pulsanti per un modulo Specifica le citazioni o riferimenti ad altre fonti Specifica la forma abbreviata per parole o frasi Indica gli acronimi

19 CSS xhtml 18 Utilizzo di tag non strutturati Sebbene i marcatori <div> e <span> e siano molto potenti se utilizzati in combinazione con i CSS, questi ultimi non hanno alcun valore semantico. 1 DIV e SPAN sono i marcatori xhtml maggiormente utilizzati nelle pagine web non completamente semantiche.

20 CSS xhtml 19 Generalmente i <div> (elementi block) e vengono utilizzati per assemblare i contenuti della pagina per settori, creando delle zone di impaginazione. Corretto <div id="contenitore"> <div id="testata"> [...] </div> </div> Non corretto <div>paragrafo di testo</div> Corretto <p>paragrafo di testo</p> 1 Un elemento BLOCK in una pagina xhtml è un elemento che forma un blocco separato: Forma un blocco e si dispone a capo Assume la massima larghezza possibile in rapporto alle misure del suo contenitore Modifica l altezza in rapporto al suo contenuto Può contenere altri elementi di tipo block e/o inline (es: un <p> dentro un <div>) Con l ausilio dei css si può attribuire all elemento block una dimensione fissa o variabile (in larghezza e/o in altezza) Esempi di elementi HTML di block: <div>, <h1> <h6>, <p>, <ul>, <ol>, <dl>, <table>, <blockquote>, <form>

21 CSS xhtml 20 Il tag <span> (elemento inline) e è un marcatore ignorato dai motori di ricerca che viene (mal) utilizzato per differenziare alcuni elementi all interno di un contenuto. Non corretto <h1>un titolo con un <span>enfasi particolare</span></h1> Corretto <h1>un titolo con un <em>enfasi particolare</em></h1> 1 Un elemento INLINE in una pagina xhtml è un elemento che rimane in linea con il resto del contenuto: Prende larghezza e altezza in rapporto al suo contenuto Può contenere elementi di tipo inline (es: un <img> dentro un <a>) e non di tipo block Con l ausilio dei css non gli si possono attribuire misure fisse Esempio di elementi HTML inline: <span>, <a>, <strong>, <em>, <img>, <abbr>, <acronym>

22 CSS Regole di BASe 21 CSS Regole di base

23 CSS Regole di BASe 22 I CSS possono essere: incorporati nella pagina web collegati ad una o più pagine di un sito e dichiarati pr media diversi.

24 CSS Regole di BASe 23 Esempio di stile incorporato nel codice di una pagina xhtml all interno del tag <head> e tra i tag specifici <style> e </style> <html> <head> [...] <style type="text/css" media="screen"> h1 { font-size:24px; color: red }.box { display: block; color: red } </style> [...] </head> 1 Si può applicare il codice css all interno del tag <head> in singole pagine xhtml o in pagine che necessitano interventi mirati.

25 CSS Regole di BASe 24 Esempio di stile incorporato inline nel codice di una pagina xhtml nel tag <body> e Sconsigliato! [...] </head> <body> <div id="container"> <h1 style="margin:5px; color: #f00">il mio nuovo sito</h1> [...] </div> [...] </body> </html> 1 Questo approccio è sconsigliato. In questo modo gli aspetti visuali degli elementi della pagina sono dichiarati nella struttura xhtml. Difficilmente si può forzare una regola dichiarata inline. Gli svantaggi sono enormi, specie se il vostro layout è destinato a supporti e media diversi.

26 CSS Regole di BASe 25 Esempio di stile esterno e collegato nel codice di una pagina html all interno del tag <head> r tramite il tag specifico <link> <link href="stile.css" rel="stylesheet" type="text/css" media="screen" /> 1 In questo caso viene creato un nuovo documento con estensione.css che contiente tutte le regole di stile. Questo file viene collegato ad ogni pagina xhtml del sito cosicché tutte sfruttino le stesse regole. 2 È senza dubbio la scelta da preferire, dati i vantaggi in termini di centralità, controllo ed uniformità dell aspetto visuale del sito, sia in fase di progettazione che in fase di manutenzione evolutiva.

27 CSS Regole di BASe 26 Esempio di stile esterno collegato nel codice di una pagina xhtml all interno del tag <head> tra i tag specifici <style> e </style> Sconsigliato! <html> <head> [...] <style type="text/css" url(stile.css); </style> [...] </head> Nota Per questioni di performance nel caricamento delle pagine web, specialmente su IE per Windows, è preferibile richiamare un css esterno con il metodo <link>

28 CSS Regole di BASe 27 Si possono specificare fogli di stile diversi per consentire una visualizzazione ottimizzata su media differenti. Ad esempio: all e > tutti i dispositivi aural > sintetizzatori vocali (utilizzati principalmente dai non vedenti) braille > dispositivi braille a lettura tattile (utilizzati principalmente dai non vedenti) embossed > stampanti braille handheld > dispositivi palmari e smartphone print r > stampanti e anteprima di stampa dei browser projection > proiettori per presentazioni screen > schermo di un pc desktop, laptop, etc. tty > dispositivi con caratteri a larghezza fissa (telescriventi) tv > televisori Nota La tipologia di media contrassegnata con il colore è quella maggiormente utilizzata dai siti web, anche perché sono quelli maggiormente supportati dai browser moderni. 1 All è il valore di default dell attributo media 2 Nella stampa di un documento xhtml, grazie all uso dei css, si possono ottimizzare corpi e colori dei caratteri, nascondere elementi non necessari in stampa, etc.

29 CSS Regole di BASe 28 Esempio di chiamata ad un foglio di stile esterno e di un foglio di stile aggiuntivo ottimizzato per la stampa in una pagina xhtml all interno del tag <head> tramite il tag specifico <link> <link href="stile.css" rel="stylesheet" type="text/css" media="all" /> <link href="stampa.css" rel="stylesheet" type="text/css" media="print" /> 1 In questo esempio vengono chiamati, in ordine, due fogli di stile esterni. Il primo è valido per tutti i supporti, mentre il secondo solo per la stampa. In quest'ultimo, genericamente, vengono nascosti alcuni elementi non necessari in pagina (menu di navigazione, banner, contenuti specifici, etc), ottimizzati i colori in funzione delle stampanti ed adattato il contenuto ad un formato A4. È fondamentale l'ordine di chiamata degli stili (prima lo stile generico, poi quello per la stampa). Approfondiremo più avanti il motivo.

30 CSS SintASSi 29 Sintassi CSS

31 CSS SintASSi 30 La sintassi CSS è di facile comprensione, si basa su una serie di dichiarazioni e e regole. Ad esempio: h1 { font-size: 24px; color: red } selettore { proprietà1: valore; proprietà2: valore } h2 { font-size:20px;color:red } selettore { proprietà:valore; [...] } Nota Non esistono regole per l utilizzo degli spazi nella scrittura delle dichiarazioni css. Molti utenti preferiscono scrivere una regola per ogni linea di testo, così come l ultimo punto e virgola (;) può essere omesso. Lo stile di scrittura dei selettori è case sensitive, ovvero sensibile alle maiuscole e minuscole. Proprietà e valori sono case insesitive e devono essere scritti in minuscolo, pertanto si consiglia di non utilizzare mai il maiuscolo, neanche nei selettori. 1 Trovate le più comuni dichiarazioni in appendice a questo documento.

32 CSS SintASSi 31 Selettori Tramite i selettori si possono dichiarare regole di stile per: ridefinire i marcatori html aggiungere classi generiche utilizzare id specifici richiamare pseudo elementi e pseudo classi ridefinire tutti gli elementi di un insieme

33 CSS SintASSi 32 Ridefinizione di marcatori html Ogni tag ha delle impostazioni di stile predefinite determinate dal browser utilizzato dall utente. e Si possono ridefinire le regole per ogni marcatore html tramite un selettore di tipo. Notate delle differenze se provate a visualizzare le vostre pagine web prima con Microsoft Internet Explorer 6 e poi con Firefox 3? Con Pc o Mac? La logica di interpretazione del codice xhtml varia a seconda del browser in uso.

34 CSS SintASSi 33 Sintassi di un selettore di tipo Tag di apertura Tag di chiusura XHTML <h1>titolo d esempio</h1> Dichiarazione CSS h1 { color: orange; font-size: 24px} Tag dichiarazione selettore { proprietà: valore;}

35 CSS SintASSi 34 Classi Utilizzate come attributo di un tag html applicano uno stile ad un sottoinsieme di elementi di una pagina web con caratteristiche e funzionalità comuni. Caratteristica primaria delle classi è la loro applicabilità multipla e la loro flessibilità, per questo sono tra i selettori più utilizzati all interno delle pagine web. I nomi delle classi sono sempre preceduti da un period (.).

36 CSS SintASSi 35 Sintassi di una classe Tag di apertura Tag di chiusura XHTML <p class="warning">mangiate frutta e verdura di stagione</p> Nome della classe Attributo del tag Dichiarazione CSS.warning { color: red; font-size: 1.2em} Nome della classe Carattere identificativo Nota I nomi dei selettori possono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!" $%&/ etc. ). Il primo carattere di un selettore non può essere un numero o un hyphen (-). Le classi e gli ID non possono contenere altri segni di interpunzione se non underscore (_) e hyphen (-). Ad esempio, mio_nome2-1 è un nome valido per una classe o un ID, ma i nomi 1,1mio_nome, -mio_nome, my:name, my.name e my,name non sono validi. un tag html può condividere più classi, sommando le regole di stile. Ad esempio: <p class="warning high code">[...]</p>

37 CSS SintASSi 36 Utilizzo e riuso delle classi XHTML <p class="advice">salute: basta cambiare alcune abitudini.</p> <p>comprare <em class="advice">frutta e verdura di stagione</em>: i prodotti fuori stagione sono nel supermercato perché hanno fatto un lungo viaggio in nave, in macchina o in aereo, oppure sono cresciuti in serra grazie </p> CSS.advice { color: green; } p.advice { font-size: 120%; } em.advice { color: greenyellow; }

38 CSS SintASSi 37 ID Utilizzati come attributo di un tag html, definiscono lo stile di un unico elemento di una pagina web. Gli ID devono essere utilizzati una sola volta all'interno di un documento XHTML. Vengono utilizzati principalmente per identificare ampie zone di impaginazione (testata, corpo, piè di pagina, etc.). I nomi degli ID sono sempre preceduti da un hash (#).

39 CSS SintASSi 38 Sintassi di un id Tag di apertura Tag di chiusura XHTML <p id="warning">mangiate frutta e verdura di stagione</p> Nome dell id Attributo del tag Dichiarazione CSS #warning { color: red; font-size: 1.2em} Nome della classe Carattere identificativo Nota I nomi dei selettori possono contenere solo lettere, numeri, underscores (_), hyphens (-) e nessun carattere speciale (!" $%&/ etc. ). Il primo carattere di un selettore non può essere un numero o un hyphen (-). Le classi e gli ID non possono contenere altri segni di interpunzione se non underscore (_) e hyphen (-). Ad esempio, mio_nome2-1 è un nome valido per una classe o un ID, ma i nomi 1,1mio_nome, -mio_nome, my:name, my.name e my,name non sono validi. un tag html può condividere classi e id, sommando le regole di stile. Ad esempio: <p id="warning" class="high">[...]</p>

40 CSS SintASSi 39 Gruppi di selettori Quando più selettori condividono le stesse regole possono essere raggruppati, separati da una virgola. h1 { color: purple } h2 { color: purple } h3 { color: purple } > h1,h2,h3 { color: purple }

41 CSS SintASSi 40 Esempio di gruppi di selettori /* stato iniziale */ h1 { color: silver; background: white } h2 { color: silver; background: gray } h3 { color: white; background: gray } h4 { color: silver; background: white } strong { color: gray; background: white } > /* raggruppamento 1 */ h1, h2, h4 { color: silver } h2, h3 { background: gray } h1, h4, strong { background: white } h3 { color: white } strong {color: gray } In questo caso la logica è complessa e di lettura non immediata. Meglio aggiungere delle classi specifiche per ogni elemento o per un gruppo di elementi. > /* raggruppamento 2 */ h1, h4 { color: silver; background: white} h2 { color: silver } h3 { color: white } h2, h3 { background: gray } strong {color: gray; background: white }

42 CSS SintASSi 41 Regole di stile a cascata Quando più regole di stile si riferiscono allo stesso oggetto, anche con selettori diversi, le dichiarazioni si sommano creando spesso dei conflitti. /* dichiarazioni dello stesso elemento */ h1 { color: silver; background: white; margin: 10px;} h1 { color: black; background: purple } > /* risultato */ Un tag h1 di colore nero, sfondo viola con un margine su tutti i lati di 10px

43 CSS SintASSi 42 L interpretazione delle regole in caso di conflitti segue la priorità: e Gerarchia degli id r Gerarchia di classi e pseudoclassi t Ultima dichiarazione: se le dichiarazioni hanno lo stesso livello di importanza e condividono le stesse proprietà vince l ultima regola dichiarata I fogli di stile a cascata prendono in esame anche il foglio di stile che un utente, tramite il suo browser, può avere personalizzato per sovrascrivere le regole dei siti che naviga.

44 CSS SintASSi 43 Selettori * {} Seleziona tutti gli elementi p {} *.c {} p.c {} #main {} a:link {} a:visited {} a:hover {} a:active {} a:focus {} p:first-letter {} p:first-line {} p:first-child {} Seleziona tutti gli elementi <p> Seleziona tutti gli elementi che hanno la classe="c" Seleziona tutti gli elementi <p> che hanno la classe="c" Seleziona l unico elemento con attributo id="main" Seleziona tutti i link non visitati Seleziona tutti i link visitati Seleziona tutti i link nello stato al passaggio del mouse Seleziona tutti i link nello stato al click del mouse Seleziona tutti i link nello stato focus Seleziona la prima lettera di tutti gli elementi <p> Seleziona la prima linea di tutti gli elementi <p> Seleziona il primo elemento trovato di tutti gli elementi <p> #n *.c :first-line {} Esempio di selettore discendente #n>*.c > :first-line {} #n+*.c + :first-line {} Esempio di selettore figlio Esempio di selettore fratello #n,*.c, :first-line {} Applica un selettore indipendente per ogni dichiarazione separata da (,) *[title] {} *[title~="word"] {} *[title="valore_title"] {} Seleziona tutti gli elementi che contengono l attributo title Seleziona tutti gli elementi che contengono nell attributo title la parola "WORD" Seleziona tutti gli elementi che contengono nell attributo title la dicitura esatta

45 CSS proprietà 44 Proprietà CSS

46 CSS proprietà 45 Proprietà comuni nei Css display visibility float clear position z-index overflow cursor left right width min-width max-width top bottom height min-height max-height margin margin-left margin-right margin-top margin-bottom border border-left border-left-color border-left-width border-left-style border-right border-right-color border-right-width border-right-style border-top border-top-color border-top-width border-top-style border-bottom border-bottom-color border-bottom-width border-bottom-style padding padding-left padding-right padding-top padding-bottom background background-color background-image background-repeat background-attachment background-position text-indent text-align color font font-family font-size font-style font-variant font-weight text-decoration text-transform vertical-align line-height white-space word-spacing letter-spacing direction unicode-bidi list-style list-style-type list-styleposition list-style-image border-collapse table-layout page-break-after page-break-before Alcune proprietà, come widows o outline, sono state volutamente tralasciate.

47 CSS proprietà 46 Proprietà e valori comuni nei Css / e Proprietà display Valore inline, none, block, inline-block, list-item, table-cell, table, table-row i visibility visible, hidden background-color background-image background-repeat background-attachment background-position border border-width border-style border-color transparent, COLOR none, url("file.jpg") repeat, repeat-x, repeat-y, no-repeat scroll, fixed 0% 0%, H%V%, HV, lefttop, leftcenter, leftbottom, right top, right center, right bottom, center top, center center, center bottom WIDTH STYLE COLOR medium, LENGTH, thin, thick none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset black, COLOR La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

48 CSS proprietà 47 Proprietà e valori comuni nei Css / r Proprietà border-left border-left-width border-left-style border-left-color border-right border-right-width border-right-style border-right-color border-top border-top-width border-top-style border-top-color Valore WIDTH STYLE COLOR same as border-width same as border-style same as border-color WIDTH STYLE COLOR same as border-width same as border-style same as border-color WIDTH STYLE COLOR same as border-width same as border-style same as border-color La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

49 CSS proprietà 48 Proprietà e valori comuni nei Css / t Proprietà border-bottom border-bottom-width border-bottom-style border-bottom-color Valore WIDTH STYLE COLOR same as border-width same as border-style same as border-color i cursor auto, default, pointer, help, wait, progress, move, crosshair, text, n-resize, s-resize, e-resize, w-resize La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

50 CSS proprietà 49 Proprietà e valori di contenuto nei Css / e Proprietà padding padding-left padding-right padding-top padding-bottom Valore 0, LENGTH 0, LENGTH 0, LENGTH 0, LENGTH 0, LENGTH i font caption, icon, menu, message-box, small-caption, status-bar i font-family serif, FONTLIST, sans-serif, monospace, fantasy, cursive i font-size i font-style normal, italic, oblique i font-variant normal, small-caps medium, LENGTH, %ParentElementFontSize, xx-small, x-small, smaller, small, large, larger, x-large, xx-large i font-weight normal, lighter, bold, bolder, 100, 200, 300, 400, 500, 600, 700, 800, 900 i text-decoration none, underline, line-through, overline i text-transform none, lowercase, uppercase, capitalize La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

51 CSS proprietà 50 Proprietà e valori di contenuto nei Css / r Proprietà Valore i direction ltr, rtl i unicode-bidi normal, bidi-override, embed i line-height normal, LENGTH, %FontSize, MULTIPLIER i letter-spacing normal, LENGTH i word-spacing normal, LENGTH i white-space normal, pre, nowrap i color #rrggbb, #rgb, rgb(red, GREEN, BLUE), rgb(red%, GREEN%, BLUE%) black, gray, silver, white, red, maroon, purple, fuchsia, lime, green, olive, yellow, blue, navy, teal, aqua, violet, fuschia, red, maroon, black, wheat, gold, orange, tomato, firebrick, lightyellow, yellow, yellowgreen, olive, darkolivegreen, palegreen, lime, seagreen, green, darkgreen, lightcyan, cyan, turquoise, teal, midnightblue, lightskyblue, deepskyblue, royalblue, blue, darkblue, whitesmoke, lightgrey, silver, gray, dimgray, darkslategray La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

52 CSS proprietà 51 Proprietà e valori di layout nei Css / e Float float Applies to all except cells and rows. none, left, right Clear clear Applies to all except inlines, inline-blocks, cells, & rows. none, left, right, both Positioned position left right top bottom z-index Applies to all except cells and rows. static, relative; absolute, fixed auto, LENGTH, %WidthOfContainingBlock auto, LENGTH, %WidthOfContainingBlock auto, LENGTH, %HeightOfContainingBlock auto, LENGTH, %HeightOfContainingBlock auto, INTEGER La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

53 CSS proprietà 52 Proprietà e valori di layout nei Css / r Horizontal Margin margin margin-left margin-right Applies to all except cells and rows. 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto Vertical Margin margin margin-top margin-bottom Applies to all except inlines, cells, and rows. 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto 0, LENGTH, %WidthOfContainingBlock, auto La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

54 CSS proprietà 53 Proprietà e valori di layout nei Css / t Width width min-width max-width Applies to all except inlines and rows. auto, LENGTH, %WidthOfContainingBlock 0, LENGTH, %WidthOfContainingBlock none, LENGTH, %WidthOfContainingBlock Height height min-height max-height Applies to all except inlines and tables. auto, LENGTH, %HeightOfContainingBlock 0, LENGTH, %HeightOfContainingBlock none, LENGTH, %HeightOfContainingBlock Content Layout Applies to all except inlines, tables, and rows. i text-indent 0, LENGTH, %WidthOfContainingBlock i text-align left, center, right, justify overflow visible, hidden, auto, scroll La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

55 CSS proprietà 54 Proprietà e valori specifici nei Css List Applies only to lists. i list-style TYPE POSITION IMAGE i list-style-type disc, circle, square, none, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman i list-style-position outside, inside i list-style-image none, url("file.jpg") Table Applies only to tables. i border-collapse separate, collapse table-layout auto, fixed Cell vertical-align Inline vertical-align Page page-break-after page-break-before Applies only to cells. baseline, bottom, middle, top Applies only to inlines and inline-blocks. baseline, LENGTH, %LineHeight, text-bottom, text-top, middle, top, bottom Applies only to blocks and tables. auto, always, avoid auto, always, avoid La i prima della proprietà indica un elemento di tipo ereditato. Il valore in corsivo indica il valore predefinito. LENGTH rappresenta tutte le proprietà di dimensione: 0, auto, none e tutte le unità di misura (%, px, em, ex, pt, in, cm, mm, pc).

56 CSS LINK 55 Link su HTML e CSS Sito W3C Homepage for CSS W3C CSS 2.1 Specification W3C XHTML 1.0 Specification Mozilla Developer Center Web Design Information Web Design Tutorials Tools CSS Mailing Lists Url developer.mozilla.org/en/docs microformats.org meyerweb.com/eric/css developer.yahoo.com dean.edwards.name/my/cssquery addons.mozilla.org/firefox/60 addons.mozilla.org/firefox/179 css-discuss.org babblelist.com

CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green }

CSS. Cascading Style Sheets. Regola: selezionatore { proprietà : valore } h1 { color : green; } ul { font-style : italic; } H1 { color : green } 1 2 Foglio di stile Cascading Style Sheets CSS Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Regola: selezionatore

Dettagli

Indice delle proprietà. Valori speciali. Compatibilità

Indice delle proprietà. Valori speciali. Compatibilità CSS: sintassi, e valori 29 Valore: 'fontstyle'? 'fontsize' [ /'lineheight' ]? Valore: Valori speciali Nei valori, caratteri come, e / devono essere riportati letteralmente.

Dettagli

Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole

Fogli di stile CSS. Fogli di stile (2) Fogli di stile (3) Introduzione ai CSS. Regole Fogli di stile CSS I fogli di stile permettono la separazione della forma dal contenuto. Il concetto di foglio di stile è quello di creare un documento separato che contenga tutte le informazioni necessarie

Dettagli

HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS.

HTML (Hyper Text Markup Language) CSS (Cascading Style Sheets) HTML: problema sugli stili. HTML: stili. La soluzione: CSS. CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale

Dettagli

Corso di Web Programming

Corso di Web Programming Corso di Web Programming 5. Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso di Laurea in Informatica

Dettagli

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica HTML (Hyper Text Markup Language) linguaggio di descrizione della pagina descrizione testuale

Dettagli

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1

Indice generale. Prefazione alla prima edizione...xvii. Introduzione...xix. Capitolo 1 Gli standard e i CSS... 1 Indice generale Prefazione alla prima edizione...xvii Introduzione...xix Organizzazione dell opera...xx I capitoli...xx Le appendici...xxi Materiale online...xxi A chi si rivolge il libro...xxi Prerequisiti...xxii

Dettagli

SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5. 1.1 Linee guida CSS1 5 1.2 Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7

SOMMARIO. INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5. 1.1 Linee guida CSS1 5 1.2 Linee guida CSS2 5. CAPITOLO 2 7 Fogli di stile 7 Sommario SOMMARIO INTRODUZIONE 4 CAPITOLO 1 5 Linee Guida 5 1.1 Linee guida 1 5 1.2 Linee guida 2 5 CAPITOLO 2 7 Fogli di stile 7 2.1 La sintassi 7 2.2 Ereditarietà degli attributi 7 2.3 Regole di cascading

Dettagli

Basi di Dati. Programmazione e gestione di sistemi telematici

Basi di Dati. Programmazione e gestione di sistemi telematici Basi di Dati. Programmazione e gestione di sistemi telematici Coordinatore: Prof. Paolo Nesi Docenti: Prof. Paolo Nesi Dr.sa Michela Paolucci Dr. Emanuele Bellini Introduzione CSS Cascading Style Sheets

Dettagli

APPUNTI DI HTML (QUINTA LEZIONE)

APPUNTI DI HTML (QUINTA LEZIONE) APPUNTI DI HTML (QUINTA LEZIONE) Cascade style sheets II Web, ai tempi della sua nascita, doveva preoccuparsi maggiormente dei contenuti che diffondeva, piuttosto che allo stile con il quale esso venivano

Dettagli

2.3 Cenni sui fogli di stile CSS per XML

2.3 Cenni sui fogli di stile CSS per XML Fondamenti di Informatica Sistemi di Elaborazione delle Informazioni Informatica Applicata 2.3 Cenni sui fogli di stile CSS per XML Antonella Poggi Anno Accademico 2012-2013 DIPARTIMENTO DI SCIENZE DOCUMENTARIE

Dettagli

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima.

UTILIZZO DEI CSS. categoria e lente possiamo aggregare le istruzioni inserite ed avere infondo alla colonna stessa un anteprima. UTILIZZO DEI CSS FOGLI STILE Il CSS consente di associare regole stilistiche agli elementi del codice HTML come o . Queste regole definiscono l aspetto rappresentativo degli elementi HTML a cui

Dettagli

Introduzione ai fogli di stile CSS

Introduzione ai fogli di stile CSS CdL in Ingegneria Elettronica e Informatica Modulo di Fondamenti di Informatica D Introduzione ai fogli di stile CSS Ing. Maurizio Vincini a.a. 2000/2001 Programmazione CGI - 1 Fogli di stile CSS Il Web

Dettagli

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile

CSS. Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html. ignorare la definizione degli elementi di stile CSS Dott. Nicole NOVIELLI novielli@di.uniba.it http://www.di.uniba.it/intint/people/nicole.html CSS: Cascading Style Sheet! Tecnologia W3C per la definizione dello stile di una pagina web! Contenuto e

Dettagli

Grafica: creare pulsanti con i css.

Grafica: creare pulsanti con i css. Grafica: creare pulsanti con i css. L'articolo originale in lingua inglese Graphics: making buttons with css proviene dal sito eosdev.com ed è stato tradotto e riprodotto per gentile concessione dell'autore.

Dettagli

.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS

.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C. Introduzione ai CSS .ConStile Tutorial Introduzione ai CSS : Indice.ConStile, una guida dedicata all'uso dei CSS per lo sviluppo di siti web leggeri, usabili, conformi agli standard W3C [H] Home > Tutorial > Introduzione

Dettagli

Oreste Signore, Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa

Oreste Signore, <oreste@w3.org> Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa http://www.w3c.it/education/2012/upra/css/#(1) 1 of 63 Oreste Signore, Responsabile Ufficio Italiano W3C Area della Ricerca CNR - via Moruzzi, 1-56124 Pisa Master in Comunicazione e New

Dettagli

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini

Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini STRUTTURA A DUE COLONNE Per l'esercizio preparare una cartella dal nome DUE COLONNE con le sottocartelle css e immagini Un layout a due colonne ha, in genere, la seguente struttura: un'intestazione (TESTATA)

Dettagli

CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A.

CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A. Corso di Laurea Magistrale in Ingegneria Informatica Corso di Linguaggi e Tecnologie Web A. A. 2012-2013 LINGUAGGI E TECNOLOGIE WEB CSS Floriano Scioscia 1 CSS CSS (Cascading Style Sheets, fogli di stile

Dettagli

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento

HTML. Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento HTML Queste slides sono un adattamento di quelle di Luca Anselma, cui va il mio ringraziamento Cenni di HTML Hypertext Markup Language Linguaggio con cui sono scritte le pagine web Permette di realizzare

Dettagli

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas

Fogli di stile CSS. 1 Istituto Italiano Edizioni Atlas Fogli di stile CSS Il foglio CSS (Cascading Style Sheet, foglio di stile a cascata) è un documento in formato testuale che definisce il controllo sulla visualizzazione della pagina HTML e sul suo layout,

Dettagli

Utilizzo dei CSS: regole

Utilizzo dei CSS: regole Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte

Dettagli

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II

Macchine per l elaborazione dell informazion e. Sistemi di Elaborazione delle Informazioni. Informatica II Macchine per l elaborazione dell informazion e Sistemi di Elaborazione delle Informazioni Informatica II Ing. Mauro Iacono Seconda Università degli Studi di Napoli Facoltà di Studi Politici e per l Alta

Dettagli

APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE

APPROCCIO WEB DESIGN REATTIVO: Prima di tutto costruiamo una BASE ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente

Dettagli

Introduzione. In questo capitolo

Introduzione. In questo capitolo Introduzione I CSS ( Cascading Style Sheets, fogli di stile a cascata) sono la tecnologia elaborata dal W3C (World Wide Web Consortium; http://www.w3.org/) per definire l aspetto (caratteri, colori e impaginazione)

Dettagli

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39

Scritto da Enrico Battuello Domenica 20 Febbraio 2011 13:30 - Ultimo aggiornamento Venerdì 07 Dicembre 2012 01:39 Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio

Dettagli

Applicazioni Web 2013/14

Applicazioni Web 2013/14 Applicazioni Web 2013/14 Lezione 5: Cascading Style Sheets Matteo Vaccari http://matteo.vaccari.name/ matteo.vaccari@uninsubria.it (cc) Matteo Vaccari. Published in Italy. Attribution Non commercial Share

Dettagli

Coder Dojo Tutorial 3

Coder Dojo Tutorial 3 Coder Dojo Tutorial 3 Complimenti ancora, son certo che hai già imparato molte più cose di quel che pensi! Tempo per fare qualcosa di un po più divertente, come mettere insieme un foglio dedicato a definire

Dettagli

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER

PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER PROGRAMMA DEL CORSO WEB GRAPHIC DESIGNER Il percorso Web Graphic Designer con Certificazione internazionale Adobe Dreamweaver prepara lo studente ad acquisire solide conoscenze per la figura professionale

Dettagli

Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi:

Linguaggio HTML (2) Attributi di <FONT> Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: Linguaggio HTML (2) Attributi di Per variare lo stile di carattere rispetto al default, si possono utilizzare tre attributi: SIZE= numero per modificare le dimensioni Es:

Dettagli

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE

(A) CONOSCENZA TERMINOLOGICA (B) CONOSCENZA E COMPETENZA (C) ESERCIZI DI COMPRENSIONE Dare una breve descrizione dei termini introdotti: (A) CONOSCENZA TERMINOLOGICA Foglio di stile interno Foglio di stile esterno Fogli di stile incorporati Fogli di stile inline (B) CONOSCENZA E COMPETENZA

Dettagli

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455)

Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Il linguaggio HTML Frammento dalla Bibbia di Gutenberg, il primo libro stampato del mondo occidentale (Mainz 1455) Oggi la tecnologia del World Wide Web consente il trasferimento di documenti qualsiasi

Dettagli

Esercitazioni di HTML

Esercitazioni di HTML Esercitazioni di HTML a cura di Maria Finazzi (23 novembre-1 dicembre 2006) e-mail: maria.finazzi@unipv.it pagine web: Dietro una pagina web Alcuni esempi:

Dettagli

La presentazione accessibile dei contenuti

La presentazione accessibile dei contenuti I fogli di stile CSS La presentazione accessibile dei contenuti Roberto Castaldo rcastaldo@webaccessibile.org Prima dei CSS Il primo Web era tendenzialmente Fondato sui contenuti piuttosto che sul loro

Dettagli

Guida pratica ai CSS

Guida pratica ai CSS Massimiliano Carnevale http://www.maniegrafiche.it Guida pratica ai CSS Come usare da zero i fogli di stile con stile. Alcuni diritti riservati. E' consentita la riproduzione, la distribuzione, l'esposizione

Dettagli

GUIDA ai CSS di BASE. Sommario. GUIDA ai CSS di BASE... 1. I CSS e i documenti (X)HTML... 9. Le regole e la sintassi per scrivere i CSS...

GUIDA ai CSS di BASE. Sommario. GUIDA ai CSS di BASE... 1. I CSS e i documenti (X)HTML... 9. Le regole e la sintassi per scrivere i CSS... GUIDA ai CSS di BASE Sommario GUIDA ai CSS di BASE... 1 I CSS e i documenti (X)HTML... 9 Le regole e la sintassi per scrivere i CSS... 9 Unità di misura, ereditarietà e box model... 9 CSS all'opera: le

Dettagli

Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica. Reti di calcolatori e Internet

Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma. Fondamenti di Informatica. Reti di calcolatori e Internet Agent and Object Technology Lab Dipartimento di Ingegneria dell Informazione Università degli Studi di Parma Fondamenti di Informatica Reti di calcolatori e Internet Michele Tomaiuolo Reti di calcolatori

Dettagli

Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat

Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat Laboratorio di Tecnologie Web CSS Altre tecniche Dott. Stefano Burigat www.dimi.uniud.it/burigat CSS Reset Come abbiamo visto, i browser hanno un loro foglio di stile che viene applicato se non definiamo

Dettagli

HTML 1. HyperText Markup Language

HTML 1. HyperText Markup Language HTML 1 HyperText Markup Language Introduzione ad HTML Documenti HTML Tag di markup Formattazione del testo Collegamenti ipertestuali Immagini Tabelle Form in linea (moduli) Tecnologie di Sviluppo per il

Dettagli

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis

Introduzione. Guida ai fogli di stile (Standard CSS 2) Demis Ballis <demis@dimi.uniud.it> Introduzione Guida ai fogli di stile (Standard CSS 2) Demis Ballis Questo documento è liberamente tratto dalla guida ai CSS di base di Cesare Lamanna, disponibile nella sua versione

Dettagli

Introduzione al Linguaggio HTML

Introduzione al Linguaggio HTML Introduzione al Linguaggio HTML 2 Cosa e l HTML HTML = Hyper Text Markup Language Serve per produrre documenti nel WWW (World Wide Web) Utilizza un insieme predefinito di marcatori (TAG) per definire la

Dettagli

Come creare pagine WEB

Come creare pagine WEB Come creare pagine WEB E' possibile creare pagine WEB secondo diverse modalità: in modo classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle x pagine; questa soluzione poco

Dettagli

01. Conoscere l area di lavoro

01. Conoscere l area di lavoro 01. Conoscere l area di lavoro Caratteristiche dell interfaccia Cambiare vista e dividere le viste Gestire i pannelli Scegliere un area di lavoro Sistemare le barre degli strumenti Personalizzare le preferenze

Dettagli

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER

PROGRAMMA DEL CORSO MASTER WEB DEVELOPER PROGRAMMA DEL CORSO MASTER WEB DEVELOPER Il corso Master Web Developer con Certificazione internazionale Adobe Dreamweaver prepara lo studente a entrare nel mondo dello sviluppo Web (blog, siti, portali).

Dettagli

CSS font-size: pt, px o em? Che unità di misura utilizzare?

CSS font-size: pt, px o em? Che unità di misura utilizzare? CSS font-size: pt, px o em? Che unità di misura utilizzare? In linea di massima possiamo dire che ogni unità di misura ammessa nei CSS ha una destinazione d'uso precisa: pt I punti (pt) sono l'unità di

Dettagli

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità

Maria Grazia Ottaviani. informatica, comunicazione e multimedialità Maria Grazia Ottaviani informatica, comunicazione e multimedialità Unità digitale 1 Ambiente HTML Introduzione Oltre ai linguaggi di programmazione esistono anche linguaggi detti markup. Sono linguaggi

Dettagli

Informatica di Base. Programma Lezioni

Informatica di Base. Programma Lezioni Informatica di Base Lezione III Il linguaggio HTML Hyper Text Markup Language 1 Informatica di Base Programma Lezioni 1 26 ottobre Introduzione Sistema binario e formato dei dati 2 2 novembre Numeri negativi

Dettagli

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013

Architettura a tre livelli. Lo scenario e l ambiente. HTML - Hyper Text Markup Language. Enrico Cavalli. Anno Accademico 2012-2013 HTML - Hyper Text Markup Language Enrico Cavalli Anno Accademico 2012-2013 Lo scenario e l ambiente Architettura a tre livelli 1 Server 6 Web 2 5 3 Php 4 Database Server DB 1. Il browser richiede una pagina

Dettagli

Le sezioni logiche di una pagina web

Le sezioni logiche di una pagina web Le sezioni logiche di una pagina web Il primo passo da fare nella realizzazione di un sito web è pianificare i contenuti. Strutturare logicamente i contenuti di una pagina, creare un template (modello)

Dettagli

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1

Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Manuale scritto da Fuso Federico 4 A Anno scolastico 2011/2012 Parte 1 Chi può riuscire a creare pagine HTML? La realizzazione di pagine web non eccessivamente sofisticate è alla portata di tutti, basta

Dettagli

Sommario. Introduzione... xv. Capitolo 1 Gli elementi di base delle pagine web... 1. Capitolo 2 I file delle pagine web... 27

Sommario. Introduzione... xv. Capitolo 1 Gli elementi di base delle pagine web... 1. Capitolo 2 I file delle pagine web... 27 Sommario Introduzione........................ xv HTML e CSS in breve.................... xvi I browser web....................... xvii Gli standard e le specifiche web............. xviii Il progressive

Dettagli

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW

INTRODUZIONE AL LINGUAGGIO HTML. Internet + HTML + HTTP = WWW 1 INTRODUZIONE AL LINGUAGGIO HTML Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML 3 Architettura

Dettagli

Attribuzione. Devi riconoscere la paternità dell'opera all'autore originario. Non commerciale. Non puoi utilizzare quest'opera per scopi commerciali.

Attribuzione. Devi riconoscere la paternità dell'opera all'autore originario. Non commerciale. Non puoi utilizzare quest'opera per scopi commerciali. Tutorial per siti scolastici home page con xhtml strict Autori Questa guida è stata realizzata dal Progetto Porte Aperte sul Web dell USR Lombardia con la collaborazione di: - Alberto Ardizzone, prima

Dettagli

Costruzione di un sito web - HTML

Costruzione di un sito web - HTML Costruzione di un sito web - HTML Obiettivi. Presentare le caratteristiche di un sito Web ed i concetti base per la sua costruzione: fasi di realizzazione e linguaggio HTML. Illustrare gli elementi fondamentali

Dettagli

Attribuzione. Devi riconoscere la paternità dell'opera all'autore originario. Non commerciale. Non puoi utilizzare quest'opera per scopi commerciali.

Attribuzione. Devi riconoscere la paternità dell'opera all'autore originario. Non commerciale. Non puoi utilizzare quest'opera per scopi commerciali. Tutorial per siti scolastici guida corso A aprile 2006 Autori Questa guida è stata realizzata dal Progetto Porte Aperte sul Web dell USR Lombardia. Gli autori, Alberto Ardizzone e Sandra Farnedi, si sono

Dettagli

Manuale d uso Editor WYSIWYG

Manuale d uso Editor WYSIWYG Manuale d uso Editor WYSIWYG 1 1. L EDITOR FCKEDITOR L editor utilizzato nel sistema di content managment system è fckeditor. Questo strumento permette di creare e modificare la pagina in maniera visuale

Dettagli

Cimini Simonelli - Testa

Cimini Simonelli - Testa WWW.ICTIME.ORG HTML Manuale introduttivo al linguaggio HTML Cimini Simonelli - Testa v.2-11/01/2008 Sommario Introduzione... 3 Formattazione della pagina... 4 Inserire un colore di sfondo... 4 Inserire

Dettagli

Verifica di Accessibilità del sito www.aots.sanita.fvg.it

Verifica di Accessibilità del sito www.aots.sanita.fvg.it Verifica di Accessibilità del sito www.aots.sanita.fvg.it NOTE: Verifica effettuata in base ai requisiti descritti nell allegato A del Decreto Ministeriale 8 luglio 2005, ai sensi della legge n.4 del 9

Dettagli

CSS Settembre 2005 www.html.it

CSS Settembre 2005 www.html.it CSS Settembre 2005 www.html.it CSS... 1 INTRODUZIONE... 6 A COSA SERVONO... 6 GUIDA ALLA CONSULTAZIONE... 6 CLASSIFICAZIONE DEGLI ELEMENTI... 8 ELEMENTI BLOCCO E ELEMENTI IN LINEA... 8 ELEMENTI RIMPIAZZATI

Dettagli

Comandi principali del linguaggio HTML (Hyper Text Markup Language)

Comandi principali del linguaggio HTML (Hyper Text Markup Language) Comandi principali del linguaggio HTML (Hyper Text Markup Language) Caratteristiche di HTML HTML è un linguaggio di formattazione (markup) di documenti ed è il linguaggio base per produrre documenti per

Dettagli

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0

EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 EUROPEAN COMPUTER DRIVING LICENCE WEB EDITING - Versione 2.0 Copyright 2010 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

PROGRAMMA DEL CORSO WEB DESIGN

PROGRAMMA DEL CORSO WEB DESIGN PROGRAMMA DEL CORSO WEB DESIGN Durante il corso di Web Design potrai apprendere le tematiche inerenti la progettazione, la realizzazione grafica, il montaggio, e le attività di promozione online, con un

Dettagli

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

HTML e XML. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori HTML e XML Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto

HTML (HyperText Markup Language) significa linguaggio di contrassegni per ipertesto HTML5 Nel seguito troverai una breve introduzione agli elementi essenziali di HTML 5, non si tratta di una guida completa. Se conosci una precedente versione di HTML forse noterai alcune differenze. La

Dettagli

Elementi di web design (parte I): introduzione all HTML

Elementi di web design (parte I): introduzione all HTML Elementi di web design (parte I): introduzione all HTML Luca Casotti E' necessario conoscere: Filesystem: cos'è un file e cos'è una cartella. Differenze fra tipi di file (sui sistemi windows: le estensioni

Dettagli

Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori

Javascript. Politecnico di Milano Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Javascript Politecnico di Facoltà del Design Bovisa Elementi di Informatica e Reti di calcolatori Ing. Claudio Menghi Dipartimento di Elettronica e Informazione menghi@elet.polimi.it http://home.dei.polimi.it/menghi

Dettagli

Manuali.net. Nevio Martini

Manuali.net. Nevio Martini Manuali.net Corso base per la gestione di Siti Web Nevio Martini 2009 Il Linguaggio HTML 1 parte Introduzione Internet è un fenomeno in continua espansione e non accenna a rallentare, anzi è in permanente

Dettagli

Modulo 1: Fondamenti per scrivere una pagina web

Modulo 1: Fondamenti per scrivere una pagina web Modulo 1: Fondamenti per scrivere una pagina web Indice del modulo Introduzione al linguaggio di marcatura Contenuto, struttura, presentazione Elementi e attributi Proviamo a scrivere una pagina HTML Aggiungere

Dettagli

Andrea Vaccari. Il mio sito CREARE UN SITO WEB PARTENDO DA ZERO VOLUME 1. Estratto. I linguaggi HTML e CSS e il Design Responsivo.

Andrea Vaccari. Il mio sito CREARE UN SITO WEB PARTENDO DA ZERO VOLUME 1. Estratto. I linguaggi HTML e CSS e il Design Responsivo. Andrea Vaccari Il mio sito CREARE UN SITO WEB PARTENDO DA ZERO VOLUME 1 Estratto I linguaggi HTML e CSS e il Design Responsivo Informatica Andrea Vaccari: Il mio sito - Creare un sito web partendo da zero.

Dettagli

Il linguaggio HTML - Parte 2

Il linguaggio HTML - Parte 2 Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 2 Dott. Chiara Braghin braghin@dti.unimi.it Elenchi all interno di Un elenco è una sequenza

Dettagli

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio

Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Il linguaggio HTML Laboratorio Matematico Informatico 2 Matematica specialistica Pierluigi Amodio Dipartimento di Matematica Università di Bari Il linguaggio HTML p. 1/3 HTML L HTML è il linguaggio (di

Dettagli

HTML (Hyper Text Markup Language)

HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) E un linguaggio di scrittura di pagine per Internet (pagine web) nato nel 1992. E un linguaggio di marcatura ipertestuale Non è un linguaggio di programmazione, in quanto

Dettagli

Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96

Creare classi e ID per applicare gli stili, pagina 93. Applicare gli stili a collegamenti ipertestuali, pagina 96 Panoramica del capitolo Creare classi e ID per applicare gli stili, pagina 93 Applicare gli stili a collegamenti ipertestuali, pagina 96 Creare e collegare fogli stile esterni, pagina 98 6 Introduzione

Dettagli

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css.

La pagina Web modulo.html utilizza le specifiche di stile descritte nel foglio feedback.css. Moduli di feedback Uno degli strumenti per l interattività con gli utenti è la pagina per raccogliere suggerimenti o commenti dai visitatori, formata da moduli sul video da riempire con il nome del mittente,

Dettagli

Primi passi con HTML. Il documento HTML

Primi passi con HTML. Il documento HTML Primi passi con HTML. Il documento HTML La mia prima pagina in HTML Questo è il corpo del documento che stiamo realizzando. Questa non è una nuova riga.

Dettagli

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup)

Cos è HTML. Hypertext Markup Language non è un linguaggio di programmazione. linguaggio 'di marcatura (Markup) HTML Olga Scotti Cos è HTML Hypertext Markup Language non è un linguaggio di programmazione non ha meccanismi che consentono di prendere delle decisioni non è in grado di compiere delle iterazioni linguaggio

Dettagli

Il linguaggio HTML - Nozioni di base

Il linguaggio HTML - Nozioni di base Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base Dott. Chiara Braghin braghin@dti.unimi.it What is HTML? HTML (HyperText Markup Language)

Dettagli

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio

HTML, XHTML, CSS. cosa c è dietro al web. Informatica Applicata Prof.Emanuela Zilio HTML, XHTML, CSS cosa c è dietro al web 1 HTML cos è NON è un linguaggio di programmazione ma un linguaggio di contrassegno (o 'di marcatura'), che permette di indicare come disporre gli elementi all'interno

Dettagli

Tecniche di buona progettazione di pagine web

Tecniche di buona progettazione di pagine web Tecniche di buona progettazione di pagine web Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Quali font scegliere? non usare mai più di 3 o 4 font diversi per pagina

Dettagli

2. CLASSIFICAZIONE DEGLI ELEMENTI...7

2. CLASSIFICAZIONE DEGLI ELEMENTI...7 Materiale concesso da HTML.it: http://www.html.it Tutti i capitoli sono a cura di : Cesare Lamanna Rispetto al corso originale presente sul sito sono stati tolti alcuni paragrafi (sul sito denominati lezione)

Dettagli

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti

Modulo ECDL WEBSTARTER. Obiettivi del modulo. Categoria Skill set Rif. Task Item. 1.1 Il web - Concetti. 1.2 HTML 1.2.1 Fondamenti EUROPEAN COMPUTER DRIVING LICENCE WEBSTARTER - Versione 1.5 Copyright 2009 The European Computer Driving Licence Foundation Ltd. Tutti I diritti riservati. Questa pubblicazione non può essere riprodotta

Dettagli

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1)

Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Cenni storici sul web (Internet) Fondamenti di Informatica II 28. Elementi di programmazione web e linguaggi di script (1) Web significa letteralmente ragnatela Avviato nel 1989 (Tim Berners-Lee) come

Dettagli

Realizzare il layout di un sito web senza utilizzare frame e tabelle

Realizzare il layout di un sito web senza utilizzare frame e tabelle Realizzare il layout di un sito web senza utilizzare frame e tabelle Questa guida descrive in maniera semplice e essenziale i passi necessari alla realizzazione di una pagina web strutturata in maniera

Dettagli

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti

Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti COMUNE DI GALLARATE Settore Risorse Economiche e Finanziarie Centro Elaborazione Dati Accessibilità sito internet dell Ente e obiettivi anno 2014 e seguenti Dichiarazione di accessibilità Il sito del Comune

Dettagli

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine

Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine Universita' degli Studi di Udine, 6 luglio 2005 Introduzione all'accessibilita': motivazione ed esempi Il sito web del Comune di Udine www.comune.udine.it relazione a cura di Fabrizio Chittaro fchittaro@gmail.com

Dettagli

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web.

- La formattazione con foglio di stile esterno: Come realizzare e collegare un file con codice di stile ad una pagina web. I fogli di stile. Argomenti trattati: - La formattazione con foglio di stile interno: Come dichiarare lo stile di una pagina web all'interno del suo codice. - Ereditarietà e selettori contestuali: Come

Dettagli

Pagine HTML. Concetti chiave. G.1 Tag. Basi del linguaggio HTML Realizzare semplici pagine HTML

Pagine HTML. Concetti chiave. G.1 Tag. Basi del linguaggio HTML Realizzare semplici pagine HTML Pagine HTML G Concetti chiave Basi del linguaggio HTML Realizzare semplici pagine HTML G.1 Tag Accludiamo questa appendice al fine di dare al lettore non esperto della materia gli elementi di base necessari

Dettagli

Richiami sugli elementi del linguaggio HTML

Richiami sugli elementi del linguaggio HTML Richiami sugli elementi del linguaggio HTML Un documento in formato Web può essere aperto con un browser, attraverso un collegamento a Internet oppure caricandolo dal disco del proprio computer senza connettersi

Dettagli

Il linguaggio HTML - Nozioni di base (2)

Il linguaggio HTML - Nozioni di base (2) Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Nozioni di base (2) Dott. Chiara Braghin braghin@dti.unimi.it TAG strutturali visti fino ad ora -

Dettagli

Tutorial di HTML basato su HTML 4.0 e CSS 2

Tutorial di HTML basato su HTML 4.0 e CSS 2 Claudia Picardi Tutorial di HTML basato su HTML 4.0 e CSS 2 Informatica II per Scienze e Turismo Alpino Docenti: Viviana Patti e Claudia Picardi 4 Tabelle 4.1 La struttura di una tabella Elementi principali

Dettagli

Guida Html.

L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.

Guida Html. </P> L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo. Struttura di un tag Guida Html Abbiamo detto che all'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della

Dettagli

Analisi Accessibilità Diagnosi funzionale Ver. 1.0

Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Analisi Accessibilità Diagnosi funzionale Ver. 1.0 Rapporto conclusivo di accessibilità... 2 Sommario della verifica tecnica e requisiti tecnici di accessibilità delle applicazioni basate su tecnologie

Dettagli

Creare un Ipertesto. www.vincenzocalabro.it 1

Creare un Ipertesto. www.vincenzocalabro.it 1 Creare un Ipertesto www.vincenzocalabro.it 1 Obiettivi Il corso si prefigge di fornire: Le nozioni tecniche di base per creare un Ipertesto I consigli utili per predisporre il layout dei documenti L illustrazione

Dettagli

Requisiti 19, 20, 21, 22

Requisiti 19, 20, 21, 22 Requisiti 19, 20, 21, 22 Pubblicato da Roberto Castaldo il giorno 15 ottobre 2007 Requisito 19 Enunciato: Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi

Dettagli

Relazione sulla verifica accessibilità

Relazione sulla verifica accessibilità Relazione sulla verifica accessibilità Sito web: www.comune.stresa.vb.it Premessa Il presente rapporto e l effettiva attività di controllo requisiti per l accessibilità, sono stati effettuati seguendo

Dettagli

INTRODUZIONE ALL HTML

INTRODUZIONE ALL HTML INTRODUZIONE ALL HTML LE REGOLE GENERALI Di seguito, sono raccolti i tag html (comandi) di uso più frequente per la formattazione dei testi e la gestione di una pagina web all interno del nostro sistema

Dettagli

Dichiarazione di Accessibilità

Dichiarazione di Accessibilità Dichiarazione di Accessibilità Il sito web del comune è stato progettato e realizzato con particolare attenzione a quanto prescritto dalla Legge 4/2004 (cosiddetta Legge Stanca ), contenente "Disposizioni

Dettagli

HTML 1 AVVISO. Terminologia. Introduzione ad HTML. HyperText Markup Language

HTML 1 AVVISO. Terminologia. Introduzione ad HTML. HyperText Markup Language HTML 1 HyperText Markup Language AVVISO Martedì 4 ottobre in laboratorio ci saranno 2 turni: 11:00 12:15 matricole pari 12:30 13:45 matricole dispari Introduzione ad HTML Documenti HTML Tag di markup Formattazione

Dettagli