Sei sulla pagina 1di 31

Doc. n.

3
Tipo doc. dispense pagina 1 di 31

Introduzione

Il significato di HTML è il seguente:

Hyper Text MarkUp Language

HTML è un linguaggio di formattazione ( e non un linguaggio di programmazione ) che ci permette di

descrivere l'aspetto di un documento, di includere informazioni varie ( testo, immagini, suoni, animazioni ) e

di stabilire delle correlazioni coerenti tra queste informazioni grazie ai link ipertestuali. I vantaggi dell'HTML

sono diversi:

• l'approccio è economico, dal momento si può usare un semplice editor testuale

• è relativamente facile da comprendere e da cominciare ad usare

• è un buon sistema per oltrepassare i problemi di incompatibilità di formato tra sistemi differenti

La descrizione (formattazione) di un documento HTML avviene tramite marcatori o tags. Un tag è

delimitato dai segni "<" e ">" all'interno dei quali figurano il nome del tag e i suoi attributi. Ad esempio, il tag

di interruzione della linea di testo è <BR>. Più spesso si usano tags che prevedono un inizio ed una fine, per

delimitare l'area logica all'interno del documento e le proprietà di formattazione dell'elemento contenuto:

Esempio:

Tag <B> inizio di scrittura in grassetto (bold)

<B> testo in grassetto </B>

Tag </B> di fine scrittura in grassetto.

Il risultato all'interno del browser, quindi, della scrittura <B> testo in grassetto </B> sarà

testo in grassetto

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 2 di 31

Breve storia

Il temine markup si riferisce alle annotazioni manuscritte dagli autori su un documento per specificare

alle tipografie come doveva essere presentato e realizzato il documento stesso. Con l'apparizione degli

elaboratori elettronici e dei foto-compositori queste annotazioni venivano inserite all'interno dei documenti in

formato elettronico. Però sorse il problema della compatibilità: ogni formato voleva il proprio linguaggio di

"markup". Quindi all'inizio degli anni 80 la CGA (Graphics Communications Association) mise a punto il

primo linguaggio a marcatori, chiamato GenCode. Allo stesso tempo un comitato di "normalizzazione" ANSI

pubblicò lo standard Generalized Markup Language (GML). Nel dicembre del 1986, i due comitati unendo

gli sforzi definirono lo standard SGML (Standard Generalized Markup Language) accettato dall'ISO

(International Standard Organization) con il numero 8879. Fino al 1990 le principali applicazioni Internet

erano la posta elettronica, listerv, telnet e FTP. Nel 1990 l'università di Mac Gill (Montréal) introdusse

ARCHIE, un software di ricerca FTP per Internet, e sempre nel 1990 l'Università del Minnesota propose

GOPHER

Solo nel 1992, Tim Berners-Lee un fisico del CERN, sviluppò i protocolli del World Wide Web. Creò

quindi l'HTML, da un sottoinsieme di SGML avvalendosi del lavoro di Ted Nelson che furono all'origine del

termina hypertext (1965).

Nel 1993 ci fu l'esplosione di Internet vera e propria grazie anche all'uscita del browser MOSAIC dell'

NCSA.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 3 di 31

Principi fondamentali del funzionamento di internet - I protocolli

Una delle ragioni principali del successo di Internet risiede senza dubbio nell'efficienza, semplicità di uso

e convenienza delle sue basi tecnologiche. Come è noto, nel mondo dell'informatica un ruolo importante è

svolto dal livello logico, il software.

Un linguaggio comune: il protocollo TCP/IP

Il primo problema in ogni processo di comunicazione è naturalmente la definizione di un linguaggio che

sia condiviso tra i diversi attori che comunicano; attori che, nel caso di Internet, sono in primo luogo i

computer. E i computer, come ben si sa, pur usando tutti lo stesso alfabeto - il codice binario - “parlano”

spesso linguaggi differenti ed incompatibili: computer diversi usano sistemi operativi, codici di caratteri e

strutture di dati che possono essere anche molto diversi. Per permettere la comunicazione tra l'uno e l'altro

è necessario definire delle regole condivise da tutti. Questa funzione, nell'ambito della telematica, viene

svolta dai protocolli.

Un protocollo di comunicazione definisce le regole comuni che un computer deve conoscere per

elaborare e inviare i bit attraverso un determinato mezzo di trasmissione fisica ( ad esempio un modem )

verso un altro computer. Un protocollo dunque deve specificare in che modo va codificato il segnale, in che

modo far viaggiare i dati da un nodo all'altro, in che modo assicurarsi che la trasmissione sia andata a buon

fine, e così via.

Nel caso di Internet, che interconnette milioni di computer e di sottoreti, basati su ambienti operativi e

