Corso FSE II – html a.a. 2005-2006 Lezione 5. corso fse dinformatica – a.a. 2005-2006 html html...
21
Corso FSE II – html a.a. 2005-2006 Lezione 5
-
Upload
nunziatina-miceli -
Category
Documents
-
view
213 -
download
0
Transcript of Corso FSE II – html a.a. 2005-2006 Lezione 5. corso fse dinformatica – a.a. 2005-2006 html html...
Corso FSE II – htmla.a. 2005-2006
Lezione 5
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6html
• 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)
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6xhtml
• 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)
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6documenti 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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6tag
• tag d'apertura: nome dell'elemento racchiuso da parentesi uncinate <h1>
• tag di chiusura: stesso nome d'elemento racchiuso tra parentesi unicinate, la prima seguita da slash </h1>
• tag vuoti: nome dell'elemento racchiuso da parentesi uncinate, l'ultima preceduta da slash <br/>
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 <h1>titolo</h1>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6attributi
attributi: nome dell'attributo seguito dal simbolo di uguaglianza e valore dell'attributo fra virgolette
<h1 name="titolo">titolo</h1>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6struttura 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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6preambolo e tag <html>
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 <html lang="it-IT">
• definisce l'inizio vero e proprio del documento
• lang: attributo che definisce la lingua corrente del documento
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6header
vi si può definire:
• titolo del documento: <title>titolo del documento</title>
• 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 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
• encoding universale: UTF-8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6corpo del testo
il corpo del testo è contenuto nell'elemento body (<body></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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6block 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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6link e ancore
• il tag <a> permette di definire:• link esterni al documento
<a href=“http://www.google.it”>google</a>• ancore interne
<a name=“#parte-del-documento”>parte</a>
• i due tipi possono essere combinati fra di loro• <a href=“www.google.it#bottom”>parte di
google</a>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6href
• La destinazione di un collegamento è definita dall’attributo 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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6immagini
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
• L’alternativa testuale viene utilizzata per descrivere l’immagine a chi non può visualizzarla
• gli screen-reader utilizzano quest’attributo
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6moduli
• il web permette l’iterazione fra utente e servizi offerti
• per raccogliere i dati che l’utente desidera inviare ad un servizio vengono utilizzati dei moduli o form.
• l’iterazione avviene attraverso• una pagina che raccoglie i dati• una pagina che raccoglie ed elabora i dati
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6form
• il tag form contiene tutti gli elementi per l’inserimento dei dati e descrive• la pagina di destinazione• il metodo di invio dei dati
<form action=“pagina_destinazione.php” method=“post”></form>
metodi d’invio• GET: i dati vengono inviati in blocco attraverso una
stringa posta nell’utl (query string), visibili nell’indirizzo
• POST: prima viene contattata la pagina ricevente e poi inviati i dati. I dati non appaiono nell’url
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6query string
• la query string si compone di una serie di nomi ai quali è associato un valore.
• la query è separata dall’url 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
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6input
• 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• <input type=“text” name=“testo”/> • <input type button=“” value=“invia”/> • <input type=“password” name=“password/>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6textarea
• una textarea è utilizzata per inserire grandi quantità di testo. del testo di default può essere inserito all’interno dei tag di apertura e chiusura
• in una textarea va definito il numero di colonne e righe
<textarea rows=“3” cols=“3” name=“areatesto”>testo</textarea>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6checkbox e radio
• i checkbox permettono di operare delle scelte multiple<input type="checkbox" name=“nome"
value=“valore"/>
• i radio button permettono di operare una scelta esclusiva fra un gruppo di opzioni<input type="radio" name="nome" value="valore“/>
cors
o f
se d
’in
form
ati
ca –
a.a
. 2005
-200
6menù d’opzioni
• attraverso l’elemento select è possibile creare dei menù di opzioni con selezioni singole o multiple<select name=“nome" >
• Le varie opzioni sono contenute dal tag select <option value=“valore">opzione</option>
• Attraverso l’attributo selected con valore selected si può predefinire un’opzione
• Attraverso l’attributo multiple con valore multiple si possono consentire scelte multiple
