HTML e CSS

corso base

Autore: Sebastiano Maugeri

 Internet
• È la principale rete mondiale di computer ad
accesso pubblico
• Utilizza un protocollo di comunicazione
denominato TCP/IP, indipendente da
specifiche hardware e software proprietarie.
• Il protocollo TCP/IP è diviso in cinque livelli
(Applicazione, Trasporto, Rete, Collegamento e
Fisico)
 Indirizzi IP
• Ad ogni computer collegato alla rete viene
associato un indirizzo IP, una «targa» che
identifica univocamente il computer sulla rete.
• I vari livelli del protocollo TCP/IP permettono
quindi lo scambio di informazioni tra i computer
presenti sulla rete.
• Il livello di applicazione permette, tra le altre
cose, la consultazione delle pagine web gestendo
le sessioni di lavoro tra il browser ed il server
web.
 Domini Internet e DNS
• Gli indirizzi IP sono difficili da ricordare e
identificano al più una sola macchina sulla rete.
• Su una singola macchina possono essere presenti
centinaia di siti web.
• Per superare queste limitazioni è stato creato un
meccanismo di traduzione che, partendo da un
nome a dominio, restituisce l’indirizzo IP ad esso
associato.
• Questo meccanismo è denominato Domain Name
System.
 Livelli dei nomi a dominio
• Prendiamo ad esempio il dominio:
www.nomesito.it
– www.nomesito.it è un dominio di terzo livello.
– nomesito.it è un dominio di secondo livello.
– .it è il dominio di primo livello
• Di norma noi registriamo domini di secondo
livello.
• I domini possono essere geografici (.it, .us,
etc.) o globali (.com, .net, .org).
 Client / Server
• Client: computer o applicazione che richiede un
determinato servizio.
• Server: computer che offre uno o più servizi.

Un programma di Posta Elettronica come Outlook è

un client perché si collega ad un server di posta che
gli permette di scaricare i messaggi ricevuti nella
propria casella di posta.
Alla stessa maniera un browser (Internet Explorer,
Chrome, etc.) è un client perché si collega ad un
server web per scaricare delle pagine HTML.
 Il protocollo http
• Il protocollo http permette il trasferimento
delle pagine html da un server web ad un
client web (browser).
• http = hyper text transfer protocol
• È un protocollo stateless. Ad ogni richiesta del
client corrisponde una risposta del server, ma
il server non è in grado di mantenere lo stato
tra una richiesta ed un’altra.
 Il protocollo https
• Il protocollo https permette il trasferimento delle
pagine html da un server web ad un client (browser).
• https: hyper text transfer protocol over SSL (Secure
Socket Layer).

Rispetto al protocollo http, tutte le informazioni che

viaggiano sulla rete vengono trasmesse utilizzando un
meccanismo di crittografia che impedisce la
visualizzazione in chiaro delle informazioni trasmesse a
computer che non siano il server ed il client.
 Il protocollo ftp
• Il protocollo ftp permette il trasferimento di file
tra un computer client ed un server.
• Il servizio ftp permette l’accesso al client previa
autorizzazione (in alcuni casi l’accesso può essere
anche anonimo).
• Il trasferimento dei file può essere bidirezionale
(dal client verso il server: upload, dal server verso
il client: download).
• E’ il meccanismo più utilizzato per il trasferimento
delle pagine html su un server web.
 I browser più utilizzati
I browser sono i client che permettono di richiedere le pagine HTML e
di renderizzarle (mostrare la pagina sotto forma di ipertesto).

I browser più comuni:

• Firefox
• Chrome
• Internet Explorer
• Opera
• Safari

Il primo browser, il protocollo http e il linguaggio html sono stati

sviluppati da Tim Berners-Lee che è considerato il padre del world
wide web.
 Hyper Text Markup Language (HTML)
• È il linguaggio utilizzato per la formattazione e
l’impaginazione di documenti ipertestuali.
• I documenti ipertestuali nel formato HTML
disponibili nel world wide web (www)
vengono denominati pagine web.
• Il linguaggio ha subito negli anni notevoli
cambiamenti che hanno aggiunto numerose
funzionalità al linguaggio. La versione attuale
del linguaggio è html5.
 Quali strumenti utilizzare?
• Le pagine html sono documenti di testo in formato
ascii. Per editarli è sufficiente un editor di testo come
notepad.
• Esistono dei software appositi che permettono di
editare le pagine html utilizzando un editor WYSIWYG
(quello che vedi è quello che ottieni). Il limite di questi
strumenti è che spesso creano codice sporco difficile
da utilizzare per lo sviluppo di applicazioni web.
• Durante questo corso utilizzeremo un software
denominato Notepad++
• Per la visualizzazione delle pagine utilizzeremo il
browser Chrome (Google).
 La struttura di una pagina HTML
• Doctype
– Permette di specificare la versione del linguaggio
HTML utilizzato nella pagina.
• Header
– Raggruppa tutti i tag che sono utili per definire come
deve comportarsi la pagina, quale nome (title) deve
avere la pagina, quali stili devono essere caricati,
offrire informazioni aggiuntive per i motori di ricerca,
etc.
• Body
– Raggruppa tutti i tag che riguardano la formattazione
del documento.
 Le pagine HTML
Ogni pagina html deve essere memorizzata sotto
forma di file di testo all’interno di una o più cartelle.
Dato che dobbiamo sapere qual è la pagina iniziale
da mostrare al visitatore quando accede al sito la
prima volta (senza specificare il nome della pagina),
è necessario definire un nome standard da
utilizzare per riconoscere la «home page». Di solito
questa pagina si chiama index.htm, ma il nome
può cambiare in funzione del server web su cui
pubblicheremo le nostre pagine.
 I tag HTML
La sintassi di un tag HTML (o elemento HTML) è la seguente:
<html>
Un tag viene cioè identificato dal simbolo <, da una parola chiave (in questo
caso html) e dal simbolo >
Spesso i tag possono contenere altri tag al loro interno, in questo caso si deve
utilizzare un tag di apertura e uno di chiusura. Ad esempio:
<html>
<body>
</body>
</html>
I tag di chiusura vengono identificati attraverso il prefisso / che precede il
nome del tag.
Alcuni tag non possono contenere altri tag al loro interno. In questi casi il tag
di chiusura sparisce e si utilizza la sintassi seguente:
<br />
 Gli attributi
I tag possono contenere al loro interno degli attributi. Nel
tag anchor l’attributo href specifica qual è la pagina a cui
collegare il codice html presente all’interno dell’anchor:

<a href="Esempio.htm">Esempio</a>