architetture hardware diverse, tali protocolli debbono rispondere a esigenze particolarmente complesse.

I nomi dei computer su Internet

Ricordare le varie sequenze numeriche corrispondenti agli indirizzi dei computer a cui ci si intende

connettere può essere molto difficile, come lo sarebbe dover ricordare a memoria tutti i numeri telefonici dei

nostri amici e conoscenti. Per questo sono nate le agende: se voglio telefonare a Pippo, cerco sulla mia

agenda il suo nome e leggo il suo numero di telefono. Proprio al fine di facilitare l'impiego della rete da parte

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 4 di 31

degli utenti è stato sviluppato un sistema di indirizzamento simbolico, che funziona in modo simile: si chiama

Domain Name Service (DNS).

Attraverso il DNS ogni host di Internet può essere dotato di un nome (domain name), composto da

stringhe di caratteri. Tali stringhe, a differenza dell'indirizzo numerico, possono essere di lunghezza

illimitata. È evidente che per un utente utilizzare dei nomi simbolici è molto più semplice e intuitivo che

maneggiare delle inespressive sequenze di numeri. Ad esempio, all'host 151.100.119.23 corrisponde il

seguente nome: crilet.scu.uniroma1.it.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 5 di 31

SGML

SGML è uno standard aperto che non è legato né ad una piattaforma nè ad un costruttore. I files SGML

sono memorizzati sotto forma di semplice testo ASCII e dunque possono essere utilizzati da qualsiasi

elaboratore elettronico.

Il linguaggio SGML è estremamente pratico per realizzare delle pubblicazioni “a richiesta”: lo scopo è di

poter pubblicare diverse versioni di uno stesso documento ( anche indirizzate a un pubblico eterogeneo ) a

partire da una stessa base comune.

SGML è un linguaggio di descrizione di dati che divide il documento in due parti :

• DTD (Data Type Definition) , una specie di “dizionario” che definisce i tags

• i dati stessi

All'interno del documento quindi sono presenti i tags definiti nel DTD e le relazioni che li uniscono. Il

corpo del documento contiene i dati delimitati dai tags.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 6 di 31

HTML

L'HTML, come abbiamo già detto, non è altro che un'istanza del linguaggio SGML definita da un

particolare DTD. Quindi anche un documento HTML non è altro che un file di testo ASCII che contiene dei

tags HTML. Su una macchina di tipo Unix, un documento HTML porta generalmente l'estensione .html,

mentre sui vecchi pc (legati alla denominazione di files di tipo 8.3 ) l'estensione è storicamente .htm . La

nozione di base da comprendere prima di lanciarsi nella creazione di pagine HTML è che come tutti i

linguaggi "markup", l'HTML non si preoccupa dell'apparenza di un documento, ma solo della sua struttura.

Ogni browser World Wide Web rappresenterà diversamente gli oggetti HTML ( ad esempio la linea

orizzontale o il titolo ). L'HTML non imporrà mai un font di caratteri, una dimensione dei caratteri o una

larghezza dello schermo. Sarà scelta del browser e dell'utente navigatore stabilire queste proprietà in base

al suo stato o esigenze attuali. Bisognerà quindi sempre stare attenti ad utilizzare il linguaggio standard e

magari anche provare le pagine HTML con più browser ( quando non si possiedono strumenti di aiuto per il

controllo automatico ).

Un'altra nozione da tenere sempre a mente è che l'HTML è in costante evoluzione mentre i browser si

adattano più o meno rapidamente a queste trasformazioni.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 7 di 31

Capitolo I - HTML

Un po' di teoria

COSA SONO I TAGS HTML

I tags dell'HTML sono istruzioni di testo formattato che generano gli indicatori (i markers) affinchè il

browser web interpreti correttamente l'impaginazione del testo o più genericamente delle risorse utilizzate

nella pagina HTML. Questi “indicatori” dicono al web browser cosa e come visualizzare le risorse (testo,

immagini, applet, filmati flash...) sulla pagina. I tags sono disposti “intorno” alle risorse che vogliamo

visualizzare.

L' HTML ha un set intero di tags (esattamente come l'alfabeto ha un set o insieme di lettere) che il web

deisgner può usare per costruire le pagine web. Come detto precedentemente, i tags hanno una struttura

specifica congegnata in modo che quando il browser sta leggendo una pagina HTML riesca a distingurere i

tags dal testo normale.

I tags sono tipicamente parole o abbreviazioni di parole inglesi corrispondenti alla formattazione voluta.

Così per esempio: per rendere il testo GRASSETTO, l' HTML ha il tag 'GRASSETTO ' (BOLD in inglese)

che sarà:

<b> questo testo sarà in grassetto</b >

Un altro tag comunemente usato è il tag di paragrafo:

<p>

Ciò è un paragrafo di testo.

</p >

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 8 di 31

LO SCHEMA DEI TAGS

Potete notare che i tags HTML delimitano l'area logica della pagina con degli accoppiamenti di apertura

(< nome del tag >) e di chiusura (< /nome del tag >). L'unica differenza fra l'apertura e la chiusura è che il

tag di chiusura ha uno slash ( / ) supplementare al nome del tag stesso.

Alcuni esempi:

< b > fa il testo bold</b >

< i > fa </i > il corsivo

< h1 > dice al browser a che questo testo è molto importante - il browser fa solitamente questo : <h1>

realmente grande </h1 > , ovvero scrive il testo molto grande.

< table > genera una tabella HTML – si pensi ad una </table > tabella di un foglio di calcolo.

Ma abbiamo detto che i tags non si usano solo per la formattazione del testo, ma anche per

l'impaginazione di immagini, animazioni, video, audio e anche programmi multimediali.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 9 di 31

LA STRUTURA DI UNA PAGINA HTML

Una pagina HTML è divisa in due sezioni importanti:

1. Il corpo

La sezione del corpo (< body >): questa sezione contiene tutto ciò che viene visualizzato sulla pagina

web quando il visitatore la apre con un browser. Stiamo parlando del testo reale, immagini, movies

istantanei e così via. Questo naturalmente significa che i tags utilizzati sono comunque lì a formattare ed

impaginare, ma non vengono visualizzati sulla pagina da cui la distinzionetra testo “reale” e testo di

“impaginazione”.

2. La testa

(< head >) la sezione testa: contiene informazioni sulla pagina che non vengono visualizzate

dall'utente (tranne il titolo della pagina). Tuttavia ha influenza su come la pagina verrà visualizzata.

Noterete che sia la testa che le sezioni del corpo di una pagina sono contrassegnati nel con i loro tags:

(<head> < /head >) e (< body > </body >).

Se il tag del corpo genera il corpo di un pagina e il tag di “testa” delimita la testa di una pagina, come si

delimita una pagina HTML? Utilizzando il tag

< HTML > </HTML >

Ogni pagina DEVE cominciare con il tag <HTML> e chiudersi con </HTML>, altrimenti il web browser

(programmi come Internet Explorer) non potranno visualizzare correttamente la pagina. Biogna avere anche

i tags di testa e corpo. Tutte gli altri tag sono facoltativi.

Quindi una pagina HTML corretta, completa, anche se scarna, deve avere questi tags ed in questo

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 10 di 31

ordine:

< HTML >

< head >

< title>Titolo della pagina</title >

</head >

< body >

testo o elementi visualizzati dal browser

</body >

</HTML >

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 11 di 31

IL PRIMO SITO

Un sito web è un insieme di pagine html referenziate da qualcosa denominata “collegamento”. In HTML

esiste un tag specifico, che nella sua forma essenziale appare così:

< a href = "" > </>

Di seguito un esempio di collegamento completato con una “destinazione” (URL, Unified Resource

Locator):

< a href = "http://www.tdrynx.com" > clicca qui per visitare il sito tdrynx </a >

Ogni volta che cliccate sopra un collegamento il browser richiede al server la risorsa indicata la quale,

nel caso di pagina web, verrà visualizzata sempre all'interno del vostro browser. Il tag di collegamento (il

famoso “LINK”) è il più importante del web: fa di internet la risorsa che conosciamo oggi.

Nel suddetto esempio, vediamo che la il tag di collegamento punta al sito web www.tdrynx.com ed il

testo che è visualizzato sulla pagina è “clicca qui per visitare il sito tdrynx”. Così se desideraste creare un

collegamento al sito di yahoo, dovrete sostituire href = "http://www.tdrynx.com" con href =

"http://www.yahoo.com".

Come gli altri tag, il tag di collegamento ha una apertura ( <a href= "http://www.tdrynx.com.com"> ) ed

una chisura (</a>). I tags di collegamento sono un po' più complessi di quelli che abbiamo visto fino ad

adesso.

Si può notare che nel collegamento d'esempio compare una dicitura:

HTTP://

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 12 di 31

Questo testo dice al browser a che il collegamento punta ad una risorsa di tipo HTTP, quindi una pagina

web. I collegamenti possono puntare ad altre risorse: filmati, files pdf, etc etc

I TAG PRINCIPALI

In questo paragrafo vediamo un elenco dei principali tags utilizzati nel linguaggio html. L'elenco non è

ovviamente completo, ma esaustivo per la composizione di pagine di base

Tag di base

