Realizzare Pagine Web

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

I.S.I.S. J.F. Kennedy Monselice (PD) Indirizzo: Informatica

Appunti di web-design E’ scaricabile la versione aggiornata dal sito www.itiskennedy.com Non e’ ammessa la copia, la riproduzione, la diffusione a scopo di lucro realizzato da: Ing. Roberto Turetta ultimo aggiornamento: 15/12/2010 Fonti utilizzate: Principi di web design – Joel Sklar – Apogeo editore Progettare e sviluppare siti web – Maurizio Mattioli – Apogeo editore Guida XHTML – Cesare Lamanna – www.html.it Guida CMS – Cesare Lamanna – www.html.it Proprietà CSS2: http://lau.csi.it/risorse/CSS2/index.shtml Esperienze realizzate con gli studenti nel laboratorio di informatica

SOMMARIO Il browser e il web server ................................................................................................................................................................................................. 2 I browser e l’HTML ........................................................................................................................................................................................................... 2 IL LINGUAGGIO HTML 4.01 .............................................................................................................................................................................................. 4 Principali tag HTML ..................................................................................................................................................................................................... 5 Attributi dei TAG ......................................................................................................................................................................................................... 7 FASI DELLA REALIZZAZIONE DI SITO WEB STATICO .......................................................................................................................................................... 8 Progettazione di un sito web statico................................................................................................................................................................................ 8 Lo storyboard............................................................................................................................................................................................................ 17 Sviluppo e test di un sito web statico ............................................................................................................................................................................ 18 Pubblicazione di un sito web statico .............................................................................................................................................................................. 19 DA HTML A XHTML......................................................................................................................................................................................................... 20 Le parti di una pagina XHTML ........................................................................................................................................................................................ 20 I tag blocco e i tag in linea .............................................................................................................................................................................................. 21 Differenze tra XHTML e HTML ....................................................................................................................................................................................... 23 CASCADING STYLE SHEET (CSS) ...................................................................................................................................................................................... 24 3 tipi di regole di stile ..................................................................................................................................................................................................... 25 Regole di stile (style rules) ............................................................................................................................................................................................. 26 I selettori ........................................................................................................................................................................................................................ 28 Le pseudo-classi ........................................................................................................................................................................................................ 30 Gli pseudo-tag........................................................................................................................................................................................................... 30 L'attributo media ...................................................................................................................................................................................................... 31 Il box model ................................................................................................................................................................................................................... 33 Elenco delle proprietà CSS ............................................................................................................................................................................................. 46 ESEMPIO DI SITO WEB HTML ......................................................................................................................................................................................... 48 CONVERSIONE DA HTML A XHTML+CSS ........................................................................................................................................................................ 53 Pag. 1 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Il browser e il web server Il navigatore web, cioè colui che naviga nel web alla ricerca di informazioni, ha bisogno, oltre che di un computer connesso ad Internet, anche di un programma detto browser (ad esempio Microsoft Explorer) che è appunto il programma usato per navigare nel web. Il browser, per poter visualizzare le informazioni di un particolare sito web interagisce con un altro programma detto web server (ad esempio Internet Information Service), che “gira”(cioè è in esecuzione) nel computer che ospita il sito web stesso.

Il sito web non è altro che un insieme di file di vari formati (html, jpg, gif, avi, ecc.) contenuti nel file system di un computer collegato permanentemente alla rete Internet. I computer che ospitano i siti web prendono lo stesso nome del programma in esecuzione al loro interno 1 (cioè web server) e solitamente sono di proprietà dei “provider”, cioè delle aziende che offrono servizi di connettività e di web hosting .

Ogni computer collegato permanentemente alla rete Internet è individuato univocamente da un indirizzo numerico detto indirizzo IP. L’indirizzo IP è formato da 4 numeri, ognuno compreso tra 0 e 255, separati da un punto; ad esempio 200.10.10.10. Anziché l’indirizzo IP, solitamente per individuare un sito web si usa un nome di dominio (=domain name), ad esempio www.pippo.it. Un servizio della rete Internet detto DNS (=Domain Name Server) associa ad ogni nome di dominio l’indirizzo IP del computer che ospita il sito web corrispondente. In questo modo l’utente del browser anziché ricordare un numero (200.10.10.10) basta che ricordi un nome (www.pippo.it).

Osserviamo che: • Microsoft Explorer (o Mozilla Firefox) svolge la funzione di PROGRAMMA CLIENT (=cliente) • Internet Information Service (o Apache) svolge la funzione di PROGRAMMA SERVER (=servente) Per estensione, il computer che ospita il programma client viene detto CLIENT, mentre il computer che ospita il programma server viene detto SERVER. In pratica si confonde il programma con il computer che esegue il programma stesso.

Osserviamo che un documento archiviato nella rete Internet è individuato univocamente dal suo URL (=Uniform Resource Locator).

L’URL è costituito da: nome del protocollo:// + nome del dominio + percorso del documento + nome del documento Un esempio di URL è: http://www.pippo.it/archivio/novembre2010/nuovodocumento.htm Ora vediamo come avviene il colloquio tra il browser e il web server.

1.

2.

3.

4.

5.

Il browser richiede al web server un documento scritto in linguaggio HTML; il documento viene richiesto inserendo il cosiddetto URL (=Uniform Resource Locator) nella barra degli indirizzi del browser; riceve il documento inviato dal web server e lo interpreta; richiede al web server gli eventuali files associati a quel documento: immagini, suoni, filmati, ecc. formatta e visualizza il testo del documento come specificato dai tag html dispone e visualizza gli eventuali oggetti ricevuti come specificato dai tag html

Ecco la rappresentazione grafica di quanto appena detto:

Internet

WEB SERVER

CLIENT URL utente

browser file HTML

Internet Information Service

file system

I browser e l’HTML I browser in commercio supportano praticamente tutti i tag e attributi dell’HTML 4.01 (HTML standard). Talvolta i browser supportano qualche tag o attributo (detto proprietario) che non esiste nell'HTML 4.01: ad es: Explorer supporta il tag MARQUEE e gli attributi BORDERCOLOR e SCROLL del tag TABLE, che non esistono nell’HTML 4.01. Potremmo dire che ogni browser utilizza il suo “dialetto” HTML e che l’HTML 4.01 stabilito dal W3C è comune alla maggior parte dei “dialetti” HTML usati dai browser. Il tutto può essere riassunto nel disegno riportato sotto, dove si vede che l’HTML 4.01 praticamente coincide con l’insieme intersezione degli HTML “proprietari” di due ipotetici browser.

1

“to host” significa “ospitare” Pag. 2 di 57

I.S.I.S. Kennedy

Appunti di web design

HTML del Browser A

HTML 4.01

Ing. Roberto turetta

HTML del Browser B

Per essere certi che una pagina web sia scritta correttamente nel linguaggio standard HTML 4.01, bisogna fare l’upload della pagina stessa all’indirizzo: http://validator.w3.org. Il software (detto validatore) presente nel sito della W3C effettua un controllo della sintassi della pagina caricata, in modo simile a quello effettuato da un compilatore. Gli eventuali errori vengono segnalati in lingua inglese:

Nel caso in cui la pagina web superi il controllo effettuato dal validatore si può affermare che la pagina è conforme al linguaggio standard HTML secondo le regole del W3C. Ecco il simbolo utilizzato per indicare una pagina web realizzata utilizzando il linguaggio standard HTML 4.01, cioè l’ultima versione del linguaggio HTML:

Quindi tale simbolo può essere aggiunto alla pagina web (di solito nel piè di pagina) solo dopo avere superato il controllo del validatore.

Però, anche nel caso in cui una pagina web sia scritta correttamente nel linguaggio standard HTML 4.01, può accadere che tale pagina sia interpretata in modo diverso da browser diversi, o addirittura da versioni diverse dello stesso browser. Cioè il rendering dei browser può essere diverso anche se la pagina web interpretata è la stessa. Ad esempio: i valori della proprietà CSS font-size (xx-small, x-small, ,small, ecc.) hanno un rendering diverso nei due browser Explorer 7 e Firefox 3.5: Pag. 3 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Dalle figure si vede che a parità di valore (per esempio medium) il carattere è più grande in Explorer (18px) che in Firefox (16px). Quindi per ottenere la stessa dimensione dei caratteri nei due browser bisogna utilizzare la dimensione in pixel. In altre parole i valori medium, large, ecc. sono inutilizzabili nelle pagine web finchè Explorer non si conformerà alle regole del W3C, che invece Firefox rispetta.

Dalel figure si vede anche che, fortunatamente, il valore di default del carattere nei due browser è lo stesso: 16px che corrisponde a medium in Firefox e a small in Explorer.

Nelle figure si vede anche una tabella di corrispondenza tra i valori in pixel di font-size e i valori dell’attributo size del tag font.

In conclusione: è importante che il webmaster abbia una mentalità multi-browser, cioè il webmaster deve non solo conoscere nei minimi dettagli il codice HTML, ma deve anche riuscire a far vedere correttamente il proprio sito a tutti gli utenti a cui si rivolge, i quali possono utilizzare i browser più svariati.

IL LINGUAGGIO HTML 4.01 HTML sta per Hyper Text Markup Language cioè linguaggio di marcatura per ipertesti. Un ipertesto è (nella sua definizione originaria) un testo in cui è possibile muoversi non solo in modo lineare (come un libro, un giornale,…) ma anche seguendo dei collegamenti (link) che uniscono tra loro informazioni correlate. Oggi HTML è qualcosa di più: esso definisce la struttura delle pagine web (grazie ai tag DIV P H TABLE ecc.) e la presentazione delle pagine web (grazie ai tag FONT B I ecc.). Le regole dell’HTML standard sono stabilite dal World Wide Web Consortium (W3C), il cui sito è http://www.w3c.org. Faremo riferimento all’ultima versione del linguaggio HTML standard, cioè la 4.01.

I tag possono essere vuoti come (img o br) oppure non vuoti (come div o p o b o a).

La sintassi di un tag vuoto è: <tag attributo1=”valore attributo 1” attributo2=”valoreattributo2” …> La sintassi di un tag non vuoto è: <tag attributo1=”valore attributo 1” attributo2=”valoreattributo2” …>testo</tag> Il commento (sempre ignorato dal browser) si scrive così: <!−− questo è un commento −−> Per fare apparire correttamente nelle pagine web i caratteri speciali si usano le entità. L’ entità si ottiene unendo il simbolo & con una sigla (ad esempio: nbsp = not breakable space) seguito da punto e virgola. Ad esempio per visualizzare una sequenza di tre spazi si deve scrivere: Pag. 4 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

&nbsp; &nbsp; &nbsp; Spesso si può ottenere un’entità anche utilizzando il codice ASCII corrispondente al simbolo da utilizzare. Ad esempio per visualizzare ciao tra due parentesi graffe si deve scrivere: &#123;ciao&#125; Ecco una tabellina con le principali entità: Simbolo “ & ‘ < > ~ { } € spazio

Entità simboli &quot; &amp;

con

i

&lt; &gt; &tilde;

&euro; &nbsp;

Entità con codice ASCII &#34; &#38; &#39; &#60; &#62; &#126; #123; #125; &#128; &#160;

il

à è é ì ò ù à è é ì ò ù

&Agrave; &Egrave; &Eacute; &Igrave; &Ograve; &Ugrave; &agrave; &egrave; &eacute; &igrave; &ograve; &ugrave;

&#192; &#200; &#201; &#204; &#210; &#217; &#224; &#232; &#233; &#236; &#242; &#249;

Principali tag HTML L’elenco seguente spiega i tag principali. L’elenco è diviso in tre categorie (in grassetto sono riportati i valori di default degli attributi): TAG BLOCCO TAG IN LINEA TAG DELL’INTESTATAZIONE

si inseriscono nel body e definiscono la struttura del documento; mandano a capo; possono contenere altri tag blocco, tag in linea e testo si inseriscono nel body; non mandano a capo; possono contenere altri tag in linea e testo si inseriscono nella intestatazione delimitata dal tag head

TAG BLOCCO Tag <BODY></BODY>

Attributi LINK= #RRGGBB (blue) VLINK= #RRGGBB) (purple) ALINK= #RRGGBB (red) TEXT=#RRGGBB (black) BGCOLOR=#RRGGBB (white) RR = codice esadecimale (da 00 a FF) per il rosso GG = codice esadecimale (da 00 a FF) per il verde BB = codice esadecimale (da 00 a FF) per il blu BACKGROUND=path/url

<FORM></FORM>

<DIV></DIV> <P></P>

ALIGN=left,center,right ALIGN=left,center,right,justify

<OL></OL> <UL></UL> <LI></LI> <Hn></Hn> N=1,2,3,4,5,6 <HR> <TABLE>

ALIGN=left,center,right SIZE=1,2,3, … (pixel) BORDER=0,1,2,3,... (pixel) CELLPADDING=0,1,2,3,... (pixel)

Descrizione Delimita il contenuto della pagina web.

LINK=colore del link da visitare VLINK=colore del link visitati ALINK=colore del link attivo TEXT=colore del test BGCOLOR=colore dello sfondo

BACKGROUND=foto di sfondo Delimita un modulo di inserimento dati.

Può contenere non solo i classici tag del form (INPUT, SELECT, TEXTAREA) ma anche altri tag blocco.

Delimita una sezione della pagina web. Può contenere tutti i tag blocco.

Delimita un paragrafo della pagina web.

Non può contenere altri tag blocco.

Delimita un elenco numerato. Può contenere solo il tag LI. Delimita un elenco puntato. Può contenere solo il tag LI. Inserisce un dato in un elenco puntato o numerato.

Può contenere altri tag blocco.

Inserisce un titolo: H1 è più grande di H6.

Non può contenere altri tag blocco.

Inserisce una riga orizzontale dello spessore indicato da SIZE. Inserisce una tabella. Può contenere solo tag TR. BORDER=spessore dei bordi CELLSPACING=distanza tra i bordi delle celle

Pag. 5 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

CELLPADDING=distanza del contenuto della cella dal bordo WIDTH=larghezza della tabella in pixel o in valore percentuale rispetto alla finestra del browser BGCOLOR=colore dello sfondo di tutte le celle della tabella Inserisce una riga della tabella.

Può contenere solo tag TH e TD ALIGN = allinea il contenuto delle celle della riga in senso orizzontale VALIGN = allinea il contenuto di tutte le celle della riga in senso verticale BGCOLOR=colore dello sfondo di tutte le celle della riga

CELLSPACING=0,1,2,3,... (pixel) WIDTH=n° pixel oppure % BGCOLOR=#RRGGBB (white) <TR></TR> ALIGN=left,center,right VALIGN=bottom,middle,top BGCOLOR=#RRGGBB (white) <TD></TD>

Inserisce una cella di una riga della tabella.

Può contenere tag blocco, tag in linea e testo.

Non manda a capo.

ALIGN = allinea il contenuto della cella in senso orizzontale VALIGN = allinea il contenuto in senso verticale BGCOLOR = colore dello sfondo della cella WIDTH = larghezza della cella in pixel oppure in valore percentuale rispetto alla larghezza della tabella HEIGHT = altezza della cella in pixel oppure in valore percentuale rispetto alla altezza della tabella ROWSPAN = unisce celle della stessa colonna COLSPAN = unisce celle della stessa riga NB: per impostare la larghezza di tutte le colonne della tabella, si imposta la larghezza in tutte le celle di una riga in cui siano presenti tutte le colonne; per impostare l’altezza di tutte le righe della tabella, si imposta l’altezza della prima cella di tutte le righe della tabella Equivale a TD; in più formatta in grassetto e allinea al centro.

ALIGN=left,center,right VALIGN=bottom,middle,top BGCOLOR=#RRGGBB (white) WIDTH=n° pixel oppure % HEIGHT=n° pixel oppure % ROWSPAN=2,3,4,ecc.

