Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
|
|
|
- Marcellino Di Carlo
- 5 anni fa
- Visualizzazioni
Transcript
1 Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1
2 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 correttamente gli oggetti nella pagina. Scelta deprecata! 2
3 Contenuto vs Stile: un esempio Sito di 100 pagine HTML In ogni pagina formatto il testo, ad esempio: <FONT COLOR= red ><B>Testo</B></FONT> Se voglio cambiare il colore e lo stile del testo ne sito? Devo modificare 100 volte lo stesso attributo, per ogni pagina! Pessima caratteristica! 3
4 Cosa sono i fogli di stile? Costituiscono la principale innovazione di HTML 4. Cascading Style Sheet CSS A cascata perché è possibile incorporare nel documento diversi fogli di stile che prevalgono gli uni sugli altri in maniera gerarchica. 4
5 Utilizzo dei CSS Semplificano molto l editing dei una pagina HTML, eliminando molte ripetizioni di comandi. Permettono di dare un aspetto uniforme e professionale alle pagine. Visualizzazione di default nel caso di un browser obsoleto ai CSS. 5
6 Utilizzo dei CSS Sono supportati dalla terza versione di Internet Explorer e solo parzialmente dalla quarta di Netscape. Attraverso i CSS è possibile determinare la formattazione delle pagine, le dimensioni, il colore, i font, giustificare il testo, etc. 6
7 Fogli di stile in linea Molto vicini all HTML classico. Agiscono sulle singole istanze all interno della pagina, senza influenzare il resto. Si utilizzano campi standard di HTML: <SPAN> lunghi blocchi di testo <DIV> brevi frasi Solo per ritocchi circoscritti. 7
8 Esempio 1 <HTML> <HEAD><TITLE>Es. 1</TITLE><HEAD> <BODY> <SPAN STYLE="font-size:30px; fontfamily:georgia; color:red"> William Shakespeare</DIV> <DIV STYLE="font-size:18px; fontfamily:couriel new; color:green"> Questo autore viene considerato uno dei più eminenti poeti di tutti i tempi. ( )</DIV> </BODY> 8 </HTML>
9 Fogli di stile incorporati Sintassi completamente diversa. Caratteristiche principali: Attributi inseriti tra parentesi graffe {} Il segno = è sostituito da : Argomenti consecutivi separati da ; Attributi composti da più termini separati da Vengono assegnati all intero documento, non alle singole istanze. 9
10 Utilizzo dei CSS incorporati Sono inserite tra il comando: <STYLE>Definizione di stile</style> Vengono posizionati tra il tag <HEAD> e il tag <BODY> del documento. Attributi: TYPE = tipo del foglio di stile supportato. IE e NN supportano text/css (default). 10
11 Esempio 2 <HTML> <HEAD> <STYLE TYPE="text/css"> H1 { font-size:40px; font-family:verdana; color:orange } H2 { font-size:20px; font-family:couriel new; color:#00ff00 } </STYLE> </HEAD> <BODY> <H1>Questo testo e' di colore arancione, impostato su verdana di 40 pixel</h1> <H2>Questo testo e' di colore verde, impostato su couriel new di 20 pixel</h2> </BODY> </HTML> 11
12 Commenti all Esempio 2 Al posto dei marcatori <H1> e <H2>, se ne possono sostituire altri come <P>. Sostituendo i valori degli stili, si modifica l intero documento. Migliore rispetto ai CSS in linea. 12
13 Fogli di stile esterni Vera filosofia dei CSS. I marcatori vengono posti in un documento indipendente. Una riga di codice richiama questo documento nelle pagine che devono essere caratterizzate dal layout definito. 13
14 Creazione di un CSS esterno Creare una pagina con l editor utilizzato, inserendo solo i marcatori e il relativo stile: es. H1 { font-size:17px; font-family:verdana; color:green }). Salva con nome: nome_file.css 14
15 Creazione di un CSS esterno All interno delle pagine che devono essere influenzate dal file.css, inserire: <LINK REL= stylesheet HREF= nome_file.css" TYPE="text/css"> 15
16 Esempio 3 Stile.css H1 { font-size:40px; font-family:verdana; color:orange } H2 { font-size:20px; font-family:couriel new; color:#00ff00 } P {font-size:10px; font-family:arial; color:#0000ff } 16
17 Esempio 3 bis Esempio_css.html <BODY> <LINK REL="stylesheet" HREF="stile.css" TYPE="text/css"> <H1> La Divina Commedia</H1> <H2>di Dante Alighieri</H2> <P> Nel mezzo del cammin di nostra vita,<br> mi ritrovai per una selva oscura,<br> che la diritta via era smarrita.<br> </P> </BODY> 17
18 Attributi per il testo font-family: specifica la famiglia di font; più possibilità vengono separate dalla virgola; i nomi con più termini vanno tra virgolette. Font generici: serif (con grazie), sans serif (senza grazie), coursive (calligrafia umana), fanct (decorativi), monospace (spazio uguale per ogni lettera). 18
19 Attributi per il testo font-size : stabilisce la dimensione del testo. Unità di misura: pt (punti), px (pixel), in (pollici), cm (centimetri), % (percentuale). font-style : indica lo stile del font. Valori: normal, italic, oblique, bold, bolder, lighter 19
20 Attributi per il testo font-variant: stile tutto maiuscolo. Valori: normal, small-caps. font-weight: stabilisce lo spessore del font (bold). Valori: extra-light, demi-light, light, medium, extra-bold, demi-bold, bold. 20
21 Attributi per il testo font-color: assegna un colore al font. Si può esprimere in esadecimale o nominale. text-decoration : aggiunge particolari caratteristiche. Valori: overline, underline, line-through. 21
22 Attributi per il testo letter-spacing: stabilisce la distanza tra le singole lettere all'interno di un documento (em). <DIV STYLE="letter-spacing:1em"></DIV> text-transform: permette di manipolare le minuscole e le maiuscole.valori: uppercase (rende maiuscole tutte le lettere dell'elemento), capitalize (rende maiuscola solo la prima lettera di ogni parola), lowercase (rende minuscole tutte le lettere dell'elemento). <DIV STYLE="text-transform:uppercase"></DIV> text-align: visualizza il testo in quattro posizioni: left (sinistra), center (centrato), right (destra) e justify (giustificato). <DIV STYLE="text-align: right"></div> text-indent: definisce la quantita' di spazio (em o pollici) aggiunta immediatamente prima della prima parola. <DIV STYLE="text-indent: 5em"></DIV> line-height: definisce la distanza verticale tra le varie linee di testo (percentuali o em). <DIV STYLE="line-height: 2em"></DIV> 22
23 Esempio 4 Stile1.css H1 { font-size:30px; font-family:serif; color:orange; font-weight:extra-light;textdecoration:line-through; text-align:center;} H2 { font-size:25px; font-family:fanct; color:#00ff00; text-decoration:underline; text-align:right;} P {font-size:20px; font-family:"basic sans sf"; font-style:lighter; color:#0000ff;textalign:center; } 23
24 Attributi per i liste e links list-style: <style type="text/css"> UL { list-style-image:url(image.gif) } </style> Link che cambiano colore al passaggio del mouse <style type="text/css"> A:hover { color: red } </style> Link che cambiano colore di sfondo al passaggio del mouse <style type="text/css"> A:hover {color: white; background:blue } </style> Link che cambia dimensione al testo quando attivato dal mouse <style> A:link { font-size: 15px } A:hover { font-size: 16px } </style> 24
25 Attributi per i links Eliminare le sottolineature dei links: A { text-decoration: none } Sottolineature a comparsa: A:link, A:visited { text-decoration: none } A:hover { text-decoration: underline } Funziona solo con IE, parzialmente con NN. 25
26 Esempio 5 Stile2.css UL { list-style-image:url(index.gif) } A:link { font-size: 15px; text-decoration:none} A:hover { font-size: 17px; color:violet; text-decoration:underline} Esempio5.html <BODY> <LINK REL="stylesheet" HREF="stile2.css" TYPE="text/css"> <H2>Esempio n 5</H2> <UL> <LI>Prima voce <LI>Seconda voce <LI>Terza voce </UL> <BR><BR><BR> <A HREF="link2.html">Primo link fatto con CSS</A><BR><BR> <A HREF="link1.html">Secondo link fatto con CSS</A> </BODY> 26
27 Struttura della pagina Niente più tabelle, gli stili creano gli elementi visualizzati all interno dei box. Proprietà di ogni box: Margini: bordo esterno al box. Riempimento: spazio che separa il contenuto dai margini. Bordi: linee grafiche dei bordi. 27
28 I margini margin-left, margin-right, margin-top, mergin-bottom : impostano la distanza tra il box e gli elementi adiacenti. BODY { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px } margin: alto, destro, inferiore, sinistro. BODY { margin: 10px 10px 10px 10px } 28
29 Il riempimento padding-top, padding-bottom, paddingright, padding-left : indicano la distanza tra i lati del box e gli elementi al suo interno (funzione opposta al precedente). BODY { padding-top: 10pt; padding-right; 10px; padding-bottom: 110%; padding-left: 2in } padding : alto, destro, inferiore, sinistro. 29
30 I bordi border-top, border-bottom, border-right, border-left : definiscono lo stile ed il colore di ogni elemento. Valori: none, dotted, dashed, solid, double, groove, ridge, inset e outset. BODY { border-top: dotten green; borderleft: dashed black; border-right: solid blue; border-bottom: groove yellow } 30
31 I bordi border-top-width, border-bottom-width, border-right-width, border-left-width : genera un effetto simile alle tabelle html. Valori: misure percentuali o di riferimento più parole chiave (thin, medium, thick). BODY { border-top-width: 5px; border-leftwidth: 4pt; border-right-width: thick; border-bottom-width: 2em } 31
32 I bordi border-width : definisce i 4 valori precedenti con un solo attributo, mettendoli in ordine. border-color: definisce il colore del bordo. border-style : definisce lo stile dei bordi. Attributi: none, dotted, dashed, solid, double, groove, ridge, inset, outset 32
33 I bordi border : omnicomprensivo di quelli visti in precedenza. Racchiude le varianti di bordi, stili, colore e larghezza. Stessi valori a tutti i lati. width: larghezza orizzontale del box. Valore auto : si adatta al contenuto. float : simile ad ALIGN. Valori: left, right e none. 33
34 Esempio 6 Stile3.css H1 { font-size:30px; font-family:serif; color:orange; fontweight:extra-light; text-align:center;bordercolor:red;border-style:dotted;border-width:auto;float:left} H2 { font-size:25px; font-family:fanct; color:#00ff00; textdecoration:underline; text-align:right;bordercolor:yellow;border-style:groove;borderwidth:auto;float:right} P { margin-top: 10px; margin-right; 10px; margin-bottom: 10px; margin-left: 10px; padding-top: 10pt; padding-right; 10px; padding-bottom: 20%; padding-left: 2in; border-top: ridge green; border-left: dashed black; border-right: solid blue; border-bottom: inset yellow border-top-width: 3px; border-left-width: 10pt; borderright-width: medium; border-bottom-width: 2em } 34
35 Background e colori di sfondo Color: definisce il colore del testo del documento (nominale o esadecimale). <DIV STYLE="color:blue"></DIV> background-color: determina il colore di sfondo di un determinato stile (simile al colore di sfondo delle tabelle).usato per evidenziare alcune parti del documento. <DIV STYLE="background-color:blue"></DIV> background-image: richiama un'immagine (GIF o JPG) caricata sullo sfondo del css <DIV STYLE="background-image:url(image.jpg)"> </DIV> background-repeat: consente di ripetere l'immagine di sfondo. Valori: repeat (verticale e orizzontale), repeat-x (orizzontale), repeat-y (verticale): <DIV STYLE="background-image:url(image.jpg); background- 35 repeat: repeat-y"></div>
36 Esempio 7 Stile4.css BODY {background-image:url(pace.jpg)} 36
37 Altri attributi importanti I fogli di stile permettono inoltre: Controlli del cursore (cursor), cioè possibilita di modificare il cursore a seconda delle parti di testo su cui passa. Valori: auto, crosshair, default, hand, move, e-resize, ne-resize, nw-resize, n- resize, se-resize, sw-resize, s-resize, w- resize, text, wait, help. 37
38 Effetti di transizioni (page-enter e page-exit) cioè effetti particolari al passaggio da una pagina ad un altra. Il codice va inserito tra i tag <HEAD>. Valori:Box in, Box out, Circle in, Circle out, Wipe up, Wipe right, Wipe left, Vertical blinds, Horizontal blinds, Checkerboard across, Checkerboard down, Random dissolve, Split vertical in, Split vertical out, Split horizontal in, Split horizontal out, Strips left down, Strips left up, Strips right down, Strips right up, Random bars horizontal, Random bars vertical, Random. <META http-equiv="page-enter" CONTENT="RevealTrans(Duration=4,Transition=0 )"> 38
39 Esercizio 1 Creare una pagina (utilizzando CSS incorporati) Alighieri con: Titolo (font, centrato, colorato e decorato): Dante Alighieri. linea divisoria Immagine di Dante come sfondo ripetuto. 3 links (non sottolineati, di un colore e dimensioni a scelta) che portano a: Inferno Purgatorio Paradiso 39
40 Creare una pagina stile.css che definisca: Margini, bordi e riempimento a piacere. Links che cambiano dimensione e colore al passaggio del mouse. Immagine.gif come simbolo per gli elenchi. Tutti gli attributi del testo per H1, H2, P. 40
41 Creare una pagina Inferno (collegata al foglio di stile esterno precedentemente creato) con: Titolo: Inferno Colore o immagine di sfondo a scelta. Un link per ogni canto dell inferno (vanno da I a XXXIV) fatto a elenco (ordinato o meno a scelta). I links non sono sottolineati e mutano dimensioni e colore al passaggio del mouse. In caso di necessità, si possono utilizzare CSS in linea per piccoli particolari. 41
42 Creare una pagina canto1_inf (collegata al foglio di stile esterno precedentemente creato) con: Titolo: Canto I Le prime 3 strofe del poema con indentazione (font-family:coursive). Sfondo e colore del testo a scelta. 42
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
Informatica di base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 Le tabelle Creazione di una tabella: le tabelle vengono utilizzate sia per inserire dati che per migliorare
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
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
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
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
Riassunto CSS Tutorial
Colori e sfondi color background-color h1 { color: #ff0000; body { background-color: #FFCC66; Riassunto CSS Tutorial Per uno sfondo trasparente: body { background-color: transparent; background-image background-repeat
Riassunto CSS Tutorial Colori e sfondi
Proprietà Esempio Descrizione color background-color background-image background-repeat background-attachment background-position h1 { color: #ff0000; body { background-color: #FFCC66; body { background-image:
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
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
Serve per impostare. enfatizza il testo (l effetto è quello del grassetto, comando utile per i motori di ricerca) <ul> comandi relativi all immagine
Comandi principali HTML Serve per impostare il titolo della pagina (nella sezione head) il font del titolo 1 il font del titolo 2 paragrafo una o più parole alle quali applicare
Linguaggi e tecnologie per il Web. Parte 5 CSS
Sapienza Università di Roma corso di laurea in Ingegneria informatica e automatica Linguaggi e tecnologie per il Web a.a. 2016/2017 Parte 5 CSS Riccardo Rosati Fogli di stile In HTML non c è separazione
Sistemi Di Elaborazione Dell informazione
Sistemi Di Elaborazione Dell informazione Dott. Antonio Calanducci Lezione XV: Cenni su CSS Corso di Laurea in Scienze della Comunicazione Anno accademico 2009/2010 Fogli di stile (CSS) Cascade Style Sheets
Fogli di stile a cascata (CSS)
Fogli di stile a cascata (CSS) November 25, 2010 1 Definizione I fogli di stile a cascata (Cascading Style Sheets, CSS) sono una delle tecnologie introdotte dal W3C per la formattazione dei documenti HTML,
CSS (Cascading Style Sheets)
Foglio di stile CSS (Cascading Style Sheets) Regole che dicono al browser COME visualizzare le informazioni contenute nel documento HTML. Definiscono l APPARENZA del documento. Vedi http://www.w3schools.com/css/demo_default.htm
Guida ai CSS. Introduzione
Guida ai CSS Introduzione... 1 Sintassi... 1 Stile in linea... 1 Stile incorporato... 2 Stile esterno... 2 Classi... 3 Selettori ID... 4 Grafica... 4 Link... 5 Attributi testo... 6 Attributi carattere...
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2007 2008 Corso di Tecnologie Web CSS http://www lia.deis.unibo.it/courses/tecnologieweb0708/ HTML e Cascading Style Sheets > L
Anno Accademico Corso di Tecnologie Web CSS
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/ HTML e Cascading Style Sheets > L
Tag <br> : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row
TAG FONDAMENTALI Tag : per definire l interruzione di riga (andata a capo)(senza tag di chiusura); sta per break row Tag , tag ,.tag : per definire le intestazioni (i titoli) e la loro
4 Estensioni proprietarie. 4 Conversione del testo in immagini. 4 Uso di immagini per il controllo degli spazi bianchi
Universita degli Studi di Bologna - Facolta di Ingegneria HTML e Cascading Style Sheets > L HTML è nato in ambienti scientifici Anno Accademico 2006-2007 Corso di Tecnologie Web CSS http://www-lia.deis.unibo.it/courses/tecnologieweb0607/
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
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
INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere compilato
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
CSS. Cascading Style Sheet
CSS Cascading Style Sheet CSS Il CSS è un linguaggio, di tipo dichiarativo, che serve per definire lo stile di presentazione degli elementi presenti in un documento HTML. Esso è inglobato all interno dell
I fogli di stile (CSS)
I fogli di stile () in poche pagine 1 Cascading Style Sheets (Fogli Di Stile) I Cascading Style Sheets () rappresentano un metodo semplice ma potente per definire l aspetto dei documenti HTML. Essi descrivono
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
Dare stile al testo significa impostare con i CSS:
1 Dare stile al testo significa impostare con i CSS: Il tipo di font Il colore del font La dimensione del font Grassetto e corsivo del font Allineamento Sottolineatura Ombre Spaziature, bordi, margini
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
Sommario. HTML e CSS I fogli di stile. cosa sono principali proprietà
HTML e CSS Sommario HTML e CSS I fogli di stile cosa sono principali proprietà CSS CSS La specifica HTML elenca le linee guida su come i browser dovrebbero visualizzare i diversi elementi del documento
Linguaggi per il Web Linguaggi di markup: CSS
Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto
Corso di CSS. Prerequisiti. Modulo L2. 2-Text, link e list. Conoscenza di base linguaggio HTML. M.Malatesta 2-CSS-Text-link-list-12 23/01/2014
Corso di CSS Modulo L2 2-Text, link e list 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo alcune delle proprietà CSS relative al testo presente in una pagina
Informatica di Base Laboratorio di HTML Dott. Serena Villata A.A. 2004/05
Informatica di Base Multid@ms Laboratorio di HTML Dott. Serena Villata A.A. 2004/05 1 Che cos è l HTML? Hyper Text Markup Language Definisce le caratteristiche stilistiche di un documento, non è programmazione!
I fogli di stile Inline si specificano usando l attibuto style dei tag xhtml <p style= color: red; >esempio</p>
CSS Cascading Style Sheets Inne, Internal I fog di stile Inne si specificano usando l attibuto style dei tag xhtml esempio I fog di stile Internal si specificano usando il tag
Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
Indice 6. HTML (CONTINUA)...2 6.1 FOGLI DI STILE (CSS- CASCADING STYLESHEET)...2 6.1.1 Regole dello stile...6 6.1.2 Classi...6 6.1.3 Esempi di proprietà modificabili e relativi valori....9 6.2 DIVISIONS
Come inserire un foglio di s=le
Cascading Style Sheet CASCADING STYLE SHEET I fogli di s=le a cascata (de? anche semplicemente fogli di s=le) vengono usa= per definire la rappresentazione di documen= HTML, XHTML e XML. L'introduzione
Laboratorio di Informatica (Chimica)
Laboratorio di Informatica (Chimica) HTML: Cascading Style Sheet (CSS). Walter Cazzola Dipartimento di Informatica e Comunicazione Università à degli Studi di Milano. e-mail: cazzola@dico.unimi.it Walter
Progettazione di siti web a.a. 2015/16
HTML e stili Progettazione di siti web a.a. 2015/16 Fogli di stile: introduzione Maria Simi Marzo, 2016 [Learning web design,, J. Niederst Manuale di riferimento del W3C] All'inizio del web solo annotazioni
CSS: Colori, testo, caratteri, liste e link
CSS:, testo, caratteri, liste e link Università di Pisa pievatolo@dsp.unipi.it 13 aprile 2014 Sommario 1 2 Famiglia Dimensioni Corsivo e maiuscoletto Peso: quanto dev essere grasso il grassetto? 3 4 5
INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
Gli stili. Lo stile si può applicare in quattro modi diversi ad un elemento HTML: I. Fuori tag La sintassi per lo stile fuori tag è la seguente:
Gli stili Lo strumento degli stili sta piano piano soppiantando tutta una serie di attributi non solo per la formattazione del testo ma anche per l'aspetto estetico di tutti gli elementi di HTML, dalle
Corso di CSS. Prerequisiti. Modulo L2. 3-Border e list. Conoscenza di base linguaggio HTML. M.Malatesta 3-CSS-Border e list-13 16/02/ /02/2014
Corso di CSS Modulo L2 3-Border e list 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo alcune delle proprietà CSS relative ai bordi (border-styling) e alle
CSS: stili e layout BOX MODEL. Prof.ssa Cristina Gena
CSS: stili e layout BOX MODEL Prof.ssa Cristina Gena Box model In questa lezione vedremo la differenza tra gli elementi blocco e gli elementi in linea e scopriremo le caratteristiche del box model. In
Tecnologie di Sviluppo per il Web
Tecnologie di Sviluppo per il Web Cascading Style Sheets (CSS): Dettagli e Approfondimenti versione 1.2 G. Mecca mecca@unibas.it Università della Basilicata CSS >> Sommario Dettagli e Approfondimenti Sintassi
CSS Cascading Style Sheets
CSS Cascading Style Sheets il linguaggio per modificare lo stile delle pagine web 1 Fogli di stile (CSS) Servono per facilitare la creazione di pagine HTML con un aspetto uniforme Permettono di separare
Struttura Layout Monolitico Fisso con Menu Orizzontale
Struttura Layout Monolitico Fisso con Menu Orizzontale BODY Body { margin: 0px; padding:0; font-family: arial,sans-serif; font-size: 76%; text-align: center; background-color: #FC3; background-image: url();
Appunti sui fogli di stile
Appunti sui fogli di stile CSS ( Cascading Style Sheets): Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata. Può aggiornare lo stile di un
I CSS o Fogli di stile. Telematica per le arti e lo spettacolo a.a. 2006/07
I CSS o Fogli di stile Telematica per le arti e lo spettacolo a.a. 2006/07 Quando è nato il web il problema principale era semplicemente quello della gestione dei contenuti, dato anche il basso numero
Introduzione dei fogli di stile
Corso di Laurea in Scienze della Formazione Continua e Tecnologie dell Istruzione Parte V Fogli di stile - Css Corso: Computer Graphics Docente: Ing. Ivan Bruno E-mail: ivanb@dsi.unifi.it Introduzione
Creare un portale personalizzato
1 Creare un portale personalizzato Passi da seguire 1) Aprire la pagina: http://www.term-minator.it/modello.html 2) Scaricare modello : 2) Aprire il file modello con blocco note : 1 2 3) Modificare il
CSS: HTML: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli. Le immagini mappate
CSS: Proprietà per la formattazione delle immagini Immagini di sfondo e sfondi multipli HTML: Le immagini mappate 1 Le principali proprietà che permettono di manipolare le immagini agiscono sul box mode
Principali proprietà dei CSS Box Model e proprietà di base del testo
Principali proprietà dei CSS Box Model e proprietà di base del testo Sviluppo di siti web UD10 Fablab Design Il BOX MODEL Il BOX MODEL Se si vuole usare i CSS per scopi che vadano oltre la semplice gestione
CSS. <html> <body bgcolor="blue"> <html> <body bgcolor= red"> <html> <body bgcolor="blue"> <html> <body bgcolor="red "> </body> </html>
I fogli di stile 1 Css CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare i vari elementi che
<tag style= dichiarazioni css >
CSS 1. FOGLI DI STILE Per permettere di separare la forma dal contenuto, si usano i Fogli di Stile. Essi descrivono dettagliatamente lo stile di ogni elemento contenuto nel foglio html. I nomi dei fogli
Silvia Likavec. Lezione 6
Silvia Likavec Lezione 6 2 ! Le principali proprietà che permettono di manipolare le immagini agiscono sul box model: " Border (o border-style; border-width; bordercolor); " Padding; " Margin; " Width;
CSS: CASCADING STYLE SHEETS MODULO 8
CSS: CASCADING STYLE SHEETS MODULO 8 CSS È il linguaggio standard per la stilizzazione di documenti HTML Assolve al compito di informare il browser circa l'aspetto da conferire ai vari tag presenti nel
CSS / TIPOGRAFIA WEB. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / TIPOGRAFIA WEB LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 GESTIRE I CARATTERI CON I CSS I CSS hanno dato un notevole impulso alla tipografia web visto che permettono di
Introduzione ai Fogli di stile. Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni
Introduzione ai Fogli di stile Prof. Accarino IIS Altiero Spinelli Via Leopardi 132 Sesto San Giovanni Fogli di Stile CSS Il CSS (Cascading Style Sheets o Fogli di stile) è un linguaggio usato per definire
CSS esterni e interni
Introduziione aii CSS I Cascade Style Sheets (CSS), noti in Italia come "Fogli di stile a cascata", sono lo strumento definito dal W3C per definire l'aspetto delle pagine web. Prima dell'introduzione dei
* Le proprieta' dei margini: "margin" che assegnano un bordo esterno al box;
TIPO: CSS ATTRIBUTI DI MARGINI ED ALLINEAMENTO I fogli di stile permettono di giustificare il testo senza l'uso improprio di tabelle o espedienti simili. I CSS creano degli elementi visualizzati all'interno
Guida alla modifica di un layout
Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,
Web Design & Technologies
1 Comunicazione, Innovazione, Multimedialità Web Design & Technologies Cascading Style Sheets Level 2 2 Cosa sono i Cascading Style Sheet? Gli style sheet rappresentano un metodo semplice (ma potente)
CSS. Massimo Martinelli.
CSS Massimo Martinelli Massimo.Martinelli@isti.cnr.it Consiglio Nazionale delle Ricerche -CNR Istituto di Scienza e Tecnologie della Informazione - ISTI Cosa è CSS? Cascading Style Sheets = Fogli di Stile
CSS / BOX MODEL e PSEUDOCLASSI. LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1
CSS / BOX MODEL e PSEUDOCLASSI LABORATORIO DI COMUNICAZIONE VISIVA HTML+CSS docente: Diana Quarti 1 CSS: RIPRESA DELLA SCORSA LEZIONE CSS: servono per separare il contenuto dal visual per questo è preferibile
Informatica. Comunicazione & DAMS A.A. 2015/16. Dr.ssa Valeria Fionda
Informatica Comunicazione & DAMS A.A. 2015/16 Dr.ssa Valeria Fionda Pagina Web Struttura base pagina Web: (Heading
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS CASCADING STYLE SHEET I fogli di stile a cascata (detti anche semplicemente fogli di stile) vengono usati per definire la rappresentazione di documenti
F OGLI DI S TILE (Cascading Style Sheets)
F OGLI DI S TILE (Cascading Style Sheets) Manuale degli elementi di base Sezione Argomento Pag 1 Come è fatto un CSS: regole e commenti 2 2 Css in linea 3 3 Css incorporati 3 4 Css esterni 4 5 Proprietà
STILE E CSS. classi sezioni. tag
Perchè occorre lo stile? HTML con i suoi tag e relativi attributi possiede un suo stile standard che offre purtroppo poche personalizzazioni. Un sito web deve avere uniformità di colori, di font e dimensioni
Anno Accademico ANT Html e Css
Universita degli Studi di Bologna - Facolta di Ingegneria Anno Accademico 2006-2007 ANT Html e Css F. Pizza fpizza@deis.unibo.it cos'è ANT tool di build indipendente dalla piattaforma, scritto in java
Proprietà di CSS. Tecnologie di Sviluppo per il WEB 2
CSS 5 Proprietà Proprietà di CSS Esistono le seguenti sei famiglie di proprietà: Testo Background e colori Font Liste Contenitori (box model) Posizionamento Non sempre il supporto da parte dei browser
Corso di CSS. Prerequisiti. Modulo L2 1.2-CSS e HTML. Conoscenza di base del linguaggio HTML. M.Malatesta 1.2-CSS-CSS e HTML-05 12/01/2014
Corso di CSS Modulo L2 1.2-CSS e HTML 1 Prerequisiti Conoscenza di base del linguaggio HTML 2 1 Introduzione In questa Unità vediamo come si collegano i fogli di stile con il codice contenuto in una pagina
CSS: Cascading Style Sheet
CSS: Cascading Style Sheet Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it Corso di
Progettazione di siti web a.a. 2015/16
CSS per la tipografia web Progettazione di siti web a.a. 2015/16 Fogli di stile: tipografia web Maria Simi Marzo, 2016 [Manuale di riferimento del W3C] Gli stili per i caratteri Gli stili per il testo
INSERIMENTO. Un foglio di stile può essere esterno e interno: Un foglio esterno si carica: Un foglio interno può essere inserito
CSS I FOGLI DI STILE HTML serve informare il browser di quali sono le componenti necessarie a mostrare un documento e ad articolare il documento in blocchi semantici. I fogli di stile (Cascading Style
Architettura dell Informazione
Architettura dell Informazione 7. - Cascading Style Sheets (CSS) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://pages.di.unipi.it/milazzo milazzo di.unipi.it Master in Turismo e ICT
INFORMATICA CSS Roberta Gerboni
2017 - Roberta Gerboni Un documento HTML può essere visto come un insieme di blocchi (contenitori) sui quali si può agire con stili diversi. Ogni tag HTML definisce un blocco. Si ha quindi una gerarchia
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:
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
CSS 5. Proprietà di CSS. Indentazione del testo. Proprietà del testo. Proprietà
CSS 5 Proprietà Proprietà di CSS Esistono le seguenti sei famiglie di proprietà: Testo Background e colori Font Liste Contenitori (box model) Posizionamento Non sempre il supporto da parte dei browser
Lezione del corso CSS - Web Design ed Accessibilità secondo il W3C con CSS ed XHTML
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.03. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
CSS 3. Pseudoclassi 2. Pseudoclassi 1. Pseudoclassi e pseudoelementi
CSS 3 Pseudoclassi e pseudoelementi Pseudoclassi e pseudoelementi In CSS2 lo stile normalmente è collegato ad un elemento in base alla sua posizione nell albero del documento (document tree) In alcuni
CSS IN PASSATO ABBIAMO DETTO.. Introduzione. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti
CSS Introduzione CSS3 INTRODUZIONE IN PASSATO ABBIAMO DETTO.. Con HTML non possiamo produrre siti come quelli che conosciamo, ma solo specificare dei contenuti Con CSS specificheremo lo stile con il quale
Cascading Style Sheet
I fogli di stile Cascading Style Sheet Master di I livello Viaggi Mediterranei: Itinerari Turistici, Comunicazione e Culture (si ringrazia il dott. Claudio Schifanella, che ha concesso l uso del materiale)
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
CSS = Cascading Style Sheets o Fogli di stile Serve a definire la formattazione di una pagina web
CSS CSS = Cascading Style Sheets o Fogli di stile Semplici file di testo separati dalla pagina HTML ma collegati ad esse mediante link oppure regole scritte all interno della pagina Serve a definire la
CSS 3. Pseudoclassi e pseudoelementi
CSS 3 Pseudoclassi e pseudoelementi Pseudoclassi e pseudoelementi In CSS2 lo stile normalmente è collegato ad un elemento in base alla sua posizione nell albero del documento (document tree) In alcuni
Tipi di testo. Esempio 4. Enfasi. Inserire immagini. Esempio 5 INFO WEB LEZIONE N.4
Tipi di testo INFO WEB LEZIONE N.4 RAVENNA, 13 MARZO 2008 All interno di un documento HTML è possibile inserire due tipi di testo Titoli Sei livelli di grandezza , ,, Paragrafi
<!-- TESTO DEL COMMENTO
Il corpo della pagina: il tag Come abbiamo già avuto modo di osservare, il tag definisce ed identifica il corpo della pagina, cioè la "porzione visibile" di un qualsiasi documento HTML. Avendo
CSS (Cascading Style Sheets) HTML (Hyper Text Markup Language) HTML: stili. A.Lioy - Politecnico di Torino ( ) F.1
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
CSS Cascading Style Sheet Parte 2 (b)
CSS Cascading Style Sheet Parte 2 (b) Dr. Ing. Information Management Systems (IMS) Research Group, Dipartimento di Ingegneria dell Informazione, Università degli Studi di Padova {silvello}@dei.unipd.it
CSS Proprietà del box model
Laboratorio di Tecnologie Web CSS Proprietà del box model Dott. Stefano Burigat www.dimi.uniud.it/burigat Box model Abbiamo introdotto in precedenza il concetto fondamentale di box model, in base al quale
CSS E FOGLI DI STILE Guida Css di base
2017 CSS E FOGLI DI STILE Guida Css di base Progetto di Alternanza Scuola-Lavoro Anno scolastico 2016-2017 Istituto Tecnico Enrico Fermi, Siracusa Eleonora SikeWEB 01/01/2017 Introduzione ai fogli di stile
Copyright (c) 2008, 2009, 2010 Fabio Proietti
Copyright (c) 2008, 2009, 2010 Fabio Proietti Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version
CSS. Politecnico di Milano Facoltà del Design Bovisa. Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione
CSS Politecnico di Facoltà del Design Bovisa Prof. Gianpaolo Cugola Dipartimento di Elettronica e Informazione cugola@elet.polimi.it http://home.dei.polimi.it/cugola I cascading style sheet I CSS permettono
CSS 1. Introduzione a CSS: Cascading Style Sheets
CSS 1 Introduzione a CSS: Cascading Style Sheets CSS CSS è l acronimo di Cascading Style Sheets Fogli di stile in cascata Un foglio di stile specifica come un browser deve posizionare, formattare e visualizzare
CSS COME PRESENTARE UNA PAGINA WEB
CSS COME PRESENTARE UNA PAGINA WEB Cos è CSS Il CSS (Cascading Style Sheets, in italiano fogli di stile a cascata), in informatica, è un linguaggio usato per definire la formattazione di documenti HTML