Corso html 5. Di Roberto Abutzu. `***********` Dodicesima parte: I css, I link e le pseudoclassi. `**********`
|
|
- Modesto Bono
- 6 anni fa
- Visualizzazioni
Transcript
1 Corso html 5. Di Roberto Abutzu. `***********` Dodicesima parte: I css, I link e le pseudoclassi. `**********` IIl concetto delle pseudo classi. Questa notazione è più complessa perchè varia a seconda dello stato dell'elemento stesso. In questo caso, andremo a parlare delle pseudo classi dei selettori. Si intende una modifica dello stile non per il singolo elemento, ma per lo stato che questo elemento può avere e anche variare. Applichiamo questa teoria direttamente ai link, semplificandone così la comprensione. Un link, oltre al suo colore assegnato dal programmatore, può variare a seconda che sia stato già visitato, che il puntatore del mouse sia posizionato sopra di esso, che ci sia il focus della tastiera, e varia anche nel momento in cui viene attivato. Quindi il colore di un link, varia a seconda di questi stati, ed è il programmatore che ne decide i colori utilizzando le pseudoclassi. Per una buona e fluida navigazione in una pagina web, è necessario che i link già visitati vengano contrassegnati. A tale scopo ne viene cambiato il colore. Ricordo che questi dati, il fatto che un link sia stato già visitato, vengono salvati nella memoria dei file temporanei del browser. Quindi, pulendo la cronologia e i file temporanei, questi dati vanno persi. Iniziamo con l'inserire il codice che assegnerà i vari colori ai link a seconda dello stato. Poi ne spiegheremo il significato. Apriamo il nostro file: style.css e portiamoci in fondo alla pagina. Andiamo a capo e inseriamo questo codice: a:link {color: #0000FF; a:visited {color: #FF0000; a:focus {color: #00FF00; a:hover {color: #00FF00; a:active {color:#ff00ff; All'interno delle parentesi graffe, il codice dei colori assegnati. Prima delle parentesi, il selettore che ora spiegheremo. -a: link non visitato e senza nessun altro stato attivo. Gli ho assegnato il colore blu ( #0000FF). -a:visited. Link già visitato dal browser. Gli ho assegnato il colore Rosso (#FF0000). -a:focus Questo selettore indica il focus della tastiera, quello che spostiamo col Tabulatore. Gli ho assegnato il colore verde (#00FF00). -a:hover Questo selettore indica quando il puntatore del mouse si posiziona sopra il link. Ho assegnato anche a questo il colore verde ( #00FF00). -a:active Indica lo stato di attivazione del link quando viene attivato dal mouse per aprire la nuova pagina. Gli ho assegnato il colore Viola (#FF00FF).
2 Anche i colori che ho voluto assegnare in questo esempio sono semplificati con l'unico scopo di apprendere il più possibile questi concetti. Nei vostri siti potrete assegnare i colori che più vi aggradano. Fate delle prove anche cambiando i colori a vostro piacimento. Nota importante: L'ordine di questi stati deve seguire esattamente lo stesso che vi ho inserito io. Nel senso che non è possibile, per esempio, mettere il link visitato per primo. Le modifiche in questo caso non faranno funzionare i cambiamenti dello stile. La proprietà text-decoration. Devo introdurre questa proprietà in quanto è sempre più diffuso il non sottolineare i link, levando l'effetto della sottolineatura. Questa sottolineatura riappare al momento in cui il mouse passa sopra il link stesso e da parecchio tempo le persone vedenti si sono abituate a questo effetto. Quindi ritengo importante farvi inserire questa proprietà proprio nell'eventualità in cui vogliate far analizzare il vostro lavoro ad una persona vedente. Questa proprietà fa parte degli effetti del testo che analizzeremo in seguito. Inserite voi questa proprietà in questo modo: a:link {text-decoration: none; a:hover {text-decoration: underline; Vi ricordo di inserire poi anche la proprietà del colore all'interno delle parentesi graffe. Ora, volendo davvero iniziare a dare un aspetto piacevole al nostro sito, introduciamo le prime nozioni sui caratteri e la loro formattazione. Il codice html che permetteva in passato di assegnare il font e la sua formattazione direttamente dalla pagina html, in questa nuova versione 5 di questo linguaggio, non viene più permesso, demandando al solo file css la formattazione di tutti i caratteri del sito. Premetto che tutti i Browser hanno dei loro caratteri predefiniti e l'assenza della formattazione non significa che il sito rimanga vuoto. Naturalmente è importante saper inserire la formattazione e saperla personalizzare, anche a seconda dell'elemento a cui vogliamo assegnarla. Noi possiamo assegnare, tramite i fogli di stile, una formattazione personalizzata per ogni elemento html, oltre che poter decidere di impostare due formattazioni diverse per elementi uguali ma in posizioni diverse nella pagina. Quindi le possibilità sono illimitate. Nel concreto, intendo affermare che possiamo dare caratteri, dimensioni e colori diversi tra paragrafi, intestazioni, collegamenti, ecc... Possiamo decidere che all'interno di una o più liste, il carattere sia differente da quello dei link. Utilizzando poi gli identificativi (id), anche tutte le intestazioni dello stesso livello potranno avere formattazioni diversificate. Nel caso si voglia assegnare una regola di stile ad un elemento html, sarà sufficiente utilizzare l'elemento stesso come selettore, ricordandosi di non inserire maggiori e minori. Nel caso si voglia dare uno stile particolare ad un elemento univoco, dopo avergli assegnato l'identificativo nella pagina html, basterà inserire questo identificativo preceduto dal cancelletto. Passiamo alla pratica spiegando il codice sottostante: h1, h2, h3 {font-family: Tahoma, Geneva, sans-serif; color: #0000FF; La prima cosa che notiamo sono i selettori. Come spiegato in precedenza, ora noi stiamo dando una regola di stile a tutte queste intestazioni. All'interno delle parentesi graffe, troviamo le coppie Proprietà-Valore. La prima che incontriamo è: font-family: Tahoma, Geneva, sans-serif; Notiamo che abbiamo inserito dopo la proprietà, tre valori, ossia tre tipologie di font, simili tra loro. Per quale motivo non possiamo assegnare solo il carattere che scegliamo?
3 Il motivo è semplice. Noi non possiamo aver la certezza dei browser o dei computer che visualizzeranno il nostro sito. Io ad esempio ho scelto il carattere (font): Taoma, ma non ho la certezza che questo sia poi installato nei computer di chi visita il sito. In tal caso il browser assegna quelli suoi di default, rischiando di stravolgere totalmente l'aspetto delle nostre pagine. Allora, tornando a ritroso nella creazione dei font, gli assegno una alternativa, un font più datato e diffuso, ma simile e appartenente alla stessa famiglia: il Geneva. Ma neanche questo mi garantisce un risultato, sempre per lo stesso motivo. Allora tornerò ancora più indietro assegnando: sans-serif. Rimando alla rete per i curiosi la scelta del geneva e del sans-serif, spiegandovi che il font che noi scegliamo, lo inseriamo per primo. A scalare, ne inseriamo altri alternativi. Se non viene trovato il primo font, si passa al secondo, poi al terzo e così via. Per maggior sicurezza, alla fine delle nostre scelte, inseriamo anche la famiglia del font scelto. Un elenco delle famiglie più utilizzate: -serif: font con elementi decorativi alla fine dei tratti delle lettere (ad esempio Times New Roman); -sans-serif: senza elementi decorativi (ad esempio, Arial); -mono caratteri a spaziatura fissa. Ogni carattere, indipendentemente dalle sue dimensioni, occupa lo stesso spazio. Alcune combinazioni di font, i più usati: -Arial, Helvetica, sans-serif -Times New Roman, Times, serif -Courier New, Courier, mono -Georgia, Times New Roman, Times, serif -Verdana, Arial, Helvetica, sans-serif -Geneva, Arial, Helvetica, sans-serif Naturalmente nessun obbligo nell'utilizzare queste combinazioni, l'importante è cercare una coerenza tra i caratteri scelti. "font-size". Questa è la proprietà che permette di assegnare le dimensioni ai nostri caratteri. Esistono varie misure o tipologie di valori per le dimensioni ma, sempre per il fatto che non siamo a conoscenza del pc che visiterà il sito, spesso si rischia di avere anche in questi casi delle spiacevoli sorprese. Si possono utilizzare i pixel (px), le dimensioni dei punti assegnati dai programmi di videoscrittura (pt) o altre unità di misura come i pollici o i centimetri che affronteremo in una apposita lezione. Queste misure sono tutte da considerarsi relative e si intende che possono variare in alcune condizioni specifiche. L'esempio più lampante è il Pixel che può variare a seconda del monitor utilizzato, oltre al fatto che non tutti i browser datati ridimensionano correttamente i caratteri. Inoltre, e questo caso a noi interessa per uno script futuro, assegnare pixel, significa forzare a mantenere quelle dimensioni. Prossimamente inseriremo uno script che permetterà di ingrandire tutto lo schermo in tre valori. Io inserisco questo script in tutti i miei siti in quanto utilissimo per le persone ipovedenti o gli anziani. Nel caso inserissi un font col valore delle dimensioni in pixel, questo script non funzionerebbe. Qualsiasi unità di misura voi utilizziate, è necessario che il numero e l'unità siano attaccati così: {font-size: 14pt; Io di solito lascio assegnare ai browser le dimensioni e quando serve utilizzo il valore: em. em (em-height): 1 em corrisponde all'altezza base di un carattere per un determinato font. Per portare un carattere al doppio della sua misura dobbiamo scrivere 2em un esempio:
4 h1 {font-size: 2em; Un ultimo esempio per agevolare la lettura dei file css. Notate che andrò a capo ad ogni coppia Proprietà-valore. Questo rende molto più semplice, soprattutto per le persone non vedenti, lo scorrimento delle regole e la loro identificazione. body { font-family: Arial, Helvetica, sans-serif; font-size: 14pt; color: #000000; h1, h2, h3 { font-family: Tahoma, Geneva, sans-serif; color: #0000FF; h1 { font-size: 18pt; a:link { text-decoration: none; color: #0000FF; a:visited { color: #FF0000; a:focus { color: #00FF00; a:hover { text-decoration: underline; color: #00FF00; a:active { color:#ff00ff; Naturalmente non è neccessario né obbligatorio scrivere in questo modo, riportando a capo ogni coppia proprietà-valore, è consigliabile e utile quando il file css inizia a diventare lungo. In queste tre prime lezioni sui css, ho voluto rendere la teoria molto semplificata puntando per lo più a farvi mettere in pratica i primi rudimenti direttamente lavorando sul sito. Tutti questi argomenti, verranno ripresi nello specifico e rispiegati considerando tutte le proprietà e tutti i valori che è possibile assegnare nei fogli di stile. Spesso succede di imbattermi in manuali dove realmente inizio ad operare alla decima lezione. Puntualmente poi, non avendo operato sulla teoria, mi sono già dimenticato le prime 8. Questo è quello che non voglio che accada. Naturalmente non è mia intenzione criticare altri manuali o altre metodologie di studio, ma io questo corso ho deciso di farlo prevalentemente per le persone non vedenti. Essendolo anch'io, proprio sulla mia pelle ho imparato a memorizzare i concetti applicandoli immediatamente. I fogli di stile, come il linguaggio html 5, sono comunque complessi e strapieni di codice. Lo vedremo tutto ma pian piano. Per ulteriori spiegazioni, scrivere a:
5
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
DettagliRiassunto 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:
DettagliAppunti 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
DettagliServe 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
DettagliCSS / 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
DettagliGuida 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...
DettagliCSS (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
DettagliSistemi 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
DettagliSommario. 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
DettagliOpenOffice Impress. Lezione 2. Tips & Tricks
OpenOffice Impress Lezione 2 Tips & Tricks Video In questa breve lezione darò dei consigli per rendere il lavoro più semplice quando si inizia a lavorare con Impress. La prima cosa da tenere presente è
DettagliGuida alla modifica di un layout
Guida alla modifica di un layout Abbiamo realizzato il sito web di Hexagon Tours utilizzando HTML e CSS, impostando una struttura formata da header, barra di navigazione, contenuti principali e laterali,
DettagliINSERIMENTO. 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
DettagliCreare 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
DettagliWEB 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
DettagliCorso sul PACCHETTO OFFICE. Modulo Access
Corso sul PACCHETTO OFFICE Modulo Access Docente: dott. Marco Cardani Lezione 2 Come creare un database 1 2 Come creare un database Impareremo ora come creare un nuovo database in modo da raggiungere un
DettagliLaboratorio 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
DettagliStruttura 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();
DettagliWeb 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
DettagliCorso 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:
Dettagli<!-- 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
DettagliProgettazione 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
Dettagli1.1. Come funzionano le pagine Web.
Se tu hai voglia di creare il tuo sito web in HTML, oppure stai semplicemente cercando un supporto aggiuntivo perché pensi che le lezioni di HTML che ricevi all università non sono abbastanza chiare e
Dettagli- 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
DettagliDigitiamo il codice base di una pagina secondo lo standard HTML5 e inseriamo un titolo <h1> con il testo Benvenuti sulla mia homepage
Brackets Editor per la creazione e la modifica di fogli di stile CSS Brackets è un editor open source per i linguaggi HTML, CSS e Javascript, distribuito con licenza MIT. Installare il file brackets-sprint-24-win.msi
DettagliGuida pratica alla creazione di pagine web
Guida pratica alla creazione di pagine web Dopo aver creato una pagina html, muoviamo i primi passi nell'uso del codice. Naturalmente non è necessario conoscere il codice a memoria per creare pagine internet,
DettagliMANUALE PER IL REDATTORE DELL UFFICIO STAMPA
MANUALE PER IL REDATTORE DELL UFFICIO STAMPA INDICE: 1 CREA AGENZIA DI STAMPA 2 CREA NOTIZIE DEL GIORNO 3 CREA EVENTO NELL AGENDA In appendice: COME UTILIZZARE GLI STRUMENTI DI INSERIMENTO TESTO Entra
Dettagli6. 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à
DettagliNuove pagine e collegamenti
05 Nuove pagine e collegamenti In questo capitolo In questo capitolo imparerai come realizzare un semplice collegamento da un testo a una nuova pagina, apprenderai il concetto di link di ritorno. Successivamente
DettagliModulo 6. Strumenti di Presentazione
Modulo 6 Strumenti di Presentazione Concetti generali Aprire un programma di Presaentazioni Start Programmi Microsoft Office Microsoft PowerPoint Mirko Fornai Basi di dati Se il mouse rimane per qualche
DettagliManuale per l utilizzo del backend FIDAL.IT. Versione 1.0
Manuale per l utilizzo del backend FIDAL.IT Versione 1.0 20 Gennaio 2015 Sommario Introduzione... 2 Accesso alla piattaforma... 2 Inserimento contenuti... 3 Chiusura sessione di lavoro... 8 Introduzione
DettagliTecniche di buona progettazione di pagine web. Quali font scegliere? Serif contro Sans-serif. A.Lioy - Politecnico di Torino ( ) J.
Tecniche di buona progettazione di pagine web Antonio Lioy < lioy@polito.it > Politecnico di Torino Dip. Automatica e Informatica Quali font scegliere? non usare mai più di 3 o 4 font diversi per pagina
DettagliContenuto 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
DettagliCSS / 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
DettagliSi accede alla piattaforma digitando nel browser l indirizzo: dopo di chè si apre la seguente pagina,
Padlet è una piattaforma web gratuita che permette di creare e condividere bacheche virtuali. E uno strumento multi device per cui può essere utilizzato con i vari sistemi operativi e nei dispositivi mobili
DettagliI 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
DettagliHTML 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
Dettagli1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.
Sommario CSS 1 Cascading Style Sheets, meglio noti come CSS o fogli di stile.... 1 1.1 Fogli di stile "in linea"... 2 1.2 Fogli di stile "interni"... 2 1.3 Fogli di stile "esterni"... 2 1.4 Che tipo di
DettagliEXCEL. Marco Lucifora
EXCEL Marco Lucifora Microsoft Excel è un elaboratore di fogli di calcolo. Il programma consente di creare tabelle, inserire formule matematiche e creare grafici. Gli usi a cui si presta sono molteplici
DettagliGUIDA ALL INSERIMENTO DI TESTI E DOCUMENTI NEL NUOVO SITO DEL COMUNE DI CERVIA Versione 1.0
GUIDA ALL INSERIMENTO DI TESTI E DOCUMENTI NEL NUOVO SITO DEL COMUNE DI CERVIA Versione 1.0 Indice - ACCESSO AL BACKEND DEL SITO WEB e LOGIN - INSERIMENTO FILE IN GESTIONE FILE - INSERIMENTO NEWS Realizzato
DettagliResponsive 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?
DettagliIntroduzione 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
DettagliCompetenza digitale / LIM
Competenza digitale / LIM IC G. Salvemini Polistena Esperto dott.ssa Antonia Caridi Progettare la lezione Gli strumenti principali IC G. Salvemini Polistena Venerdì 02 dicembre 2011 2 Questo browser consente
DettagliPatente Europea del Computer ECDL - MODULO 3
Patente Europea del Computer ECDL - MODULO 3 Lezione 3 di 3 Aiuto Controllo ortografico Opzioni di Word Stampa unione Per richiamare la Guida in linea di Word, possiamo utilizzare il pulsante azzurro a
DettagliCSS (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
DettagliHTML. 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
DettagliCSS. 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
DettagliLinguaggi 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
DettagliEsercizio INTERNET. Esercizio
Esercizio INTERNET A titolo di esempio si intende realizzare un prototipo di pagina web contenente i seguenti elementi: - sfondo - pulsanti - testo scritto - collegamento ipertestuale ad un altra pagina
DettagliCloud GDrive, Dropbox
Cloud GDrive, Dropbox Lezione 3 Lavorare con Dropbox Video Dropbox permette, oltre all'archiviazione di file in rete, di lavorare direttamente all'interno del servizio sul web, attraverso l'uso dell'applicazione
DettagliCopiare le caratteristiche di formattazione da un testo ad un altro.
112 ECDL Guida facile 3.3.1.6 Copiare le caratteristiche di formattazione da un testo ad un altro. Fra le possibilità offerte da questo programma, esiste anche quella di copiare solo il formato (colore
DettagliMS Office Powerpoint La formattazione
MS Office Powerpoint 2007 - La formattazione La formattazione è la parte più importante del lavoro in Powerpoint, in quanto l essenziale per l aspetto finale che assumerà il nostro lavoro. Questo è un
DettagliFogli 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,
DettagliElenchi numerati. Il procedimento per gli elenchi numerati è simile: o l icona o la finestra del menu formato
Word Lezione 3 Elenchi puntati È possibile inserire elenchi puntati tramite un icona sulla barra di formattazione o tramite il menu formato Elenchi puntati e numerati Elenchi numerati Il procedimento per
DettagliXAMPP Installazione e configurazione
XAMPP Installazione e configurazione Dispensa XAMPP - pag.1 XAMPP è una piattaforma software gratuita costituita da Apache Http Server, un database MySQL e tutti gli strumenti necessari per usare i linguaggi
DettagliAspetto. 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.........................................
Dettaglijt - joetex - percorsi didattici
jt - joetex - percorsi didattici Corso dreamweaver lezione 1 Sommario 1. Creare un sito in locale 2. creare la prima pagina Creare un sito in locale Un sito va creato tutto all'interno di un'unica cartella.
DettagliCSS 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
DettagliOgni 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
DettagliModulo 1: Le I.C.T. UD 1.3b: Grafica Bitmap e Vettoriale FONT Bitmap e Scalabili
Modulo 1: Le I.C.T. : Grafica Bitmap e Vettoriale FONT Bitmap e Scalabili Prof. Alberto Postiglione Corso di Informatica Generale (AA 07-08) Corso di Laurea in Scienze della Comunicazione Università degli
DettagliGuida all utilizzo di PowerPoint Presentation Transcript
Guida all utilizzo di PowerPoint Presentation Transcript 1. Guida all utilizzo di PowerPoint A cura di Daniele Cogo 2. Obiettivi della guida Al termine di queste slide avremo tutte le informazioni necessarie
DettagliKOMPOZER e editor CSS
KOMPOZER e editor CSS Tra le molteplici funzioni che KOMPOZER ci offre c'è un comodissimo editor css che vale la pena di presentare per semplificarne l'approccio. Questa non è e non può essere una guida
DettagliInformatica 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
DettagliINTRODUZIONE 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
DettagliTecnologie 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
Dettagli5.3 Elenchi puntati e numerati
5.3 Elenchi puntati e numerati E uno degli strumenti di formattazione di Word che semplifica la formattazione del testo in elenchi. L elenco può essere contraddistinto da una sequenza di numeri, oppure
DettagliValori 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:
DettagliGUIDA RAPIDA ALLA MODIFICA DEL SITO
GUIDA RAPIDA ALLA MODIFICA DEL SITO Login Per effettuare l accesso al pannello amministrativo del sito collegarsi all indirizzo http://www.grandhotellezagare.it/public/wp-admin/ immettendo le seguenti
DettagliUtilizzo dei CSS: regole
Tutorial per siti scolastici accessibili con editor web open source Utilizzo dei CSS: regole Adotta un template CSS - Regole pag. - 1 Autore Questa guida è stata realizzata da Gianfranco Bilotti e fa parte
DettagliIl sistema è ottimizzato per funzionare al meglio con il broswer firefox, scaricabile dal seguente link per gli utenti windows.
Gaia è il nuovo sistema informativo che ti permetterà di venire a conoscenza immediatamente delle attività organizzate e dare la tua disponibilità con un click da pc o smartphone. Il sistema è ottimizzato
DettagliCOME CREARE UN BLOG DA ZERO LEZIONE 4 GUIDA RAPIDA BLOGGER
COME CREARE UN BLOG DA ZERO LEZIONE 4 GUIDA RAPIDA BLOGGER GMAIL PER APRIRE UN BLOG CON BLOGGER è INDISPENSABILE AVERE UN ACCOUNT GMAIL. PERCIÓ SE NON NE AVETE UNO A DISPOSIZIONE DOVRETE CREARLO. PER CREARE
DettagliFormazione efficace per chi non ha tempo da perdere a cura di Domenico Corcione
Formazione efficace per chi non ha tempo da perdere a cura di Domenico Corcione Word a colpo d occhio Questo è manuale di sopravvivenza, in esso troverai solo alcune tra le tante funzioni di Word: sono
DettagliHTML. 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
DettagliGuida all utilizzo e compilazione del diario alimentare interattivo
Guida all utilizzo e compilazione del diario alimentare interattivo Il diario alimentare in versione telematica è basato su Adobe Acrobat e richiede la presenza di Adobe Acrobat Reader sul computer. L
DettagliGuida pratica per la creazione di un documento Word accessibile Sommario
Guida pratica per la creazione di un documento Word accessibile Sommario Introduzione... 2 Proprietà... 2 Stili e formattazione... 2 Creazione di un sommario... 3 Collegamenti ipertestuali... 3 Colori...
DettagliHTML 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
DettagliMICROSOFT OFFICE POWERPOINT Come creare presentazioni interattive di documenti.
MICROSOFT OFFICE POWERPOINT 2007 Come creare presentazioni interattive di documenti. Che cos è Microsoft Office Powerpoint? È un software rilasciato dalla Microsoft, parte del pacchetto di Office, che
DettagliFacciamo lampeggiare un led
Facciamo lampeggiare un led Passiamo a fare qualche esercizio, il più semplice per iniziare a programmare con Arduino è il canonico esercizio blink, che trovate anche negli esempi del programma. Si tratta
DettagliCSS 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
DettagliEsportare 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
Dettagli1) Andare su 2) Scendi nella pagina fino a che trovi sulla destra Registrati 3) Cliccare su REGISTRATI
ISCRIZIONE AL BLOG 1) Andare su http://dcpfidenza.wordpress.com 2) Scendi nella pagina fino a che trovi sulla destra Registrati 3) Cliccare su REGISTRATI Compare questa schermata X NON compilare nulla
DettagliCONSIGLI E TRUCCHI. Parte seconda
CONSIGLI E TRUCCHI Parte seconda IMPOSTARE LA PAGINA WEB Un sito web da noi realizzato certamente viene visualizzato benissimo sul nostro computer, ma talvolta succede che gli amici ci avvertono che il
DettagliJavascript e CSS nelle pagine WEB
1 Javascript e CSS nelle pagine WEB Esempi applicativi Autrice: Turso Antonella Carmen INDICE ARGOMENTI 2... 5 LEZIONE 1... 6 COSA SONO I JAVASCRIPT... 6 LEZIONE 2... 8 STRUTTURA DEL LINGUAGGIO JAVASCRIPT
DettagliProgettazione 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
DettagliSiti 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
DettagliDEFINIZIONI SMART E RELATIVE ESERCITAZIONI
DEFINIZIONI SMART E RELATIVE ESERCITAZIONI A B C D E 1 2 3 4 5 6 7 8 9 MODULO 3 Creazione e gestione di fogli di calcolo MODULO 3 CREAZIONE E GESTIONE DI FOGLI DI CALCOLO Gli elementi fondamentali del
DettagliIdoneità informatica. Laboratorio 1 Ms Word
Idoneità informatica A.A. 2008/9 Laboratorio 1 Ms Word Prof.ssa Raffaella Folgieri folgieri@mtcube.com Cos è un word processor è un programma di videoscrittura che consente anche di applicare formati diversi
DettagliPowerPoint: uso del software
PowerPoint: uso del software Marie-Edith Bissey 5 febbraio 2002 1 Creare una presentazione PowerPoint si trova sotto Start Programmi All avvio, si apre una maschera che permette di scegliere il tipo di
DettagliNavigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog. Marco Torciani. (Seconda lezione) Unitre Pavia a.a.
Navigare in Internet Laboratorio di approfondimento la creazione di siti web e/o blog (Seconda lezione) Unitre Pavia a.a. 2014-2015 27/01/2015 dott. 1 In informatica l'hypertext Markup Language (HTML)
DettagliIdoneità informatica. Ms Word
Idoneità informatica A.A. 2009/10 Ms Word Prof. Iannizzi iannizzi@dsi.unimi.it Cos è un word processor èun programma di videoscrittura che consente anche di applicare formati diversi al testo e di eseguire
DettagliI 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
DettagliClara De Antoni Modulo T04 Principi di grafica e layout
Clara De Antoni Modulo T04 Principi di grafica e layout Attività 1 Selezionare un sito esistente di buon impatto grafico e costruito professionalmente e individuare: Layout. il sito segue un layout fluido
DettagliLena Cota Guido Corso di Informatica - II livello. Excel 2003 Formule. Imparare a usare le formule con la pratica
Excel 2003 Formule Imparare a usare le formule con la pratica 1 Cosa sono Uno degli obiettivi principali dei fogli di calcolo è fornire il risultato di operazioni matematiche, dalla semplice somma alle
DettagliGUIDA COMPILAZIONE MODELLI MS WORD
GUIDA COMPILAZIONE MODELLI MS WORD versione 2.0 1 PREMESSA... 3 ATTIVAZIONE DELLA SCHEDA DI SVILUPPO... 4 AGGIUNTA DELLE VOCI VARIABILI... 5 ELENCO DELLE VOCI VARIABILI... 7 FORMATTAZIONE DELLA VOCE VARIABILE...
DettagliCreare maschere personalizzate
LEZIONE 6 Creare maschere personalizzate In questa lezione impareremo... - A riconoscere ed utilizzare le maschere di Access - A creare maschere e sottomaschere sia in autocomposizione che personalizzate
Dettagli8- Unione di più estratti di mappa contigui
8- Unione di più estratti di mappa contigui Passiamo ora alla mosaicatura delle mappe. S.C.S. - survey CAD system Con questa procedura è possibile unire più estratti di mappa letti in più scansioni e normalmente
DettagliLavorare col programma di scrittura Blocco Note
Lavorare col programma di scrittura Blocco Note Questa risorsa didattica è stata realizzata dallo staff di Pane e Internet per lo svolgimento di un corso di formazione rivolto ai migranti, organizzato
DettagliCloud GDrive, Dropbox
Cloud GDrive, Dropbox Lezione 2 Lavorare con Gdrive Video GDrive permette, oltre all'archiviazione di file in rete, di lavorare direttamente all'interno del servizio sul web in quanto fornisce tutti gli
DettagliInformatica (Sistemi di elaborazione delle informazioni)
Informatica (Sistemi di elaborazione delle informazioni) Corso di laurea in Scienze dell'educazione Lezione 2 Elaborazione di testi (parte 1) Mario Alviano Sommario Formattazione di Caratteri Paragrafi
DettagliWord Formattazione del testo. Samuele Mazzolini
Word Formattazione del testo Samuele Mazzolini Imposta pagina Potrebbe essere utile per certi documenti impostare la pagina in orizzontale invece che in verticale. Questo è possibile con il comando Imposta
DettagliVideo Scrittura (MS Word) Lezione 1 Funzioni di base
Video Scrittura (MS Word) Lezione 1 Funzioni di base Cos e un programma di Video Scrittura Un programma di Video Scrittura serve per effettuare tutte quelle operazioni che consentono di creare, modificare,
Dettagli