Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
|
|
|
- Tommasa Martino
- 6 anni fa
- Visualizzazioni
Transcript
1 Indice 6. HTML (CONTINUA) FOGLI DI STILE (CSS- CASCADING STYLESHEET) Regole dello stile Classi Esempi di proprietà modificabili e relativi valori DIVISIONS E SPANS Layers e proprietà Z-index ELEMENTO HEAD Il tag <meta> /15
2 6. HTML (continua) 6.1 Fogli di stile (CSS- Cascading StyleSheet) Per stile si intende un insieme di istruzioni di formattazione. Un foglio di stile CSS definisce quindi gli stili che possono essere applicati a pagine o elementi delle pagine. I fogli di stile sono una specifica HTML sviluppata dal World Wide Web Consortium (W3C) e contribuiscono a tenere separato il contenuto dalla formattazione. La modalità più flessibile per l utilizzo di uno stile è quella di definire lo stile in file esterni (stylesheet), che hanno estensione css (NomeFileStile.css). In questo modo potrà essere utilizzato da altri documenti, in qualunque numero e appartenenti a siti diversi, includendo il foglio di stile mediante un indirizzo di tipo URL. Includendo gli elementi di stile in documenti separati si possono ottenere documenti portabili ai quali possono essere applicati differenti stili in rapporto al mezzo di visualizzazione delle pagine. Altre possibilità di applicare gli stili consistono nella creazione di stili a livello dell intero documento o a livello di specifici tag del documento. Nel primo caso lo stile è definito all interno dell intestazione del documento (tag head), nel secondo ricorrendo all attributo style per i singoli tag. Queste modalità sono anche dette stili in linea. E importante considerare che il comportamento degli stili è a cascata. Poiché in un documento possono essere utilizzati più stili, il funzionamento a cascata significa che un secondo stile definito per un blocco di documento si sovrappone al primo (verrà quindi utilizzato il secondo per la visualizzazione della pagina), se il secondo stile si riferisce ad una parte del documento già trattata dal primo. Lo stesso si verifica per un terzo stile rispetto al secondo e così di seguito. Se ad es. si usa uno stile per una parte specifica del documento (es.: intestazione h3) per quella parte verrà usato lo stile lì definito, sovrapponendosi all eventuale stile definito per quella parte da un foglio esterno. In altri termini si applica lo stile più vicino alla parte di documento. La possibilità di usare più stili, unitamente alla caratteristica del funzionamento a cascata, rende possibile, ad es., la creazione di un determinato stile per tutto il sito con variazioni specifiche solo per alcune sezioni, contribuendo alla creazione di un look and feel coerente dell intero sito. Il corretto funzionamento dei fogli di stile richiede che i tag siano privi di errori. Nel caso di browser che non supportano l uso di stylesheet i documenti saranno formattati come se non si fosse fatto uso dello stylesheet. 2/15
3 Esempio sintassi body { color: black; background:white; strong {color: red Le istruzioni usate nei fogli di stile sono dette regole di stile. Le regole sono scritte indicando il nome del tag seguito dall elenco delle proprietà dello stile incluse tra parentesi graffe. Ogni proprietà di stile è individuato con il nome della proprietà, i due punti e il valore da attribuire alla proprietà. Nel caso di più proprietà le stesse sono separate dal carattere punto e virgola. L istruzione dell esempio di sintassi precedente imposta i caratteri in nero e lo sfondo in bianco, mentre le parti di testo enfatizzate con strong appariranno in rosso. Esercizio: <html> <head> <title>stylesheet 1</title> <style> h1{ color: blue; border: thin groove; text-align: center; </style> </head> <body> <h1>primo esempio di stylesheet</h1> <p> Paragrafo 1 senza applicazione di stile</p> <P style="margin-left: 10%; border: ridge; background: #ffffcc"> Paragrafo 2 con applicazione di uno stile nel tag paragrafo</p> <P>Paragrafo 3 senza applicazione di stile</p> </body> </html> 3/15
4 Si tenga presente che in fase di stampa di una pagina web può accadere che il browser non tenga conto del colore di sfondo definito e consideri solo il colore dei caratteri del testo. Per questo motivo impostare il carattere del testo in bianco potrebbe generare in stampa una pagina vuota. Esempio foglio di stile esterno Stile.css /* stile per intestazioni di livello 1 */ h1{color: blue; border: thin groove;text-align: center; /* stile per i paragrafi */ p {color: red; border: ridge; background: #ffffcc"; <html> <head> <title>esempio stylesheet esterno</title> <link href="stile.css" rel="stylesheet" type="text/css"> </head> <body> 4/15
5 <h1>esempio con stylesheet esterno</h1> <p> Paragrafo 1 stylesheet esterno</p> <p> Paragrafo 2 stylesheet esterno</p> <p> Paragrafo 3 stylesheet esterno</p> <p> <b> Paragrafo 4 stylesheet esterno</b></p> </body> </html> Nel codice è presente l istruzione che fa riferimento ad un CSS esterno. L attributo rel impostato al valore stylesheet comunica al browser che l attributo href si riferisce ad un foglio di stile. Il link al foglio di stile dovrebbe essere inserito nell elemento head del documento HTML. Si noti che se una pagina è collegata a un foglio di stile esterno, gli stili incorporati o in linea creati per quella pagina estenderanno o avranno la priorità sulle proprietà specificate nel foglio di stile esterno. Il codice genera il seguente risultato: 5/15
6 6.1.1 Regole dello stile Ciascuna regola di stile (definizione dello stile), è composta da un selettore seguito dalle relative proprietà e valori. Il selettore è usato per creare il link tra la regola e il tag html. selettore {proprietà: valore; proprietà: valore; E consigliabile usare il punto e virgola anche dopo l ultimo valore. Esempi di regole di stile definite in un foglio di stile: H1 { font-size: small; color: red; H2 { font-size: large; color: blue; Nell'esempio H1 e H2 sono i selettori che contengono le proprietà di formattazione dei tag HTML standard da modificare con l attribuzione ai tag dei valori specificati per ciascuna proprietà (fontsize è una proprietà e small è il valore della proprietà font-size). Possono essere specificate più proprietà per un unico selettore separandole con un punto e virgola Classi Le classi di stile sono un insieme di istruzioni di formattazione che possono essere applicate ad una pluralità di tag HTML. L applicazione delle classi avviene aggiungendo esplicitamente la clausola class al tag di apertura dell elemento HTML al quale applicarla e pertanto le classi non vengono applicate in modo automatico per ogni ricorrenza del tag. L uso delle classi apporta ulteriore flessibilità nella costruzione della pagine. E possibile definire gruppi di stile differenti da applicare a tag uguali, il che significa che le classi consentono di alterare solo alcuni elementi. Le classi possono essere definite sia a livello documento sia nei css esterni. Sintassi Selettore.NomeDellaClasse {proprietà: valore; proprietà: valore;.... La sintassi prevede l indicazione del nome del tag seguito da un punto e dal (i) valore(i) degli attributi specificati per quella classe. Il punto non deve essere preceduto e seguito da spazi Allo stile si attribuisce un nome che viene utilizzato nel tag mediante la clausola class seguita dal nome attribuito. Un altra caratteristica delle classi è quella di poter essere anonime. Ciò significa che l insieme degli elementi da alterare, previsti dallo stile, possono essere usati per alterare qualsiasi 6/15
7 elemento (non si riferiscono ad un elemento particolare). In questo caso la sintassi non prevede l indicazione di un tag ma semplicemente di un punto seguito dal nome della classe. Esempi di sintassi h3 { Color: blue; border: thin groove; Questo stile è applicato a tutti gli elementi H3 del documento h3.sceglielementoh3{ Color: red; Margin-left: 40%; Questo stile è applicato solo agli elementi h3 che lo richiamano esplicitamente.classeanonima{ text-align: right; color: green; Questo stile può essere applicato a qualsiasi tipo di tag, richiamandolo esplicitamente, come di seguito illustrato: <h3 class= ClasseAnonima > </h3> <p class= ClasseAnonima > </p> Si noti che l elemento h3 è già stato alterato secondo la formattazione prevista dalla classe ScegliElemento ed è possibile, ove necessario, applicare un altra formattazione. 7/15
8 Esercizio <html> <head> <title>altro esempio di stylesheet</title> <style> h1{ color: red; border: thin groove; h2 { color: green; margin-left: 60%;.myid { text-align: right; color: purple;.myid2 { text-align: right; </style> </head> <body> <h1>altro esempio di stylesheet</h1> <p> Paragrafo senza applicazione di stile.</p> <P style="margin-left: 10%; border: ridge; background: #ffffcc"> Paragrafo con applicazione di uno stile nel tag paragrafo (passato come attributo).</p> <P> Altro paragrafo senza applicazione di stile</p> <h2> Intestazione di tipo h2</h2> <p class="myid"> Questo è il testo che segue l'intestazione h2.</p> <h3 class="myid"> Altra intestazione (tipo h3)</h3> <p class="myid2">etichetta</p> <p style="margin-left: 30%; color: blue"> Altro testo collocato al centro dello schermo.</p> </body> </html> 8/15
9 Il codice produce il seguente risultato: Esempi di proprietà modificabili e relativi valori. Caratteri font-style: normal italic font-weight: normal bold bolder lighter bolder e lighter sono misure relative font-size: [small medium large [smaller larger] smaller e larger sono misure relative Testo text-transformation: none capitalize uppercase lowercase il valore capitalize trasforma le iniziali in caratteri maiuscoli text-align: left right center justify text-indentation: length percentage con il valore percentage il rapporto tra l indentazione ed il resto del testo è mantenuto nel caso in cui la finestra del browser è ridimensionata. 9/15
10 <style type= text/css > body {margin-left: 10%; margin-right: 10%; </style> Questa istruzione imposta i margini della pagina web al 10% dell ampiezza totale della finestra del browser. Trattandosi di una misura relativa le proporzioni dei margini non varieranno nel caso di ridimensionamento manuale della finestra del browser. Indentazione P {text-indent: 3em; margin-top: 0; margin-bottom:0; Con questa istruzione la prima riga di ogni paragrafo rientra di 2 em e la spaziatura tra paragrafi è azzerata. Dimensione dei caratteri H1 {font-size: 150%; H2 {font-size: 100%; H3 {font-size: 200%; Queste istruzioni impostano le dimensioni dei primi tre livelli di intestazione con valori espressi in percentuale rispetto alle dimensioni del testo normale Riquadri Margin: lenght percentage auto {1,2,4 Border-width: thin thick medium lenght {1,2,4 Padding: length percentage {1,2,4 Nel caso dei margini può essere opportuno usare i valori assoluti. Nel caso di valori percentuali e di ridimensionamento della finestra i riquadri potrebbero sovrapporsi in modo disordinato. Border-color: Valore {1,2,4 Border-style: none dotted dashed solid double groove ridge {1,2,4 Width: length percentage auto E consigliata l indicazione del valore in percentuale Height: length auto E consigliata l indicazione del valore assoluto La notazione {1,2,4 indica che possono essere specificati 1,2 o 4 valori che verranno applicati con la modalità riportata di seguito (con riferimento alla proprietà margin): 10/15
11 Numero valori indicati Ordine di applicazione 4 Con la sequenza margine alto, destro, fondo, sinistro 2 Il primo valore è applicato in alto e in fondo, il secondo è applicato a sinistra e a destra 1 Lo stesso valore è applicato ai 4 margini 6.2 Divisions e spans L applicazione degli stili può essere eseguita anche su sezioni di testo tramite i tag div e span. Div suddivide il testo analogamente a come si suddivide un articolo in titolo, sottotitolo,paragrafi, ecc. Span è usato per selezionare una parte specifica di testo (ad es. una parola o una serie di parole). In entrambi i casi si aggiunge ai tag di apertura la clausola class. Esercizio <html> <head> <title>esempio uso del tag span</title> <style>.blugrassetto { color: blue; font-weight:bold;.rossolarger{ color: red; font-size:larger;.greenlarger{ color: green; font-size: larger; </style> </head> <body> <h2>esempio uso del tag span</h2> <p> Paragrafo senza applicazione di stile.</p> <p>paragrafo con applicazione di <span class="blugrassetto">span blugrassetto</span></p> <p>paragrafo con applicazione di <span class="rossolarger">span rossolarger</span></p> <p>paragrafo con applicazione di <span class="greenlarger">span greenlarger</span></p> </body> </html> 11/15
12 Il codice produce il seguente risultato: Layers e proprietà Z-index Una pagina può essere strutturata disponendo elementi su strati collocati su diversi livelli. Per sovrapporre gli elementi occorre che gli stessi siano posizionati sulla pagina mediante i valori top, left, bottom, right e successivamente si usa la proprietà z-index per indicare l ordine di sovrapposizione. Sintassi z-index: n Il valore numerico n indica il livello dello strato. A numeri maggiori corrispondono livelli più alti e quindi un elemento con livello 2 sarà posizionato sopra un elemento con livello 1. Se il valore di z-index non è specificato gli elementi saranno sovrapposti secondo l ordine con il quale appaiono nel codice HTML. Lo stesso si verifica se due elementi hanno lo stesso valore di z-index. Position: absolute relative 12/15
13 Le divisioni devono essere posizionate sullo schermo in modo che l angolo in alto a sinistra parta dai pixel 0,0 Left: n Top: n Indica il posizionamento della divisione in pixel Width: n Height: n Indica la dimensione della divisione in pixel Esercizio <html> <head> <title>layering Text</title> </head> <body> <h1> Layering text</h1> <div style="z-index: 2; left: 50px; top: 250px; position: absolute; color: red; text: white; font-size: 36pt; border: thin groove;"> <p>layer di livello maggiore</p> </div> <div style="z-index: 1; left: 100px; top: 255px; position: absolute; font-size: 46pt; color: magenta; background-color: green; border: thin groove"> <P>Altro testo aggiuntivo</p> </div> <div style="z-index: 1; left: 10; top: 30px; width: 150px; position: absolute; background-color: yellow; color: black; font-size: 18pt;"> <p>testo inserito in un box </div> <div style="position: absolute; top: 280px; left: 300px; width: 25; background-color: #aeae00; color: blue; font-size: 16pt; font-style: italic; z-index=2"> <p> Altro testo in basso a destra </div> <hr> </body> </html> Il codice produce il seguente risultato 13/15
14 6.3 Elemento head Document Type Declaration Per un documento HTML la dichiarazione del tipo di documento, in genere, è: <! doctype html public -//w3c//dtd html 4.0//en > 4.0 indica il numero di versione di HTML, en indica la lingua inglese Per l HTML il W3C ha creato i seguenti DTDs: -loose -strict -transitional -frameset Le DTDs contengono le regole da rispettare se un documento deve essere conforme agli standard HTML (raccomandazioni). La conformità delle pagine può essere verificata con appositi pacchetti software (validatori). 14/15
15 6.3.1 Il tag <meta> Il tag head del documento può contenere, oltre al titolo, anche informazioni di controllo usate dai server e dai browser come ad es. una lista di parole chiave file da includere nel documento, ecc. nonché per l indicizzazione da parte dei motori di ricerca. Si tenga comunque presente che alcuni motori di ricerca ignorano i tag meta ed indicizzano le parole che si trovano direttamente nel corpo della pagina. Le informazioni si aggiungono tramite il tag meta i cui attributi più comuni sono name e content. Per l attributo name non esistono valori predefiniti ed i più usati sono keywords e description. In genere, inserendo le parole chiave, si includono anche le varianti ortografiche per quelle parole che risultano più spesso scritte in modo errato. Un valore di attributo per i tag meta è http-equiv che invia informazioni aggiuntive al browser. Se si imposta l attributo http-equiv uguale a refresh unitamente ad un intervallo di tempo e si imposta un URL tramite l attributo content dopo il periodo di tempo specificato la pagina viene ricaricata automaticamente o il browser viene reindirizzato al nuovo URL indicato. Le informazioni del tag meta non modificano l aspetto della pagina Web. Esempio <! doctype html public -//w3c//dtd html 4.0//en > <html> <head> <base href= > <link rel= Stylesheet href=.test.css type text/css media= screen > <meta name= author content= Anonimo del 700 > <meta http-equiv= expires content= Data + ora di scadenza <meta name= description content= Catalogo della Società Pizza e Mandolini. > <title> Pizza e Mandolini S.p.A. Catalogo in linea</title> </head> <body> </body> </html> Nell esempio il primo meta tag si riferisce all autore del documento. Il secondo, contenente una data di scadenza, comunica al browser di caricare nuovamente la pagina dal server dopo la data di scadenza indicata, invece di utilizzare l eventuale pagina memorizzata nella memoria cache del computer. Si noti che, comunque, il browser può essere configurato in modo da stabilire le modalità di (ri)caricamento delle pagine. Il terzo meta tag contiene la descrizione del documento che dovrà essere usata dai motori di ricerca. 15/15
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
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,
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
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
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
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
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
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
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
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. 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
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:
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
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
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();
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
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
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
INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2. Internet + HTML + HTTP = WWW
1 INTRODUZIONE AL LINGUAGGIO HTML: PARTE 2 Internet + HTML + HTTP = WWW Scopo della esercitazione 2 Conoscere i principali tag HTML Realizzare una propria Home Page utilizzando alcuni semplici tag HTML
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
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 (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
Web Design. Media Dream Academy. Stefano Gaborin
Web Design Media Dream Academy Stefano Gaborin stefano.gaborin@above.company www.above.company I Fogli di stile: CSS CSS è l acronimo di Cascading Style Sheets, ovvero fogli di stile a cascata. Il CSS
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...
HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte
HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo
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
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
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
CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze
7 Posizionare. gli elementi sulla pagina con i fogli di stile CSS
7 Posizionare gli elementi sulla pagina con i fogli di stile CSS Posizionare gli elementi sulla pagina in modo relativo Posizionare gli elementi in modo assoluto Impostare il posizionamento 3D (Z-Order)
Linguaggio per ipertesti
Linguaggio per ipertesti Un linguaggio per descrivere gli ipertesti è l HyperText Markup Language (HTML) Non è il solo (VRML,XML,...) l HTML è un linguaggio di formattazione e permette di formattare del
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
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
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:
(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
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
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
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
Frames. Come organizzare le pagine web usando i frames. Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice
Frames Come organizzare le pagine web usando i frames Definizione Frame = 1. struttura, armatura, telaio 2. inf. videata, schermata, cornice Usare i frame Per poter usare i frame è necessario comunicare
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
JavaScript 5. CSS e JavaScript
JavaScript 5 CSS e JavaScript CSS e JavaScript Attraverso JavaScript è possibile controllare proprietà CSS Possiamo controllare lo stile di un singolo elemento HTML o di un tag in generale Possiamo aggiungere
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 7 Utilizzo avanzato di Style Sheets 7.1 Applicare stili
<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
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
body e i suoi tag HTML 2
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK
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:
HTML 2. Il tag BODY. Nota. Esempio. body e i suoi tag
body e i suoi tag HTML 2 Il tag BODY Indica il corpo del testo Attributi (uso deprecato) BGCOLOR = #rrggbb sfondo TEXT = #rrggbb testo LINK = #rrggbb link VLINK = #rrggbb link visitato ALINK = #rrggbb
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
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
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
Corso di HTML. Prerequisiti. Modulo L3 3 Blocchi di testo
Corso di HTML Modulo L3 3 Blocchi di testo 1 Prerequisiti Formattazione di un testo Struttura a titoli di un testo Giustificazione e allineamento del testo 2 1 Introduzione In questa Unità vediamo altri
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
Laboratorio di Tecnologie Web CSS: Introduzione Dott. Stefano Burigat
Laboratorio di Tecnologie Web CSS: Introduzione Dott. Stefano Burigat www.dimi.uniud.it/burigat Cascading Style Sheets (CSS) è uno standard W3C che definisce gli aspetti di presentazione dei documenti
* 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
HTML Guida di riferimento
Dipartimento di Elettronica ed Informazione Politecnico di Milano Informatica A - GES Prof. Plebani A.A. 2006/2007 HTML Guida di riferimento La presente dispensa e da utilizzarsi ai soli fini didattici
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
<!-- 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. 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
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
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?
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
Prime nozioni di Web-Editing. Liceo Classico Jacopone - Todi - A.S Prof. Marco Bastianelli
Prime nozioni di Web-Editing Classico Jacopone - Todi - A.S. 2016-2017 Prof. Marco Bastianelli Che cos è il Web Editing? ECDL (modulo avanzato Web Editing): La certificazione ECDL Web Editing permette
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
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
Istruzioni per la modifica del template di profilo personale
Istruzioni per la modifica del template di profilo personale per qualsiasi informazione: elisa.pecoraro@di.unito.it Breve presentazione del progetto Il template fornito per la nuova proposta di profilo
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
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
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.........................................
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
(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
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
CSS: Formattazione del testo
Laboratorio di Tecnologie Web CSS: Formattazione del testo Dott. Stefano Burigat www.dimi.uniud.it/burigat Proprietà per la gestione dei font CSS definisce un insieme di proprietà che possono essere utilizzate
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
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
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
SOMMARIO: linguaggio xml. Contenuti. A cura dell Ing. Buttolo Marco INTRODUZIONE...2 STRUTTURA DOCUMENTO XML...2 VISUALIZZAZIONE DOCUMENTI XML...
linguaggio xml A cura dell Ing. Buttolo Marco SOMMARIO: Contenuti INTRODUZIONE...2 STRUTTURA DOCUMENTO XML...2 VISUALIZZAZIONE DOCUMENTI XML...4 1 of 7 INTRODUZIONE: XML è l acronimo di extensible Markup
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
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
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
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)
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
LEZIONE 04. Riepilogo CSS
LEZIONE 04 Riepilogo CSS SELETTORI SELETTORI I selettori sono pattern (criteri di selezione) usati per individuare l'elemento (o gli elementi) a cui si desidera attribuire lo stile. Prova il codice ELEMENTO
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
Video Scrittura (MS Word) Lezione 3 Formattazione e Stampa documenti
Video Scrittura (MS Word) Lezione 3 Formattazione e Stampa documenti Formattazione di un documento La formattazione di un documento consente di migliorare l impaginazione del testo e di dare al al documento
Tecnologie informatiche multimediali
Università degli Studi di Ferrara Facoltà di Lettere e Filosofia Corso di Laurea in «Scienze e Tecnologie della Comunicazione» aa 2011-2012 Tecnologie informatiche multimediali Prof. Giorgio Poletti giorgio.poletti@unife.it
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
Siti molto ben fatti /1 08
Siti molto ben fatti /1 08 1) Mettiamoci a cucinare Crea la cartella 30 ricette con le sottocartelle css e img. L'obiettivo è di realizzare un sito come questo rappresentato in figura. Cominciamo con l'operare
è l attività attraverso la quale si cerca di aumentare il traffico e la popolarità di un sito web
è l attività attraverso la quale si cerca di aumentare il traffico e la popolarità di un sito web Il SEO viene descritto mediante diverse fasi Analisi preliminare Bisogna capire l attività svolta dall
Tabelle. Esempio 20. Inserire righe e colonne. Dimensioni delle tabelle. Attributi del tag TABLE INFO WEB LEZIONE N.6
Tabelle INFO WEB LEZIONE N.6 RAVENNA, 2 APRILE 2008 In HTML le tabelle vengono largamente utilizzate per organizzare i dati in tabelle creare il layout della pagina servendosi di tabelle nascoste Si definiscono
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:
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
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
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
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
Ottimizzare i CSS scrivendo meno codice
Questo PDF è stato generato su richiesta di Matera Renato il 31/10/2014 alle 16.04. Attenzione: l'uso di questo file in violazione delle norme in materia di diritto d'autore costituisce reato. Lezione
Linguaggi di programmazione PC server-client CSS
Linguaggi di programmazione PC server-client CSS HTML MySQL PHP HTML: Hyper Tex Markup Language PHP: Hypertext Preprocessor CSS: Cascading Style Sheet MySQL: Relational database HTML Hyper Tex Markup Language