COLSPAN=2,3,4,ecc.

<TH></TH>

TAG IN LINEA <A></A>

HREF=path/url#Segnalibro HREF=mailto:indirizzoposta NAME=Segnalibro

<FONT></FONT> FACE=times new roman, arial, …

SIZE=1,2,3,4,5,6,7 COLOR=#RRGGBB <B></B> <I></I> <SUP></SUP> <SUB></SUB> <SPAN></SPAN> <IMG>

STYLE SRC=path/url (obbligatorio) ALT=descrizione (obbligatorio) WIDTH=n° pixel HEIGHT=n° pixel BORDER=0,1,2,3,ecc. (pixel)

<INPUT>

<SELECT></SELECT> <TEXTAREA></TEXTAREA> <OBJECT>

TYPE = text, password, checkbox, radio, button, submit, reset

Inserisce un link (con HREF) oppure un segnalibro (con NAME). Il link può essere testuale (il tag racchiude del testo) o grafico (il tag racchiude un’immagine).

Nel caso in cui si voglia aprire il client di posta con il destinatario già impostato il valore dell’attributo href deve essere: mailto:nome@dominio Formatta il testo racchiuso dal tag.

FACE=specifica il tipo di font SIZE=specifica la dimensione del font: 1=10px 2=12px 3=16px 4=18px 5=24px 6=32px 7=48px COLOR=specifica il colore del font Formatta il testo in grassetto.

Formatta il testo in corsivo.

Inserisce testo soprascritto.

Inserisce testo sottoscritto.

Inserisce CSS in linea Inserisce un’immagine.

SRC=percorso dell’immagine ALT=testo che descrive l’immagine WIDTH=larghezza dell’immagine originale HEIGHT=altezza dell’immagine originale BORDER = bordo in pixel attorno all’immagine; il bordo appare di default solo se l’immagine è utilizzata come link.

ATTENZIONE: WIDTH e HEIGHT devono riportare le esatte dimensioni dell’immagine; specificando questi attributi il browser visualizzerà il testo della pagina senza attendere il caricamento delle immagini; per ridimensionare l’immagine non usare questi attributi, ma un programma di grafica.

Inserisce una casella di testo, un check box, un radio button, un bottone all’interno di un form Inserisce un menu a tendina.

Inserisce una casella di testo multiriga.

Inserisce un’oggetto (es: filmato in formato flash)

Pag. 6 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

TAG DELL'INTESTAZIONE Tag <TITLE> </TITLE> <META>

<LINK>

Attributi

Descrizione Specifica il titolo della pagina, che compare nella barra del titolo del browser

NAME= CONTENT= HTTP-EQUIV=

Serve a inserire nella pagina informazioni che non verranno visualizzate dal browser. In particolare si usa per: • specificare il set di caratteri che il browser deve usare per interpretare la pagina (es: iso-8859-1) • per fornire una descrizione della pagina • per definire le parole chiave della pagina Collega alla pagina i CSS esterni.

HREF=path/url TYPE=”text/css” REL=”stylesheet”

<STYLE></STYLE> <SCRIPT></SCRIPT> <BASE>

Inserisce CSS incorporato Inserisce script di programmazione Usato per definire l’url di base della pagina: utile per la risoluzione dei link relativi

Attributi dei TAG • • •

• •

Gli attributi ID, CLASS, STYLE, tutti usati in abbinamento con le regole di stile CSS, sono detti Common (generici) perché possono essere utilizzati praticamente con tutti i tag, fatta eccezione per FONT META STYLE. Alcuni attributi, se non specificati, assumono un valore di default, che è quello indicato in grassetto nella tabella.

Se l’attributo prevede come valore un PATH esso deve essere relativo rispetto alla pagina in cui si trova. Esempio: <IMG SRC=”foto.jpg” ALT=”foto”> la foto è nella stessa cartella della pagina web <IMG SRC=”immagini/foto.jpg” ALT=”foto”> la foto è nella sottocartella immagini della cartella in cui si trova la pagina <IMG SRC=”../foto.jpg” ALT=”foto”> la foto è nella cartella che contiene quella in cui si trova la pagina web Se l’attributo prevede come valore un URL esso deve essere completo del protocollo. Esempio: <IMG SRC=”http://www.pippo.it/immagini/foto.jpg” ALT=”foto”> Se l’attributo prevede come valore un colore si possono usare delle parole chiave (es: red) oppure la codifica esadecimale preceduta da un cancelletto, cioè #RRGGBB dove RR è un numero esadecimale che va da 00 a FF (cioè da 0 a 255) e indica la quantità di rosso GG è un numero esadecimale che va da 00 a FF (cioè da 0 a 255) e indica la quantità di verde BB è un numero esadecimale che va da 00 a FF (cioè da 0 a 255) e indica la quantità di blu Le 256 tonalità di grigio si ottengono scegliendo RR=GG=BB.

Pag. 7 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

FASI DELLA REALIZZAZIONE DI SITO WEB STATICO • • • •

PROGETTAZIONE SVILUPPO TEST PUBBLICAZIONE

Progettazione di un sito web statico L’output della progettazione è un documento detto storyboard. Per realizzarlo occorre prendere prendere in considerazione i seguenti punti.

1.

2.

3.

4.

5.

6.

7.

8.

Requisiti Risorse Struttura logica del sito Navigazione nel sito Definizione delle pagine Layout delle pagine Dimensione delle pagine Risoluzione delle pagine

1. REQUISITI Per progettare correttamente un sito web occorre rispettare dei requisiti: • requisiti generali: sono i requisiti che valgono qualunque sia il sito che si debba progettare • requisiti particolari: sono i requisiti che il cliente, cioè il committente del sito, chiede o si aspetta dal progettista Requisiti generali 1. le pagine web e i fogli di stile devono rispettare gli standard stabiliti dal W3C 2. la visualizzazione deve essere corretta con i browser più utilizzati (esempi: Microsoft Explorer, Mozilla Firefox, ecc.) dagli utenti del sito 3. la visualizzazione deve essere rapida con i tipi di connessione ad internet più utilizzati (esempi: modem 56k, chiavetta, wifi, wimax, adsl, ecc.) dagli utenti del sito 4. la visualizzazione del sito deve essere corretta con le risoluzioni più utilizzate dagli utenti del sito 5. le informazioni del sito devono essere facilmente reperibili e chiare 6. lo stile delle pagine web deve essere uniforme in tutto il sito 7. i contenuti del sito non devono violare i diritti di autore o il diritto alla privacy Requisiti particolari Per definire i requisiti attesi dal cliente il progettista deve rispondere a queste domande: •

Qual è lo scopo del sito?

Pubblicizzare i prodotti/servizi offerti da un’azienda?

Pubblicizzare l’attività svolta da un libero professionista?

Pubblicare notizie in tempo reale?

Fornire informazioni ai cittadini da parte di un ente pubblico?

Mostrare i quadri di una galleria d’arte?

Permettere l’acquisto di prodotti online (ecommerce)?

Consentire l’assistenza online ai clienti di prodotti tecnologici?

Consentire il download di materiale multimediale?

•

Qual è il pubblico a cui è destinato il sito?

Impiego? Livello culturale? Età? Sesso?

Sono visitatori casuali o “fedeli”?

Cosa cercano gli utenti quando vengono a visitare il sito?

Quale tipo di computer, quale browser, e quale tipo di connessione vengono utilizzati dal visitatore tipico?

•

Qual è il nome del sito e il nome del dominio?

Il nome del sito viene scelto dopo aver risposto alle due domande precedenti. Di solito il nome del dominio coincide oppure è simile al nome del sito. Ad esempio: nome del dominio http://www.animeonline.altervista.org http://www.unipr.it http://www.diesel.com

nome del sito anime online università degli studi di parma diesel

Pag. 8 di 57

tipo sito forum sito di università sito di azienda di abbigliamento

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

2. RISORSE Risorse umane

Mansione

Competenze richieste

Attività svolte

Responsabile

doti relazionali leadership orientamento agli obiettivi competenza nel campo della progettazione web competenza nei linguaggi di programmazione web nozioni di grafica buona conoscenza del software di fotoritocco creatività pluriennale conoscenza dei software applicativi sul web pluriennale conoscenza dei linguaggi di programmazione sul web iniziativa

redige le specifiche a partire dai requisiti espressi dal cliente coordina e verifica le attività svolte dai componenti del gruppo di progetto effettua il collaudo finale

Grafici

Sviluppatori senior

Sviluppatori junior Sistemisti

conoscenza del software applicativo sul web conoscenza dei linguaggi di programmazione sul web conoscenza dell’hardware e del software di base sul web affidabilità

imposta l’aspetto grafico della pagine ritocca foto & filmati e le fornisce agli sviluppatori effettua le scelte tecnologiche elabora i modelli (=template) delle pagine web riceve dal cliente i contenuti (testuali e grafici) da inserire nel sito realizza le pagine web effettua il test delle pagine web realizza le pagine web effettua il test delle pagine web registra il dominio pubblica le pagine web sul server web amministra il server web

Risorse materiali Le postazioni client per lo sviluppo devono essere dotate di: • Macromedia Dreamweaver (o anche un semplice editor di testo) per lo sviluppo delle pagine • Adobe PaintShopPro per il ritocco delle immagini digitalizzate • Accesso veloce a internet per la validazione delle pagine e per la loro successiva pubblicazione Il sito web solitamente è ospitato (gratuitamente o a pagamento) dal server web di un provider. E’ importante verificare, prima di scegliere il provider, quali sono i servizi aggiuntivi che esso offre in aggiunta all’hosting puro e semplice: quantità di spazio su disco disponibile, backup dei dati, caselle di posta, antispam, antivirus, gestione database, ecc.

3. STRUTTURA LOGICA DEL SITO Il progettista può adottare una (o anche più di una) delle seguenti strutture logiche, che si distinguono tra loro per il modo con cui le pagine sono collegate tra loro. I collegamenti tra le pagine (link) possono essere unidirezionali o bidirezionali. Indipendentemente dal tipo di struttura scelta, è scontato che tutte le pagine del sito siano collegate alla home page.

Struttura lineare L’utente può navigare solo avanti e indietro all’interno di un percorso predefinito; questa struttura è adatta a rappresentare un percorso guidato all’interno di una galleria di quadri oppure per illustrare le istruzioni di montaggio di un dispositivo.

Pag. 9 di 57

I.S.I.S. Kennedy

Appunti di web design

Struttura a guida Si tratta di un’estensione della struttura lineare e può essere usata per presentare più percorsi espositivi all’interno di una mostra oppure per contenere le sezioni di un corso on-line di chitarra

Struttura a rete Molti piccoli siti adottano questa struttura che offre collegamenti a ogni pagina del sito.

Solitamente non è possibile raggiungere da ogni pagina tutte le altre pagine: in un sito di 100 pagine, ogni pagina dovrebbe avere una barra di navigazione con 99 link!

Struttura a cluster Si tratta di una estensione della struttura a rete, dove ogni gruppo di pagine, tutte collegate tra loro, è una diversa sezione del sito

Pag. 10 di 57

Ing. Roberto turetta

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Struttura gerarchica E’ la struttura più diffusa ed è particolarmente indicata per i siti più ricchi di contenuti, come ad esempio i siti web delle aziende. Le molteplici sezioni in cui è suddiviso il sito sono organizzate gerarchicamente in livelli. La rappresentazione grafica di una struttura logica di tipo gerarchico si chiama diagramma ad albero.

4. NAVIGAZIONE NEL SITO

Ogni pagina del sito dovrebbe permettere agli utenti di rispondere alle domande seguenti: Domanda Dove sono?

Dove posso andare?

Come posso arrivare qui?

Risposta In ogni pagina del sito, sempre nella stessa posizione, dovrebbero apparire: • il logo del sito e il nome del sito (ovviamente uguali per tutte le pagine del sito) • il nome della sezione del sito a cui la pagina appartiene • il titolo della pagina stessa In ogni pagina del sito, sempre nella stessa posizione (di solito in alto oppure a sinistra), deve apparire una barra di navigazione (anche detta menu) che, con i suoi link, permette al visitatore di spostarsi alle pagine di livello più elevato del sito (la home page e tutte le pagine di sezione) Nelle pagine, sempre nella stessa posizione, dovrebbe apparire: il percorso che indica come arrivare alla pagina corrente a partire dalla home page Pag. 11 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Gli elementi uguali in tutte le pagine del sito (logo e nome del sito) o uguali in tutte le pagine di una sezione (nome delle sezione e percorso) si devono trovare esattamente nella stessa posizione in tutte le pagine affinché non siano visibili sgradevoli spostamenti navigando tra le pagine del sito.

5. DEFINIZIONE DELLE PAGINE Per ogni pagina del sito deve essere specificato: • nome del file • titolo della pagina • contenuto della pagina (quali sono gli argomenti trattati nella pagina, in modo sintetico?)

6. LAYOUT DELLE PAGINE Per ogni pagina del sito bisogna specificarne il layout, cioè bisogna rappresentare graficamente come sono disposti nella pagina i vari oggetti in essa inseriti: titoli, testi, immagini, video, menu. In fase di progetto il layout di una pagina viene semplicemente disegnato specificando la posizione e la dimensione dei vari oggetti che la compongono. In fase di sviluppo il layout di una pagina si ottiene con: A. B. C.

HTML: tabella senza bordi che usa gli attributi dei tag <td> (rowspan, colspan, align, width,height) XHTML+CSS: tabella senza bordi che usa i soli attributi permessi da XHTML per il tag <td> (rowspan, colspan); per tutte le altre caratteristiche della tabella occorre usare le regole di stile (text-align, width, height) XHTML+CSS: la tabella non si usa; al suo posto si usano le regole di stile basate sulle proprietà position, top, left (table-less layout)

Ecco un semplice esempio di layout:

Nel caso A e B viene usata una tabella dove occorre unire le celle quando necessario (con rowspan e colspan) e specificare le dimensioni e l’allineamento orizzontale di ogni cella. Si tenga presente che non sempre l’altezza di una cella deve essere impostata perché essa può essere determinata dal contenuto (testo, immagini, ecc.) in essa inserito. Nel caso C ad ogni cella viene associato un tag <div> avente un id diverso. In pratica le celle della tabella sono ottenute grazie ai box che sono associati ai diversi <div>. Tutti i diversi <div> sono contenuti in un div “contenitore”, posizionato in modo “relativo”, che viene dimensionato e centrato rispetto alla finestra del browser. Le posizioni dei diversi <div> “contenuti” sono di tipo “assoluto” e vanno calcolate rispetto alla posizione del <div> “contenitore”.

Layout con solo HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>prova layout html</TITLE> <META http-equiv="content-type" content="text/html; charset=iso-8859-1"> Pag. 12 di 57

I.S.I.S. Kennedy

Appunti di web design

</HEAD> <BODY> <DIV align="center"> <TABLE border="1" cellspacing="0"> <TR> <TD align="center" valign=”top” colspan="3" </TR> <TR> <TD rowspan="2" align="center" valign=”top” <TD align="center" valign=”top” width="300" <TD align="center" valign=”top” width="300" </TR> <TR> <TD align="center" valign=”top” width="300" <TD align="center" valign=”top” width="300" </TR> </TABLE> </DIV> </BODY> </HTML>

Ing. Roberto turetta

height="100">MENU PRINCIPALE 800x100</TD>

width="200">MENU SECONDARIO 200x500</TD> height="250">IMMAGINE SX 300x250</TD> height="250">TESTO DX 300x250</TD>

height="250">TESTO SX 300x250</TD> height="250">IMMAGINE DX 300x250 </TD>

