Corso XHTML. 2 Cos’è l’HTML HTML: HyperText Markup Language HTML è il linguaggio per la...
40
Corso XHTML
-
Upload
tecla-lentini -
Category
Documents
-
view
214 -
download
2
Transcript of Corso XHTML. 2 Cos’è l’HTML HTML: HyperText Markup Language HTML è il linguaggio per la...
Corso XHTML
2
Co
rso
XH
TM
L
Cos’è l’HTML
HTML: HyperText Markup LanguageHTML è il linguaggio per la pubblicazione di contenuti sul World Wide WebE’ basato su SGML (Standard Generalized Markup Language).Il linguaggio HTML consente di:
Pubblicare documenti strutturati, contenenti titoli, sottotitoli, tabelle, liste numerate, immagini, ecc.Accedere a documenti pubblicati da altri con un click grazie ai collegamenti ipertestualiIncludere oggetti multimediali (spread-sheets, video clips, sound clips, ...) direttamente nel documentoCreare 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:StrutturatiIpertestualiMultimediali
3
Co
rso
XH
TM
L
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:<nome_tag attributo=“valore”>
4
Co
rso
XH
TM
L
Visualizzare i sorgenti HTML
L’HTML di tutte le pagine Web è visibile a tuttiLe pagine on-line sono un’ottima raccolta di esempi da cui imparare sempre cose nuoveI documenti HTML sono semplici file di testo con estensione .htm o .htmlPer editare file .html si possono utilizare editor generici (es. Notepad) oppure editor WYSIWYG
5
Co
rso
XH
TM
L
Quanti HTML ?!?
HTML = Hyper Text Markup LanguageHTM = 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)
6
Co
rso
XH
TM
L
Cos’è 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).
7
Co
rso
XH
TM
L
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à: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.
8
Co
rso
XH
TM
L
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.
Documento valido: deve rispettare la DTD (Document Type Definition) di riferimento.Una DTD contiene le regole di utilizzo dei tag.
9
Co
rso
XH
TM
L
La struttura gerarchica
Gli elementi di un documento HTML devono essere organizzati secondo una struttura gerarchica.
<HTML>
<BODY><HEAD>
<DIV> <DIV>
<P>
10
Co
rso
XH
TM
L
La struttura base di un documento
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Primo esempio</title>
</head>
<body>
</body>
</html>
Informazioni sulla versione HTML utilizzata
Intestazione: informazioni sul contenuto
Corpo: il contenuto vero e proprio
11
Co
rso
XH
TM
L
Informazioni sulla versione
Attualmente ci sono tre versioni di XHTML:XHTML 1.0: è l’HTML 4.01 in versione XML ed è basato su una delle DTD seguenti: transitional, frameset e strictXHTML 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.
12
Co
rso
XH
TM
L
La sezione <head>
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="© 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>
13
Co
rso
XH
TM
L
La sezione <body>
<body> racchiude il contenuto del documento. Può avere i seguenti attributi:
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>
14
Co
rso
XH
TM
L
Documenti strutturati
I contenuti devono essere strutturati<body>
<h1>Titolo</h1>
<h2>Sottotitolo</h2>
<p>
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 />,
15
Co
rso
XH
TM
L
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 acronimoAltri tag per strutturare elementi di una frase:<dfn>, <samp>, <kbd> , <var>, <abbr>
Vedi esempio
Co
rso
XH
TM
L
Esercizio Struttura
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.
17
Co
rso
XH
TM
L
Elenchi non ordinati e ordinati
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
18
Co
rso
XH
TM
L
Lista di termini
Una lista di termini prevede più tag: 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
19
Co
rso
XH
TM
L
Collegamenti ipertestuali
Collegamento tra una risorsa Web ed un’altraDue estremità dette ancore
SorgenteDestinazione
Una direzione
La destinazione può essere una risorsa Web qualsiasiElemento interno ad un documento HTMLUn altro documento HTMLImmaginiSuoniFile di differenti formati
20
Co
rso
XH
TM
L
Collegamenti interni al documento
Sorgente:<a href="#sezione1">Sezione 1</a>
Destinazione:<a id="sezione1">
Questa è la sezione 1…
</a>
Vedi esempio
21
Co
rso
XH
TM
L
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 attualenews/pagina.html (sottocartella)../news/pagina.html (cartella superiore)../../news/pagina.html (2 cartelle superiori)
22
Co
rso
XH
TM
L
URI, URL e URN
Ogni risorsa nel Web è identificata da un URIURI = URL + URN
URI: Uniform Resource Identifier
URL: Uniform Resource Locator
URN: Uniform Resource Name
Formato di un URLprotocollo + 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.javatelnet://melvyl.ucop.edu
23
Co
rso
XH
TM
L
Link con indirizzi e-mail
<a
href="mailto:Nome Cognome
<[email protected]>
?subject=[html]&bcc=..."
>
Possono essere specificati anche i campi cc (carbon copy), bcc (blind carbon copy) e body , oltre a subject
Vedi esempio
24
Co
rso
XH
TM
L
Le immagini
Il tag img consente l'inserimento delle immagini.È un tag che non contiene nulla al suo interno.Attributi obbligatori:
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
Co
rso
XH
TM
L
Le tabelle
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
Co
rso
XH
TM
L
I raggruppamenti
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
Co
rso
XH
TM
L
Celle su più righe o più colonne
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
Co
rso
XH
TM
L
Cosa è possibile ottenere
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
Co
rso
XH
TM
L
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
Co
rso
XH
TM
L
I form
I form servono per ottenere dati immessi dagli utenti.Ha vari attributi:
action: indica a chi devono essere inviati i dati raccoltiun 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 datiget: i dati raccolti vengono aggiunti all'URI indicato dall'attributo action utilizzando un punto interrogativo “?” come separatorepost: i dati raccolti vengono inclusi nel corpo della richiesta HTTP
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: defaultmultipart/form-data: da usare con <input type="file">
Co
rso
XH
TM
L
I controlli disponibili
Gli utenti interagiscono con i <form> mediante i controlliPer 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.
Quando un modulo viene inviato i nomi dei controlli vengono accoppiati ai loro valori attuali
Co
rso
XH
TM
L
Tipi di controlli
L’HTML dispone ormai di tutti i tipi di controlli presenti nei normali applicativi grafici:
Pulsanti.Caselle di spunta.Caselle di testo.Caselle di password.Liste a selezione multipla.Liste a selezione univoca.Selettori di file.
Vedi esempio
Co
rso
XH
TM
L
Esercizio
Creare una pagina XHTML contenente un form che invia i dati a se stessa e che abbia un aspetto simile al seguente:
34
Co
rso
XH
TM
L
35
Co
rso
XH
TM
L
La validazione del documento
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.
36
Co
rso
XH
TM
L
Esempio di verifica
Esempio di verifica effettuata da Firefox su di un documento html rinominato con estensione .xml:
37
Co
rso
XH
TM
L
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:Sono elementi che non creano una nuova riga.Possono contenere solo testo o altri elementi inline.
38
Co
rso
XH
TM
L
Differenze con HTML Tag e attributi esclusi
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.
39
Co
rso
XH
TM
L
Differenze con HTML La gestione degli script
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.
40
Co
rso
XH
TM
L
Differenze con HTML Regole di annidamento
Con XHTML alcuni annidamenti di tag non sono permessi: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>