• Esempio è il contenuto del tag anchor (si trova tra i tag

di apertura e di chiusura del tag <a>
• href è l’attributo del tag anchor che specifica quale
nuova pagina aprire nel momento in cui si clicca su
Esempio.
 Testo ed immagini
• Il linguaggio HTML è un linguaggio per la
creazione di ipertesti.
• Sappiamo che la formattazione di questi testi
può essere definita attraverso l’uso di
opportuni tag HTML, che possono contenere a
loro volta degli attributi.
• Iniziamo adesso a scoprire quali sono i tag più
utilizzati per la formattazione del testo e delle
immagini.
 Intestazioni (h1...h6)
• Un testo può essere organizzato su diversi livelli.
• h1 rappresenta il livello massimo di intestazione, h6 il livello più
basso.
• Osserveremo che, by default, i browser mostrano i render dei sei
livelli di intestazione in modo diverso. Il livello h1 viene
rappresentato con un testo di maggiore dimensione e, man
mano che si scende più in basso, la dimensione del testo
diminuisce. Il modo con cui questi elementi vengono renderizzati
può essere modificato attraverso i CSS.
• È importante osservare che i motori di ricerca danno una diversa
importanza ai contenuti presenti sui vari livelli di intestazione.
Un testo presente su h1 avrà un posizionamento più favorevole
di un testo presente su h6 o su un tag differente.
 Paragrafi e nuova riga
• Un testo può contenere diversi paragrafi. Il tag
<p> permette di definire l’inizio e la fine di un
paragrafo.
<p>Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>
• Per gestire eventuali ritorni a capo all’interno di
un paragrafo è possibile utilizzare il tag <br />.
<p>Questo è un paragrafo<br />Questa è la seconda
riga dello stesso paragrafo</p>
Nel testo, il tag <br /> causerà un ritorno a capo
subito prima della parola «Questa».
 Grassetto
Per il grassetto è possibile utilizzare il tag <b>. Ad
esempio:
<b>Questo testo viene visualizzato in grassetto</b>

Il tag <strong> permette di ottenere il medesimo effetto.

<strong>Questo testo viene visualizzato in grassetto</strong>

C’è però una differenza sostanziale tra i due tag. Il primo

è un tag di stile, il secondo è un tag semantico. <strong>
indica che il testo all’interno del tag è più importante
rispetto al resto del testo.
 Corsivo e sottolineato
Per il corsivo è possibile utilizzare il tag <i> o il tag <em>.

<i>Questo testo viene visualizzato in corsivo</i>

Come per il grassetto, il tag <i> è un tag di stile mentre

<em> è un tag semantico. <em> corrisponde a
«emphasised» (enfatizzato).

Il sottolineato si può ottenere utilizzando il tag <u>. Il

testo contenuto all’interno dei tag di apertura e chiusura
viene visualizzato con una sottolineatura.
 Apici e pedici
Apici:
Questo testo viene visualizzato in ^apice

Pedici:
Questo testo viene visualizzato in _pedice

<sup> sta per superscript element

<sub> sta per subscript element
 Tag di tipo block e di tipo inline
Esistono due grandi tipologie di tag:
• tag inline
• tag block-level

I tag inline sono tutti quelli che non interrompono il flusso di pagina.
Tra quelli che abbiamo visto finora sono tag inline i tag <b>, <strong>,
<i>, <em>, <u>.
I tag block-level sono tutti quelli che interrompono il flusso della
pagina. Tra quelli che abbiamo visto finora sono tag block i tag
<h1>..<h6>, <p>.
Un tag inline può contenere solo altri tag inline.
Tra i tag block l’unico tag che non può contenere altri tag block al suo
interno è il tag <p>.
 Il tag <div>
• Il tag <div> è un generico tag di tipo block
• Dal punto di vista semantico il tag <div> non
ha alcun significato.
• Il tag <div> può contenere altri tag di tipo
block o inline, tra cui lo stesso tag <div>.
• Vedremo in seguito che utilizzando gli stili si
potrà cambiare il modo con cui questo tag
viene renderizzato nel browser.
 Il tag <span>
• Il tag <span> è un generico tag di tipo inline
• Come per il tag <div>, il tag <span> non ha
alcun significato dal punto di vista semantico
• Il tag <span> può contenere altri tag di tipo
inline ma nessun tag di tipo block, tra cui lo
stesso tag <span>.
• Vedremo in seguito che utilizzando gli stili si
potrà cambiare il modo con cui questo tag
viene renderizzato nel browser.
 Gli elenchi ordinati (1)
Gli elenchi ordinati sono una serie progressiva ed ordinata di elementi. Ogni
elemento ha come prefisso un numero o una lettera. Per creare un elenco
ordinato è necessario l’uso contestuale di due diversi tag: un tag <ol>
(ordered list) che identifica l’inizio della serie di elementi, una serie di tag <li>
(list item) che identificano l’inizio e la fine del singolo elemento. Esempio:

<ol>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ol>

Il risultato ottenuto sarà quindi:

1. Primo elemento
2. Secondo elemento
3. Terzo elemento
 Gli elenchi ordinati (2)
Per impostazione predefinita gli elenchi ordinati utilizzano come
stile di enumerazione i numeri, ma è possibile modificare questo
comportamento attraverso l’uso dell’attributo type. Ad esempio
utilizzando: <ol type="a"> verrà visualizzato un elenco ordinato
mediante lettere dell’alfabeto minuscolo.
Valore dell’attributo type Risultato
type="1" Numeri arabi (predefinito)
type="a" Alfabeto minuscolo
type="A" Alfabeto maiuscolo
type="i" Numeri romani minuscoli
type="I" Numeri romani maiuscoli
 Gli elenchi non ordinati (1)
Gli elenchi non ordinati vengono identificati dal tag <ul> (unordered
list). Gli elementi dell’elenco sono individuati, come nel caso delle liste
ordinate, da tag <li> (list item). Esempio:

<ul>
<li>Primo elemento</li>
<li>Secondo elemento</li>
<li>Terzo elemento</li>
</ul>

Il risultato ottenuto sarà quindi:

• Primo elemento
• Secondo elemento
• Terzo elemento
 Gli elenchi non ordinati (2)
Per impostazione predefinita gli elenchi non ordinati utilizzano
come stile di enumerazione un pallino, ma è possibile modificare
questo comportamento attraverso l’uso dell’attributo type.
Valore dell’attributo type Risultato
type="disc" Pallino pieno (predefinito)
type="circle" Cerchio vuoto
type="square" Quadrato pieno

Gli elenchi ordinati e non possono essere annidati tra di loro. Nel
caso di elenchi non ordinati lo stile di enumerazione cambia in
funzione del livello di annidamento.
 Liste di definizione
Vengono individuate dal tag <dl>. Gli elementi
dell’elenco vengono individuati da due differenti
tag: <dt> (definition term), <dd> (definition
description). Esempio:

<dl>
<dt>A</dt>
<dd>è la prima lettera dell’alfabeto</dd>
<dt>Z</dt>
<dd>è l’ultima lettera dell’alfabeto</dd>
</dl>
 Il tag <a> (hyperlink)
Un ipertesto è un insieme di documenti (pagine) messi in relazione tra loro.
La caratteristica principale di un ipertesto è che la lettura può avvenire anche
in modo non lineare. Solitamente si clicca su alcune parole per accedere ad
un nuovo documento. Il tag che permette di associare una porzione di
documento (una o più parole, un’immagine, etc) con un altro documento è il
tag <a>. Il collegamento creato tramite tag <a> è definito collegamento
ipertestuale. Esempio di utilizzo del tag <a>:

Vai alla <a href="altra_pagina.html">seconda pagina</a>

Per ottenere un collegamento ipertestuale funzionante è necessario

specificare un valore per l’attributo href. Questo valore è il nome della pagina
da collegare alla porzione di codice identificata dal tag <a>. Altra_pagina.html
è il nome della pagina che viene caricata dal browser nel momento in cui si
clicca sul collegamento ipertestuale.
 Il tag <a> (placeholder)
Il tag <a> può svolgere due compiti:
• Può essere usato come hyperlink se viene specificato un valore per
l’attributo href
• Può essere usato come anchor (placeholder per altri hyperlink). Un
placeholder permette di specificare un collegamento che riporta ad uno
specifico punto dello stesso documento (o di un altro documento). È
estremamente comodo per la creazione dell’indice di un documento.
Esempio:

Vai al <a href="#Cap1">Capitolo 1</a>

Vai al <a href="#Cap2">Capitolo 2</a>

...
<h1>Questo è il <a name="Cap1">Capitolo 1</a></h1>
<p>Testo del capitolo 1...</>
 L’attributo target (1)
L’attributo target del tag <a> permette di
definire la finestra di destinazione del
caricamento del documento. Ad esempio:

<a href="file.html" target="_blank">Apri file</a>

Il tag <a> aprirà il documento file.html su una

nuova finestra (o su un nuovo tab, a seconda
delle impostazioni del browser).
 L’attributo target (2)
L’attributo target può contenere i seguenti valori:

• _self : la stessa finestra (valore predefinito)

• _blank : una nuova finestra (o tab)
• _parent : apre la pagina sul livello superiore
rispetto al frameset attuale.
• _top : In caso di utilizzo di frame, apre il
collegamento sull’intera pagina, rimuovendo di
fatto il frameset.
 Percorsi relativi
Come abbiamo visto in precedenza, l’attributo href contiene il link alla nuova pagina da visualizzare.
L’attributo href conteneva semplicemente il nome della pagina perché si ipotizzava che la nuova pagina
da visualizzare si trovava nella stessa cartella della pagina su cui era presente il collegamento. Non è
sempre così. Ipotizzando una struttura di cartelle del tipo:

\index.html
\cartella1\paginaA.html
\cartella2\paginaB.html

Se vogliamo aggiungere un collegamento dalla pagina index.html alla pagina paginaA.html, il valore da
impostare sull’attributo href deve essere:
<a href="cartella1\paginaA.html">Vai a Pagina A</a>

Per un collegamento dalla pagina paginaA.html alla pagina paginaB.html si dovrà invece tornare indietro
di una cartella (..):
<a href="../cartella2/paginaB.html">Vai a Pagina B</a>

Questi collegamenti contengono tutti percorsi relativi, perché non partono dalla radice del sito web (il
primo carattere del collegamento è diverso da /).
 Percorsi assoluti (1)
Un percorso assoluto sarà del tipo:

<a href="/Cartella1/PaginaA.html">Vai a pagina A</a>

I percorsi assoluti possono essere utilizzati esclusivamente

quando le nostre pagine risiedono su un server web.

Il tag <a> ci consente di collegare la nostra pagina ad una

pagina presente su un altro sito web. Ad esempio, se vogliamo
collegare la nostra pagina al sito web www.sitoweb.it, ci basta
impostare l’attributo href come segue:
<a href="http://www.sitoweb.it">Vai al sito</a>
 Percorsi assoluti (2)
Nel valore dell’attributo href, prima del nome del
sito, notiamo la presenza del prefisso http://.
Questo prefisso è indispensabile se si vuole
collegare la pagina ad un nuovo sito. Serve a far
capire al browser che la restante parte del valore
inserito nell’attributo riguarda un sito differente da
quello in cui si trova la pagina in cui ci troviamo.
Rimuovendo il prefisso http:// il browser
proverebbe a caricare la pagina presente nella
cartella www.sitoweb.it, sullo stesso livello della
pagina su cui si trova il collegamento.
 Le tabelle (1)
• Comode per la rappresentazione dei dati in
modo tabellare
• In passato venivano usate per strutturare il
layout della pagina
• Per aggiungere una tabella in un documento
html è necessario conoscere almeno tre tag:
<table>, <tr>, <td>.
 Le tabelle (2)
<table>
Permette di definire l’inizio e la fine della tabella

<tr>
Permette di definire l’inizio della riga

<td>
Permette di definire l’inizio della colonna
 Le tabelle (3)
Esempio:
<table>
<tr>
<td>Riga 1, Colonna 1</td>
<td>Riga 1, Colonna 2</td>
</tr>
<tr>
<td>Riga 2, Colonna 1</td>
<td>Riga 2, Colonna 2</td>
</tr>
</table>
 Le tabelle (4)
Possiamo aggiungere ulteriori tag per specificare
quali porzioni delle tabelle rappresentano la
testata <thead>, il corpo della tabella <tbody> e
il footer: <tfoot>.
Vedremo in seguito che questi elementi possono
essere stilizzati in modo differente grazie agli
stili.
 Le tabelle (5)
<table>
<caption>Tabella 1</caption>
<thead>
<tr>
<th>Testata, Colonna 1</th>
<th>Testata, Colonna 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Riga 1, Colonna 1</td>
<td>Riga 1, Colonna 2</td>
</tr>
<tr>
<td>Riga 2, Colonna 1</td>
<td>Riga 2, Colonna 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer, Colonna 1</td>
<td>Footer, Colonna 2</td>
</tr>
</tfoot>
</table>
 DOCTYPE HTML (1)
• Permette di specificare la versione del linguaggio HTML
utilizzato nella stesura della pagina.
• Non è indispensabile ma i browser lo utilizzano per capire
come renderizzare il codice html della pagina, se manca può
determinare effetti indesiderati.
• Il linguaggio HTML si è evoluto nel tempo ed esistono diverse
versioni, ogni versione viene identificata da una diversa
DOCTYPE.
• Ad oggi la versione di HTML maggiormente utilizzata per lo
sviluppo di nuovi siti è la 5. Standardizzata ad ottobre 2014 dal
W3C ma supportata da tutti i browser già da diversi anni.
 DOCTYPE HTML (2)
Esempi di DOCTYPE:
DOCTYPE Versione HTML/XHTML

<!DOCTYPE html> HTML 5

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

"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" XHTML 1.0 Transitional
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

L’elenco completo dei DOCTYPE HTML è disponibile

sul sito del W3C:
http://www.w3.org/QA/2002/04/valid-dtd-list.html
 I tag dell’head (1)
• In precedenza abbiamo osservato che le
pagine html sono divise in due sezioni: head e
body.
• Alcuni tag html possono essere utilizzati
esclusivamente all’interno della sezione head
e altri esclusivamente nella sezione body (la
stragrande maggioranza).
 I tag dell’head (2)
<title>Titolo della pagina</title>
Permette di specificare il titolo della pagina. Il testo
contenuto all’interno del tag viene solitamente
visualizzato nella barra del titolo del browser e nella
barra delle applicazioni quando viene minimizzato
(dipende dal S.O. e dal browser utilizzato).

<meta />
Permette di specificare dei metadati
 I tag dell’head (3)
<link />
Solitamente usato per collegare un foglio di stile
esterno alla pagina (li vedremo in seguito)

<style />
Specifica un foglio di stile per il documento
(inserito direttamente al suo interno)
 I tag dell’head (4)
<script />
Permette di includere script nel documento
(solitamente javascript).

<base />
Permette di specificare i valori base per la
destinazione (target) dei collegamenti dell’intera
pagina.
 I tag del body (1)
• La maggior parte dei tag html vanno inseriti
nella sezione body del documento.
• Alcuni li abbiamo già osservati in precedenza,
altri li scopriremo nella parte restante del
corso.
• Occorre sempre ricordare che lo scopo
principale dei tag non è quello di definire lo
stile di visualizzazione ma di dare un
significato all’informazione in essi contenuta.
 I tag del body (2)
<blockquote>Citazione...</blockquote>
Permette di specificare una porzione di codice
come citazione. Attraverso l’attributo cite è
possibile specificare il riferimento alla citazione
(deve essere una URL completa). È di tipo Block.

<pre>Testo</pre>
Il testo contenuto viene visualizzato con un font non
proporzionato ed esattamente come è stato scritto
nel documento html. È di tipo Block.
 I tag del body (3)
<q>testo citazione</q>
Citazione breve, anche in questo caso è possibile
utilizzare l’attributo cite per fornire la fonte. È
un tag di tipo inline.

<code>porzione di codice</code>
Visualizza con un font monospaced il testo
presente al suo interno. Solitamente usato per
mostrare una porzione di codice.
 I tag del body (4)
<del>Testo cancellato</del>
Permette di mostrare un testo «cancellato». Il
testo viene visualizzato barrato. È un tag inline.

<ins>Testo inserito</ins>
Permette di mostrare un testo inserito. Il testo
viene visualizzato sottolineato. È un tag inline.
 I tag del body (5)
<hr />
Inserisce una linea orizzontale.

<img />
Permette di visualizzare un’immagine all’interno
del documento. Il collegamento all’immagine
avviene attraverso l’attributo src.
 Moduli (form)
• Il linguaggio HTML permette di definire degli
elementi per acquisire l’input dei dati da parte
degli utenti.
• L’HTML non è però in grado di processare tali
input (ricordiamoci che è un linguaggio di markup
e non di scripting)
• Per processare l’input degli utenti è necessario
l’uso di un linguaggio di scripting lato client
(javascript) o di un’applicazione server side (php,
asp.net, jsp, coldfusion, etc.).
 Input di tipo text
<input type="text" name="nomecampo" />
Il tag input è un tag che viene renderizzato in modi
differenti a seconda del valore impostato nell’attributo
type.
Se il valore di type è text, viene visualizzato un campo di
input di tipo testuale. In questo tipo di campi di input
l’utente può inserire una stringa alfanumerica (lettere,
numeri, etc).
L’attributo name permette di specificare un identificativo
per il campo, in modo da permettere il recupero
dell’informazione una volta effettuato l’inoltro dei dati.
 Checkbox (1)
<input type="checkbox" name="nomecampo"/>
Se il valore di type è checkbox, viene visualizzata
una casellina quadrata su cui è possibile
applicare un segno di spunta con un clic.
Per applicare il segno di spunta come
impostazione predefinita, è possibile usare
l’attributo checked, impostandone il valore a
checked:
<input type="checkbox" checked="checked" />
 Checkbox (2)
• Checkbox è normalmente usato per
permettere la scelta di n opzioni da un elenco.
Ogni voce dell’elenco può essere selezionata
in modo indipendente dalle altre voci. È quindi
possibile operare delle scelte multiple.
 Radio
<input type="radio" name="gruppo" id="v1"/>
<input type="radio" name="gruppo" id="v2"/>
<input type="radio" name="gruppo" id="v3"/>
Se il valore di type è radio, viene visualizzata una
casella a forma di cerchio che può contenere un
puntino al suo interno. La differenza tra il radio
button e la checkbox è che la checkbox viene
utilizzata quando si vuole dare la possibilità di
scegliere una sola voce da un elenco di voci.
Attraverso l’attributo name è possibile definire quali
voci fanno parte di questo elenco.
 Select (1)
<select name="nomecampo">
<option value="1" selected="selected">Prima</option>
<option value="2">Seconda</option>
<option value="3">Terza</option>
</select>
Il tag select permette di definire un menù di opzioni. L’attributo
selected permette di specificare una scelta come predefinita.
Il tag select viene renderizzato come un menù a tendina che
mostra l’opzione selezionata seguita da un triangolo nero che
indica la possibilità di espandere il menù.
 Select (2)
In alcuni casi è necessario raggruppare le opzioni per
tipologia. Il tag <optgroup> permette di raggruppare le
opzioni e di specificare una label per ogni gruppo.

<select id="nomecampo">
<optgroup label="Primo gruppo">
<option value="1">Prima</option>
<option value="2">Seconda</option>
</optgroup>
<optgroup label="Secondo gruppo">
<option value="3">Terza</option>
</optgroup>
</select>
 Select (3)
In alcuni casi può essere utile dare la possibilità
all’utente di effettuare scelte multiple.
L’attributo multiple modifica il comportamento
del tag select in modo da permettere la
selezione di più scelte attraverso l’uso del tasto
control (CTRL). L’attributo size permette inoltre
di specificare il numero di voci che possono
essere visualizzate contemporaneamente.
 Etichettare i controlli
<label for="ctrl">Cognome</label>
<input type="text" id="ctrl" name="nomecampo" />

Il tag <label> permette di aggiungere una label ad uno

specifico controllo. Grazie all’attributo for è possibile associare
la label al controllo indicandone il nome.
Nell’esempio il tag input di tipo text con id ctrl è stato
associato alla label contenente il testo Cognome impostando
nell’attributo for il valore ctrl.
Cliccare sul tag <label> equivale a cliccare sul tag <input>,
cliccando su <label> infatti il tag <input> acquisisce il focus (il
cursore si posiziona su <input>).
 Input di tipo button
<input type="button" name="btn" value="Clicca qui" />

Il tag <input> può essere di tipo button, in tal

caso questo viene renderizzato come un
pulsante.
I «button» sono pulsanti su cui non è definito un
comportamento specifico.
Solitamente viene aggiunto del codice client side
(javascript) che viene eseguito quando si clicca
sul bottone.
 Input di tipo submit
<input type="submit" name="btn" value="Aggiorna" />

Anche in questo caso il tag <input> viene

renderizzato come un pulsante.
In questo caso il pulsante esegue il postback dei
dati contenuti nel form, verso la destinazione
specificata dal tag <form> che contiene il pulsante e
gli altri controlli di input.
Osserviamo che, in entrambe le tipologie di
pulsante, la label del pulsante coincide con il valore
che impostiamo nell’attributo <value>.
 Input di tipo reset
<input type="reset" name="clear" value="Pulisci" />

Il tag input di tipo reset permettono di

reinizializzare il valore dei campi con i loro valori
predefiniti.
 Tag <form> (1)
Il tag <form> non viene renderizzato a video, ma è
fondamentale perché ci permette di specificare
verso quale pagina devono essere inoltrati i dati
inseriti nei nostri controlli e in quale modo devono
essere trasferiti.
L’attributo action permette di specificare il nome
della pagina verso cui vogliamo inoltrare le
informazioni, l’attributo method permette di
specificare il modo con cui queste informazioni
vengono passate (post, get).
 Tag <form> (2)
Esempio:

<form action="PaginaRicevente.html" method="post">

<label for="ctrl">Cognome</label>
<input type="text" id="ctrl" name="ctrl" />
<input type="submit" name="btn" value="Invia" />
<input type="reset" name="clear" value="Pulisci" />
<input type="button" name="generic" value="niente" />
</form>
 Input di tipo image
<input type="image" name="btn" src="img.jpg" />

Si comporta come un input di tipo submit.

Sul browser viene visualizzata l’immagine
specificata attraverso l’attributo src (lo stesso del
tag <img>).
 Tag <button> (1)
• Presente solo a partire dalla versione HTML 4
• Permette un maggiore controllo nella
definizione del suo aspetto grazie alla
possibilità di inserire del codice html
all’interno del bottone.
• Anche nel tag <button> è possibile specificare,
attraverso l’attributo type, quale deve essere il
comportamento del bottone (button, reset,
submit).
 Tag <button> (2)
Esempio:

<button type="submit" name="button">

<img src="image.jpg" />
</button>

Da osservare che, rispetto al tag <input> di tipo image che

mostra solo l’immagine, il tag button viene renderizzato come un
bottone che contiene al suo interno l’immagine specificata. Il
modo con cui il bottone viene renderizzato è funzione del
browser utilizzato.
 I tag <fieldset> e <legend>
Il tag <fieldset> permette di raggruppare un insieme di tag di
input all’interno di una specifica area. Il tag <legend>
permette di specificare una label per quest’area.
Il tag viene renderizzato come un riquadro che contiene tutti
gli elementi inseriti al suo interno. La label viene visualizzata
in alto.

<fieldset>
<legend>Testo della label</legend>
<label for="ctrl">Cognome</label>
<input type="text" id="ctrl" name="ctrl" />
<input type="submit" name="btn" value="Invia" />
</fieldset>
 Il tag <textarea>
<textarea name="ctrl" cols="50" rows="10"></textarea>

Il tag <textarea> rappresenta un controllo di

input multiriga di tipo testuale.
Gli attributi cols e rows permettono di
specificare la dimensione del controllo in
larghezza e in altezza. Se il testo supera le
dimensioni specificate, il controllo mostra una
barra di scorrimento.
 Definire il layout della pagina
Nelle prime versioni del linguaggio HTML, gli
elementi che servivano a specificare l’aspetto della
pagina venivano inseriti direttamente all’interno del
codice HTML. Esistevano infatti dei tag e degli
attributi, oggi obsoleti, che permettevano di
specificare la formattazione di ogni tag o di un
gruppo di tag.
Il linguaggio HTML si è evoluto nel tempo in modo
da separare le informazioni (dati) dalla loro
formattazione (layout).
L’uso delle tabelle per definire il layout
Le prime versioni dell’HTML erano prive di strumenti avanzati
per definire il layout della pagina.
I designer utilizzavano le tabelle, spesso inserite all’interno di
altre tabelle (nidificazione), per creare dei layout gradevoli per
i visitatori del sito.

Questo modo di operare aveva dei costi elevati in termini di:

• Pulizia del codice
• Usabilità del sito nel caso di utenti diversamente abili
• Peso in termini di kb della pagina
• Inadeguatezza del codice per la visualizzazione su
dispositivi diversi dai computer desktop
Utilizzare i fogli di stile per il layout
Per tentare di separare il codice HTML dalla sua
rappresentazione grafica (layout), nel 1996 il
W3C introdusse i fogli di stile o Cascading Style
Sheet (CSS).
La prima versione realmente utilizzata nei
browser è stata però la v. 2.1 (CSS2.1). I primi
browser in grado di supportare i CSS furono
Internet Explorer 5, Firefox, Opera 7.
 Uso degli stili come attributo dei tag
È possibile specificare lo stile di un tag HTML
utilizzando l’attributo style. Ad esempio:
<div style="background-color:#cc9999;font-family:Arial;">
Testo in Arial su sfondo rosso!
</div>

Lo stile viene correttamente applicato al tag <div> ma

per ricreare lo stesso effetto su un altro tag, sulla stessa
o su un’altra pagina, siamo costretti a riscrivere tutto il
codice per ogni tag <div> presente sulla pagina.
 Il tag style
Per superare questo limite i CSS introducono il concetto di
selettore, un meccanismo per associare uno stile predefinito
ad uno o più controlli presenti sulla pagina.
Il primo selettore che vedremo è il selettore class. Il codice
della pagina precedente, utilizzando l’attributo class diventa:

<div class=“mioStile">
Testo in Arial su sfondo rosso!
</div>

Adesso dobbiamo imparare a definire lo stile «mioStile»,

prima utilizzando il tag style e, dopo, utilizzando i fogli di stile.
 Uso e limite del tag style
Teoricamente è possibile aggiungere un tag
<style> nidificato all’interno del tag <head>,
questo permette di specificare, all’interno della
pagina, un elenco di stili da utilizzare per gli
elementi del codice HTML contenuto nella
pagina.
È una soluzione che separa il codice html dallo
stile, ma ci obbliga a ripetere, per ogni pagina
l’elenco degli stili.
 Uso degli stili all’interno della pagina
L’esempio visto in precedenza utilizzando il tag <style>:

<html>
<head>
<style>
.mioStile{
background-color:#cc9999;
font-family:Arial;
}
</style>
</head>
<body>
<div class="mioStile">
Testo in Arial su sfondo rosso!
</div>
</body>
</html>
 Uso degli stili esterni (1)
A questo punto non ci resta che trovare un modo
per trasferire questi stili dal codice della pagina
HTML verso un documento esterno.
Per fare questo è sufficiente creare un nuovo file
con estensione .css (es. stile.css) contenente il
seguente codice:

.mioStile {
background-color:#cc9999;
font-family:Arial;
}
 Uso degli stili esterni (2)
Il codice della pagina HTML deve diventare
quindi:

<html>
<head>
<link href="stile.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="mioStile">
Testo in Arial su sfondo rosso!
</div>
</body>
</html>
 CSS – Sintassi e commenti
Tipicamente un foglio di stile è costituito da una
serie di regole che verranno poi applicate agli
elementi della nostra pagina html.
Per identificare gli elementi a cui applicare le regole
vengono utilizzati dei selettori.
È possibile individuare gli elementi attraverso il
nome del tag (selettore di tipo), mediante
l’attributo class (selettore di classe: .) o mediante
l’attributo id (selettore di ID: #).
Osserviamo quindi l’esempio presente nella pagina
successiva.
 Esempio CSS
body{
background-color: white;
font-size:14px;
color:#000;
}

h1{
color: green;
}

#Contenitore{
margin:20px auto 20px auto;
width:900px;
}

.mioStile{
background-color:#cc9999;
font-family:Arial;
}
 Selettore di tipo (1)
body identifica le regole da applicare per il tag body.
Osserviamo che le parentesi graffe delimitano il blocco di
regole da applicare all’elemento identificato dal selettore.

Nell’esempio il selettore di tipo utilizzato identifica il tag body,

quindi le regole verranno applicate al tag body presente nella
pagina HTML. Nello specifico il colore di sfondo della pagina
sarà bianco, le dimensioni del font saranno pari a 14px (14
pixel, il colore del testo sarà nero)

selettore {
proprietà:valore;
}
 Selettore di tipo (2)
Nel codice dell’esempio troviamo, il selettore di
tipo riferito al tag h1. Com’è ovvio, le
regole/proprietà descritte all’interno delle
parentesi graffe, saranno riferite a tutti i tag h1
presenti sulla pagina.
N.B. Nelle versioni precedenti ad HTML5, era
possibile specificare un solo tag h1 per pagina.
Da HTML5 in poi è possibile specificare un tag
h1 per ogni sezione.
 Selettore di ID
Il selettore #Contenitore permette di specificare
delle regole per il tag che ha come identificativo
univoco il valore Contenitore. Il tag dovrà quindi
essere del tipo:

<div id="Contenitore">esempio</div>

È importante osservare che non possono esistere,

nella medesima pagina, due tag che contengono lo
stesso valore per l’attributo ID.
 Selettore di classe
Lo abbiamo usato in precedenza. Il selettore di classe ci
permette di associare le regole a tutti gli elementi della
pagina che hanno, come valore dell’attributo class, il
valore specificato nel selettore. Nell’esempio il selettore
.mioStile ci permette di associare le regole a tutti gli
elementi che hanno l’attributo class impostato al valore
mioStile
A differenza del tag ID, più elementi della stessa pagina
possono avere lo stesso valore impostato per l’attributo
class. Il selettore di classe ci viene quindi utile quando
dobbiamo utilizzare più volte delle regole all’interno della
nostra pagina.
 Selettore universale *
Il selettore universale * permette di impostare delle
regole che valgono per tutti gli elementi della
pagina. Ad esempio:

* {
color: red;
}

permette di impostare in rosso il colore di tutti gli

elementi della pagina HTML.
 Struttura ad albero dell’HTML (1)
Osserviamo la pagina HTML:
<html>
...
<body>
<h1>Ciao mondo!</h1>
<p>Esempio di <a
href="Pagina.html">collegamento</a></p>
</body>
</html>
 Struttura ad albero dell’HTML (2)
La struttura della pagina può essere vista come un albero
costituito dai seguenti elementi:

Dove il tag a è il figlio del tag p, che ha sua volta è figlio del tag
body, etc.
Alla stessa maniera body è il padre del tag p che a sua volta è
padre del tag a.
 Combinare i selettori (1)
Osserviamo il seguente codice:

<h1>
Benvenuti nel nostro
<a href="Link1.html">Sito</a>
</h1>
<p>
Clicca su questo
<a href="Link2.html">collegamento</a>
per maggiori informazioni
</p>
 Combinare i selettori (2)
Vediamo come poter impostare il verde come
colore del testo del primo link ed il rosso come
colore del testo del secondo link.
Utilizzando il selettore di classe l’operazione è
semplice, basta aggiungere le due classi e
impostare le proprietà attraverso il css.
Aggiungiamo quindi le due classi
 Combinare i selettori (3)
<h2>
Benvenuti nel nostro
<a href="Link1.html" class="verde">Sito</a>
</h2>
<p>
Clicca su questo
<a href="Link2.html" class="rosso">collegamento</a>
per maggiori informazioni
</p>

Il nostro css sarà:

.verde {
color: green;
}

.rosso {
color: red;
}
 Combinare i selettori (4)
Se volessimo evitare l’uso dei selettori è possibile
utilizzare l’albero dell’HTML per identificare gli elementi.
Sappiamo che il primo tag a è figlio di h1 ed il secondo
tag a è figlio di p. Il codice css da utilizzare sarà quindi:

h2 a {
color: green;
}

p a {
color: red;
}
 Combinare i selettori (5)
Se diversi tag condividono buona parte delle stesse proprietà, è possibile raggruppare
la definizione dei tag utilizzando la sintassi:

selettore1, selettore2, ..., selettoreN {

elenco di proprietà
}

Ad esempio:

h1, p, div {
color: red;
}

Imposta a rosso il colore dei tag h1, p e div presenti nella pagina a cui collegheremo
questo css. Le proprietà per cui differiscono potranno poi essere impostate utilizzando
il formato a singolo selettore visto in precedenza.
 Proprietà
Vedremo in seguito un elenco di proprietà da
utilizzare per formattare i testi, per definire i colori,
per impostare le immagini di sfondo, etc.

È importante osservare che durante questo corso

non verranno mostrate tutte le possibili proprietà
da utilizzare nei css.
Lo scopo che si prefigge il corso è quello di
descrivere le basi del linguaggio HTML e dei CSS e di
fornire le tecniche per la creazione di pagine HTML
che utilizzano gli stili in modo efficace.
 Formattazione del testo (1)
font-family
Permette di specificare il font da utilizzare per il
testo (Arial, Times New Roman, etc).
I CSS 3 hanno aggiunto le specifiche necessarie
per il trasferimento, verso il browser dell’utente,
di font diversi da quelli base. Prima era infatti
necessario limitarsi all’uso di alcuni font presenti
su tutti i computer.
 Formattazione del testo (2)
font-size
Permette di specificare la dimensione del testo.
Le unità di misura più utilizzate sono:
• px (pixel)
• pt (punti, va usato per la stampa)
• em (em-height, è una unità di misura relativa)
 Formattazione del testo (3)
color
Permette di specificare il colore del testo. È possibile
specificare alcuni dei colori utilizzando il loro nome
(green, red, blue, etc.), ma esistono altri modi per
indicare con precisione il colore che vogliamo utilizzare.
La notazione esadecimale #RRGGBB in cui abbiamo la
possibilità di specificare i livelli dei colori base da
utilizzare per ottenere il colore desiderato (RR = rosso, GG
= verde, BB = blu). Il valore viene espresso in formato
esadecimale (con cifre che vanno da 0 ad F, dove F
corrisponde a 15 nella notazione decimale).
 Formattazione del testo (4)
Esiste una forma abbreviata: #RGB dove per
identificare il colore si utilizza un numero
esadecimale per ogni colore base.
Esiste inoltre la notazione decimale in cui ogni
colore viene specificato attraverso una terna di
valori che vanno da 0 a 255 o da 0% a 100%.

color: rgb(0..255,0..255,0..255)
color: rgb(0..100%, 0..100%, 0..100%)
 Formattazione del testo (5)
font-weight
Permette di specificare se il testo è in grassetto
o normale.

font-style
Permette di specificare lo stile del font (italic,
oblique, etc).
 Formattazione del testo (6)
text-decoration
Permette di specificare una eventuale
«decorazione» del testo. Alcuni dei possibili valori
sono: underline, line-through, overline.

text-transform
Permette di modificare la visualizzazione del testo.
Alcuni dei suoi possibili valori sono: capitalize
(iniziale di ogni parola maiuscola, uppercase (tutto
in maiuscolo), lowercase (tutto in minuscolo).
 CSS box model
L’insieme delle regole che definiscono l’aspetto
estetico degli elementi di tipo block è detto CSS box
model.
Gli elementi di tipo block hanno:
• Dimensione (width, height)
• Padding (distanza dal bordo)
• Bordo
• Margine (distanza tra il bordo e gli altri elementi)
CSS box model
 CSS box model
<div class="blocco">Esempio</div>

.blocco{
/* per definire le dimensioni dell’elemento */
width: 300px;
height: 200px;
/* padding */
padding-top: 10px; padding-bottom: 10px;
padding-left: 20px; padding-right: 20px;
/* per definire il tipo, le dimensioni ed il colore del bordo */
border-top: solid 5px red;
border-bottom: solid 5px red;
border-left: solid 5px red;
border-right: solid 5px red;
/* per definire le dimensioni del margine */
margin: 20px 20px 20px 20px;
}
 CSS box model
E’ importante osservare che la larghezza totale impegnata
è data da:
Larghezza dell’elemento + padding left + padding right +
border left + border right + margin left + margin right
(nell’esempio la larghezza totale è pari a 390 pixel)

L’altezza totale impegnata è data da:

Altezza dell’elemento + padding top + padding bottom +
border top + border bottom + margin top + margin
bottom (nell’esempio la l’altezza totale è pari a 270 pixel).
 Margin e padding (1)
Esistono diversi modi per specificare le misure
nelle proprietà margin e padding.
• margin-left: valore; (ripetuto per ogni lato)
• margin: top right bottom left;
• margin: valore; (imposta lo stesso valore per
ogni lato)
• margin: valore1 valore2 (imposta valore1 per
top e bottom e valore2 per left e right)
 Margin e padding (2)
Esempi:

margin: 20px; Imposta a 20px il margine di tutti i lati

margin: 10px 15px 20px 25px; Imposta a 10px il top, a 15px il right, a
20px il bottom, a 25px il left.

margin: 10px 20px; Imposta a 10px il top ed il bottom, a 20px il left ed il

right

margin-left: 20px; Imposta a 20px il margine sinistro

• La stessa logica può essere applicata per il padding.

• I margin possono avere valori negativi, ciò non vale per border e padding.
 Border
Per il border valgono regole differenti. È sempre
possibile specificare il valore di un singolo lato
aggiungendo -left, -right, -top, -bottom, ma non
è possibile specificare misure diverse usando la
forma compatta. Questo perché nella proprietà
border dobbiamo poter specificare altri
parametri. Il primo rappresenta il tipo di bordo
(solid, dotted, etc), il secondo la dimensione del
bordo, il terzo il colore del bordo.
 Impostare le immagini di sfondo
Gli elementi possono avere anche delle immagini di sfondo,
queste possono essere specificate direttamente a livello di CSS
utilizzando la proprietà background-image.
background-image:url(‘nomeImmagine.png’);
L’immagine verrà visualizzata parzialmente in funzione delle
dimensioni dell’elemento su cui verrà applicata.

È possibile inoltre definire la posizione dell’immagine rispetto

all’elemento di cui è il background (background-position) e
definire la ripetizione dell’immagine (se ripetere l’immagine in
altezza e in larghezza, se ripeterla solo in larghezza o solo in
altezza o se mostrarla solo una volta).
 Dimensioni relative ed assolute
Gli elementi possono avere dimensioni assolute (ad
esempio 300px) o dimensioni relative (ad esempio 50%).

Se definiamo un elemento con una dimensione relativa,

la sua dimensione in pixel sarà funzione dell’elemento
che lo contiene.

Un elemento la cui proprietà width sia pari a 50%,

contenuto in un altro elemento la cui proprietà width è
pari a 500px, avrà una dimensione in pixel pari a 250px (il
50% del suo contenitore).
 Creare layout con i div
Sappiamo che gli elementi possono contenere
immagini di sfondo, avere delle dimensioni ben
precise, un bordo, un margine e un padding.
Sappiamo anche che gli elementi di tipo block,
come i div, occupano tutta la larghezza della finestra
perché, anche quando hanno una larghezza
limitata, mandano «a capo» gli elementi precedenti
e quelli successivi.
Vediamo come possiamo mettere affiancati due o
più div, mantenendone le caratteristiche tipiche
degli elementi di tipo block.
 Posizionare gli elementi: float e clear
Prendiamo ad esempio questo codice:

<div class="left">Sinistra</div>
<div class="right">Destra</div>

Senza uno specifico css, questi due elementi verranno

mostrati su due diverse righe.
Utilizzando il seguente css invece gli elementi verranno
mostrati a sinistra e a destra, sulla stessa riga.

.left { float:left; }
.right { float:right; }
 float
Gli elementi il cui float è impostato a left o right
si posizionano a destra o a sinistra (rispetto al
loro contenitore) e permettono agli altri
elementi che seguono di posizionarsi di fianco a
loro.
Questo permette l’organizzazione della pagina
su diversi elementi, anche se acquisire
padronanza con il floating richiede un po’ di
tempo e di esperienza.
 clear
Gli elementi che seguono un elemento impostato
come float continuano a posizionarsi sulla sinistra
(o sulla destra) dell’elemento.
Per impedire che questo comportamento prosegua
all’infinito è possibile aggiungere un elemento di
tipo block che abbia la proprietà clear impostata a
both.

<div class="clearfix"></div>
.clearfix {
clear:both; /* both, left o right */
}
Posizionamento assoluto e relativo
Fino ad ora abbiamo visto che gli elementi seguono
sempre il flusso della pagina. Scrivendo questo codice:

<h1>Titolo</h1>
<p>Testo</p>
<img src="img.png" />

h1 verrà sempre visualizzato prima di p e p prima

dell’immagine.
Questo comportamento può essere alterato. Alcuni
elementi possono essere posizionati in modo relativo o in
modo assoluto.
 Posizionamento assoluto
position:absolute;
Le proprietà top, bottom, left e right sono
riferite all’intera pagina e rappresentano la
distanza tra l’elemento e la relativa posizione
identificata dalla proprietà.
 Posizionamento relativo
position:relative;
Le proprietà top, bottom, left e right sono
riferite all’elemento contenitore e
rappresentano la distanza tra l’elemento e la
relativa posizione identificata dalla proprietà.
Il comportamento di top, right, bottom, left è
diverso rispetto ai posizionamenti assoluti e
l’elemento mantiene una sorta di «segnaposto»
nella sua posizione naturale.
 Posizionare gli elementi su più livelli
z-index: valore;
Permette di specificare l’ordine di
sovrapposizione degli elementi. Se due elementi
sono sovrapposti, l’elemento che ha il valore di
z-index maggiore verrà visualizzato, mentre
l’elemento con z-index minore verrà nascosto
(parzialmente o totalmente in funzione delle
dimensioni degli elementi)
 Pseudo-classe (1)
Una pseudo classe non definisce la
presentazione di un elemento ma solo di un suo
particolare stato.
La sintassi è la seguente:

selettore:pseudo-classe { proprietà };

Nelle versioni più recenti del linguaggi HTML

può essere associata a tutti i tipi di selettore.
 Pseudo-classe (2)
Pseudo-classi per i link:
– :link
– :visited
– :hover
– :active

Altre pseudo-classi:
– :focus
– :first-child

I CSS 3 hanno introdotto diverse nuove pseudo classi.

 Font
Le versioni più vecchie del linguaggio html e dei css non
consentivano l’utilizzo di font diversi da quelli installati
sulla macchina dell’utente che visitava il sito. Questo ci
costringeva a dover scegliere un numero limitato di font
per il nostro sito. Fondamentalmente la scelta era tra
queste famiglie di font: monospace, sans-serif e serif.
La differenza tra un font sans-serif e serif:
 Font
• Per la maggior parte dei browser, il font predefinito
per il tipo serif è il Times mentre il font predefinito
per il tipo sans-serif è l’Arial.
• Se vogliamo possiamo specificare direttamente il
nome di un font, ad esempio il font «verdana» e,
volendo, possiamo anche specificare un elenco di
font da utilizzare (se il primo non è presente viene
utilizzato il secondo):

font-family: verdana, sans-serif;

 Font
L’utente che non ha sulla sua macchina il font verdana
andrebbe a visualizzare il sito in modo differente
rispetto a come lo vediamo noi. Per ovviare a questo
problema, abbiamo diverse soluzioni. Una di queste è
l’uso dei «Web Safe Fonts» di cui trovate l’elenco qui:
www.w3schools.com/cssref/css_websafe_fonts.asp

Il grado di compatibilità può essere verificato qui:

https://www.cssfontstack.com/
 Font
Un altro modo per ovviare al problema dell’assenza
del font desiderato sul computer dell’utente è
quello di utilizzare il font embedding. Sul sito:

https://fonts.google.com/

troviamo una vasta scelta di font da poter utilizzare

nei nostri siti web in modo estremamente semplice
(il sito fornisce anche la porzione di CSS necessaria
per il font embedding)
 Font
Se abbiamo un font e lo vogliamo incorporare senza
utilizzare dei servizi esterni possiamo usare il seguente
codice:
@font-face {
font-family: myFont;
src: url(file_con_il_font.woff);
}

div {
font-family: myFont;
}

I formati supportati dalla maggior parte dei browser sono

TTF/OTF e WOFF. Per avere maggiori informazioni sulla
compatibilità è possibile usare il sito caniuse.com
 CSS sizing – font-size
Quando abbiamo definito la dimensione del font di un
carattere, finora abbiamo utilizzato sempre l’unità di
misura px (pixel). Esistono però altre unità di misura
che possiamo utilizzare: %, em e pt.

• font-size: 100%;
// Corrisponde alla dimensione di 16px

• font-size: 1em;
// Corrisponde alla dimensione di 16px

• Font-size: 12pt;
// Corrisponde alla dimensione di 16px
 CSS sizing – font-size
Cosa cambia se utilizzo le unità di misura % ed em al posto
di px?
Nelle impostazioni del browser è possibile specificare la
dimensione del carattere (solitamente: molto piccola,
piccola, media, grande, molto grande), ma questa
impostazione si applica solo ai caratteri in cui il font-size è
stato specificato in % ed em.
N.B. Non stiamo parlando della possibilità di effettuare il
zoom della pagina, ma di queste impostazioni:
 CSS sizing – font-size (esercizio)
<!DOCTYPE html>
<html>
<head>
<style>
.FontPX{ font-size:16px; }
.FontPercentuale{ font-size:100%; }
.FontEM{ font-size:1em; }
.FontPT{ font-size:12pt; }
</style>
</head>
<body>
<p class="FontPX">Dimensione font specificata in px</p>
<p class="FontPercentuale">Dimensione font specificata in %</p>
<p class="FontEM">Dimensione font specificata in em</p>
<p class="FontPT">Dimensione font specificata in pt</p>
</body>
 CSS sizing – font-size
Un’altra caratteristica dell’uso delle unità di
misura % ed em è che le impostazioni
precedenti vengono «ereditate», ciò significa
che se impostiamo il font-size di un testo a 2em
(32px) e poi impostiamo il font su body a 2em, la
dimensione del font del testo sarà
complessivamente di 4em. Osserviamo questo
comportamento nel prossimo esercizio.
 CSS sizing – font-size (esercizio)
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 2em; }
.FontPX{ font-size:16px; }
.FontPercentuale{ font-size:100%; }
.FontEM{ font-size:1em; }
.FontPT{ font-size:12pt; }
</style>
</head>
<body>
<p class="FontPX">Dimensione font specificata in px</p>
<p class="FontPercentuale">Dimensione font specificata in %</p>
<p class="FontEM">Dimensione font specificata in em</p>
<p class="FontPT">Dimensione font specificata in pt</p>
</body>
 CSS sizing – font-size
Se vogliamo impedire il propagarsi delle
impostazioni precedenti (nell’esempio il valore
impostato su body si propagava su
.FontPercentuale e .FontEM) possiamo utilizzare
l’unità di misura rem (la r sta per root).
N.B. se utilizziamo l’unità di misura rem, la
dimensione del font viene comunque
influenzata dalle modifiche che effettuiamo sulle
impostazioni del browser.
 Favicon
Molti siti visualizzano un’icona specifica nella
tab in cui sono stati aperti.

Questa icona è denominata «favicon» o

favourite icon. Il nome deriva dal fatto che, nelle
versioni più vecchie dei browser, questa icona
veniva visualizzata esclusivamente nella barra
dei preferiti.
 Favicon
Esiste un tool estremamente comodo per la
creazione di favicon da utilizzare nei nostri siti:
https://www.favicon.cc/
Ma esistono anche diversi programmi che
consentono la creazione di icone direttamente
da windows (o mac). Uno dei più famosi è
Microangelo.
 Favicon (esercizio)
Ipotizziamo di avere realizzato la nostra icona e
di averla memorizzata nella cartella Images del
nostro sito. Per consentire la corretta
visualizzazione dell’icona nella tab, è sufficiente
inserire questa porzione di codice all’interno del
tag head:
<head>
<link rel="icon" href="/Images/favicon.ico" />
…
</head>
 Tips & Tricks
• display: block / inline / none
• Uso della posizione del background per gli
effetti di rollover delle immagini
 Le versioni del linguaggio HTML
• Linguaggio sviluppato verso la fine degli anni ‘80 da Tim
Berners-Lee al CERN di Ginevra insieme al protocollo http.
• Fino alla versione 4.01 del 1999 il W3C ha di fatto
standardizzato le modifiche al linguaggio proposte durante
la «guerra dei browser».
• Nel gennaio 2000 viene presentato XHTML 1.0, aggiornato
successivamente ad XHTML 1.1.
• Nel 2004 alcune aziende tra cui Apple, Mozilla Foundation e
Opera software si riuniscono e creano il WHATWG (Web
Hypertext Application Technology Working Group) e
cominciano lo sviluppo di una nuova versione del linguaggio
HTML. Questa versione prenderà il nome di HTML5.
 La pubblicazione di un sito web
• Si utilizza il servizio ftp fornito da chi ci vende il servizio di
hosting del dominio che abbiamo acquistato. Il fornitore
deve offrire anche le credenziali di accesso (username e
password) da configurare sul client ftp.
• Il client ftp è un software che permette di interagire con il
servizio ftp.
• Uno dei client ftp più utilizzati è filezilla, molti strumenti di
sviluppo professionali integrano comunque dei propri client
ftp che rendono agevole la pubblicazione dei contenuti.
• Solitamente la pubblicazione consiste nella duplicazione dei
contenuti realizzati sulla nostra cartella / sito web verso una
particolare cartella a cui possiamo accedere utilizzando il
nostro client ftp.
 Documentazione disponibile sul web
Documentazione ufficiale sul linguaggio HTML e
i CSS:
• http://www.w3.org/
• http://www.w3.org/html/
• http://www.w3.org/Style/CSS/
FINE