Introduzione ai fogli di stile. CSS HOME Modi di attaccare stile al documento Status Bar <HOME> <BOTTOM>
|
|
|
- Adelaide Simonetti
- 6 anni fa
- Visualizzazioni
Transcript
1 Pagina 1 CSS HOME Modi di attaccare stile al documento Status Bar <HOME> <BOTTOM> Argomenti della pagina Incollare style ai documenti <CSS in Linea> <CSS Incorporati> <CSS Esterni> Linking Style Incollare stile ai documenti in CSS Ci sono 4 modi per attaccare dello stile ad un documento, ognuno dei quali presenta dei propri vantaggi e svantaggi; l'uso di un tipo piuttosto di un'altro dipende dal contesto in cui mi trovo per applicare dello stile alla pagina (od alle pagine). Sono stati introdotti nuovi tag HTML per fornire l'incorporazione dei fogli di stile in modo semplice e veloce all'interno dei documenti HTML. Vediamo dunque una carellata di queste modalità : CSS in linea : Stabilire lo stile del documento per ogni singolo elemento della pagina I fogli di stile in linea sono concettualmente molto vicini alle regole dell'html classico, in quanto agiscono su singole istanze all'interno della pagina, cioè agiscono su singole parti del documento, senza influenzare il resto della pagina. Se per esempio si vuole che una sola parte del testo di un documento abbia un certo carattere o una certa formattazione, si useranno campi standard di HTML, quali <SPAN> o <DIV>, per assegnare quello stile. Un esempio: <HTML> <BODY> <DIV STYLE="font-size:18px; font-family:arial; color:red"> testo di colore rosso </DIV> </BODY> </HTML> In questo modo abbiamo impostato lo stile del solo testo compreso tra i tag <DIV> e non per tutto il documento. In particolare abbiamo indicato come grandezza del carattere (font-size) 18 pixel; come tipo di
2 Pagina 2 carattere (font-family) il classico arial e come colore (color) il rosso. Il risultato che otteniamo e' il seguente: NOTA : Un siffatto sistema di stile e' certamente funzionante ma non rispondente alle peculiarita' tipiche dei CSS. Assegnare stili alle singole marcature non risponde ai criteri di separazione tra stile e contenuti dei quali i CSS si fanno portatori. I fogli di stile in linea negano la vera natura di questi strumenti, nati per assegnare stili a intere pagine o addirittura a gruppi di documenti. Il consiglio e' di servirsi dei fogli di stile in linea esclusivamente per piccoli e circoscritti ritocchi e non per la struttura generale di un Website. CSS incorporati : Stabilire lo stile di un intero documento ipertestuale tra i campi HEAD Si tratta di stili a meta' strada tra i CSS in linea e i CSS esterni. La peculiarita' fondamentale di questi attributi di stile e' di venire assegnati all'intero documento e non a singole istanze come l'html classico. Si tratta, dunque, di un insieme di definizioni di stile inserite tra marcature <STYLE> e posizionate tra i tag <HEAD> del documento e il <BODY> dello stesso. Un esempio di foglio di stile incorporato e' il seguente: <HTML> <HEAD> <style type="text/css"> H1 { font-size:17px; font-family:courrier; color:green } H2 { font-size:18px; font-family:arial; color:red } </style> </HEAD> <BODY> <H1>Questo testo e' di colore verde, impostato su courrier di 17 pixel</h1> <H2>Questo testo e' di colore rosso, impostato su arial di 18 pixel</h2> </BODY>
3 Pagina 3 </HTML> In questo esempio abbiamo impostato un foglio di stile incorporato tra i tag <HEAD> del documento, stabilendo due diversi tipi di carattere: verdana verde di 17 pixel per il primo identificato dal marcatore <H1> arial rosso di 18 pixel per il secondo, identificato dal marcatore <H2> I marcatori H1 e Hx in generale possono sostituirsi con altri marcatori di paragrafo quali <P>. Il risultato sarà : Impostato il CSS incorporato all'interno del documento gli stili vengono assegnati automaticamente al testo racchiuso tra i marcatori(nell'esempio sopra tra <H1></H1> e <H2></H2>). In questo modo cambiando solo i valori degli attributi di stile impostati nel foglio (aumentando la grandezza o modificando il colore, per esempio), il testo del documento tra i marcatori viene automaticamente aggiornato al nuovo stile. L'attributo TYPE del tag <STYLE> definisce il linguaggio in formato MIME del foglio di stile. In altre parole questo attributo indica al browser il tipo di foglio di stile supportato, altrimenti ignorato. Ms Internet Explorer supporta i CSS solo in formato MIME, ma esistono i CSS in formato text/jass, cioe' accessibili in javascript (e questa seconda è l'interpretazione di stile data da Netscape). Se l'attributo TYPE viene omesso, il browser lo identifica di default con "text/css". Anche Netscape communicator supporta questo attributo. Rispetto ai fogli di stile in linea i CSS incorporati consentono il controllo di un intero documento, ma per interi siti non sono sufficienti a fornire il supporto tecnico necessario. Se per esempio per il testo del documento e' stato usato un certo font e improvvisamente si decide di modificarlo, sara' necessario agire su tutti i documenti del sito perche' le modifiche si estendano all'intero sito Web. Tuttavia questa modalità di applicare lo stile è particolarmente adeguata quando si vuole usare CSS per creare delle pagine di presentazione (introduzione di grafica) dove mi interessa che solo la singola pagina abbia quel determinato aspetto (per farsi un idea vedi la galleria d'arte degli esempi in questo sito). CSS Esterni : La soluzione ottimale per gestire unitariamente gli stili di un intero sito Web Motivazioni :
4 Pagina 4 I fogli di stile esterni (o collegati) sono quelli che meglio rispondono alle esigenze degli sviluppatori, e soprattutto quelli che meglio interpretano la filosofia dei fogli di stile. Per comprendere pienamente le peculiarita' dei CSS esterni si pensi ad un sito di grandi dimensioni con 1000 pagine HTML e un certo tipo di formattazione del testo. Improvvisamente esigenze estetiche impongono di modificare colore di sfondo, tipo di carattere e allineamento del testo; è quì che si presentano i primi problemi che mettono in evidenza la versatilità dei fogli di stile. Da quanto detto fino ad ora si possono presentare tre casi: il sito e' costruito in HTML classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle 1000 pagine; questa è la situazione pessima e poco si adatta per l'aggiornamento del sito nel tempo; il sito e' costruito adottando fogli di stile in linea, per cui anche in questo caso sara' necessario agire su tutte le singole marcature di ognuna delle 1000 pagine; siamo nella stessa situazione di quanto visto sopra; il sito e' costruito con i fogli di stile incorporati, per cui si dovra' comunque modificare l'intestazione di stile di 1000 documenti, anche se non si dovra' agire sui singoli attributi della pagina presenti in ogni <HEAD>; questa tecnica fornisce un maggior grado di flessibilità ma risulta efficente solo per un sito con poche decine di pagine, non certo per un sito con 1000 od addirittura pagine. Seppure l'ultimo espediente limita notevolmente il lavoro di aggiornamento rispetto ai primi due punti, si tratta pur sempre di agire su un numero elevato di documenti e questo comporta inefficenza. La soluzione a questo problema e' che gli stili dei singoli marcatori vengano raggruppati in un unico documento indipendente dal resto delle pagine del sito, e da queste semplicemente richiamati con una riga di codice. In questo modo separo la formattazione dei 1000 fogli del sito dal loro contenuto; una modifica sul file del "foglio di stile esterno" genera automaticamente "a cascatala" la stessa modifica su tutti i documenti di quel sito che richiamano tale file. Sintassi e regole Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice, basta definire in un file esterno che quì abbiamo chiamato Style.css (ciò che importa è di salvare il file con estensione.css ); quindi in tale file definiamo tutte le formattazioni quali per esempio il colore dei caratteri, il tipo, i rientri di pagina, ecc... che vogliamo dare alle pagine web del sito. Tale file andrà collocato nella cartella pricipale del sito web (il file index.html.) Successivamente dobbiamo inserire nelle pagine web che vogliamo fruiscano della formattazione, un collegamento a tale file; questo viene fatto aggingendo tra i tag <HEAD> delle stesse il seguente codice: Dove : <link rel=stylesheet href="style.css" type="text/css"> - link è il tag che consente di attaccare lo stile di un file esterno al documento HTML. - rel è un'attributo per indicare le relazioni fra il file collegato ed il documento HTML; indico che il file collegato e' un foglio di stile (stylesheet). - href richiama il percorso del file.css esterno (in questo caso il file si intende depositato nella stessa cartella in cui e' presente il documento HTML; se cosi' non fosse andrebbe inserito il percorso del file, per es.: href="css/ style.css"). - type è un'attributo usato per specificare il media-type "text/css" per il Cascading Style Sheet. Permette ai browsers di ignorare i tipi di style sheet da loro non supportati. Ricordiamo che un foglio di stile non deve usare tag HTML o comunque comandi racchiusi tra i tag come <HEAD> oppure <STYLE>; il file deve essere costituito solo da regole fra parentesi graffe, e l'assegnazione del valore alla proprietà deve essere fatta con i due punti, come ad esempio : Vediamo un'esempio : P { margin: 2em } Codice del foglio esterno di formattazione della pagina :
5 Pagina 5 Codice HTML della pagina web : In questo modo otteniamo : Il risultato di questo esempio e' di stabilire per tutte le pagine del sito uno stile comune per i marcatori <H1> e <H2>, in modo tale che modificando il solo file esterno tutti i documenti HTML collegati saranno contestualmente aggiornati. Nell'esempio del sito di 1000 pagine, se l'esigenza fosse quella di modificare grandezza e stile dei titoli di pagina, sarebbe sufficiente agire sul marcatore <H1>del file esterno style.css automaticamente tutte le 1000 pagina si adeguerebbero al nuovo stile imposto dal file style.css. Diversi media a cui applicare lo Style :
6 Pagina 6 Una delle maggiori novità introdotte con CSS2 è stata l'introduzione di poter selezionare degli output differenti a cui applicare lo stile dal solo video come in precedenza. Il tag <LINK> oltre a consentire di attaccare fogli di stile esterni è dotato di un'ulteriore attributo opzionale MEDIA il quale consente di selezionare il dispositivo di output a cui applicare un determinato foglio di stile; se questo attributo non viene menzionato di default lo stile viene sempre applicato a video dai vari Browser. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural> L'attributo MEDIA consente i seguenti valori : screen (valore di default), per presentare lo stile a video; print, fornisce l'output ad una stampante; projection, per projected presentations; aural, per sintetizzatori vocali; braille, fornisce la presentazione su dispositivi braille; tty, per character cell displays (usa font a pixel-fissi); tv, per televisioni; all, per tutti i dispositivi. Più media possono essere specificati contemporaneamente come dagli esempi sopra. NOTA : Netscape Navigator 4.x erroneamente ignora qualsiasi dichiarazione dell'attributo MEDIA che sia diverso da screen. Per esempio : la dichiarazione MEDIA="screen, projection" farà si che il foglio di stile sarà ignorato da Netscape Navigator 4.x; Netscape inoltre ignora dichiarazioni con MEDIA=all. Maggiori particolari sull'attributo "REL" : rel=stylesheet specifica un persistent o preferred style, mentre rel="alternate StyleSheet" definisce un alternate style. Vediamo ora cosa sono queste tre modalità, anche se poi nei casi reali la maggior parte dei documenti con dei fogli di stile collegati avrà l'attributo rel come persistent, cioè Rel=StyleSheet : -- Un persistent style è uno stile che viene sempre applicato quando i CSS sono abilitati. L'assenza dell'attributo TITLE di questo esempio definisce un persistent style : <LINK REL=StyleSheet HREF="style.css" TYPE="text/css"> -- Un preferred style è uno stile che viene automaticamente applicato. La combinazione di rel=stylesheet e dell'attributo TITLE specifica un preferred style. L'autore può specificare anche più di uno stile preferito. Esempio : <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style"> -- Un alternate style è indicato da rel="alternate StyleSheet". Questi definisce uno stile alternativo che l'utente può scegliere per rimpiazzare il foglio di stile di tipo preferred. Esempio : <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style"> Attaccare stile da più fogli contemporaneamente : Uno stile di presentazione di un documento può essere il risultato del caricamento di più fogli di stile contemporaneamente. Ad esempio, consideriamo 3 fogli di stile ("basics.css", "tables.css", "forms.css") : <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">
7 Pagina 7 <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary"> I 3 fogli di stile vengono combinati in un'unico stile di presentazione intitolato "Contemporary", questi viene applicato in seguito a tutti i documenti HTML che vi fanno riferimento. Per combinare più fogli di stile in un'unico stile di presentazione bisogna usare l'attributo TITLE usando lo stesso nome ("Contemporary") per ogni foglio di stile collegato. Una tale soluzione può essere utile per separare delle formattazioni di oggetti specifici in siti di grosse dimensioni. Per esempio per una questione di flessibilità potrebbe risultare conveniente separare la formattazione delle tabelle da quella per i form a quella generica per il testo in modo da poterle tenere in file separati da poter aggiornare singolarmente quando necessario. In chiusura di questa disamina ci preme sottolineare la grandissima utilita' dei fogli di stile esterni che consigliamo di usare il piu' possibile. A fronte di una impostazione iniziale piu' complessa degli altri stili, nel lungo periodo e per siti di grandi dimensioni ripagano ampiamente gli sforzi, oltre a consentire un inedito controllo di pagina e di stile. : Acquisire lo stile del documento da un modulo esterno o da un link remoto. Sintassi e regole Un foglio di stile può essere importato dall'esterno oppure può essere il risultato di una serie di fogli di stile importati. Lo statement che mi consente ciò è '@import', questo statement può essere usato sia nei CSS incorporati (dunque interno al documento HTML) che in quelli esterni (incorporato nel foglio mediante il tag LINK). Per poter allegare un foglio di stile dopo '@import' devo fornire l'url del foglio da includere tra parentesi (...), la sintassi sarà url("mystyle.css"); equivalentemente posso anche scrivere in maniera più abbreviata "mystyle.css"; I fogli di stile importati sono usati per scopi di modularità : Immaginiamo per es. un sito di grosse dimensioni in cui vogliamo separare determinate formattazioni in modo da migliorarne il mantenimento dello stesso per il futuro; per esempio potremmo avere un foglio di stile "simple.css" che fornisce le regole per il mantenimento dello stile di presentazione degli elementi più comuni del testo, quali ad esempio BODY, P, H1, ecc.... Un ulteriore foglio di stile potrebbe essere "form.css" per il trattamento di layout delle form del sito. Ed infine "table.css" per la formattazione delle tabelle. Questi 3 fogli di stile potrebbero essere inclusi mediante '@import' in un documento HTML che fà uso di testo più tabelle più le form in modo da dargli l'adeguata presentazione. I 3 fogli potrebbero essere importati o internamente al foglio all'interno di <STYLE> del documento stesso : <STYLE TYPE="text/css" MEDIA="screen"> url(/stylesheets/table.css); --> </STYLE> Oppure possono essere combinati mediante l'uso del tag LINK :
8 Pagina 8 <LINK REL=StyleSheet HREF="/stylesheets/simple.css" TITLE="home page"> <LINK REL=StyleSheet HREF="/stylesheets/form.css" TITLE="home page"> <LINK REL=StyleSheet HREF="/stylesheets/table.css" TITLE="home page"> NOTA : Quando il file di stile viene attaccaco mediante la modalità CSS incorporati è possibile aggiungere ulteriori regole di formattazione al documento, in tal caso è importante che tutti precedano le ulteriori regole di stile interne al foglio : <STYLE TYPE="text/css" MEDIA="screen, print"> url(/stylesheets/punk.css); DT { background: yellow; color: black } > </STYLE> Ogni regola interna al foglio che entra in conflitto con quelle importate vince su queste ultime, di modo che se per esempio il foglio di stile "punk.css" contenesse la regola DT { background: red } Comunque nel documento comparirebbe il background yellow. L'ordine in cui i fogli di stile vengono importati è molto importante, poichè determina il loro cascade. Nello stesso esempio sopra, se il foglio di stile "style.css" detrminasse che gli elementi STRONG dovrebbero comparire con il colore rosso, mentre in "punk.css" gli stessi elementi STRONG dovrebbero comparire gialli, l'ultima regola vince sulle altre, cosicchè STRONG sarebbe mostrato con il colore giallo. Più media types come destinazione E' possibile inoltre specificare la destinazione del file di stile importato ad uno specifico Media Type dopo l'url, per esempio url("fineprint.css") url("bluish.css") projection, tv; Il file "fineprint.css" importato produrrà i suoi effetti di stile solo su stampante, di modo che quando invio in stampa un documento questi sarà stampato secondo la formattazione dettata da tale file. Analogamente per l'altro file di stile importato. In assenza di qualsiasi specificazione a riguardo del media di destinazione l'importazione è incondizionata e si riferisce a "all" cioè tutti i dispositivi possibili supportati da CSS (Vedi Media Type in CSS2). Incorporare fogli di stile in può importare fogli di stile sia in locale mediante un file *.css residente nel sito stesso (magari all'interno di qualche cartella) e sia in remoto da URL remoti di altri siti (file di stile non residenti nel sito), come in questo esempio : <STYLE TYPE="text/css" MEDIA="screen"> url(/stylesheets/punk.css); --> </STYLE>
9 Pagina 9 Il foglio di stile "style.css" non è presente nel sito ma bensì all'indirizzo da qualche parte nel Web. <HOME>
Come creare pagine WEB
Come creare pagine WEB E' possibile creare pagine WEB secondo diverse modalità: in modo classico, per cui sara' necessario agire su ogni singola marcatura di ognuna delle x pagine; questa soluzione poco
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
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
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
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
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
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
<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
Sommario. Nozioni di base su HTML
Sommario Parte 1 Ringraziamenti.................................................... xiii Introduzione...................................................... xvi Che cos'è HTML?.................................................
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
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
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
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
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
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
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
SMARTPHONE Sommario SMARTPHONE...1
Pagina 1 SMARTPHONE Sommario SMARTPHONE...1 Introduzione...2 1. Definire la dimensione degli schermi alternativi...3 2. Disegnare gli Stili per le varie impaginazioni...4 Definire i menu...4 Definire lo
<!-- 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
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
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
IMMAGINI INTRODUZIONE
IMMAGINI INTRODUZIONE Prima di inserire le immagini nella pagina HTML, le stesse devono essere copiate all interno della cartella del progetto (Sito). La loro copia può avvenire o tramite Risorse del Computer
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5
PROGRAMMA DEL CORSO ADOBE DREAMWEAVER CS5 Unità didattica 1 - Architettura di pagina statica HTML Dimostrazione 1-1: Visualizzazione del sito Unità didattica 2 - Prime operazioni Introduzione a Dreamweaver
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
1.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
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
Javascript 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
Appare una finestra con il gestore di immagini (Image Manager) di JCE.
JCE ha numerose icone che aiutano nella redazione dell articolo e nella formattazione del testo. È possibile, ad esempio, copiare testo già formattato direttamente da MS Word. In ogni caso posizionando
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. 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
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
Università degli studi di Verona. Corso di Informatica di Base. Lezione 4 - Parte 2. Rifinitura di un documento
Università degli studi di Verona Corso di Informatica di Base Lezione 4 - Parte 2 Rifinitura di un documento In questa seconda parte vedremo le principali rifiniture di un documento. In particolare: 1.
PRONTUARIO PER LA GESTIONE DEL SITO DELLE CIRCOSCRIZIONI
PRONTUARIO PER LA GESTIONE DEL SITO DELLE CIRCOSCRIZIONI 1. ENTRARE NEL SISTEMA DI GESTIONE DEL SITO Per accedere al gestionale del sito è necessario fare il login con il nome utente e la password usati
Nuove 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
ELABORAZIONE TESTI (WORD) seconda parte. Laboratorio di Informatica AA 2009/2010
ELABORAZIONE TESTI (WORD) seconda parte Laboratorio di Informatica AA 2009/2010 GLI STILI L'uso degli stili: Non è una cosa facoltativa! Non è una cosa da esperti. È assolutamente indispensabile 2 Che
Modifica Pagina Web. Pulsante LogOut: cliccare per uscire dall'ambiente di amministrazione
Modifica Pagina Web Dopo aver effettuato la Login con la Username e la Password fornitavi (alla url http:// [nomedominio]/account oppure attraverso la pagina login se presente sul sito) vi troverete all'interno
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
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 (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
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
Dichiarazione di accessibilità
Dichiarazione di accessibilità Questo sito è stato sviluppato secondo le: "Linee guida per i siti web delle PA" previste dalla direttiva Brunetta n. 8 del 26 novembre 2009 e rivolte a tutte le amministrazioni
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();
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
Informatica d ufficio
Informatica d ufficio Anno Accademico 2008/2009 Lezione N 3 Microsoft Word - prima parte Microsoft Word E un Word processor,cioè un programma che consente di creare e modificare documenti. Prevede numerose
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
RDF. Resource Description Framework
RDF Resource Description Framework 1 Sommario 1) Cos è l RDF RDF Model and Syntax RDF Schema 2) Il data model RDF definizione di risorsa, proprietà e statement esempio 1 esempio 2 2 3) Combinazione RDF
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.........................................
Prefazione... xi. Da leggere prima di iniziare...xiv. Capitolo 1 Introduzione a JavaScript Sezione A Programmazione, HTML e JavaScript...
SOMMARIO Prefazione... xi Panoramica del libro... xi Caratteristiche distintive...xii Aspetti qualificanti del libro...xii Browser Web da usare... xiii Ringraziamenti... xiii Da leggere prima di iniziare...xiv
Formare documenti accessibili a tutti
Formare documenti accessibili a tutti Introduzione all accessibilità dei documenti Gianluca Affinito L accessibilità non riguarda solo i disabili L accessibilità non riguarda solo i disabili L accessibilità
LINGUAGGI PER IL WEB HTML. (HyperText Markup Language)
LINGUAGGI PER IL WEB HTML (HyperText Markup Language) Il World Wide Web World Wide Web = sistema di accesso a Internet basato sul protocollo HTTP insieme di protocolli e servizi (HTTP, FTP, ) insieme di
Elaborazione Testi (Word) G. Toraldo, F. Giannino, V. Monetti
Elaborazione Testi (Word) G. Toraldo, F. Giannino, V. Monetti Aprire un programma di elaborazione testi Come si presenta la finestra di Word Barra del titolo Barra dei menu Chiudere Barre degli strumenti
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
Digitiamo 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
L ACCESSIBILITÀ DEI DOCUMENTI ELETTRONICI - parte seconda
L ACCESSIBILITÀ DEI DOCUMENTI ELETTRONICI - parte seconda di Livio Mondini CARATTERISTICHE DI UN DOCUMENTO ACCESSIBILE Questi semplici documenti non pretendono di essere un manuale esaustivo per la creazione
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:
Copiare 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
Negli ultimi dieci anni, il Web è stato completamente
Introduzione Negli ultimi dieci anni, il Web è stato completamente integrato nel tessuto sociale. La maggior parte delle aziende ha il proprio sito Web, ed è raro vedere una pubblicità in televisione che
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
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
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
Basi di Dati-X HTML HTML HTML. Corso di Laurea in Informatica Anno Accademico 2013/2014
HTML 2 Basi di Dati-X Corso di Laurea in Informatica Anno Accademico 2013/2014 Hyper Text Markup Language linguaggio testuale per descrivere la struttura di documenti ipertestuali disponibili nel World
MANUALE MODULO WIDGET EVENT TRACKING LICENZA SaaS
MANUALE MODULO WIDGET EVENT TRACKING LICENZA SaaS Revisione 1.0 Beta Ultimo Aggiornamento: 07/12/2010 SOMMARIO Panoramica... 3 Gli eventi tracciati... 3 I report... 4 Struttura... 4 Report / Object...
1.3.1 Usare i blocchi/celle
1.3.1 Usare i blocchi/celle 1.3.1.1 Creare i blocchi/celle Un blocco può essere definito come un insieme di entità grafiche raggruppate per costituire un unico oggetto. I vantaggi legati all uso dei blocchi
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,
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
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
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
Formare documenti accessibili a tutti
Formare documenti accessibili a tutti L accessibilità dei documenti Microsoft Office Gianluca Affinito Rendere accessibili i documenti di Microsoft Word Aggiungere testo alternativo alle immagini 1. Fare
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
Bilancio famigliare con CALC (foglio elettronico dimostrativo e anche utile)
Bilancio famigliare con CALC (foglio elettronico dimostrativo e anche utile) Augusto Scatolini (webmaster@comunecampagnano.it) (a.scatolini@linux4campagnano.net) Miniguida n. 140 Ver. 1.0 Agosto 2011 Download:
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)
REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ
Pag. 1 di 13 REPORT DI VALUTAZIONE DELL ACCESSIBILITÀ PUBBLICA AMMINISTRAZIONE Comune di Volpedo (AL) www.comune.volpedo.al.it DATA DELLA VALUTAZIONE 1/12/2008 AUTORE DELLA VALUTAZIONE Fabio Regina COMMENTI
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
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à
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
Voglio scrivere un romanzo (parte 2)
Ecco, utilizzando "Blocco note", ho incominciato a scrivere il mio "romanzo". Ma che brutto! Non riesco a dare una forma accettabile al mio romanzo: se lo dovessi presentare a qualcuno per farmelo pubblicare,
Programmazione orientata agli oggetti: le classi
Programmazione orientata agli oggetti: le classi Oggetti e tipi di dati La programmazione che abbiamo visto finora agisce su variabili che appartengono a tipi di dati predefiniti: interi, floating point,
Realizzazione di pagine Web
Realizzazione di pagine Web Obiettivi 1.Conoscere i principi di progettazione di una pagina Web e gli strumenti per produrla. 2.Sviluppare pagine Web con l'uso di opportuni strumenti software di authoring
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
Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro;
EXCEL Modulo 3 I Grafici Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro; Quando si crea un grafico ogni
Formattare il testo con gli stili
Formattare il testo con gli stili Capita spesso di dover applicare ripetutamente la stessa formattazione, o anche modificare il colore, le dimensioni e il tipo di carattere, per dare risalto a un testo.
Direzione Didattica e Servizi agli Studenti. Centro Linguistico e Risorse Digitali per la Didattica DIDATTICA ONLINE IL FORUM
IL FORUM 1. Impostazioni generali Il forum è un ambiente per la comunicazione asincrona, permette cioè ai partecipanti di inviarsi messaggi in uno spazio condiviso senza necessariamente essere online nello
Questo materiale è reperibile a questo indirizzo:
Questo materiale è reperibile a questo indirizzo: http://diego72.altervista.org/ Microsoft office 2007 - PowerPoint 2007 Come iniziare Dopo aver lanciato l applicazione, Home -> Diapositive -> Layout e
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
INCOMUNE.NET 4.0 Powered by Contao CMS Open Source
INCOMUNE.NET 4.0 Powered by Contao CMS Open Source Sistema di Trattamento dei contenuti - Manuale di Utilizzo IDEA Sistemi S.as. Tecnologie Digitali per la Pubblica Amministrazione Via Burolo, 30 10015
Metalinguaggi di marcatura Materiale didattico di supporto. Indice 6. HTML (CONTINUA)...2
Indice 6. HTML (CONTINUA)...2 6.1 FOGLI DI STILE (CSS- CASCADING STYLESHEET)...2 6.1.1 Regole dello stile...6 6.1.2 Classi...6 6.1.3 Esempi di proprietà modificabili e relativi valori....9 6.2 DIVISIONS
Sommario. A proposito di A colpo d occhio 1. Novità e miglioramenti 5. Introduzione a Excel Ringraziamenti... xi Autore...
Sommario Ringraziamenti............................................ xi Autore................................................. xiii 1 2 3 A proposito di A colpo d occhio 1 Niente computerese!.....................................
Acquisire audio digitale: per iniziare...
Acquisire audio digitale: per iniziare... Tutorial a cura di Aldo Torrebruno 1. Preparativi per l acquisizione La prima volta che registriamo l audio con un computer dobbiamo assicurarci che hardware e
3.6.1 Inserimento. Si apre la finestra di dialogo Inserisci Tabella:
3.6.1 Inserimento Per decidere dove collocare una tabella è necessario spostare il cursore nella posizione desiderata. Per inserire una tabella esistono diversi modi di procedere: Menù Tabella Inserisci
OpenOffice.org Writer
Struttura fisica della pagina Struttura logica di un documento Modelli di paragrafo e stili Numerazione e sommario Gli spazi bianchi Comandi di campo Elenchi numerati e puntati Tabelle Inserimento di elementi
(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
MICROSOFT WORD 2010 CREAZIONE E FORMATTAZIONE DI DOCUMENTI
MICROSOFT WORD 2010 CREAZIONE E FORMATTAZIONE DI DOCUMENTI APRIRE MICROSOFT WORD 1. Start 2. Tutti i programmi 3. Microsoft Office 4. Microsoft Word 2010 MICROSOFT WORD 2010 LE REGOLE D ORO 1. Impostare
Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne.
Le tabelle Le tabelle vengono usate quando hai bisogno di mostrare dei "dati tabulari" cioè informazioni presentate logicamente in righe e colonne. E' difficile? All'inizio costruire le tabelle in HTML
VANTAGGI DI BOOTSTRAP
BOOTSTRAP COSA È BOOTSTRAP Bootstrap è un framework front-end gratuito per lo sviluppo web più semplice e veloce Bootstrap è composto da una seri di modelli HTML e CSS che definiscono: tipografia, forms,
Sommario. 1. Internet subito Le FAQ di Internet 13. Sommario vii
Sommario 1. Internet subito 1 Internet e il web 2 Alla scoperta della finestra di Internet Explorer 3 Ricercare sul Web 4 Usare schede e finestre 6 Scaricare Windows Live 7 Conoscere la posta elettronica
Grafici e Pagina web
Grafici e Pagina web Grafici Un grafico utilizza i valori contenuti in un foglio di lavoro per creare una rappresentazione grafica delle relazioni esistenti tra loro. Quando si crea un grafico ogni riga
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
GeCoTi 2K. Release 4.0
GeCoTi 2K Release 4.0 INTRODUZIONE... 3 PRINCIPALI NOVITÀ... 3 Risoluzione... 3 Nuova area di lavoro... 3 Schermata iniziale... 4 Chiamate fra moduli... 4 Menù secondario... 5 Toolbar... 5 Autorizzazioni
CODE MODEL - Modalità di scrittura del codice
CODE MODEL - Modalità di scrittura del codice Visual Studio supporta due modelli per la codifica di pagine web: - Codice Inline: Questo modello è il più vicino al tradizionale ASP. Tutto il markup HTML