Informatica Parte 1: HTML Un introduzione a HTML e CSS Laurea magistrale in Scienze della mente Laurea magistrale in Psicologia dello sviluppo e dell'educazione Anno accademico: 2012-2013 (Slide scritte dal dott. Jeremy Sproston, adattando materiale scritto dalla dott.ssa Viviana Patti) Sommario Contesto: i documenti del Word Wide Web In pillole: come funziona il Web HTML: caratteristiche generali linguaggio per la specifica della struttura di documenti web linguaggio di annotazione linguaggio per descrivere documenti ipertestuali Il W3C e la definizione di standard per il web W3C e HTML standard Standard W3C, browser e annotazioni proprietarie WWW Il WWW consiste in un insieme di documenti localizzati su computer diversi fra loro connessi in rete secondo il modello dell'ipertesto ( hypertext in inglese) Ipertesto: concetto base delle relazioni fra contenuti su web In un documento tradizionale è possibile leggere il testo soltanto in una direzione I documenti ipertestuali hanno una dimensione in più: a partire da un contenuto è possibile saltare attraverso un link a un altra sezione dello stesso documento o a un documento diverso. L informazione è organizzata come in una rete concettuale, dove i link rappresentano i legami concettuali I documenti WEB sono pagine ipermediali (natura ipertestuale + multimediale) Possono contenere Testo Immagini Suoni legami ipertestuali a - altre pagine - programmi - immagini, suoni... HTML (HyperText Markup Language): è il linguaggio che è stato proposto e si è affermato come standard per scrivere i documenti del web WWW e HTML HTML e browser HTML è un linguaggio che serve a specificare la struttura di documenti ipertestuali, che possano essere pubblicati sul World Wide Web e quindi visualizzati da altre persone tramite programmi appositi detti browser (Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome ) Descrivere la struttura di una pagina web: specificare l organizzazione del documento in termini di titoli, sottotitoli, paragrafi, liste, tabelle o immagini contenute Funzione del browser: interpreta dati codificati nel linguaggio HTML e visualizza l'informazione con la formattazione specificata
Cosa vuol dire navigare sul Web? Linguaggi per la specifica di pagine web Quando un utente si connette ad un sito Web, per es. facendo click su un link, succedono le seguenti cose: Il browser analizza l URL Chiede al DNS Server l indirizzo IP corrispondente all indirizzo simbolico contenuto nell URL -> catena di richieste Effettua una connessione al server corrispondente all IP ricevuto e gli invia una richiesta per il file indicato nell URL Il server risponde inviando il file richiesto scritto in HTML Il browser interpreta il file ricevuto, visualizzandolo secondo le specifiche contenute HTML: linguaggio di annotazione (markup) base riconosciuto dai vari browser WWW Consente di specificare come un insieme di informazioni deve essere strutturato a livello logico: quali sono i titoli, i sottotitoli, i paragrafi, gli elementi multimediali da inserire nella pagina, etc. Separazione fra contenuto e forma in un documento HTML a cui viene associato un documento di stile CSS: linguaggio per la specifica di regole di stile: colore del testo, dello sfondo di un documento, layout, aspetto dei menu di navigazione, etc. In questo corso concentreremo l'attenzione sui linguaggi standard HTML e CSS definiti dal W3C Altri linguaggi per la gestione di aspetti dinamici: JAVASCRIPT: linguaggio per la programmazione web lato client (dinamicità lato client) Tecnologia PHP, ASP per la costruzione di siti dinamici (dinamicità lato server) Markup languages Markup languages (linguaggi di annotazione) vs editor WYSIWYG Editor WYSIWYG (What You See Is What You Get, ciò che vedi è ciò che ottieni) in cui sullo schermo il documento viene visualizzato con la formattazione appropriata. Nel momento in cui applichiamo una particolare formattazione vediamo immediatamente l effetto sul video. Solitamente la formattazione viene applicata attraverso un interfaccia grafica -> es. Microsoft Word, OpenOffice Write Markup languages: per creare il documento non è necessario utilizzare un programma specifico, è sufficiente usare un editor di testo semplice, infatti le annotazioni sono scritte anche esse in testo semplice il documento viene visualizzato con un programma diverso da quello con cui viene creato il programma visualizzatore interpreta le annotazioni e tramite esse capisce con che formattazione deve visualizzare il documento (come il tipografo). HyperText Markup Language HTML è un linguaggio di annotazione. Per chi scrive documenti HTML: sono documenti di testo semplice, in cui le informazioni sulla formattazione del testo sono aggiunte sotto forma di annotazioni. chi scrive in HTML non vede la formattazione che applica al documento, vede solo il contenuto nudo e crudo e le annotazioni che egli stesso ha scritto. I documenti HTML vengono visualizzati con un programma specifico per la visualizzazione -> il browser, che interpreta le annotazioni scritte nel documento e lo visualizza con la formattazione appropriata. Se scrivendo un documento HTML vogliamo vedere come verrà visualizzato, dobbiamo disporre di un browser. Ciascun browser potrebbe visualizzare il testo in modo leggermente diverso, ed eventualmente ignorare impostazioni di visualizzazione che non sia in grado di riprodurre. HyperText Markup Language W3C e browser HTML è un linguaggio formale: è definito con regole precise che costituiscono la sintassi del linguaggio, Tali regole riguardano: quali annotazioni è possibile inserire come tali annotazioni devono essere scritte in caso di annotazioni combinate, come devono essere annidate/combinate tra loro Dalla nascita dell HTML ad oggi il linguaggio si è evoluto, e le regole sono in parte cambiate. Esiste uno standard HTML, e un consorzio che si occupa della sua definizione e del suo aggiornamento L ente che si occupa della definizione e dell evoluzione dell HTML è il W3C, World Wide Web Consortium http://www.w3.org/tr/1999/rec-html401-19991224/ HTML 5: http://diveintohtml5.org/ Quando un browser incontra un annotazione che non conosce (perché abbiamo sbagliato a scriverla o perché non la conosce) browser tollerante : ignora l'annotazione e visualizza il testo come se non esistesse un browser rigido : può decidere di non visualizzare ciò che resta del documento, o addirittura di non visualizzare nulla. Ci sono browser in commercio di entrambe le categorie, quindi è meglio fare attenzione a non commettere errori a non usare annotazioni troppo nuove che molti browser in commercio potrebbero non conoscere.
Strumenti di lavoro Un editor di testo semplice per scrivere documenti in HTML: TextPad Blocco Note TextEdit Browser Explorer, Firefox, Safari, Google Chrome Esistono anche per l HTML editor WYSIWYG (come Adobe Dreamweaver), in cui il codice HTML viene automaticamente generato, mentre il documento viene creato lavorando con un'interfaccia grafica simile a quella di Word I TAG In HTML le ANNOTAZIONI sono dette TAG. Vediamoli come comandi che specificano le caratteristiche di visualizzazione/struttura di un documento Per distinguere le annotazioni dal testo, occorre sempre racchiuderle tra i simboli < e > (parentesi angolari) Tutto ciò che si trova all'interno delle parentesi angolari viene interpretato dal browser come un comando sulla formattazione del testo. Tutto ciò che non si trova tra parentesi angolari verrà interpretato dal browser come testo da visualizzare; <NOME-TAG > testo </NOME-TAG> Il testo deve essere visualizzato/trattato secondo quanto stabilito dal tag/comando tag iniziale tag finale I TAG I tag contenitori sono formati da un tag iniziale, seguito da una porzione di testo, seguito da un tag finale, un es.: il testo racchiuso all interno della coppia di tag viene visualizzato nella barra del titolo del browser <title> Informatica - Corso di laurea Psicologia </title> tag iniziale Tag di chiusura i tag vuoti sono formati semplicemente dal loro nome, racchiuso tra parentesi angolari, un es.: <hr /> crea una linea separatrice orizzontale servono ad inserire un elemento (ad esempio, una linea orizzontale) all interno del testo Un primo documento Un documento HTML è costituito essenzialmente da 2 parti: HEAD e BODY <head> </head> INTESTAZIONE: descrizione delle caratteristiche del documento <body> </body> CONTENUTO: documento vero e proprio contenente gli elementi testuali e multimediali della pagina Web Un primo documento Un documento HTML è costituito essenzialmente da 2 parti: HEAD e BODY <head>: per lo più contiene tag che non portano ad alcuna visualizzazione nella finestra principale del browser ma riguardano caratteristiche del documento o informazioni utili per l'indicizzazione delle pagine da parte di motori di ricerca o browser La parte fondamentale è il TITLE del documento che verrà visualizzato come titolo nella finestra del browser ATTENZIONE! il titolo viene usato anche per costruire gli indici automatici usati dai motori di ricerca, quindi è importante che sia significativo Un primo documento Un documento HTML è costituito essenzialmente da 2 parti: HEAD e BODY <body>corpo della pagina</body>: documento vero e proprio contenente gli elementi testuali e multimediali che verranno visualizzati come pagina Web nella finestra del browser; all'interno di questa coppia di tag inseriremo altri tag che specificheranno le direttive di formattazione/strutturazione dei contenuti della pagina
Un primo documento <html> è un tag contenitore che racchiude l'intero documento HTML Salviamo il documento con estensione.htm o.html; indicate così il formato del documento riconosciuto dai browser Un primo documento Punto di partenza di tutti i documenti che scriveremo <html> <head> <title> Programma del corso di HTML </title> </head> <body>bla bla bla </body> </html> HTML non è sensibile ai caratteri maiuscoli e minuscoli nei tag/comandi; -> non è case-sensitive Tuttavia per convenzione i web designer usano scrivere i nomi dei tag in minuscolo Attributi dei TAG Esempio I comandi (TAG) possono avere degli attributi per cui specifichiamo valori secondo la seguente sintassi Nei tag contenitore gli attributi vanno <NOME-TAG specificati all interno del tag iniziale ATTRIBUTO1= VALORE1 ATTRIBUTO2= VALORE2...> informazioni </NOME-TAG> I valori di un attributo devono essere specificati fra virgolette, secondo la sintassi specificata caso per caso per lo specifico attributo: in alcuni casi si tratterà di valori numerici, in altri di stringhe di caratteri (parole)...ecc. <h1 align="center">informatica</h1> <p>la lezione del 21/03/07 si terrà in aula 8 anziché in aula 9.</p> <p align="right">jeremy Sproston</p> <hr width="50%" size= 3 > Esempio: gli attributi di hr Per separare parti di testo si può usare il comando <hr /> che produce linee orizzontali. 4 gli attributi principali: <hr size = numero {spessore in pixel} width = numero numero% {lunghezza in pixel o in percentuale} align ={left right center}{allineamento; default center} noshade {la presenza inibisce l'effetto tridimensionale della linea} /> Nota che noshade è un cosiddetto attributo toggle. Questi attributi non hanno un valore ma se sono presenti nella lista degli attributi "attivano" o "disattivano" una caratteristica Attributi deprecati e CSS Ricorda! L'uso di questi attributi di <hr />, come di molti attributi di tag HTML che riguardano non la struttura logica ma aspetti di presentazione del testo o di elementi delle pagine web, è deprecato nell'ultima versione di HTML (4.01) in favore dell'uso di fogli di stile (che vedremo più avanti). Li usiamo solo temporaneamente per imparare a scrivere in HTML, poi li accantoneremo in favore di specifiche di stile in CSS.
Per esempio: Grassetto (bold): <b>informatica</b> Grassetto/corsivo Paragrafi Per creare i paragrafi, usiamo <p> e </p>: <p>informatica.</p> <p>psicologia.</p> Corsivo (italics): <i>informatica</i> Combinazioni di tag: <p><b><i>informatica</i></b></p> Come ordinare i tag? In alcuni casi, l ordine dei tag non ha importanza <p><b><i>informatica</i></b></p> è equivalente a <p><i><b>informatica</b></i></p> ma è importante che i tag siano nidificati correttamente <p><b><i>informatica</b></i></p> non è corretto Spesso in HTML, le pagine che contengono errori sono comunque visualizzate in un modo corretto Titoli Titoli (headers): Vari livelli, da <h1> e </h1>, a <h8> e </h8> Per esempio: <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> Struttura di una pagina web Una pagina HTML: Ha sempre il tag <html>, finisce con </html> Contiene una sezione indicata con <head> e </head>, poi una sezione indicata con <body> e </body> Struttura di base: <html> <head> informazioni preliminari </head> <body> contenuto principale della pagina </body> </html> Meta-informazioni Abbiamo detto che all'interno del tag contenitore <head> di un documento HTML vengono inserite informazioni generali sul documento in altre parole in <head> inseriamo meta-informazioni sul documento anziché componenti del documento stesso che vanno inserite in <body> questa meta-informazione è spesso usata dai motori di ricerca o dai browser per indicizzare le pagine oltre a <title> esiste un altro tag utile descrivere "di che cosa parla" un documento: il tag vuoto <meta> <head> <title> Programma del corso di Informatica... </title> <meta...> </head>
Meta-informazioni Il tag <meta> mediante i valori assegnati ai suoi attributi - name e content - permette di descrivere un documento in termini di: descrizione dei contenuti; keywords; autore posso mettere in sequenza dentro <head> più tag <meta> per codificare diverse meta-informazioni sul documento parole chiave descrizione contenuto autore <head>... Tipo di contenuto e set di caratteri per il documento </head> <meta name="keywords" content= HTML, CCS"> <meta name="description content= Linguaggi per lo sviluppo di pagine web"> <meta name= author" content= Viviana Patti"> <meta http-equiv="content-type content="text/html; charset=utf-8 > Versione di HTML: <!DOCTYPE> In alcuni casi viene richiesto di specificare all interno di un documento HTML quale versione del linguaggio si sta usando importante per la validazione: si indica al browser quale è e dove si trova il documento che contiene le definizioni e le regole di applicazione di tutti gli elementi e gli attributi HTML utilizzati in una pagina web. Per specificare la versione di HTML che si sta usando si può usare il tag <!DOCTYPE>: si tratta di un tag vuoto che deve essere posto nella prima riga del documento, prima del tag iniziale <html> contenitore di tutto il documento Per oggi ci accontentiamo di sapere che per specificare che si sta usando la versione HTML 4.01 una possibilità è scrivere: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd"> Struttura di una pagina web Struttura più completa: <!DOCTYPE > <html> <head> <meta > informazioni preliminari </head> <body> contenuto principale della pagina </body> </html> Tag Spazio bianco, tabulazione, carattere di a capo: HTML considera tutti come un singolo carattere di spazio Quindi i seguenti esempio di codice HTML sono equivalente: <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> <h1>europa</h1> <h2>italia</h2> <h3>piemonte</h3> Tag Tutto l informazione tra <pre> e </pre> viene visualizzata con spazi bianchi, tabulazioni, carattere di a capo Per esempio: <pre> Informatica Psicologia </pre> Italia Font Per cambiare le caratteristiche (stile carattere, dimensione, colore) di una parte del testo di una pagina: si può usare il tag <font> Attenzione: si nota che <font> è un tag già deprecato in HTML 4.01 Esempio: <font face="verdana" size="3" color="red"> Attenzione!</font>
Caratteri speciali Caratteri speciali: caratteri che se scritti direttamente in un file HTML non vengono visualizzati correttamente da tutti i browser lettere accentate, lettere con dieresi o con cediglia, simboli particolari quali,,... http://htmlhelp.com/reference/charset/ L International Standards Organization ha definito un insieme standard di caratteri -Latin-1- che contiene 236 caratteri differenti In questo standard (ISO 8859-1) ad ogni carattere è associato un codice numerico (code), e ad alcuni anche un nome (name) Caratteri speciali In HTML è possibile visualizzare un qualunque carattere dell insieme Latin- 1 utilizzando uno di questi due sistemi: 1) simbolo & seguito dal nome del carattere seguito da un punto e virgola es: à -> à attenzione! i nomi sono case-sensitive! o in alternativa 2) simbolo &, seguito dal simbolo #, seguito dal codice numerico delcarattere, seguito da un punto e virgola es: -> codici: http://htmlhelp.com/reference/charset/ http://www.w3schools.com/tags/ref_entities.asp Caratteri speciali Alcuni più comuni: Per esempio, per scrivere i caratteri usati per i tag/codici < è visualizzato come < > è visualizzato come > & è visualizzato come & Anche per scrivere caratteri con accenti è è visualizzato come è é è visualizzato come é À è visualizzato come À ä è visualizzato come ä Ecc. Commenti Commenti: Testo che potrebbe essere incluso nel sorgente, ma che non è visualizzato nel browser Inizio commento: <!-- Fine commento: --> Per esempio: <!-- Questo è un commento.--> I tag HTML principali Collegamenti Apertura Chiusura Significato <html> </html> Il primo e l ultimo tag in una pagina HTML <title> </title> Testo sulla barra del titolo <head> </head> Informazione introduttive (incl. il titolo) <body> </body> La parte principale della pagina <p> </p> Paragrafo <hr /> Riga orizzontale <h1> <h8> </h1> </h8> Intestazioni <b> </b> Grassetto <i> o <em> </i> o </em> Corsivo <a href= > </a> Àncora <img src= /> Immagine <br /> Forza a capo Per creare un hyperlink a un altra pagina web: usiamo i tag <a href= percorso > e </a> Per esempio: <a href= http://www.di.unito.it/sproston/psicologia/1213/magistrale.html >Informatica</a> Riferimento ipertestuale L àncora è tipicamente visualizzato colorato e sottolineato: Àncora
Collegamenti Il percorso potrebbe essere assoluto o relativo: Assoluto: come sulla diapositiva precedente, oppure <a href= file:///c:/html/patente_europea.html >la Patente Europea del Computer</a> che indica che il file patente_europea.html si trova nella cartella HTML che si trova a sua volta sul disco C del mio computer (sconsigliato, meglio usare un riferimento relativo in questo caso) Relativo alla posizione nel file system della pagina corrente Per esempio, vorremmo creare un link alla pagina della Patente Europea del Computer direttamente nella pagina del corso di Informatica Consideriamo il caso in cui il file della pagina del corso di Informatica (informatica.html) e la pagina della Patente Europea del Computer (patente_europea.html) risiedono nella stessa cartella nel file system Per la parte percorso, basta scrivere il nome del file: <a href= patente_europea.html >la Patente Europea del Computer</a> Collegamenti Adesso consideriamo il caso in cui: La pagina informatica.html e la cartella Altri_corsi risiedono nella stessa cartella La pagina patente_europea.html risiede nella cartella Altri_corsi Per creare un link alla pagina patente_europea.html dalla pagina informatica.html, mettiamo il path relativo della pagina patente_europea.html nella parte percorso : <a href= Altri_corsi/patente_europea.html >la Patente Europea del Computer</a> Collegamenti Terzo caso: La pagina informatica.html risiede nella cartella Corsi_principali La pagina patente_europea.html risiede nella cartella Altri_corsi Le cartelle Corsi_principali e Altri_corsi risiedono nella stessa cartella Per creare un link alla pagina patente_europea.html dalla pagina informatica.html: <a href=../altri_corsi/patente_europea.html >la Patente Europea del Computer</a>.. significa cambiare posizione alla cartella direttamente più alto nella gerarchia del file system Altro esempio: <a href=../../universita/biografia/arte/magritte_bio.html > Collegamenti Per creare un link interno in una pagina: Per esempio, per mettere un link interno all inizio della pagina Aggiungere il tag <a name= inizio"> </a> al punto del codice HTML che corrisponde all inizio della pagina (per esempio, subito dopo il tag <body>) Attenzione! Deve esserci qualcosa tra <a name= inizio"> e </a> (per esempio, almeno uno spazio bianco) Per creare il link (in un altra parte della pagina), scrivere, per esempio: <a href="#inizio">link all inizio</a> In generale, I link interni possono essere usati per saltare a un altra sezione di una pagina Si può anche creare i link a una sezione di un altra pagina: Per esempio: <a href=../altri_corsi/patente_europea.html#esami">link all informazioni sugli esami</a> Collegamenti Per creare un link a un indirizzo email: Usare mailto (anziché http) Esempio: <a href= mailto:sproston@di.unito.it >Jeremy Sproston</a> Per creare un link a un file: Semplicemente scrivere il nome (+ percorso) del file Quando l utente clicca sul link, il browser apre l'opportuno programma di riproduzione associato a quel tipo di file Esempi: <a href= video/vacanza.avi >Vacanza video</a> I tag immagine I tag immagine: per includere un immagine direttamente in una pagina web Formato: <img src= nome_file /> Nome_file potrebbe includere un percorso nel file system, per esempio <img src=../altri_corsi/ecdl.jpg /> Posizione di un immagine: L immagine viene posizionata in esattamente il punto in cui si trova il tag <img src= nome_file /> La corrispondente riga di testo si allinea al suo margine inferiore <a href= esercizio1.pdf >Primo esercizio</a> <a href=../musica/magic_window.mp3 >canzone preferita</a>
I tag immagine I tag immagine Per esempio: Per esempio: <p> <img src="basilica.jpg /> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. <img src="basilica.jpg /> </p> Per esempio: I tag immagine Per esempio: I tag immagine <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, <img src="basilica.jpg /> (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: <img src="basilica.jpg /> gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> Per inserire un immagine da sola (senza testo): racchiudere il tag del immagine tra quelli del paragrafo Per esempio: <p> <img src="basilica.jpg /> </p> <p> Sopra la porta principale, i quattro cavalli bronzei di Costantinopoli, (sono copie: gli originali sono nel museo di San Marco) ricordano la quarta Crociata del 1204. </p> I tag immagine I tag immagine Attributo height (altezza) e width (larghezza) Per specificare precisamente le dimensioni dell immagine Le dimensioni sono specificati in numeri di pixel Se la dimensione originale della figura è diversa dalla dimensione specificata in height/width, il browser la adatterà Per ottenere la dimensione (in pixel) di un immagine: ottenere la finestra Proprietà dell immagine (per esempio, cliccando con il tasto destro del mouse sopra l icona dell immagine, poi scegliendo la voce Proprietà, poi cliccando sulla linguetta Riepilogo) Esempio: <img src="basilica.jpg height= 225 width= 300 />
I tag immagine src: il file immagine sorgente Tassellamento (tiling): usare un immagine per lo sfondo di una pagina web L immagine viene copiata più volte, per coprire la zona principale dello browser Attributo del tab body: <body background= nome_file > Attenzione ai colori dell immagine: la pagina può diventare illegibile Attributo src: specifica la posizione del file immagine sorgente che si vuole visualizzare; unico attributo obbligatorio 1. Dove tenere i file di immagine sorgente? 2. Come specificare la posizione del file che contiene l immagine all interno dell attributo src? 1. Buone pratiche di sviluppo di siti web: buona norma memorizzare i file immagine che intendiamo inserire nella pagine del nostro sito in una cartella separata creata come sottocartella della cartella principale contenente le pagine HTML che costituiscono il sito web che stiamo sviluppando nome consigliato per la cartella: immagini. src: il file immagine sorgente 2. Come specificare la posizione del file immagine all interno dell attributo src? Buona pratica: indicare indirizzi relativi (il discorso è simile a quello per i collegamenti) Indirizzo assoluto: Esempio: <img src= "file:///c:/mysite/immagini/benedetti.jpg"> Il file benedetti.jpg si trova nella cartella immagini, che si trova a sua volta nella cartella mysite sul disco C del mio computer Indirizzo relativo: posso specificare invece che l'indirizzo completo, solo una sua parte, in modo da specificare la posizione del file immagine relativamente alla posizione del file HTML in cui sto inserendo l immagine. Altri attributi di <img> alt (alternative text): specifico un testo descrittivo dell immagine che viene visualizzato: quando l utente di un browser grafico posiziona il puntatore del mouse sull immagine; quando il browser NON riesce a visualizzare l immagine. È un attributo importante: migliora l accessibilità dei siti web descrivendo la funzione dell immagine sul sito, può essere usato da lettori di schermo per non vedenti e da altri dispositivi adattivi Esempio: <img src= immagini/benedetti.jpg"> è scritto nel file poesia.htm Il file benedetti.jpg si trova nella cartella immagini, che si trova a sua volta in una sottocartella della cartella che contiene la pagina web poesia.htm Gestire i colori Per cambiare il colore dello sfondo di una pagina: Usare l attributo bgcolor del body tag: <body bgcolor= silver > Per cambiare il colore del testo e il colore dei link: Usare gli attributi text e link/vlink/alink del body tag: <body text= blue link= red vlink= green alink= yellow > vlink sta per link visitati, alink sta per link attivati Per cambiare il colore del testo solo in alcuni punti: Usare il tag font con l attributo color <font color= navy >Ciao</font> Gestire i colori 16 colori predefiniti (da http://en.wikipedia.org/wiki/web_colors)
Gestire i colori Per definire più colori, usiamo i codici numerici Solitamente nei computer, i colori sono espressi come combinazione di rosso, verde e blu Rappresentiamo l intensità di uno di questi tre colori come un numero compreso tra 0 e 255 Rappresentiamo i colori in generale come tre numeri (in ordine rosso, verde e blue) Per esempio: (0, 0, 0) nero (255, 255, 255) bianco (255, 0, 0) rosso intenso (0, 255, 0) verde intenso (0, 0, 255) blu intenso (255, 142, 42) arancione carota Gestire i colori In HTML, rappresentiamo i codici per i numeri usando le cifre esadecimali tra 00 e FF Il cancelletto (#) indica che quello che segue è un numero esadecimale Per esempio: #FF0000 rosso intenso #00FF00 verde intenso #0000FF blu intenso #FF8E2A arancione carota Esempio dell uso: <font color= #FF8E2A >Ciao</font> Gestire i colori Codici esadecimali per i 16 colori predefiniti: Colori web safe Cross-browser color palette (tavolozza di 216 colori) Liste Elenco puntato (lista non ordinata): Per definire un elenco puntato: <ul> e </ul> (unordered list) Ogni elemento del elenco è racchiuso nelle coppie di tag <li> e </li> (list item) Per esempio: <ul> <li>martin Scorsese</li> <li>sofia Coppola</li> <li>george Lucas</li> </ul> Liste Elenco puntato (lista non ordinata): Per cambiare la forma del simbolo che precede i vari elementi della lista occorre specificare le opportune proprietà di stile Possibili tipi di lista non ordinata: punto o cerchio quadrato disc circle square Questi valori vanno specificati in coppia con l opportuna proprietà di stile, es: <ul style= list-style-type: circle >
Liste Elenco numerato (lista ordinata): Per definire un elenco numerato: <ol> e </ol> (ordered list) Usiamo <li> e </li> come per un elenco puntato Per esempio: <ol> <li>martin Scorsese</li> <li>sofia Coppola</li> <li>george Lucas</li> </ol> Liste Elenco numerato (lista ordinata): Per default i numeri sono quelli arabi e la numerazione parte da 1. È possibile specificare proprietà di stile per l elemento <ol> che consentono di cambiare questa numerazione standard Attributi: START può essere utilizzato quando si vuole iniziare la numerazione con unnumero diverso da 1. TYPE permette di definire il tipo di numerazione degli elementi della lista: numeri arabi (default), lettere maiuscole, lettere minuscole, numeri romani maiuscoli, numeri romani minuscoli. Liste Elenco di definizioni: Per definire un elenco di definizioni: <dl> e </dl> (definitional list) Elementi da definire: tra <dt> e </dt> Le definizioni degli elementi: tra <dd> e </dd> Per esempio: <dl> <dt>martin Scorsese</dt> <dd>un regista, sceneggiatore, attore e produttore cinematografico statunitense di origini italiane.</dd> <dt>sofia Coppola</dt> <dd>una regista, sceneggiatrice ed attrice cinematografica statunitense.</dd> </dl> Liste È possibile nidificare gli elenchi: Per esempio: <ul> <li>piemonte</li> <ul> <li>torino</li> <li>alessandria</li> </ul> <li>lombardia</li> <li>liguria</li> </ul> Per creare una tabella: <table> e (con attributo border per aggiungere un bordo) Per cambiare lo spessore del border, scriviamo border= n, dove n è un numero Se viene omesso lo spessore dei bordi è 0 e non vengono visualizzate le linee divisorie delle celle Per creare una riga della tabella: e Per creare una cella di una riga: <td> e </td> (table data) Definizione degli elementi della tabella: come un elenco (elenco di righe) dei elenchi (elenchi di celle) Per esempio: <table border= 1 > <td>piemonte</td> <td>torino</td> <td>4.350.521</td> <td>lombardia</td> <td>milano</td> <td>9.509.135</td>
Per esempio: <table border= 5 > <td>piemonte</td> <td>torino</td> <td>4.350.521</td> <td>lombardia</td> <td>milano</td> <td>9.509.135</td> Per creare un intestazione per l intera tabella: <caption> e </caption> Inseriti all interno dei tag <table> e <table> della tabella Per creare le intestazioni delle singole colonne: <th> e <th> (table heading) Inseriti all interno dei tag e della prima riga della tabella Per esempio: Possiamo specificare il colore dello sfondo della tabella, di una riga, e di una cella <table border= 1 > <caption>regioni d Italia</caption> <th>regione</th> <th>capoluogo</th> <th>num. abitanti</th> <td>piemonte</td> <td>torino</td> <td>4.350.521</td> <td>lombardia</td> <td>milano</td> <td>9.509.135</td> <body bgcolor="silver"> <table border= 1 bgcolor="white"> <tr bgcolor="gray"> <th>regione</th> <th>capoluogo</th> <th>num. abitanti</th> <td bgcolor="blue">piemonte</td> <td>torino</td> <td>4.350.521</td> <td bgcolor="red">lombardia</td> <td>milano</td> <td>9.509.135</td> </body> bordercolor: attributo del tag table; per cambiare il colore del bordo Possiamo usare l attributo align (per l intera tabella, per righe, e per celle) <table border= 1 bordercolor="green"> <table border= 1 align= center > <th>regione</th> <th>capoluogo</th> <th>num. abitanti</th> <tr align= right > <td>piemonte</td> <td>torino</td> <td>4.350.521</td> <td>lombardia</td> <td align= right >Milano</td> <td>9.509.135</td>
cellpadding: attributo per cambiare lo spazio intorno agli elementi delle celle (valore di default è 2) cellspacing: attributo per cambiare lo spazio tra le celle (valore di default è 2) <table border= 1 cellpadding= 0 > <table border= 1 cellspacing= 0 > <table border= 1 cellpadding= 5 > <table border= 1 cellspacing= 5 > width: espresso in pixel, oppure in un percentuale Può essere applicato all intera tabella, oppure alle celle <table border= 1 width= 75% > <table border= 1 width= 450 > <table border= 1 > <td>piemonte</td> <td width= 50% >Torino</td> <td>4.350.521</td> <td>lombardia</td> <td>milano</td> <td width= 100 >9.509.135</td> height: come width, può essere espresso in pixel o come un percentuale, e può essere applicata all intera tabelle o a righe <table border= 1 height= 75% > <table border= 1 > <tr height= 60 > <td>piemonte</td> <td>torino</td> <td>4.350.521</td> <tr height= 75% > <td>lombardia</td> <td>milano</td> <td>9.509.135</td>
valign: come align, ma per l allineamento verticale (usa i valori top, middle e bottom, con middle come default) Può essere applicato all intera tabella, alle righe, alle celle <table border= 1 height= 75% valign= middle > <td valign="top">piemonte</td> <td>torino</td> <td>4.350.521</td> <tr valign="bottom"> <td>lombardia</td> <td>milano</td> <td>9.509.135</td> colspan e rowspan: per creare l unione di più celle Per esempio: <table border= 1 > <td colspan="3" align="center">corsi</td> <td>informatica</td> <td>psicologia</td> <td>biologia</td> colspan secondo esempio: rowspan esempio: <table border= 1 > <td colspan="2" align="center">scienze MFN</td> <td>psicologia</td> <td>informatica</td> <td>fisica</td> <td>psicologia</td> <table border= 1 > <td rowspan="2">scienze MFN</td> <td>informatica</td> <td>fisica</td> Si può nidificare la tabelle: <table border= 1 > <td>prima cella nella prima tabella</td> <td> <table border= 1 > <td>tabella nidificata</td> <td>tabella nidificata</td> </td> Le tabelle (spesso senza l attributo border) sono utile anche per controllare l organizzazione della pagina Per esempio: una sequenza di link a pagine sulle città Italiane <a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td>
<a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td> <a href= pie.html >Piemonte</a> <a href= lom.html >Lombardia</a> <a href= lig.html >Liguria</a> <a href= abr.html >Abruzzo</a> oppure <table> <td><a href= pie.html >Piemonte</a></td> <td><a href= lom.html >Lombardia</a></td> <td><a href= lig.html >Liguria</a></td> <td><a href= abr.html >Abruzzo</a></td> Cambiato la larghezza della finestra: diversi effetti Sommario Parte 2: CSS Introduzione ai fogli di stile il linguaggio CSS e la sua evoluzione integrazione HTML - CSS Regole di stile: selettori e dichiarazione Selettori di tipo Regole di stile, dove? Combinare CSS e HTML: definizione di stili esterno o interni; CSS in pratica: sfondi; caratteri; liste; Ereditarietà: importante per scrivere regole più semplici Contenuti vs estetica Il linguaggio W3C standard per lo stile: CSS Obiettivo: separare il contenuto del documento (struttura testo- elementi multimediali inseriti) da come il documento viene presentato (indicazioni di stile interpretate dal browser) Contenuti (HTML) vs estetica (CSS) HTML è un linguaggio di annotazione, in cui gli elementi del documento (testo e altri elementi) sono identificati e delimitati da <tag> I tag HTML devono essere usati solo come marcatori strutturali per specificare la struttura/funzione logica dei contenuti del documento, non per produrre effetti di stile Per gestire la presentazione del documento useremo un nuovo linguaggio di specifica, i fogli di stile: specifiche per il controllo della presentazione/stile di una pagina web: colori, dimensione del font, layout, etc. Per la specifica dei fogli di stile usiamo un nuovo linguaggio standard: CSS (Cascading Style Sheets), interpretato da tutti i browser di nuova generazione Anche questo è un linguaggio formale ma vivo: in evoluzione: la specifica attualmente raccomandata (e quindi giunta alla fase finale del processo che riguarda tutte le nuove versioni proposte) è la versione 2.1 (CSS Livello 2, revisione 1): http://www.w3.org/tr/css2/
Integrazione HTML-CSS Un documento HTML e il relativo foglio di stile sono entità concettualmente separate HTML CSS Da un lato ho il documento HTML vero e proprio, che specifica il contenuto del documento accompagnato dalla sua marcatura logico-strutturale Dall altro i(l) fogli(o) di stile che descrivono nel linguaggio CSS come quel contenuto deve essere visualizzato. Con l introduzione dei fogli di stile CSS tutti i tag e attributi HTML legati all aspetto grafico della pagina sono stati deprecati: queste informazioni vanno più specificate utilizzando HTML all interno del body del documento, ma devono essere fornite negli spazi dedicati agli stili, utilizzando il linguaggio CSS. CSS Regole di stile CSS (Cascading Style Sheets): il linguaggio più utilizzato per specifiche di stile con HTML: http://www.w3.org/style/css/ Un foglio di stile CSS è costituito da un insieme di regole che rispettano la sintassi indicata nel riquadro blu Una regola di stile si compone di 2 elementi costitutivi: un selettore e una dichiarazione. selettore {proprietà1: valore1; proprietà2: valore2; } Il selettore determina a quali elementi del file HTML applicare la regola di stile La dichiarazione, contenuta fra parentesi graffe, specifica la proprietà di stile vere e proprie che la regola vuole controllare CSS regole di stile Sintassi di una dichiarazione: selettore {proprietà1: valore1; proprietà2: valore2; } Ogni dichiarazione contiene una o più dichiarazioni singole di stile, più precisamente una o più coppie proprietà-valore proprietà di stile che la regola vuole controllare (es. colore; tipo di carattere; etc ) seguita dai due punti (:) valori assegnati alle varie proprietà ogni dichiarazione singola di proprietà termina (ed è separata dalle eventuali successive) con il simbolo di punto e virgola (;) CSS Regole di stile selettore di tipo In ogni regola le dichiarazioni di stile sono associate a un selettore che definisce a quali elementi del documento HTML voglio applicare la regola Ci sono diversi modi di specificare un selettore; il caso più semplice: selettore di tipo selettore=nome di un tag HTML Definisco uno stile per tutti gli elementi del documento HTML annotati con un certo tag (paragrafi, titoli h1, ) Per ogni regola all interno delle parentesi graffe ho elenchi di dichiarazioni di stile: coppie proprietà:valore separate da ; che specificano le caratteristiche di stile da associare alle parti di documento annotate con un certo tag NB:Le virgolette selettore di tipo proprietà p {font-family: "Times New Roman"; font-size: 10pt; color: #006688;} valore sul valore sono necessarie solo se il valore della proprietà contiene spazi bianchi Combinare regole di stile e CSS Lo stile può essere in due modi principali: stile interno o esterno al documento HTML 1) Stile interno: le regole di stile scritte nel linguaggio CSS sono definite all interno dell intestazione (<head></head>) del singolo documento HTML a cui si vanno ad applicare; 2) Stile esterno: le regole di stile sono definite in un file esterno separato che viene richiamato - attraverso l inserimento di un apposito collegamento - all inizio di ogni pagina HTML a cui viene applicato (molto utile se si vuol definire uno stile uniforme per tutto il sito) Combinare regole di stile e CSS Stile esterno: Creazione di un documento separato (file con estensione.css) dal file.html di cui definisce lo stile Il file.css contiene regole che determinano l'aspetto della pagina HTML a cui è collegato Principale vantaggio: più facile e veloce la gestione dello stile del sito: se vogliamo modificare l'aspetto di diverse pagine web di un sito non dobbiamo modificare tutte le pagine una per una: è sufficiente modificare il file.css che contiene le regole di stile
CSS interni: <style> Esempio Dove inserire le regole per definire l aspetto dei tag di un documento? Possibilità 1: all'interno del documento HTML nell intestazione, utilizzando il tag <style> Attributo type di <style>: specifico il linguaggio in cui definisco le regole di stile, nel nostro caso CSS <html> <head> <title> </title> <style type= text/css > </style> </head> <body> </body> </html> Supponiamo di volere specificare il seguente stile interno per il documento cssinterno1.htm: sfondo del documento (tag <body>): blu paragrafi (tag <p>): font Verdana, dimensione 12 punti, colore bianco titoli (tag <h1>): font Verdana, colore #CCCC99 <head> <style type="text/css"> body {background-color: #000099} p {font-family:verdana; 3 regole di stile font-size:12pt; color: #ffffff;} h1 {font-family: Verdana; color: #CCCC99;} </style> </head> CSS in pratica: sfondi CSS in pratica: i caratteri Alcune proprietà che è possibile inserire in regole di stile per specificare caratteristiche dello sfondo di diversi tag background-color: colore specificato secondo quanto abbiamo visto nella lezione 2 (es. codifica esadecimale dei valori di RGB) es. body {background-color: white;} p {background-color: #FFFFFF;} background-image: url(pathname del file immagine) es. background-image:url(immagini/sabbia.jpg) Partiremo sempre da un file HTML in bianco e nero, a cui il colore viene applicato solo tramite regole di stile Le proprietà di base a proposito di caratteri sono: il font da usare: proprietà font-family per font family di solito si specifica non un solo valore ma una lista di valori separati da virgole; se il browser non conosce la prima famiglia di font usa la seconda e così via; la dimensione: proprietà font-size la consistenza: proprietà font-weight font corsivo o no: proprietà font-style Esempio 1: h1 {font-family:"comicsansms, Verdana"; Posso usare misure assolute (pt,mm, ) o font-size:18pt; relative (%, em) font-weight: bold;} Esempio 2: ul {font-family:verdana,arial,helvetica, sans-serif; font-style:italic;} CSS in pratica: il testo CSS esterni: <link> + file.css Le proprietà di base a proposito di blocchi di testo (intero documento, paragrafi, titoli, link, etc.) sono: colore proprietà color: il valore va specificato secondo le regole che abbiamo già visto: codice esadecimale preceduto da # o nome inglese per i colori base l'allineamento del testo proprietà text-align Esempio: h1 {color: green; text-align:center;} indentazione della prima riga proprietà text-indent Esempio: p {text-indent: 300pt} la sua decorazione - text-decoration: es. con il valore underline ottenete il sottolineato Se si vuol definire uno stile uniforme per tutti i file di un sito, dove inserire le regole per definire l aspetto dei tag? Meglio la possibilità 2 Possibilità 2: inserire le regole in un file separato, con estensione.css
CSS esterni: <link> + file.css CSS in pratica: liste Occorre stabilire un collegamento fra il file CSS contenente le regole di stile e il documento HTML a cui si vogliono applicare le regole di stile definite All'interno di <head> di tutte le pagine a cui si vuole applicare il foglio di stile esterno inseriamo un riferimento al file di stile attraverso il tag <link> e i suoi attributi <head> <link rel= stylesheet" type= text/css" href="miostile.css">... </head> Lo stesso file CSS può essere applicato a più file HTML Grazie ai CSS possiamo definire in vari modi l'aspetto delle liste in HTML. Le proprietà che andremo ad esaminare si riferiscono non ai tag usati per annotare una lista ordinata (<ol>) o non ordinata (<ul>), ma ai singoli elementi che le compongono, ossia all'elemento <li> (elemento di lista) Proprietà: list-style-image: il valore è un url list-style-type: possibili valori: disc, circle, square Esempio: li {list-style-image:url(immagini/blueball.gif);} Ereditarietà strong strong Ereditarietà Un importante proprietà dei fogli di stile CSS è l'ereditarietà: Ogni elemento HTML "annidato" (incluso) in un altro ("figlio" di un altro) eredita tutte le proprietà CSS applicate all elemento padre Per esempio, in un ipotetico file1.html: <p>l'esame si componedi due parti: una<strong>relazione scritta</strong> e una <strong>verifica orale</strong> </p> I due elementi <strong>...</strong> sono"annidati" nell'elemento <p>...</p> (sono figli di <p>)? ne ereditano le proprietà. Se nel foglio di stile, ho definito la regola: p{font-family:verdana; font-size:10pt; color:blue} anche il testo degli elementi <strong>...</strong> sarà visualizzato in Verdana, 10 punti, blu In un ipotetico file2.html: <ul> <li>prima voce </li> <li>seconda voce</li> </ul> I due elementi <li>...</li> sono "annidati" nell'elemento <ul>...</ul> (sono figli di <ul>)? ne ereditano le proprietà Nel caso in cui definisco: ul {font-family:verdana,arial,helvetica,sans-serif; font- size:10pt; color:#006699; font-style:italic}, anche il testo delle varie voci appare Verdana, 10 punti, blu, corsivo Selettore di Classe Abbiamo visto come definire regole di stile associate a un tag (selettori di tipo) LIMITI: supponiamo che il nostro documento contenga alcuni paragrafi importanti, che vogliamo vengano visualizzati in modo diverso dagli altri. Considera la seguente specifica: Tutti i paragrafi (tag <p>): font Verdana, dimensione 10 punti Paragrafi importanti: font Verdana, dimensione 12 punti, grassetto, sfondo giallo Titoli di livello1 (tag <h1>): font Verdana, dimensione 20 punti, colore rosso Non è possibile realizzare questa specifica con quanto detto sinora: abbiamo visto come impostare la visualizzazione relativa ad un elemento associato ad un tag (ad esempio <p>): i paragrafi importanti sono associati al tag <p> esattamente come quelli normali, possiamo dire che ne costituiscono una classe speciale Abbiamo bisogno di strumenti flessibili per distinguere classi di elementi Definizione di regole di stile associate a una classe Obiettivo: Vorrei potere definire delle classi speciali di paragrafi etichettati come importanti, e per questo insieme di paragrafi delle regole di stile diverse Soluzione selettore di classe: è possibile definire un insieme di regole di stile per una classe, etichettate con un selettore che prende il nome "astratto della classe. Le regole verranno applicate, nel file.html, a vari elementi (tag) etichettati opportunamente come membri della classe; Esempio: definizione di regole di stile per la classe importante :.importante {font-family:verdana; font-size:10pt; color:red} Selettore di classe
Applicazione di regole di stile a una classe di elementi di un doc HTML: l attributo class Quando definiamo regole di stile associate a un tag (stili di tag selettore di tipo) l applicazione delle caratteristiche di stile definite dalle regole avviene automaticamente. Nel caso di regole di stile associate a una classe (stili di classe selettore di classe) dobbiamo specificare noi quali elementi del documento HTML appartengono alla classe di stile che abbiamo definito. Usiamo l attributo class= nomeclasse Esempio: per dichiarare che un certo paragrafo è un elemento che va visualizzato secondo lo stile definito dalla regola associata alla classe importante si usa l attributo class che prende come valore il nome della classe: <p class= importante > Classi trans-tag Le classi di solito sono definite senza riferimento a un tag specifico: trans-tag Esempio: potrei volere definire una classe.speciale{font-family: Verdana; font-size12pt; color:red; font-weight:bold} come una classe che potrà essere richiamata all'interno di qualunque tag (per cui hanno senso quelle proprietà) <h1 class= speciale > <h3 class= speciale > <p class= speciale > Classi nell ambito di un tag Posso anche impostare il selettore di classe in modo che individui sempre e solo una sottoclasse nell ambito di un certo tag Esempio: p.rossi {font-family:verdana; font-size:10pt; color:red} classe rossi che potrà essere richiamata solo all'interno di un elemento annotato col tag <p> <p class= rossi >bla bla </p> <h1 class= rossi >bla bla </h1> Riassumendo: selettori per regole di stile visti Stili di tag selettori di tipo: p {font-size:12pt;color:#3366cc} per definire regole di stile associate a un tag. Stili di classe:.importante{color:#009966;font-weight:bold} per definire lo stile di una classe di elementi (trans-tag); p.dispari {background-color:#0099ff } per definire lo stile di una classe di elementi associati a un tag. Pseudo-classi Una pseudo-classe permette di definire uno stile non per un elemento/tag ma un suo particolare stato. In altre parole, permette di impostare uno stile per un tag al verificarsi di certe condizioni. sintassi: le pseudo-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore intuitivamente: definisco lo stile per un certo stato dell elemento indicato dal selettore selettore:pseudoclasse{regole di stile} Pseudo-classi e link Stile per un certo stato dell elemento indicato dal selettore: selettore:pseudoclasse{regole di stile} Il primo costrutto di questo tipo che esaminiamo è quello relativo al tag <a> per la definizione di collegamenti I link annotati attraverso il tag <a> possono assumere i 4 stati: 1. link ancora non visitato (la pagina web è stata caricata e l utente non ha ancora fatto clic sul link) -> :link 2. link già visitato almeno una volta dall utente -> :visited + stati dinamici che dipendono dall interazione con l utente 3. il puntatore del mouse è posizionato sopra il link -> :hover 4. il pulsante del mouse è premuto sopra il link, punta ad un URL attivo -> :active
Pseudo-classi e link Pseudo-classi e ordine Quando vogliamo definire regole di stile per <a> dobbiamo usare come selettore, il selettore di tipo per il tag <a> insieme a una pseudoclasse che permetta di specificare che vogliamo definire delle regole di stile per un certo stato del link. a:link imposta gli stili di un link che punta ad un URL non ancora visitato. a:visited imposta gli stili di un link che punta ad un URL già visitato. a:hover imposta gli stili di un link sopra il quale sia posizionato il puntatore del mouse. a:active imposta gli stili di un link che punta ad un URL attivo: il pulsante del mouse è premuto sopra di esso. Esempio (attenti all ordine): a:link {color:red} a:visited{color:green} a:hover {color:purple} Perché facciamo attenzione all ordine? Le dichiarazioni di stile per pseudo-classi per funzionare correttamente devono, a causa di questioni di ereditarietà e possibili conflitti fra stili, seguire un ordine ben prestabilito. L'ordine in cui vanno inserite in un foglio di stile CSS le dichiarazioni relative ai link è: a:link { } a:visited { } a:hover { } a:active { } Attenzione: non siamo obbligati a definire sempre una regola per ogni stato. Associare diversi stili a diversi gruppi di link in una stesso documento Una possibilità, con gli strumenti che già abbiamo: usare le classi Definiamo uno stile di classe per <a>, per cui il CSS sarà una cosa del tipo a.speciale{font:bold18px Georgia,"Times New Roman",Times,serif; text-decoration:none} a.speciale:link{color:#003366} a.speciale:visited{color:#669966} a.speciale:hover, a.speciale:active{color: #112233; text-decoration: underline;} Associamo la classe speciale ai link che vogliamo siano colorati diversamente: <ul> <li><a href="snicola.htm#vaticani" class="speciale >Ai Musei Vaticani</a></li> <li><a href="snicola.htm#umbria" class="speciale">alla galleria nazionale dell'umbria</a></li> </ul> Riassumendo: selettori per le regole di stile visti Stili di tag p{font-size:12pt;color:#3366cc} Per definire lo stile associato a un tag Stili di classe: p.dispari {background-color:#0099ff } Per definire lo stile di una classe di elementi associati a un tag.importante{color:#009966;font-weight:bold} Per definire lo stile di una classe di elementi (trans-tag) Stili per pseudoclassi: a:link{color: #000066;text-decoration: none} Per specificare l aspetto dei link nei loro vari stati Importante l ordine! a.speciale:link{color: #000066;text-decoration: none} Combinazione di classi e pseudoclassi Definire uno stile da associare a un solo elemento: selettore individuale Stili personalizzati per un solo elemento individuale in un documento HTML Selettore: #nomestile{ regole di stile } Esempio: #indspeciale{font-family:verdana; font-size:10pt; color:red} Una classe può essere applicata a più elementi di un documento mentre lo stile individuale può essere applicato a un solo elemento Per applicare le regole di stile a un elemento specifico di un documento, etichettiamo l elemento speciale tramite l attributo id: Esempio: un paragrafo speciale: <p id= indspeciale > id può comparire in un documento HTML una sola volta, per identificare un elemento particolare Conflitti e ordine di precedenza fra regole C è un conflitto fra regole quando due regole: si applicano ad uno stesso elemento del testo; definiscono la stessa proprietà di tale elemento; assegnano alla proprietà due valori diversi Risolvere il conflitto significa stabilire quale dei valori diversi viene effettivamente assegnato alla proprietà (chi vince?) In CSS una regola definita dopo un altra ha la precedenza su di essa. Determinando la precedenza il conflitto viene sicuramente risolto, in quanto date due regole una deve per forza seguire l altra.