XHTML. Dott. Nicole NOVIELLI Linguaggi di markup

Transcript

1 XHTML Dott. Nicole NOVIELLI Linguaggi di markup - di tipo procedurale: indicano le procedure di trattamento del testo aggiungendo le istruzioni che devono essere eseguite per visualizzare la porzione di testo referenziata (es. TeX) - di tipo descrittivo: usato per l annotazione di documenti la rappresentazione è affidata al software (browser) responsabile della visualizzazione (Es. HTML, SGML, XML) Non sono linguaggi di programmazione!

2 L'SGML (Standard Generalized Markup Language) Primo metalinguaggio di markup descrittivo standardizzato a livello internazionale Definisce I metodi di rappresentazione del testo in forma elettronica in modo indipendente dall'hardware e dal sistema utilizzato. Si basa sul concetto di definizione del tipo di documento o Document Type Definition (DTD) : per ogni documento è necessario definire la definizione del modo in cui i vari elementi del testo possono essere utilizzati. Ad es. una lettera contiene un mittente, uno o più destinatari, data, oggetto, corpo, l'indicazione di colui che la firma, in un certo ordine. La DTD deve prendersi carico di definire tutto questo, stabilendo ciò che è legale e cosa invece non lo è. Extensible HyperText Markup Language! XHTML sta per Extensible Hypertext Markup Language! XHTML è progettato per sostituire HTML! XHTML basato su HTML! XHTML è una versione più rigida e pulita di HTML! XML (Extensible Markup Language) è un linguaggio di markup progettato per descrvere dati! XHTML è HTML ridefinito come aplicazione XML! XHTML è un modo per rendere HTML affine allo standard XML

3 HTML vs. XML XML looks a lot like HTML, but-- HTML uses a fixed set of tags With XML you make up your own tags (and define what they mean in a separate document) HTML is designed to display data to humans XML is designed to describe data to computers Browsers are very tolerant of errors in HTML XML documents must be well-formed (syntactically correct) All browsers can display HTML Most modern browsers can display XML 5 From HTML to XHTML, I! XHTML elements must be properly nested <b><i>bold and italic</b></i> is wrong! XHTML documents must be well-formed <html> <head>... </head> <body>... </body> </html>! Tag names must be in lowercase! All XHTML elements must be closed! If an HTML tag is not a container, close it like this: <br />, <hr />, <image src="smile.gif" />! Note: Some browsers require a space before the / 6

4 Separazione tra: Concetto chiave! Presentazione: l aspetto del documento quando viene visualizzato tramite un browser! Struttura: la struttura vera e propria delle informazioni che compongono il documento, opportunamente annotate Editing di un documento! Creazione di un documento annotato tramite un editor di testo (es. Notepad, TextEdit, vi, emacs ecc )! Salvataggio del file utilizzando l estensione.html o.htm! Visualizzazione tramite browser (es. Explorer, Netscape, Firefox, Safari, )

5 Codice Esempio Visualizzazione nel browser Esempio Intestazione necessaria perché il documento sia conforme alla sintassi XHTML, vedremo meglio in seguito quando parleremo di XML

6 Esempio Commenti: aiutano il programmatore a capire/ricordare e sono di grande aiuto in fase di debug o modifica del documento Esempio HEAD: informazioni sul documento XML (ad es. il titolo) Può contenere i fogli di stile (vedremo cosa sono)

7 Esempio BODY: sezione in cui si trova il contenuto della pagina con le direttive (markup) per il browser relativamente alla visualizzazione della pagina From HTML to XHTML! XHTML elements must be properly nested <b><i>bold and italic</b></i> is wrong! XHTML documents must be well-formed <html> <head>... </head> <body>... </body> </html>! Tag names must be in lowercase! All XHTML elements must be closed! If an HTML tag is not a container, close it like this: <br />, <hr />, <image src="smile.gif" />! Note: Some browsers require a space before the / 14

8 Esempio TAG: INIZIO Esempio TAG: FINE

9 Attributi dei tag! Molti tag prevedono l uso di attributi! Gli attributi sono un modo per fornire informazioni aggiuntive sugli elementi individuati dai tag! Il browser può utilizzare queste informazioni aggiuntive per determinare come elaborare l elemento in funzione della visualizzazione! Ogni attributo ha un name e un value separati dal simbolo = Esempio L attributo xmlns è richiesto per il tag html e in questo caso assume valore

10 W3C XHTML Validation! I documenti HTML possono essere complessi e spesso può sorgere la necessità di accertarsi che siano stati scritti in conformità agli standard e in modo sintatticamente corretto! Il W3C (World Wide Web Consortium) mette a disposizione un servizio (MarkUp Validation Service) per la validazione di documenti (controllo sintattico) validator.w3.org Headings! Heading elements: utilizzati per specificare la relativa importanza di alcuni segmenti di testo rispetto al resto del documento (da h1 ad h6)! La dimensione di un heading può variare da browser a browser! L utilizzo di heading è consigliato per chiarire il focus della pagina e catturare l attenzione

