Html

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/>  <ol> <li>Primo elemento.</li> <li>Secondo elemento.</li> </ol>  <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.

http://www.w3schools.com/tags/tag_body.asp

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

http://www.w3schools.com/sitemap/default.asp



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

 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


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


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


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


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>



<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

http://www.w3schools.com/tags/ref_language_codes.asp

http://www.iana.org/assignments/media-types






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


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


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


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


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


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


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>

Varie/Ismap.html

Immagini


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


41

Creazione della mappa per l’attributo usemap.


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>

Varie/Usemap.html

http://www.w3schools.com/tags/tag_map.asp






http://www.w3schools.com/tags/tag_area.asp




Tabelle


42

Si possono creare tabelle in un documento utilizzando il tag <table>.

Esempio

<table border=“1”>



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


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


<tr id=“R1”>

<td id=“R1C1”>R1C1</td>


</tr>

<tr id=“R2”>



</tr>

</table>

Tabelle


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


<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


45

La didascalia di una tabella è definita nel tag <caption>.

Esempio:


<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


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


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


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


49


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


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">[email protected]</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


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


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


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>


type Tipo della numerazione. Valori possibili: 1, A, a, I, i.

start Valore iniziale della numerazione.

reversed Numerazione per valori discendenti.

Liste


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


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


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>



</form>

Form


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


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


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


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)

http://www.w3schools.com/html/html5_form_input_types.asp

Form


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


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


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


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


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


66

Un esempio completo.


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>

Varie/FormG.html

Form


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.

http://www.w3schools.com/tags/tag_input.asp

Form


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


69

Trasmissione dei dati con metodo POST

Form


70

Trasmissione dei dati con action=“https://www.google.com” method=“POST”

Form


71

Attributi del tag <form>.


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


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:[email protected]”

In questo caso il metodo da utilizzare è POST

Form


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.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Form


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


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

http://www.w3schools.com/html/html_forms.asp






Blocchi


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


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


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


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



</div>

<div class="Body" id="MainBody">



<span class="SideBar" id="NavBar">



</span>

<span class="Body" id="InnerBody">



</span>

<span class="SideBar" id="NewsBar">



</span>

</div>

<div class="Footer" id="MainFooter">



</div>

</body>

</html>

Blocchi


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.

La sezione <head>


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>


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>


86

Il tag <link>.

Il tag <link> è utilizzato prevalentemente per i fogli di stile

CSS.

I suoi attributi sono i seguenti.


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>


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>


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>


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>


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>


91

Il tag <meta>. Alcuni esempi.



<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />



<meta name="description" content="Free Web tutorials: HTML e CSS" />



<meta name="author" content="Matteo Ceserani" />



<meta http-equiv="refresh" content="30" />

Attributi del tag <meta>

http://www.w3schools.com/tags/tag_meta.asp

La sezione <head>


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>


93

Attributi del tag <style>.


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>


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>


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>


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


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>


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>

Varie/EsempioScript.html

CSS


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


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


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


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


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


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


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

Html

Internet

Transcript of Html