CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
|
|
|
- Olivia Fabbri
- 7 anni fa
- Visualizzazioni
Transcript
1 CASCADING STYLE SHEET Elementi base di CSS e i Frames CSS
2 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 dei fogli di stile si è resa necessaria per separare i contenuti dalla formattazione. Wikipedia
3 CASCADING STYLE SHEET
4 SEPARAZIONE CONTENUTO/LAYOUT Prof R.Bresolin a.s CSS Base I tag html erano stati in origine studiati per definire il contenuto di un documento html Il layout del documento doveva essere preso in carica dal browser, senza usare tag di formattazione
5 SINTASSI CSS La più semplice regola css è composta di tre parti: un selettore, una proprietà ed un valore: selettore{proprietà: valore} Il selettore può essere l elemento html che si vuole definire La proprietà è l attributo che si vuole cambiare Alla proprietà è associato un valore La proprietà e il valore sono separati da due-punti e racchiusi tra parentesi graffe body {color: black}
6 COME INSERIRE UN FOGLIO DI STILE Fogli di stile esterni Fogli si stile interni Stile inline
7 FOGLI DI STILE ESTERNI Foglio esterno: ideale se l applicazione ha molte pagine Si può cambiare l aspetto di un intero sito modificando un solo file Ogni pagina deve essere collegata al foglio di stile Tag <link> all interno della sezione head <head> <link rel="stylesheet" type="text/css" href= miostile.css" > </head> Il browser leggerà le definizioni di stile dal file miostile.css, e formatterà il documento di conseguenza
8 I LINK IN HTML In html i link si realizzano nel modo seguente Ecco un esempio di <a href =" index. html ">link a un documento nella stessa directory </a> del documento corrente, un esempio di: <a href =" subdir / pagina. html ">link a un documento in una sotto - directory </a> e un esempio di <a href ="../ index. html ">link a un documento in una directory superiore </a>.
9 SCRIVERE UN CSS ESTERNO Un foglio di stile esterno può essere scritto in qualsiasi editor di testo Il file non deve contenere alcun tag html Il foglio di stile deve essere salvato con estensione.css Un esempio di foglio di stile: body { background-image: url( immagini/miosfondo.gif ); } p {margin-left: 20px}
10 FOGLI DI STILE INTERNI Un foglio di stile interno può essere usato quando un documento html ha uno stile unico Si definisce nella sezione head con il tag <style> <head> <style type="text/css > hr {color: red} p {margin-left: 20px} body {background-image: url("immagini/foto.jpg")} </style> </head> Il browser leggerà le definizioni di stile, e formatterà il documento in accordo ad esse
11 STILE INLINE Uno stile inline fa perdere molti dei vantaggi dei fogli di stile, perché mischia il contenuto con la presentazione Metodo da usare quando uno stile deve essere applicato ad una sola occorrenza di un elemento in un documento Per definire uno stile inline si usa l attributo style dell elemento da formattare L attributo style può contenere qualsiasi proprietà css L esempio mostra come cambiare il colore e il margine sinistro di un singolo paragrafo <p style="color: green; margin-left: 20px"> Testo del paragrafo </p>
12 ORDINE DI PRIORITÀ (CASCATA) Tutti gli stili vengono raccolti a cascata in un nuovo foglio di stile virtuale secondo le seguenti regole Default del browser (priorità più bassa) Foglio di stile esterno Foglio di stile interno (nella sezione <head>) Stile inline (nell elemento html priorità più alta)
13 CSS Sintassi
14 REGOLE Se il valore è composto da più parole, bisogna racchiuderlo tra virgolette doppie Se si vuole specificare più di una proprietà, bisogna separarle con un punto-e-virgola L esempio mostra come definire un paragrafo con allineamento centrato e colore del testo rosso p { text-align: center; color: red; font-family: "sans serif"; }
15 RAGGRUPPARE I SELETTORI Si possono raggruppare i selettori: bisogna separare i selettori con una virgola Nell esempio sotto, gli elementi di titolo sono raggruppati; ogni elemento di titolo sarà verde h1, h2, h3, h4, h5, h6 { } color: green;
16 SELETTORE DI CLASSE Con il selettore di classe si possono definire stili diversi per uno stesso tipo di elemento html Es. due tipi di paragrafo: uno allineato a destra e uno allineato al centro p.firma {text-align: right} p.importante {text-align: center} Bisogna impostare l attributo class nel documento html <p class= firma"> Paragrafo che sarà allineato a destra </p> <p class="importante"> Paragrafo che risulterà centrato. </p>
17 CLASSE Si può anche omettere il nome di tag nel selettore per definire uno stile da applicare a tutti gli elementi html di una certa classe Esempio: allineare al centro tutti gli elementi di classe importante.importante {text-align: center} Sia l elemento h1 che quello p sono di classe importante Entrambi gli elementi seguiranno le regole del selettore.importante <h1 class="importante"> Titolo centrato </h1> <p class="importante"> Anche questo paragrafo centrato </p>
18 SELETTORE ID Mentre un selettore class può applicarsi a molti elementi su una pagina, il selettore id si applica ad un solo elemento Un attributo id deve essere unico all interno del documento Es.: regola di stile che sarà applicata ad un elemento p che ha il valore di id posto a para1 p#para1 { text-align: center; color: red; } Es.: regola di stile che sarà applicata all elemento avente come id il valore xyz #xyz {color: green} <h1 id= xyz">esempio di testo</h1>
19 COMMENTI Si possono inserire nel css commenti che possono essere d aiuto quando il codice sorgente deve essere in seguito modificato I commenti vengono ignorati dal browser Un commento comincia con /* e termina con */ /* commento*/ p { text-align: center; /* altro commento */ color: black; font-family: arial; }
20 CSS Prof R.Bresolin a.s CSS Base
21 CSS Proprietà
22 SFONDO background-color Imposta il colore di sfondo di un elemento background-image Imposta una immagine come sfondo url( ) background-repeat Imposta la ripetizione di una immagine di sfondo repeat, repeat-x, repeat-y, no-repeat background-attachment Immagine di sfondo fissa o che scorre con il testo scroll, fixed background-position Posizione di partenza di una immagine di sfondo top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos background Imposta tutte assieme le proprietà dello sfondo
23 SFONDO body { background-color: #FFFF00; background-image: url( 2.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; }
24 TESTO color Colore del testo direction Direzione del testo ltr, rtl text-align Allineamento left, right, center, justify text-decoration Decorazione none, underline, overline, line-through, blink text-indent Indentazione della prima riga length, % text-shadow Ombra text-transform Controlla le lettere none, capitalize, uppercase, lowercase
25 TESTO div {font-family: Georgia, "Times New Roman", serif;} p { font-family: verdana, arial, sans-serif; font-size: 12px; font-style: italic; font-weight: bold; }
26 FONT font-style Stile, corsivo normal, italic font-variant Maiuscoletto o normale normal, smallcaps font-weight Peso, grassetto normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 font-size Dimensione xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, % font-family Lista con priorità di nomi di famiglie di font e/o nomi di famiglie generiche family-name, genericfamily (serif, sans-serif, cursive, fantasy, monospace) font Imposta tutte le proprietà del font
27 DIMENSIONI FONT px: misura in pixel (fissa rispetto a preferenze utente e risoluzione monitor) pt: punti tipografici, 1/72 pollice (fissa rispetto a preferenze utente) em: rispetto alla dimensione di font attuale per l elemento %: rispetto alla dimensione di font dell elemento genitore
28 DIMENSIONI FONT p {font-size: 12px;} div {font-size: 50%;} h2 {font-size: 1.2em;}
29 CSS Prof R.Bresolin a.s CSS Base
30 CSS Box model
31
32 BORDI border-width Ampiezza dei quattro bordi 1-4 valori () border-style Quattro bordi 1-4 valori none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-color Colore 1-4 valori color border Imposta tutte le proprietà (uguali) per i quattro bordi important { border: 2px dashed red; } border-top, border-right, Imposta tutte le proprietà per il bordo superiore, destro, blockquote { border-left: 2px solid black; } I bordi top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate: es. border-topwidth
33 BORDER E OUTLINE: GESTIRE I BORDI CON I CSS Definire lo stile di un singolo bordo Iniziamo a vedere come impostare le proprietà per un singolo bordo. Questa la sintassi di base con le proprietà singole: selettore { border-<lato>-color: <valore>; border-<lato>-style: <valore>; border-<lato>-width: <valore>; }
34 BORDER E OUTLINE: GESTIRE I BORDI CON I CSS In entrambi gli esempi di sintassi sostituite a <lato> uno degli indicatori dei quattro lati: top, right, bottom o left. Per quanto concerne i valori, come si vede dall elenco delle proprietà, di ciascun lato si possono definire per il bordo tre aspetti: il colore (color); lo stile (style); lo spessore (width). I valori possibili per il colore sono: un qualsiasi colore; la parola chiave inherit.
35 BORDER E OUTLINE: GESTIRE I BORDI CON I CSS Lo stile di un bordo può invece essere espresso con una delle seguenti parole chiave: Stile bordo Prof R.Bresolin a.s CSS Base Descrizione none hidden dotted dashed solid double groove ridge inset outset l elemento non presenta alcun bordo e lo spessore equivale a 0 equivalente a none bordo a puntini bordo a lineette bordo solido e continuo bordo solido, continuo e doppio tipo di bordo in rilievo altro tipo di bordo in rilievo effetto incastonato effetto sbalzato
36 MARGINI ESTERNI E INTERNI margin Spazio attorno agli elementi 1-4 valori È possibile usare valori negativi per sovrapporre il contenuto I margini top, right, bottom, left possono essere cambiati indipendentemente usando propietà separate, es. margin-top È possibile usare la scorciatoia margin per impostare tutti i margini padding Spazio tra il bordo e il contenuto degli elementi 1-4 valori Non sono ammessi valori negativi I padding top, right, bottom, left possono essere cambiati indipendentemente usando proprietà separate, es. padding-top È possibile usare la scorciatoia padding per impostare tutti i padding
37 DIMENSIONI width Ampiezza auto, length, % height Altezza auto, length, %
38 POSIZIONE bottom Distanza del limite inferiore di un elemento rispetto all elemento che lo contiene auto, %, length left Sinistra auto, %, length right Destra auto, %, length top Superiore auto, %, length vertical-align Allineamento verticale top, middle, bottom, baseline, sub, super, text-top, text-bottom, length, % position Modalità di posizionamento static, relative, absolute, fixed, inherit float Elementi posizionati a lato, circondati da testo left, right, none, inherit
39 VISIBILITÀ z-index Ordine nello stack (rilievo, valori più alti sono in primo piano) auto, number overflow Impostazione per contenuto più ampio dell area disponibile visible, hidden, scroll, auto visibility Visibilità visible, hidden (occupa spazio) display Visualizzazione none (non occupa spazio), block, inline,
40 HTML (dalla versione 4) consente di visualizzare più documenti nella stessa finestra del browser attraverso l'uso di frames L'uso dei frame in HTML prevede la presenza di un documento principale (detto frameset document) che definisce la strutturazione in frames (sotto-aree) della finestra del browser e contiene i riferimenti delle pagine da richiamare nei vari frames. Le pagine web richiamate nei vari frames sono normali documenti HTML. E' prevista una minima forma di interazione tra i frames, tipicamente un link presente in un frame può essere aperto in un altro frame (tipico esempio: frame a lato della finestra con indice delle pagine del sito) FRAMES (1)
41 Un classico esempio: FRAMES (2)
42 Il frameset document e un documento HTML che al posto del <body> ha un tag <frameset> che descrive la strutturazione in frames della pagina Il tag <frameset> può avere due attributi rows e cols che specificano le dimensioni di ogni riga e colonna. In questo modo si può strutturare la pagina come una tabella Le dimensioni possono essere espresse in pixel o in percentuale sulla dimensione della finestra del browser: <frameset cols="200,800"> indica una pagina con due colonne di larghezza 200 e 800 pixel <frameset cols="200,800,*"> indica una pagina con tre colonne in cui * rappresenta \tutto quello che avanza in larghezza" <frameset cols="30%,70%"> indica una pagina con due colonne <frameset cols="50%,50%" rows="50%,50%"> indica una pagina divisa in quattro parti uguali FRAMES (3) Prof R.Bresolin a.s CSS Base
43 Il contenuto del tag <frameset> e una sequenza di tag <frame>, uno per ogni frame della pagina Il tag <frame> ha due attributi principali: name che associa un nome al frame, e src che contiene l'url del documento HTML da caricare nel frame I vari frame vengono associati alle posizioni nella griglia definita dal tag <frameset> in maniera ordinata da sinistra a destra e poi dall'alto verso il basso All'interno del tag <frameset> ci può essere un tag <noframes> che contiene un body HTML da visualizzare se il browser non supporta i frames FRAMES (4)
44 Un semplice esempio di documento HTML con frames: Dove elenco.html potrebbe essere il seguente: FRAMES (5)
45 Il risultato: FRAMES (6)
46 E' possibile fare in modo che i link presenti in un frame vengano aperti in un altro frame o nell'intera pagina Si usa l'attributo target di <a> specificando il nome del frame (attributo name di <frame>) in cui si vuole aprire il link Ad esempio, modifichiamo elenco.html come segue: FRAMES (7)
47 Il risultato: FRAMES (8)
48 INSERIRE UN FOGLIO DI STILE INTERNO CSS In alcuni casi è utile definire un foglio di stile interno per dichiarare un elemento particolare, un box, questo elemento va dichiarato (e ne vanno definite le caratterisitche) nell head del foglio html in questo modo: <html><head> <title>.</title> <style type="text/css"> #box {.. </style>.. </head>
49 INSERIRE UN FOGLIO DI STILE INTERNO CSS 2 Il box per poter essere utilizzato va poi richiamato all interno del body in questo modo: <body> <div id="box">..</div>. </body> </html> All interno del tag <div id=.> possiamo inserire qualunque elemento di testo.
50 GESTIONE DEL COLORE Si tratta di sedici keyword che definiscono i colori della palette VGA standard di Windows: Ecco la lista completa: black navy blue maroon purple green red teal fuchsia olive gray lime aqua silver yellow white L ordine è quello dei colori visualizzati nell immagine.
51 GESTIONE DEL COLORE 2 Visti i sistemi per rappresentare i colori, dobbiamo ora chiarire un aspetto importante. Per ogni elemento si possono definire almeno tre colori: il colore di primo piano; il colore di sfondo; il colore del bordo; La proprietà color definisce esclusivamente: il colore di primo piano, ovvero quello del testo; il colore del bordo di un elemento quando non si imposti esplicitamente quest ultimo con le proprietà border o bordercolor.
52 OPACITY Con opacity è possibile definire il livello di trasparenza di qualunque elemento. Di fatto, come recita la specifica, con opacity regoliamo il modo in cui un oggetto presente sulla pagina si fonde nella resa a schermo con lo sfondo. div {background:white; color:black; opacity: 0.5} esempio #box1 { width:400px; height:400px; padding:20px; color:#000; background-color: white; opacity:0.5; } Le cose essenziali da notare sono due: il box è ora semi-trasparente (si intravede la texture dello sfondo); la trasparenza applicata con opacity viene ereditata da tutti gli elementi discendenti del div #box1; è quindi semi-trasparente anche il testo, e sarebbe stata semi-trasparente anche un immagine inserita all interno del div.
53 COLORE RGB Da sempre, nei CSS, è possibile definire un colore con una notazione RGB, impostando cioè un valore per ciascun componente della tripletta di colori che è alla base di questo modello: Rosso (Red), Verde (Green), Blue (Blue). I valori possono essere espressi in percentuale: body {background-color: rgb(100%, 100%, 100%)} oppure usando una scala che va da 0 a 255: body {background-color: rgb(255, 255, 255)}
54 SFONDI MULTIPLI I CSS3, invece, abbattono questo limite, consentendo agli sviluppatori di definire più immagini di sfondo per uno specifico elemento. Ecco un esempio di codice che mostra come definire le immagini multiple: background-image: url(immagine1.png), url(immagine2.png); Come si vede, i valori relativi all URL di ciascuna immagine vanno separati da una virgola. a specifica chiarisce poi un fattore decisivo: le immagini di sfondo vengono visualizzate su livelli diversi. L immagine definita per prima nella lista apparirà sul primo livello, la seconda su un livello posto dietro al primo, e così via La cosa è rilevante, ad esempio, nel caso di immagini che vadano a sovrapporsi o nel caso si utilizzino texture (vanno messe per ultime).
55 SFONDI MULTIPLI: ESEMPI #box { width: 497px; height: 700px; margin: 20px auto; border: 1px solid #333; background-image: url(topribbon.png), url(bottomribbon.png), url(paper.jpg); background-position: top left, bottom left; background-repeat: no-repeat, norepeat, no-repeat; background-color: white; }
56 BORDER-RADIUS Prof R.Bresolin a.s CSS Base È una proprietà a sintassi abbreviata (shorthand) con cui è possibile definire con una sola regola i valori di arrotondamento per tutti e quattro gli angoli di un elemento. La proprietà accetta fino a quattro valori per ciascun raggio dell angolo (quattro per il raggio orizzontale e quattro per quello verticale). I valori relativi al raggio verticale, se espressi, vanno separati da quelli relativi al raggio orizzontale con una slash (/). Partiamo da degli esempi di base in cui al div #box è stata applicata questa semplice regola: #box {border-radius: 20px} #box {border-radius: 20px 40px 60px 80px}
57 BORDER-RADIUS Prof R.Bresolin a.s CSS Base Vediamo ora un esempio completo: <html><head> <title>bordi - Border-radius - Esempio</title> <style type="text/css"> #box { background: #4c74be; width: 300px; padding: 30px; border-radius: 20px 40px 20px 40px/130px 150px 70px 90px; </style> </head> <body> <div id="box">questa è una prova di uso di un box con gli spigoli arrotondati </div> </body> </html>
58 BOX-SHADOW box-shadow: 5px 5px 10px 2px #333333; La sintassi di base prevede la definizione di quattro valori numerici: Il primo valore (5px) imposta lo spostamento dell ombra in senso orizzontale. Essendo il valore positivo, l ombra viene collocata sul lato destro del box. Se si usano valori negativi l ombra viene collocata sul lato sinistro. Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l ombra viene collocata sul lato inferiore del box. Usando valori negativi l ombra viene collocata sul lato superiore del box. Il terzo valore (10px) definisce il livello di sfocatura (blur radius) dell ombra: più alto è questo valore, più sfocata apparirà l ombra. Si usi 0 se si desidera un ombra netta e senza sfocatura. Non sono permessi valori negativi. Il quarto valore (2px) imposta il livello di diffusione (spread radius) dell ombra. Più i valori sono alti, più l ombra tenderà ad espandersi, in tutte le direzioni. Se invece si usano valori negativi, l ombra tende a contrarsi, fino a scomparire del tutto. La nostra regola si chiude con l indicazione del colore dell ombra (#333333).
59 BOX-SHADOW 2 Esempio #box1 { background: rgb(238, 238, 238); width:200px; padding: 10px; box-shadow: 5px 5px 10px 2px #333333; } Si ottiene così:
60 BOX-SHADOW 3 LA PAROLA CHIAVE INSET Usando questo valore l ombra non si colloca all esterno del box, ma al suo interno. Esempio #box2 { background: rgb(238, 238, 238); width:200px; padding: 10px; box-shadow: 5px 5px 10px 2px # inset; } Si ottiene così:
61 BACKGROUND-ORIGIN Prof R.Bresolin a.s CSS Base La proprietà background-origin serve a specificare relativamente a quale area di un elemento avviene il posizionamento di un immagine di sfondo. Di fatto, è usata sempre in combinazione con le proprietà background-image e background-position. background-origin non può essere applicata quando e se la proprietà background-attachment è impostata sul valore fixed. La proprietà prevede tre diversi valori: padding-box: la posizione dello sfondo è relativa all area del padding (padding box); border-box: la posizione dello sfondo è relativa al bordo definito per l elemento; content-box: la posizione dello sfondo è relativa all area del contenuto.
62 BACKGROUND-ORIGIN: ESEMPIO E SINTASSI Sul primo box (Box 1), abbiamo posizionato lo sfondo relativamente all area del padding: div#box1 { width: 450px; padding: 200px; border: 10px dashed red; background: url( '); background-repeat: no-repeat; background-position: 0 0; background-origin: padding-box; } Si ottiene così
63 LAYOUT MULTICOLONNA Sono le proprietà essenziali, quelle con cui si imposta il layout multi-colonna nei suoi fondamenti: column-width column-count column-gap column-rule Al momento queste quattro proprietà sono le uniche del modulo a godere di un supporto esteso sui vari browser. Proprietà per la gestione delle colonne Le ultime due proprietà definite nel modulo consentono di gestire altrettanti importanti aspetti di un layout multi-colonna: column-span column-fill Con column-span possiamo decidere per quante colonne del layout un certo elemento si può espandere. columnf-fill serve a bilanciare nel modo adeguato il contenuto tra le varie colonne.
64 LAYOUT MULTICOLONNA: COLUMN-WIDTH E COLUMN-GAP Un primo modo per suddividere il testo su più colonne consiste nell uso della proprietà columnwidth. Ecco il codice: #container { width: 750px; margin: 20px auto; -column-width: 350px; column-gap: 50px; } Si ottiene:
65 LAYOUT MULTICOLONNA: COLUMN-WIDTH E COLUMN-GAP, COMPATIBILITÀ Per rendere il contenuto dei nostri elementi compatibile con la maggior parte dei browser è buona norma inserire del codice che migliora l eseguibilità da parte dei browser stessi: -webkit-column-width:.; -webkit-column-gap:.; -moz-column-width:.; -moz-column-gap: ; } Prof R.Bresolin a.s CSS Base
66 LAYOUT MULTICOLONNA: COLUMN-WIDTH E COLUMN-GAP, LEGGIBILITÀ DEL CODICE Complessivamente si ottiene quindi per esempio: #prova_colonne { width: 750px; margin: 20px auto; -webkit-column-width:350px; -webkit-column-gap:25px; -moz-column-width:350px; -moz-column-gap:25px; column-width: 350px; column-gap: 25px; } Prof R.Bresolin a.s CSS Base
67 BIBLIOGRAFIA-SITOGRAFIA Cloud, Gallo Sirsi, Minerva Scuola PHP, Camagni Nicolassi, Hoeply z3/appunti_html.pdf /dams-laboratorio-appunti-2.pdf 1-WebProg/slides/3-HTML-ParteI.pdf
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
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,
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:
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
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
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
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:
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
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
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
CSS 4. Tipi di dati, lunghezze ed unità di misura
CSS 4 Tipi di dati, lunghezze ed unità di misura Tipi di dati in CSS Esistono i seguenti tipi di dati Tecnologie di Sviluppo per il WEB 2 Numeri
CASCADING STYLE SHEETS. Prof. Rocco Ciurleo - ITIS "M. M. Milano" Polistena
CASCADING STYLE SHEETS I fogli di stile o CSS (acronimo di Cascading Style Sheets) sono uno strumento di formattazione delle pagine web che consente di personalizzare l'aspetto della pagina senza agire
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
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
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
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
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 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
Applicazione Ipermediali 2007/2008
Applicazione Ipermediali 2007/2008 CSS: esempi pratici Politecnico di Milano Obiettivi Aumentare la confidenza con le regole CSS Dimostrare alcune problematiche relative alla compatibilità tra browser
HTML. Hyper Text Markup Language
HTML Hyper Text Markup Language IL WEB Le componenti principali del web sono: HTML: definizione del contenuto delle pagine CSS: definizione dell aspetto delle pagine Javascript: definizione del comportamento
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
<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
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
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
APPUNTI DI HTML (QUARTA LEZIONE)
APPUNTI DI HTML (QUARTA LEZIONE) 1. LA STRUTTURA BASE DELLE TABELLE Le tabelle sono una parte estremamente importante del codice HTML. Sono uno strumento indispensabile per gestire i layout grafici. Immaginiamo
Applicazioni web. Sommario DHTML - CSS CSS. Elementi di raggruppamento Markup semantico. Sintassi Proprietà. Applicazioni web.
Applicazioni web Parte 2 DHTML - CSS Sommario DHTML Elementi di raggruppamento Markup semantico CSS Sintassi Proprietà 1 DHTML Dynamic HTML Dynamic Html non è uno standard definito dal World Wide Web Consortium
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
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
Creazione di tabelle.
Creazione di tabelle. Argomenti trattati: - Premessa: Cosa sono le tabelle in HTML. - Costruiamo una tabella: Come realizzare semplici tabelle con i tag principali ed i loro attributi. - Personalizziamo
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
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 6 Introduzione agli Style Sheets 6.1 Cosa sono gli Style
Progettazione multimediale
Progettazione multimediale Le tabelle 1 Obiettivi Perché si usano le tabelle Le proprietà delle tabelle Inserimento e modifica delle proprietà 2 Perché si usano le tabelle Una pagina Web è formata da testo
Tabelle HTML. Tabelle Un po di notazione.
Tabelle HTML!! Le tabelle in HTML permettono di rappresentare tabelle di dati ", ma anche di formattare del testo, delle immagini, altre tabelle in righe e colonne, possono cioè essere usate per l impaginazione
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)
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
Introduzione ai CSS. CSS esterni e interni. Proprietà di base. selettore { proprietà: valore } selettore { proprietà1: valore1; proprietà2: valore2 }
Introduzione ai 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
Lezione 7: Introduzione ai layout
Lezione 7: Introduzione ai layout Principali tipi di layout; Gli strumentidel mestiere: Il box model; Elementi di blocco e in linea; e ; Il posizionamento. Tutorial: un semplice layout a una
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09
CSS (parte 3) Strumenti informatici per giornalisti AA 2008/09 Selettori class e id! Sono due attributi fondamentali applicabili a tutti gli elementi! Consentono di superare le limitazioni intrinseche
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
APPLICAZIONI WEB E INTRANET CON PHP
APPLICAZIONI WEB E INTRANET CON PHP Novembre 2005 Dott. Ing. Bianchini Stefano CSS Concetti di base Cascatine Syle Sheets (CSS) è uno degli standard del W3C che consentono di controllare l aspetto visivo
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
(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
L'istruzione nei CSS è composta di tre parti: un selettore, una proprietà e un valore: selettore {proprietà: valore}
Manuale di CSS Autore: Ugo Romano Introduzione Introduzione I Cascade Style Sheets (Fogli di Stile a Cascata) sono istruzioni relative alla formattazione, al posizionamento e al rendering di una o più
Indice generale. Introduzione...xiii. Gli standard e i CSS...1
Introduzione...xiii Capitolo 1 Capitolo 2 Capitolo 3 Gli standard e i CSS...1 Contenuti e formattazione: due oggetti distinti... 1 Le zuppe di codice... 2 L introduzione dei CSS... 4 I vantaggi degli standard...
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.
Una pagina web inizia sempre con il tag <html> e si conclude con il tag </html> : ogni elemento che compone la pagina sarà racchiuso tra essi.
HTML per semplici pagine web HTML è l acronimo di Hypertext Markup Language ( Linguaggio di contrassegno per gli Ipertesti ) e NON è un linguaggio di programmazione E un linguaggio che permette di indicare
HTML 5. Tabelle. Bordi di una tabella. Il tag <TABLE> Le tabelle. Tag fondamentali. Costruzione di tabelle riga per riga. Esempi
HTML 5 Tabelle Tag fondamentali Costruzione di tabelle riga per riga Le tabelle Esempi 1 Tecnologie di Sviluppo per il WEB 2 Il tag Una tabella è suddivisa in righe e ciascuna riga è suddivisa
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)
Responsive Web Design
Responsive Web Design Università di Pisa pievatolo@dsp.unipi.it 26 aprile 2015 Sommario Griglie fluide, immagini flessibili, e oltre 1 Griglie fluide, immagini flessibili, e oltre Che cosa significa responsive?
MACROSTRUTTURA DEL DOCUMENTO HTML. Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO
MACROSTRUTTURA DEL DOCUMENTO HTML Il documento HTML si divide in due parti: l INTESTAZIONE e il CORPO DEL DOCUMENTO Denominazione Nome del marcatore Descrizione Documento All'inizio e alla
Introduzione all HTML
prof. ing. Dino Molli SVILUPPO SOFTWARE - FORMAZIONE E CONSULENZA INFORMATICA MARIGLIANO (NA) http://www.dinomolli.it info@dinomolli.it Dispense a cura del prof. ing. Dino Molli Introduzione all HTML Introduzione
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
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
Corso di CSS. Prerequisiti. Modulo L2. 1-Background e font. Conoscenza di base linguaggio HTML. M.Malatesta 1-CSS-Background e font-08 23/01/2014
Corso di CSS Modulo L2 1-Background e font 1 Prerequisiti Conoscenza di base linguaggio HTML 2 1 Introduzione In questa Unità descriviamo l utilità dei CSS applicati ai vari elementi di una pagina web.
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
6. Editor Divi. Il layout. Guida Sintetica Wordpress //
6. Editor Divi Divi è un editor visuale che utilizza il sistema drag and drop per creare layout di pagina con facilità. Nella fase di creazione di una nuova pagina o un nuovo articolo, si avrà la possibilità
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
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
Fogli di stile. Cascading Style Sheets.
Fogli di stile Cascading Style Sheets alessandro.marchisio@gmail.com CSS - I Fogli di stile migliorano l'aspetto estetico facilitano la creazione e la manutenzione di siti separano aspetto grafico da contenuto
HTML per tu+ Chiara Pere+
HTML per tu+ Chiara Pere+ Cos é L HTML è il linguaggio con cui potete indicare come i vari elemen7 saranno dispos7 in una pagina Web. L estensione del file è.html e verrà visualizzato corre?amente trascinandolo
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
Informatica d ufficio
Informatica d ufficio Anno Accademico 2008/2009 Lezione N 3 Microsoft Word - prima parte Microsoft Word E un Word processor,cioè un programma che consente di creare e modificare documenti. Prevede numerose
Metodologie Informatiche Applicate al Turismo
Metodologie Informatiche Applicate al Turismo 7. HTML Parte III (Aspetti avanzati) Paolo Milazzo Dipartimento di Informatica, Università di Pisa http://www.di.unipi.it/ milazzo milazzo di.unipi.it Corso
Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura:
COMANDI BASE HTML Ogni documento HTML è contraddistinto dai seguenti comandi di base, che ne definiscono la struttura: Nome del documento All'interno
HTML. I tag HTML (parte 1)
HTML I tag HTML (parte 1) I tag HTML I comandi che il browser interpreta Etichette per marcare l inizio e la fine di un elemento HTML Formato e possono essere tag di apertura: tag di chiusura:
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:
CSS: Colori, background, gradienti
Laboratorio di Tecnologie Web CSS: Colori, background, gradienti Dott. Stefano Burigat www.dimi.uniud.it/burigat Colore di foreground Come abbiamo visto in precedenti esempi, è possibile modificare il
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
HTML: tag. HTML: tag. HTML: tag. HTML: un semplice esempio
HTML: tag Alcuni tag prevedono un identificatore di inizio () e di fine marcatura () altri sono dei tag singoli (es.: , ). Esistono delle codifiche per rappresentare in modo universale
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
MODULO 7 HTML HTML. HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali
MODULO 7 HTML MODULO 6 - HTML 1 HTML HTLM (Hypertext Markup Language) è un linguaggio per la creazione di documenti ipertestuali e ipermediali Un sistema ipertestuale è un insieme di nodi connessi da collegamenti.
Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML
INTERSTENO. Software di elaborazione testi utilizzato
INTERSTENO International Federation for Information Processing Internationale Föderation für Informationsverarbeitung Fédération internationale pour le traitement de l information Professional Word Processing
Anno scolastico INFORMATICA. 2. Conoscere e classificare il software
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI Schiaparelli via Settembrini 4, 20124 Milano tel. 02/2022931 fax 29512285 E-mail schiaparelli@libero.it Gramsci L.go Sereni 1, 20133 Milano tel.
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
(b) - Creazione del layout delle pagine nella vista Layout
(b) - Creazione del layout delle pagine nella vista Layout La vista Layout di Dreamweaver semplifica l utilizzo delle tabelle per il layout delle pagine. Nella vista Layout, è possibile progettare le pagine
- 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
IMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
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
Dott.Ing.Ivan Ferrazzi CSS. Introduzione ai Cascading Style Sheet. Dott. Ing. Ivan Ferrazzi V1.5 del 14/10/2013 1/45
CSS Introduzione ai Cascading Style Sheet Dott. Ing. Ivan Ferrazzi V1.5 del 14/10/2013 1/45 Copyright 2013 Dott.Ing. Ivan Ferrazzi Permission is granted to copy, distribute and/or modify this document
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
HTML. Es: La prossima parola è in <b>neretto</b> Es: La prossima parola è in neretto
HTML Il linguaggio HTML (HyperText Markup Language) utilizza annotazioni (tag) per descrivere come verrà visualizzato il documento sul browser di un client. HTML non è un linguaggio di programmazione ma
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
Tecnologie per il web e lo sviluppo multimediale. Il World Wide Web e (alcuni de)i suoi linguaggi
Tecnologie per il web e lo sviluppo multimediale Il World Wide Web e (alcuni de)i suoi linguaggi Luca Pulina Corso di Laurea in Scienze della Comunicazione Università degli Studi di Sassari A.A. 2015/2016
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
OBIETTIVI MINIMI Anno scolastico TIC-TIT. 1. Foglio elettronico: funzioni fondamentali (Excel)
ISTITUTO TECNICO COMMERCIALE STATALE SCHIAPARELLI-GRAMSCI CLASSI CORSI OBIETTIVI MINIMI Anno scolastico 2010-2011 TIC-TIT OBIETTIVI 1. Foglio elettronico: funzioni fondamentali (Excel) CONTENUTI / tipologia
Esportare in formato epub
Capitolo 9 Esportare in formato epub Il documento di InDesgn è pronto. Il testo è stato letto, redazionato e impaginato correttamente. Gli stili sono stati applicati a tutto il documento e le immagini
Aspetto. Lauri Watts Traduzione italiana: Pino Toscano
Lauri Watts Traduzione italiana: Pino Toscano 2 Indice 1 Aspetto 4 1.1 Generale........................................... 4 1.2 Carattere........................................... 4 1.3 Fogli di stile.........................................
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
Prof. Pagani Corrado HTML
Prof. Pagani Corrado HTML IPERTESTI E MULTIMEDIALITÀ Un ipertesto è un insieme di documenti messi in relazione tra loro per mezzo di parole chiave sensibili (link). Può essere visto come una rete; i documenti
HTML. Hyper Text Mark-Up Language
HTML Hyper Text Mark-Up Language Cos è l HTML? È un linguaggio usato per descrivere documenti ipertestuali disponibili nel Web È un linguaggio di marcatura del testo che descrive il contenuto e il formato
MICROSOFT OFFICE - WORD Programma di videoscrittura. CORSO DI INFORMATICA LIVELLO 1 - Lezione 4-5. Docente Marsili M.
MICROSOFT OFFICE - WORD Programma di videoscrittura Il pacchetto MICROSOFT OFFICE contiene diversi software: Word Excel Power Point Access Publisher Outlook (dalla versione 2010) One Note (dalla versione
Elementi in HTML Un elemento è una componente fondamentale della struttura di un documento di testo. Alcuni esempi di elementi sono testate, tabelle,
HTML: introduzione HTML significa Hyper Text Markup Language I documenti HTML sono file plain-text (anche conosciuti come ASCII) che possono essere creati usando un qualsiasi text editor e possono essere
Creare sfondi accattivanti tramite CSS: i gradients
Creare sfondi accattivanti tramite : i gradients I gradients sono elementi molto importanti che donano ai nostri siti uno stile sorprendente, interessante, ma soprattutto, accattivante. La novità nei gradients
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
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
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5 Unità didattica 1 - Architettura di pagina statica HTML Dimostrazione 1-1: Visualizzazione del sito Unità didattica 2 - Prime operazioni Introduzione a Dreamweaver
LA FORMATTAZIONE Impostare la pagina, i paragrafi e il corpo del testo
LA FORMATTAZIONE Impostare la pagina, i paragrafi e il corpo del testo Prima di apprestarsi alla stesura del documento è opportuno definire alcune impostazioni riguardanti la struttura della pagina, dei