Programmazione Web
HyperText Markup Language (HTML)
e
Cascading Style Sheet (CSS)
2014/2015
HyperText Markup Language
HTML (HyperText Markup Language) è un linguaggio di markup
(di “marcatura”) per gli ipertesti
Permette di indicare come disporre gli elementi (testo, immagini,
tabelle etc) all'interno di una pagina
Le indicazioni vengono date attraverso degli appositi marcatori,
detti tag
Un file HTML è un comune file di testo ASCII che viene
interpretato da un qualsiasi Web browser per conoscere lo stile di
presentazione delle informazioni in una pagina Web
Attualmente, è disponibile la versione HTML5
2014/2015
Programmazione Web - HTML e CSS
2
HTML tag
Ogni tag è formato da un nome, che ne contraddistingue la
funzione, racchiuso da parentesi acute
<tag>
Solitamente gli elementi da visualizzare sono racchiusi tra un
tag di apertura e uno di chiusura, che presenta il carattere “ / ”
(slash) anteposto al nome del tag
<tag> … </tag>
2014/2015
Programmazione Web - HTML e CSS
3
Annidamento dei tag
I tag possono essere annidati a più livelli
(!!! attenzione all’ordine di annidamento !!!)
Annidamento corretto
<tag1>
<tag2>
…
</tag2>
</tag1>
2014/2015
Annidamento errato!!!
<tag1>
<tag2>
…
</tag1>
</tag2>
Programmazione Web - HTML e CSS
4
Gli attributi dei tag
Un tag può avere uno o più attributi che forniscono ulteriori
informazioni sullo stile di presentazione
Gli attributi sono espressi nella forma
attributo=“valore”
Gli attributi vengono inseriti nel tag di apertura dopo il nome del
tag stesso
<tag attributo1=“valore” attributo2=“valore”>
…
</tag>
2014/2015
Programmazione Web - HTML e CSS
5
Struttura di un documento HTML
Un documento HTML è un file
ASCII racchiuso fra i tag <html> e
</html>
Presenta un’intestazione tra i tag
<head> e </head>
Presenta un corpo tra i tag <body> e
<html>
<head>
<title> … </title>
</head>
</body>
L’intestazione contiene informazioni
sul documento
Nel corpo troviamo il contenuto del
documento e i tag per la resa visiva
2014/2015
<body>
…
</body>
</html>
Programmazione Web - HTML e CSS
6
Struttura di un documento HTML
<html>: elemento principale (radice)
Contenuto: <head>, <body> (entrambi obbligatori)
Attributi: lang, dir
Questo elemento deve aprire ogni documento HTML
<head>: intestazione
Contenuto: <title> (obbligatorio), <base>, <script>, <meta>,
<link>, <style>
Attributi: lang, dir
Contiene informazioni sul documento che solitamente non producono
alcun output ma influiscono sulla presentazione del documento stesso
<body>: corpo
Contenuto: blocco, <script>, <ins>, <del>
Attributi: standard HTML
Racchiude il vero contenuto del documento HTML
2014/2015
Programmazione Web - HTML e CSS
7
Classificazione degli elementi (I)
Contenuto inline
Il contenuto inline è rappresentato dal testo e dai seguenti elementi: <tt>, <i>,
<b>, <big>, <small>, <em>, <strong>, <dfn>, <code>, <samp>,
<kbd>, <var>, <cite>, <abbr>, <acronym>, <a>, <img>,
<object>, <br>, <script>, <map>, <q>, <sub>, <sup>, <span>,
<bdo>, <input>, <select>, <textarea>, <label>, <button>
Contenuto blocco
Gli elementi che costituiscono il contenuto blocco sono: <p>,<h1>...<h6>,
<ol>, <ul>, <pre>, <dl>, <div>, <noscript>, <blockquote>,
<form>, <hr>, <table>, <fieldset>, <address>
Il contenuto di tipo flusso è dato dall’unione di inline e blocco
2014/2015
Programmazione Web - HTML e CSS
8
Classificazione degli elementi (II)
Tag per controllare il flusso del testo nel documento: <p>, <br>, <h1>..<h6>,
<div>, <span>
Tag per la formattazione di base: <tt>, <i>, <b>, <big>, <small>, <sub>,
<sup>
Tag per la formattazione semantica: <em>, <strong>, <dfn>, <code>, <samp>,
<kbd>, <var>, <cite>, <abbr>, <acronym>, <blockquote>, <q>,
<pre>, <ins>, <del>, <address>
Tag per la rappresentazione di liste: <ul>, <ol>, <li>, <dl>, <dt>,
<dd>
Tag per la rappresentazione di tabelle: <table>, <caption>, <tr>, <td>,
<th>, <thead>, <tbody>, <tfoot>, <col>, <colgroup>
Tag per la rappresentazione di collegamenti: <a>, <link>, <base>
Tag per l'inclusione di oggetti multimediali: <img>, <map>, <area>, <object>
Tag per l'interazione con l'utente: <form>,<input>,<textarea>,<button>,..
2014/2015
Programmazione Web - HTML e CSS
9
Attributi standard HTML
id: ID unico (utilizzato per riferirsi all’elemento negli script)
class: lista di classi (utilizzati per attribuire uno o più stili globali all’elemento; la
lista è delimitata da spazi)
style: informazioni di stile (utilizzato per fornire uno stile CSS specifico
all’elemento)
title: titolo informativo (molti browser lo renderizzano come tooltip dell’elemento)
lang: codice lingua (codici linguistici come da standard I18N, ad es. “it” o “en-us”)
dir: direzione di scrittura (rtl, destra-a-sinistra, o ltr, sinistra-a-destra)
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup: gestori
eventi (utilizzati per associare degli script agli eventi corrispondenti)
2014/2015
Programmazione Web - HTML e CSS
10
I contenitori HTML
Esistono due elementi invisibili in HTML, che però hanno un ruolo
fondamentale per l’utilizzo di caratteristiche avanzate come gli stili (in
particolare usati con gli attributi class e id)
Questi due elementi sono <div> e <span>; la loro semantica di base è
praticamente nulla:
<div> rappresenta un blocco di testo (ma non è un paragrafo)
<span> è una parte del flusso testuale
In pratica, il contenuto di un <div> è preceduto e seguito da un ritorno a capo,
mentre uno <span> può trovarsi ovunque nel flusso del testo.
2014/2015
Programmazione Web - HTML e CSS
11
Formattazione semantica
I phrase elements sono utilizzati per attribuire un significato (semantica) particolare
ad alcune parti del testo
La semantica di solito è resa esplicita da rendering particolari, ma può essere anche
utilizzata per rendere il testo più facilmente analizzabile dai tool automatici
<em>: enfasi (di solito equivale a corsivo)
<strong>: enfasi forte (di solito equivale a grassetto)
<cite>: riferimento o citazione
<dfn>: testo di definizione (da non confondere con le liste di definizioni)
<code>: codice sorgente
<samp>: esempio di output
<kbd>: testo scritto da tastiera (digitato dall'utente)
<var>: nome di variabile
<abbr>: abbreviazione (l'attributo title può essere usato per la forma completa)
<acronym>: acronimo
2014/2015
Programmazione Web - HTML e CSS
12
Citazioni
<blockquote> <q>: sono utilizzati per inserire citazioni (i browser dovrebbero
inserire opportune virgolette prima e dopo la citazione)
Contenuto: <q> inline, <blockquote> blocco (indentata rispetto al resto)
Attributi: HTML standard, cite (può essere usato per fornire l'URI del testo
citato)
<blockquote>: utilizzato per citare blocchi di testo
<q>: serve ad inserire brevi citazioni nel flusso del testo
2014/2015
Programmazione Web - HTML e CSS
13
Testo preformattato
<pre>
Contenuto: inline (con alcune esclusioni)
Attributi: HTML standard
Il rendering di HTML ignora gli spazi bianchi e i ritorni a capo nel testo. Il flusso
del testo segue le sole regole dettate dagli elementi corrispondenti (<p>, <br>, ...) e
dalle dimensioni della finestra
Con l’elemento <pre> si richiede al browser di rispettare la forma data al testo nel
sorgente della pagina: il testo è renderizzato con un font a spaziatura fissa, gli spazi
bianchi sono mantenuti e l’andare a capo automatico è disabilitato
(!) Nel testo preformattato si possono comunque usare i tag HTML inline tranne
<img>, <object>, <big>, <small>, <sub> e <sup>
2014/2015
Programmazione Web - HTML e CSS
14
Revisioni
<ins> <del>: testo inserito o cancellato
Contenuto: inline o blocco
Attributi: HTML standard, cite, datetime
Questi elementi sono usati per indicare revisioni del testo
L’attributo cite può essere usato per indicare una URI in cui si trovano dettagli
sulla corrispondente revisione. Un’indicazione sintetica del motivo della revisione si
può inserire anche nell’attributo title
L’attributo datetime può essere usato per contenere la data/ora della revisione
Sono gli unici due elementi HTML che possono essere usati sia come inline che
come blocco.
2014/2015
Programmazione Web - HTML e CSS
15
Indirizzi
<address>: informazioni per contattare l'autore
Contenuto: inline
Attributi: HTML standard
Questo elemento può esser usato per marcare il testo in esso contenuto come
“contatto informativo” per il blocco in cui è inserito
Di solito lo si usa a livello di corpo del documento (<body>) o all’interno di un
modulo (<form>)
(!) I browser potrebbero renderizzare le informazioni di contatto in maniera speciale,
cambiandone posizione e formattazione (ad es. sempre all’inizio del blocco, o come
popup attivato da un piccolo bottone specifico, ecc.)
2014/2015
Programmazione Web - HTML e CSS
16
Elenchi non ordinati
Gli elenchi ordinati sono costituiti da una lista i cui elementi sono
contraddistinti da un segno grafico
<ul> (unordered list)
è il tag che apre l’elenco non ordinato e che lo contiene. Lascia una riga di
spazio prima e dopo il testo che eventualmente lo circonda
<li> (list item)
è il tag che individua gli elementi dell’elenco non ordinato
Testo che precede la lista
<ul>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ul>
Testo che segue la lista
2014/2015
Testo che precede la lista
•
•
•
primo elemento
secondo elemento
terzo elemento
Testo che segue la lista
Programmazione Web - HTML e CSS
17
Elenchi ordinati
Gli elenchi ordinati sono costituiti da una lista i cui elementi sono
contraddistinti da un numero o da una lettera crescente
<ol> (ordered list)
è il tag che apre l’elenco ordinato e che lo contiene. Lascia una riga di
spazio prima e dopo il testo che eventualmente lo circonda
<li> (list item)
è il tag che individua gli elementi dell’elenco ordinato
Testo che precede la lista
<ol>
<li>primo elemento</li>
<li>secondo elemento</li>
<li>terzo elemento</li>
</ol>
Testo che segue la lista
2014/2015
Testo che precede la lista
1. primo elemento
2. secondo elemento
3. terzo elemento
Testo che segue la lista
Programmazione Web - HTML e CSS
18
Liste di definizioni
Le liste di definizioni sono liste i cui elementi sono contraddistinti da un
termine e una definizione
<dl> (definition list)
è il tag che apre la lista. Lascia una riga di spazio prima e dopo il testo che
eventualmente lo circonda
<dt> (termine) e <dd> (definizione)
sono i tag che individuano gli elementi che sono definiti
2014/2015
Programmazione Web - HTML e CSS
19
Tabelle (I)
Le tabelle HTML offrono un sistema estremamente potente
e versatile per disporre informazioni in righe e colonne
Le tabelle non sono progettate per creare layout di pagina,
ma solo per strutturare informazioni in forma tabulare;
utilizzare le tabelle per creare layout rende questi ultimi poco
portabili ed è fortemente sconsigliato
Le tabelle fanno parte degli elementi di tipo blocco, quindi
possono apparire direttamente nel <body> di un documento o
in un contenitore <div>, e non devono mai essere nidificate in
elementi come <p>
L’elemento base della definizione delle tabelle è <table>
2014/2015
Programmazione Web - HTML e CSS
20
Tabelle (II)
Le larghezze delle colonne e della tabella stessa (attributo width) si
possono specificare:
in pixel (width=”10”)
in percentuale, rispetto allo spazio disponibile per la tabella
(width=”10%”)
Solo per le colonne, si possono usare anche i seguenti sistemi:
proporzionalmente, rispetto alla dimensione richiesta dalla tabella
(width=”10*”)
per richiedere il minimo spazio necessario, si può usare la forma
width=”0*”
Se non si specifica una larghezza per una tabella, lo spazio è quello
necessario a dare larghezza minima a tutte le colonne
2014/2015
Programmazione Web - HTML e CSS
21
Tabelle (III)
<table>: definizione di una tabella
Contenuto: caption (opzionale), sequenza di col o colgroup (opzionale),
thead (opzionale), tfood (opzionale), tbody (implicito se non
specificato)
Attributi: HTML standard, cellspacing, cellpadding, width,
border, rules, summary, frame
Una tabella è definita dagli elementi che la compongono, che devono essere
nell’ordine:
una didascalia opzionale (<caption>)
una definizione opzionale delle colonne/gruppi di colonne
un'intestazione di tabella opzionale
un piè di tabella opzionale
il corpo della tabella, che contiene i dati veri e propri
L’elemento <caption>, se presente, ha contenuto inline e rappresenta la
didascalia della tabella, che potrà essere renderizzata un maniera opportuna dal
browser
2014/2015
Programmazione Web - HTML e CSS
22
Tabelle (IV)
L’attributo cellspacing determina lo spazio (in pixel) tra le celle e tra le celle
più esterne e il bordo della tabella
L’attributo cellpadding determina lo spazio (in pixel) tra il bordo di ciascuna
cella e il suo contenuto
L’attributo width specifica la larghezza della tabella, in pixel o in percentuale; si
consiglia sempre di specificarlo per velocizzare il rendering (il valore di default è “il
minimo necessario”)
L’attributo border imposta lo spessore del bordo esterno della tabella; un valore
pari a zero elimina il bordo (utile per utilizzare la formattazione avanzata dei bordi
tramite CSS)
L’attributo frame (void, above, below, hsides, vsides, lhs, rhs, box, border)
determina quali dei bordi esterni della tabella saranno disegnati (con lo spessore dato
da border); il default è box
L’attributo rules (none, groups, rows, cols, all) determina quali dei bordi interni
alla tabella (tra le celle) saranno disegnati (con lo spessore dato da border); il default è
all
2014/2015
Programmazione Web - HTML e CSS
23
Tabelle (V)
<tr>: righe di una tabella
Contenuto: uno o più td e th
Attributi: HTML standard, align, valign
Le tabelle sono composte da una serie di righe (<tr>), ognuna della quali contiene
una o più celle
Il numero di massimo celle presenti su una singola riga determina il numero di
colonne della tabella; il rendering mostrerà celle vuote a destra di ogni riga le cui
celle sono minori del numero di colonne della tabella
L’attributo align (left, right, center, justify, char) definisce l’allineamento
orizzontale per tutte le celle della riga, mentre valign (top, bottom, middle,
baseline) definisce quello verticale
2014/2015
Programmazione Web - HTML e CSS
24
Tabelle (VI)
<td> <th>: celle e celle di intestazione di una tabella
Contenuto: flusso
Attributi: HTML standard, align, valign, rowspan, colspan, abbr,
axis, headers, scope, width, height
Ogni riga di una tabella contiene delle celle; le celle possono contenere contenuto
arbitrario HTML, comprese altre tabelle, immagini, ecc.
Le celle di intestazione sono identiche alle celle standard, ma il browser dovrebbe
renderizzarle in maniera più evidente
Tipicamente una cella rappresenta l’intersezione di una riga con una colonna,
tuttavia gli attributi rowspan e colspan permettono di specificare l’estensione
della cella, rispettivamente in righe e colonne
Gli attributi abbr, axis, headers, scope sono utilizzati per fornire dati
avanzati di accessibilità alla tabella
Gli attributi width, height servono a fornire informazioni sulle dimensioni della
cella; sono però sconsigliati: al loro posto andrebbero usati gli omonimi attributi degli
elementi <col>
2014/2015
Programmazione Web - HTML e CSS
25
Tabelle (VII)
<thead> <tbody> <tfoot>: raggruppamento di righe
Contenuto: uno o più <tr>
Attributi: HTML standard, align, valign
Le righe di una tabella possono essere suddivise in tre gruppi: intestazione
(<thead>), corpo (<tbody>) e piè di tabella (<tfoot>)
Tipicamente, le righe in <thead> e <tfoot> vengono poste rispettivamente
all’inizio e alla fine della tabella; se la tabella è spezzata in più pagine, ogni segmento
conterrà la stessa intestazione e piè di tabella
Se si omettono i raggruppamenti, tutte le righe sono poste in un <tbody> esplicito;
non è possibile avere tabelle con soli <thead> e/o <tfoot>; se specificati, questi
due gruppi devono trovarsi entrambi all’inizio della definizione della tabella, prima
del <tbody>
2014/2015
Programmazione Web - HTML e CSS
26
Tabelle - Esempio
<body>
<ul>
<li>
<h4> Esempio di tabella </h4>
<table border="1">
<tr>
<td>Prima cella</td>
<td>Seconda cella</td>
</tr>
<tr>
<td>Terza cella</td>
<td>Quarta cella</td>
</tr>
</table>
</li>
</ul>
</body>
2014/2015
Programmazione Web - HTML e CSS
27
Tabelle - Esempio
2014/2015
Programmazione Web - HTML e CSS
28
Celle ipertrofiche: rowspan
2014/2015
Programmazione Web - HTML e CSS
29
Celle ipertrofiche: rowspan
2014/2015
Programmazione Web - HTML e CSS
30
Celle
ipertrofiche:
colspan
2014/2015
Programmazione Web - HTML e CSS
31
Celle
ipertrofiche:
colspan
2014/2015
Programmazione Web - HTML e CSS
32
Celle ipertrofiche
2014/2015
Programmazione Web - HTML e CSS
33
Gruppi di colonne
<colgroup>: definizione di gruppi di colonne
Contenuto: vuoto oppure uno o più <col>
Attributi: HTML standard, align, valign, span, width
Gli elementi <colgroup> rappresentano raggruppamenti logici di (definizioni di)
colonne, che i browser possono renderizzare in vario modo
Uno o più elementi <colgroup> possono essere posti all’inizio della tabella
(prima delle righe) in alternativa agli elementi <col>
Un <colgroup> vuoto rappresenta un numero di colonne pari al suo attributo
span; ciascuna colonna avrà la dimensione specificata dall’attributo width e le
celle corrispondenti avranno l’allineamento definito da align e valign
Per definire separatamente le caratteristiche di ciascuna colonna in un gruppo, si
possono nidificare elementi <col> all’interno di un <colgroup>; le caratteristiche
delle <col> nidificate (compreso il loro numero totale) hanno la precedenza su
quelle specificate globalmente sul <colgroup>
2014/2015
Programmazione Web - HTML e CSS
34
Gruppi di colonne: esempio
2014/2015
Programmazione Web - HTML e CSS
35
Gruppi di colonne: esempio
2014/2015
Programmazione Web - HTML e CSS
36
Link ipertestuali
<a href=“destinazione” target=”?”>contenuto del link</a>
E' il tag che identifica i link, ossia gli elementi che, se cliccati, rimandano ad
un punto diverso all’interno dello stesso (href=“#bookmark”) o di un altro
documento (href=“http:///www...”), permettono di mandare un'email
(href=“mailto:...”), permettono di scaricare un file (per es.,
href=“fileName.zip”)
Se il link rimanda ad un punto particolare all'interno del documento, quel
punto dovrà essere univocamente identificato all'interno del documento stesso
tramite l'attributo id (per es., <h2 id=”bookmark”>)
È possibile specificare la modalità con cui il browser deve aprire la
destinazione del link (_blank, _self, che è anche il default, _parent, _top,
“framename”)
Il contenuto del link può essere testo o immagini, ma non si possono avere
link nidificati
2014/2015
Programmazione Web - HTML e CSS
37
Relazioni tra documenti
<link>: link tra documenti
Contenuto: vuoto
Attributi: HTML standard, href, type, rel, rev
L’elemento <link> è utilizzabile più volte e solo nella <head> del documento
Un <link> di default non genera link visibili all’utente, ma dichiara delle relazioni
tra il documento corrente ed altre risorse; i browser possono sfruttare queste
informazioni in vari modi
I <link> sono usati, ad esempio, per collegare un documento ai suoi fogli di stile,
per specificare documenti alternativi in altre lingue, per definire una sequenza logica
di lettura in un insieme di documenti, ecc.
2014/2015
Programmazione Web - HTML e CSS
38
Risoluzione delle URI relative
<base>: base per le URI relative
Contenuto: vuoto
Attributi: HTML standard, href, target
Questo elemento, utilizzabile una sola volta nella <head> del documento, definisce
(attributo href) la URI di base utilizzata per risolvere tutte le URI relative presenti
nel documento
L’attributo target può essere usato per definire il target di default in un
documento con frames
Se <base> non è specificato, la base della URI del documento corrente viene usata
per risolvere tutte le URI relative
2014/2015
Programmazione Web - HTML e CSS
39
Immagini (I)
<img>: inclusione di un'immagine
Contenuto: vuoto
Attributi: HTML standard, src, alt, longdesc, width, height, usemap
Inserisce nel documento l’immagine esterna referenziata dall’URI nell’attributo
src
Il testo alternativo per l’immagine (alt) è una caratteristica essenziale per un
documento HTML ad alta accessibilità
L’attributo longdesc può essere usato per puntare alla URI di un documento che
descrive nel dettaglio l’immagine
Gli attributi width e height dovrebbero essere sempre usati per fornire al
browser un suggerimento sulle dimensioni da riservare per l’immagine sulla pagina.
Se non corrispondono alle dimensioni reali dell’immagine, questa verrà
ridimensionata di conseguenza (in maniera proporzionale se si specifica solo uno
degli attributi)
2014/2015
Programmazione Web - HTML e CSS
40
Immagini (II)
<img>: inclusione di un'immagine
Contenuto: vuoto
Attributi: HTML standard, src, alt, longdesc, width, height, usemap
L’attributo usemap, se presente, permette di trasformare l’immagine un una clientside image map
L’attributo usemap deve contenere il nome di una image map definita nello stesso
documento tramite l’elemento <map>
Le aree dell’immagine definite dalla mappa diverranno cliccabili
2014/2015
Programmazione Web - HTML e CSS
41
Mappe immagine (I)
<map>: client-side image map
Contenuto: blocco, <area>
Attributi: HTML standard, name
L’elemento <map> dichiara una client-side image map con il nome specificato
dall’attributo name
Le aree della mappa possono essere specificate tramite una serie di elementi
<area> o <a>, entrambi nidificati nell’elemento <map>
L’uso di elementi <a> è utile per creare mappe ad alta accessibilità, con un ricco
contenuto testuale alternativo. In questo caso, il tag <a> può essere arricchito con
attributi quali shape e coords, propri del tag <area>
2014/2015
Programmazione Web - HTML e CSS
42
Mappe immagine (II)
<area>: client-side image map area
Contenuto: blocco, <area>
Attributi: HTML standard, shape, coords, href, alt
Gli elementi <area> nidificati in una <map> definiscono le aree cliccabili di
un’immagine e le relative destinazioni
Ogni area ha una forma, determinata dall’attributo shape, che può valere rect,
circle o poly
L’attributo coords contiene le coordinate, separate da virgole, dei punti che
definiscono la forma specificata:
Per i rettangoli, le coordinate x e y degli angoli superiore sinistro e inferiore destro,
Per i cerchi, le coordinate x e y del centro e il raggio,
Per i poligoni, le coordinare x e y di tutti i vertici.
La destinazione del link è specificata dall’attributo href
Una descrizione testuale dell’area, specificata con l’attributo alt, è obbligatoria per
una mappa ad alta accessibilità
2014/2015
Programmazione Web - HTML e CSS
43
Mappe immagine: esempio
2014/2015
Programmazione Web - HTML e CSS
44
Mappe immagine: esempio
2014/2015
Programmazione Web - HTML e CSS
45
Oggetti (dall'HTML4)
<object>: inclusione di un oggetto generico (per esempio, file multimediali
audio/video, Java applets, oggetti ActiveX, Flash)
Contenuto: flusso, <param>
Attributi: HTML standard, classid, data, codebase, codetype, type,
standby, width, height
Gli attributi classid e data possono essere usati per specificare (in maniera
mutuamente esclusiva):
– l’implementazione dell’oggetto: classid è una URI che punta
all’implementazione dell’oggetto da includere (es. applet o altri piccoli
programmi)
– i dati che costituiscono l’oggetto: data è una URI che punta alla sorgente
dati (es. immagini, video, audio)
Per passare parametri all’oggetto caricato, si possono nidificare elementi <param>;
gli attributi name e value di questi ultimi determinano le coppie (nome,valore)
passate all’oggetto in fase di inizializzazione
2014/2015
Programmazione Web - HTML e CSS
46
Oggetti (dall'HTML4)
<object>: inclusione di un oggetto generico (per esempio, file multimediali
audio/video, Java applets, oggetti ActiveX, Flash)
Contenuto: flusso, <param>
Attributi: HTML standard, classid, data, codebase, codetype, type,
standby, width, height
L’attributo codebase può essere usato per risolvere le URI relative presenti in
classid e data
Gli attributi codetype e type specificano il tipo MIME rispettivamente per le
risorse puntate da classid e data
L’attributo standby può essere utilizzato per specificare un testo da mostrare
durante il caricamento dell’oggetto
Gli attributi width e height hanno lo stesso scopo descritto per l’elemento
<img>
2014/2015
Programmazione Web - HTML e CSS
47
Form HTML (1)
I moduli o form sono tag HTML che ci permettono di interagire con la
pagina web
<form name=“mioForm” action=“..” method=”get/post”>
…
</form>
L’attributo name indica il nome del form mentre l’attributo action indica
l’azione da compiere, la pagina da richiamare, lo script da eseguire, etc.
L’attributo method (get o post) permette di specificare il metodo di invio
dei dati alla risorsa indicata
2014/2015
Programmazione Web - HTML e CSS
48
Controlli della form (I)
<input>
Contenuto: vuoto
Attributi: HTML standard, type, name, value, size, maxlength,
checked, disabled, readonly
L’elemento <input> viene usato per generare gran parte dei controlli all’interno dei
moduli; la chiave della sua versatilità è l’attributo type, che può assumere i seguenti
valori:
• text: crea una riga di input testuale
• password: come text, ma maschera i caratteri digitati
• checkbox: crea una casella di controllo
• radio: crea un pulsante di opzione
• submit: crea un bottone per l’invio del modulo
• reset: crea un bottone per la reinizializzazione del modulo
• file: crea un controllo per l’upload di un file
• hidden: crea un campo nascosto nel modulo
• button: crea un bottone
2014/2015
Programmazione Web - HTML e CSS
49
Controlli della form (II)
<input>
Contenuto: vuoto
Attributi: HTML standard, type, name, value, size, maxlength,
checked, disabled, readonly
L’attributo value fornisce:
• la stringa di inizializzazione per i tipi text, password, hidden, file
• la label per i controlli di tipo submit, reset e button
L’attributo size fornisce la larghezza del controllo, espressa in pixel o in caratteri
per i tipi text e password
L’attributo maxlength fornisce il massimo numero di caratteri digitabili nei campi
di tipo text e password
L’attributo booleano checked determina se i controlli di tipo checkbox e radio
saranno inizialmente selezionati
Gli attributi booleani disabled e readonly possono essere utilizzati per
disabilitare e/o rendere di sola lettura i controlli.
2014/2015
Programmazione Web - HTML e CSS
50
Form – Esempio (I)
<html>
<body>
<form action="">
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
51
Form – Esempio (I)
<html>
<body>
<form action="">
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
52
Form – Esempio (II)
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
53
Form – Esempio (II)
<html>
<body>
<form action="">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
54
Form – Esempio (III)
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked,
and all other buttons with the same name become unchecked
</p>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
55
Form – Esempio (III)
<html>
<body>
<form action="">
Male:
<input type="radio" checked="checked"
name="Sex" value="male">
<br>
Female:
<input type="radio"
name="Sex" value="female">
</form>
<p>
When a user clicks on a radio-button, the button becomes checked,
and all other buttons with the same name become unchecked
</p>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
56
Form – Esempio (V)
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
57
Form – Esempio (V)
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
58
Controlli della form (III)
<textarea>
Contenuto: testo
Attributi: HTML standard, name, rows, cols, disabled, readonly
L’elemento <textarea> crea un’area di testo ampia in cui l’utente può digitare
più righe
L’ampiezza dell’area visibile è determinata dagli attributi rows (righe) e cols
(colonne); il numero massimo di caratteri digitabili non può essere però limitato a
priori
Il testo contenuto nell’elemento viene usato come valore iniziale
(!) I tag HTML contenuti nel testo di non vengono interpretati
2014/2015
Programmazione Web - HTML e CSS
59
Controlli della form (IV)
<select>
Contenuto: uno o più elementi <option> e <optgroup>
Attributi: HTML standard, name, size, multiple
L’elemento <select> crea un controllo lista contenente più opzioni, ciascuna
rappresentata da un elemento <option>
L’attributo booleano multiple determina dell’utente può selezionare un o più
elementi della lista
L’attributo size indica quante delle opzioni debbano essere visibili
contemporaneamente sul controllo
Il valore iniziale e il valore assegnato a questo controllo è specificato tramite le
<option> e <optgroup> nidificate
2014/2015
Programmazione Web - HTML e CSS
60
Controlli della form (V)
<option> e <optgroup>
Contenuto: <optgroup>: uno o più <option>; <option>: testo
Attributi: HTML standard, label, selected, disabled, value
Gli elementi <option> definiscono le opzioni selezionabili nei controlli
<select>; gli elementi <optgroup> servono a raggruppare <option> in modo
da creare strutture logiche come i menu
L’attributo label determina il testo visualizzato per le <option> e le
<optgroup>; nel caso di <option>, è possibile anche omettere la label e
specificare il testo da visualizzare all’interno dell’elemento
L’attributo value determina il valore dell’opzione, che sarà assegnato al nome del
corrispondente campo <select> in fase di invio del modulo; se non è specificato,
verrà usato al suo posto il contenuto dell’elemento
L’attributo booleano selected determina se l’opzione sarà inizialmente
selezionata
2014/2015
Programmazione Web - HTML e CSS
61
Form – Esempio (IV)
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
62
Form – Esempio (IV)
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
63
Controlli della form (VI)
<button>
Contenuto: flusso, eccetto elementi <a> e tutti gli elementi usati nei moduli
Attributi: HTML standard, name, value, type, disabled
Gli elementi <button> creano bottoni esattamente come gli elementi <input>
con il corrispondente type (che può essere submit, reset o button)
La differenza è che il contenuto del bottone non è definito dall’attributo value, che
qui rappresenta solo il valore dato al corrispondente nome quando il bottone viene
premuto
Il contenuto dell’elemento, che può essere HTML di qualsiasi tipo e lunghezza,
verrà utilizzato per creare la “faccia” del bottone
2014/2015
Programmazione Web - HTML e CSS
64
Associare testo ai controlli
<label>
Contenuto: inline
Attributi: HTML standard, for
L’elemento <label> permette di associare una parte di testo inline a un controllo
del modulo
Il controllo associato è identificato dal valore dell’attributo for, che deve
corrispondere all’id (non al name!) di uno dei controlli del modulo corrente
Il browser potrà, ad esempio, cambiare la renderizzazione del testo se il
corrispondente controllo viene disabilitato
Si possono associare più <label> allo stesso controllo
2014/2015
Programmazione Web - HTML e CSS
65
Associare testo ai controlli
<label>
Contenuto: inline
Attributi: HTML standard, for
L’elemento <label> permette di associare una parte di testo inline a un controllo
del modulo
Il controllo associato è identificato dal valore dell’attributo for, che deve
corrispondere all’id (non al name!) di uno dei controlli del modulo corrente
Il browser potrà, ad esempio, cambiare la renderizzazione del testo se il
corrispondente controllo viene disabilitato
(i) Si possono associare più <label> allo stesso controllo
2014/2015
Programmazione Web - HTML e CSS
66
Raggruppare i controlli
<fieldset> <legend>
Contenuto: <fieldset>: flusso, un <legend> opzionale, <legend>:
inline
Attributi: HTML standard
Gli elementi <fieldset> permettono di raggruppare logicamente parti di un
modulo
L’elemento <legend>, se specificato, fornisce una descrizione testuale del
<fieldset>
Questi elementi sono utili per garantire un’alta accessibilità ai moduli e facilitarne la
compilazione
2014/2015
Programmazione Web - HTML e CSS
67
Frame (deprecated)
I frame permettono di suddividere la finestra del browser in vari riquadri
indipendenti
Vantaggi
evitare di ricaricare le parti comuni a più pagine di un sito
mantenere sempre in vista alcune parti del layout (tipicamente il
menù)
non ripetere il layout in più file
Svantaggi
difficile indicizzazione da parte dei motori di ricerca
problematica la stampa e il salvataggio dell’intera pagina
2014/2015
Programmazione Web - HTML e CSS
68
Frame: funzionamento
Per utilizzare i frame è necessario:
• impostare una pagina che dichiara la struttura che vogliamo
utilizzare
• impostare una pagina HTML per ogni frame
HTML
HTML
2014/2015
HTML
Programmazione Web - HTML e CSS
HTML
HTML
69
Frame: definizione della struttura
I frame sono realizzati tramite i tag <FRAMESET> e <FRAME>
Il tag <FRAMESET>
Definisce come dividere la finestra del browser in frame
È definito tramite un set di righe e colonne
Il valore associato a ciascuna riga o colonna definisce l’area dello
schermo occupata dalla riga o dalla colonna, rispettivamente
Il tag <FRAME>
Definisce quale documento HTML mettere in ciascun frame
2014/2015
Programmazione Web - HTML e CSS
70
Frame – Esempio (I)
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
<noframes>
<body>Your browser does not handle frames!</body>
</noframes>
</frameset>
</html>
2014/2015
Programmazione Web - HTML e CSS
71
Frame – Esempio (I)
2014/2015
Programmazione Web - HTML e CSS
72
Frame – Esempio (II)
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.html">
<frame src="frame_b.html"
name="showframe">
</frameset>
</html>
2014/2015
Programmazione Web - HTML e CSS
73
Frame – Esempio (II)
<html>
<frameset cols="120,*">
<frame src="tryhtml_contents.html">
<frame src="frame_b.html"
name="showframe">
</frameset>
</html>
2014/2015
Programmazione Web - HTML e CSS
74
La pagina “tryhtml_contents”
<html>
<body>
<a href ="frame_a.html" target ="showframe">Frame a</a><br>
<a href ="frame_b.html" target ="showframe">Frame b</a><br>
<a href ="frame_c.html" target ="showframe">Frame c</a>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
75
HTML5: nuovi elementi
Vengono introdotti elementi specifici per contenuti multimediali (tag <video> e
<audio>)
Vengono estesi a tutti i tag alcuni attributi, in particolare quelli relativi
all'accessibilità
Supporto dell'elemento Canvas per utilizzare Javascript al fine di creare animazioni
e grafica bitmap
Introduzione della geolocalizzazione, soprattutto per la diffusione dei sistemi
operativi mobili Android e IOS
I cookie vengono sostituiti da Web Storage, più efficiente
Introduzione dei Web Workers, programmi Javascript standardizzati
Vengono introdotti altri raffinamenti, come regole più stringenti sulla strutturazione
del testo e alcuni controlli aggiuntivi, mentre vengono deprecati alcuni elementi
scarsamente utilizzati (e.g., <applet> a favore di <object>) o eliminati elementi
considerati dannosi per l'accessibilità (e.g., i frame)
2014/2015
Programmazione Web - HTML e CSS
76
Fogli di stile
<style>: foglio di stile incorporato
Contenuto: testo
Attributi: type, media
Uno o più elementi <style>, posti nella <head> del documento, permettono di
incorporare nello stesso (frammenti di) fogli di stile
L’attributo type specifica il tipo MIME dello stile (ad esempio text/css per i fogli
di stile CSS)
L’attributo media permette di specificare i dispositivi per cui lo stile è stato
progettato
I fogli di stile possono essere anche importati dall’esterno con il tag <link>;
inoltre, è possibile specificare uno stile specifico per ogni elemento HTML tramite
l’attributo standard style
L’attributo standard class permette infine di raggruppare diversi elementi HTML
in classi, utili per poter attribuire loro uno stile uniforme
2014/2015
Programmazione Web - HTML e CSS
77
CSS: definizione
CSS è l’acronimo di Cascading Style Sheets ossia fogli di stile a cascata
Strumento che permette di separare il contenuto di una pagina Web dalla
sua impaginazione grafica
File di testo che definisce delle regole di formattazione da applicare alla
pagina HTML
Viene applicato ad un file HTML
2014/2015
Programmazione Web - HTML e CSS
78
CSS: vantaggi
I CSS permettono la separazione del contenuto dallo stile quindi
Migliore gestione della grafica: è possibile scegliere il font desiderato,
gestire l’interlinea e la spaziatura dei contenuti della pagina in modo facile
ed efficiente
Modifica semplice dell’impaginazione (layout): modificando una regola
di formattazione è possibile modificare l’aspetto di più pagine
contemporaneamente
Accessibilità: eliminando l’uso improprio di elementi HTML per la
grafica e l’impaginazione (es. tabelle) si ottengono siti più facilmente
navigabili dai programmi di lettura video
2014/2015
Programmazione Web - HTML e CSS
79
Collegare CSS e HTML
Per collegare il file CSS ad un file HTML è necessario utilizzare il tag
<link> nell’intestazione della pagina Web
<head>
<link rel=“stylesheet” type=“text/css”
href=“mystyle.css”/>
</head>
1. rel: attributo obbligatorio, descrive il tipo di relazione tra il documento
e il file collegato
2. href: attributo obbligatorio, serve a definire l'URL assoluto o relativo
al foglio di stile
3. type: attributo obbligatorio, identifica il tipo di dati da collegare. Per i
CSS l'unico valore possibile è text/css
4. media: attributo opzionale, identifica il supporto (screen, print, etc) cui
applicare il foglio di stile
2014/2015
Programmazione Web - HTML e CSS
80
CSS ed ereditarietà
Meccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà
impostate per un elemento sono automaticamente ereditate dai suoi
discendenti
<html>
<head>
<title>Struttura del documento</title>
</head>
Un elemento si dice genitore quando
contiene altri elementi.
Un elemento si dice figlio quando è
racchiuso in un altro elemento.
<body>
<h1>Titolo</h1>
<div>
<p>Primo
<a href="pagina.htm">paragrafo</a>
</p>
</div>
<p>Secondo<b>paragrafo</b></p>
</body>
</html>
•BODY è genitore (parent) di H1, DIV e P
•BODY è un antenato (ancestor) di B
•H1 è figlio (child) di BODY
•B è un discendente (descendant) di BODY
2014/2015
Programmazione Web - HTML e CSS
81
Regole CSS: sintassi
Tre parti fondamentali: un selettore, una proprietà e un
valore
selettore {proprietà: valore}
Selettore: l’elemento (tag) HTML di cui definire lo stile; è possibile raggruppare più
selettori, separandoli con una virgola (es. h1,h2,h3 {color: green})
Proprietà: l’attributo che si desidera modificare; se si vogliono modificare più proprietà,
vanno inserite separate da ‘;’(es. {text-align:center; color: red})
Valore: il valore che deve assumere l’attributo modificato; se il valore è costituito da più
parole, queste vanno messe tra virgolette e separate da uno spazio (es. {font: “sans
serif”})
2014/2015
Programmazione Web - HTML e CSS
82
Il selettore
Con il selettore possiamo indicare:
uno o più elementi (tag) HTML (type selector)
h1 {…}
h1, h2 {…}
tutti gli elementi HTML (universal selector)
* {…}
tutti gli elementi discendenti di un altro elemento (descendant selector)
h1 p {…} seleziona tutti i p discendenti di h1
tutti gli elementi figli di un altro elemento (child selector)
h1 > p {…}
seleziona tutti i p figli di h1 (1° livello!!!)
tutti gli elementi il cui attributo class è value (class selector)
.value {…}
seleziona tutti gli elementi con
class=“value”
h1.value {…} seleziona tutti gli h1 con class=“value”
l’elemento il cui attributo id è value (id selector)
#value {…}(nel file HTML esiste un solo tag il cui id è
value!)
2014/2015
Programmazione Web - HTML e CSS
83
CSS - Esempio
<html>
<head>
<title>Esempio dell'uso dei CSS</title>
<link href="esempio.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Titolo</h1>
<h2>Primo paragrafo</h2>
<div id="primo">Lorem ipsum...</div>
HTML
<h2>Secondo paragrafo</h2>
<div><p>Lorem ipsum...</p>
<ul>
<li>primo item</li>
<li>secondo item</li>
</ul>
</div>
<div>
<table><tr><td>Prima cella</td><td>Seconda cella</td></tr>
<tr><td>Terza cella</td><td>Quarta cella</td></tr></table>
</div>
</body>
</html>
2014/2015
Programmazione Web - HTML e CSS
84
CSS - Esempio
2014/2015
Programmazione Web - HTML e CSS
85
CSS - Esempio
CSS
body{
background: #FFE4B5;
font: 10pt Verdana;
}
h1 { color: blue;
font: bold 20pt Tahoma;
}
h2 { color: #8B008B;
font: bold 16pt Tahoma;
}
table { width: 300px;
height: 100px;
font: 8pt Verdana;
border-width: 1pt;
border-style: dotted;
border-color: green;
}
2014/2015
td { border-style: dashed;
border-width: 1pt;
text-align: center;
}
div {
width:500px;
border: 1pt solid red;
margin-top: 10px;
}
#primo { border: 1pt dotted red;
text-align: justify;
}
div p { padding-left: 50px;
border: 1pt dotted blue;
}
Programmazione Web - HTML e CSS
86
CSS - Esempio
2014/2015
Programmazione Web - HTML e CSS
87
Dove trovare materiale, esempi,
quiz…
Tutorial della W3C (http://www.w3schools.com/default.asp)
Specifica HTML 4 (http://www.w3.org/TR/html401/)
• tutorial sull’HTML e form HTM
– http://www.w3schools.com/html/default.asp
• tutorial su CSS
– http://www.w3schools.com/css/default.asp
2014/2015
Programmazione Web - HTML e CSS
88
Scarica
