Corso FSE II – html a.a Lezione 5
corso fse dinformatica – a.a 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)
corso fse dinformatica – a.a 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)
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a attributi attributi: nome dell'attributo seguito dal simbolo di uguaglianza e valore dell'attributo fra virgolette titolo
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a preambolo e tag preambolo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN 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
corso fse dinformatica – a.a 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 encoding universale: UTF-8
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a href La destinazione di un collegamento è definita dallattributo href. href ha per valori url (uniform resource locator) assolute: 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 support/webmaster verrà risolto come
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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 url: query:?Text=basso&a_id=24 nomi – valori: Text=basso, a_id=24
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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
corso fse dinformatica – a.a 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