Layout con XHTML+CSS: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prova layout xhtml+css</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> table{ border-collapse:collapse; margin-left:auto; margin-right:auto; } td{ border: 1px solid gray; text-align:center; vertical-align:top; } </style> </head> <body> <div> <table> <tr> <td colspan="3" style="width:800px;height:100px">MENU PRINCIPALE 800x100</td> </tr> <tr> <td rowspan="2" style="width:200px;height:500px;">MENU SECONDARIO 200x500</td> <td style="width:300px;height:250px">IMMAGINE SX 300x250</td> <td style="width:300px;height:250px">TESTO DX 300x250</td> </tr> <tr> <td style="width:300px;height:250px">TESTO SX 300x250</td> <td style="width:300px;height:250px">IMMAGINE DX 300x250</td> </tr> </table> </div> </body> </html>

Layout con solo CSS: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prova layout solo css</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /*il box è centrato rispetto al body*/ div#contenitore{ position:relative; width:800px; height:600px; margin-left:auto; margin-right:auto; text-align:center; } Pag. 13 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

/* tutti i box seguenti sono posizionati in base alle coordinate top left */ /* rispetto all’angolo superiore sinistro del box #contenitore */ div#menuprincipale{ position:absolute; width:800px; height:100px; top:0px; left:0px; border: 1px solid gray; } div#menusecondario{ position:absolute; width:200px; height:500px; top:100px; left:0px; border: 1px solid gray; } div#immaginesx{ position:absolute; width:300px; height:250px; top:100px; left:200px; border: 1px solid gray; } div#testodx{ position:absolute; width:300px; height:250px; top:100px; left:500px; border: 1px solid gray; } div#testosx{ position:absolute; width:300px; height:250px; top:350px; left:200px; border: 1px solid gray; } div#immaginedx{ position:absolute; width:300px; height:250px; top:350px; left:500px; border: 1px solid gray; } </style> </head> <body> <div id="contenitore"> <div id="menuprincipale">MENU PRINCIPALE 800x100</div> <div id="menusecondario">MENU SECONDARIO 200x500</div> <div id="immaginesx">IMMAGINE SX 300x250</div> <div id="testodx">TESTO DX 300x250</div> <div id="testosx">TESTO SX 300x250</div> <div id="immaginedx">IMMAGINE DX 300x250</div> </div> </body> </html>

7. DIMENSIONE DELLE PAGINE Nella scelta della risoluzione del sito bisogna fare riferimento al tipo di pubblico e al grado di diffusione dei vari tipi di monitor in circolazione.

Vediamo di capire perché.

La rapidità con cui una pagina viene visualizzata sul browser dipende dalla dimensione della pagina stessa e dalla velocità di connessione del client utilizzato per la navigazione. Chi progetta un sito web deve fare in modo che tutte le pagine del sito siano visualizzate in modo ragionevolmente rapido da tutti i suoi utenti. Per ragionevolmente rapido intendiamo un tempo di caricamento della singola pagina inferiore a 20 secondi.

Il progettista si deve chiedere che tipo di pubblico visiterà il sito: se il pubblico è tecnologico, prevedendo sia dotato di connessioni veloci, egli potrà progettare delle pagine piuttosto “pesanti” (in termini di byte); in caso contrario dovrà fare attenzione a non eccedere nelle dimensioni delle pagine stesse. Per fare in modo che le pagine siano visualizzate in tempi ragionevoli da tutti gli utenti del sito, il progettista deve ipotizzare qual è la velocità minima di connessione da essi utilizzata. Utilizzeremo ora la formula:

N° bit = velocità x secondi Pag. 14 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

La formula si ricava facilmente da: velocità (in bit/secondo) = n° bit /secondi Consideriamo il caso di un sito web rivolto ad un pubblico generico. In tal caso possiamo dire che la velocità minima a disposizione dei navigatori è quella attualmente offerta dalle cosiddette “chiavette UMTS” che è pari a circa 240 kbit/s (per inciso: le chiavette sfruttano la stessa tecnologia di trasmissione utilizzata dai telefoni cellulari). Calcoliamo la dimensione in byte (= 8 bit) di una pagina web che impiega 20 secondi per essere caricata con una connessione a 200 kbit/s: 200 kbit/s x 20 s = 4000 kbit = 500 kbyte = 0,5 Mbyte Quindi per garantire un tempo di caricamento inferiore a 20 secondi le pagine web devono occupare meno di 0,5 Mbyte.

Nel calcolo appena svolto abbiamo ignorato i pochi navigatori sfortunati che ancora usano il modem analogico a 56 kbit/s. Se dovessimo tenere conto anche di loro le pagine web dovrebbero occupare meno di 40 kbit/s x 20 s = 800 kbit = 100 kbyte = 0,1 Mbyte Consideriamo ora il caso di un sito web rivolto ad un pubblico tecnologico. In tal caso possiamo dire che la velocità minima a disposizione dei navigatori è quella attualmente offerta dalle connessioni adsl o wimax, pari a circa 2Mbit/s. Calcoliamo la dimensione in byte (= 8 bit) di una pagina web che impiega 20 secondi per essere caricata con una connessione a 2Mbit/s: 2 Mbit/s x 20 s = 40 Mbit = 5 Mbyte Quindi per garantire un tempo di caricamento inferiore a 20 secondi le pagine web devono occupare meno di 5 Mbyte.

8. RISOLUZIONE DELLE PAGINE L’altezza della pagina non è mai un problema, nel senso che la barra di scorrimento verticale del browser permette di visualizzare pagine anche molto lunghe. Invece la larghezza della pagina è un serio problema, perché la barra di scorrimento orizzontale del browser non deve mai apparire.

Sito con risoluzione 1024x768 su schermo 800x600 (appare la barra di scorrimento orizzontale)

Pag. 15 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Per evitarlo bisogna che la risoluzione orizzontale adottata dal progettista del sito sia minore o uguale di quella utilizzata dall’utente che visualizza il sito stesso. Esempio: se la risoluzione orizzontale del sito è 800 e quella del monitor è 1024 è tutto ok; se invece la risoluzione orizzontale del sito è 1280 e quella del monitor è 1024 apparirà la barra di scorrimento orizzontale nel browser.

Per evitare che ciò non accada a nessun utente del sito, bisognerebbe realizzare il sito tenendo conto della minima risoluzione utilizzata dal pubblico (ad esempio 800x600), il che però potrebbe essere limitativo, nel senso che in una pagina troppo “stretta” ci stanno meno oggetti.

Tenendo conto che alla data di oggi (2010) pochissimi utenti utilizzano una risoluzione del monitor inferiore o pari a 800x600, possiamo affermare che la scelta di una risoluzione 1024x768 sia una buona scelta nel caso di pubblico indistinto (cioè non appartente a qualche categoria particolare).

Invece nel caso di pubblico tecnologico (per esempio nel caso di un sito che tratta di videogiochi) potrebbe avere senso adottare una risoluzione maggiore (ad esempio 1280x1024).

Però occorre fare ancora qualche considerazione. Per una corretta visualizzazione su un monitor 1024x768 la pagina web deve essere larga al massimo 970 pixel, a causa dello spazio (circa 50 pixel) occupato dai bordi della finestra del browser e dalla barra di scorrimento verticale.

Invece, per una corretta visualizzazione su un monitor 1280x1024 la pagina deve essere larga al massimo 1230 pixel.

Quindi, per la progettazione delle pagine occorre fare riferimento all’area del browser in cui appare il contenuto (body) della pagina web, detta viewport del browser. La viewport è sempre più piccola della risoluzione dello schermo, anche se i browser di nuova generazione stanno riducendo al minimo questo scarto. Ad esempio, nel caso di Explorer 9, su una risoluzione 1280×1024, la viewport del browser è di 1276×933.

Sito con risoluzione 1024x768 su schermo 1024x768 (visualizzazione corretta)

Pag. 16 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Sito con risoluzione 1024x768 su schermo 1280x800 (appaiono due ampie bande laterali vuote)

Lo storyboard L’ output della progettazione è lo STORYBOARD, un documento che raccoglie il frutto di tutte le riflessioni e considerazioni svolte finora.

Riportiamo di seguito uno storyboard di esempio, che può essere preso come riferimento da un web-designer alle prime armi per poter progettare in modo organico e completo un sito web statico.

1.

Requisiti Qual è lo scopo del sito? Pubblicizzare i quadri esposti nella galleria e i relativi autori.

Qual è il pubblico a cui il sito è destinato? Si tratta degli appassionati d’arte, anche occasionali.

Qual è il nome del sito e il nome del dominio? Galleria d’arte DADAUMPA e http://www.dadaumpa.it

2.

Risorse Chi è il progettista e sviluppatore del sito? Gigi La Trottola Qual è il provider scelto per la pubblicazione? Il provider scelto è ALTERVISTA

3.

Struttura logica del sito La struttura logica utilizzata nel sito è quella gerarchica. Essa è rappresentata nel diagramma ad albero sottostante. Sono presenti tre livelli: il primo livello con la home page; il secondo livello con le pagine di sezione galleria.htm e pittori.htm e il terzo livello con le pagine di contenuto colline_azzurre.htm, ninfee.htm, inverno.htm, ecc.

Home.htm

galleria.htm

colline_azzurre .htm

ninfee.htm

pittori.htm

inverno.htm

tramonto.ht m

Pag. 17 di 57

pippo.htm

pluto.htm

paperino.ht m

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

4.

Navigazione nel sito Ricordiamo che, in ogni pagina del sito, sempre nella stessa posizione, dovrebbero apparire: • il logo del sito e il nome del sito (ovviamente uguali per tutte le pagine del sito) • il titolo della pagina stessa • il percorso per raggiungere la pagina a partire dalla home page oppure il nome della sezione del sito a cui la pagina appartiene • una barra di navigazione Scegliamo di non inserire nelle pagine né il logo né il nome del sito: in compenso, il nome del sito (GALLERIA D’ARTE DADAUMPA) verrà inserito nel tag title di tutte le pagine. Dal momento che il sito è di dimensioni contenute (solo 10 pagine) scegliamo di non inserire nelle pagine né il nome della sezione né il percorso.

La barra di navigazione, disposta in alto, sarà uguale in tutte le pagine, e permetterà di raggiungere da ogni pagina del sito la home e le due pagine di sezione (home.htm galleria.htm pittori.htm).

5.

Definizione delle pagine Nello storyboard verrà specificato per ogni pagina del sito: • nome del file • titolo della pagina • contenuto in sintesi (che cosa contiene la pagina?)

Nel nostro esempio per semplicità i nomi dei file coincideranno con i titoli delle pagine.

Di seguito viene riportato il contenuto di ogni pagina del sito.

• • • • •

Home.htm: contiene solo il logo della galleria e un link alla email Pittori.htm: contiene il nome e la foto dei pittori della galleria Galleria.htm: contiene il nome e l’immagine dei quadri esposti nella galleria Pippo.htm, Pluto.htm, Paperino.htm: ogni pagina riguarda un singolo pittore e contiene la biografia, l’elenco delle opere, le curiosità relative al pittore stesso Colline azzurre.htm, Ninfee.htm, ecc.: ogni pagina riguarda un singolo quadro esposto e contiene tutti i dati relativi a quel quadro (titolo, anno, tecnica, osservazioni)

6.

Layout delle pagine Come sono disposti titoli, testi, immagini? (omesso)

7.

Dimensione delle pagine Ipotizzando un pubblico generico, ogni pagina deve essere di dimensioni contenute (meno di 500 kbyte), in modo da permetterne il caricamento in meno di 20 secondi, anche con un accesso non molto veloce (200 kbit/s).

8.

Risoluzione La risoluzione che verrà utilizzata in fase di realizzazione è 800x600, allo scopo di raggiungere il maggior numero possibile di visitatori.

Sviluppo e test di un sito web statico

Pag. 18 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Per lo sviluppo del nostro sito di esempio è stato utilizzato il linguaggio HTML 4.01.

Per l’editing del codice è stato utilizzato un semplice editor di testo con licenza free (PSPAD 4.5).

Tutte le pagine sono state validate nell’apposito sito del W3C. Sotto è rappresentata la struttura fisica del sito, cioè il modo in cui i file contenenti le pagine html e le immagini sono stati archiviati nel web server. La struttura fisica viene decisa in fase di realizzazione: da essa dipendono i link presenti nelle pagine html.

Si osservi che: • le icone grandi sono le cartelle e i file che si trovano nella cartella principale (root) del server web • le immagini sono raggruppate nella cartella IMMAGINI • le immagini dei pittori e dei quadri sono duplicate, nel senso che ogni immagine è presente con due diverse risoluzioni (200x150 e 400x300); la risoluzione più bassa è quella individuata con il prefisso small • nella cartella AUTORI sono contenute tutte le pagine relative ai pittori • nella cartella GALLERIA sono contenute tutte le pagine relative ai quadri • la tre striscie orizzontali che appaiono in tutte le pagine si ottengono mettendo come sfondo del body l’immagine sfondo.gif (10x1500 pixel) e un colore di sfondo.

Il sito DADAUMPA è stato testato in modo da garantire il suo corretto funzionamento al maggior numero possibile di visitatori.

A questo scopo: • sono stati utilizzati per il test i due browser attualmente più utilizzati (Mozilla Firefox 3.5 e Internet Explorer 7). Sarebbe stato meglio verificare il funzionamento anche con altre versioni degli stessi browser (quelle più utilizzate dai navigatori). Poiché In fase di sviluppo le pagine sono state validate, in questa fase non ci dovrebbero essere grosse sorprese. Ricordiamoci però che ogni browser si comporta in modo diverso a parità di codice HTML. • il sito è stato testato con le risoluzioni più basse attualmente utilizzate dai navigatori (800x600 e 1024x768); in questo modo siamo certi che il sito verrà visualizzato correttamente anche con risoluzioni maggiori.

• il test è stato effettuato, oltre che con un collegamento veloce ADSL, anche con un modem analogico a 56kbit/s; in questo modo siamo certi che il sito verrà visualizzato con tempi di download ragionevoli anche dagli utenti tecnologicamente meno avanzati. Ovviamente quest’ultimo test è possibile solo dopo aver pubblicato il sito.

Pubblicazione di un sito web statico

Pag. 19 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Dopo aver realizzato il sito si devono pubblicare i file trasferendoli sul server web di un provider: nel nostro caso quello di ALTERVISTA. In genere i server web hanno un’area pubblica contenente le varie cartelle in cui verranno memorizzati i siti. Ad ogni sito corrisponde una cartella e ad ogni cartella corrisponde un utente (detto anche webmaster) che ha il permesso di scrivere al suo interno, dopo aver inserito lo username e la password. Viceversa tutti potranno leggerne il contenuto utilizzando un browser. Ad esempio per accedere al sito web emfasis si deve digitare nel browser l’indirizzo http://emfasis.altervista.org. Il modo più semplice per pubblicare le pagine del sito è quello di usare l’interfaccia gestione file (vedi figura).

Poichè il sito web verrà realizzato fisicamente su un computer diverso da quello che ospiterà il sito nella sua versione finale, il webmaster non deve mai specificare un percorso assoluto negli indirizzi URL (esempio: c:\dati\graphics\logo.gif), ma deve usare sempre percorsi relativi, che dicono al browser dove si trovano i file rispetto al documento corrente, cioè quello visualizzato. Prendiamo come esempio il sito DADAUMPA. Per inserire il quadro delle ninfee nella pagina galleria.htm si deve scrivere: <img src="immagini/small_ninfee.jpg" alt="ninfee"> Per inserire l’immagine del pittore nella pagina pippo.htm del sito DADAUMPA si deve scrivere: <img src="../immagini/pippo.jpg" alt="pippo" >

DA HTML A XHTML Una gran parte delle pagine HTML pubblicate non è valida rispetto alle raccomandazioni del W3C, ma funziona. L'adozione di un nuovo linguaggio (XHTML) non è obbligatoria: tutti i browser in commercio sono in grado di interpretare HTML 4.01. XHTML non introduce nuove caratteristiche rispetto al suo predecessore. Perché allora imparare un nuovo linguaggio?

