CSS / GESTIONE DEL COLORE E DEI BACKGROUND. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
|
|
|
- Giulietta Villa
- 6 anni fa
- Visualizzazioni
Transcript
1 CSS / GESTIONE DEL COLORE E DEI BACKGROUND INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 1
2 CSS / DEFINIRE IL COLORE SECONDO IL MDELLO RGB Modello Additivo del colore Le lunghezze d onda della luce si sommano la somma di tutte le lunghezze d onda dei vari colori da il bianco INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 2
3 COME FUNZIONA IL SISTEMA RGB La descrizione dei tre colori principali dell RGB (Red Green Blue) avviene attraverso un numero da 0 a 255 (2 8 bit) per ogni colore della terna. Questo ci consente di avere una gamma pari a 256*256*256= colori. RGB -> Red, Green, Blue Ogni pizel di un monitor LED ci permette di modulare i colori attraverso questa codifica in bit, attraverso la codifica di rosso, verde e blu (luce emessa dai diodi LED) INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 3
4 CSS / DEFINIRE IL COLORE Nomi predefiniti: black, green, navy, aqua... I valori di RGB valori rgb rgb(r,g,b) (r,g,b = {0-255}) Ogni canale ha un valore da 0 a 255 (2 8 per canale). Il nero avrà i valori più bassi: rgb(0,0,0), il bianco quelli più alti: rgb(255,255,255) percentuali rgb rgb(r%,g%,b%) (r,g,b = { }) Ogni canale ha un valore da 0.0% a 100.0%. Il nero avrà i valori più bassi: rgb(0%,0%,0%) notazione esadecimale (HEX) o colori HTML #rrggbb (r,g,b = {0 - F}): ogni canale è definito da due cifre. Il valore più basso è 00 (0), il più alto è FF (255). es bianco #FFFFFF nero # rosso #FF0000 ciclamino #D51364 Per esempio, i valori aqua, #00FFFF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 4
5 CSS3 / DEFINIRE IL COLORE E LA TRASPARENZA In alcuni casì può essere utile avere degli elementi di colore in trasparenza, con i CSS3 è stata introdotta una nuova codifica rgba, che aggiunge il canale alpha alla codifica rgb. I valori dei canali rgb vengono definiti come nella notazione rgb (0-255). Mentre il canale alpha viene definito con un valore da 0.0 a 1. Per esempio: un nero con trasparenza al 70% avrà valori rgba(0, 0, 0, 0.7) un rosso con trasparenza al 50% avrà valori rgba(255, 0, 0, 0.5) INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 5
6 INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 6
7 CSS / COLORE IN PRIMO PIANO (TESTO E BORDI) Il colore del testo e dei bordi è definito tramite la proprietà color. Il valore predefinito è quello ereditato dal testo del blocco padre. Sintassi dichiarazione: color: #FF0000; color: rgb(255,0,0); Se non diversamente specificato, il colore per <body> (o meglio ancora <html>) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, spesso ma non necessariamente è nero. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 7
8 CSS / SFONDI Lo sfondo può essere: Trasparente Caratterizzato da una tinta piatta (colore) Riempito del tutto o in parte da una immagine Lo sfondo può essere gestito attraverso le seguenti proprietà: background-color background-image background-repeat background-position background-attachment background (riassume le diverse proprietà) INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 8
9 CSS / COLORE DI SFONDO - BACKGROUND-COLOR La proprietà background-color può assumere i seguenti valori: transparent (valore predefinito) <colore> A differenza di color, il valore per background-color non è ereditato. Sintassi dichiarazione: background-color: #FF0000; background-color: rgb(255,0,0); Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 9
10 CSS / IMMAGINE DI SFONDO - BACKGROUND-IMAGE Per inserire un immagine di sfondo è sufficiente specificarne l url tramite la proprietà background-image. Il valore predefinito è none. Sintassi dichiarazione: background-image:url(img/sfondo.png); background-image:url("img/sfondo.png"); L immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente e scorrerà assieme al testo INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 10
11 CSS / IMMAGINE DI SFONDO - BACKGROUND-REPEAT Tramite background-repeat è possibile stabilire se e come l immagine sarà ripetuta background-repeat:repeat indica che l immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) background-repeat:repeat-x indica che l immagine sarà ripetuta solo orizzontalmente background-repeat:repeat-y indica che l immagine sarà ripetuta solo verticalmente background-repeat:no-repeat indica che comparirà una sola occorrenza dell immagine INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 11
12 REPEAT X E REPEAT Y INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 12
13 E solo questa immagine che viene ripetuta lungo l asse delle X per tutta la dimensione della pagina. La rimanenza è colorata tramite background color Si carica una sola immagine leggera html{ Non ci interessa sapere la dimensione del monitor background: url(img/gradient.jpg) repeatx top; background-color: #E6E6E6; } INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 13
14 Come prima, l immagine viene ripetuta in verticale con repeat-y. Si carica una sola immagine leggera»» Utilizzata per DIV i contenuti in verticale (Height) no si conoscono a priori ma possono variare. Ad esempio il div PAGE INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 14
15 CSS / IMMAGINE DI SFONDO - BACKGROUND-ATTACHEMENT Tramite background-attachment è possibile stabilire se l immagine di sfondo sarà fissa ovvero scorrerà con la pagina background-attachment:scroll indica che l immagine scorrerà assieme alla pagina (valore predefinito) background-attachment:fixed indica che l immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con <body>) INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 15
16 CSS / IMMAGINE DI SFONDO - BACKGROUND-POSITION Tramite background-position è possibile stabilire la posizione iniziale dell immagine. I valori ammessi sono: Unità di lunghezza (100px) Unità percentuali (20%) Parole chiave: left center right (per il posizionamento orizzontale) top center bottom (per il posizionamento verticale) I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale. Per esempio: background-position: 20% 50px; background-position: right top; INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 16
17 CSS / IMMAGINE DI SFONDO - BACKGROUND-POSITION Quando sono usate le unità di lunghezza, l angolo superiore sinistro dell immagine è posizionato relativamente all angolo superiore sinistro dell area del padding. Quando sono utilizzate le unità percentuali si ha il seguente comportamento: Sia X% il valore percentuale per la posizione orizzontale Sia Y% il valore percentuale per la posizione verticale Il punto dell immagine che si trova alle coordinate X%,Y% sarà posto in posizione X%,Y% dell area del padding INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 17
18 CSS / SFONDO - BACKGROUND La proprietà background permette di definire con un unica dichiarazione tutte le varie proprietà contemporaneamente. Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; } INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 18
19 CSS3 / SFONDI: NUOVE POSSIBILITÀ E PROPRIETÀ I CSS3 hanno permesso di dare allo stesso elemento più sfondi (multiple backgrounds) e aggiunto alcune nuove proprietà tra cui background-size E molto utile per gestire dei background full screen che si adattano alle dimensioni dello schermo utente. INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 19
20 CSS3 / IMMAGINE DI SFONDO - BACKGROUND-SIZE Tramite background-size è possibile stabilire una dimensione dell immagine di sfondo fissa o relativa all elemento. background-size: cover; Scala l immagine di sfondo in modo da coprire l intera area dell elemento. Alcune parti dell immagine di sfondo potrebbero non essere visibili. background-size: contain; Scala l immagine di sfondo in modo da riempire l elemento. L mmagine di sfondo verrà visualizzata intera, ma potrebbe non coprire interamente l area dell elemento. background-size: valorex valorey; dove valorex e valorey possono essere dei valori in pixel o percentuali e indicano la dimensione dell immagine di sfondo INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 20
21 Le proprietà COVER e CONTAIN non vengono renderizzate allo stesso modo dai vari browser. Quindi è necessario accompagnalre con del codice aggiuntivo che specifica ad ogni browser come comportarsi #div{ background-image: url(img/bkg.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 21
22 DOMANDE? INFORMATICA E GRAFICA PER IL WEB HTML+CSS docente: Alessandro Gabbiadini 22
layout senza tabelle Posizionamento con i CSS Ad ogni elemento HTML corrisponde un area rettangolare, detta box Contenuto
Posizionamento con i CSS creare layout senza tabelle 1 Gestione degli elementi della pagina Il box model Ad ogni elemento HTML corrisponde un area rettangolare, detta box Margine Bordo Area di padding
CSS: 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
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
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();
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
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 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
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:
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
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
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:
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
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,
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
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
COLORI. Nozioni di base, Sintesi additiva, Modo RGB, Canali e Istogramma. EDI II Colori, RGB, Canali, Istogramma 1
COLORI Nozioni di base, Sintesi additiva, Modo RGB, Canali e Istogramma EDI II Colori, RGB, Canali, Istogramma 1 Che cos è? (Definizione fisica) Il colore è la percezione visiva generata dai segnali nervosi
Corso di Informatica modulo Informatica di Base 6 CFU. Immagini digitali: concetti di base
DIPARTIMENTO DELL INNOVAZIONE INDUSTRIALE E DIGITALE Corso di Informatica modulo Informatica di Base 6 CFU Anno Accademico 6/7 Docente: ing. Salvatore Sorce Immagini digitali: concetti di base L informazione
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
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
Corso di HTML. Prerequisiti. Modulo L3 2 Formattazione del testo. Formattazione di un testo Stile, dimensioni e font di caratteri
Corso di HTML Modulo L3 2 Formattazione del testo 1 Prerequisiti Formattazione di un testo Stile, dimensioni e font di caratteri 2 1 I colori in HTML I colori in HTML si possono esprimere in due modi:
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
INFORMATICA E GRAFICA PER IL WEB
INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2013/2014 Università degli studi Milano-Bicocca docente: Diana Quarti INFORMATICA E GRAFICA PER IL WEB A.A. 2013/2014 docente: Diana Quarti
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
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
INFORMATICA E GRAFICA PER IL WEB
INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2016/2017 Università degli studi Milano-Bicocca docente: Diana Quarti LEZIONE 02 INFORMATICA E GRAFICA PER IL WEB A.A. 2016/2017 docente:
Rappresentazione dei numeri: il sistema di numerazione decimale
Università degli Studi di Cagliari Facoltà di Scienze Corso di Laurea in Matematica Corso di Elementi di Informatica Lezione 3 14 marzo 2017 Dott. A.A. 2016/2017 pgarau.unica@gmail.com 1 Codifica dei numeri
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)
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
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML
APPUNTI DI INFORMATICA IL LINGUAGGIO HTML Vediamo le seguenti istruzioni dell HTML link permette di dare un colore alla nostra "parola calda", se questo attributo non viene esplicitato
Modelli di colore. Un tocco di blu non guasta
Modelli di colore Un tocco di blu non guasta Un passo indietro Nelle immagini raster ogni pixel dell immagine ha associato un colore. Nelle immagini Vettoriali ogni forma geometrica ha un colore associato.
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
APPROCCIO "WEB DESIGN REATTIVO": Prima di tutto costruiamo una BASE
ESEMPIO FILE.CSS PER REALIZZARE MODELLO SITO WEB: www.modellinirobotanno80.altervista.org /*questo codice va aggiunto al css principale per far si che tutti i browser possano riconoscere correttamente
DYNAMIC SLIDER NEWS2 PRO
Dynamic Sliders News2 PRO, consente di visualizzare in uno slider le immagini abbinate ai contenuti e loro brevi descrizioni che volete pubblicare nel modulo. Il modulo Dynamic Slider Newse PRO e completamente
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
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
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
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
Formati e compressioni
Sistemi Multimediali Marco Gribaudo marcog@di.unito.it, gribaudo@elet.polimi.it Formati e compressioni Anche se in memoria le immagini vengono quasi sempre memorizzate come una sequenza di colori RGB,
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
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
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
LEZIONE 1 HTML. Come costruire il proprio sito con pochi strumenti e tanta creatività...
LEZIONE 1 HTML Come costruire il proprio sito con pochi strumenti e tanta creatività... La struttura di una pagina web intestazione Qui si dichiara il titolo del documento
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à
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
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
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
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
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
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
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
Corso di HTML. Prerequisiti. Modulo L2 B3-Immagini. Creazione di pagine web Visualizzazione pagine web. M. Malatesta B3-Immagini-05 09/01/2014
Corso di HTML Modulo L2 B3-Immagini 1 Prerequisiti Creazione di pagine web Visualizzazione pagine web 2 1 Introduzione In questa Unità diamo un approfondimento dell utilizzo del tag del linguaggio HTML
Sistemi di Elaborazione delle Informazioni 6 CFU
Università degli Studi di Palermo Dipartimento di Ingegneria Chimica, Gestionale, Informatica, Meccanica Sistemi di Elaborazione delle Informazioni 6 CFU Anno Accademico 2015/2016 Docente: ing. Salvatore
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
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Terza lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Terza lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 La struttura del testo in html L'HTML fornisce una serie
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)
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
Rappresentazione delle Immagini. Corso di Informatica. Rappresentazione delle Immagini. Rappresentazione delle Immagini
Corso di Laurea in Conservazione e Restauro dei Beni Culturali Rappresentazione delle Immagini Corso di Informatica Gianluca Torta Dipartimento di Informatica Tel: 011 670 6782 Mail: torta@di.unito.it
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
Versione 1.1 20 marzo 2008 Riccardo Bresciani
The bookest class Versione 1.1 20 marzo 2008 La classe bookest è un estensione della classe standard book, classe alla quale si appoggia e che viene caricata con le opzioni di default. Le estensioni fornite
Informatica di Base 1 Linea 1
Informatica di Base 1 Linea 1 Jianyi Lin Dipp. di Matematica e Scienze dell Informazione Università degli Studi di Milano, Italia jianyi.lin@unimi.it a.a. 2011/12 1 c 2011 J.Lin, M. Monga. Creative Commons
Abbiamo visto come la codifica di testi sia (relativamente semplice) Con le immagini la questione è più complessa
Codifica delle immagini Abbiamo visto come la codifica di testi sia (relativamente semplice) Un testo è una sequenza di simboli Ogni simbolo è codificato con un numero Ed ecco che il testo è trasformato
APPUNTI DI HTML (TERZA LEZIONE)
Il web è costituito non da testi ma da ipertesti. APPUNTI DI HTML (TERZA LEZIONE) I link ci permettono di passare da un testo all altro. I link sono formati da due componenti: IL CONTENUTO "nasconde" il
* 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
Modulo 1: Le I.C.T. UD 1.3a: La Codifica Digitale delle Immagini
Modulo 1: Le I.C.T. : La Codifica Digitale delle Immagini Prof. Alberto Postiglione Corso di Informatica Generale (AA 07-08) Corso di Laurea in Scienze della Comunicazione Università degli Studi di Salerno
La codifica delle immagini
Lettere e numeri non costituiscono le uniche informazioni utilizzate dagli elaboratori ma si stanno diffondendo sempre di più applicazioni che utilizzano ed elaborano anche altri tipi di informazione:
Sistemi di Elaborazione delle Informazioni 6 CFU
Università degli Studi di Palermo Dipartimento dell Innovazione Industriale e Digitale Sistemi di Elaborazione delle Informazioni 6 CFU Anno Accademico 2016/2017 Docente: ing. Salvatore Sorce Rappresentazione
INFORMATICA E GRAFICA PER IL WEB
INFORMATICA E GRAFICA PER IL WEB Psicologia e comunicazione A.A. 2015/2016 Università degli studi Milano-Bicocca docente: Diana Quarti LEZIONE 02 INFORMATICA E GRAFICA PER IL WEB A.A. 2015/2016 docente:
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.
Microsoft Excel Lezione 3
Corso di Introduzione all Informatica Microsoft Excel Lezione 3 Esercitatore: Fabio Palopoli Rappresentare graficamente le informazioni per renderle interessanti e facilmente comprensibili. Per inserire
CODIFICA IMMAGINI IN BIANCO E NERO
Rappresentazione delle immagini Anche le immagini possono essere codificate mediante una sequenza di 0 e 1., questa operazione si chiama digitalizzazione. La prima cosa da fare è dividere l immagine in
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
Corso di Informatica
CdLS in Odontoiatria e Protesi Dentarie Corso di Informatica Prof. Crescenzio Gallo crescenzio.gallo@unifg.it Rappresentazione delle immagini 2 Rappresentazione delle immagini Le forme e i colori presenti
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
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:
<!-- 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
Il linguaggio HTML - Parte 5
Corso IFTS Informatica, Modulo 3 Progettazione pagine web statiche (50 ore) Il linguaggio HTML - Parte 5 Dott. Chiara Braghin braghin@dti.unimi.it Frame I frame (cornici) permettono di suddividere la finestra
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
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
Rappresentazione dei numeri naturali. La codifica associa alle informazioni dell alfabeto sorgente uno o più simboli dell alfabeto codice:
Rappresentazione dei numeri naturali La codifica associa alle informazioni dell alfabeto sorgente uno o più simboli dell alfabeto codice: 1 I 0001 / 2 II 0010 // 3 III 0011 /// 4 IV 0100 //// 5 V 0101
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
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...
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
I principali dispositivi periferici impiegati in. computer grafica sono: monitor. stampante. scanner. fotocamera digitale
I principali dispositivi periferici impiegati in computer grafica sono: monitor stampante scanner fotocamera digitale Tutte queste periferiche sono di tipo raster. Un'immagine può avere diversi tipi di
Visualizzazione dei risultati e codici di errore
Capitolo 3 Visualizzazione dei risultati e codici di errore Questo capitolo presenta una panoramica dei comandi per la visualizzazione dei risultati e la descrizione dei codici di errore. Verranno presentate
La codifica. dell informazione
00010010101001110101010100010110101000011100010111 00010010101001110101010100010110101000011100010111 La codifica 00010010101001110101010100010110101000011100010111 dell informazione 00010010101001110101010100010110101000011100010111
Rappresentazione digitale delle informazioni
Rappresentazione digitale delle informazioni Informazione oggi Informatica: disciplina che studia l elaborazione automatica di informazioni. Elaboratore: sistema per l elaborazione automatica delle informazioni.
Operazioni preliminari: creare una cartella in Documenti
Operazioni preliminari: creare una cartella in Documenti 1. Fare clic in successione su Start (cerchio con il logo Microsoft in basso a sinistra), Documenti. 2. Cliccare su Nuova cartella comparirà una
La codifica. dell informazione
La codifica dell informazione (continua) Codifica dei numeri Il codice ASCII consente di codificare le cifre decimali da 0 a 9 fornendo in questo modo un metodo per la rappresentazione dei numeri Il numero
La codifica delle immagini
Lettere e numeri non costituiscono le uniche informazioni utilizzate dagli elaboratori ma si stanno diffondendo sempre di più applicazioni che utilizzano ed elaborano anche altri tipi di informazione:
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...
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.
La codifica del testo
La codifica delle informazioni Informatica e sistemi di elaborazione delle informazioni La codifica delle informazioni Informatica e sistemi di elaborazione delle informazioni I slide Informatica e sistemi
Nozioni di grafica sul calcolatore. concetti di base
Nozioni di grafica sul calcolatore concetti di base La riproduzione di immagini fotografiche su computer avviene suddividendo l'immagine stessa in una matrice di punti colorati: pixels I formati basati
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
Istituto. Nome. Data Docente. Original site: Italian site:
Istituto Nome Data Docente Original site: http://webphysics.davidson.edu/applets/optics/ Italian site: http://ww2.unime.it/weblab/ Studio della costruzione delle immagini con le lenti Questo documento
Linguaggi per il Web Linguaggi di markup: CSS
Linguaggi per il Web Linguaggi di markup: CSS Fogli di stile (CSS) Cascading Style Sheets (CSS) servono per facilitare la creazione di pagine HTML con un aspetto uniforme permettono di separare il contenuto
(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
Modelli di colore. Un tocco di blu non guasta
Modelli di colore Un tocco di blu non guasta Obiettivi Come faccio a rappresentare i colori in una immagine? Per formati immagine raster e vettoriali Come specificare che il mare della mia foto è di colore
RAPPRESENTAZIONE DELLE INFORMAZIONI
RAPPRESENTAZIONE DELLE INFORMAZIONI 1 RAPPRESENTAZIONE DELLE INFORMAZIONI Le informazioni gestite dai sistemi di elaborazione devono essere codificate per poter essere memorizzate, elaborate, scambiate,