Post on 19-Jul-2015
transcript
F O N D A M E N T I D I H T M L 4
A G G I O R N A T I A D H T M L 5
MATTEO CESERANI
Elementi di HTML
29/10/2013
1
Matteo Ceserani
La mia prima pagina web
<!DOCTYPE html> <html> <head> <meta content=“text/html” /> <title>La mia prima pagina web</title> </head> <body> <h1>Ciao mondo!</h1> <p>Questa è la mia prima pagina web!</p> <br/><hr/><br/> <p class=“definizione” id=“HTML” style=“color:red” title=“Definizione di HTML”> HTML
sta per HyperText Mark-up Language.</p> <br/><hr/><br/> <img src=“./Immagine.jpg” alt=“Immagine campione” width=“200” height=“100” /> <br/><a href=“http://www.corriere.it” target=“_blank”>Sito del corriere della sera</a> <br/><hr/><br/> <!-- Lista ordinata --> <ol> <li>Primo elemento.</li> <li>Secondo elemento.</li> </ol> <!-- Lista non ordinata --> <ul> <li>Elemento A.</li> <li>Elemento B.</li> </ul> </body> </html>
29/10/2013
2
Matteo Ceserani
Cos’è l’HTML
• HTML sta per HyperText Mark-up Language
• HTML non contiene istruzioni da eseguire, ma descrive il significato (semantica) e le caratteristiche che devono avere gli elementi di una pagina
• Un elemento è contenuto tra due tag: un tag di apertura e un tag di chiusura
• I tag si possono innestare uno dentro l’altro
• Un file HTML contiene la struttura logica di una pagina web, non l’aspetto che deve avere
• L’aspetto di una pagina web è definito nel suo foglio di stile (CSS)
29/10/2013
3
Matteo Ceserani
Struttura del documento
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
• Ogni tag è costituito da un nome contenuto tra parentesi ad angolo
• Il tag di chiusura è uguale al tag di apertura, ma contiene uno slash (<body>…</body>)
• Alcuni tag non possiedono il tag di chiusura (<br />)
29/10/2013
4
Matteo Ceserani
La dichiarazione DOCTYPE
La dichiarazione DOCTYPE deve essere posta all’inizio della pagina HTML, prima del tag <html>.
La dichiarazione DOCTYPE non è un tag html; è una direttiva per il browser che specifica con quale versione di HTML è stata scritta la pagina.
In HTML 4.01, La dichiarazione DOCTYPE si riferisce a un file Document Type Definition, in modo che il browser possa renderizzare correttamente il contenuto della pagina.
HTML5 non richiede il riferimento a un DTD, per cui la dichiarazione è semplicemente:
<!DOCTYPE html> 29/10/2013
5
Matteo Ceserani
La dichiarazione DOCTYPE
Esempio per HTML 4.01
HTML transitional contiene tutti gli elementi e gli attributi di HTML 4.01, anche quelli di stile o deprecati.
Non consente però l’uso dei frame
Per utilizzare i frame si usa la dichiarazione:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
29/10/2013
6
Matteo Ceserani
La sezione <head>
• La sezione head contiene informazioni generali sul contenuto della pagina
• Per esempio il tag <meta /> può specificare il tipo di contenuto della pagina
• L’unica informazione visualizzata dal browser è quella contenuta nell’elemento <title>
• Di solito il titolo della pagina è visualizzato nella linguetta della scheda
<head>
<meta content=“text/html” />
<title>La mia prima pagina web</title>
</head>
29/10/2013
7
Matteo Ceserani
La sezione <body>
Il contenuto della sezione body viene visualizzato nella finestra principale del browser
L’aspetto degli elementi visualizzati dipende da quanto specificato nei fogli di stile
<body>
<h1>Titolo principale</h1>
<p>Paragrafo.</p>
</body>
29/10/2013
8
Matteo Ceserani
La sezione <body>
29/10/2013 Matteo Ceserani
9
Il tag <body> possedeva in HTML4 numerosi
attributi.
Guardali.
Nessuno di questi attributi è supportato in HTML5.
Tutto quello che si faceva con quegli attributi deve essere fatto con script o fogli di stile.
Attributi di un tag
Molti tag possono contenere degli attributi che ne specificano le caratteristiche
Esistono due tipi di attributi:
Attributi che tutti i tag possono avere
Attributi propri di un tag particolare
<img src=“./immagine.jpg” />
<p class=“definizione” id=“limite”>
Definizione di limite
</p>
29/10/2013
10
Matteo Ceserani
Attributi di un tag
Attributi che (quasi) tutti i tag possono avere class specifica l’appartenenza del tag a una certa classe
id assegna uno specifico nome al tag
style definisce uno stile da applicare al tag (sconsigliato)
title contiene informazioni aggiuntive sul tag
(visualizzate quando il mouse si ferma sull’elemento)
Attributi propri dei singoli tag (Es.) src specifica il path dell’immagine da includere nella
pagina
Si veda in proposito: http://www.w3schools.com/sitemap/default.asp#references
29/10/2013
11
Matteo Ceserani
Intestazioni
È possibile creare intestazioni nei documenti html
utilizzando i tag headings
I tag headings vanno da <h1> a <h6>
Esempio <h1>Introduzione al linguaggio HTML</h1>
<h2>Generalità</h2>
<h2>Cos’è un tag</h2>
<h3>Apertura e chiusura dei tag</h3>
<h3>Proprietà di un tag</h3>
29/10/2013
12
Matteo Ceserani
Intestazioni
Le intestazioni sono importanti!
Non bisogna utilizzare le intestazioni per scrivere qualcosa in grande o in piccolo!
Le intestazioni devono rispecchiare la struttura logica della pagina
I motori di ricerca utilizzano anche (non solo) gli headings per indicizzare il contenuto delle pagine
Gli utenti scorreranno le pagine leggendo rapidamente gli headings
Occorre quindi scegliere con cura il testo da includere negli headings
29/10/2013
13
Matteo Ceserani
Linee
Il tag <hr /> disegna nella pagina una linea
orizzontale
Il tag <br /> viene renderizzato con un “a capo”
Si faccia attenzione al fatto che andare a capo in un file html non determina l’andare a capo nella pagina web renderizzata dal browser
Allo scopo è obbligatorio utilizzare il tag <br />
29/10/2013
14
Matteo Ceserani
Commenti
Un commento è una porzione di pagina web che non deve mai essere renderizzata
<!-- Apertura di un commento --> Chiusura di un commento
I commenti in html sono importanti come in qualsiasi
altro linguaggio di programmazione Rendono infatti più leggibile il codice
Possono contenere informazioni aggiuntive sulla pagina stessa
Per esempio: autore, data, etc…
29/10/2013
15
Matteo Ceserani
Paragrafi
I paragrafi sono definiti dal tag <p>
Esempio:
<p>Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>
Occorre ricordarsi di chiudere i tag di paragrafo I browser cercano sempre di rimediare alle mancanze del codice
Per esempio, la maggior parte dei browser interpreta correttamente questo codice:
<p>Questo è un paragrafo
<p>Questo è un altro paragrafo
Non bisogna però farci affidamento: si possono verificare comportamenti imprevisti
29/10/2013
16
Matteo Ceserani
Paragrafi
All’interno di un paragrafo non si possono gestire gli spazi aggiungendo spazi aggiuntivi o righe aggiuntive
Esempio. Il codice:
<p>Paragrafo con inserimento di spazi
e linee.</p>
verrà renderizzato dal browser nel seguente modo
Paragrafo con inserimento di spazi e linee.
Le interruzioni di linea devono essere introdotte con il tag <br /> Gli spazi aggiuntivi devono essere introdotti con la sequenza (Non-
Breaking Space)
29/10/2013
17
Matteo Ceserani
Formattazione del testo nei paragrafi
Tag Descrizione
<i> Formatta il testo incluso nel tag in corsivo. Da usare solo in casi estremi.
<b> Formatta il testo incluso nel tag in grassetto. Da usare solo in casi estremi.
<em> Il testo deve essere posto in enfasi (emphasized) rispetto al resto del paragrafo. Di solito i CSS formattano <em> in corsivo. Da preferire rispetto a <i>.
<strong> Il testo deve essere posto in rilievo rispetto al resto del paragrafo. Di solito i CSS formattano <strong> in grassetto. Da preferire rispetto a <b>.
<small> Il testo deve essere formattato in corpo minore rispetto al resto del paragrafo.
<sub> Testo formattato come pedice (sottoscritto).
<sup> Testo formattato come apice (soprascritto).
<ins> Il testo deve essere formattato come se fosse stato inserito successivamente.
<del> Il testo deve essere formattato come se fosse stato cancellato.
Tag di base per la formattazione del testo nei paragrafi
29/10/2013
18
Matteo Ceserani
Formattazione del testo nei paragrafi
Tag per la formattazione del testo in stile Computer Output
Nota bene. È necessario che i fogli di stile specifichino la formattazione dei diversi elementi. Se questo non accade, <code> <kbd> e <samp>
verranno formattati nello stesso modo, con un carattere a spaziatura fissa. <var> viene in genere formattato in corsivo.
Tag Descrizione
<code> Il testo è una porzione di codice.
<kbd> Il testo è un input immesso nel computer da tastiera.
<samp> Il testo è l’output prodotto da un programma.
<var> Il testo rappresenta una variabile o un placeholder in un’espressione.
<pre> Il testo racchiuso all’interno del tag verrà formattata con un carattere a spaziatura fissa, preservando le interruzioni di linea e la spaziatura.
29/10/2013
19
Matteo Ceserani
Formattazione del testo nei paragrafi
Esempio di testo preformattato.
<!DOCTYPE html>
<html>
<body>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
</body>
</html>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
• Risultato nel browser
29/10/2013
20
Matteo Ceserani
Formattazione del testo nei paragrafi
Tag Descrizione
<abbr> Il testo è un’abbreviazione o un acronimo.
<address> Il testo è un’informazione di contatto.
<bdo> Permette di specificare la direzione del testo attraverso il parametro dir.
dir=ltr Testo scritto da sinistra a destra Default
dir=rtl Testo scritto da destra a sinistra
<blockquote> Definisce una sezione che contiene una citazione da un’altra fonte.
<q> Citazione in linea.
<cite> Definisce il titolo di un’opera citata nel documento.
<dfn> Tag per creare definizioni.
Sigle, contatti, citazioni, definizioni.
29/10/2013
21
Matteo Ceserani
Formattazione del testo nei paragrafi
Scorrendo la lista dei tag per la formattazione del testo si può rimanere perplessi. Gli unici tag che dicono chiaramente come deve essere formattato un
testo (<i> e <b>) vengono sconsigliati. Per alcuni tag non si capisce davvero come dovrebbero essere
formattati. Es. Come si deve renderizzare una definizione (<dfn>)?
In realtà la formattazione è delegata ai fogli di stile, il linguaggio HTML si dovrebbe occupare solo di semantica del documento.
Il programmatore può delegare tutto ai fogli di stile predefiniti dei browser.
In alternativa può ridefinire lo stile di tutti i tag appena descritti.
Per i tag più particolari è praticamente costretto a farlo. 29/10/2013
22
Matteo Ceserani
Collegamenti
In HTML i collegamenti (link) vengono definiti dal tag <a>
Un link è una parola, un gruppo di parole o un immagine su cui si può cliccare per spostarsi su un altra pagina.
Quando si posiziona il cursore del mouse su un link, il puntatore assume la forma di una piccola mano.
L’attributo più importante del tag <a> è href, che permette di specificare la destinazione del collegamento.
Di default, l’aspetto dei link nei browser è il seguente: Link non visitato: testo blu sottolineato Link visitato: testo viola sottolineato Link attivo: testo rosso sottolineato
29/10/2013
23
Matteo Ceserani
Collegamenti
La sintassi generale di un link è la seguente
La a sta per anchor (àncora in senso marinaresco)
Esempio
Nota bene! Il testo del link non deve essere per forza un testo: può essere un immagine o qualsiasi altro elemento HTML.
<a href="url">Testo del link</a>
<a href="informatica.itealbinia.org">Visita il sito del
corso di informatica!</a>
29/10/2013
24
Matteo Ceserani
Collegamenti
L’attributo target permette di specificare dove occorre aprire la pagina web di
destinazione
Esempio
La pagina www.corriere.it viene caricata in una nuova finestra del browser.
I possibili valori dell’attributo target sono i seguenti
Nota bene. Si parla di frame anche se non sapete cosa sono. Un giorno lo scoprirete e capirete bene questa tabella.
<a href="http://www.corriere.it" target="_blank">Corriere della Sera</a>
Valore Destinazione
_blank Apre la pagina in una nuova finestra.
_self Apre la pagina nello stesso frame del link. È l’opzione di default.
_top Apre la pagina occupando tutta la finestra del frame del link.
_parent Apre la pagina nel frame padre del frame del link.
framename Apre la pagina nel frame di nome framename.
29/10/2013
25
Matteo Ceserani
Collegamenti
L’attributo id permette di creare link a posizioni specifiche all’interno di una pagina.
Esempio Nella pagina link.html si crea un link (qui sarebbe meglio dire un
ancoraggio) con id=“truccchi”
Nella stessa pagina, ad esempio in testa, si può creare un link alla posizione della sezione Trucchi utili.
Oppure si può creare un link a quella posizione da una pagina differente.
<a id=“trucchi”>Trucchi utili</a>
<!-- Qui di seguito un elenco di consigli per programmatori -->
<a href=“#trucchi”>Vai alla sezione Trucchi</a>
<a href=“link.html#trucchi”>Vai alla sezione Trucchi</a>
29/10/2013
26
Matteo Ceserani
Collegamenti
Attributo Significato
href Specifica l’url di destinazione del link
hreflang Specifica la lingua dell’oggetto destinazione del link. Elenco dei codici delle varie lingue.
media Specifica per quale tipo di dispositivi o di media è ottimizzata la destinazione del collegamento (vedi slide successive).
rel Specifica la relazione esistente tra la pagina corrente e la destinazione del link (vedi slide successiva).
target Specifica dove aprire la destinazione del link (vedi slide precedenti).
type Specifica il MIME-Type della destinazione del link. Elenco dei Media-Type specificati dalla IANA.
Attributi specifici del tag <a>.
29/10/2013
27
Matteo Ceserani
Collegamenti
Valore Significato
alternate Link a una versione alternativa del documento.
author Link a informazioni sull’autore del documento.
bookmark URL permanente utilizzabile come bookmark.
help Link a un help per il documento.
license Link a informazioni sul copyright del documento.
next Link alla pagina successiva.
nofollow Link da non seguire nell’indicizzazione automatica di un sito.
noreferrer Nell’header http che richiede la destinazione del link non deve essere inserito l’url del documento corrente (il referrer).
prefetch Il documento destinazione dovrebbe essere salvato nella cache.
prev Link alla pagina precedente.
search Link a uno strumento per la ricerca nel sito.
tag Tag (parola chiave) per il documento corrente
Possibili valori dell’attributo rel. L’attributo rel non viene utilizzato dal browser (tranne noreferrer), ma dai motori di
ricerca per l’indicizzazione automatica dei siti.
29/10/2013
28
Matteo Ceserani
Collegamenti
L’attributo media è una novità di HTML5.
Consente di specificare per quali dispositivi o per quali tipi di media la destinazione di un link è stata ottimizzata.
Si tratta di un attributo in sé puramente informativo. Può essere ovviamente utilizzato dai browser.
La sintassi dell’attributo media è la seguente:
Esempio: <a href="pagina.asp?output=print"
media="print and (resolution:300dpi)">
Versione stampabile.</a>
Media=“Media_query”
29/10/2013
29
Matteo Ceserani
Collegamenti
Struttura di una media query.
Una media query è composta da un insieme di elementi connessi tra loro dagli operatori logici AND, OR e NOT
Gli elementi possono essere di due tipi
Elementi che specificano un tipo di dispositivo
Elementi che specificano il valore di un parametro
Esempio
Questa query specifica un dispositivo (stampante) per cui il link è ottimizzato e il valore di un parametro del dispositivo stesso (la risoluzione espressa in punti per pollice)
print and (resolution:300dpi)
29/10/2013
30
Matteo Ceserani
Collegamenti
Elemento Dispositivo
all Default. La destinazione del link è adatta a qualsiasi dispositivo.
aural Sintetizzatori vocali.
braille Tavolette braille.
handheld Dispositivi palmari (schermi piccoli, banda limitata).
projection Proiettori.
print Stampanti.
screen Schermi di computer.
tty Terminali che utilizzano una griglia di caratteri a larghezza fissa.
tv Televisori (bassa risoluzione, limitate possibilità di scroll)
29/10/2013
31
Matteo Ceserani
Tipi di dispositivi.
Collegamenti
Elemento Proprietà
width Larghezza dell’area di visualizzazione.
height Altezza dell’area di visualizzazione.
device-width Larghezza del display del dispositivo o della carta (nel caso di stampanti).
device-height Altezza del display del dispositivo o della carta (nel caso di stampanti).
orientation Orientazione del display del dispositivo o della carta (nel caso di stampanti). Valori possibili: portrait, landscape.
aspect-ratio Rapporto larghezza/altezza dell’area di visualizzazione.
device-aspect-ratio Rapporto larghezza/altezza del display del dispositivo o della carta (nel caso di stampanti).
color Numero di bit per colore del display del dispositivo.
color-index Numero di colori del display del dispositivo.
monochrome Numero di bit per pixel del display di un dispositivo monocromatico.
resolution Densità di pixel del display del dispositivo (dpi o dpcm).
scan Tecnica di scansione di un display tv (interallacciata o progressiva). Valori possibili: interlace, progressive.
grid Specifica se la tecnica di visualizzazione del dispositivo è a griglia (1)o bitmap (0).
29/10/2013
32
Matteo Ceserani
Proprietà.
Collegamenti
I valori di tutte le proprietà possono essere specificati con i prefissi min- e max-.
Esempio. min-resolution=300dpi
Esempio. max-device-width=1280px
Fanno eccezione: orientation, scan, grid.
Le query possono essere costruite utilizzando gli operatori logici booleani di base.
29/10/2013
33
Matteo Ceserani
Simbolo Operatore
AND AND
NOT NOT
, OR
Immagini
29/10/2013 Matteo Ceserani
34
Le immagini sono definite dal tag <img />. Il tag <img /> è vuoto: possiede solo attributi e non ha il tag di chiusura.
L’attributo fondamentale del tag <img /> è src. Il valore dell’attributo src è l’URL dell’immagine da visualizzare.
Sintassi del tag <img />
<img src="URL" alt="Testo" />
L’URL indica la posizione in cui il file immagine è memorizzato.
L’immagine strullo.png memorizzata nella cartella strullate del dominio www.daverrazzano.it ha URL www.daverrazzano.it/strullate/strullo.png.
Il browser visualizza le immagini nel punto in cui si trova il tag <img />
Immagini
29/10/2013 Matteo Ceserani
35
L’attributo alt deve sempre essere specificato.
Serve per definire un testo da visualizzare nel caso in cui l’immagine non possa essere visualizzata. Per esempio il file indicato da src potrebbe essere stato rimosso.
L’attributo title permette invece di specificare il testo che viene visualizzato quando si posiziona il mouse sopra l’immagine.
Esempio
<img src =
"www.daverrazzano.it/strullate/strullo.png"
alt = "Foto di uno strullo" />
Immagini
29/10/2013 Matteo Ceserani
36
Gli attributi height e width permettono di specificare l’altezza e la larghezza di un’immagine.
L’unità di misura è il pixel.
<img src="www.daverrazzano.it/strullate/strullo.png"
alt="Foto di uno strullo" width="350" height="200" />
Specificare sia l’altezza che la larghezza di un’immagine è una
buona abitudine. In questo modo infatti il browser è in grado di riservare all’immagine lo spazio richiesto prima di caricare l’immagine stessa. Diversamente il layout della pagina potrebbe cambiare durante il
caricamento della pagina.
Immagini
29/10/2013 Matteo Ceserani
37
Attributi del tag <img>.
Attributo Descrizione
src URL dell’immagine.
alt Testo da visualizzare al passaggio del mouse o in caso di errori nel caricamento.
height Altezza in pixel.
width Larghezza in pixel.
crossorigin Attributo che permette di impostare una eventuale richiesta CORS. Valori possibili: anonymous, use-credentials.
L’approfondimento del meccanismo CORS (Cross-Origin Resource Sharing) esula dagli scopi di questa presentazione.
ismap Imposta l’immagine come una mappa server-side. Le coordinate in pixel della posizione del mouse al momento del click sull’immagine vengono inviate con metodo GET a un server web. Valore possibile: ismap.
usemap Imposta l’immagine come una mappa client-side. Il valore è l’id di una mappa (<map>) definita nel documento stesso: #mapname.
Immagini
29/10/2013 Matteo Ceserani
38
Definizione di mappe server-side.
L’attributo ismap permette di definire una mappa server-side.
Nel documento non è presente alcun codice per la gestione della mappa.
L’immagine che funziona da mappa viene inserita in un link (ovvero in un tag <a>).
Se si clicca in un punto dell’immagine viene inviata al server web specificato nel link una richiesta GET contenente le coordinate in pixel del punto cliccato.
Sarà poi il server a utilizzare le coordinate ottenute.
Immagini
29/10/2013 Matteo Ceserani
39
Definizione di mappe server-side.
Esempio
Vedi l’esempio in azione.
Si utilizza il server di Google solo per visualizzare le coordinate in pixel nell’URL della richiesta.
<a href="http://www.google.com">
<img src="mondo.png" width="1200px" alt="Stai navigando
per il mondo!" ismap="ismap" />
</a>
Immagini
29/10/2013 Matteo Ceserani
40
Definizione di mappe client-side. L’attributo usemap permette di utilizzare l’immagine come
una mappa.
Il codice per la gestione della mappa deve essere incluso nel documento stesso.
La gestione è quindi client-side.
Sintassi: usemap=“#mapname”
La definizione della mappa avviene attraverso il tag <map>.
Esempio: <img src="Mondo.png" width="1200px" alt="Stai navigando
per il mondo!" usemap="#World_Map" />
Immagini
29/10/2013 Matteo Ceserani
41
Creazione della mappa per l’attributo usemap.
Vedi l’esempio in azione.
Approfondisci l’utilizzo del tag <map>. Il tag <area> permette di specificare delle aree cliccabili
all’interno della mappa client-side. Approfondisci l’utilizzo del tag <area>.
<map id="World_Map" name="World_Map">
<area shape="rect" coords="500,50,700,170" href="Europa.html" alt="Europa" />
<area shape="rect" coords="500,170,750,450" href="Africa.html" alt="Africa" />
<area shape="rect" coords="760,0,1040,270" href="Asia.html" alt="Asia" />
<area shape="rect" coords="75,0,500,250" href="Nord_America.html" alt="Nord America" />
<area shape="rect" coords="250,260,460,520" href="Sud_America.html" alt="Sud America" />
<area shape="circle" coords="1000,400,100" href="Oceania.html" alt="Oceania" />
</map>
Tabelle
29/10/2013 Matteo Ceserani
42
Si possono creare tabelle in un documento utilizzando il tag <table>.
Esempio
<table border=“1”>
<!-- Contenuto della tabella -->
</table>
L’attributo border è l’unico supportato in HTML5
Serve a specificare se la tabella deve avere bordo oppure no.
Se non si desidera vedere il bordo impostare border=“0”
Tabelle
29/10/2013 Matteo Ceserani
43
Una tabella è composta da righe e colonne. Le righe vengono definite con il tag <tr>.
Le colonne vengono definite con il tag <td>.
Le colonne devono essere inserite come singoli elementi all’interno delle righe.
Esempio: 2 righe e 2 colonne
<table border=“1”>
<tr id=“R1”>
<td id=“R1C1”>R1C1</td>
<td id=“R1C2”>R1C2</td>
</tr>
<tr id=“R2”>
<td id=“R2C1”>R2C1</td>
<td id=“R2C2”>R2C2</td>
</tr>
</table>
Tabelle
29/10/2013 Matteo Ceserani
44
È possibile definire delle intestazioni per le colonne. Si utilizza il tag <th>.
I tag <th> devono essere inseriti nella prima riga della tabella.
Esempio
In genere le intestazioni vengono formattate in grassetto centrato
<table border=“1”>
<tr id=“Header”>
<th id=“H1”>Nome</th>
<th id=“H2”>Matricola</th>
</tr>
<tr id=“R1”>
<td id=“R1C1”>Matteo Ceserani</td>
<td id=“R1C2”>624923</td>
</tr>
<tr id=“R2”>
<td id=“R2C1”>Mario Rossi</td>
<td id=“R2C2”>328313</td>
</tr>
</table>
Tabelle
29/10/2013 Matteo Ceserani
45
La didascalia di una tabella è definita nel tag <caption>.
Esempio:
<table border=“1”>
<caption>
Elenco degli impiegati
</caption>
<tr id=“Header”>
<th id=“H1”>Nome</th>
<th id=“H2”>Matricola</th>
</tr>
<tr id=“R1”>
<td id=“R1C1”>Matteo Ceserani</td>
<td id=“R1C2”>624923</td>
</tr>
</table>
Tabelle
29/10/2013 Matteo Ceserani
46
I tag <colgroup> e <col>.
È possibile definire degli stili particolari per singoli gruppi di colonne di una tabella.
Esempio:
<table border="1"> <colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titolo</th>
<th>Prezzo</th>
</tr>
<tr>
<td>3476896</td>
<td>Introduzione all’HTML</td>
<td>€53</td>
</tr>
</table>
Tabelle
29/10/2013 Matteo Ceserani
47
I tag <colgroup> e <col>.
L’attributo <span> permette di specificare il numero di colonne del gruppo.
Altro esempio:
<table border="1">
<colgroup span="2" style="background:red"></colgroup>
<tr>
<th>ISBN</th>
<th>Titolo</th>
<th>Prezzo</th>
</tr>
<tr>
<td>3476896</td>
<td>Introduzione all’HTML</td>
<td>€53</td>
</tr>
<tr>
<td>5869207</td>
<td>Introduzione ai CSS</td>
<td>€49</td>
</tr>
</table>
Tabelle
29/10/2013 Matteo Ceserani
48
I tag <thead>, <tbody> e <tfoot>.
Questi permettono di creare tre sezioni distinte in una tabella: head, body e foot.
Attraverso i CSS è possibile stabilire la formattazione delle tre sezioni.
Esempio:
<table border="1"> <thead>
<tr><th>Mese</th><th>Spese</th></tr>
</thead>
<tfoot>
<tr><td>Totale</td><td>€1200</td></tr>
</tfoot>
<tbody>
<tr><td>Gennaio</td><td>€800</td></tr>
<tr><td>Febbraio</td><td>€400</td></tr>
</tbody>
</table>
Tabelle
29/10/2013 Matteo Ceserani
49
Attributo Descrizione
headers Specifica il riferimento di un tag <td> o <th> a un altro tag <th>.
Due esempi sono mostrati nella prossima slide.
colspan Indica il numero di colonne che il tag deve occupare.
rowspan Indica il numero di righe che il tag deve occupare.
scope Solo per il tag <th>. Specifica se un header di tabella si riferisce a una riga, una
colonna o a un gruppo di righe o colonne. Valori possibili: row, col, rowgroup, colgroup.
Attributi dei tag <th> e <td>.
Tabelle
29/10/2013 Matteo Ceserani
50
Attributo headers nel tag <td>.
Attributo headers nel tag <th>.
<table border="1">
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
</tr>
</table>
<table border="1">
<tr>
<th id="name" colspan="2">Name</th>
</tr>
<tr>
<th headers="name">Firstname</th>
<th headers="name">Lastname</th>
</tr>
</table>
Liste
29/10/2013 Matteo Ceserani
51
Le liste sono al giorno d’oggi gli elementi più utilizzati nei documenti HTML.
Hanno di fatto rimpiazzato le tabelle in questo primato.
Il motivo principale è legato alla diffusione dei CSS per gestire la formattazione degli elementi e il loro posizionamento nella pagina.
Una lista di fatto è un elenco neutro di elementi.
I diversi elementi possono poi essere formattati e posizionati nei modi più svariati utilizzando i CSS.
Esistono due tipi di liste: Liste ordinate: tag <ol>, ordered list.
Liste non ordinate: tag <ul>, unordered list.
Liste
29/10/2013 Matteo Ceserani
52
Liste ordinate: tag <ol>. Una lista ordinata è una lista in cui gli elementi sono specificati
secondo un ordine progressivo.
Nella versione base una lista ordinata viene formattata dal browser come un elenco numerato.
L’ordine tra gli elementi è definito dall’ordine in cui sono scritti gli elementi della lista.
Il tag <ol> definisce la lista.
Il tag <li> (list item) definisce i singoli elementi della lista.
<ol>
<li>Caffé</li>
<li>Latte</li>
<li>Orzo</li>
</ol>
Liste
29/10/2013 Matteo Ceserani
53
Liste ordinate: tag <ol>.
<ol type=“A” start=“3”>
<li>Caffé</li>
<li>Tea</li>
<li>Latte</li>
</ol>
<ol reversed=“reversed” start=“50”>
<li>Caffé</li>
<li>Tea</li>
<li>Latte</li>
</ol>
Attributo Descrizione
type Tipo della numerazione. Valori possibili: 1, A, a, I, i.
start Valore iniziale della numerazione.
reversed Numerazione per valori discendenti.
Liste
29/10/2013 Matteo Ceserani
54
Liste non ordinate: tag <ul>.
Nelle liste non ordinate non viene specificato un ordine tra gli elementi.
In ogni caso gli elementi sono mostrati nell’ordine in cui sono scritti.
In genere i browser marcano gli elementi di una lista non ordinata con dei bullet (tipicamenti piccoli cerchi neri).
Gli elementi vengono sempre specificati con il tag <li>.
<ul>
<li>Caffé</li>
<li>Latte</li>
<li>Orzo</li>
</ul>
Liste
29/10/2013 Matteo Ceserani
55
Esiste in realtà un terzo tipo di liste.
Liste di definizioni: tag <dl>, definition list.
Una lista di definizioni è una lista in cui ogni elemento è composto da due parti.
Elemento da definire: tag <dt>.
Descrizione (definizione) dell’elemento: tag <dd>.
L’aspetto in genere viene definito dai CSS.
Esempio:
<dl>
<dt>Insieme</dt>
<dd>Collezione di oggetti</dd>
<dt>Cardinalità</dt>
<dd>Numero di elementi di un insieme</dd>
</dl>
Form
29/10/2013 Matteo Ceserani
56
La parola form si può tradurre con l’italiano modulo
In HTML i form sono utilizzati per raccogliere dati dall’utente e inviarli a un server. Un form HTML può contenere elementi di input come caselle di
testo, checkbox, radio-button e altri tipi di campi di input.
Un form può inoltre contenere liste di selezione, aree di testo, legende, etichette e aggregati di elementi.
Il tag per inserire un form in un documento è il tag <form>.
<form>
<!-- Elementi di input -->
</form>
Form
29/10/2013 Matteo Ceserani
57
Nel web i form sono dappertutto…
All’interno di un form sono presenti essenzialmente: Campi per l’inserimento di dati da inviare al
server
Pulsanti per l’invio dei dati o il reset del form
È possibile inserire elementi più sofisticati quali: Elementi di calcolo
Supporto alla crittografia
Captcha
Form
29/10/2013 Matteo Ceserani
58
Elementi di input: il tag <input>. Il tag <input> rappresenta l’elemento più importante in un form. Viene infatti utilizzato per creare i campi in cui l’utente deve inserire
i dati da inviare al server.
Un elemento <input> può assumere forme estremamente varie, a seconda del valore che assume il suo attributo più importante: type.
Tipi di input più diffusi: Text Password Radio Checkbox Submit
Form
29/10/2013 Matteo Ceserani
59
Type Descrizione
button Pulsante generico.
checkbox Campo a scelta multipla. È possibile selezionare un numero arbitrario di valori proposti, anche nessuno.
color Permette di selezionare un colore attraverso una palette.
date Permette di selezionare una data visualizzando un calendario.
datetime Permette di inviare al server una data e un’ora. Ancora poco supportato dai browser.
datetime-local Permette di inviare al server una data e un’ora. Ancora poco supportato dai browser.
email Campo che controlla automaticamente la formattazione di un indirizzo mail.
file Permette di selezionare un file attraverso una casella di testo e un pulsante Scegli.
hidden Campo nascosto. Un valore viene inviato al server senza bisogno del controllo da parte dell’utente.
image Pulsante realizzato attraverso un’immagine.
month Permette di selezionare un mese e un anno da un calendario.
number Permette di selezionare un numero da un menù specificando il valore minimo e il valore massimo.
password Campo di testo che non visualizza il proprio contenuto.
Attributo type del tag <input>.
Possibili valori - 1
Form
29/10/2013 Matteo Ceserani
60
Type Descrizione
radio Campo a scelta multipla. È possibile selezionare solo un’opzione.
range Permette di selezionare un valore in un intervallo visualizzando una sliding bar.
reset Pulsante per la pulizia del form.
search Permette di inviare al server una stringa da ricercare in un sito.
submit Pulsante per l’invio dei dati al server.
tel Campo che permette di inviare al server un numero di telefono. Ancora non supportato dai browser.
text Campo di testo a linea unica.
time Permette di selezionare un’ora del giorno attraverso un orologio.
url Campo che controlla automaticamente la formattazione di un URL.
week Permette di selezionare una settimana di un anno attraverso un calendario.
Attributo type del tag <input>.
Possibili valori - 2
Prova i campi più carini (quelli introdotti con HTML5)
Form
29/10/2013 Matteo Ceserani
61
<input type=“text” />. Campo di input formato da una linea di testo
Larghezza di default: 20 caratteri.
Per impostare la larghezza desiderata: Size=“35”
Esempio:
<form>
Nome: <input type=“text” name=“Nome” /><br />
Cognome: <input type=“text” name=“Cognome” />
</form>
Form
29/10/2013 Matteo Ceserani
62
<input type=“password” />.
Campo di input per l’inserimento di una password.
Larghezza di default: 20 caratteri.
I caratteri immessi nel campo sono visualizzati come pallini o asterischi
Esempio:
<form>
Password: <input type=“password” name=“Pwd” />
</form>
Form
29/10/2013 Matteo Ceserani
63
<input type=“radio” />. Campo di input a scelta multipla.
Le scelte multiple sono realizzate con più elementi type=“radio” identificati dallo stesso nome (attributo name).
Una sola delle scelte proposte può essere selezionata.
Al server viene inviato il valore dell’attributo value associato alla scelta effettuata.
Esempio:
<form>
<input type="radio" name="Sesso" value="M" />Maschio<br />
<input type="radio" name="Sesso" value="F" />Femmina
</form>
Form
29/10/2013 Matteo Ceserani
64
<input type=“checkbox” />. Campo di input a scelta multipla.
Le scelte multiple sono realizzate con più elementi type=“checkbox” identificati dallo stesso nome (attributo name).
Si può selezionare un numero qualsiasi di opzioni (anche nessuna).
Al server vengono inviati i valori dell’attributo value associato alle scelte effettuate.
Esempio:
<form>
<input type="checkbox" name="Mezzo" value="Bike" />
Possiedo una bicicletta<br />
<input type="checkbox" name="Mezzo" value="Car" />
Possiedo un’automobile
</form>
Form
29/10/2013 Matteo Ceserani
65
<input type=“submit” />. Visualizza un pulsante per l’invio del modulo al server. I dati vengono inviati all’URL specificato nell’attributo action del
tag <form>. I dati vengono inviati attraverso una richiesta di tipo GET o POST, a
seconda di quanto specificato nell’attributo method del tag <form>.
<input type=“reset” />. Visualizza un pulsante per ripulire il form.
Esempio <form name="Login" action="login.php" method="get">
Utente: <input type="text" name="user" /><br />
Password: <input type="password" name="pass" /><br /> <input type="submit" value="Invia" />
<input type="reset" value="Cancella" /> </form>
Form
29/10/2013 Matteo Ceserani
66
Un esempio completo.
Vedi l’esempio in azione.
La password è trasmessa in chiaro!
<!DOCTYPE html>
<html>
<head>
<title>Esempio di FORM</title>
</head>
<body>
<form name="Prova" action="http://www.daverrazzano.it" method="GET">
Nome: <input type="text" name="Nome" /><br />
Cognome: <input type="text" name="Cognome" /><br />
<input type="radio" name="Sesso" value="M" />Maschio<br />
<input type="radio" name="Sesso" value="F" />Femmina<br />
<input type="checkbox" name="Mezzo" value="Bike" />
Possiedo una bicicletta<br />
<input type="checkbox" name="Mezzo" value="Car" />
Possiedo un'automobile<br />
Nome utente: <input type="text" name="Nick" /><br />
Password scelta: <input type="password" name="Pass" /><br />
<input type="submit" value="Invia" />
<input type="reset" value="Cancella" />
</form>
</body>
</html>
Form
29/10/2013 Matteo Ceserani
67
Altri attributi del tag <input>.
Il tag <input> supporta moltissimi attributi.
In genere questi attributi vengono utilizzati ciascuno per un particolare valore dell’attributo type.
Se hai voglia controllali tutti.
Form
29/10/2013 Matteo Ceserani
68
Il metodo GET invia i dati in chiaro nell’URL della richiesta. Decisamente poco sicuro.
Il metodo POST non inserisce i dati nell’URL, ma li incorpora nella richiesta HTTP. Sono comunque trasmessi in chiaro.
Il livello di sicurezza non migliora.
Come effettuare una trasmissione sicura? Crittografia
HTTPS <form name="Login"
action="https://www.mydomain.com/login.php"
method="post">
Form
29/10/2013 Matteo Ceserani
70
Trasmissione dei dati con action=“https://www.google.com” method=“POST”
Form
29/10/2013 Matteo Ceserani
71
Attributi del tag <form>.
Attributo Descrizione
accept-charset Indica il set di caratteri da utilizzare per compilare il form.
action URL cui inviare i dati del form.
autocomplete Indica se il form dovrebbe avere una funzione di autocompletamento. Valori possibili: on, off.
enctype Indica il tipo di codifica dei dati del form. Valori possibili: application/x-www-form-urlencoded, multipart/form-data, text/plain.
method Metodo da utilizzare per inviare la richiesta HTTP. Valori possibili: GET, POST.
name Specifica un nome per il form.
novalidate Indica che il form non dovrebbe essere validato dal server cui viene inoltrato. Valori possibili: novalidate.
target Indica dove visualizzare la risposta ricevuta dal server a seguito dell’inoltro del form. Valori possibili: _blank, _self, _parent, _top.
Form
29/10/2013 Matteo Ceserani
72
L’attributo action.
L’attributo action può assumere valori diversi da quelli di un
semplice URL di server web.
In particolare si può decidere di inviare i dati di un form attraverso una mail.
La sintassi è la seguente:
action=“mailto:username@mydomain.com”
In questo caso il metodo da utilizzare è POST
Form
29/10/2013 Matteo Ceserani
73
Il tag <select>. Il tag <select> permette di definire un menù a tendina per scegliere un
valore in un insieme di valori possibili.
Esempio:
<select>
<option value="volvo">Volvo</option>
<option value="saab" selected="selected" >Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Il tag <option> permette di definire le singole voci da inserire nel menù a tendina.
L’attributo selected permette di specificare quale voce mostrare come già selezionata. Può essere omesso, nel qual caso il menù a tendina mostra il primo elemento.
Il tag <optgroup> permette di raggruppare le voci del menù a tendina in gruppi. Vedi un esempio.
Form
29/10/2013 Matteo Ceserani
74
Bordi e didascalia in un form: <fieldset> e <legend>.
Esempio:
Di solito i browser visualizzano una cornice intorno ai campi con didascalia incorporata.
<form action="">
<fieldset>
<legend>Informazioni personali:</legend>
Nome: <input type="text" size="30" /><br />
E-mail: <input type="text" size="30"><br />
Data di nascita: <input type="text" size="10" />
</fieldset>
</form>
Form
29/10/2013 Matteo Ceserani
75
Esaurire tutte le possibilità offerte dai form richiederebbe molto altro tempo.
Per chi desidera approfondire ulteriormente l’argomento rinviamo al sito w3schools (ma ce ne sono molti altri)
Da questa pagina esplorando il sito potete ottenere tutte le informazioni possibili sui form in HTML5.
www.w3schools.com - Form in HTML
Blocchi
29/10/2013 Matteo Ceserani
76
In genere i tag HTML si dividono in due categorie.
Tag che vengono renderizzati dai browser su una nuova linea rispetto a ciò che li precede.
Block tags.
Esempi: <h1>, <p>, <ul>, <table>.
Tag che vengono renderizzati sulla stessa linea rispetto a ciò che li precede.
Inline tags.
Esempi: <a>, <img>, <td>, <iframe>.
Blocchi
29/10/2013 Matteo Ceserani
77
In HTML esistono due tag particolari che permettono di definire blocchi di codice generici. <div></div>
<span></span>
<div> e <span> possono contenere qualsiasi tipo di contenuto. Si differenziano solo per il comportamento
relativo all’allineamento rispetto a ciò che
li precede.
<div> è un block tag.
<span> è un inline tag.
Blocchi
29/10/2013 Matteo Ceserani
78
A cosa servono i tag <div> e <span>? Al loro interno si possono racchiudere blocchi di altri tag a piacere,
oppure del semplice testo.
In genere si assegnano a <div> e <span> o un attributo class o un attributo id, oppure entrambi.
Attraverso i fogli di stile CSS si determina poi la formattazione di tutti i blocchi appartenenti a una certa class, oppure dei blocchi aventi un certo id.
Questa tecnica permette anche la migliore gestione del layout della pagina, sempre attraverso i CSS.
Una volta si usavano le tabelle, ma è un uso scorretto del tag <table> (anche se tollerato).
Oppure si usavano i frame, ma in HTML5 sono stati eliminati del tutto.
<div> e <span> supportano solo gli attributi globali dei tag HTML, non hanno attributi propri.
Blocchi
29/10/2013 Matteo Ceserani
79
Esempio. <!DOCTYPE html>
<html>
<head>
<title>Quotidiano on-line dell'Albinia</title>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<body>
<div class="Header" id="MainBanner">
<!-- Testata del quotidiano on-line -->
</div>
<div class="Body" id="MainBody">
<!-- Corpo del sito -->
<span class="SideBar" id="NavBar">
<!-- Barra laterale di navigazione -->
</span>
<span class="Body" id="InnerBody">
<!-- Corpo della pagina -->
</span>
<span class="SideBar" id="NewsBar">
<!-- Barra laterale delle ultime notizie -->
</span>
</div>
<div class="Footer" id="MainFooter">
<!-- Piede di pagina del sito -->
</div>
</body>
</html>
Blocchi
29/10/2013 Matteo Ceserani
80
Esempio. Nell’esempio precedente si utilizza un foglio di stile CSS per
gestire l’aspetto dei blocchi del sito.
I fogli di stile permettono di gestire due aspetti distinti:
Formattazione del testo e degli altri elementi grafici dei blocchi
Disposizione dei blocchi nella pagina (layout)
HTML5 ha introdotto dei tag semantici specifici per le sezioni di un sito. <article>, <section>, <nav>, <header>, <footer>.
L’utilizzo dei tag <div> e <span> però è rimasto sostanzialmente lo stesso.
<iframe>
29/10/2013 Matteo Ceserani
81
Fino a qualche anno fa erano molto diffusi i cosiddetti frame.
I frame permettevano di creare uno scheletro di pagina web le cui diverse parti potevano poi essere popolate con altre pagine web.
I tag utilizzati per creare queste strutture erano <frameset> e <frame>.
Negli ultimi anni l’uso dei frame si è ridotto fino a scomparire.
Per questo motivo HTML5 non supporta i frame.
La possibilità di inserire in un documento html un altro documento html rimane attraverso il tag <iframe>.
<iframe>
29/10/2013 Matteo Ceserani
82
Il tag <iframe> definisce un frame inline. Permette quindi di incorporare all’interno di un documento
html un altro documento html.
La gestione della posizione del frame all’interno della pagina contenitore deve essere effettuata attraverso CSS.
Sintassi:
<iframe src="http://www.itealbinia.org">
Testo alternativo
</iframe>
Il testo alternativo viene visualizzato se il browser non supporta il tag <iframe>.
In realtà però il tag <iframe> è supportato da tutti i browser principali.
<iframe>
29/10/2013 Matteo Ceserani
83
Attributi del tag <iframe>.
Attributo Descrizione
src Specifica l’URL della pagina da inserire all’interno del frame.
height Specifica l’altezza in pixel del frame.
width Specifica la larghezza in pixel del frame.
name Specifica il nome del frame.
srcdoc Permette di specificare il codice HTML da visualizzare nel frame. Se è specificato, questo attributo rimpiazza la pagina indirizzata dall’attributo src. Viene utilizzato insieme agli attributi seamless e sandbox. Ancora poco supportato dai browser.
seamless Chiede al browser di rendere trasparente il frame rispetto al documento contenitore. Valore possibile: seamless.
sandbox Permette di specificare una serie di restrizioni da applicare alla pagina inserita nel frame. Valori possibili: “” (tutte le restrizioni applicate), allow-forms (permette di inviare form dal frame), allow-same-origin (permette di trattare il contenuto del frame come proveniente dal documento contenitore del frame), allow-scripts (permette di eseguire script dal frame), allow-top-navigation (permetteal contenuto del frame di caricare contenuti dal
documento contenitore del frame). Si può indicare più di un permesso riportando una lista separata da virgole.
La sezione <head>
29/10/2013 Matteo Ceserani
84
Il tag <head> può contenere diversi elementi.
Finora abbiamo visto solo <title> e <link>.
L’elenco completo dei tag inseribili nel tag <head> è il
seguente.
Tag Descrizione
<title> Specifica il titolo della pagina.
<meta> Permette di specificare metadati relativi al documento HTML.
<link> Definisce una relazione tra il documento HTML e una risorsa esterna. Uso tipico: link ai fogli di stile CSS.
<base> Permette di specificare un percorso base per tutti i collegamenti presenti nel documento.
<script> Permette di specificare uno script che il browser deve eseguire. Uso tipico: codice JavaScript.
<style> Permette di specificare codice CSS embedded per la formattazione e il layout del documento HTML.
La sezione <head>
29/10/2013 Matteo Ceserani
85
Il tag <base>.
Nell’esempio tutte le immagini verranno cercate nella cartella http://www.w3schools.com/images/.
Inoltre tutti i collegamenti si apriranno in una nuova finestra.
<head>
<base href="http://www.w3schools.com/images/" target="_blank" />
</head>
<body>
<img src="stickman.gif" width="24" height="39" alt="Stickman" />
<a href="http://www.w3schools.com">W3Schools</a>
</body>
La sezione <head>
29/10/2013 Matteo Ceserani
86
Il tag <link>.
Il tag <link> è utilizzato prevalentemente per i fogli di stile
CSS.
I suoi attributi sono i seguenti.
Attributo Descrizione
href URL della risorsa esterna collegata al documento.
hreflang Linguaggio in cui è scritto il file della risorsa esterna.
media Specifica attraverso una media query le caratteritiche del dispositivo su cui deve essere visualizzata la risorsa esterna.
rel Attributo obbligatorio. Specifica la relazione esistente tra il documento HTML e la risorsa esterna a esso collegata. Valori possibili: vedi slide successiva.
sizes Utilizzato solo per rel=“icon”. Dimensioni in pixel del file della risorsa esterna. Valori possibili: Height x Width, any.
type MIME_Type della risorsa esterna. Elenco dei MIME_Types.
La sezione <head>
29/10/2013 Matteo Ceserani
87
Il tag <link>.
Valori possibili dell’attributo rel.
Si tratta comunque di un elenco parziale, perché la situazione è ancora in evoluzione.
Valore Descrizione
alternate Link a una versione alternativa del documento.
archives Link a una collezione di materiale di interesse storico per il documento.
author Link all’autore del documento.
bookmark Link a un bookmark del documento (cioè a un punto chiave di entrata nel documento stesso).
external Link a una risorsa che non fa parte dello stesso sito del documento.
first Per documenti che fanno parte di una serie ordinata. Link al primo documento della serie.
help Link all’help del documento.
icon Link a un’icona che rappresenta il documento.
last Per documenti che fanno parte di una serie ordinata. Link all’ultimo documento della serie.
license Link a informazioni sulla licenza d’uso del documento.
next Per documenti che fanno parte di una serie ordinata. Link al documento successivo della serie.
La sezione <head>
29/10/2013 Matteo Ceserani
88
Valore Descrizione
nofollow Link che non dovrebbe essere seguito dagli strumenti di analisi automatica dei documenti. Esempio: motori di ricerca.
noreferrer Quando si segue il link non bisogna lasciar filtrare informazioni sul documento di origine.
pingback Link per permettere la notifica pingback agli autori del documento. Il meccanismo di pingback permette agli autori di un documento di essere informati quando un altro documento di terze parti contiene un link diretto al proprio.
prefetch Link a una risorsa esterna che dovrebbe essere precaricata e memorizzata prima della visualizzazione del documento.
prev Per documenti che fanno parte di una serie ordinata. Link al documento precedente della serie.
search Link a uno strumento di ricerca per il documento.
sidebar Link a un contenuto secondario del documento.
stylesheet Link a un foglio di stile per il documento.
tag Link a un tag (parola chiave) per il documento.
up Per documenti che fanno parte di una serie ordinata. Link al documento di livello superiore.
Il tag <link>.
Valori possibili dell’attributo rel.
La sezione <head>
29/10/2013 Matteo Ceserani
89
Il tag <link>.
In ogni caso di solito l’utilizzo del tag link si limita a qualcosa di simile:
Tutti gli altri utilizzi sono piuttosto esotici.
Se si vuole avere un idea del caos che regna sovrano durante la transizione verso HTML5:
http://microformats.org/wiki/existing-rel-values
<link rel="stylesheet" type="text/css" href="mystyle.css" />
La sezione <head>
29/10/2013 Matteo Ceserani
90
Il tag <meta>.
Questo tag permette di specificare metadati relativi al documento.
Un metadato è un dato che descrive un altro dato.
I metadati di un documento non fanno parte del documento, ma in qualche modo lo descrivono.
Attraverso il tag <meta> è possibile specificare dati per scopi diversi.
Dati utili ai motori di ricerca per indicizzare il documento.
Dati utili al browser per visualizzare correttamente il documento.
Dati utili ad altri servizi web.
La sezione <head>
29/10/2013 Matteo Ceserani
91
Il tag <meta>. Alcuni esempi.
<!-- Per i motori di ricerca: parole chiave -->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<!-- Per i motori di ricerca: descrizione del documento -->
<meta name="description" content="Free Web tutorials: HTML e CSS" />
<!-- Per i motori di ricerca: autore del documento -->
<meta name="author" content="Matteo Ceserani" />
<!-- Per il browser refresh ogni 30 secondi -->
<meta http-equiv="refresh" content="30" />
Attributi del tag <meta>
La sezione <head>
29/10/2013 Matteo Ceserani
92
Il tag <style>.
Il tag <style> permette di incorporare del codice CSS
all’interno di un documento HTML.
In linea di massima è meglio includere il codice CSS tramite il tag <link>.
<html>
<head>
<style type="text/css">
body {background-color:#CCCCCC;}
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
La sezione <head>
29/10/2013 Matteo Ceserani
93
Attributi del tag <style>.
Attributo Descrizione
media Specifica attraverso una media query le caratteristiche del dispositivo per cui è ottimizzato lo stile definito nel tag.
scoped Utilizzato insieme a un tag <div>, permette di limitare l’ambito dello stille a un singolo blocco di codice HTML. Valori possibili: scoped.
Attualmente non supportato dai browser.
type Specifica il tipo MIME della definizione dello stile. Valori possibili: text/CSS.
La sezione <head>
29/10/2013 Matteo Ceserani
94
Il tag <script>. Il linguaggio HTML è un linguaggio dichiarativo.
Non contiene istruzioni da eseguire, ma solo la descrizione di elementi del documento.
Per rendere dinamico il contenuto di un documento HTML occorre inserire al suo interno degli script, ovvero delle porzioni di codice in un qualche linguaggio di programmazione.
Chi esegue gli script inseriti in un documento HTML?
Il server web che genera il documento stesso.
In questo caso non rimane traccia dello script nel documento inviato al browser.
Si parla di script lato server o server-side
Il client che riceve il documento (il browser)
In questo caso lo script viene trasmesso al client insieme al codice HTML ed è visibile nel documento.
Si parla di script lato client o client-side
La sezione <head>
29/10/2013 Matteo Ceserani
95
Il tag <script> può essere inserito sia nella sezione <head> del documento che nella sezione <body>.
Se viene inserito nella sezione <head> lo script viene caricato
ma non eseguito.
È possibile eseguirlo in un secondo momento a seguito del verificarsi di certe condizioni. Si veda l’esempio nelle prossime slide.
Se viene inserito nella sezione <body> lo script viene caricato
ed eseguito immediatamente.
La sezione <head>
29/10/2013 Matteo Ceserani
96
Il tag <script>. Il tag <script> permette di inserire in un documento script client-
side.
Il linguaggio principe per gli script client-side è JavaScript (nome ufficiale: ECMAScript).
Attualmente ECMAScript è giunto alla versione 5.
Attributi del tag <script>.
Attributo Descrizione
async Indica che lo script deve essere eseguito in maniera asincrona mentre il caricamento della pagina continua. Valori possibili: async. Utilizzabile
solo per script esterni.
charset Specifica il set di caratteri dello script.
defer Indica che lo script deve essere eseguito dopo il caricamento completo della pagina. Valori possibili: defer. Utilizzabile solo per script esterni.
src Specifica l’URL di un file esterno contenente lo script. Se è indicato, il tag deve rimanere vuoto.
type Specifica il MIME Type dello script. Valore tipico: text/javascript.
La sezione <head>
29/10/2013 Matteo Ceserani
97
Il tag <script>.
Un esempio vale più di mille parole. Provalo!
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>My First JavaScript!</h1>
<p id="demo">This is a paragraph.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
CSS
29/10/2013 Matteo Ceserani
98
CSS - Cascade Style Sheet Il linguaggio HTML non era stato inizialmente pensato per
indicare la formattazione di un documento, cioè l’aspetto che la pagina doveva avere una volta renderizzato dal browser.
Doveva indicare solo la struttura del documento da un punto di vista logico e semantico.
Poi con HTML 3.2 è stato introdotto il tag <font>, insieme ad altri tag e attributi che permettevano di specificare font, colori, allineamenti e quant’altro.
La formattazione doveva essere specificata elemento per elemento in ogni pagina delle applicazioni web.
Gestire grosse applicazioni divenne di fatto impossibile.
Come svegliarsi da questo incubo?
HTML5: eliminati tutti i tag e gli attributi non semantici.
Un nuovo linguaggio per gestire la formattazione: CSS.
CSS
29/10/2013 Matteo Ceserani
99
Cos’è CSS? CSS è un linguaggio che permette di specificare l’aspetto che devono
avere i diversi elementi di un documento HTML a livello globale, senza dover aggiungere a ogni tag specifiche di stile.
Come si usa CSS? Esistono diversi modi di inserire il codice CSS in un documento.
Attributo style all’interno di un tag. È un metodo sconsigliato: si ricasca nel vecchio problema dei tag non semantici.
Tag <style> nella sezione head di un documento. Il codice si applica globalmente al documento. Meglio del primo ma ancora poco pratico.
Foglio di stile esterno collegato al documento. È il metodo migliore, permette di gestire in maniera centralizzata lo stile degli elementi di un’intera applicazione.
CSS
29/10/2013 Matteo Ceserani
100
Che sintassi ha CSS? CSS è un linguaggio complesso, padroneggiarlo è difficile. Questo non è un’introduzione a CSS: diamo solo gli elementi base della sintassi. Partiamo da un esempio.
/* Stile da applicare a tutti i tag <p> */
p
{
text-align: center;
color: black;
font-family: arial;
}
/* Stile da applicare a tutti gli elementi con id=“notizia” */
#notizia
{
text-align:center;
color:red;
}
/* Stile da applicare a tutti gli elementi con class=“center” */
.center {text-align:center;}
/* Stile da applicare a tutti i paragrafi con class=“center” */
p.center {text-align:center;}
CSS
29/10/2013 Matteo Ceserani
101
La sintassi generale di una regola di stile è la seguente.
/* Eventuale commento */
Selettore
{ Dichiarazione1;
Dichiarazione2;
...
}
Il selettore indica un tag, un id o una classe di elementi per cui è scritta la regola di stile.
O una combinazione delle tre cose.
Le dichiarazioni hanno la seguente sintassi. Proprietà: valore
Script server-side
29/10/2013 Matteo Ceserani
102
Con gli script lato client siamo in grado di produrre documenti HTML dinamici.
Ma dinamici in che modo? Supponiamo di dover realizzare un’applicazione per il commercio
elettronico. L’utente carica la pagina principale dell’applicazione. Inserisce in un form il proprio nome utente e la propria password. Il contenuto del form viene inviato al server web. Il server web invia all’utente una pagina personalizzata.
Non è pensabile di generare a priori tutte le pagine personalizzate per tutti gli utenti del sito, per inviarle quando vengono richieste. Le pagine dei singoli utenti devono essere generate al momento. Il server web esegue uno script che genera al momento il codice
HMTL delle singole pagine. Questo non si può fare con JavaScript. JavaScript viene eseguito dal
browser!
Script server-side
29/10/2013 Matteo Ceserani
103
Come si generano pagine personalizzate?
I documenti HTML vengono prodotti dal server web eseguendo degli script che processano i dati ricevuti dai form.
Questi script non compaiono nelle pagine effettivamente inviate ai browser: sono serviti per generarle.
Vengono quindi chiamati script lato client, o server-side.
Esistono molti linguaggi per la scrittura di script server-side. I più famosi sono:
PHP
ASP
JSP
Script server-side
29/10/2013 Matteo Ceserani
104
PHP (HyperText Pre-Processor)
Questa non è un’introduzione al PHP.
Facciamo solo un esempio per stimolare la curiosità.
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="fname">
Age: <input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
<html>
<body>
Welcome <?php echo $_POST["fname"]; ?>!<br>
You are <?php echo $_POST["age"]; ?> years old.
</body>
</html>
form.html
welcome.php