lezioni su HTML in PPT
annuncio pubblicitario
HTML, HyperText Markup Language Antonio Pescapè (pescape at unina.it) Scopo della lezione • Mostrare, nella pratica, il concetto di ipertesto. • Fornire, in pratica, il concetto di interprete. • Senza avere alcuna conoscenza di programmazione scrivere (forse per la prima volta) un semplice programma (… la “L” di HTML sta per Language…). • Fornire conoscenze di base per costruire pagine web statiche senza l’ausilio di editor specializzati (Frontpage, HTML Edit, …). • Fornire conoscenze per la costruzione di pagine web elementari nelle quali poter ospitare i vostri “contributi multimediali”. a.a. 2006/2007 HTML: un po’ di storia • Il WWW (World Wide Web) fu inventato nel 1991 da Tim Berners Lee al CERN di Ginevra. • Esso consisteva in un sistema per rendere disponibili su Internet dei contenuti di testi ed immagini (pagine Web) con facilità, mediante protocolli di comunicazione (HTTP), linguaggi di codifica dei contenuti (HTML), e sintassi per indicare la collocazione dei contenuti (URL). • Lo standard HTML fu inizialmente sviluppato dall’IETF. • Oggi le specifiche dello standard e le sue evoluzioni sono manutenute dal World Wide Web Consortium (www.w3c.org). a.a. 2006/2007 HTML: le specifiche standard • Lo standard HTML si è evoluto in diverse versioni successive: 1.0, 2.0, 3.0, 3.2, 4.0, 4.01. • Un cambio nel nome: la versione attualmente più recente si chiama XHTML 1.0. • Molto simile alla precedente HTML 4.01. • Il cambiamento da HTML a XHTML riguarda principalmente l’adozione delle regole più rigide utilizzate già da XML (un altro tipo di markup language usato per altri scopi e leggermente più complesso) per HTML, in modo da renderlo più facile da processare e manutenere. a.a. 2006/2007 HTML: i tag • Un documento HTML è composto sia dal contenuto che da comandi comandi. • Il contenuto è ciò che viene visualizzato dall’utente con un browser. • I comandi (o tag tag) sono le istruzioni che fanno sì che il documento venga visualizzato correttamente in tutte le sue parti così come appare nel browser. a.a. 2006/2007 HTML: il formato dei tag • Le pagine Web, dunque, contengono due tipi di oggetti: 1. Il testo del documento; 2. I tag HTML che indicano gli elementi, la struttura, la formattazione e i link ipertestuali con altre pagine, …. • In generale i tag hanno il seguente aspetto: • <NomeTag> testo su cui il tag ha effetto </NomeTag> • <NomeTag attributo=“valore”> contenuto </NomeTag> a.a. 2006/2007 HTML: il compito dei tag • HTML è un “markup language” • partendo dal testo si possono poi applicare alcuni particolari tag a parole e paragrafi per ottenere la formattazione richiesta. I tag definiscono: • • intestazioni, paragrafi, elenchi e tabelle • lo stile dei caratteri, ad esempio il grassetto • … a.a. 2006/2007 HTML: come scrivere una semplice pagina • Una pagina Web è un file con estensione .htm o .html • Il modo migliore per iniziare a creare pagine Web è quello di usare un semplice editor di testi, ad esempio Notepad o Wordpad. Esistono anche: • editor grafici di HTML (es. Front Page di Microsoft, Dreamweaver, HTML Edit…) • • editor a Tag • programmi convertitori (Word, WordPerfect ecc.) L’altro strumento di cui avremo bisogno per visualizzare le pagine che scriveremo è il browser. a.a. 2006/2007 HTML: struttura di una pagina • Ciò che dobbiamo inizialmente scrivere è: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> </BODY> </HTML> a.a. 2006/2007 HTML: primo esempio <HTML> <HEAD> <TITLE> Home Page di Nome </TITLE> </HEAD> <BODY> </BODY> </HTML> a.a. 2006/2007 HTML: il tag <body> • Dopo l'intestazione deve essere inserito il corpo del documento, identificato dal marcatore <body>: <body>...</body> • Il testo del documento va inserito tra questi due marcatori, includendo tutti gli altri marcatori con i quali si vorrà descriverne la struttura e la forma. • L'elemento '<body>' prevede alcuni attributi che analizzeremo in seguito. a.a. 2006/2007 HTML: prima pagina (1/2) • Cominciamo, dunque, a comporre la nostra pagina digitando quanto segue: <html> <head> <title>La mia prima pagina Web </title> </head> <body> <h1>Questa e’ la Home page di Nome Cognome</h1> <p>Questa e’ la mia prima pagina in HTML.</p> </body> </html> a.a. 2006/2007 HTML: prima pagina (2/2) a.a. 2006/2007 HTML: i tag <hn <hn> • I titoli di un documento possono essere articolati su vari livelli gerarchici (titolo di sezione, titolo di capitolo, titolo di paragrafo etc.) • Gli elementi per codificare questi titoli interni hanno un marcatore della forma <hn> • In HTML sono disponibili sei diversi livelli di titoli: <h1> è il livello più alto e <h6> il più basso • Il primo viene solitamente utilizzato per marcare il titolo di un capitolo, o di una sezione importante, e i successivi per indicare sottosezioni progressivamente più piccole. a.a. 2006/2007 HTML: esempio tag <hn <hn> (1/2) Un esempio: <html> <head> <title>La mia prima pagina Web </title> </head> <body> <h1>Questa e’ la Home page di Nome Cognome</h1> <p>Questa e’ la mia prima pagina in HTML.</p> <h1>Primo livello</h1> <h2>Secondo livello</h2> <h3>Terzo livello</h3> <h4>Quarto livello</h4> <h5>Quinto livello</h5> <h6>Sesto livello</h6> </body> </html> a.a. 2006/2007 HTML: esempio tag <hn <hn> (2/2) a.a. 2006/2007 HTML: attributi dei tag <hn <hn> • E’ possibile inserire più titoli all'interno della pagina, anche dello stesso livello. • Tutti i marcatori di questi titoli interni supportano un attributo che permette di specificare l'allineamento del testo. • Il nome dell'attributo è 'align', e i valori possibili, che specificano il tipo di allineamento, sono: • 1. center 2. left 3. right Ad esempio: <h1 align="center">Home page di Nome Cognome</h1> a.a. 2006/2007 HTML: il tag <p> • Un documento HTML può essere diviso in capoversi (paragrafi): a tale fine va utilizzato l'elemento <p>. • L'effetto visivo di questa istruzione è quello di inserire un ritorno a capo e una riga vuota nel testo a video. • Si noti che dopo ogni titolo <hn> il browser va a capo automaticamente. a.a. 2006/2007 HTML: esempio tag <p> • Riportiamo nel nostro file le due parti che seguono: <p>Questa riga</p><p>va a capo.</p> <p>Quest'altra,invece, appare scritta su un’unica riga nonostante ci siano degli a capo.</p> a.a. 2006/2007 HTML: attributi del tag <p> • L’esempio che abbiamo appena visto ci dice che l’HTML visualizza i capoversi separandoli in funzione dell'istruzione <p> e non degli 'a capo' eventualmente presenti nel nostro file. • Anche il marcatore <p> può avere degli attributi di tipo 'align'. <p align="right">, ad esempio, sposterà a destra il capoverso. • • Un altro marcatore che riguarda la gestione dei salti di linea è <br> (break). • La sua funzione è quella di provocare un 'ritorno a capo' senza introdurre una riga vuota. • <br> non ha un marcatore di chiusura in quanto indica semplicemente il punto in cui intervenire. • Ricorrendo a più marcatori <br> in sequenza si possono creare delle spaziature verticali. a.a. 2006/2007 HTML: le liste non numerate • In un documento possono comparire anche elenchi ordinati di voci, o liste che possono essere numerate (ad ogni voce della lista è assegnato automaticamente un numero progressivo) o non numerate (ogni voce della lista è preceduta da un pallino). • HTML fornisce una serie di elementi per inserire liste all'interno di pagine Web. • La sintassi per le liste non numerate è la seguente: <ul> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ul> a.a. 2006/2007 HTML: le liste numerate • Le liste numerate si costruiscono nello stesso modo, ma il tag di apertura è <ol> (ordered list) e quello di chiusura, ovviamente, </ol>. All'interno, ancora una serie di elementi <li> <ol> <li>prima voce</li> <li>seconda voce</li> <li>terza voce</li> </ol> a.a. 2006/2007 HTML: esempio liste a.a. 2006/2007 HTML: attributi delle liste • Il formato delle liste può essere controllato mediante alcuni attributi tra cui: • type="x“ dove x può assumere uno dei seguenti valori: circle = cerchio square = quadratino I = numeri romani maiuscole i = numeri romani minuscoli A = lettere minuscole a = lettere maiuscole a.a. 2006/2007 HTML: Gli stili di carattere (1/2) • In genere gli stili di carattere sono corsivo, grassetto, sottolineato. • HTML dispone dei seguenti stili <strong>...</strong> Testo molto rilevante (viene reso di norma in grassetto) <em>...</em> Testo enfatizzato (viene reso di norma in corsivo) <cite>...</cite> Testo citato (viene reso di norma in corsivo) <address>...</address> Indirizzo (viene reso in corsivo o in grassetto con un carattere piccolo) a.a. 2006/2007 HTML: Gli stili di carattere (2/2) <b>...</b> Grassetto <u>...</u> Sottolineato <i>...</i> Italico o corsivo <big>...</big> carattere più grande <small>...</small> carattere più piccolo • Gli stili possono essere sommati; ad esempio, per ottenere un testo corsivo neretto si può scrivere: <b><i>Questa riga è in neretto e corsivo</i></b> La cosa importante è creare codice nidificato a.a. 2006/2007 HTML: esempio stile carattere a.a. 2006/2007 HTML: le righe orizzontali • L'elemento <hr> ha lo scopo di inserire una linea orizzontale fra blocchi di testo o immagini all'interno di una pagina Web. Si tratta di un marcatore che non richiede tag di chiusura. Alcuni attributi applicabili sono: • size="n“ dove n indica lo spessore della riga (es.: <hr size="5">); • Noshade serve a eliminare l'effetto 'ombra' della linea (es.: <hr noshade>); • width="n% | n" regola la larghezza della riga, sia in percentuale, relativamente alla larghezza dello schermo, sia in assoluto, in pixel (es.: <hr width="50%"> oppure <hr width="250">); • align="left | center | right“ allinea la riga rispettivamente a sinistra, al centro e a destra, ad es.: <hr align="right" width="80%"> a.a. 2006/2007 HTML: esempio righe orizzontali a.a. 2006/2007 HTML: Attributi del BODY • Ci sono degli attributi che possono essere aggiunti all'elemento <body> per specificare l'aspetto del testo e dello sfondo in una pagina Web: background="file-grafico" • permette di indicare un file grafico (in formato GIF o JPEG) che viene inserito sullo sfondo della pagina; se l'immagine è più piccola rispetto alla pagina, essa viene automaticamente duplicata e affiancata alle sue copie bgcolor="#colore RGB" • permette di assegnare un colore allo sfondo text="#colore RGB" • indica il colore del testo all'interno della pagina link="#colore RGB" • indica il colore dei link vlink="#colore RGB" • indica il colore dei link già attivati alink="#colore RGB" • a.a. 2006/2007 indica il colore dei link mentre si attivano con il mouse HTML: i colori Colore Esadecimale Arancione #FF8000 Bianco #FFFFFF Blu #0000FF Celeste #80FFFF Giallo #FFFF00 Grigio #C0C0C0 Marrone #804040 Nero #000000 Rosa #FF8080 Rosso #FF0000 Verde #00FF00 Viola #8080FF a.a. 2006/2007 • Il valore che segue l’attributo BGCOLOR è un valore esadecimale che indica il colore. • Il colore è dato dalla fusione dei tre colori principali, il Rosso, il Verde e il Blu. • Le prime due cifre indicano la quantità di Rosso, le seconde la quantità di Verde mentre le terze la quantità di Blu (#rrvvbb). Tabella dei colori ai siti http://www.molly.com/molly/webdesign/136_colors.html http://www.molly.com/molly/webdesign/colorchart.html HTML: esempio tabella di colori a.a. 2006/2007 HTML: esempio colore di sfondo (1/2) <HTML> <HEAD> <TITLE>IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“#00FF00”> <B> Prova colore sfondo</B> <P> </BODY> </HTML> a.a. 2006/2007 HTML: esempio colore di sfondo (2/2) a.a. 2006/2007 HTML: dimensionamento dei caratteri (1/2) Nel caso di dimensionamento in termini assoluti si usa il seguente marcatore: <font size="n">testo</font> Dove 'n' è un numero che va da 1 a 7, ad es.: <font size="4">Prova</font>. • La dimensione normale del font è 3. Dunque se si usano gli indici 1 o 2 si ottiene un font ridotto rispetto al testo normale, mentre con 4, 5, 6 e 7 si ottiene un font ingrandito. a.a. 2006/2007 HTML: dimensionamento dei caratteri (2/2) • Nel caso di dimensionamento in termini relativi si usa la seguente marcatura: <font size="+/- n">testo</font> • In questo caso n può variare da -2 a +4. Usando in modo combinato i vari tag è possibile ottenere effetti come questo: <font size="+4">H</font><font size="+3"> E</font><font size="-1">L</font><font size="+2">LO</font> a.a. 2006/2007 HTML: le immagini <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY BGCOLOR=“#000000”> <IMG SRC="tango1.jpg" alt="Hugo Pratt/Corto Maltese e il tango"> <P> </BODY> </HTML> • • Se il file che contiene l’immagine non si trova nella stessa directory del file html che lo include, si dovranno specificare anche i nomi delle directory (cartelle) fino a quella in cui si trova il file HTML (specificare il path), separati dalla barra (/) , in questo modo: < img src='‘immagini/tango1.jpg''> L’attributo alt a.a. 2006/2007 HTML: esempio immagine a.a. 2006/2007 HTML: immagine in movimento <HTML> <HEAD> <TITLE>Esempio pagina contenente una IMMAGINE</TITLE> </HEAD> <BODY> <FONT SIZE="3" COLOR="BLUE"> ESEMPIO DI IMMAGINE in movimento (orizzontale)</FONT> <P> <MARQUEE> <IMG SRC="lungomaltese.jpg"> </MARQUEE> </P> </BODY> </HTML> a.a. 2006/2007 HTML: attributi del tag <img> L'elemento <img> è corredato da diversi attributi: • per modificare le dimensioni (consigliati programmi di grafica) si può disporre degli attributi width e height . Ad esempio: <img scr scr=”esempio.gif” height height=“150” width width=“45”> > • Attributo alt consente di inserire un testo accanto all’immagine: • Attributo align per definire posizione dell'immagine rispetto al testo align =“top” alt=”testo alternativo” alt= testo allineato in alto align =“middle” testo allineato in centro align =“bottom” testo allineato in basso Altri attibuti hspace = spaziatura orizzontale (in pixel) vspace = spaziatura verticale (in pixel) border = • in pixel Come già detto, un’immagine può essere usata anche come sfondo: <body background=“path completo”> background > a.a. 2006/2007 HTML: link e riferimenti I documenti HTML sono degli ipertesti il cui funzionamento è dovuto agli HyperLink o ancoraggi, il cui tag specifico è <A>: <A HREF> • L'elemento <A> (Anchor) ha bisogno di un tag di apertura e chiusura e al suo interno è possibile inserire testo, immagini o altri elementi multimediali. • HREF (abbreviazione di Hypertext Reference) contiene l'URL o la pagina da linkare: <A HREF="http://www.repubblica.it/"> Visita il sito del quotidiano “La Repubblica”</A> • • E' possibile sostituire al testo un'immagine Grazie a TARGET è possibile caricare un pagina associata a HREF in un'altra finestra del browser, attraverso la seguente sintassi: <A HREF=“http://www.ciao.it” TARGET="_new">Visita www.ciao.it </A> • L'attributo TARGET="_new" indica al browser di caricare il link a http://www.ciao.it in una nuova (_new) finestra. • a.a. 2006/2007 HTML: link a mail • E' possibile inserire collegamenti anche verso indirizzi e-mail, attraverso una sintassi leggermente diversa da quella indicata per le URL: <A HREF="mailto:[email protected]">Scrivimi!</A> • Cliccando su questo link viene automaticamente aperto il programma di posta predefinito con il campo TO/A già impostato su [email protected]. a.a. 2006/2007 HTML: le tabelle Per creare una tabella in HTML si usano i tag: <table>…….</table> all’interno dei quali si deve definire il contenuto della tabella. Per definire una tabella si procede nel modo seguente: • si realizza la prima riga facendo uso del tag <tr> = table row • si indicano le varie celle facendo uso: • del tag <th> per le intestazioni di cella </th> = table header • del tag <td> per i dati della cella </td> = table data • a.a. 2006/2007 si passa alla seconda riga con le relative celle avendo cura di usare il tag </tr> HTML: esempio tabelle (1/2) <HTML> <HEAD><TITLE>Esempio di TABELLA</TITLE> </HEAD> <BODY> <CENTER> Tabella<P> <TABLE border=1> <TR><TD>uno<TD>due <TR><TD>tre <TD>quattro <TR><TD>cinque<TD>sei </TABLE> </CENTER> </BODY> </HTML> a.a. 2006/2007 HTML: esempio tabelle (2/2) a.a. 2006/2007 HTML: attributi tabelle border="n" (es.: <table border="1">) • rende visibile il bordo della tabella. Il valore n è in pixel. cellpadding="n" (es.: <table cellpadding="10">) • è lo spazio tra il bordo della tabella e il testo contenuto all'interno delle celle. cellspacing="n" (es.: <table cellspacing="5">) • è la distanza tra una cella e un'altra. width="n | n%" (es.: <table width="100%"> oppure <table width="250">) • la larghezza della tabella relativamente allo schermo, espressa con i valori percentuali, oppure in assoluto, in pixel. bgcolor="#rrggbb" (es.: <table bgcolor="#FF0000"> oppure < table bgcolor="red">) • determina il colore di sfondo della tabella. La sintassi di rrggbb è la medesima vista per attribuire colori allo sfondo del documento o ai caratteri. In alternativa ai valori esadecimali si possono anche qui usare i nomi dei colori, in inglese (red, green, ecc.). a.a. 2006/2007 HTML: caratteri speciali CARATTERI SPECIALI: &lt; &gt; &le; &ge; &deg; &agrave; &eacute; &egrave; &igrave; &ograve; &ugrave; &amp; &nbsp; &euro; APICE E PEDICE: <sup> </sup> <sub> </sub> a.a. 2006/2007 > < ≤ ≥ ° à é è ì ò ù & spazio € HTML: i frame • Una pagina WEB può essere suddivisa in più aree indipendenti denominate frame. • Permettono di visualizzare più elementi di interesse primario • Migliorano l’aspetto finale della pagina WEB • E’ consigliabile non eccedere nel loro uso per non appesantire la realizzazione del sito. • Un punto a loro sfavore è l’incompatibilità con alcuni browser che non supportano il loro utilizzo per cui, di norma, si crea una versione del sito con frame ed una versione senza frame. a.a. 2006/2007 HTML: un esempio di utilizzo dei frame FRAME PER IL DOCUMENTO FRAME DI NAVIGAZIONE HOME CONTENUTO Link1 DELL’HOME PAGE Link2 Link3 a.a. 2006/2007 HTML: suddivisione orizzontale con frame Oppure… RIGA RIGA a.a. 2006/2007 HTML: tag per creare i frame Occorre utilizzare i TAG <FRAMESET> </FRAMESET> che servono per delimitare la definizione di tutta la struttura … e i TAG <FRAME SRC=“nome1.htm” NAME=alias1> <FRAME SRC=“nome2.htm” NAME=alias2> che servono per definire il nome convenzionale delle righe o delle colonne a.a. 2006/2007 HTML: tag per creare i frame • <frameset> è il tag iniziale (sostituisce a tutti gli effetti il tag <body>) e raccoglie la descrizione dei frame presenti nella <body> pagina. Quando la lista dei frame termina, si inserisce il tag finale </frameset> • Il tag <frame> serve alla definizione di ogni singolo frame e non necessita di chiusura dato che esso termina quando se ne definisce uno nuovo oppure quando si usa il tag </frameset> • Per organizzare una pagina con frame occorre dapprima costruire e predisporre le pagine html che riempiranno i diversi frame e successivamente definire i frame all’interno della pagina principale. a.a. 2006/2007 HTML: frame, struttura colonne <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET COLS=“15%, 85%"> <frame src=“primo.html" name="menu"> <frame src=“secondo.html" name="mypage"> </FRAMESET> </HTML> a.a. 2006/2007 HTML: frame, struttura colonne a.a. 2006/2007 HTML: frame, struttura righe <HTML> <HEAD> <TITLE>Pagina con Frame</TITLE> </HEAD> <FRAMESET ROWS="25%, 75%"> <frame src=“primo.html" name="menu"> <frame src=“secondo.html" name="mypage"> </FRAMESET> </HTML> a.a. 2006/2007 HTML: frame, struttura righe a.a. 2006/2007 HTML: commenti • Sintassi per un commento (ovunque nel file): <!--commento--> • Utilizzati per segnalare delle sezioni di codice o altre informazioni utili a chiunque utilizzi la pagina HTML • NON interpretate da BROWSER • Utilizzare la scrittura indentata (soprattutto per programmi particolarmente lunghi) a.a. 2006/2007 Recenti evoluzioni di HTML: fogli di stile • HTML tradizionale: i tag sono usati sia per specificare la struttura che l’aspetto del documento. • Problemi di manutenibilità, compatibilità, verifiche di correttezza, etc.. • Separazione: • HTML sempre più orientato alla struttura (tag come <font …> destinati a cadere in disuso) • Gli stylesheets specificano come una pagina deve apparire a.a. 2006/2007 HTML: CSS • CSS (Cascading Style Sheet): File (o area del sorgente HTML) in cui viene definito l’aspetto desiderato per gli elementi di una pagina Web. body { color: purple } body { background-color: #d8da3d; font-weight: normal } h1 { font-family: Helvetica, Geneva, Arial, sans-serif } a:link { color: blue } a:visited { color: purple } .titolo { color: white; background: red; } .sottotitolo { color: red; background: white; } a.a. 2006/2007 HTML: fogli di stile collegati <HTML> <HEAD> <TITLE>Usare i fogli di stile</TITLE> <LINK REL="stylesheet" TYPE="text/css" HREF="stile.css"> </HEAD> <BODY> ... </BODY> </HTML> • Lo stesso file può essere richiamato da più pagine Web ! • Gli attributi del tag <LINK …> • • • • REL: descrive il tipo di relazione tra il documento e il file collegato. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet. HREF: serve a definire l'URL assoluto o relativo del foglio di stile. TYPE: identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css. MEDIA: con questo attributo si identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile. Unico di questi attributi ad essere opzionale. a.a. 2006/2007 HTML: fogli di stile incorporati • Lo “stile” va comunque indicato all’interno della sezione HEAD: <HTML> <HEAD> <TITLE>Usare i fogli di stile</TITLE> <STYLE TYPE="text/css"> body { background: #FFFFCC; } </style> </HEAD> <BODY> ... </BODY> </HTML> a.a. 2006/2007 HTML: fogli di stile in linea • Ad esempio, si vuole formattare un titolo H1 in modo che abbia il testo di colore rosso e lo sfondo nero, scriveremo: <h1 style="color: red; background: black;">...</h1> a.a. 2006/2007 HTML: Quando usare i diversi tipi di CSS • In base al meccanismo del cascading, si sfruttano le priorità: 1. In linea 2. Incorporati 3. Collegati • Nota: l'uso estensivo di fogli in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Il loro uso è ultimamente considerato deprecato anche dal W3C a.a. 2006/2007 HTML: stile_di_esempio.css /* Definisco le regole per il corpo del documento */ body { background: White; /* Prima dichiarazione: notate il punto e virgola finale!*/ font-family: Verdana, Geneva, Arial, Helvetica; /* Seconda dichiarazione*/ font-size: 12px; /* Terza dichiarazione */ } /* Titolo di primo livello */ h1 { color: black; } /* Paragrafo generico */ p { color: black; font: 12px/1.5 Georgia, "Times New Roman", serif; } #div1 { background: Silver; /* Sfondo color argento */ width: 300px; } #div2 { background: Silver; width: 300px; position: absolute; top: 400px; left: 400px; } a.a. 2006/2007 HTML: sintassi dei fogli di stile • Come è fatta una regola: a.a. 2006/2007 HTML: CSS – Selettore Class • Per definire una classe si usa far precedere il nome da un semplice punto: <style type="text/css"> .testorosso { font: 12px Arial, Helvetica, sans-serif; color: #FF0000; } </style> • Per applicarla ad un elemento della pagina Web: <p class="testorosso"> In questo paragrafo parleremo di ....</p> a.a. 2006/2007 HTML: CSS – Selettore ID • La sintassi per la definizione di un ID. Basta far precedere il nome dal simbolo di cancelletto: <style type="text/css"> #titolo {color: blue;} </style> • Per applicarla ad un elemento della pagina Web: <h1 id="titolo"> Titolo dell’articolo...</h1> a.a. 2006/2007 HTML: CSS – Classe o ID ? • I selettori di tipo Class e ID funzionano nello stesso modo, ma con una sola fondamentale differenza: è ad essa che dovete fare riferimento per scegliere se usare una classe o un ID. • In un documento (X)HTML l'attributo id è usato per identificare in modo univoco un elemento. In pratica, se assegno ad un paragrafo l'id "testorosso", non potrò più usare questo valore nel resto della pagina. Di conseguenza, l'ID #testorosso dichiarato nel CSS trasformerà solo quel paragrafo specifico. • Una singola classe, al contrario, può essere assegnata a più elementi, anche dello stesso tipo. a.a. 2006/2007 HTML: CSS – Pseudo Pseudo--classi • Una pseudo-classe non definisce un elemento ma un particolare stato di quest'ultimo. In pratica imposta uno stile per un elemento al verificarsi di certe condizioni. • La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che non siano stati visitati (:link) avranno il colore blue. a:link {color: blue;} La seguente regola vuol dire: i collegamenti ipertestuali (<A>) che sono stati visitati (:visited) avranno il colore purple. a:visited { color: purple } a.a. 2006/2007
