Corso XHTML
Cos’è l’HTML
HTML: HyperText Markup Language
HTML è il linguaggio per la pubblicazione di contenuti sul World
Wide Web
E’ basato su SGML (Standard Generalized Markup Language).
Il linguaggio HTML consente di:
Corso XHTML
Pubblicare documenti strutturati, contenenti titoli, sottotitoli, tabelle,
liste numerate, immagini, ecc.
Accedere a documenti pubblicati da altri con un click grazie ai
collegamenti ipertestuali
Includere oggetti multimediali (spread-sheets, video clips, sound clips,
...) direttamente nel documento
Creare form per l’invio di dati nelle transazioni con servizi remoti (es:
banking, acquisti e prenotazioni on-line, ricerche...)
I documenti scritti in HTML sono quindi:
Strutturati
Ipertestuali
Multimediali
2
Cosa significa “markup”
HTML è un linguaggio a marcatori: <tag>
I <tag> sono individuati da <>
Marcatori di apertura: <nome_tag>
Marcatori di chiusura: </nome_tag>
Un <tag> agisce su ciò che contiene:
<nome_tag>Contenuto del tag</nome_tag>
Un <tag> può avere degli attributi:
Corso XHTML
<nome_tag attributo=“valore”>
3
Visualizzare i sorgenti HTML
Corso XHTML
L’HTML di tutte le pagine Web è visibile a tutti
Le pagine on-line sono un’ottima raccolta di esempi da cui
imparare sempre cose nuove
I documenti HTML sono semplici file di testo con estensione .htm o
.html
Per editare file .html si possono utilizare editor generici (es.
Notepad) oppure editor WYSIWYG
4
Quanti HTML ?!?
Corso XHTML
HTML = Hyper Text Markup Language
HTM = Hyper Text Markup Language (per file con nomi
<= 8 caratteri ed estensioni = 3 caratteri)
DHTML = Dynamic HTML (HTML + JavaScript)
SHTML = Server-Parsed HTML (Apache)
XHTML = Extensible HyperText Markup Language (XML +
HTML)
5
Cos’è XHTML
Corso XHTML
XHTML: è l’ultima versione di HTML (4.01) in formato XML.
XML è un linguaggio di markup flessibile ma al tempo stesso
rigoroso nelle regole.
Con XHTML il W3C ha voluto creare un ponte tra vecchi standard
(compatibilità con HTML 4 ed i vecchi browser) e nuove tecnologie
(XML).
6
Perché usare XHTML
Creazione di documenti strutturati:
La rigorosità di XHTML consente la definizione dei soli dati nella pagina
web, niente codice di presentazione e di conseguenza documenti più
leggibili e più leggeri.
Linguaggio estensibile:
Essendo basato su XML (Extensible Markup Language) permette
l’integrazione con altri linguaggi, di conseguenza può essere ampliato
aumentandone le funzionalità.
Accessibilità:
Corso XHTML
Un documento XHTML valido è più compatibile con i browser alternativi.
Portabilità:
Un documento XHTML è più leggero di una pagina HTML tradizionale,
quindi sarà più facilmente gestibile da palmari o telefonini.
7
Regole di base
XHTML eredita le regole essenziali di XML:
Documento well-formed:
Ogni documento deve avere un’unica radice al cui interno saranno
inseriti tutti gli altri elementi.
Ogni elemento deve avere un tag di chiusura. Se vuoti devono
prevedere la forma abbreviata />.
Gli elementi devono essere nidificati in modo appropriato, cioè i tag di
chiusura devono seguire esattamente l’ordine inverso dei tag di
apertura.
I valori degli attributi (obbligatori) devono essere racchiusi tra singoli o
doppi apici.
Corso XHTML
Documento valido:
deve rispettare la DTD (Document Type Definition) di riferimento.
Una DTD contiene le regole di utilizzo dei tag.
8
La struttura gerarchica
Gli elementi di un documento HTML devono essere organizzati
secondo una struttura gerarchica.
<HTML>
Corso XHTML
<HEAD>
<BODY>
<DIV> <DIV>
<P>
9
La struttura base di un documento
Informazioni <?xml version="1.0"?>
sulla versione <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
HTML
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
utilizzata
Corso XHTML
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="it" lang="it">
Intestazione:
informazioni
sul contenuto
<head>
Corpo: il
contenuto
vero e
proprio
<body>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Primo esempio</title>
</head>
</body>
</html>
10
Informazioni sulla versione
Attualmente ci sono tre versioni di XHTML:
Corso XHTML
XHTML 1.0: è l’HTML 4.01 in versione XML ed è basato su una delle
DTD seguenti: transitional, frameset e strict
XHTML basic: è una versione ridotta di XHTML, specifica per i palmari e
gli smartphone. Contiene solo i tag supportati da tali dispositivi.
XHTML 1.1: rappresenta il futuro del linguaggio di markup. Basato sul
concetto di modularità, cioè ogni tag è raggruppato in moduli che
possono essere inclusi o esclusi.
11
La sezione <head>
Corso XHTML
Esempio di sezione <head>:
<head>
<title>Titolo della pagina</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<meta name="author" content="Mario Rossi" />
<meta name="copyright" content="&copy; 2007 DPSoft SPA" />
<meta name="keywords" xml:lang="en" lang="en"
content="one,two,three" />
<meta name="keywords" xml:lang="it" lang="it"
content="uno,due,tre" />
<meta name="date" content="2007-01-11T17:01:37+00:00" />
<meta http-equiv="Expires" content="Tue, 20 Sep 2008
14:25:27 GMT" />
</head>
12
La sezione <body>
<body> racchiude il contenuto del documento. Può avere i
seguenti attributi:
Corso XHTML
id, class, style, title, lang, xml:lang, dir e tutti gli
attributi che gestiscono gli eventi.
Scrivere il testo nel <body> non è sufficiente
<body>
Titolo
Sottotitolo
Testo indentato, di un paragrafo.
Altro testo a capo, sulla seconda riga.
</body>
13
Documenti strutturati
I contenuti devono essere strutturati
Corso XHTML
<body>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
<p>&nbsp;&nbsp;&nbsp;&nbsp;
Testo indentato, di un paragrafo.<br />
Altro testo a capo, sulla seconda riga.
</p>
</body>
Alcuni tag per strutturare i documenti:
<div>, <h1>, <h2>,…, <h6>, <p>, <br />, <hr />,
&nbsp;
14
Strutturare un paragrafo
Tag per strutturare elementi di una frase:
<em>: indica enfasi, anche <i> (sconsigliato).
<strong>: indica molta enfasi, anche <b> (sconsigliato).
<cite>: contiene una citazione
<code>: contiene un frammento di codice sorgente
<acronym>: indica un acronimo
Corso XHTML
Altri tag per strutturare elementi di una frase:
<dfn>, <samp>, <kbd> , <var>, <abbr>
Vedi esempio
15
Esercizio Struttura
Corso XHTML
Dato il testo del file Struttura.doc realizzare una pagina XHTML,
inserendo i tag appropriati relativi a titoli, termini in inglese, porzioni
di codice, ecc.
Elenchi non ordinati e ordinati
Corso XHTML
Esempio di lista non ordinata: <ul> </ul>
<ul>
<li>uno</li>
<li>due</li>
<li>tre</li>
</ul>
Esempio di lista ordinata: <ol> </ol>
<ol>
<li>uno</li>
<li>due</li>
<li>tre</li>
</ol>
Vedi esempio
17
Lista di termini
Una lista di termini prevede più tag:
Corso XHTML
tag di lista.
tag di termine.
tag di definizione.
<dl>
<dt>HTML</dt>
<dd>
HyperText Markup Language:linguaggio a
marcatori per la definizione di
ipertesti.
</dd>
</dl>
Vedi Esempio
18
Collegamenti ipertestuali
Collegamento tra una risorsa Web ed un’altra
Due estremità dette ancore
Sorgente
Destinazione
Una direzione
Corso XHTML
La destinazione può essere una risorsa Web qualsiasi
Elemento interno ad un documento HTML
Un altro documento HTML
Immagini
Suoni
File di differenti formati
19
Collegamenti interni al documento
Sorgente:
<a href="#sezione1">
Sezione 1</a>
Corso XHTML
Destinazione:
<a id="sezione1">
Questa è la sezione 1…
</a>
Vedi esempio
20
Collegamenti interni al sito
Sono quei collegamenti che puntano ad altre risorse del sito.
Il valore dell’attributo href deve contenere il nome del file da
caricare.
I percorsi non vanno mai indicati in maniera assoluta, ma relativa.
Esempi di URL relativi al documento attuale
Corso XHTML
news/pagina.html (sottocartella)
../news/pagina.html (cartella superiore)
../../news/pagina.html (2 cartelle superiori)
21
URI, URL e URN
Ogni risorsa nel Web è identificata da un URI
URI = URL + URN
URI: Uniform Resource Identifier
URL: Uniform Resource Locator
URN: Uniform Resource Name
Formato di un URL
Corso XHTML
protocollo + host + path + risorsa
ftp://ftp.ietf.org/rfc/rfc1808.txt
http://www.math.uio.no/faq/compression-faq/part1.html
mailto:[email protected]
news://it.comp.java
telnet://melvyl.ucop.edu
22
Link con indirizzi e-mail
<a
href="mailto:Nome Cognome
&lt;[email protected]&gt;
?subject=[html]&bcc=..."
>
Corso XHTML
Possono essere specificati anche i campi cc (carbon copy), bcc (blind
carbon copy) e body , oltre a subject
Vedi esempio
23
Le immagini
Il tag img consente l'inserimento delle immagini.
È un tag che non contiene nulla al suo interno.
Attributi obbligatori:
Corso XHTML
src: nome del file immagine da visualizzare.
alt: breve descrizione dell'immagine.
height e width: contengono le dimensioni (preferibilmente in pixel).
Queste informazioni è meglio inserirle per velocizzare il caricamento della
pagina (il browser continua a caricare i dati senza attendere il completo
download delle immagini).
Vedi esempio
24
Le tabelle
Corso XHTML
La tabella consente la disposizione per righe colonne di dati
omogenei.
Il tag <table> contiene tutta la struttura.
Ogni struttura di base contiene delle righe (<tr>) e ogni riga
contiene delle celle (<td>).
Ogni cella può contenere qualsiasi altro tag.
Vedi esempio
I raggruppamenti
Corso XHTML
La struttura per righe e per celle consente un layout limitato.
Tramite l’utilizzo di tag aggiuntivi è possibile creare raggruppamenti
di righe o di colonne.
Vedi esempio
Celle su più righe o più colonne
Corso XHTML
Ogni cella può essere espansa su più righe (rowspan) o più colonne
(colspan).
L’attributo colspan e rowspan accettano come valore il numero di
celle di espansione.
Vedi esempio
Cosa è possibile ottenere
Corso XHTML
L’uso accurato dei vari tag, permette di ottenere tabelle con un
layout molto accurato, paragonabile ai risultati conseguiti con
software per l’editoria.
Vedi esempio
Corso XHTML
Tabelle e layout di pagina
<table style="width: 100%; height: 100%">
<tr style="height:10%">
<td colspan="2">Intestazione</td>
</tr>
<tr style="height:80%">
<td style="width: 20%">Menù</td>
<td style="width: 80%">Contenuto</td>
</tr>
<tr style="height:10%">
<td colspan="2">Piè pagina</td>
</tr>
</table>
Vedi esempio
I form
I form servono per ottenere dati immessi dagli utenti.
Ha vari attributi:
action: indica a chi devono essere inviati i dati raccolti
un URI ‘http’ (per inviare i dati ad un programma)
un URI ‘mailto’ (per spedire i dati con la posta elettronica)
method: indica quale metodo HTTP usare per inviare i dati
get: i dati raccolti vengono aggiunti all'URI indicato dall'attributo action
utilizzando un punto interrogativo “?” come separatore
post: i dati raccolti vengono inclusi nel corpo della richiesta HTTP
Corso XHTML
enctype : indica il tipo di contenuto usato per inviare i dati raccolti al
server quando il valore di method è "post")
application/x-www-form-urlencoded: default
multipart/form-data: da usare con <input type="file">
I controlli disponibili
Gli utenti interagiscono con i <form> mediante i controlli
Per fare riferimento ad essi si utilizza l’attributo id e name per
retrocompatibilità.
Un controllo può avere un “valore iniziale” specificato in genere
dall’attributo value che poi può essere modificato
dall’utente.
Corso XHTML
Quando un modulo viene inviato i nomi dei controlli vengono
accoppiati ai loro valori attuali
Tipi di controlli
L’HTML dispone ormai di tutti i tipi di controlli presenti nei normali
applicativi grafici:
Corso XHTML
Pulsanti.
Caselle di spunta.
Caselle di testo.
Caselle di password.
Liste a selezione multipla.
Liste a selezione univoca.
Selettori di file.
Vedi esempio
Esercizio
Corso XHTML
Creare una pagina XHTML contenente un form che invia i dati a se
stessa e che abbia un aspetto simile al seguente:
Corso XHTML
34
La validazione del documento
Corso XHTML
I principali browser possono verificare la sintassi di un documento.
Nel caso di un documento con estensione .xml viene verificato solo
che il documento sia well-formed.
La convalida con la dtd invece non viene effettuata (anche se ogni
browser ha integrato un parser xml validante, di default disabilitato).
Nel caso di documenti con estensione .html invece non viene
effettuato alcun controllo.
In futuro si spera che questo controllo venga effettuato, obbligando i
webmaster ad una maggiore serietà nel redigere documenti html.
35
Esempio di verifica
Corso XHTML
Esempio di verifica effettuata da Firefox su di un documento html
rinominato con estensione .xml:
36
Elementi di blocco e inline
Elementi di blocco:
Inseriti nel documento, generano una nuova riga.
Possono contenere altri elementi di blocco, elementi inline e testo.
Ci sono alcuni elementi di blocco che hanno una priorità rispetto agli
altri (cioè non possono essere contenuti in altri elementi di blocco).
Elementi inline:
Corso XHTML
Sono elementi che non creano una nuova riga.
Possono contenere solo testo o altri elementi inline.
37
Differenze con HTML
Tag e attributi esclusi
Corso XHTML
Oltre alle regole di base descritte prima, la DTD XHTML Strict non
ammette più i seguenti tag:
<applet>, <basefont>, <center>, <dir>, <font>, <frame>,
<frameset>, <iframe>, <isindex>, <menu>, <noframes>, <s>,
<strike>, <u>
Il tag body accetta solo gli attributi essenziali (style, id, class, lang,
ecc.).
L’attributo align non è più utilizzabile nei tag a parte quelli per le righe
(tr) e per le celle (th e td).
L’attributo target dei link non è più supportato.
Le tabelle (table, tr e td) non supportano più i tag dei colori e degli
sfondi, nè quelli per definirne l’altezza e la larghezza.
L’attributo name è sconsigliato (con XHTML 1.1 è vietato), si deve usare
id. Per retrocompatibilità si usano tutti e due.
38
Differenze con HTML
La gestione degli script
Corso XHTML
Il tag <script> è supportato da XHTML (solo nella sezione head).
Ma alcuni caratteri particolari (le cosiddette entità generali di XML)
come <, >, &, “ e ‘ che coincidono con alcuni simboli usati in
Javascript, creano problemi con la validazione del codice.
La soluzione è usare le sezioni CDATA. Le sezioni CDATA in XML
consentono l’inserimento di testo non analizzato dal parser.
Il problema è che le sezioni CDATA non sono interpretate
correttamente dai browser (Pagina con CDATA, pagina senza
CDATA).
La soluzione è includere script esterni.
39
Differenze con HTML
Regole di annidamento
Con XHTML alcuni annidamenti di tag non sono permessi:
Corso XHTML
gli elementi <a>, <label>, <form> non possono contenere altri
elementi uguali a se stessi.
l'elemento <pre> non può contenere gli elementi <img>, <object>,
<big>, <small>, <sub>, <sup>
l'elemento <button> non può contenere <input>, <select>,
<textarea>, <label>, <button>, <form>, <fieldset>, <iframe>,
<isindex>
40
Scarica

Corso XHTML