Dispensa1 2

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
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.

Doc. n. 3
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

Doc. n. 3
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.

Doc. n. 3
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.

Doc. n. 3
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.

Doc. n. 3
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 >

Doc. n. 3
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.

Doc. n. 3
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

Doc. n. 3
ordine:
< HTML >
< head >
< title>Titolo della pagina</title >
</head >
< body >
testo o elementi visualizzati dal browser
</body >
</HTML >

Doc. n. 3
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://

Doc. n. 3
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

Doc. n. 3
<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.

Doc. n. 3
<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)

Doc. n. 3
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

Doc. n. 3
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é

Doc. n. 3
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

Doc. n. 3
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>
<style type="text/css">
@import "foglio_di_stile.css";
</style>
</head>

Doc. n. 3
2- Inserendo, sempre all'interno dell'<head> tra gli specifici tag <style> e </style> le dichiarazioni css.
<html>
<head>
<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 {
[...]

Doc. n. 3
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

Doc. n. 3
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>
</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 {

Doc. n. 3
[...]
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

Doc. n. 3
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 {
[...]

Doc. n. 3
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

Doc. n. 3
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.

Doc. n. 3
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;

Doc. n. 3
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:

poiché 

Doc. n. 3
* 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)

Doc. n. 3
* 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">

Doc. n. 3
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.

Doc. n. 3
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).

Dispensa1 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dispensa1 2

Uploaded by

Copyright:

Available Formats

Doc. n.

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

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

• è relativamente facile da comprendere e da cominciare ad usare

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

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

<B> testo in grassetto </B>

Tag </B> di fine scrittura in grassetto.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

termina hypertext (1965).

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

Principi fondamentali del funzionamento di internet - I protocolli

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

svolta dai protocolli.

fine, e così via.

I nomi dei computer su Internet

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

Domain Name Service (DNS).

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

partire da una stessa base comune.

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

corpo del documento contiene i dati delimitati dai tags.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

adattano più o meno rapidamente a queste trasformazioni.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

COSA SONO I TAGS HTML

tags dal testo normale.

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

Un altro tag comunemente usato è il tag di paragrafo:

Ciò è un paragrafo di testo.

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

LO SCHEMA DEI TAGS

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

< b > fa il testo bold</b >

< i > fa </i > il corsivo

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

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

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

LA STRUTURA DI UNA PAGINA HTML

Una pagina HTML è divisa in due sezioni importanti:

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

delimita una pagina HTML? Utilizzando il tag

< HTML > </HTML >

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

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

< HTML >

< head >

< title>Titolo della pagina</title >

< body >

testo o elementi visualizzati dal browser

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

< a href = "" > </>

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

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

Raimondo Fanale - Rilasciato sotto licenza Creative Commons come indicato

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

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