Ecco alcune possibili risposte. Il passaggio ad XHTML può essere visto come un ritorno alle origini. Infatti HTML era nato come linguaggio per definire la struttura di un documento. Non aveva nulla a che vedere con la presentazione. Eppure, è stato stiracchiato da tutte le parti, costretto a svolgere compiti per cui non era stato creato. Quando si sentì la necessità di gestire la tipografia dei documenti, venne introdotto il tag <font> con i relativi attributi. La conseguenza è quella di pagine cariche di tag e attributi, più pesanti e difficili da modificare.

Nel 1996 il W3C ha rilasciato la versione definitiva del linguaggio CSS. Era questa la tecnologia destinata a definire la presentazione dei documenti.

L'idea era chiara: HTML per la struttura, CSS per lo stile e il layout. Eppure, per avere browser che supportassero decentemente questi standard si è dovuto attendere il 2001. Cinque anni, milioni di siti costruiti tentando di risolvere incompatibilità e bug. Con XHTML, almeno nella sua versione Strict, si torna ad un linguaggio che definisce solo la struttura. Semplicemente, se si utilizzano tag o attributi non supportati (font, larghezza per le celle di tabelle, sfondo per il body, ecc.) il documento non è valido. Quindi: la formattazione si fa con i CSS; mai più con i tag <font>.

Per stabilire se un documento XHTML è valido, il W3C dà la possibilità di validare i documenti tramite l'upload sui suoi server (http://validator.w3.org). Il logo che attesta la conformità al linguaggio XHTML è il seguente:

Le parti di una pagina XHTML

Prologo: colore rosa La figura mostra il prologo di un documento XHTML. Esso risulta composto da due parti: la dichiarazione XML (facoltativa) e la definizione del DOCTYPE (obbligatoria).

Bisogna sapere che ci sono tre tipi di XHTML, le cui regole sono definite nelle cosiddette Document Type Definition XHTML: • DTD XHTML Strict • DTD XHTML Transitional • DTD XHTML Frameset Il prologo indica quale delle tre Document Type Definition XHTML viene utilizzata nella pagina e qual è il suo URL. Nel nostro esempio la DTD XHTML utilizzata è quella Strict, collocata sul sito del W3C. Il DOCTYPE non ha alcun effetto sulla presentazione della pagina: serve solo al validatore per stabilire le regole della convalida.

Pag. 20 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Radice (html):colore verde Il tag radice <html> deve essere sempre presente e deve contenere tutti gli altri tag: Niente di nuovo direte, anche le pagine HTML dovevano iniziare con il tag <html>. E invece no! <head><title>Il tag radice</title></head <body bgcolor="#FFFFFF" text="#000000"> <h1>Questo è HTML!</h1> </body> Copiate e incollate queste poche righe in Blocco Note; salvate il file e apritelo in un browser. La scritta "Questo è HTML!" comparirà bella ed evidente. Ma cosa volete farci, i nostri browser sono fatti così. Sanno perdonare molto, forse troppo. Si calcola che l'80% della potenzialità del parser HTML di un browser venga usata per risolvere gli errori di scrittura presenti nelle pagine. È evidente che sottoponendo questa pagina a validazione non sarete nemmeno presi in considerazione. Se un giorno i browser (come è auspicabile) effettueranno la verifica la nostra paginetta di test verrà sdegnosamente rifiutata perché non corretta.

Il tag <html> può assumere questi attributi: dir, lang, xml:lang,xmlns.

L'unico attributo obbligatorio è xmlns. Il W3C, come visto, specifica anche il valore obbligatorio di tale attributo: http://www.w3.org/1999/xhtml

Intestazione (<head>): colore azzurro La funzione principale della sezione <head> è quella di contenere informazioni che non vengono direttamente visualizzate nella pagina, ma che sono comunque di grande rilievo. Ecco l'elenco dei tag che possono apparire nella testata: BASE, LINK, META, SCRIPT, STYLE, TITLE. Di questi tag l'unico richiesto nelle DTD XHTML 1.0 è title. In realtà se esso viene omesso, il validatore del W3C non segnala errori. Rimane il fatto che dare un titolo ad una pagina è una buona norma da seguire anche perché è utilissimo per i motori di ricerca, che sempre più considerano questo tag piuttosto che le classiche keywords definite nei meta tag.

Corpo (<body>): colore giallo Il corpo del documento è la sezione in cui si sviluppa il contenuto. È racchiusa, come in HTML, tra i tag <body>...</body>.

Gli attributi per il testo, i link, il colore di sfondo del tag <body> non vanno usati e devono essere sostituiti dai CSS. Li ricordiamo: link, alink, vlink, background, bgcolor, text.

I tag che possono comparire all'interno del body sono in genere suddivisi in due categorie: tag blocco (block level element) e tag in linea (inline element). Una terza categoria è quella dei tag lista (list-item element), che comprende in pratica solo il tag li.

I tag blocco e i tag in linea

Osserviamo una pagina XHTML tentando di non pensare al contenuto ma solo alla sua struttura.

Una pagina XHTML non è altro che un insieme di box (rettangoli) disposti sullo schermo di un monitor. Non importa che si tratti di paragrafi, titoli, tabelle o immagini: sempre di box si tratta. Nell'immagine potete però osservare che non tutti i box sono uguali.

Pag. 21 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Nell’esempio ci sono 8 box corrispondenti ai tag blocco che determinano la struttura del documento. In questi 8 box il testo in essi contenuto comincia sempre da una nuova riga: • il box che contiene il titolo 1 • il box che contiene tutto il primo paragrafo • il box che contiene il titolo 2 • il box che contiene tutto il primo paragrafo • le quattro celle della tabella Gli altri 6 box evidenziati con una freccia (corrispondenti ad altrettanti tag in linea) sono contenuti all'interno dei primi e il testo scorre intorno a loro senza andare a capo.

Avete nell'immagine la rappresentazione visiva, anche se un po’ semplificata, della fondamentale distinzione tra tag blocco e tag in linea.

TAG BLOCCO (BLOCK-LEVEL ELEMENT) I tag blocco: • sono quelli che definiscono la struttura del documento • possono contenere altri tag blocco, tag in linea o testo • quando sono inseriti danno origine ad una nuova riga nel flusso del documento • rispettano una certa gerarchia: body, div, p…

Ad esempio se si inseriscono in una pagina queste due righe di codice: questo è un saluto: <p>Ciao!</p> il testo Ciao! si troverà su una nuova riga, perché p èun tag blocco.

Nella strutturazione del documento è fondamentale rispettare alcune semplici regole relative alla gerarchia dei tag blocco.

Il primo tag della gerarchia (dopo <body> ovviamente) dovrebbe essere <div>, che definisce in pratica una sezione del documento. Al suo interno possono trovare posto altri tag blocco (<p> <h1> <h2> …), eventuali tag in linea ed eventuale testo.

A proposito: non si può inserire testo o tag in linea direttamente nel body della pagina web!

Bisogna evitare errori di gerarchia, che i browser fanno passare senza problemi, ma che il validatore segnala impietosamente in quanto violano le regole delle DTD. Esempio: <p><div>Qui inserisco il mio testo</div></p> Se inserite questa breve riga di codice in un documento visualizzerete regolarmente il testo. Niente problemi allora? Non proprio. In realtà il documento non è valido, in quanto il tag <p> non può contenere un tag gerarchicamente superiore. Il codice corretto è questo: <div><p>Qui inserisco il mio testo</p></div> Avete imparato allora una cosa importante: non fidatevi dei browser per verificare se il documento che scrivete è valido. Molto spesso ciò che funziona non è valido e in XHTML la correttezza formale è obbligatoria.

TAG IN LINEA (INLINE ELEMENT) I tag in linea si distingono da quelli di tipo blocco per due motivi: • quando sono inseriti non danno origine a una nuova riga • possono contenere solo dati (essenzialmente testo) o altri tag in linea Chiariamo anche qui con un esempio: <p>Questo tasto è<b>grassetto</b></p> La parte delimitata dai tag <b>...</b> non sarà posta su una nuova riga. Anche per i tag in linea va posta molta attenzione all'annidamento. Esempi come questo: <b><p>Testo in grassetto</p></b> sono tollerati dai browser, ma non reggono al giudizio della validazione in quanto un tag in linea non può contenerne uno di tipo blocco.

Pag. 22 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Differenze tra XHTML e HTML XHTML è essenzialmente una ridefinizione di HTML. Non ci sono in pratica nuovi tag o attributi.

Le novità sostanziali riguardano piuttosto la sintassi, il modo in cui tag, attributi e valori vengono usati. Le esamineremo ora una per una, proponendo sempre il confronto con HTML.

1.I TAG DEVONO ESSERE CORRETTAMENTE ANNIDATI HTML

XHTML

<b><i>un test</b></i>

<b><i>un test</i></b>

Il primo esempio non è corretto in XHTML. Il tag <i> si sovrappone a <b>. La seconda colonna mostra invece un corretto annidamento dei tag. La prima pratica è consentita in HTML. Certo, il browser dovrà interpretare qualcosa che è ambiguo, ma alla fine ci restituirà un testo in grassettocorsivo (ciò che volevamo). In XHTML non possono sorgere ambiguità.

2. I NOMI DEI TAG E DEGLI ATTRIBUTI DEVONO ESSERE IN MINUSCOLO HTML

XHTML

<TABLE><TR><TD>un test</TD></TR></TABLE>

<table><tr><td>un test</td></tr></table>

XHTML è un linguaggio case sensitive a differenza dell’HTML. Significa che <table> e <TABLE> sono cose diverse. In XHTML è consentito solo l'uso delle minuscole per i nomi di tag e attributi.

3. I TAG NON VUOTI DEVONO ESSERE CHIUSI HTML

XHTML

<p>Test1 <p>Test2

<p>Test1</p> <p>Test2</p>

In HTML la pratica esposta a sinistra è tollerata, in XHTML non lo è. Ogni tag non vuoto (sono quelli che contengono testo o altri tag) deve avere dopo il tag di apertura quello di chiusura.

4. I VALORI DEGLI ATTRIBUTI DEVONO ESSERE POSTI TRA VIRGOLETTE HTML

XHTML

<img src=test.gif>

<img src="test.gif">

Anche questa pratica è tollerata in HTML. In XHTML no.

5. OGNI ATTRIBUTO DEVE AVERE UN VALORE HTML

XHTML

<option selected>test</option> <table border>....</table> <form>....</form>

<option selected="selected">test</option> <table border=”1”>....</table> <form action=”action”>....</form>

Alcuni attributi di HTML non hanno un valore (si dice che sono standalone). È il caso dell'attributo selected usato per identificare l'opzione predefinita di un menu a tendina oppure è il caso dell’attributo border di table, utilizzabile anche senza assegnare un valore. In XHTML tutti gli attributi devono essere valorizzati.

6.I TAG VUOTI DEVONO TERMINARE CON /> HTML

XHTML

<br> <img src="test.gif">

<br /> <img src="test.gif" />

In XML tutti i tag devono essere chiusi. Ma cosa fare con i tag vuoti? Si tratta di quelli che non possono contenere nulla al loro interno ma semplicemente ricevere attributi: <meta>, <br>, <hr>, <img> In XHTML tali tag vengono chiusi terminando la dichiarazione con />. Attenzione: bisogna far precedere la barra da uno spazio.

Pag. 23 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

CASCADING STYLE SHEET (CSS) Con il nome di Cascading Style Sheets (Fogli di stile in cascata) si intende uno dei fondamentali linguaggi standard del W3C. La sua storia cammina su binari paralleli rispetto a quelli di XHTML, di cui vuole essere l'ideale complemento. Da sempre infatti, nelle intenzioni del W3C, XHTML dovrebbe essere semplicemente un linguaggio strutturale, estraneo alla presentazione di un documento. Per questo obiettivo, ovvero arricchire l'aspetto visuale ed estetico di una pagina, lo strumento designato sono appunto i CSS. L'ideale perseguito da anni si può sintetizzare con una nota espressione: separare il contenuto dalla presentazione.

Per dare il giusto inquadramento ai CSS occorre dire che sono nati per modificare lo stile dei tag strutturali (i tag di tipo blocco) e non vanno intesi come un linguaggio grafico. Per queste cose esistono Flash o Photoshop.

La via dei CSS è ancora lastricata di tanti problemi per gli sviluppatori. Due le maggiori fonti di difficoltà: 1. la compatibilità con i vecchi browser 2. le diverse modalità di rendering di certe proprietà Spieghiamo meglio il punto 2: il problema sta nel modo in cui ciascun browser, pur supportando una proprietà, la applica. Un esempio: Microsoft Explorer e Mozilla Firefox supportano entrambi l'uso di parole chiave per definire le dimensioni dei font. Ma Explorer lo fa a modo suo, ignorando le regole dettate dal W3C (vedi introduzione al paragrafo “da HTML a XHTML”). Una cosa è certa: che una pagina possiate vederla allo stesso modo su tutti i browser è semplicemente un'utopia.

STRUTTURA AD ALBERO DI UNA PAGINA XHTML Consideriamo una pagina XHTML: <html xmlns=...> <head><title>Struttura del documento</title></head> <body> <h1>Titolo</h1> <div> <p>Primo <a href = "pag.htm">paragrafo</a></p> </div> <p>Secondo<b>paragrafo</b></p> </body> </html> Questa è la sua struttura ad albero:

In una pagina XHTML tutti i tag hanno tra di loro una relazione del tipo genitore-figlio (parent-child). Ogni tag è genitore e/o figlio di un altro. Un tag si dice genitore (parent) quando contiene altri tag. Si dice figlio (child) quando è racchiuso in un altro tag.

A proposito: non si può inserire testo o tag in linea direttamente nel body della pagina web.

In base a queste semplici indicazioni possiamo analizzare il nostro documento. Il tag body, ad esempio, è figlio di html, ma è anche genitore di h1, div e p. Quest'ultimo è a sua volta genitore di un tag b.

Si dice che body è antenato (ancestor) di b e che b è discendente (descendant) di body. La relazione parent-child è valida solo se tra un tag e l'altro si scende di un livello; se si scende di due o più livelli si parla invece di relazione ancestor-descendant. Pertanto possiamo dire che head è figlio di html, che a è figlio di p. Tra div e a si scende di due livelli: diciamo allora che div è un antenato di a e che quest’ultimo è un discendente del primo. C'è un solo tag che racchiude tutti e non è racchiuso: html. Si dice che html è il tag radice (root).

Fate attenzione alla struttura ad albero del documento: un paragrafo p, per esempio, non può contenere un div, così come un tag in linea non può contenere un tag blocco.

EREDITARIETÀ Il meccanismo fondamentale dei CSS è l'ereditarietà, secondo cui le impostazioni stilistiche applicate ad un tag ricadono automaticamente anche sui suoi discendenti. Almeno fino a quando, per un tag discendente, non si imposti esplicitamente un valore diverso per quella proprietà. Se ad esempio impostiamo il colore rosso per il testo a livello del tag body tutti gli altri tag suoi discendenti erediteranno questa impostazione. Ma se ad un certo punto definiamo nel codice del CSS un selettore (ad esempio p) con la proprietà color: black; l'ereditarietà viene spezzata.

Non tutte le proprietà sono ereditate. In genere non sono ereditate quelle attinenti la formattazione del box model (vedi paragrafo): margin, border, padding, background. Il motivo è semplice. Ereditare un bordo è semplicemente senza senso: se imposto un bordo per il paragrafo p è assurdo che il tag a contenuto nel paragrafo stesso venga circondato dallo stesso bordo!

Pag. 24 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

3 tipi di regole di stile Tre sono i modi per inserire le regole di stile CSS in un documento XHTML: • regole di stile esterne, contenute in un file esterno con estensione css • regole di stile interne, contenute nella sezione <style> del documento XHTML da formattare • regole di stile in linea, contenute nel tag da formattare

