Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Corso FSE II – html a.a. 2005-2006 Lezione 5
2
corso fse dinformatica – a.a. 2005-2006 html html (hypertext markup language) è un linguaggio di markup il termine markup (o marcatura) deriva dall'ambiente tipografico dove veniva usato per definire le annotazioni fatte su una bozza, allo scopo di segnalare al compositore o al dattilografo come stampare le parti di un testo html è uno standard non proprietario, ampiamente diffuso e supportato; a supporto di questo standard vi è il w3c (world wide web consortium)
3
corso fse dinformatica – a.a. 2005-2006 xhtml xhtml è una riscrittura di html, proposta nel tentativo di separare semantice e presentazione permette di fornire una struttura logico- semantica (definizione della semantica degli elementi) non prevede l'utilizzo di mark-up resentazionale (definizione della visualizzazione degli lementi)
4
corso fse dinformatica – a.a. 2005-2006 documenti html Ogni documento ipertestuale scritto in html deve essere contenuto in un file, la cui estensione deve essere.htm o.html L'atomo principale della sintassi di questo linguaggio è l'elemento Ogni elemento è racchiuso all'interno di tag, uno di apertura ed uno di chiusura
5
corso fse dinformatica – a.a. 2005-2006 tag tag d'apertura: nome dell'elemento racchiuso da parentesi uncinate tag di chiusura: stesso nome d'elemento racchiuso tra parentesi unicinate, la prima seguita da slash tag vuoti: nome dell'elemento racchiuso da parentesi uncinate, l'ultima preceduta da slash ogni tag di apertura deve essere seguito da un tag di chiusura fra il tag di apertura e quello di chiusura va posto il testo titolo
6
corso fse dinformatica – a.a. 2005-2006 attributi attributi: nome dell'attributo seguito dal simbolo di uguaglianza e valore dell'attributo fra virgolette titolo
7
corso fse dinformatica – a.a. 2005-2006 struttura dei documenti Un documento HTML si divide in tre parti preambolo: definisce il dialetto html utilizzato header: definisce dei metadati (non visualizzati) sul documento corpo del documento: contenuti
8
corso fse dinformatica – a.a. 2005-2006 preambolo e tag preambolo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> definisce che: il documento è html il documento è xhtml 1.1 fornisce l'URL in cui si trova la definizione formale della sintassi del dialetto tag html definisce l'inizio vero e proprio del documento lang: attributo che definisce la lingua corrente del documento
9
corso fse dinformatica – a.a. 2005-2006 header vi si può definire: titolo del documento: titolo del documento metadati del documento: varie informazioni sull'autore, il contenuto, la lingua particolare attenzione bisogna prestarla all'encoding: un documento di testo standard supporta solo i caratteri presenti nell'alfabeto inglese (non ci sono tra l'altro le lettere accentate si può specificare una codifica del file di testo diversa da quella standard encoding latino-occidentale: ISO-8859-1 encoding universale: UTF-8
10
corso fse dinformatica – a.a. 2005-2006 corpo del testo il corpo del testo è contenuto nell'elemento body ( ) e può contenere: elementi block-level, elementi inline Differenza: Elementi inline adiacenti vengono disposti orizzontalmente, mentre elementi block-level vengono disposti verticalmente. Un elemento block level di dimensioni non specificate tutta la larghezza messa a disposizione del suo box contenitore. In verticale occuperà l' altezza necessaria al suo contenuto. Un elemento inline occuperà sia in orizzontale che in verticale l' altezza necessaria al suo contenuto
11
corso fse dinformatica – a.a. 2005-2006 block e inline elementi block-level intestazioni: h1, h2, h3, h4, h5, h6 paragrafi: p elementi br e hr liste: ul, ol, dl elementi di liste: li citazioni di più righe: blockquote testo preformattato: pre blocchi generici: div elementi inline enfasi: strong, em bibliografia: q, cite, acronym, esempi: code, samp, kbd, var vari: abbr, del, ins, dfn link ipertestuali: a elementi inline generici: span
12
corso fse dinformatica – a.a. 2005-2006 link e ancore il tag permette di definire: link esterni al documento google ancore interne parte i due tipi possono essere combinati fra di loro parte di google
13
corso fse dinformatica – a.a. 2005-2006 href La destinazione di un collegamento è definita dallattributo href. href ha per valori url (uniform resource locator) assolute: http://www.google.it/support/webmasters/ relative: support/webmaster un percorso relativo indica la posizione di una risorsa in relazione alla posizione di quella corrente Se ci troviamo nella pagina identificata con url www.google.it, support/webmaster verrà risolto come www.google.it/support/webmaster
14
corso fse dinformatica – a.a. 2005-2006 immagini Le immagini si incorporano nel documento tramite l'elemento img (inline) il tag img richiede la specifica di due attributi src, il percorso dell'immagine (assoluto o relativo) alt, un'alternativa testuale o descrizione dell'immagine Lalternativa testuale viene utilizzata per descrivere limmagine a chi non può visualizzarla gli screen-reader utilizzano questattributo
15
corso fse dinformatica – a.a. 2005-2006 moduli il web permette literazione fra utente e servizi offerti per raccogliere i dati che lutente desidera inviare ad un servizio vengono utilizzati dei moduli o form. literazione avviene attraverso una pagina che raccoglie i dati una pagina che raccoglie ed elabora i dati
16
corso fse dinformatica – a.a. 2005-2006 form il tag form contiene tutti gli elementi per linserimento dei dati e descrive la pagina di destinazione il metodo di invio dei dati metodi dinvio GET: i dati vengono inviati in blocco attraverso una stringa posta nellutl (query string), visibili nellindirizzo POST: prima viene contattata la pagina ricevente e poi inviati i dati. I dati non appaiono nellurl
17
corso fse dinformatica – a.a. 2005-2006 query string la query string si compone di una serie di nomi ai quali è associato un valore. la query è separata dallurl da un punto di domanda le coppie nomi – valori sono separate fra loro da una e commerciale http://www.unive.it/nqcontent.cfm?Text=basso&a_id=24 url: http://www.unive.it/nqcontent.cfm query:?Text=basso&a_id=24 nomi – valori: Text=basso, a_id=24
18
corso fse dinformatica – a.a. 2005-2006 input il tag input, vuoto, crea vari elementi il tag input ha sempre associato un attributo type, per identificarne il tipo, ed uno name, che ne determina il nome utilizzato poi per ricavare i dati inviati
19
corso fse dinformatica – a.a. 2005-2006 textarea una textarea è utilizzata per inserire grandi quantità di testo. del testo di default può essere inserito allinterno dei tag di apertura e chiusura in una textarea va definito il numero di colonne e righe testo
20
corso fse dinformatica – a.a. 2005-2006 checkbox e radio i checkbox permettono di operare delle scelte multiple i radio button permettono di operare una scelta esclusiva fra un gruppo di opzioni
21
corso fse dinformatica – a.a. 2005-2006 menù dopzioni attraverso lelemento select è possibile creare dei menù di opzioni con selezioni singole o multiple Le varie opzioni sono contenute dal tag select opzione Attraverso lattributo selected con valore selected si può predefinire unopzione Attraverso lattributo multiple con valore multiple si possono consentire scelte multiple
Presentazioni simili
