CSS LINGUAGGI E TECNOLOGIE WEB. Corso di Laurea Magistrale in Ingegneria Informatica. Corso di Linguaggi e Tecnologie Web A. A.
|
|
|
- Severina Fabia Fabbri
- 8 anni fa
- Visualizzazioni
Transcript
1 Corso di Laurea Magistrale in Ingegneria Informatica Corso di Linguaggi e Tecnologie Web A. A LINGUAGGI E TECNOLOGIE WEB CSS Floriano Scioscia 1
2 CSS CSS (Cascading Style Sheets, fogli di stile in cascata) costituisce uno dei fondamentali standard del W3C I fogli di stile sono stati progettati per consentire un controllo preciso di caratteristiche legate all'aspetto con cui è presentato un documento HTML od XML Tutte queste caratteristiche vengono così separate dal contenuto vero e proprio del documento La peculiarità è nella parola "cascading": è prevista (ed incoraggiata) la presenza di più fogli di stile, che agiscono uno dopo l'altro, in cascata CSS è indipendente da un particolare insieme di elementi ed attributi HTML, cosicché potrà supportare facilmente nuove versioni del linguaggio CSS - Floriano Scioscia 2
3 Versioni di CSS CSS level 1 o CSS1 (dicembre 1996) è stato concepito come un linguaggio di formattazione visiva permette di specificare caratteristiche tipografiche e di presentazione per gli elementi di un documento HTML destinato ad essere visualizzato CSS level 2 (raccomandazione W3C maggio 1998, versione 2.1 del luglio 2007) supporto per diversi media (es. fogli di stile audio per documenti destinati alla lettura di una voce computerizzata) un linguaggio di layout sofisticato e complesso CSS level 3 (specifiche suddivise in moduli) Le versioni più recenti dei Web browser più diffusi (IE 8+, Firefox 3+, Safari, Opera, Chrome) supportano completamente CSS 2.1 Il supporto a CSS 3 è ancora molto frammentario CSS - Floriano Scioscia 3
4 Integrare HTML e CSS HTML consente l'uso di un foglio di stile CSS in quattro modi diversi: 1. come attributo nel tag di un particolare elemento HTML N.B. è consigliabile non abusare di questa possibilità, per mantenere la separazione tra presentazione e contenuto 2. descritto nell'intestazione del documento mediante il tag style 3. importato da un file esterno mediante il tag style 4. indicato dal tag link nell'intestazione del documento E' inoltre possibile assegnare gli stili agli elementi HTML in tre modi: 1. a tutti gli elementi di un certo tipo (in base al nome dell'elemento) 2. a tutti gli elementi di una certa categoria (identificati dal valore dell'attributo class) 3. ad uno specifico elemento (identificato dal valore dell'attributo id) CSS - Floriano Scioscia 4
5 Uso dell'attributo style <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>esempio di utilizzo 1</title> </head> <body> <h1 style="color:red;"> utilizzo dei css </h1> <p> questo esempio mostra come modificare il colore del testo con l attributo style </p> </body> </html> CSS - Floriano Scioscia 5
6 Uso del tag style <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>esempio di utilizzo 2</title> <style type="text/css" media="screen"> h1 {color:blue; </style> </head> <body> <h1>uso dei CSS</h1> <p> Questo esempio mostra come modificare il colore del testo usando il tag style </p> </body> </html> Tipo di supporto di riproduzione a cui è destinato lo stile. Alcuni valori possibili: - screen (monitor di computer) - tv (televisore) - handheld (palmare) - print (stampa cartacea) - braille (tastiere Braille per non vedenti) - aural (lettura con voce computerizzata) - all (tutti i media possibili) CSS - Floriano Scioscia 6
7 Uso della <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>esempio di utilizzo 3</title> <style url(miostile.css) </style> </head> <body> <h1>uso dei CSS</h1> <p> Questo esempio mostra come modificare il colore del testo usando il tag style con la direttiva import </p> </body> miostile.css </html> h1 { color: blue; CSS - Floriano Scioscia 7
8 Riferimento mediante tag link <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title>esempio di utilizzo 4</title> <link type="text/css" rel="stylesheet" href="./miostile.css" /> </head> <body> <h1>uso dei CSS</h1> <p> Questo esempio mostra come applicare un foglio di stile usando il tag link </p> </body> miostile.css </html> h1 { color: blue; CSS - Floriano Scioscia 8
9 Sintassi CSS 1 Proprietà una caratteristica di stile assegnabile ad un elemento CSS1 prevede 53 proprietà diverse, CSS2 ben 121! color, font-family, margin, etc. Statement assegnazione di una proprietà CSS. Ha la sintassi proprietà: valore Esempi: color: blue; font-family: arial, verdana, sans-serif; border: 1px #cdcdcd dashed; CSS - Floriano Scioscia 9
10 Sintassi CSS 2 Selettore specifica un elemento o una classe di elementi HTML (o XML) al fine di associarvi caratteristiche CSS h1, p.heading, td[valign] Regola un blocco di statement associati ad un elemento attraverso l'uso di un selettore. Ha la sintassi selettore { statement1; statement2; h1 { color: blue; font-family: arial, verdana, sans-serif; Commento è possibile inserire un commento racchiuso fra i simboli /* e */ /* Il mio primo commento */ CSS - Floriano Scioscia 10
![heading, td[valign] Regola un blocco di statement associati ad un elemento attraverso l'uso di un selettore.](/docs-images/42/7172314/images/page_10.jpg "Ha la sintassi selettore { statement1; statement2; h1 { color: blue; font-family: arial, verdana, sans-serif; Commento")
11 Selettori CSS 1 Selettore di tipo ( e ) seleziona tutti gli elementi e Esempi body { color: blue; font-family: arial, verdana, sans-serif; font-size: 12pt; margin: 15px; h1 { color: red; font-size: 18pt; Selettori di prossimità ( e f, e > f, e + f ) selezionano gli elementi f che siano rispettivamente discendenti, figli diretti o immediatamente successivi ad elementi e p a { color: #008082; a > strong { font-weight: bold; h3 + table { margin:10px; border: 2px double red; CSS - Floriano Scioscia 11
12 Selettori CSS 2 Selettori di attributi ( e[foo] e[foo="bar"] ) selezionano solo gli elementi e che posseggono l'attributo specificato o in cui esso ha il valore indicato a[href=" { color:red Selettori di classe ( e.c.c e#id ) il primo equivale a e[class="c"] il secondo seleziona tutti gli elementi di classe c, qualsiasi sia il tipo il terzo equivale a e[id="id"] h1.heavy { color: red; font-weight: bold;.content { color: black; font: monospaced; p#note { color: gray; font-size: 9pt; CSS - Floriano Scioscia 12
13 Selettori CSS 3 Selettore di pseudoelemento ( e:pe ) è attivo solo in corrispondenza di una parte di ciascun elemento e before / after: vero prima/dopo il contenuto dell'elemento e first-line / first-letter: vero per la prima riga / lettera nell'elemento e p:first-letter { font-size: 300%; font-family: "script"; float: left; margin: -5px 3px 0 0; CSS - Floriano Scioscia 13
14 Selettori CSS 4 Selettore di pseudoclasse ( e:condition ) seleziona un elemento solo se è verificata la condizione first-child: vero se l'elemento è il primo figlio di e link, visited: vero se l'elemento e è, rispettivamente, un link non ancora visitato o un link già visitato hover, active, focus: vero se, rispettivamente, sull'elemento e passa il mouse, il mouse è premuto, o l'elemento è selezionato per accettare input lang(c): vero se per l'elemento e è specificata la lingua c a:hover { color: red; text-decoration: none; Simboli speciali: * (asterisco): selettore universale (seleziona tutti gli elementi), (virgola): raggruppamento di selettori (più selettori possono usare lo stesso blocco di statement se separati da virgola) CSS - Floriano Scioscia 14
15 Tipi di dato 1 CSS prevede diversi tipi di dato per le proprietà di stile In generale un browser tende ad ignorare, se possibile, una proprietà di stile mal definita Tipi di dato Interi e reali: rappresentano numeri assoluti Lunghezze: dimensioni espresse mediante una unità di misura px: pixel pt: punto tipografico, corrisponde a 1/72 di pollice, pari a circa 0,353 mm (molto usato per specificare la dimensione dei font, e.g. 12pt) em: unità di misura tipografica relativa (1 em corrisponde all'altezza in punti tipografici del font attualmente usato) % : misura espressa in percentuale di spazio del blocco contenente, o dell'intera area visibile della pagina per l'elemento body mm, cm, in: dimensione assoluta in millimetri, centimetri o pollici CSS - Floriano Scioscia 15
16 Tipi di dato 2 Altri tipi di dato utilizzabili nei CSS URI: fa riferimento ad una risorsa in rete. Sintassi url( ) Colore: specificabile in tre modi nome per uno tra 16 colori predefiniti tra cui red, blue, white, silver RGB: ognuna delle tre componenti (rossa, verde, blu) è un intero da 0 a 255, e.g. rosso puro è rgb(255,0,0) notazione esadecimale #rrggbb, e.g. rosso puro è #ff0000 Stringa: una stringa posta tra virgolette semplici o doppie. Si usa la barra rovesciata per includere le virgolette nella stringa "Ho detto: \"Ciao\"." CSS - Floriano Scioscia 16
17 Box model 1 Nel layout di un documento HTML, ogni elemento occuperà un blocco (box) rettangolare sullo schermo in fase di visualizzazione ne vengono calcolati posizione, dimensioni e le altre caratteristiche definite nei fogli di stile in base al box model riportato a lato CSS - Floriano Scioscia 17
18 Box model 2 Margin: la regione che separa un blocco dall'altro, necessariamente trasparente margin-top, margin-bottom, margin-left, margin-right: dimensioni del margine del blocco notazione abbreviata: margin: t r b l; Border: il bordo di un blocco border-top, border-bottom, border-left, border-right, border-width: dimensioni del bordo border-color: colore del bordo; border-style: può assumere i valori none, dotted, dashed, solid, double, groove, ridge, inset, outset. notazione abbreviata: border: dim color style; CSS - Floriano Scioscia 18
19 Box model 3 Padding: spazio vuoto fra il bordo del blocco ed il suo contenuto. Ha lo stesso sfondo del contenuto padding-top, padding-bottom, padding-left, padding-right: dimensioni del padding del blocco notazione abbreviata: padding: t r b l; Content: la regione in cui sta il contenuto dell'elemento background-color, background-image, background-repeat, background-attachment, background-position: colore, immagine e meccanismo di ripetizione dell'immagine di sfondo del blocco CSS - Floriano Scioscia 19
20 Posizionamento dei box 1 Un riquadro contenuto all interno di un altro blocco è associato gerarchicamente al genitore Quattro possibili disposizioni dei blocco flusso verticale: ogni blocco va a nuova riga (e.g. paragrafi, tabelle) flusso orizzontale (inline), e.g. singole parole, elementi <a></a> fluttuante (float): un blocco allineato all'estrema sinistra / destra all'interno del suo genitore; può essere affiancato da altri blocchi posizionamento assoluto: disposizione dei blocchi sullo schermo; è indipendente dal flusso e può sovrapporsi ad altri blocchi E' possibile inserire un nuovo blocco con flusso verticale mediante il tag div E' possibile inserire un nuovo inline mediante il tag span CSS - Floriano Scioscia 20
21 Posizionamento dei box 2 display ( inline block list-item run-in none ) tipo di box da utilizzare per l'elemento: un blocco, un inline, una lista, una cella di tabella, etc. position ( static relative absolute fixed ) posizionamento rispetto al flusso del documento float ( left right none ) definisce un box fluttuante z-index la posizione del box sull'asse z, perpendicolare allo schermo. Il valore più alto è più vicino al lettore, e quindi nasconde i blocchi sottostanti. Il valore predefinito è 0 N.B.: per default lo sfondo di un box è trasparente top, bottom, left, right: coordinate del box width, height: dimensioni usabili invece di right e bottom CSS - Floriano Scioscia 21
22 Visibilità dei box Diversi modi di alterare la visibilità di un box display: none Esclude il box dal layout della pagina, come se l'elemento non esistesse affatto nel documento visibility ( visible hidden ) Rende visibile o invisibile il box (bordo, padding e contenuto), ma esso occupa sempre il suo spazio nel layout della pagina opacity Indica il grado di trasparenza con cui è disegnato il box, da 0. (completamente trasparente) a 1. (nessuna trasparenza) Variando queste proprietà tramite Javascript, possono essere realizzate applicazioni Web con GUI (graphical user interface) modificabili CSS - Floriano Scioscia 22
23 Box model esempio 1... <link type="text/css" rel="stylesheet" href="./css_1.css" />... <div id="uno"> Primo blocco. Notare padding e width. </div> <div id="due"> Secondo blocco. Notare l'effetto di margin e padding. <span style="background-color:cyan;"> Questa linea ha uno sfondo diverso. </span> </div> <div id="tre"> Riquadro con posizionamento assoluto, può sovrapporsi agli altri </div>... css_1.css #uno { background-color: blue; padding: 25px; width: 80%; color: white; #due { margin: 25px; border: 2px red dashed; padding: 0px; width: 300px; #tre { background-color: gold; position: absolute; top: 60px; left: 320px; width: 150px; height: 110px; padding: 2px; text-align: right; CSS - Floriano Scioscia 23
24 Box model esempio 2... <link type="text/css" rel="stylesheet" href="./css_2.css" />... <div id="uno"> Primo blocco. Notare padding e width. </div> <div id="due"> Secondo blocco. Notare l'effetto di margin e padding. <span style="background-color:cyan;"> Questa linea ha uno sfondo diverso. </span> </div> <div id="tre"> Riquadro con posizionamento assoluto, può sovrapporsi agli altri </div>... css_2.css #uno { background-color: blue; padding: 25px; width: 80%; color: white; #due { margin: 10px; border: 10px red dashed; padding: 0px; width: 300px; #tre { z-index: -1; background-color: gold; position: absolute; top: 60px; left: 320px; width: 150px; height: 110px; padding: 2px; text-align: right; CSS - Floriano Scioscia 24
25 Box model esempio 3... <link type="text/css" rel="stylesheet" href="./css_3.css" />... <div id="uno"> Primo blocco. Notare padding e width. </div> <div id="due"> Secondo blocco. Notare l'effetto di margin e padding. <span style="background-color:cyan;"> Questa linea ha uno sfondo diverso. </span> </div> <div id="tre"> Riquadro con posizionamento assoluto, può sovrapporsi agli altri </div>... css_3.css #uno { background-color: blue; padding: 25px; width: 80%; color: white; display: none; #due { margin: 10px; border: 10px red dashed; padding: 0px; width: 300px; opacity: 0.5; #tre { z-index: -1; background-color: gold; position: absolute; top: 60px; left: 320px; width: 150px; height: 110px; padding: 2px; text-align: right; CSS - Floriano Scioscia 25
26 Stile dei font 1 font-family: indica il nome del font da utilizzare per il testo e le alternative nel caso in cui il font non sia presente nella macchina ospite. E' buona norma indicare come ultima alternativa un carattere standard quali: serif (con grazie), sans-serif (senza grazie), monospaced (larghezza fissa) Nota: le grazie sono quegli abbellimenti tipografici delle lettere, che dovrebbero servire a rendere più leggibile il testo Esempio p { font-family: "tahoma" "arial" sans-serif; font-style (normal italic oblique): imposta in corsivo o in obliquo un testo font-variant (normal small-caps): il valore small-caps crea l'effetto maiuscoletto, normal non introduce variazioni CSS - Floriano Scioscia 26
27 Stile dei font 2 font-size: specifica le dimensioni del font; 4 modi possibili grandezze assoluta in un insieme di valori predefiniti (xx-small x-small small medium large x-large xx-large) grandezza assoluta in punti, e.g. font-size: 12pt; grandezza relativa alle dimensioni predefinite del testo nel blocco contenitore (smaller larger) grandezza percentuale rispetto al valore predefinito per il testo nel blocco contenitore, e.g. font-size: 110%; font-weight (normal bold bolder lighter ) specifica il peso del font, cioè quanto è marcato il tratto bolder e lighter sono relativi al valore predefinito gli altri valori sono pesi assoluti è una scala che va dal peso minimo al massimo; non tutti i valori da 100 a 900 sono disponibili per tutti i font, il peso effettivamente adottato sarà il più vicino disponibile CSS - Floriano Scioscia 27
28 Stile del testo text-indent: imposta l indentazione in valore assoluto o percentuale text-align (left right center justify): imposta l allineamento del testo nel blocco di riferimento line-height: permette di impostare l'interlinea text-decoration (none underline overline line-through blink): permette di decorare il testo i possibili valori sono: non decorato, sottolineato, sopralineato, cancellato, lampeggiante letter-spacing e word-spacing: spaziatura tra lettere e tra parole, specificata in valore assoluto, e.g. letter-spacing: 1em relativo al valore predefinito, e.g. word-spacing: +0.2em CSS - Floriano Scioscia 28
29 Tabelle CSS permette di definire regole sofisticate per gli elementi di una tabella gruppi di colonne, colonne, gruppi di righe, righe e singole celle hanno proprietà analoghe a quelle del box model per i blocchi CSS - Floriano Scioscia 29
30 Tabelle - esempio Applichiamo il seguente foglio di stile all'esempio di tabella visto nelle slide su HTML: table { width: 100%; background-color: #ffb400; border: 10px double black; font-family: "Forte" serif; table caption { color: green; font-size: 150%; font-variant: small-caps; td { color: blue; background-color: #ffff80; text-align: center; padding: 5px; CSS - Floriano Scioscia 30
31 Ereditarietà delle proprietà Se non viene specificata una proprietà, CSS assume un valore predefinito che generalmente corrisponde a "inherit", cioè eredita la proprietà dal contenitore in cui è inserito l elemento <p style="color:red;"> Questo testo è rosso. <em> Questo testo è rosso e corsivo, <span style="color: blue;"> mentre questo testo è blu e corsivo. </span> </em> </p> CSS - Floriano Scioscia 31
32 Layout di pagina in puro CSS 1 Esempio CSS - Floriano Scioscia 32
33 Layout di pagina in puro CSS 2 Il documento HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title> Creazione di un layout solo con CSS senza tabelle </title> <style url(layout1.css); </style> </head> <body> <div class="container"> <div class="header"> <h1>1. Area dell'intestazione</h1> </div> <div class="menu"> <p>2. Area del menu principale</p> </div> CSS - Floriano Scioscia 33
34 Layout di pagina in puro CSS 3 Il documento HTML (continua) <div class="menubar"> <p>3. Menu laterale</p> <ul> <li><a href="#">home Page</a></li> <li><a href="#">voce menu 1</a></li> <li><a href="#">voce menu 2</a></li> </ul> </div> <div class="content"> <p>4. Contenuto principale [...]</p> </div> <div class="trailer"> 5. Area di coda della pagina </div> </div> </body> </html> CSS - Floriano Scioscia 34
35 Layout di pagina in puro CSS 4 Il foglio di stile body { font-family: "century schoolbook", "times new roman", serif; div.container { /* Stile del contenitore principale */ width: 90%; margin:.5em auto; /* centra in browser diversi da IE*/ border: 1px solid black; text-align: left; background: yellow; /* come il blocco float per il menu laterale */ h1 { margin: 0px; padding: 0px; color: white;.header { /* Stile dell'header del documento */ padding: 1em; background: #99B7DB; border-bottom: 1px solid black; CSS - Floriano Scioscia 35
36 Layout di pagina in puro CSS 5 Il foglio di stile (continua).menu { /* Stile del menu principale */ background: green; margin-bottom: 0px; padding-top:.5em; text-align: center; border-bottom: 1px solid black;.menubar { /* Stile del menu laterale */ float: left; width: 20%; margin-top: 0px; background: yellow;.menubar ul { list-style-type: none; margin-left: 0px; padding-left: 1em; CSS - Floriano Scioscia 36
37 Layout di pagina in puro CSS 6 Il foglio di stile (continua).menubar a:hover { color: red;.menubar a { text-decoration: none; /* link non sottolineati nel menu */ font-weight: bold;.content { /* Stile del corpo del testo */ background: white; margin-left: 20%; padding: 1em; border-left: 1px solid black; CSS - Floriano Scioscia 37
38 Layout di pagina in puro CSS 7 Il foglio di stile (continua).trailer { /* Stile del footer del documento */ clear: both; /* evita blocchi float ai lati */ margin: 0px; padding:.5em; background: #99b7db; font-size: 75%; text-align: right; border-top: 1px solid black; CSS - Floriano Scioscia 38
39 Stili in cascata E' possibile definire più regole per gli stessi elementi; sono applicate con un meccanismo a cascata. Nell'ordine: User Agent: il browser definisce (esplicitamente come preferenze utente o implicitamente codificandole nel software) regole di stile predefinite per gli elementi dei documenti User: se il browser lo consente, l'utente può fornire un proprio foglio di stile per indicare regole di suo gradimento Author: l'autore delle pagine fornisce i fogli di stile per un documento specifico, nei modi visti finora Nella cascata gli stili importati nell'header HTML con i tag link e style precedono gli stili definiti nel tag di uno specifico elemento con l'attributo style (quindi questi ultimi sopravanzano i precedenti) Regole!important: quando una regola (tipicamente dell'utente) è seguita dalla parola-chiave!important, essa sopravanza una analoga regola di senso diverso dell'autore h1 { font-size: 18pt!important; CSS - Floriano Scioscia 39
40 CSS Media Queries In CSS 2, la distinzione tra diversi media a cui applicare fogli di stile differenti è qualitativa e rigida poco sfruttata sia dai browser sia dai Web designer In particolare, la maggioranza di siti Web attuali si adatta difficilmente alla grande varietà di schermi attualmente usati (computer, smartphone, tablet, TV, etc.) CSS 3 ha pertanto esteso la specifica attraverso le Media Queries (W3C recommendation, giugno 2012), che permettono di adattarsi (anche dinamicamente) a parametri quantitativi: dimensioni fisiche, dimensioni in pixel risoluzione (in DPI/PPI, dots/pixels per inch, punti/pixel per pollice) orientamento verticale/orizzontale gamma di colori supportati Specifica già supportata dalle versioni più recenti di tutti i principali browser per computer e dispositivi mobili CSS - Floriano Scioscia 40
41 CSS Media Queries - principi Nell'attributo media del collegamento a un foglio di stile è possibile inserire espressioni logiche composte da una o più condizioni relative alle caratteristiche del mezzo Il foglio di stile verrà applicato solo se il mezzo verifica l'espressione Esempio: Adottare un foglio di stile per schermi con larghezza minore di 500 pixel e uno per quelli con larghezza maggiore <link href="./small.css" rel="stylesheet" media="screen and (max-width: 500px)" /> <link href="./large.css" rel="stylesheet" media="screen and (min-width: 501px)" /> In questo modo è possibile progettare un layout e uno stile in grado di adattarsi a diverse categorie di dispositivi (con granularità a piacere), inclusi quelli che possono variare dinamicamente le loro proprietà (risoluzione, orientamento, etc.) Tale approccio, di recente diffusione, è detto responsive Web design CSS - Floriano Scioscia 41
42 CSS Media Queries - sintassi Una Media Query è composta da: Un tipo di media (all aural braille handheld print projection screen tty tv) Una sequenza di condizioni in and logico tra loro (con la parola chiave and) Più Media Query separate da virgola sono in or logico tra loro Tre possibili modi di applicare le Media Queries: Collegamento da pagina HTML a foglio di stile CSS <link href="./small.css" rel="stylesheet" media="screen and (maxwidth: 500px), all and (max-width: 2cm)" /> per richiamare un foglio di stile CSS da un url("small.css") screen and (max-width: 500px); direttamente nel foglio di stile screen and (max-width: 500px) {.column { float: none; CSS - Floriano Scioscia 42
43 CSS Media Queries - proprietà width larghezza dell'area visibile della pagina height altezza dell'area visibile della pagina device-width larghezza dell'intero schermo-mezzo device-height altezza dell'intero schermo-mezzo aspect-ratio, device-aspect-ratio rapporto d'aspetto (larghezza/altezza) dell'area visibile o dell'intero schermo color minimo numero di bit per pixel per componente RGB è pari a 0 per dispositivi monocromatici esempio: 256 colori, 8 bpp 3 bpp R, 3 bpp G, 2 bpp B color è pari a 2 monochrome numero di bit per pixel per i livelli di grigio è pari a 0 per dispositivi a colori orientation:(portrait landscape) orientamento verticale/orizzontale resolution risoluzione (in dpi oppure dpcm) CSS - Floriano Scioscia 43
44 CSS Media Queries - condizioni Sulle proprietà quantitative possono essere imposte condizioni di valore esatto, minimo o massimo In questi ultimi due casi si aggiungono i prefissi min- e max- al nome della proprietà Esempi: Due stili diversi per stampa a colori e in gradazioni di grigio print and (color) print and (monochrome) Distinguere in base alla risoluzione (es. per discriminare TV, monitor di computer e smartphone) screen and min-width:640px and min-height:480px and max-resolution:100dpi screen and min-width:800px and min-height:480px and min-resolution:101dpi and max-resolution:200dpi screen and min-width:800px and min-height:480px and min-resolution:201dpi CSS - Floriano Scioscia 44
45 Responsive Web design - esempio Considerando l'esempio di layout di pagina in puro CSS visto prima, aggiungiamo una media query e una regola per ridisporre in verticale il layout se l'orientamento è verticale o la larghezza della pagina è piccola (e.g. su all and (orientation: portrait), screen and (max-width: 600px) {.header,.menu,.menubar,.content,.trailer { float: none; width: auto; margin: 0; Questo genere di layout dinamico era in precedenza implementato usando JavaScript, con alcuni svantaggi: uniche proprietà accessibili: larghezza e altezza compatibilità cross-browser problematica funziona solo se JavaScript è abilitato CSS - Floriano Scioscia 45
46 Convalida di CSS Il W3C offre un servizio di convalida (validation) di fogli di stile CSS, per controllare se sono aderenti agli standard E' possibile sottoporre a convalida fogli di stile pubblicati sul web, semplicemente inserendone l'indirizzo residenti nel nostro filesystem, facendone l'upload inseriti direttamente in un'apposita area di testo In caso di successo si può aggiungere ad una pagina il simbolo CSS - Floriano Scioscia 46
47 Acid3 Test Pagina di test del Web Standards Project Suite di 100 test per valutare la compatibilità di un browser con HTML CSS DOM Javascript CSS - Floriano Scioscia 47
48 Riferimenti Specifiche E.J. Etemad (editor), Cascading Style Sheets (CSS) Snapshot 2010, W3C Working Group Note 12 May 2011, B. Bos, T. Çelik, I. Hickson, H. Lie (editors), Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, W3C Recommendation 7 June 2011, F. Rivoal (editor), Media Queries, W3C Recommendation 19 June 2012, Testi G. Troiani, CSS Guida Completa, 2005, Apogeo CSS - Floriano Scioscia 48
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
WEB I FOGLI DI STILE. Gabriele Murara
WEB I FOGLI DI STILE Gabriele Murara 1 Cosa sono e a cosa servono HTML dovrebbe essere visto semplicemente come un linguaggio strutturale, alieno da qualunque scopo attinente la presentazione di un documento
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
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
- 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
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
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)
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
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
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
(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
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
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
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
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
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
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
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
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
Cos è un word processor
Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire operazioni di impaginazione: font diversi per il testo impaginazione dei
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:
Valori e unità di misura (1)
Valori e unità di misura (1) I valori di una proprietà non vanno mai messi tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio:
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS) Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il loro vantaggio è che possono essere utilizzati a differenti
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
XSL: extensible Stylesheet Language
XSL: extensible Stylesheet Language XSL è un insieme di tre linguaggi che forniscono gli strumenti per l elaborazione e la presentazione di documenti XML in maniera molto flessibile. I tre linguaggi devono
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.
I Tag dell html. Parte quarta
I Tag dell html Parte quarta Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag:
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...
HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento
Università di L Aquila Facoltà di Biotecnologie Agro-alimentari
RIFERIMENTI Università di L Aquila Facoltà di Biotecnologie Agro-alimentari Esame di Laboratorio di informatica e statistica Parte 3 (versione 1.0) Il riferimento permette di identificare univocamente
CATALOGO E-COMMERCE E NEGOZIO A GRIGLIA
CATALOGO E-COMMERCE E NEGOZIO A GRIGLIA In questo tutorial verrà illustrato come sfruttare la flessibilità del componente "Catalogo E-commerce" per realizzare un classico negozio a griglia, del tipo di
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
Excel. A cura di Luigi Labonia. e-mail: luigi.lab@libero.it
Excel A cura di Luigi Labonia e-mail: luigi.lab@libero.it Introduzione Un foglio elettronico è un applicazione comunemente usata per bilanci, previsioni ed altri compiti tipici del campo amministrativo
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
Esercitazione n. 10: HTML e primo sito web
+ Strumenti digitali per la comunicazione A.A 0/4 Esercitazione n. 0: HTML e primo sito web Scopo: Creare un semplice sito web con Kompozer. Il sito web è composto da una home page, e da altre due pagine
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
MS Word per la TESI. Barra degli strumenti. Rientri. Formattare un paragrafo. Cos è? Barra degli strumenti
MS Word per la TESI Barra degli strumenti Cos è? Barra degli strumenti Formattazione di un paragrafo Formattazione dei caratteri Gli stili Tabelle, figure, formule Intestazione e piè di pagina Indice e
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
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.
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
LEZIONI DI HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONI DI HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... FORMATTARE IL CARATTERE Per formattare titoli interni del documento web possiamo utilizzare i tag , ,...,
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Cascading Style Sheet CSS. Sintassi Css. Come inserire un foglio di stile. Fogli di stile esterni. Separazione contenuto/layout
Cascading Style Sheet CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti HTML, XHTML e XML. L'introduzione
WWW.ICTIME.ORG. NVU Manuale d uso. Cimini Simonelli Testa
WWW.ICTIME.ORG NVU Manuale d uso Cimini Simonelli Testa Cecilia Cimini Angelo Simonelli Francesco Testa NVU Manuale d uso EDIZIONE Gennaio 2008 Questo manuale utilizza la Creative Commons License www.ictime.org
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
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.
ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE. Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag.
ESEMPIO DI TEMPLATE CON BARRA DI NAVIGAZIONE ORIZZONTALE Esempio di Template con barra di navigazione orizzontale Ultima revusione 25/05/2015 Pag. 1
Sistema operativo. Sommario. Sistema operativo...1 Browser...1. Convenzioni adottate
MODULO BASE Quanto segue deve essere rispettato se si vuole che le immagini presentate nei vari moduli corrispondano, con buona probabilità, a quanto apparirà nello schermo del proprio computer nel momento
HTML 6. I frame. Sintassi di base. I frame e DOCTYPE FRAME. ...head... <FRAMESET lista_attributi> <FRAME SRC= URL lista_attributi>
FRAME HTML 6 I frame Danno la possibilità di creare finestre multiple all'interno della finestra del browser Si riesce a suddividere la pagina in più sezioni indipendenti, ma che si possono influenzare
CSS 6. Il modello contenitore (box model) Elementi flottanti
CSS 6 Il modello contenitore (box model) Elementi flottanti Il modello contenitore Tecnologie di Sviluppo per il WEB 2 BOX MODEL CSS assume che ogni elemento genera uno o più box rettangolari, chiamati
Elementi Blocco vs elementi inline
(X)HTML + CSS Elementi Blocco vs elementi inline HTML vs XHTML Prologo distinto Tag denotati sempre in minuscolo Tutti i tag aperti devono essere chiusi I valori degli attributi vanno sempre inclusi fra
Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat
Laboratorio di Tecnologie Web HTML: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat File HTML e tag Un file HTML non è nient'altro che un puro file di testo al cui interno sono presenti delle
OSSIF WEB. Manuale query builder
OSSIF WEB Manuale query builder - Maggio 2010 1) Sommario 1) SOMMARIO... 2 INTRODUZIONE... 3 Scopo del documento... 3 Struttura del documento... 3 Descrizione dell interfaccia grafica... 3 SELEZIONE DI
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
PULSANTI E PAGINE Sommario PULSANTI E PAGINE...1
Pagina 1 Sommario...1 Apertura...2 Visualizzazioni...2 Elenco...2 Testo sul pulsante e altre informazioni...3 Comandi...3 Informazioni...4 Flow chart...5 Comandi...6 Pulsanti Principali e Pulsanti Dipendenti...6
Primi elementi di... Cascading Style Sheet (o Fogli di Stile)
ISIS Giordano Bruno - BUDRIO Primi elementi di... Cascading Style Sheet (o Fogli di Stile) Lezioni del Prof. Gianluigi Roveda Caratteristiche dei Fogli di Stile Divide la descrizione del contenuto del
EXCEL PER WINDOWS95. sfruttare le potenzialità di calcolo dei personal computer. Essi si basano su un area di lavoro, detta foglio di lavoro,
EXCEL PER WINDOWS95 1.Introduzione ai fogli elettronici I fogli elettronici sono delle applicazioni che permettono di sfruttare le potenzialità di calcolo dei personal computer. Essi si basano su un area
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS - appendice) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in
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
Laboratorio di reti I: Cascading Style Sheets
Laboratorio di reti I: Cascading Style Sheets Stefano Brocchi brocchi@dsi.unifi.it 10 novembre, 2009 Stefano Brocchi Laboratorio di reti I: I CSS 10 novembre, 2009 1 / 45 Cascading Style Sheets Un Cascading
Android. Implementare una interfaccia utente
Android Implementare una interfaccia utente Introduzione In questa lezione vedremo come implementare una interfaccia utente sullo schermo di Android. Vedremo gli elementi di base visualizzabili sullo schermo
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
Settaggio impostazioni tema. Cliccando nuovamente su aspetto e poi su personalizza si avrà modo di configurare la struttura dinamica della template.
I TEMI PREDEFINITI (TEMPLATE) Scelta del tema I temi predefiniti di wordpress sono la base di un sito che usa un utente che per ragioni pratiche o per incapacità non può creare un sito usando solo codice
Guida Joomla. di: Alessandro Rossi, Flavio Copes
Guida Joomla di: Alessandro Rossi, Flavio Copes Grafica e template 1. 15. La grafica e i template Personalizzare l'aspetto del sito aggiungendo nuovi template e customizzandoli 2. 16. Personalizzare il
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
Contenuto vs Stile: un esempio
I limiti dell HTML Il principale problema di HTML è la mancanza di separazione tra contenuto e stile all interno delle pagine. Molto spesso, invece degli appositi tag, si utilizzano le tabelle per posizionare
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
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
Scuola Digitale. Manuale utente. Copyright 2014, Axios Italia
Scuola Digitale Manuale utente Copyright 2014, Axios Italia 1 SOMMARIO SOMMARIO... 2 Accesso al pannello di controllo di Scuola Digitale... 3 Amministrazione trasparente... 4 Premessa... 4 Codice HTML
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
HTML5. Approfondimento su layout Responsive
Approfondimento su layout Responsive In pasato la risoluzione di riferimento è stata 1024px mentre per il web design la larghezza di riferimento delle pagine è stata di 960px. Attualmente questo non è
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
Brescianet.com Sito didattico - Prof. Sechi Marco. II Modulo - Classe 3O. Accoda qui le risposte. differenze per aree sovrapposte.
Brescianet.com Sito didattico - Prof. Sechi Marco FAQ Cerca Lista degli utenti Gruppi utenti Registrati Profilo Entra per controllare i messaggi privati Entra II Modulo - Classe 3O Indice del forum ->
Appunti sugli Elaboratori di Testo. Introduzione. D. Gubiani. 19 Luglio 2005
Appunti sugli Elaboratori di Testo D. Gubiani Università degli Studi G.D Annunzio di Chieti-Pescara 19 Luglio 2005 1 Cos è un elaboratore di testo? 2 3 Cos è un elaboratore di testo? Cos è un elaboratore
lo 2 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000
Capittol lo 2 Visualizzazione 2-1 - PERSONALIZZARE LA FINESTRA DI WORD 2000 Nel primo capitolo sono state analizzate le diverse componenti della finestra di Word 2000: barra del titolo, barra dei menu,
Lezione 3. Joomla 2.5
Lezione 3 Joomla 2.5 Joomla: il template Prima di partire con la modifica del template, diamo un occhiata alle posizioni definite dallo stesso. Come si può notare LOGO non ha un area che lo identifica
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
Il calcolatore - Applicazioni
Alfonso Miola Il calcolatore - Applicazioni Esercitazione Dispensa B-01-E Settembre 2005 1 Contenuti Applicazioni Applicazioni e Interfacce Il pacchetto Office Word Excel Power Point Il CD per ECDL 2 Applicazioni
Principio. di base per una buona riuscita
Una delle attività da affrontare nel nostro lavoro è quella di realizzare un layout, ossia una struttura dove posizionare contenuti per creare una pagina web. Ci sono molti tipi di pagine web quindi diverse
LA CORRISPONDENZA COMMERCIALE
LA CORRISPONDENZA COMMERCIALE GLI ELEMENTI ESSENZIALI DELLA LETTERA COMMERCIALE Intestazione Individua il nome e il cognome o la ragione sociale di chi scrive; contiene inoltre l indirizzo e i recapiti
Fogli Elettronici: MS Excel utilizzo avanzato
Fogli Elettronici: MS Excel utilizzo avanzato 1 Ripasso 2 1 Selezionare celle e gruppi di celle Una cella in un foglio è individuata dall incrocio tra la riga e la colonna (coordinate della cella) Es:
7. Layer e proprietà degli oggetti
7. Layer e proprietà degli oggetti LAYER 09/01/13 ing. P. Rordorf arch. D. Bruni arch. A. Chiesa ing. A. Ballarini 38(52) Le proprietà dei layer: - Nome: ogni layer ha un nome proprio che ne permette una
Introduzione. Elementi di Informatica. Standard. Struttura dei TAG - 1. Annidamento e Indentazione. Struttura dei TAG - 2
Università degli Studi di Udine Facoltà di Ingegneria CORSO DI LAUREA IN SCIENZE dell ARCHITETTURA Elementi di Informatica HTML e CSS D. Gubiani HTML è l acronimo di HyperText Markup Language che tradotto
e il Giardino di Zen CSS ESTERNI CSS INTERNI
e il Giardino di Zen Per gli aggiornamenti consultare il sito del World Wide Web Consortium all'indirizzo. http://en.wikipedia.org/wiki/world_wide_web_consortium Inserimento CSS
Il linguaggio HTML - Parte 4
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 4 Dott. Chiara Braghin braghin@dti.unimi.it HTML - I Riferimenti Ipertestuali Il piatto forte di tutto
Come creare un modulo
Come creare un modulo Aggiungi moduli al tuo sito per registrare le informazioni dei tuoi clienti su un database, o per riceverle via e- mail. Trascina un widget Modulo sulla tua pagina Nel pannello Widget
HTML HyperText Markup Language:
HTML HyperText Markup Language: Linguaggio utilizzato per creare pagine Web 421 Introduzione HTML è l'acronimo di HyperText Markup Language HTML e il linguaggio standard per descrivere e definire il contenuto
Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda
Capitolo III Esercitazione n. 3: Funzionalità base di Word parte seconda Scopo: formattare un documento con Microsoft Word 2007. PAGINA LASCIATA BIANCA INTENZIONALMENTE A Convertire un documento da formato
Esercizio data base "Biblioteca"
Rocco Sergi Esercizio data base "Biblioteca" Database 2: Biblioteca Testo dell esercizio Si vuole realizzare una base dati per la gestione di una biblioteca. La base dati conterrà tutte le informazioni
GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL GUIDA RAPIDA PER LA COMPILAZIONE DELLA SCHEDA CCNL
GUIDA RAPIDA BOZZA 23/07/2008 INDICE 1. PERCHÉ UNA NUOVA VERSIONE DEI MODULI DI RACCOLTA DATI... 3 2. INDICAZIONI GENERALI... 4 2.1. Non modificare la struttura dei fogli di lavoro... 4 2.2. Cosa significano
5.6.1 REPORT, ESPORTAZIONE DI DATI
5.6 STAMPA In alcune circostanze può essere necessario riprodurre su carta i dati di tabelle o il risultato di ricerche; altre volte, invece, occorre esportare il risultato di una ricerca, o i dati memorizzati
Formattazione e Stampa
Formattazione e Stampa Formattazione Formattazione dei numeri Formattazione del testo Veste grafica delle celle Formattazione automatica & Stili Formattazione dei numeri Selezionare le celle, poi menu:
.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
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,
REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ
Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Pella (NO) http://www.comune.pella.no.it/ DATA DELLA VALUTAZIONE 09/07/2008 AUTORE DELLA VALUTAZIONE Alessio Mantegna
Tabella 2.2 Indice delle proprietà Nome Valori Pr El Er Cp
Tabella 2.2 Indice delle background ['background-color' 'background-image' 'background-repeat' 'background-attachment' 'background-position'] background-attachment scroll fixed scroll background-color
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
Entrare nel sistema. Clicca su Entra per entrare nel sistema. PAGINA 1
Entrare nel sistema Clicca su Entra per entrare nel sistema. PAGINA 1 Entrare nel sistema Compare il box di login in cui inserire il nome utente e la password fornite tramite posta elettronica. PAGINA