REGOLE DI STILE ESTERNE Le regole di stile esterne sono inserite all’interno di un file, distinto dal documento XHTML, detto CSS esterno (o foglio di stile esterno o foglio di stile collegato). Le regole di stile sono semplicemente elencate nel file, una di seguito all’altra: Regola di stile interna 1 Regola di stile interna 2 Regola di stile interna 3 Attenzione: per la sintassi di una regola di stile vedere più avanti.

Il CSS esterno è un semplice file di testo, editabile con il Blocco Note o PsPad, al quale si assegna l'estensione .css. Per caricare un CSS esterno in un documento XHTML si fa uso del tag <link>. La dichiarazione va sempre collocata all'interno della sezione <head> del documento XHTML. La sintassi è la seguente: <head> <link rel="stylesheet" type="text/css" href="URL del foglio di stile esterno"> </head> Il tag <link> presenta una serie di attributi di cui è importante spiegare significato e funzione: 1. rel: descrive il tipo di relazione tra la pagina XHTML e il file collegato (obbligatorio); noi useremo sempre il valore stylesheet 2. href: definisce l'URL o il path relativo del foglio di stile (obbligatorio) 3. type: identifica il tipo di dati da collegare (obbligatorio); noi useremo sempre text/css 4. media: identifica il supporto (schermo, stampa, etc) cui applicare un particolare foglio di stile (opzionale)

REGOLE DI STILE INTERNE Le regole di stile interne sono inserite direttamente nel documento XHTML tramite il tag <style>, all’interno della sezione <head> del documento stesso. Le regole di stile interne formano un CSS interno (o foglio di stile interno o foglio di stile incorporato). Anche in questo caso la dichiarazione va posta all'interno della sezione <head>: <head> <style type="text/css"> Regola di stile interna 1 Regola di stile interna 2 Regola di stile interna 3 </style> </head> Come si vede il codice inizia con l'apertura del tag <style>. Esso può avere i due attributi type (obbligatorio) e media (opzionale), per i quali valgono le osservazioni viste in precedenza. Seguono poi le regole di stile del CSS e la chiusura del tag <style>.

CSS INTERNO O ESTERNO? A questo punto è giusto chiedersi: quando usare un CSS esterno e quando un CSS interno?

Innanzitutto è importante sapere che, usando uno o l’altro, i risultati della formattazione del documento non cambiano. Per scegliere la giusta soluzione bisogna progettare accuratamente il sito, cioè occorre pensare in anticipo a quale sarà la struttura delle pagine del sito. Poi si costruisce un CSS generico ed esterno, da applicare a tutte le pagine del sito: esso conterrà le regole per formattare i titoli, i paragrafi, le sezioni presenti in tutte le pagine del sito. Supponiamo che il foglio di stile esterno sia contenuto nel file stile.css Ciò significa che in tutte le pagine del sito deve essere presente nella sezione <head> del documento XHTML: <head> <link rel="stylesheet" type="text/css" href="stile.css"> </head> Poi bisogna analizzare i tag presenti solo in certe pagine o i tag che si vuole modificare solo in determinati casi. Supponete, ad esempio, di voler cambiare in rosso il colore dei titoli h1 solo in una pagina delle 150 del vostro sito. In tal caso bisogna usare un foglio di stile incorporato solo in quella pagina: <head> <link rel="stylesheet" type="text/css" href="stile.css"> Pag. 25 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<style type="text/css"> h1 {color: red; } </style> </head> Questo stile prevarrà su quello definito in stile.css (foglio di stile esterno)

REGOLE DI STILE IN LINEA L'ultimo modo di usare le regole di stile richiede l'attributo style, che fa parte della collezione di attributi XHTML definita Common, cioè quegli attributi applicabili a tutti i tag. La dichiarazione della regola di stile avviene a livello di singolo tag e per questo si parla di regola di stile in linea. La sintassi generica di una regola di stile in linea è la seguente: <tag style="dichiarazione1;dichiarazione2;dichiarazione3;"> Se, 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-color: black;">...</h1> Come valore dell’attributo style si inseriscono le dichiarazioni di stile, separate dal punto e virgola.

La regola di stile in linea prevarrà sugli eventuali CSS esterni e interni.

Attenzione però: l'uso estensivo di regole di stile in linea rischia di compromettere uno dei principali vantaggi dei CSS, ovvero avere pagine più leggere e facili da gestire. Intervenire nei meandri di una pagina per andare a modificare uno stile e ripetere l'operazione per quante sono le pagine del nostro sito può diventare davvero frustrante. Del resto, il loro uso è ultimamente stato deprecato anche dal W3C.

Regole di stile (style rules) • • •

Un foglio di stile (esterno o interno) è un elenco di regole di stile.

Una regola di stile è un elenco di dichiarazioni di stile.

Una dichiarazione assegna un valore ad una certa proprietà.

Ogni regola di stile deve soddisfare la seguente sintassi: selettore

blocco delle dichiarazioni di stile

proprietà 1

valore della proprietà 1 dichiarazione di stile 1

proprietà 2

valore della proprietà 2 dichiarazione di stile 2

Ecco un esempio di regola di stile: body { background-color: White; /* 1a dichiarazione di stile*/ font-family: Verdana, Arial, Helvetica; /* 2a dichiarazione di stile*/ font-size: 12px; /* 3a dichiarazione di stile*/ } In questo esempio, verranno formattati tutti i tag <h1> : lo sfondo sarà rosso, il colore del testo bianco.

Il selettore serve a definire la parte del documento cui verrà applicata la regola.

Il blocco delle dichiarazioni è delimitato da due parentesi graffe.

Se in un blocco si definiscono più dichiarazioni, esse vanno separate dal punto e virgola. Il linguaggio non impone che si metta il punto e virgola dopo l'ultima dichiarazione, ma alcuni browser più datati lo richiedono: aggiungetelo sempre per sicurezza e per una maggiore compatibilità.

Ogni dichiarazione è sempre composte dalla coppia proprietà:valore, dove la proprietà definisce un aspetto del tag da modificare (margini, colore di sfondo, etc).

Il valore di una proprietà non va mai messo tra virgolette. Uniche eccezioni i valori espressi da stringhe di testo e i nomi dei font formati da più di una parola (esempio: "Times New Roman").

Per ogni dichiarazione non è possibile indicare più di una proprietà, mentre è spesso possibile specificare più valori.

Questa regola è pertanto errata: Mentre questa è perfettamente valida:

body {border-color background-color: black;} p {font: 12px Verdana, arial;}

Gli spazi bianchi lasciati all'interno di una regola non influiscono sul risultato. Il consiglio, anzi, è di lasciare sempre uno spazio tra le varie parti per una migliore leggibilità.

Pag. 26 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Attenzione però: quando si usano valori numerici con unità di misura, non bisogna lasciare spazio tra numero e sigla dell'unità di misura. E' corretto quindi scrivere 15px oppure 5%. E' invece sbagliato usare 15 px oppure 5 %

PROPRIETÀ SINGOLE - PROPRIETÀ A SINTASSI ABBREVIATA Nelle definizione di regole di stile con le seguenti proprietà: font, margin, padding, border, border-top, border-right, border-bottom, border-left è possibile fare uso di proprietà singole oppure di proprietà a sintassi abbreviata. Con le seconde è possibile definire con una sola dichiarazione un insieme di proprietà singole.

Chiariamo con un esempio. Ogni tag presenta sui suoi quattro lati un certo margine rispetto a quelli adiacenti. Se voglio che il tag div abbia un margine superiore e inferiore di 10px e un margine destro e sinistro di 5px posso usare quattro proprietà singole: div { margin-top: 0px; margin-right: 100px; margin-bottom: 50px; margin-left: 200px; } Oppure posso usare la proprietà a sintassi abbreviata margin: div {margin: 10px 5px 10px 5px;} Attenzione: nella sintassi abbreviata della proprietà margin occorre rispettare l’ordine con cui appaiono i valori della proprietà (in senso orario iniziando da top)!

Se voglio che il tag p usi un font arial/courier new di 20px di tipo bold con un interlinea doppia posso scrivere: p{ font-family: arial,"courier new"; font-weight: bold; font-size:20px; line-height:2; } Oppure posso usare la proprietà a sintassi abbreviata font: p {font: bold 20px/2 arial,"courier new";} Attenzione: nella sintassi abbreviata della proprietà font occorre rispettare l’ordine con cui appaiono i valori delle proprietà!

Vediamo altri 3 esempi di sintassi abbreviata con la proprietà font: p {color:blue;font: 22px arial;} p{color:yellow;font: 22px/2 arial;} p{color:aqua;font: bold 22px/2 arial;} Se voglio che il tag h1 usi un bordo di colore blu di spessore 5 px tratteggiato posso scrivere: p { border-width:5px; border-style: dashed; border-color: blue; } Oppure posso usare la proprietà a sintassi abbreviata border: h1 {border:5px dashed blue;} Attenzione: l’ordine dei valori delle proprietà con border non conta! Quindi posso anche scrivere: h1 {border: dashed 5px blue;} Vediamo un altro esempio di sintassi abbreviata con la proprietà border: h2 {border-bottom: 1px solid;} In questo caso i titoli h2 verranno sottolineati con una linea di 1 pixel con il colore di default (black).

Se voglio che il tag div usi un’immagine di sfondo foto.gif ripetuta solo in senso orizzontale che non si muova in fase di scrolling e che usi come colore di sfondo il verde posso scrivere: body { background-image: url(foto.jpg); background-color:green; background-repeat:repeat-x; background-attachment:fixed; } Oppure posso usare la proprietà a sintassi abbreviata background: Pag. 27 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

body {background: lime fixed repeat-x url(foto.jpg);} L’effetto di questa regola di stile è visibile nell’immagine sottostante.

Attenzione: l’ordine dei valori della proprietà background non conta! Quindi posso anche scrivere: body {background: lime url(foto.jpg) repeat-x fixed;}

I selettori Un selettore, come dice la parola stessa, serve a selezionare la parte o le parti di un documento soggette ad una specifica regola di stile.

Quella che segue è una lista dei vari tipi di selettori.

SELETTORE DI TAG (TAG SELECTOR) È il più semplice dei selettori. È costituito da uno qualunque dei tag di XHTML. Gli esempi visti finora rientrano tutti in questo caso.

RAGGRUPPAMENTI È possibile nei CSS raggruppare diversi tag al fine di semplificare il codice. I tag raggruppati vanno separati da una virgola. Il raggruppamento è un'operazione molto conveniente. Se vogliamo che i tre titoli h1, h2. h3 abbiano lo stesso sfondo lime, possiamo scrivere: h1 {background-color: lime;} h2 {background-color: lime;} h3 {background-color: lime;} Oppure: h1, h2, h3 {background-color: lime;}

SELETTORE DEL DISCENDENTE (DESCENDANT SELECTOR) Serve a selezionare tutti i tag che nella struttura ad albero di un documento siano discendenti di un altro tag specificato nella regola.

Ricordiamo che un tag è discendente di un altro se è contenuto al suo interno, a qualsiasi livello. Esempi: div p {color: black;} p b {color: red;} Nel primo esempio verranno selezionati tutti i paragrafi <p> discendenti di tag <div>, cioè paragrafi contenuti in div.

Nel secondo tutti i tag <b> che si trovino all'interno di un paragrafo <p>.

SELETTORI CLASS E ID Grazie a class e id è possibile superare le limitazioni nell'uso di un selettore di tag. Class e id sono due attributi common cioè applicabili a tutti i tag; ma attenzione: dichiarare questi attributi a prescindere dai CSS non ha alcun senso. Ad esempio, se in una pagina si inserisce: Pag. 28 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<p class="testorosso">....</p> <div class=”testorosso”>..... </div> non succede nulla dal punto di vista dello stile del paragrafo o della sezione.

Il problema è che il valore dell'attributo class deve trovare una corrispondenza in un foglio di stile, interno o esterno.

Se invece si definisce un CSS interno creando un selettore di tipo class di nome testorosso … <style type="text/css"> .testorosso { font: 12px arial, Helvetica, sans-serif; color: #FF0000; } </style> … finalmente il paragrafo e la divisione verranno formattati secondo i nostri desideri!

NB: non si può usare un numero per definire una classe!

Lo stesso meccanismo è valido per i selettori di tipo id. Ma con una fondamentale differenza: in un documento XHTML l'attributo id è usato per identificare in modo univoco un tag.

In pratica, se assegno ad un paragrafo l'id testorosso, non potrò più usare questo valore nel resto della pagina.

Attenzione però: il browser non segnalerà nessun errore, ma il validatore sì.

Una classe, invece, può essere assegnata a più tag, anche dello stesso tipo.

Ricapitolando, in un documento potrò avere … <p class="testorosso">....</p> <div class="testorosso">....</div> <table class="testorosso">...</table> <p class="testorosso">....</p> … ma non potrò avere: <p id="testorosso">....</p> <div id="testorosso">...</div> Supponiamo ora di avere una pagina a cui viene applicata la seguente regola di stile: p {color: lime;} cosicché tutti i paragrafi della pagina avranno il testo verde. E se volessimo avere anche paragrafi con il testo rosso? Basta usare la classe testorosso tutte le volte che occorre.

In conclusione: • se uno stile va applicato ad un solo specifico tag si usa un id • se invece si prevede di usarlo più volte ovvero su più tag occorre definire nel CSS una classe.

SINTASSI DI CLASS Il primo tipo di sintassi di class è quella generica, già vista in precedenza: .nome_della_classe {blocco delle dichiarazioni} Un selettore classe così definito può essere applicato a tutti i tag di un documento XHTML. Esiste un secondo tipo di sintassi: tag.nome_della_classe {blocco delle dichiarazioni} Esso è più restrittivo rispetto alla prima sintassi e va usato solo se si pensa di applicare una classe ad uno specifico tag.

Ad esempio se si desidera che lo stile venga applicato solo ai paragrafi che presentano l'attributo class="testorosso" si deve scrivere: p.testorosso {color: red;}

SINTASSI DI ID La sintassi di un selettore id è: #nome_id {blocco delle dichiarazioni}

Pag. 29 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Con questa regola di stile: #titolo {color: blue;} assegniamo il colore blu all’unico tag che porta come valore di id la parola titolo: <h1 id="titolo">...</h1>

Le pseudo-classi Una pseudo-classe imposta uno stile per un tag al verificarsi di certe condizioni.

A livello sintattico le pseudo-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore, rispettando la sintassi seguente: tag:pseudoclasse {blocco delle dichiarazioni} cioè la pseudo-classe inizia con due punti e segue senza spazi il tag.

Ad esempio la regola: a:link {color: blue;} vuol dire: i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue. Ovvero la pseudo-classe :link definisce lo stile (colore blue) solo in una determinata situazione, ovvero quando il link non è stato attivato. Appena ciò dovesse avvenire, il testo non sarà più blue, perchè la condizione originaria è venuta meno.

Le pseudo-classi utilizzate con il tag <a> sono: :link :visited :active :hover

Gli pseudo-tag Vi sono parti di un documento XHTML che non sono rappresentate da nessun tag in particolare, ma che è possibile formattare con i CSS grazie ai cosiddetti pseudo-tag. Il supporto di questo tipo speciale di selettore è garantito solo dai browser più recenti, pertanto attenti all'uso.

:FIRST-LETTER Con questo selettore è possibile formattare la prima lettera di qualunque tag contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.

Gli pseudo-tag non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori. Esempio: p:first-letter {color: red; font-weight: bold;} Con first-letter è possibile usare anche le classi: p.nome_classe:first-letter {color: red; font-weight: bold;} In tutti questi esempi il testo presenterà la prima lettera rossa e in grassetto.

:FIRST-LINE Imposta lo stile della prima riga di un tag contenente del testo.

Valgono le stesse regole generali viste per :first-letter. Esempi: p:first-line {color: blue;} p.nome_classe:first-line {color: blue;}

:BEFORE Grazie allo pseudo-tag :before è possibile inserire nel documento un contenuto non presente nello stesso. Più esattamente, con :before si inserisce del contenuto prima del tag definito nel selettore. Il contenuto da inserire si definisce tramite la proprietà content e può essere una semplice stringa di testo, un URL che punti a un'immagine o ad un'altro documento.

Facciamo un esempio per chiarirne l'uso. Immaginiamo di voler inserire un'immagine particolare prima di ogni titolo <h1>: Pag. 30 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

h1:before {content: url(img/immagine.gif);}

:AFTER Pseudo-tag complementare a :before. L'unica differenza è che il contenuto viene inserito dopo il tag specificato nel selettore. Immaginiamo di voler inserire la stringa “saluti mamma” dopo ogni titolo <h1>: h1:after {content: " saluti mamma ";}

L'attributo media Grazie all'attributo media siamo in grado di impostare un foglio di stile per ogni mezzo di comunicazione (monitor, carta stampata, palmare, tv, ecc.) su cui la nostra pagina XHTML verrà distribuita, senza la necessità di dover duplicare la pagina stessa. Questa possibilità andrà sempre più diffondendosi con l'ampliarsi dei mezzi di diffusione delle pagine XHTML: dove prima c'era unicamente un browser, domani potranno sempre più esserci palmari, cellulari e altri dispositivi; per non parlare dei browser vocali usati da disabili. Ciascuno di questi supporti presenta caratteristiche diverse in termini di memoria, ampiezza dello schermo e funzionalità e quindi non è possibile utilizzare la stessa pagina web per tutti: la soluzione è un’unica pagina XHTML in cui è presente il contenuto e la struttura valida per tutti i media, e la creazione di tanti fogli di stile quanti sono i media a cui si pensa di destinare il contenuto.

L'attributo media è opzionale e può accompagnare sia il tag <link> che il tag <style>.

Per sfruttare a fondo questa opzione è fondamentale conoscere i diversi valori possibili per l'attributo:

• • • • • • • •

all. Il CSS si applica a tutti i dispositivi di visualizzazione; è il valore di default screen. Valore usato per la resa sui normali browser web. print. Il CSS viene applicato in fase di stampa del documento. projection. Usato per presentazioni e proiezioni a tutto schermo. aural. Da usare per dispositivi come browser a sintesi vocale. handheld. Palmari e simili. tty. Dispositivi a carattere fisso. tv.Web-tv.

L'uso più tipico dell’attributo media consiste nel collegare al documento vari fogli di stile adatti a ciascun supporto. Il browser che visualizzerà la pagina sarà in grado, se conforme agli standard, di caricare quello giusto.

Un' esempio è quello che prevede l'uso di un foglio di stile speciale per la stampa su carta. Le motivazioni per una simile soluzione possono essere molteplici: l'uso di caratteri o colori particolari, la presenza nella pagina di tag che non vogliamo far comparire sulla carta (ad esempio la barra di navigazione).

Consideriamo la pagina pippo.htm del nostro sito DADAUMPA in versione XHTML+CSS. Nella testata della pagina troviamo questo codice: <head> <link rel="stylesheet" href="../stile.css" type="text/css" /> <link rel="stylesheet" href="../stile-stampa.css" type="text/css" media="print" /> </head> Per la visualizzazione su carta (=stampa) verrà usato un foglio di stile (stile-stampa.css) diverso da quello usato in tutti gli altri casi (stile.css), in particolare nel caso di visualizzazione sullo schermo.

Nelle immagini sottostanti sono rappresentate: 1. pippo.htm così come appare sulla finestra del browser di un pc (quindi formattata in base al foglio di stile stile.css) 2. pippo.htm così come appare sull’anteprima di stampa in assenza del link al foglio di stile dedicato alla stampa (quindi formattata in base al foglio di stile generale stile.css) 3. pippo.htm così come appare sull’anteprima di stampa in presenza del link al foglio di stile dedicato alla stampa (quindi formattata in base al foglio di stile stile-stampa.css) Confrontando le tre immagini si vede che: • l’anteprima di stampa senza il foglio di stile dedicato alla stampa (seconda immagine) elimina l’immagine e il colore di sfondo, se confrontata alla visualizzazione sul monitor (immagine uno) • l’anteprima di stampa con il foglio di stile dedicato alla stampa (terza immagine) elimina la barra di navigazione e riduce la tipologia di font al solo font arial, se confrontata alla visualizzazione sul monitor (immagine uno)

Pag. 31 di 57

I.S.I.S. Kennedy

Appunti di web design

pippo.htm (visualizzazione sul monitor)

pippo.htm (anteprima di stampa senza foglio di stile dedicato)

Pag. 32 di 57

Ing. Roberto turetta

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

pippo.htm (anteprima di stampa con foglio di stile dedicato)

Il box model Se volete usare i CSS per scopi che vadano oltre la semplice gestione di sfondo e testo, dovete avere ben chiaro che una pagina XHTML non è altro che un insieme di box rettangolari, di tipo blocco o in linea. Ad ogni tag corrisponde un box. Tutto l'insieme di regole che gestisce l'aspetto di questi box è riferito al cosiddetto box model, i cui componenti sono:

a)

l'area del contenuto. È la zona in cui trova spazio il contenuto vero e proprio (testo, immagini, animazioni Flash). Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width, quelle verticali con height. Il valore di default di entrambi le proprietà è auto, cioè viene calcolato automaticamente dal browser. b) il padding. È uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo del box. Come si vede dalla figura, se si imposta il colore di sfondo di un tag (ad esempio: rosa) il colore si estende all’interno del bordo del box, cioè sia nell’area del contenuto sia nell’area del padding. Il valore di default è 0 (zero). c) il bordo. È una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto. d) il margine. È uno spazio di dimensioni variabili che separa un dato box da quelli adiacenti. La distanza si misura dal bordo del box e può anche essere negativo. Nel caso in cui si voglia centrare orizzontalmente un box discendente (cioè contenuto all’interno di un altro box) bisogna impostare i margini destro e sinistro con il valore auto.

Attenzione: quando realizziamo una pagina XHTML senza fogli di stile è il browser ad applicare per alcune di queste proprietà (margin, padding, border, ...) le sue impostazioni predefinite. Per esempio, introdurrà un certo margine per il body, un margine tra un titolo e un paragrafo e anche un certo margine tra due paragrafi.

Pag. 33 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

1. LARGHEZZA E ALTEZZA DEL BOX Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza di un box . La prima è data dal valore della proprietà width. Invece:: larghezza del box =

margine sinistro + bordo sinistro + padding sinistro + larghezza area del contenuto + padding destro + bordo destro + margine destro

Se la larghezza dell’area del contenuto non è specificata dalla proprietà width, essa viene calcolata automaticamente dal browser a partire dai valori di margin border padding e dalla larghezza dell’area del contenuto del box padre (vedi paragrafo successivo).

Quanto detto per la larghezza vale anche per l'altezza.

2. LARGHEZZA DI UN BOX FIGLIO Il box figlio occupa tutta l’area del contenuto del box padre. Perciò: larghezza dell’area del contenuto del box padre = larghezza del box figlio.

Consideriamo ora una pagina XHTML che contiene solo un tag padre div e un tag figlio p: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prove sul box model</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="width_margin.css"> </head> <body> <div> div div div div div div div div div div div div div div div div div div <p> p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p p </p> div div div div div div div div div div div div div div div div div div </div> </body> </html>

Ecco il foglio di stile width_margin.css: div{ width:300px; border:30px solid blue; padding:30px; margin:auto; background:lime; } p{ width:????????????????; border:30px solid red; padding:30px; background:yellow; margin-left:??????????????; margin-right:?????????????; }

Vediamo ora che succede modificando i valori delle proprietà width, margin-left e margin-right del tag p nel foglio di stile esterno width_margin.css.

Teniamo presente che: • se width e margin non sono impostati, è come se fossero entrambi uguali ad auto • se margin è impostato e width no, è come se width fosse uguale a auto • se width è impostato e margin no, è come se margin-left fosse uguale a zero

Pag. 34 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

•

Se non si imposta alcun valore né per la proprietà width (il che equivale ad impostare il valore auto) né per le proprietà marginleft e margin-right (il che equivale ad impostare per entrambi il valore auto) allora il box occupa tutto lo spazio disponibile nell’area del contenuto del box padre (cioè tutta l’area occupata dalle lettere d):

•

Se non si imposta alcun valore per la proprietà width (il che equivale ad impostare il valore auto) e per la proprietà margin-left si imposta un certo valore in pixel allora il box figlio riserva un margine a sinistra mantenendosi aderente al lato destro dell’area del contenuto del box padre (come se margin-right fosse pari a 0px):

•

Se non si imposta alcun valore per la proprietà width (il che equivale ad impostare il valore auto) e per le proprietà margin-left e margin-right si imposta lo stesso NumeroPixel allora il box figlio, avendo lo stesso margine a destra e a sinistra (pari a NumeroPixel), risulta centrato nell’area del contenuto del box padre (questo metodo è usato per centrare un box di dimensione non predefinita all’interno di un altro box):

Pag. 35 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

•

Se si imposta un valore in pixel per la proprietà width e se margin-left e margin-right assumono il valore auto allora il box figlio viene centrato nell’area del contenuto del box padre (questo metodo è usato per centrare un box di dimensione predefinita all’interno di un altro box):

•

Se si imposta un valore in pixel per la proprietà width e non si imposta né margin-left né margin-right allora il box figlio viene allineato a sinistra nell’area del contenuto del box padre (come se margin-left fosse pari a 0px):

•

Se si imposta un valore in pixel sia per la proprietà width sia per le proprietà margin-left e margin-right allora il box figlio si disporrà considerando solo il margine sinistro (in pratica il margine destro viene ignorato):

3. USO DEL VALORE AUTO Solo per tre proprietà è possibile impostare il valore auto: margin, width, height. L'effetto è quello di lasciar calcolare al browser l'ammontare di ciascuna di esse, adattando quindi il box alle dimensioni della finestra del browser (viewport).

Solo i margini possono avere valori negativi. Ciò non è consentito per padding, bordi, altezza e larghezza.

Pag. 36 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

4. MARGINI VERTICALI E ORIZZONTALI TRA I BOX Per due box adiacenti in senso verticale che abbiano impostato un margine inferiore e uno superiore la distanza non sarà data dalla somma delle due distanze. A prevalere sarà invece la distanza maggiore tra le due. È il meccanismo del cosiddetto margin collapsing.

Come esempio consideriamo l’immagine sottostante, in cui si vedono due box div, aventi rispettivamente un margin di 30px e 60px.

Si vede che il margine verticale complessivo è di 60px, e non di 90px come ci si aspetterebbe sommando i margini dei due box.

Tale meccanismo non si applica ai box adiacenti in senso orizzontale, in altre parole i margini in senso orizzontale si sommano.

Riportiamo il codice dell’esempio appena visto: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prove sul box model</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ padding:0px; margin:0px; } div.tipo1{ border:30px solid blue; padding:30px; margin:30px; background:lime; } div.tipo2{ border:30px solid yellow; padding:30px; margin:60px; background:pink; } </style> </head> <body> <div class="tipo1"> <code> div.1{ border:30px solid blue; padding:30px; margin:30px; background:lime; } </code> </div> <div class="tipo2"> <code> div.2{ border:30px solid yellow; padding:30px; margin:60px; background:pink; } </code> </div> </body> </html> Pag. 37 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

5. ILPOSIZIONAMENTO DEI BOX La parte dei CCS relativa al posizionamento dei box è un argomento complesso. Grazie al posizionamento con i CSS si possono realizzare layout senza tabelle e giungere così alla definitiva e reale separazione tra presentazione e struttura.

Position E’ la proprietà fondamentale per la gestione della posizione dei tag. Si applica a tutti i tag e non è ereditata. I valori possibili di position sono quattro: • Static: E' il valore di default, quello predefinito per tutti i tag non posizionati secondo un altro metodo. Rappresenta la posizione normale che ciascuno di essi occupa nel flusso del documento.

Nei tre casi successivi il box viene posizionato rispetto al box contenitore utilizzando le quattro proprietà top, left, right o bottom (queste proprietà del box sono descritte sotto). I tre casi differiscono proprio per il modo in cui viene individuato il box contenitore, che funge da riferimento per il calcolo delle coordinate.

•

•

•

Absolute: Il box del tag viene rimosso dal flusso del documento e posizionato secondo le coordinate top, left, right o bottom rispetto al box contenitore. Il box contenitore è il primo tag antenato che abbia un posizionamento diverso da static. Se tale tag non esiste il posizionamento avviene in base all'angolo superiore sinistro del viewport del browser (area in cui il browser visualizza il body delle pagine web). Un tag posizionato in modo assoluto scorre insieme al resto del documento.

Fixed: Il box del tag viene rimosso dal flusso del documento e posizionato secondo le coordinate top, left, right o bottom rispetto al box contenitore. Il box contenitore è sempre il viewport del browser. Un box posizionato con fixed non scorre con il resto del documento, ma appunto rimane fisso al suo posto. L'effetto è lo stesso che si può ottenere con l'uso dei frame, in cui una parte della pagina rimane fissa e il resto scorre.

Relative: Il box del tag viene rimosso dal flusso del documento e posizionato secondo le coordinate top, left, right o bottom rispetto al box contenitore. Il box contenitore è il posto che il tag stesso avrebbe occupato nel normale flusso del documento.

Passiamo ora all'analisi delle proprietà che concretamente definiscono dove un tag posizionato va a collocarsi, dal momento che con position stabiliamo solo il come.

Top Il significato di top cambia secondo la modalità di posizionamento. Per i tag posizionati con absolute o fixed definisce la distanza verticale rispetto al bordo superiore del box contenitore. Per i tag posizionati con relative stabilisce invece l'ammontare dello spostamento rispetto al lato superiore della posizione originaria. In questo caso, usando valori positivi il box viene spostato sotto, mentre con valori negativi lo spostamento avviene verso l'alto. I valori possibili di top sono: • un valore numerico con unità di misura • un valore in percentuale La percentuale è relativa all'altezza del box contenitore.

• auto Left Per i tag con posizione assoluta o fissa definisce la distanza dal bordo sinistro del box contenitore. Per quelli con posizione relativa stabilisce lo spostamento rispetto al lato sinistro della posizione originaria. Valori positivi spostano il tag verso destra, valori negativi verso sinistra.

I valori possibili di left sono: • un valore numerico con unità di misura • un valore in percentuale relativo alla larghezza del box contenitore.

• auto Esempi: div {position:absolute;top: 10px; left: 30px;} p {position:absolute;top: 10%;left:20%;} Esistono anche bottom e right, ma per definire la posizione bastano due coordinate. In genere si usano le proprietà top e left.

Visibility Questa proprietà determina se un tag debba essere visibile o nascosto. Si applica a tutti i tag e non è ereditata. La sintassi è: <selettore> {visibility: <valore>;} I valori possibili di visibilità sono: • Visible: il tag è visibile. Valore di default.

• Hidden: il tag è nascosto, ma mantiene il suo posto nel layout dove apparirà come una zona vuota. In ciò è diverso dal valore none della proprietà display utilizzato spesso nel caso di stampa di una pagina web, per nascondere le sezioni prive di contenuti (barra del menu, sezione dei link, ecc.).

Facciamo ora un esempio di realizzazione di una pagina web con layout tableless. Cioè per il layout della pagina web vengono utilizzate delle regole di stile incorporate anziché la solita tabella. Si tratta della pagina pittori.htm del sito DADAUMPA, il sito interamente progettatto e sviluppato a titolo di esempio in questa dispensa.:Come si può vedere il rendering è perfettamente uguale a quello della pagina realizzata con l’HTML puro.

Pag. 38 di 57

I.S.I.S. Kennedy

Appunti di web design

Ecco il codice XHTML+CSS che corrisponde alla pagina web raffigurata sopra: <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Pittori</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="stile.css" type="text/css" /> <style type="text/css"> /* il box seguente è il box contenitore: esso è centrato rispetto al boby */ div#contenitore{ position:relative; width:700px; height:450px; margin-left:auto; margin-right:auto; text-align:center; } /* tutti i box seguenti sono posizionati in base alle coordinate top left */ /* rispetto all’angolo superiore sinistro del box #contenitore */ div#c1{ position:absolute; width:250px; height:150px; line-height:150px; top:0px; left:0px; border-top: 2px ridge white; border-left: 2px ridge white; } div#c2{ position:absolute; width:200px; height:150px; line-height:150px; top:0px; left:250px; border-top: 2px ridge white; border-left: 2px ridge white; border-right: 2px ridge white; } div#c3{ Pag. 39 di 57

Ing. Roberto turetta

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

position:absolute; width:250px; height:150px; line-height:150px; top:0px; left:450px; border-top: 2px ridge white; border-right: 2px ridge white; } div#c4{ position:absolute; width:250px; height:150px; line-height:150px; top:150px; left:0px; border-top: 2px ridge white; border-left: 2px ridge white; } div#c5{ position:absolute; width:200px; height:150px; line-height:150px; top:150px; left:250px; border-top: 2px ridge white; border-left: 2px ridge white; border-right: 2px ridge white; } div#c6{ position:absolute; width:250px; height:150px; line-height:150px; top:150px; left:450px; border-top: 2px ridge white; border-right: 2px ridge white; } div#c7{ position:absolute; width:250px; height:150px; line-height:150px; top:300px; left:0px; border-top: 2px ridge white; border-left: 2px ridge white; border-bottom: 2px ridge white; } div#c8{ position:absolute; width:200px; height:150px; line-height:150px; top:300px; left:250px; border: 2px ridge white; } div#c9{ position:absolute; width:250px; height:150px; line-height:150px; top:300px; left:450px; border-top: 2px ridge white; border-right: 2px ridge white; border-bottom: 2px ridge white; </style> </head> <body> <div class="barra"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </div> <h1>Pittori</h1> <div id="contenitore"> <div id="c1"> <a class="importante" href="autori/pippo.htm">Pippo</a> </div> <div id="c2"> Pag. 40 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<a href="autori/pippo.htm"><img src="immagini/small_pippo.jpg" alt="pippo" /></a> </div> <div id="c3"> <a href="autori/pippo.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Curio">Curiosità</a> </div> <div id="c4"> <a class="importante" href="autori/pluto.htm">Pluto</a> </div> <div id="c5"> <a href="autori/pippo.htm"><img src="immagini/small_pluto.jpg" alt="pluto" /></a> </div> <div id="c6"> <a href="autori/pluto.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Curio">Curiosità</a> </div> <div id="c7"> <a class="importante" href="autori/paperino.htm">Paperino</a> </div> <div id="c8"> <a href="autori/paperino.htm"><img src="immagini/small_paperino.jpg" alt="paperino" /></a> </div> <div id="c9"> <a href="autori/paperino.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Curio">Curiosità</a> </div> </div> </body> </html>

ESEMPI SUL BOX MODEL Di seguito sono riportati alcuni esempi che aiutano a comprendere le proprietà del box model. Negli esempi si fa riferimento principalmente ai tag blocco, cioè a quelli che determinano la struttura della pagina web. Ricordiamoci però che il box model riguarda anche i tag in linea.

Esempio 1 sul box model Consideriamo un tag p figlio di un tag div a sua volta figlio del tag body. In tal caso il box di body conterrà il box di div che a sua volta conterrà il box di p. Nell’esempio i box hanno tutti un bordo e un padding di 30px. Il body ha i margini pari a 30px. Il tag div ha i margini automatici: in questo modo esso viene centrato nel body. Il tag p non ha impostato né width né margin quindi il suo box occupa completamente l’area del contenuto del box div.

Ecco il codice XHTML+CSS della pagina web rappresentata sopra: Pag. 41 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prove sul box model</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ border: 30px solid; padding: 30px; margin: 30px; } div{ width:300px; border:30px solid blue; padding:30px; margin:auto; background:lime; } p{ border:30px solid red; padding:30px; background:yellow; } </style> </head> <body> <div> div div div div div div div div div div div div <p> p p p p p p p p p p p p p p p p p p p p p p p p </p> div div div div div div div div div div div div </div> </body> </html>

Esempio 2 sul box model Consideriamo una pagina XHTML con 6 paragrafi nel body. Il body ha border padding e margin pari a zero. Quindi i paragrafi contenuti nel body (cioè figli del body) hanno un box che può occupare tutta la larghezza del viewport del browser, a meno che non siano impostati le proprietà width e margin nei paragrafi stessi.

Pag. 42 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Ecco il codice XHTML+CSS della pagina web rappresentata sopra: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prove sul box model</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ padding:0px; margin:0px; } .tipo1{ border:30px solid blue; padding-left:30px; padding-right:30px; background-color:yellow; } .tipo2{ border:30px solid blue; padding-left:30px; padding-right:30px; width:520px; background-color:lime; } .tipo3{ border:15px solid blue; padding-left:15px; padding-right:15px; margin-left:auto; margin-right:auto; width:1160px; background-color:aqua; } .tipo4{ border:15px solid blue; padding-left:15px; padding-right:15px; margin-left:30px; margin-right:30px; background-color:white; } .tipo5{ border:0px; padding:0px; margin-left:auto; margin-right:auto; width:1160px; background-color:orange; } </style> </head> <body> <p class="tipo1">lo schermo è largo 1280; <b>non sono i impostati nè i margini nè la larghezza</b>: quindi il box occupa tutta la finestra del browser; il padding è 30px; il bordo è 30 px; quindi l'area del contenuto è 1280 - ( 60 + 60 ) = 1160 px</p> <p class="tipo2">lo schermo è largo 1280; non sono i impostati i margini destro e sinistro; <b>la larghezza è impostata a 480px</b>; il padding è 30px; il bordo è 30 px; la larghezza del box è 520 + 6 0 + 6 0 = 640; quindi il margine destro è pari a 1280 - 640 = 640 px</p> <p class="tipo3">lo schermo è largo 1280; i margini destro e sinistro sono impostati con auto; <b>la larghezza è impostata a 1160 px</b>; il padding e il bordo sono pari a 15px; la larghezza del box è 1160 + 30 + 30 = 1220; quindi i margini destro e sinistro sono pari a ( 1280 - 1220 ) / 2 = 30 px</p> <p class="tipo4">lo schermo è largo 1280; <b>i margini destro e sinistro sono impostati a 30 px</b>; la larghezza non è impostata; il padding e il bordo sono pari a 15px; la larghezza del box è 1280 - 60 = 1220; quindi l'area del contenuto è pari a 1220 - ( 30 + 30 ) = 1160 px</p> <p class="tipo5">lo schermo è largo 1280; i margini destro e sinistro sono impostati con auto; <b>la larghezza è impostata a 1160px</b>; il padding e il bordo sono pari a 0px; quindi i margini destro e sinistro sono pari a( 1280 - 1160 ) / 2 = 60 px</p> </body> </html>

Pag. 43 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Esempio 3 sul box model Ecco un esempio dove si vedono gli effetti del box model sul tag in linea img (lâ&#x20AC;&#x2122;area in giallo attorno alle immagini è il padding).

Appare chiaro come i margini in senso verticale collassano mentre in senso orizzontale si sommano.

La pagina web raffigurata sopra corrisponde al seguente codice XHTML+CSS: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>prove sul box model</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body{ border:10px solid gray; padding:0px; margin:10px; background-color:white; } h3{ width:600px; margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; border:10px solid blue; padding:10px; background:#eecc55; } h4{ margin:10px; border:10px solid blue; padding:0px; background:#eeeeee; } p{ margin-top:10px; margin-bottom:10px; border:10px solid red; padding:10px; background:#66cc99; Pag. 44 di 57

I.S.I.S. Kennedy

Appunti di web design

} img{ margin-top:10px; margin-bottom:10px; margin-left:20px; margin-right:20px; border:3px solid black; padding:20px; background:yellow; } </style> </head> <body> <h3><code> h3{ width:600px; margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; border:10px solid blue; padding:10px; background:#eecc55; } </code></h3> <h4><code> h4{ margin:10px; border:10px solid blue; padding:0px; background:#eeeeee; } </code></h4> <p><code> p{ margin-top:10px; margin-bottom:10px; border:10px solid red; padding:10px; background:#66cc99; } </code></p> <img class="sinistra" src="foto.jpg" alt="foto" /> <img class="centro" src="foto1.jpg" alt="foto1" /> <img class="destra" src="foto.jpg" alt="foto1" /> <div><code> img{ margin-top:10px; margin-bottom:10px; margin-left:20px; margin-right:20px; border:3px solid black; padding:20px; background:yellow; } </code></div> </body> </html>

Pag. 45 di 57

Ing. Roberto turetta

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Elenco delle proprietà CSS bordi margini padding posizionamento caratteri dimensioni liste sfondi testo visibilità

bordi

caratteri

Proprietà border bordercollapse bordercolor borderspacing

borderstyle

border-top

Gestione dei bordi del box Gestione dei margini del box Gestione dello spazio tra contenuto e bordo del box Gestione del posizionamento del box Gestione dei caratteri Gestione della dimensione dei contenuti Gestione delle liste Gestione dei colori e delle immagini di sfondo Gestione delle proprietà del testo Gestione della visibilità degli oggetti

Valori

Proprietà

border-width border-style border-color collapse separate color

font

font-style font-variant font-weight font-size/lineheight font-family caption icon menu message-box small-caption status-bar

fontfamily

<famiglia-caratteri> <famiglia-generica>

<lunghezze> none hidden dotted dashed solid double groove ridge inset outset border-top-width border-top-style border-top-color

border-topborder-color color border-topborder-style style

fontstyle

x-small x-small small medium large x-large xx-large smaller larger <lunghezza> % normal italic oblique

fontvariant

normal small-caps

fontweight

normal bold bolder lighter 100 200 300 400 500 600 700 800 900

font-size

thin

border-top- medium thick width borderwidth

borderbottom

border-left

borderright

<lunghezze> thin medium thick <lunghezze> border-bottomwidth border-bottomstyle border-bottomcolor border-left-width border-left-style border-left-color border-rightwidth border-rightstyle border-rightcolor

dimensioni Valori

Pag. 46 di 57

Proprietà

Valori

auto <lunghezza> height % normal <numero> line-height <lunghezza> % none max-height <lunghezza> % none max-width <lunghezza> % min-height <lunghezza> % min-width <lunghezza> % auto <lunghezza> width %

I.S.I.S. Kennedy

Appunti di web design

liste Proprietà list-style list-styleimage list-styleposition

list-styletype

Valori list-style-type list-styleposition list-style-image none url inside outside none disc circle square decimal decimal-leadingzero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin

margini Proprietà

Valori

margin-top margin-right margin-bottom margin-left auto margin-bottom <lunghezza> % auto margin-left <lunghezza> % auto margin-right <lunghezza> % auto <lunghezza> margin-top %

margin

posizionamento

testo

Proprietà

Proprietà color

Valori

padding-top padding-right padding padding-bottom padding-left padding-bottom <lunghezza> % padding-left <lunghezza> % <lunghezza> padding-right % <lunghezza> padding-top %

Valori

auto % bottom <lunghezza> shape clip auto auto % left <lunghezza> visible hidden overflow scroll auto static relative position absolute fixed auto % right <lunghezza> auto % top <lunghezza> baseline sub super top vertical-align text-top middle bottom text-bottom <lunghezza> % auto z-index numero

sfondi Valori

background

background-color background-image background-repeat backgroundattachment backgroundposition

backgroundattachment

scoll fixed

backgroundcolor

color-rgb color-hex color-name transparent

backgroundimage

url none

backgroundposition

backgroundrepeat

Pag. 47 di 57

top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos repeat repeat-x repeat-y no-repeat

Valori <colore>

ltr rtl letter-spacing normal <lunghezza> left right text-align center justify none underline text-decoration overline line-through blink % text-indent <lunghezza> none <colore> text-shadow <lunghezza> none text-transform capitalize uppercase lowercase normal embed unicode-bidi bidi-override normal pre white-space nowrap normal word-spacing <lunghezza>

direction

visibilità Proprietà

Proprietà

padding Proprietà

Ing. Roberto turetta

clear

cursor

display

Valori left right both none url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help none inline block list-item

left right none static position relative absolute fixed visible visibility hidden collapse

float

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

ESEMPIO DI SITO WEB HTML Di seguito è riportato il codice HTML delle pagine del sito DADAUMPA, di cui abbiamo visto la progettazione nei paragrafi precedenti. home.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Galleria d'arte DadaUmpa - Home</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body background="sfondo.gif" link="green" vlink="green" alink="aqua" text="green" bgcolor="#aaffcc"> <div align="center"><!-- inizio barra di navigazione --> <font face="jokerman" size="6"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </font> </div><!-- fine barra di navigazione --> <div align="center"> <img src="immagini/logo.gif" alt="logo"><br> <b><font face="matisse itc" size="5"> <a href="mailto:info@dadaumpa@libero.it">Scrivici</a> </font></b> </div> </body> </html>

pittori.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Pag. 48 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<html> <head> <title>Galleria d'arte DadaUmpa - Pittori</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body background="sfondo.gif" bgcolor="#aaffcc" link="green" vlink="green" alink="aqua" text="green"> <div align="center"> <font face="jokerman" size="6"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </font> </div> <div align="center"> <h1><font face="gigi" color="#000000">Pittori</font></h1> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td align="center" width="250"> <b><font face="bauhaus 93" size="6"> <a href="autori/pippo.htm">Pippo</a> </font></b> </td> <td align="center" width="200"><a href="autori/pippo.htm"><img src="immagini/small_pippo.jpg" border="0" alt="pippo" ></a></td> <td align="center" width="250"> <font face="bauhaus 93"> <a href="autori/pippo.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Curio">Curiosità</a> </font> </td> </tr> <tr> <td align="center"> <b><font face="bauhaus 93" size="6"> <a href="autori/pluto.htm">Pluto</a> </font></b> </td> <td align="center"><a href="autori/pippo.htm"><img src="immagini/small_pluto.jpg" border="0" alt="pluto"></a></td> <td align="center"> <font face="bauhaus 93"> <a href="autori/pluto.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Curio">Curiosità</a> </font> </td> </tr> <tr> <td align="center"> <b><font face="bauhaus 93" size="6"> <a href="autori/paperino.htm">Paperino</a> </font></b> </td> <td align="center"><a href="autori/paperino.htm"><img src="immagini/small_paperino.jpg" border="0" alt="paperino"></a></td> <td align="center"> <font face="bauhaus 93"> <a href="autori/paperino.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Curio">Curiosità</a> </font> </td> </tr> </table> </div> </body> </html>

Pag. 49 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

galleria.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Galleria d'arte DadaUmpa - Galleria</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body background="sfondo.gif" bgcolor="#aaffcc" link="green" vlink="green" alink="aqua" text="green"> <div align="center"> <font face="jokerman" size="6"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </font> </div> <div align="center"> <h1><font face="gigi" color="#000000">Galleria</font></h1> <table border="1" cellpadding="0" cellspacing="0"> <tr align=â&#x20AC;?centerâ&#x20AC;?> <td width="200"> <font face="bauhaus 93"> <a href="galleria/colline_azzurre.htm">Colline azzurre</a> </font> </td> <td><img src="immagini/small_colline_azzurre.jpg" alt="colline azzurre"></td> <td width="200"> <font face="bauhaus 93"> <a href="galleria/ninfee.htm">Ninfee</a> </font> </td> <td><img src="immagini/small_ninfee.jpg" alt="ninfee"></td> </tr> <tr align="center"> <td> <font face="bauhaus 93"> <a href="galleria/inverno.htm">Inverno</a> </font> </td> <td><img src="immagini/small_inverno.jpg" alt="inverno"></td> <td> <font face="bauhaus 93"> <a href="galleria/tramonto.htm">Tramonto</a> </font> </td> <td><img src="immagini/small_tramonto.jpg" alt="tramonto"></td> </tr> </table> </div> </body> </html>

Pag. 50 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

pippo.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <html> <head> <title>Galleria d'arte DadaUmpa - Pippo </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body background="../sfondo.gif" bgcolor="#aaffcc" link="green" vlink="green" alink="aqua" text="green"> <div align="center"> <font face="jokerman" size="6"> <a href="../home.htm" name="Su">Home</a> | <a href="../pittori.htm">Pittori</a> | <a href="../galleria.htm">Galleria</a> </font> </div> <div align="center"> <h1><font face="gigi" color="#000000">Pippo</font></h1> <table cellspacing="0" cellpadding="0"> <tr> <td width="400" align="center"><font face="bauhaus 93"><a href="#Bio">Biografia</a>&nbsp;&nbsp;<a href="#Ope">Opere</a>&nbsp;&nbsp;<a href="#Curio">Curiosità</a><br><br></font></td> </tr> <tr> <td width="400"> <img src="../immagini/pippo.jpg" alt="pippo" > <h2><font face="gigi" color="#005555"><a name="Bio">Biografia</a> di Pippo</font></h2> <p> <font face="informal roman" size="4"> Questa è la biografia di <b>Pippo & company</b> ecc. ecc.

Questa è la biografia di <b>Pippo & company</b> ecc. ecc.

Questa è la biografia di <b>Pippo & company</b> ecc. ecc.<br> Dice Pippo: <q>la vita è una cosa meravigliosa</q> e noi gli diamo ragione ...

Pag. 51 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

Dice Pippo: <q>la vita è una cosa meravigliosa</q> e noi gli diamo ragione ...

Dice Pippo: <q>la vita è una cosa meravigliosa</q> e noi gli diamo ragione ... </font> </p> <font face="bauhaus 93"><a href="#Su">Torna all'inizio</a></font> <h2><font face="gigi" color="#005555"><a name="Ope">Opere</a> di Pippo</font></h2> <ol> <li><font face="informal roman" size="4">Il tramonto</font></li> <li><font face="informal roman" size="4">Colline azzurre</font></li> <li><font face="informal roman" size="4">Il tramonto</font></li> </ol> <font face="bauhaus 93"><a href="#Su">Torna all'inizio</a></font> <h2><font face="gigi" color="#005555"><a name="Curio">Curiosità </a> su Pippo</font></h2> <ul> <li><font face="informal roman" size="4">non beve solo durante i pasti</font></li> <li><font face="informal roman" size="4">fa raccolta degli ovetti Kinder</font></li> <li><font face="informal roman" size="4">non beve solo durante i pasti</font></li> </ul> <font face="bauhaus 93"><a href="#Su">Torna all'inizio</a></font> </td> </tr> </table> </div> </body> </html>

colline_azzurre.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Galleria d'arte DadaUmpa - Colline azzurre</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body background="../sfondo.gif" bgcolor="#aaffcc" link="green" vlink="green" alink="aqua" text="green"> <div align="center"> <font face="jokerman" size="6"> <a href="../home.htm">Home</a> | <a href="../pittori.htm">Pittori</a> | <a href="../galleria.htm">Galleria</a> </font> </div> <div align="center"> <table cellspacing="0" cellpadding="0"> <tr> <td rowspan="2" width="450"><img border="0" src="../immagini/colline_azzurre.jpg" alt="colline azzurre"></td> <td colspan="2" width="350"> <h1><font face="gigi" color="#000000">Colline azzurre</font></h1> </td> </tr> <tr> <td width="100"> <h2><font face="gigi" color="#005555">Pittore:</font></h2> <h2><font face="gigi" color="#005555">Anno:</font></h2> <h2><font face="gigi" color="#005555">Tecnica:</font></h2> </td> <td width="250"> <h2><font face="gigi" color="#005555"><a href="../autori/pippo.htm">Pippo</a></font></h2> <h2><font face="gigi" color="#005555">1964</font></h2> <h2><font face="gigi" color="#005555">Tempera su tavola</font></h2> </td> </tr> <tr> <td colspan="3" width="800">

Pag. 52 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<h2><font face="gigi" color="#005555">Commenti</font></h2> <p> <font face="informal roman" size="4"> Il quadro esprime la <font color="red"><b>ribellione</b></font> dell'autore nei confronti del conformismo della società.

Il quadro esprime la ribellione dell'autore Il quadro esprime la ribellione dell'autore </font> </p> <p> <font face="informal roman" size="4"> Bè insomma non proprio l'eterna ribellione, Bè insomma non proprio l'eterna ribellione, Bè insomma non proprio l'eterna ribellione, </font> </p> </td> </tr> </table> </div> </body> </html>

nei confronti del conformismo della società. nei confronti del conformismo della società. ecc. ecc.

bensì qualcos'altro... bensì qualcos'altro... bensì qualcos'altro...

CONVERSIONE DA HTML A XHTML+CSS Si riporta di seguito il codice XHTML+CSS del sito DADAUMPA già realizzato in linguaggio HTML. La visualizzazione del sito praticamente non cambia passando da HTML a XHTML+CSS, sia con Explorer sia con Firefox.

Nota: per centrare le tabelle in Explorer si usa text-align:center mentre con Firefox si usa margin:auto

Stile.css /* foglio di stile esterno */ body { background-color: #aaffcc; color: green; font-family: "Bauhaus 93"; background-image:url(sfondo.gif); margin-top: 15px; } div{ text-align:center; /* centra la tabella con explorer!*/ } br{ line-height:1.2; /* interlinea rispetto al size del font*/ } div.barra { font-family: jokerman; font-size: 32px; /* equivale a size=6 */ } p,ul, ol { font-family: "informal roman"; font-size: 18px; /* equivale a size=4 */ } a:link { color: green; } a:visited { color: green; } a:active { color: aqua; } .importante { font-weight: bold; font-size: 32px; /* equivale a size=6 */ } table { border-collapse: collapse;/* equivale a cellspacing=0 */ margin-left: auto; /*centra la tabella nella pagina con mozilla */ margin-right: auto; /*centra la tabella nella pagina con mozilla */ } td { padding: 0px;/* equivale a cellpadding=0 del tag table */ border: white 2px ridge; /* equivale a border=1 del tag table */ text-align: center; /* explorer non eredita la centratura da div, mozilla sì */ /* il font-family è ereditato dal body */ /* con font-size un titolo h nel td verrebbe ulteriormente ingrandito, quindi meglio non usarlo */ } td img { display: block;/*l'immagine è di tipo blocco quando è dentro una cella */ border: none;/*l'immagine è di tipo blocco quando è dentro una cella */ } h1, h2 { font-family: Gigi; } h1 { color: #000000; text-align:center; }

Pag. 53 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

h2 { color: #005555; } .evidenzia{ color:red; font-weight:bold; }

Stile-stampa.css /* Foglio di stile usato solo per la stampa.

Si diversifica dal foglio di stile standard perchè: -tutti i font sono resi uguali ad arial -la barra di navigazione non viene stampata */ body { background-color: #aaffcc; color: green; font-family: arial; background-image: url(sfondo.gif); margin-top: 15px; } div{ text-align: center; /* centra la tabella con explorer!*/ } br{ line-height: 1.2; /* interlinea rispetto al size del font*/ } div.barra { display:none; } p,ul, ol { font-family: arial; font-size: 18px; /* equivale a size=4 */ } a:link { color: green; } a:visited { color: green; } a:active { color: aqua; } .importante { font-weight: bold; font-size: 32px; /* equivale a size=6 */ } table { border-collapse: collapse;/* equivale a cellspacing=0 */ margin-left: auto; /*centra la tabella nella pagina con mozilla */ margin-right: auto; /*centra la tabella nella pagina con mozilla */ } td { padding: 0px;/* equivale a cellpadding=0 del tag table */ border: white 2px ridge; /* equivale a border=1 del tag table */ text-align: center; /* explorer non eredita la centratura da div, mozilla sì */ /* il font-family è ereditato dal body */ /* con font-size un titolo h nel td verrebbe ulteriormente ingrandito, quindi meglio non usarlo */ } td img { display: block;/*l'immagine è di tipo blocco quando è dentro una cella */ border: none;/*l'immagine è di tipo blocco quando è dentro una cella */ } h1, h2 { font-family: arial; } h1 { color: #000000; text-align:center; } h2 { color: #005555; } .evidenzia{ color:red; font-weight:bold; }

Home.htm <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Home </title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="stile.css" type="text/css" /> <!-- CSS incorporato: deve essere scritto dopo LINK --> <style type="text/css"> #corpo{ font-family:matisse itc;

Pag. 54 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

font-size:24px; font-weight:bold; text-align:center; } </style> </head> <body style="overflow: hidden;"> <!-- serve a nascondere la barra di scorrimento verticale con explorer --> <div class="barra"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </div> <div id="corpo"><!-- si osservi l'uso di ID per richiamare la formattazione del div--> <img src="immagini/logo.gif" alt="logo" /><br /> <a href="mailto:info@dadaumpa@libero.it">Scrivici</a> </div> </body> </html>

Galleria.htm <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Galleria</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="stile.css" type="text/css" /> </head> <body style="overflow:hidden;"> <div class="barra"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </div> <div> <h1>Galleria</h1> <table> <tr> <td style="width:200px;"> <a href="galleria/colline_azzurre.htm">Colline azzurre</a> </td> <td> <img src="immagini/small_colline_azzurre.jpg" alt="colline azzurre" /> </td> <td style="width:200px;"> <a href="galleria/ninfee.htm">Ninfee</a> </td> <td> <img src="immagini/small_ninfee.jpg" alt="ninfee" /> </td> </tr> <tr> <td> <a href="galleria/inverno.htm">Inverno</a> </td> <td> <img src="immagini/small_inverno.jpg" alt="inverno" /> </td> <td> <a href="galleria/tramonto.htm">Tramonto</a> </td> <td> <img src="immagini/small_tramonto.jpg" alt="tramonto" /> </td> </tr> </table> </div> </body> </html>

Colline_azzurre.htm <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Colline azzurre</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="../stile.css" type="text/css" /> <style type="text/css"> td { border:none; text-align:left; } h1 { text-align:left; } </style> </head> <body style="overflow:hidden"> <div class="barra"> <a href="../home.htm">Home</a> | <a href="../pittori.htm">Pittori</a> | <a href="../galleria.htm">Galleria</a> </div> <div><br>

Pag. 55 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

<table> <tr> <td rowspan="2" style="width:450px;"> <img src="../immagini/colline_azzurre.jpg" alt="colline azzurre" /> </td> <td colspan="2" style="width:350px;"> <h1>Colline azzurre</h1> </td> </tr> <tr> <td style="width:100px;"> <h2>Pittore:</h2><h2>Anno:</h2><h2>Tecnica:</h2> </td> <td style="width:250px;"> <h2><a href="../autori/pippo.htm">Pippo</a></h2><h2>1964</h2><h2>Tempera su tavola</h2> </td> </tr> <tr> <td colspan="3" style="width:800px;"> <h2>Commenti</h2> <p> Il quadro esprime la <span class="evidenzia">ribellione</span> dell'autore nei confronti del conformismo della società.

Il quadro esprime la ribellione dell'autore nei confronti del conformismo della società.

Il quadro esprime la ribellione dell'autore nei confronti del conformismo della società. ecc. ecc. </p> <p> Bè insomma non proprio l'eterna ribellione, bensì qualcos'altro...

Bè insomma non proprio l'eterna ribellione, bensì qualcos'altro...

Bè insomma non proprio l'eterna ribellione, bensì qualcos'altro... </p> </td> </tr> </table> </div> </body> </html>

Pittori.htm <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Pittori</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="stile.css" type="text/css" /> </head> <body style="overflow:hidden"> <div class="barra"> <a href="home.htm" name="Su">Home</a> | <a href="pittori.htm">Pittori</a> | <a href="galleria.htm">Galleria</a> </div> <div> <h1>Pittori</h1> <table> <tr> <td style="width: 250px"> <a class="importante" href="autori/pippo.htm">Pippo</a> </td> <td style="width: 200px"> <a href="autori/pippo.htm"><img src="immagini/small_pippo.jpg" alt="pippo" /></a> </td> <td style="width: 250px"> <a href="autori/pippo.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pippo.htm#Curio">Curiosità</a> </td> </tr> <tr> <td> <a class="importante" href="autori/pluto.htm">Pluto</a> </td> <td> <a href="autori/pippo.htm"><img src="immagini/small_pluto.jpg" alt="pluto" /></a> </td> <td> <a href="autori/pluto.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/pluto.htm#Curio">Curiosità</a> </td> </tr> <tr> <td> <a class="importante" href="autori/paperino.htm">Paperino</a> </td> <td> <a href="autori/paperino.htm"><img src="immagini/small_paperino.jpg" alt="paperino" /></a> </td> <td> <a href="autori/paperino.htm#Bio">Biografia</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Ope">Opere</a>&nbsp;&nbsp; <a href="autori/paperino.htm#Curio">Curiosità</a> </td>

Pag. 56 di 57

I.S.I.S. Kennedy

Appunti di web design

Ing. Roberto turetta

</tr> </table> </div> </body> </html>

Pippo.htm <!-- autore: Turetta Roberto ITIS KENNEDY Monselice --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Galleria d'arte DadaUmpa - Pippo</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="../stile.css" type="text/css" /> <!-- il foglio di stile successivo viene usato solo per la stampa su carta --> <link rel="stylesheet" href="../stile-stampa.css" type="text/css" media="print" /> <style type="text/css"> td { border:none; text-align:left; } </style> </head> <body> <div class="barra"> <a href="../home.htm" name="Su">Home</a> | <a href="../pittori.htm">Pittori</a> | <a href="../galleria.htm">Galleria</a> </div> <div> <h1>Pippo</h1> <table> <tr> <td style="width:400px;text-align:center;"> <a href="#Bio">Biografia</a>&nbsp;&nbsp;<a href="#Ope">Opere</a>&nbsp;&nbsp;<a href="#Curio">Curiosità</a><br /><br /> </td> </tr> <tr> <td style="width:400px;"> <img src="../immagini/pippo.jpg" alt="pippo" /> <h2><a name="Bio">Biografia</a> di Pippo</h2> <p> Questa è la biografia di <b>Pippo &amp; company</b> ecc. ecc.

Questa è la biografia di <b>Pippo &amp; company</b> ecc. ecc.

Questa è la biografia di <b>Pippo &amp; company</b> ecc. ecc.<br /> Dice Pippo: la vita è una cosa meravigliosa e noi gli diamo ragione ...

Dice Pippo: la vita è una cosa meravigliosa e noi gli diamo ragione ...

Dice Pippo: la vita è una cosa meravigliosa e noi gli diamo ragione </p> <a href="#Su">Torna all'inizio</a> <h2><a name="Ope">Opere</a> di Pippo</h2> <ol> <li>Il tramonto</li> <li>Colline azzurre</li> <li>Il tramonto</li> </ol> <a href="#Su">Torna all'inizio</a> <h2><a name="Curio">Curiosità</a> su Pippo</h2> <ul> <li>non beve solo durante i pasti</li> <li>fa raccolta degli ovetti Kinder</li> <li>non beve solo durante i pasti</li> </ul> <a href="#Su">Torna all'inizio</a> </td> </tr> </table> </div> </body> </html>

Pag. 57 di 57