11 Heading Link

12 Link Creazione di quattro collegamenti ipertestuali Il tag <a> Il tag <a> definisce un ancora è può essere usato in due modi:! To create a link to another document, by using the href attribute! To create a bookmark inside a document, by using the name attribute L attributo più importante è href che indica il link di destinazione <a href = " Per default, i link appaiono:! Blu: link non visitato! Viola: link sottolineato! Rosso: link attivo

13 <a href = " <a> </a> Crea un hyperlink o un bookmark (in questo caso un collegamento ipertestuale al sito web della deitel) href = " Attributo di a che indica il link di destinazione Deitel L oggetto su cui è attivo l hyperlink (in questo caso la parola Deitel ) Cliccando sul primo link ottengo la seguente visualizzazione

14 Creare un collegamento ad un indirizzo

15 Immagini Immagini Attributi alt (obbligatorio)! visualizzato in caso di errore (es. immagine non trovata)! può essere fornito come input a un software per ulteriori elaborazioni (es. programmi di sintesi vocale) src (obbligatorio)! Nome del file da visualizzare width e height! Specificano la dimensione dell immagine (larghezza ed altezza) così come si desidera che appaia nella visualizzazione tramite browser

16 Immagini e hyperlink Le immagini sono cliccabili e costituiscono un collegamento ipertestuale Liste non numerate

17 Il tag <ul> <ul> Unordered List begin <li><a href = " <li><a href = " <li><a href = " <li><a href = " <li> definisce un elemento della list (List Item) </ul> Unordered List end Elenchi numerati <ol> Ordered List begin <li>xml</li> <li>java</li> <li> List Item <li>xhtml</li> <li>scripts</li> <li>new languages</li> </ol> Ordered List end

18 Liste annidate Esercizio: provate a riprodurre la pagina Tabelle <table> definisce una tabella

19 Tabelle <tr> definisce una riga <th> intestazione <td> cella Tabelle <thead> definisce l intestazione della tabella

20 Tabelle <tfoot> definisce il footer della tabella Tabelle <caption> assegna una didascalia alla tabella

21 Tabelle  <tbody> racchiude  il corpo della tabella <tbody> <tr> <td>apple</td>  <td>$0.25</td> </tr> </tbody>. Tabelle: esercizio Scrivere il documento.html che consente di visualizzare la seguente tabella

22 rowspan e colspan Consentono di gestire situazioni in cui una cella spazia per più righe o più colonne   <tr>  <th rowspan = "2"> <img src = "camel.gif" width = "205 height = "167" alt = camel picture /> </th> </tr> Effetto di rowspan rowspan e colspan Consentono di gestire situazioni in cui una cella spazia per più righe o più colonne <tr>  <th colspan = "4"> <h1> header <h1>camelid comparison</h1> <p>approximate as of 6/2007</p> <p> paragrafo </th> </tr> <tr> Effetto di colspan

23 Form! Utilizzate per consentire all utente operazioni di input! L input dell utente solitamente è inviato ad un server web che esegue delle elaborazioni per fornire al client il risultato richiesto! Le risorse possono essere allocate sia sulla macchina server che sulla macchina client, a seconda dell architettura dell applicazione! La comunicazione tra client e server avviene sfruttando il protocollo HTTP (HyperText Transfer Protocol) Funzione di un form! Raccoglie input da parte dell utente e lo invia ad un web server cui richiede dei servizi, il quale fornisce la risposta in XHTML al browser che effettua la richiesta! e.s. form di login Componenti di un form - visuali: pulsanti, textbox, ecc ossia tutto ciò con cui l utente può interagire - non visuali (hidden inputs): codice di ausilio all invio dei dati raccolti tramite il form al server

24 Definizione di form Definizione di form <method> definisce il modo in cui i dati sono spediti al server action specifica l URL dell eventuale script, presente sul server web, da mandare in esecuzione per elaborare i dati del form

25 I metodi post e get! HTTP (Hypertext Transfer Protocol) è il protocollo usato per la trasmissione di informazioni sul web La riga di richiesta è composta da: <metodo, URI, versione del protocollo> URI: Uniform Resource Identifier! get: usato per ottenere il contenuto della risorsa indicata come URI (ad es. Il contenuto di una pagina HTML)! post: usato per inviare informazioni al server; l'uri indica che cosa si sta inviando e il body ne indica il contenuto. post e get: quale usare? Quick Checklist for Choosing HTTP GET or POST! Use GET if:! The interaction is more like a question (i.e., it is a safe operation such as a query, read operation, or lookup).! Use POST if:! The interaction is more like an order, or! The interaction changes the state of the resource in a way that the user would perceive (e.g., a subscription to a service), or! The user be held accountable for the results of the interaction. Fonte:

26 Definizione di form: definire gli input <input> definisce una componente di input del form x name definisce il nome della componente x type specifica il tipo di input - text : casella di testo - submit : pulsante invio - reset : pulsante reset - hidden : componenti non visuali x Definizione di form: input testuale type = text definisce una componente di input testuale del form size dimensione della casella di testo (quanti caratteri saranno visibili sul form visualizzato) x maxlenght lunghezza massima della stringa accettata in input

27 Definizione di form: pulsanti value definisce l etichetta (caption) del pulsante submit invia i dati al server x reset riporta tutti i campi del form al loro valore di default Definizione di form: hidden inputs type= hidden input nascosto, non definito dall utente x value attributo che, nell esemipo, specifica rispettivamente: - un indirizzo ( deitel@deitel.com ) a cui inviare i dati del form - l oggetto dell ( Feedback Form ) - l url della pagina da visualizzare una volta che l invio dei dati è completo ( main.html )

28 Consentire delle scelte checkbox Menu di opzioni radio button checkbox Consente all'utente di eseguire delle scelte multiple. <form action=ìì> <fieldset> <legend>lingue conosciute</legend><br> <input type="checkbox" name= italiano" value= italiano"/> italiano <br> <input type="checkbox" name= inglese" value= inglese"/> inglese <br> <input type="checkbox" name= francese" value= francese"/> francese </fieldset> </form>

29 checkbox Default è possibile assegnare uno o più valori di default utilizzando l attributo checked <form action=ìì>! <input name= italiano" type="checkbox" value= italiano" checked="checked"/> </form> Scelta disabilitata è possibile anche disabilitare alcune opzioni di scelta (appaiono in grigio) <form action=ìì>!<input name= italiano" type="checkbox" value= italiano" disabled="disabled"/> </form> radio button Scelta esclusiva: i campi devono avere lo stesso nome e differente valore <form>! <fieldset>!! <legend>lingue conosciute</legend>!! Italiano<input type="radio" name="lingua" value= ita"/>!! Inglese <input type="radio" name="lingua" value= eng"/>!! Francese <input type="radio" name="lingu" value= fran"/> </fieldset> </form>

30 radio button Default Anche in questo caso posso impostare un valore di default <form action=ìì>! italiano<input type="radio" name="lingua" value= ita checked="checked > </form> Disabilitare una scelta Anche in questo caso posso impedire una o più opzioni (appaiono in grigio) <form action=ìì>!italiano <input type="radio" name="lingua" value= ita disabled="disabled"/> </form> select (menu di opzioni) <form> <fieldset> <legend>lingue conosciute</legend> <select name="siti" > <option value="eng">inglese</option> <option value="ita" selected="selected">italiano</option> <option value="fran">francese </option> </select> </fieldset> </form>

31 <optgroup> Per raggruppare opzioni affini in sottogruppi, utile per migliorare la leggibilità di menu particolarmente lunghi L attributo multiple Consente la scelta multipla tramite l uso combinato del mouse e del pulsante ctrl (o cmd )

32 Esercizio Esercizio! Riprodurre la pagina.html riportata nella slide precedente! Arricchire il menu a tendina della pagina.html tramite l uso del tag <optgroup> e dell attributo multiple! Mostrare l effetto delle diverse impostazioni degli attributi checked, selected e disabled nei vari elementi di input che consentono la scelta da parte dell utente

33 Link interni! Consentono di creare un collegamento ad un altra sezione della stessa pagina web (scroll in su o in giù della pagina sino alla locazione desiderata)! E utile per saltare direttamente all informazione di cui l utente ha bisogno! Per creare un link interno si utilizzano coppie di ancore (una dove si trova il link, l altra sull area puntata dal link)! La prima è simile al tag per creare collegamenti ipertestuali esterni <a HREF="#name"> xxx </a>! La seconda è collocata sulla destinazione del link <a id= xxx name= nome > </a>! The text "name", must match that in the first anchor, for the link to work. Here is an example of an internal link. Link interni <a href= indirizzo_pagina#background"> Background</a> <a id="background" name="background">

34 Esercizio Riprodurre la seguente pagina.html con un i due link interni Go to Favorite Bugs e Go to Favorite Features Meta-elementi <meta>! Informazioni aggiuntive sul contenuto di un documento.html! Possono essere consultate dai motori di ricerca per catalogare le pagine web! Attributo name : specifica il tipo di meta-elemento! Attributo content : campo valore, contiene le info consultate dai motori di ricerca

35 <meta>: keywords del documento L attributo content fornisce ai motori di rierca una serie di keyword che descrivono il contenuto della pagina Specificare le keyword associate ad una pagina web può aumentarne la visibilità <meta> : description del documento L attributo content fornisce una descrizione articolata del contenuto della pagina I motori di ricerca utilizzano anche questa informazione per catalogare le pagine web A volte la descrizione viene mostrata come parte integrante dei risultati della ricerca (rappresenta un sommario dei contenuti della pagina)

36 Il contenuto del tag <meta> non è visibile! Riferimenti! Harvey M. Deitel and Paul J. Deitel, Internet & World Wide Web: How to Program, Ed. Pearson International Edition! (per il codice di esempio degli esercizi)