<html>...</html> » Definisce un documento Html.

<head>...</head> » Definisce le informazione di intestazione come il titolo ed i meta-tag.

<title>...</title> » Definisce il titolo che appare alla cima della finestra di browser.

<body>...</body> » Definisce e delimita l'area del corpo di un documento HTML.

Corpo di un documento HTML

<body>...</body> » Il corpo del documento Html.

<body bgcolor="#??????"> » Colore di sfondo del documento.

<body background="nomefile.xxx"> » Immagine come sfondo in formto gif, jpg o png

<body text="#??????"> » Colore del testo del documento.

<body link="#??????"> » Colore dei collegamenti ipertestuali.

<body alink="#??????"> » Colore dei collegamenti ipertestuali attivi.

<body vlink="#??????"> » Colore dei collegamenti ipertestuali già visitati.

Formattazione

<p>...</p> » Definisce un nuovo paragrafo.

<p align=”right/left/center”> » l'attributo align allinea un paragrafo a destra,sinistra o al centro

<br> » Inserisce una interruzione di riga.

Testo

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 13 di 31

<pre>...</pre> » Testo preformattato.

<h1>...</h1> a <h6>...</h6> » Titoli.

<b>...</b> » Testo in grassetto.

<i>...</i> » Testo in corsivo.

<cite>...</cite> » Citazione, generalmente in corsivo.

<em>...</em> » Enfatizzare una parola (grassetto o corsivo).

<strong>...</strong> » Enfatizzare una parola (grassetto o corsivo).

<sub>...</sub> » Testo apice.

<sup>...</sup> » Testo pedice

Caratteri

<font>...</font> » Attributi dei caratteri.

<font size="value">...</font> » Grandezza dei caratteri con valori da 1 (più piccolo) a 7 (più grande).

<font face="name">...</font> » Tipo di caratteri (font) scelti tra quelli della famiglia dei caratteri supportati dai

browsers e dai sistemi operativi

<font color="#??????">...</font> » Colore dei caratteri.

Il tag <font> è sconsigliato nell'attuale specifica HTML, che invece predilige e consiglia l'uso dei fogli si stile

CSS

Elenchi

<ol>...</ol> » Elenco ordinato.

<li>...</li> » Precede ogni voce dell'elenco aggiungendo un numero.

<ul>...</ul> » Elenco non ordinato.

Collegamenti

<a>...</a> » Origine e destinazione di un collegamento ipertestuale.

<a href="url">...</a> » Collegamento ipertestuale.

<a href="#name">...</a> » Collegamento ad un'ancora nel documento stesso.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 14 di 31

<a href="URL#name">...</a> » Collegamento ad un'ancora in un altro documento.

<a name="name">...</a> » Ancora in un documento.

<a href="mailto:e-mail">...</a> » Collegamento ad una e-mail. Sfruttando i tipi MIME, il browser “chiederà” al

sistema operativo di avviare l'applicazione predefinit aper l'invio/ricezione delle email (un mailer quale

Outlook Express, MozillaThunderbird, Eudora, etc...)

Tabelle

<table>...</table> » Delimita una tabella.

<table border="pixel"> » Attributo della grandezza del bordo della tabella.

<table cellspacing="pixel"> » Spazio tra le celle di una tabella.

<table cellpadding="pixel"> » Spazio tra il bordo e il contenuto delle celle di una tabella.

<table height="pixel" or "%"> » Attributo dell' altezza di una tabella.

<table width="pixel" or "%"> » Attributo della larghezza di una tabella.

<td>...</td> » Celle di una tabella.

<td colspan="colonne"> » Estende la cella di tante colonne quante definite nel valore “colonne”

<td rowspan="righe"> » Estende la cella di tante righe quate definite nel valore “righe”

<th>...</th> » riga d'intestazione della tabella

<tr>...</tr> » righe di una tabella.

<tr align="?"> o <td align="?"> » Allinea il contenuto di una riga/cella a destra, sinistra o a centro. (il valore

che l'attributo può assumere è scelto tra right, left e center)

<tr valign="?"> o <td valign="?"> » Allinea verticalemente il contenuto di una riga/cella al centro, sotto o

sopra (il valore che l'attributo può assumere è scelto tra middle, bottom e top)

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 15 di 31

Capitolo II – CSS

il linguaggio si evolve

COSA SONO I CSS

I fogli di stile a cascata (dall'inglese CSS Cascading Style Sheet) sono il linguaggio definito dal W3C

(World Wide Web Consortium) per definire l'aspetto delle pagine HTML e XHTML. La loro creazione,

avvenuta nel 1996 si è resa necessaria per separare i contenuti dalla formattazione e imporre una

programmazione più chiara e facile da utilizzare, sia per l'autore che per l'utente.

Sappiamo Una pagina web è formata fondamentalmente da due elementi: i contenuti veri e propri che la

pagina intende fornire e la formattazione ovvero l'aspetto con cui i contenuti saranno mostrati all'utente.

Il linguaggio HTML (e la sua evoluzione XHTML) ha come scopo quello di gestire i contenuti,

specificandone la struttura attraverso tag diversi. Ogni tag (ad esempio <h1> o <p>) specifica un diverso

ruolo dei contenuti che contrassegna (quindi il tag <h1> definirà un'importanza maggiore del tag <p>).

I browser che interpretano il codice (X)HTML mostrano all'utente formattazioni predefinite per ogni tag

che incontrano (così ad esempio i contenuti marcati con il tag <h1> avranno carattere 18pt e i contenuti

marcati da <p> avranno carattere 12pt). Tuttavia questa formattazione è completamente sotto il controllo

dell'utente, che può modificarla nelle Impostazioni del suo browser.

Per permettere agli autori di definire l'aspetto delle loro pagine, dal 1993 in poi Netscape Navigator ed

Internet Explorer, i due browser che si disputavano gli utenti nella nota guerra dei browser, presentarono tag

proprietari, ovvero non aderenti agli standard e non compatibili con i browser concorrenti. Un esempio di

questi tag è <font>.

Questi tag proprietari di formattazione erano l'unico modo per gli autori di definire la formattazione e così

il loro uso è diventato massiccio. Tuttavia questi tag presentano tre problemi:

1. Il primo problema è costituito dalla lunghezza di questi tag. Se confrontata con una pagina che

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 16 di 31

adotta il linguaggio CSS, una pagina che non lo adotta è in genere più pesante (in termini di bit) in un

rapporto che spesso raggiunge il 200%. Inoltre le istruzioni CSS possono essere raccolte in un file esterno

che rimane memorizzato nella cache del browser, riducendo ulteriormente la quantità di dati che i server

devono trasmettere.

2. Il secondo problema risiede nella mancanza di logica del codice (X)HTML. Un codice non aderente

agli standard, ridondante e confuso comporta infatti molto lavoro aggiuntivo per i browser, che devono

cercare di correggere ed interpretare (quando possibile) direttive arbitrarie.

3. Il terzo problema comincia a diventare sempre più rilevante ed è la mancanza di compatibilità con i

nuovi computer palmari e gli smartphone. Queste pagine infatti sono progettate per schermi con risoluzione

minima 800x600 pixel. I palmari, che hanno una risoluzione inferiore ed una forma dello schermo ben

diversa dal rapporto 4:3 dei monitor per computer, si trovano quindi impossibilitati a visualizzare

correttamente la pagina e l'utente dovrà tentare di "decodificarla", operazione spesso molto scomoda.

Si tende ad evidenziare anche un ulteriore questione, nelle pagine web non standard, ovvero l'uso del

tag <table> (le tabelle) per realizzare l'impaginazione delle pagine web. Questo viene considerato dai puristi

come inaccettabile in quanto le tabelle sono pensate per impaginare dati tabulari e non layout web. In realtà

l'unico svantaggio serio di questo sistema è l'incredibile peso delle pagine, come già indicato al problema 1.

CSS 1

Per tentare di risolvere questa situazione, nel 1996 il W3C emanò le specifiche CSS 1. I CSS 1 erano un

interessante sistema per separare contenuto da formattazione. La base di questo lingaggio, infatti

consisteva nel fatto che il contenuto sarebbe stato sempre definito dal codice (X)HTML, mentre la

formattazione si sarebbe trasferito su un codice completamente separato, il CSS appunto. I richiami tra i

due codici venivano effettuati tramite due particolari attributi: class e ID. Queste specifiche:

1. Erano un'efficace soluzione al primo problema (escludendo la questione del tag <table>) perché

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 17 di 31

riducevano notevolmente le dimensioni della pagine.

2. Risolvevano il secondo in modo parziale perché consentivano al codice (X)HTML di ritornare in gran

parte semplice ed essenziale, ma presentavano qualche mancanza che costringeva a ricorrere ai tag

HTML.

3. Non prendevano però in considerazione il terzo, dato che nel 1996 i PDA erano scarsamente diffusi.

I CSS 1 sviluppavano un'idea semplice ma efficace, ma nonostante le loro grandi potenzialità non

ebbero successo a causa della mancanza di browser in grado di supportarli.

CSS 2 e CSS 2.1

Per includere nuove funzionalità e rendere i CSS un linguaggio ben supportato, nel 1998 il W3C emanò

le specifiche CSS 2 e nel 2004 le specifiche CSS 2.1. I CSS 2 sono la naturale evoluzione dei CSS 1 ed

offrono potenti soluzioni per risolvere soprattutto il problema tre, con la possibilità di creare fogli di stile

separati per i dispositivi portatili. Anche il problema due è ormai pienamente risolvibile, scrivendo una

pagina (X)HTML esclusivamente indirizzata alla struttura e ai contenuti e manovrandola poi esclusivamente

con i CSS per impaginarla.

Con la comparsa di Internet Explorer 5, di Firefox e di Opera 7, i CSS 2 hanno potuto avvalersi di

browser in grado di interpretarli e sono quindi entrati a far parte del codice di molti siti web.

CSS 3

Le specifiche CSS 3 non sono state ancora rilasciate, sebbene il W3C pubblichi costantemente

informazioni sulle novità in fase di sviluppo. I CSS 3 dovrebbero presentare soluzioni per la correzione di

alcuni bachi di interpretazione di Internet Explorer, migliorie nella gestione degli sfondi e una soluzione per

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 18 di 31

realizzare i bordi arrotondati la cui realizzazione affligge i webdesigner da tempo.

Il codice CSS

Inserire il codice

L'inserimento di codice CSS nelle pagine web può essere effettuato in due modi:

1- Inserendo nel tag <head> della pagina un collegamento ad un foglio di stile esterno, cioè un file

contrassegnato dall'estensione .css come negli esempi seguenti:

<html>

<head>

<title>Esempio</title>

<link rel="stylesheet" type="text/css" href="foglio_di_stile.css">

</head>

<html>

<head>

<title>Esempio</title>

<style type="text/css">

@import "foglio_di_stile.css";

</style>

</head>

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 19 di 31

2- Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css.

<html>

<head>

<title>Esempio</title>

<style type="text/css">

codice css

</style>

</head>

Una regola CSS

Le regole CSS sono strutturate secondo il seguente schema (gli spazi sono tutti facoltativi):

selettore {

proprietà1 : valore1;

proprietà2 : valore2, valore3;

Selettori di tipo

I selettori di tipo applicano la regola a tutti gli elementi della pagina del tipo determinato. Esempi:

body {

[...]

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 20 di 31

oppure

p{

[...]

Classi

Le classi applicano la regola a tutti gli elementi della pagina che presentano la proprietà

class="nome_classe". La sintassi CSS è la seguente:

.nome_classe {

[...]

Identificatori

Gli identificatori (comunemente ID): applicano la regola a quell'elemento della pagina che presenta la

proprietà id="nome_identificatore". Solo un elemento in tutta la pagina può corrispondere ad un

identificatore. La sintassi CSS è la seguente:

#nome_identificatore {

[...]

Pseudoclassi

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 21 di 31

Le pseudoclassi identificano elementi in base alle loro proprietà.

Es 1: first-child individua un elemento solo se è il primo figlio dell'elemento padre. Così quindi

div:first-child {

[...]

individuerà nel codice X(HTML) sottostante solo il primo paragrafo.

<body>

<div>Lorem ipsum</div>

<div>Lorem ipsum</div>

<div>Lorem ipsum</div>

</body>

Es 2: link e visited si applicano ai collegamenti. La prima identifica i collegamenti non visitati, la

seconda quelli visitati. La sintassi CSS è:

a:link {

[...]

Es 3: active, focus e hover identificano gli elementi solo in particolari condizioni, la prima se l'elemento

è attivo, la seconda se è selezionato, la terza se il puntatore è sopra di lui. Quindi

p:hover {

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 22 di 31

[...]

si applicherà solo se il puntatore del mouse andrà sopra un paragrafo e solo per il tempo che vi rimarrà.

Es 4: lang si utilizza per identificare gli elementi di una certa lingua ma il suo supporto è esiguo.

Pseudoelementi

Gli pseudoelementi identificano solo una parte di un elemento, senza la necessità di utilizzare la

marcatura (X)HTML.

Es 5: first-line individua solo la prima linea di un paragrafo. Se la finestra del browser cambia

dimensione di adatterà automaticamente alla nuova dimensione della linea. La sintassi CSS è la seguente:

p:first-line {

[...]

Es 6: first-letter individua solo il primo carattere di un elemento.

Es 7: before e after sono due pseudoclassi utilizzate nella creazione dei contenuti generati. Non

individuano un elemento, ma una posizione dove creare i contenuti. Sono poco utilizzate, dato il mancato

supporto di Internet Explorer.

Selettore di discendenza, figlio e fratello

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 23 di 31

Identificano solamente gli elementi che si trovino in una particolare condizione di discendenza nella

struttura (X)HTML della pagina.

* Il selettore di discendenza identifica solo gli elementi contenuti in altri elementi. Così

p span {

[...]

identifica solo gli elementi <span> contenuti in elementi <p>.

* Il selettore figlio identifica invece solo gli elementi che siano contenuti direttamente nell'elemento

padre. Così

div > p {

[...]

individua solo i <p> contenuti direttamenti in un <div>.

* Il selettore fratello identifica solo il primo elemento che abbia lo stesso grado di parentela di un altro.

Così

h1 + p {

[...]

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 24 di 31

individua solo il primo <p> fratello di <h1>

Selettore di attributi

Il selettore di attributi permette, tramite la sintassi che segue, di identificare elementi (X)HTML in base ai

loro attributi.

a[title=Esempio]{

[...]

Questa regola si applica solo agli elementi <a> che presentano l'attributo title="Esempio". I selettori di

attributi sono molti e permetterebbero un controllo eccellente della pagina, ma Internet Explorer non li

supporta ed il loro uso è quindi molto limitato.

Proprietà

Le proprietà CSS sono molto numerose, circa 60. Le più utilizzate sono:

* background. Definisce lo sfondo di un elemento. È la somma delle proprietà più specifiche

background-attachment, background-color, background-image, background-position e background-repeat.

* border. Definisce il bordo di un elemento. È la somma delle proprietà più specifiche border-color,

border-style e border-width.

* color. Definisce il colore del testo di un elemento. Per definire lo sfondo si utilizza la proprietà

background.

* float. Questa proprietà definisce un blocco flottante, ovvero che permette la disposizione di altri

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 25 di 31

elementi ai suoi lati.

* font. Definisce le proprietà del carattere. È la somma di proprietà più specifiche tra cui font-family,

font-size e font-weight.

* margin e padding. Definiscono lo spazio circostante gli elementi. La prima lo spazio esterno ai bordi,

la seconda quello interno.

* text-align. Definisce l'allineamento del testo.

Valori

Se non specificata, una proprietà assume i valori predefiniti di ogni browser, altrimenti può assumere uno

dei seguenti:

* inherit

* auto

* numero

* percentuale

* colore

* URI

* font

* altri valori tipici di ogni proprietà

La stringa inherit specifica che la proprietà deve ereditare il valore dagli elementi da cui l'elemento

discende.

La stringa auto indica che il browser deve utilizzare il suo valore di default.

Se i numeri sono contraddistinti da un'unità di misura è necessario che tale unità sia espressa (tranne

che nel caso dello zero). Tra il numero e l'unità non devono esserci spazi, come nell'esempio che segue.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 26 di 31

p{

margin : 5px;

padding: 0;

I colori possono essere indicati con più di un sistema. Ad esempio il colore arancione può essere indicato

con

#ff6600

#f60

rgb(255,102,0)

rgb(100%,40%,0%)

L'URL viene indicato nelle forme

url(http://esempio.it/file.html)

url("http://esempio.it/file.html")

I CSS permettono di indicare nella proprietà font-family più di un font. In questo modo il browser utilizzerà

il primo che troverà installato sul sistema operativo. La dichiarazione utilizza questa sintassi:

p{

font-family : Arial, Verdana, sans-serif;

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 27 di 31

Browser e CSS

Il supporto completo e corretto delle specifiche CSS non è offerto da nessun browser attuale. Tuttavia

esistono browser che si avvicinano molto a questo risulatato ed altri che invece ne sono molto lontani. La

lista che segue è di motori di rendering perché a loro è assegnato il compito di formattare la pagina secondo

le istruzioni CSS.

* Trident (Internet Explorer e AOL Browser): Internet Explorer è attualmente il browser più diffuso e il

suo supporto molto scarso dei CSS è probabilmente il maggior freno al loro sviluppo. Explorer presenta

infatti molti bachi nella formattazione delle pagine, che le rendono diverse da quelle ottenute con altri

browser. In aggiunta ai bachi, Explorer non supporta assolutamente alcune porzioni delle specifiche CSS 2.

Le mancanze più gravi sono l'assenza di supporto per i contenuti generati e per il selettore di attributo. Gli

unici strumenti a disposizione dei web designer sono i commenti condizionali, una particolare funzionalità di

Explorer che consente di inviare istruzioni solo a questo browser. La sintassi dei commenti condizionali è la

seguente:

<!--[if IE]>

codice esclusivamente per Internet Explorer

<![endif]-->

poiché <!-- introduce di norma un commento, i browser diversi da Explorer 5.0 o superiori non

interpretano il codice. I commenti condizionali permettono di specificare un foglio di stile specifico per

Internet Explorer nel modo che segue:

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="foglio_di_stile_per_IE.css">

<![endif]-->

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 28 di 31

* Gecko (Firefox e Netscape): Gecko ha un ottimo supporto dei CSS 1 e 2 ed è per questo spesso

utilizzato nella verifica della resa delle pagine web.

* Presto (Opera): anche Presto offre un ottimo supporto dei CSS 1 e 2. Opera offre inoltre un'opzione

che permette all'utente di disattivare i fogli di stile o usarne di propri.

* KHTML (Safari e Konqueror): KHTML è attualmente il motore che offre il maggior supporto ai CSS,

offrendo una parziale interpretazione anche dei CSS 3.

CSS sui diversi dispositivi

Una utilissima funzione dei CSS è la possibilità di essere applicati solo sui dispositivi (media) specificati

dall'autore. La sintassi (X)HTML da utilizzare è la seguente.

<link rel="stylesheet" type="text/css" href="foglio.css" media="screen">

Il codice precedente associa il foglio di stile solo (in teoria) ai browser standard per computer desktop e

portatili. I valori dell'attributo media sono i seguenti:

* screen (desktop e laptop)

* handheld (PDA e smartphone)

* print (stampanti)

* braille (browser braille)

* embossed (stampanti braille)

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 29 di 31

* projection (proiezioni)

* speech o aural (sintetizzatori vocali)

* tty (telescriventi)

* tv (televisioni)

* all (tutti i dispositivi)

Sebbene il numero dei dispositivi gestibili tramite CSS sia notevole, soltanto i primi tre sono supportati in

maniera sufficiente. Il media screen è quello standard cui si fa riferimento. Il media handheld è specifico per

i palmari, ma alcuni browser per palmari tentano, spesso con scarso successo, di interpretare anche i fogli

marcati con screen, per cui si preferisce in genere marcare con handheld sia il foglio per lo schermo che

quello per il palmare e poi usare quest'ultimo per sovrascrivere le istruzioni del primo. Il media print codifica

la pagina per la stampa, è supportato discretamente. Un supporto completo è garantito da Opera.

Fogli di stile preferiti e alternativi

Come descritto, ad ogni pagina si possono collegare più fogli di stile. Tuttavia è anche possibile far

scegliere all'utente quali applicare. Per farlo si definiscono innanzitutto i fogli di stile permanenti, cioè non

disattivabili, secondo la sintassi già vista. Poi si definiscono i fogli preferiti, cioè attivi al caricamento della

pagina, ma disattivabili, aggiungendo l'attributo <title> come nell'esempio che segue:

<link rel="stylesheet" type="text/css" href="foglio_preferito.css" title="Esempio1">

A questo punto possiamo specificare fogli di stile alternativi cioè non attivi al caricamento, ma attivabili

dall'utente, come nell'esempio che segue:

<link rel="alternate stylesheet" type="text/css" href="foglio_alternativo.css" title="Esempio2">

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 30 di 31

Per attivare e disattivare i fogli di stile l'utente può ricorrere all'apposito menu del suo browser, tuttavia

Internet Explorer non offre questa possibilità quindi è necessario creare uno script Javascript che svolga la

funzione di sostituire i fogli. Il codice è stato pubblicato la prima volta su (EN) www.alistapart.com ed è ora

comunemente utilizzato. Tuttavia se questo script è facile da mettere in opera per gli sviluppatori, richiede

un browser moderno con un buon supporto del DOM, oltre che avere attivati sia Javascript e i cookie. Un

sistema più complesso ma molto più robusto può essere uno script lato server come PHP. Un esempio è

disponibile sempre sullo stesso sito.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato


Doc. n. 3
Tipo doc. dispense pagina 31 di 31

Creative Commons

Attribuzione - Non Commerciale - Condividi allo stesso modo 2.0 Italia


Tu sei libero:
• di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico, rappresentare, eseguire o
recitare l'opera
• di creare opere derivate
Alle seguenti condizioni:
Attribuzione. Devi riconoscere il contributo dell'autore
originario.

Non commerciale. Non puoi usare quest’opera per


scopi commerciali.

Condividi allo stesso modo. Se alteri, trasformi o


sviluppi quest’opera, puoi distribuire l’opera risultante
solo per mezzo di una licenza identica a questa.

• In occasione di ogni atto di riutilizzazione o distribuzione, devi chiarire agli altri i termini della licenza
di quest’opera.
• Se ottieni il permesso dal titolare del diritto d'autore, è possibile rinunciare ad ognuna di queste
condizioni.

Le tue utilizzazioni libere e gli altri diritti non sono in nessun modo limitati da quanto sopra
Questo è un riassunto in linguaggio accessibile a tutti del Codice Legale (la licenza integrale).

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato