La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

Programmazione Web HyperText Markup Language (HTML) e Cascading Style Sheet (CSS) 2014/2015.

Presentazioni simili


Presentazione sul tema: "Programmazione Web HyperText Markup Language (HTML) e Cascading Style Sheet (CSS) 2014/2015."— Transcript della presentazione:

1 Programmazione Web HyperText Markup Language (HTML) e Cascading Style Sheet (CSS) 2014/2015

2 Programmazione Web - HTML e CSS2 HyperText Markup Language HTML (HyperText Markup Language) è un linguaggio di markup (di “marcatura”) per gli ipertesti Permette di indicare come disporre gli elementi (testo, immagini, tabelle etc) all'interno di una pagina Le indicazioni vengono date attraverso degli appositi marcatori, detti tag Un file HTML è un comune file di testo ASCII che viene interpretato da un qualsiasi Web browser per conoscere lo stile di presentazione delle informazioni in una pagina Web Attualmente, è disponibile la versione HTML5

3 2014/2015Programmazione Web - HTML e CSS3 HTML tag Ogni tag è formato da un nome, che ne contraddistingue la funzione, racchiuso da parentesi acute Solitamente gli elementi da visualizzare sono racchiusi tra un tag di apertura e uno di chiusura, che presenta il carattere “ / ” (slash) anteposto al nome del tag …

4 2014/2015Programmazione Web - HTML e CSS4 Annidamento dei tag I tag possono essere annidati a più livelli (!!! attenzione all’ordine di annidamento !!!) … Annidamento corretto Annidamento errato!!!

5 2014/2015Programmazione Web - HTML e CSS5 Gli attributi dei tag Un tag può avere uno o più attributi che forniscono ulteriori informazioni sullo stile di presentazione Gli attributi sono espressi nella forma attributo=“valore” Gli attributi vengono inseriti nel tag di apertura dopo il nome del tag stesso …

6 2014/2015Programmazione Web - HTML e CSS6 Struttura di un documento HTML Un documento HTML è un file ASCII racchiuso fra i tag e Presenta un’intestazione tra i tag e Presenta un corpo tra i tag e L’intestazione contiene informazioni sul documento Nel corpo troviamo il contenuto del documento e i tag per la resa visiva … … … …

7 2014/2015Programmazione Web - HTML e CSS7 Struttura di un documento HTML : elemento principale (radice) Contenuto:, (entrambi obbligatori) Attributi: lang, dir Questo elemento deve aprire ogni documento HTML : intestazione Contenuto: (obbligatorio),,,,, Attributi: lang, dir Contiene informazioni sul documento che solitamente non producono alcun output ma influiscono sulla presentazione del documento stesso : corpo Contenuto: blocco,,, Attributi: standard HTML Racchiude il vero contenuto del documento HTML

8 2014/2015Programmazione Web - HTML e CSS8 Classificazione degli elementi (I) Contenuto inline Il contenuto inline è rappresentato dal testo e dai seguenti elementi:,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, Contenuto blocco Gli elementi che costituiscono il contenuto blocco sono:,...,,,,,,,,,,,, Il contenuto di tipo flusso è dato dall’unione di inline e blocco

9 2014/2015Programmazione Web - HTML e CSS9 Classificazione degli elementi (II) Tag per controllare il flusso del testo nel documento:,,..,, Tag per la formattazione di base:,,,,,, Tag per la formattazione semantica:,,,,,,,,,,,,,,, Tag per la rappresentazione di liste:,,,,, Tag per la rappresentazione di tabelle:,,,,,,,,, Tag per la rappresentazione di collegamenti:,, Tag per l'inclusione di oggetti multimediali:,,, Tag per l'interazione con l'utente:,,,,..

10 2014/2015Programmazione Web - HTML e CSS10 Attributi standard HTML id: ID unico (utilizzato per riferirsi all’elemento negli script) class: lista di classi (utilizzati per attribuire uno o più stili globali all’elemento; la lista è delimitata da spazi) style: informazioni di stile (utilizzato per fornire uno stile CSS specifico all’elemento) title: titolo informativo (molti browser lo renderizzano come tooltip dell’elemento) lang: codice lingua (codici linguistici come da standard I18N, ad es. “it” o “en-us”) dir: direzione di scrittura (rtl, destra-a-sinistra, o ltr, sinistra-a-destra) onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup : gestori eventi (utilizzati per associare degli script agli eventi corrispondenti)

11 2014/2015Programmazione Web - HTML e CSS11 I contenitori HTML Esistono due elementi invisibili in HTML, che però hanno un ruolo fondamentale per l’utilizzo di caratteristiche avanzate come gli stili (in particolare usati con gli attributi class e id ) Questi due elementi sono e ; la loro semantica di base è praticamente nulla: rappresenta un blocco di testo (ma non è un paragrafo) è una parte del flusso testuale In pratica, il contenuto di un è preceduto e seguito da un ritorno a capo, mentre uno può trovarsi ovunque nel flusso del testo.

12 2014/2015Programmazione Web - HTML e CSS12 Formattazione semantica I phrase elements sono utilizzati per attribuire un significato (semantica) particolare ad alcune parti del testo La semantica di solito è resa esplicita da rendering particolari, ma può essere anche utilizzata per rendere il testo più facilmente analizzabile dai tool automatici : enfasi (di solito equivale a corsivo) : enfasi forte (di solito equivale a grassetto) : riferimento o citazione : testo di definizione (da non confondere con le liste di definizioni) : codice sorgente : esempio di output : testo scritto da tastiera (digitato dall'utente) : nome di variabile : abbreviazione (l'attributo title può essere usato per la forma completa) : acronimo

13 2014/2015Programmazione Web - HTML e CSS13 Citazioni : sono utilizzati per inserire citazioni (i browser dovrebbero inserire opportune virgolette prima e dopo la citazione) Contenuto: inline, blocco (indentata rispetto al resto) Attributi: HTML standard, cite (può essere usato per fornire l'URI del testo citato) : utilizzato per citare blocchi di testo : serve ad inserire brevi citazioni nel flusso del testo

14 2014/2015Programmazione Web - HTML e CSS14 Testo preformattato Contenuto: inline (con alcune esclusioni) Attributi: HTML standard Il rendering di HTML ignora gli spazi bianchi e i ritorni a capo nel testo. Il flusso del testo segue le sole regole dettate dagli elementi corrispondenti (,,...) e dalle dimensioni della finestra Con l’elemento si richiede al browser di rispettare la forma data al testo nel sorgente della pagina: il testo è renderizzato con un font a spaziatura fissa, gli spazi bianchi sono mantenuti e l’andare a capo automatico è disabilitato (!) Nel testo preformattato si possono comunque usare i tag HTML inline tranne,,,, e

15 2014/2015Programmazione Web - HTML e CSS15 Revisioni : testo inserito o cancellato Contenuto: inline o blocco Attributi: HTML standard, cite, datetime Questi elementi sono usati per indicare revisioni del testo L’attributo cite può essere usato per indicare una URI in cui si trovano dettagli sulla corrispondente revisione. Un’indicazione sintetica del motivo della revisione si può inserire anche nell’attributo title L’attributo datetime può essere usato per contenere la data/ora della revisione Sono gli unici due elementi HTML che possono essere usati sia come inline che come blocco.

16 2014/2015Programmazione Web - HTML e CSS16 Indirizzi : informazioni per contattare l'autore Contenuto: inline Attributi: HTML standard Questo elemento può esser usato per marcare il testo in esso contenuto come “contatto informativo” per il blocco in cui è inserito Di solito lo si usa a livello di corpo del documento ( ) o all’interno di un modulo ( ) (!) I browser potrebbero renderizzare le informazioni di contatto in maniera speciale, cambiandone posizione e formattazione (ad es. sempre all’inizio del blocco, o come popup attivato da un piccolo bottone specifico, ecc.)

17 2014/2015Programmazione Web - HTML e CSS17 Elenchi non ordinati Gli elenchi ordinati sono costituiti da una lista i cui elementi sono contraddistinti da un segno grafico (unordered list) è il tag che apre l’elenco non ordinato e che lo contiene. Lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (list item) è il tag che individua gli elementi dell’elenco non ordinato Testo che precede la lista primo elemento secondo elemento terzo elemento Testo che segue la lista Testo che precede la lista primo elemento secondo elemento terzo elemento Testo che segue la lista

18 2014/2015Programmazione Web - HTML e CSS18 Elenchi ordinati Gli elenchi ordinati sono costituiti da una lista i cui elementi sono contraddistinti da un numero o da una lettera crescente (ordered list) è il tag che apre l’elenco ordinato e che lo contiene. Lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (list item) è il tag che individua gli elementi dell’elenco ordinato Testo che precede la lista primo elemento secondo elemento terzo elemento Testo che segue la lista Testo che precede la lista 1. primo elemento 2. secondo elemento 3. terzo elemento Testo che segue la lista

19 2014/2015Programmazione Web - HTML e CSS19 Liste di definizioni Le liste di definizioni sono liste i cui elementi sono contraddistinti da un termine e una definizione (definition list) è il tag che apre la lista. Lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda (termine) e (definizione) sono i tag che individuano gli elementi che sono definiti

20 2014/2015Programmazione Web - HTML e CSS20 Tabelle (I) Le tabelle HTML offrono un sistema estremamente potente e versatile per disporre informazioni in righe e colonne Le tabelle non sono progettate per creare layout di pagina, ma solo per strutturare informazioni in forma tabulare; utilizzare le tabelle per creare layout rende questi ultimi poco portabili ed è fortemente sconsigliato Le tabelle fanno parte degli elementi di tipo blocco, quindi possono apparire direttamente nel di un documento o in un contenitore, e non devono mai essere nidificate in elementi come L’elemento base della definizione delle tabelle è

21 2014/2015Programmazione Web - HTML e CSS21 Tabelle (II) Le larghezze delle colonne e della tabella stessa (attributo width ) si possono specificare: in pixel ( width=”10” ) in percentuale, rispetto allo spazio disponibile per la tabella ( width=”10%” ) Solo per le colonne, si possono usare anche i seguenti sistemi: proporzionalmente, rispetto alla dimensione richiesta dalla tabella ( width=”10*” ) per richiedere il minimo spazio necessario, si può usare la forma width=”0*” Se non si specifica una larghezza per una tabella, lo spazio è quello necessario a dare larghezza minima a tutte le colonne

22 2014/2015Programmazione Web - HTML e CSS22 Tabelle (III) : definizione di una tabella Contenuto: caption (opzionale), sequenza di col o colgroup (opzionale), thead (opzionale), tfood (opzionale), tbody (implicito se non specificato) Attributi: HTML standard, cellspacing, cellpadding, width, border, rules, summary, frame Una tabella è definita dagli elementi che la compongono, che devono essere nell’ordine: una didascalia opzionale ( ) una definizione opzionale delle colonne/gruppi di colonne un'intestazione di tabella opzionale un piè di tabella opzionale il corpo della tabella, che contiene i dati veri e propri L’elemento, se presente, ha contenuto inline e rappresenta la didascalia della tabella, che potrà essere renderizzata un maniera opportuna dal browser

23 2014/2015Programmazione Web - HTML e CSS23 Tabelle (IV) L’attributo cellspacing determina lo spazio (in pixel) tra le celle e tra le celle più esterne e il bordo della tabella L’attributo cellpadding determina lo spazio (in pixel) tra il bordo di ciascuna cella e il suo contenuto L’attributo width specifica la larghezza della tabella, in pixel o in percentuale; si consiglia sempre di specificarlo per velocizzare il rendering (il valore di default è “il minimo necessario”) L’attributo border imposta lo spessore del bordo esterno della tabella; un valore pari a zero elimina il bordo (utile per utilizzare la formattazione avanzata dei bordi tramite CSS) L’attributo frame (void, above, below, hsides, vsides, lhs, rhs, box, border) determina quali dei bordi esterni della tabella saranno disegnati (con lo spessore dato da border); il default è box L’attributo rules (none, groups, rows, cols, all) determina quali dei bordi interni alla tabella (tra le celle) saranno disegnati (con lo spessore dato da border); il default è all

24 2014/2015Programmazione Web - HTML e CSS24 Tabelle (V) : righe di una tabella Contenuto: uno o più td e th Attributi: HTML standard, align, valign Le tabelle sono composte da una serie di righe ( ), ognuna della quali contiene una o più celle Il numero di massimo celle presenti su una singola riga determina il numero di colonne della tabella; il rendering mostrerà celle vuote a destra di ogni riga le cui celle sono minori del numero di colonne della tabella L’attributo align (left, right, center, justify, char) definisce l’allineamento orizzontale per tutte le celle della riga, mentre valign (top, bottom, middle, baseline) definisce quello verticale

25 2014/2015Programmazione Web - HTML e CSS25 Tabelle (VI) : celle e celle di intestazione di una tabella Contenuto: flusso Attributi: HTML standard, align, valign, rowspan, colspan, abbr, axis, headers, scope, width, height Ogni riga di una tabella contiene delle celle; le celle possono contenere contenuto arbitrario HTML, comprese altre tabelle, immagini, ecc. Le celle di intestazione sono identiche alle celle standard, ma il browser dovrebbe renderizzarle in maniera più evidente Tipicamente una cella rappresenta l’intersezione di una riga con una colonna, tuttavia gli attributi rowspan e colspan permettono di specificare l’estensione della cella, rispettivamente in righe e colonne Gli attributi abbr, axis, headers, scope sono utilizzati per fornire dati avanzati di accessibilità alla tabella Gli attributi width, height servono a fornire informazioni sulle dimensioni della cella; sono però sconsigliati: al loro posto andrebbero usati gli omonimi attributi degli elementi

26 2014/2015Programmazione Web - HTML e CSS26 Tabelle (VII) : raggruppamento di righe Contenuto: uno o più Attributi: HTML standard, align, valign Le righe di una tabella possono essere suddivise in tre gruppi: intestazione ( ), corpo ( ) e piè di tabella ( ) Tipicamente, le righe in e vengono poste rispettivamente all’inizio e alla fine della tabella; se la tabella è spezzata in più pagine, ogni segmento conterrà la stessa intestazione e piè di tabella Se si omettono i raggruppamenti, tutte le righe sono poste in un esplicito; non è possibile avere tabelle con soli e/o ; se specificati, questi due gruppi devono trovarsi entrambi all’inizio della definizione della tabella, prima del

27 2014/2015Programmazione Web - HTML e CSS27 Tabelle - Esempio Esempio di tabella Prima cella Seconda cella Terza cella Quarta cella Esempio di tabella Prima cella Seconda cella Terza cella Quarta cella

28 2014/2015Programmazione Web - HTML e CSS28 Tabelle - Esempio

29 2014/2015Programmazione Web - HTML e CSS29 Celle ipertrofiche: rowspan

30 2014/2015Programmazione Web - HTML e CSS30 Celle ipertrofiche: rowspan

31 2014/2015Programmazione Web - HTML e CSS31 Celle ipertrofiche: colspan

32 2014/2015Programmazione Web - HTML e CSS32 Celle ipertrofiche: colspan

33 2014/2015Programmazione Web - HTML e CSS33 Celle ipertrofiche

34 2014/2015Programmazione Web - HTML e CSS34 Gruppi di colonne : definizione di gruppi di colonne Contenuto: vuoto oppure uno o più Attributi: HTML standard, align, valign, span, width Gli elementi rappresentano raggruppamenti logici di (definizioni di) colonne, che i browser possono renderizzare in vario modo Uno o più elementi possono essere posti all’inizio della tabella (prima delle righe) in alternativa agli elementi Un vuoto rappresenta un numero di colonne pari al suo attributo span ; ciascuna colonna avrà la dimensione specificata dall’attributo width e le celle corrispondenti avranno l’allineamento definito da align e valign Per definire separatamente le caratteristiche di ciascuna colonna in un gruppo, si possono nidificare elementi all’interno di un ; le caratteristiche delle nidificate (compreso il loro numero totale) hanno la precedenza su quelle specificate globalmente sul

35 2014/2015Programmazione Web - HTML e CSS35 Gruppi di colonne: esempio

36 2014/2015Programmazione Web - HTML e CSS36 Gruppi di colonne: esempio

37 2014/2015Programmazione Web - HTML e CSS37 Link ipertestuali contenuto del link E' il tag che identifica i link, ossia gli elementi che, se cliccati, rimandano ad un punto diverso all’interno dello stesso ( href=“#bookmark” ) o di un altro documento ( href=“http:///www...” ), permettono di mandare un' ( href=“mailto:...” ), permettono di scaricare un file (per es., href=“fileName.zip” ) Se il link rimanda ad un punto particolare all'interno del documento, quel punto dovrà essere univocamente identificato all'interno del documento stesso tramite l'attributo id (per es., ) È possibile specificare la modalità con cui il browser deve aprire la destinazione del link (_blank, _self, che è anche il default, _parent, _top, “framename”) Il contenuto del link può essere testo o immagini, ma non si possono avere link nidificati

38 2014/2015Programmazione Web - HTML e CSS38 Relazioni tra documenti : link tra documenti Contenuto: vuoto Attributi: HTML standard, href, type, rel, rev L’elemento è utilizzabile più volte e solo nella del documento Un di default non genera link visibili all’utente, ma dichiara delle relazioni tra il documento corrente ed altre risorse; i browser possono sfruttare queste informazioni in vari modi I sono usati, ad esempio, per collegare un documento ai suoi fogli di stile, per specificare documenti alternativi in altre lingue, per definire una sequenza logica di lettura in un insieme di documenti, ecc.

39 2014/2015Programmazione Web - HTML e CSS39 Risoluzione delle URI relative : base per le URI relative Contenuto: vuoto Attributi: HTML standard, href, target Questo elemento, utilizzabile una sola volta nella del documento, definisce (attributo href ) la URI di base utilizzata per risolvere tutte le URI relative presenti nel documento L’attributo target può essere usato per definire il target di default in un documento con frames Se non è specificato, la base della URI del documento corrente viene usata per risolvere tutte le URI relative

40 2014/2015Programmazione Web - HTML e CSS40 Immagini (I) : inclusione di un'immagine Contenuto: vuoto Attributi: HTML standard, src, alt, longdesc, width, height, usemap Inserisce nel documento l’immagine esterna referenziata dall’URI nell’attributo src Il testo alternativo per l’immagine ( alt ) è una caratteristica essenziale per un documento HTML ad alta accessibilità L’attributo longdesc può essere usato per puntare alla URI di un documento che descrive nel dettaglio l’immagine Gli attributi width e height dovrebbero essere sempre usati per fornire al browser un suggerimento sulle dimensioni da riservare per l’immagine sulla pagina. Se non corrispondono alle dimensioni reali dell’immagine, questa verrà ridimensionata di conseguenza (in maniera proporzionale se si specifica solo uno degli attributi)

41 2014/2015Programmazione Web - HTML e CSS41 Immagini (II) : inclusione di un'immagine Contenuto: vuoto Attributi: HTML standard, src, alt, longdesc, width, height, usemap L’attributo usemap, se presente, permette di trasformare l’immagine un una client- side image map L’attributo usemap deve contenere il nome di una image map definita nello stesso documento tramite l’elemento Le aree dell’immagine definite dalla mappa diverranno cliccabili

42 2014/2015Programmazione Web - HTML e CSS42 Mappe immagine (I) : client-side image map Contenuto: blocco, Attributi: HTML standard, name L’elemento dichiara una client-side image map con il nome specificato dall’attributo name Le aree della mappa possono essere specificate tramite una serie di elementi o, entrambi nidificati nell’elemento L’uso di elementi è utile per creare mappe ad alta accessibilità, con un ricco contenuto testuale alternativo. In questo caso, il tag può essere arricchito con attributi quali shape e coords, propri del tag

43 2014/2015Programmazione Web - HTML e CSS43 Mappe immagine (II) : client-side image map area Contenuto: blocco, Attributi: HTML standard, shape, coords, href, alt Gli elementi nidificati in una definiscono le aree cliccabili di un’immagine e le relative destinazioni Ogni area ha una forma, determinata dall’attributo shape, che può valere rect, circle o poly L’attributo coords contiene le coordinate, separate da virgole, dei punti che definiscono la forma specificata: Per i rettangoli, le coordinate x e y degli angoli superiore sinistro e inferiore destro, Per i cerchi, le coordinate x e y del centro e il raggio, Per i poligoni, le coordinare x e y di tutti i vertici. La destinazione del link è specificata dall’attributo href Una descrizione testuale dell’area, specificata con l’attributo alt, è obbligatoria per una mappa ad alta accessibilità

44 2014/2015Programmazione Web - HTML e CSS44 Mappe immagine: esempio

45 2014/2015Programmazione Web - HTML e CSS45 Mappe immagine: esempio

46 2014/2015Programmazione Web - HTML e CSS46 Oggetti (dall'HTML4) : inclusione di un oggetto generico (per esempio, file multimediali audio/video, Java applets, oggetti ActiveX, Flash) Contenuto: flusso, Attributi: HTML standard, classid, data, codebase, codetype, type, standby, width, height Gli attributi classid e data possono essere usati per specificare (in maniera mutuamente esclusiva): –l’implementazione dell’oggetto: classid è una URI che punta all’implementazione dell’oggetto da includere (es. applet o altri piccoli programmi) –i dati che costituiscono l’oggetto: data è una URI che punta alla sorgente dati (es. immagini, video, audio) Per passare parametri all’oggetto caricato, si possono nidificare elementi ; gli attributi name e value di questi ultimi determinano le coppie (nome,valore) passate all’oggetto in fase di inizializzazione

47 2014/2015Programmazione Web - HTML e CSS47 Oggetti (dall'HTML4) : inclusione di un oggetto generico (per esempio, file multimediali audio/video, Java applets, oggetti ActiveX, Flash) Contenuto: flusso, Attributi: HTML standard, classid, data, codebase, codetype, type, standby, width, height L’attributo codebase può essere usato per risolvere le URI relative presenti in classid e data Gli attributi codetype e type specificano il tipo MIME rispettivamente per le risorse puntate da classid e data L’attributo standby può essere utilizzato per specificare un testo da mostrare durante il caricamento dell’oggetto Gli attributi width e height hanno lo stesso scopo descritto per l’elemento

48 2014/2015Programmazione Web - HTML e CSS48 Form HTML (1) I moduli o form sono tag HTML che ci permettono di interagire con la pagina web … L’attributo name indica il nome del form mentre l’attributo action indica l’azione da compiere, la pagina da richiamare, lo script da eseguire, etc. L’attributo method (get o post) permette di specificare il metodo di invio dei dati alla risorsa indicata

49 2014/2015Programmazione Web - HTML e CSS49 Controlli della form (I) Contenuto: vuoto Attributi: HTML standard, type, name, value, size, maxlength, checked, disabled, readonly L’elemento viene usato per generare gran parte dei controlli all’interno dei moduli; la chiave della sua versatilità è l’attributo type, che può assumere i seguenti valori: text: crea una riga di input testuale password: come text, ma maschera i caratteri digitati checkbox: crea una casella di controllo radio: crea un pulsante di opzione submit: crea un bottone per l’invio del modulo reset: crea un bottone per la reinizializzazione del modulo file: crea un controllo per l’upload di un file hidden: crea un campo nascosto nel modulo button: crea un bottone

50 2014/2015Programmazione Web - HTML e CSS50 Controlli della form (II) Contenuto: vuoto Attributi: HTML standard, type, name, value, size, maxlength, checked, disabled, readonly L’attributo value fornisce: la stringa di inizializzazione per i tipi text, password, hidden, file la label per i controlli di tipo submit, reset e button L’attributo size fornisce la larghezza del controllo, espressa in pixel o in caratteri per i tipi text e password L’attributo maxlength fornisce il massimo numero di caratteri digitabili nei campi di tipo text e password L’attributo booleano checked determina se i controlli di tipo checkbox e radio saranno inizialmente selezionati Gli attributi booleani disabled e readonly possono essere utilizzati per disabilitare e/o rendere di sola lettura i controlli.

51 2014/2015Programmazione Web - HTML e CSS51 Form – Esempio (I) First name: Last name: First name: Last name:

52 2014/2015Programmazione Web - HTML e CSS52 Form – Esempio (I) First name: Last name: First name: Last name:

53 2014/2015Programmazione Web - HTML e CSS53 Form – Esempio (II) I have a bike: I have a car: I have an airplane: I have a bike: I have a car: I have an airplane:

54 2014/2015Programmazione Web - HTML e CSS54 Form – Esempio (II) I have a bike: I have a car: I have an airplane: I have a bike: I have a car: I have an airplane:

55 2014/2015Programmazione Web - HTML e CSS55 Form – Esempio (III) Male: Female: When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked Male: Female: When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked

56 2014/2015Programmazione Web - HTML e CSS56 Form – Esempio (III) Male: Female: When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked Male: Female: When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked

57 2014/2015Programmazione Web - HTML e CSS57 Form – Esempio (V)

58 2014/2015Programmazione Web - HTML e CSS58 Form – Esempio (V)

59 2014/2015Programmazione Web - HTML e CSS59 Controlli della form (III) Contenuto: testo Attributi: HTML standard, name, rows, cols, disabled, readonly L’elemento crea un’area di testo ampia in cui l’utente può digitare più righe L’ampiezza dell’area visibile è determinata dagli attributi rows (righe) e cols (colonne); il numero massimo di caratteri digitabili non può essere però limitato a priori Il testo contenuto nell’elemento viene usato come valore iniziale (!) I tag HTML contenuti nel testo di non vengono interpretati

60 2014/2015Programmazione Web - HTML e CSS60 Controlli della form (IV) Contenuto: uno o più elementi e Attributi: HTML standard, name, size, multiple L’elemento crea un controllo lista contenente più opzioni, ciascuna rappresentata da un elemento L’attributo booleano multiple determina dell’utente può selezionare un o più elementi della lista L’attributo size indica quante delle opzioni debbano essere visibili contemporaneamente sul controllo Il valore iniziale e il valore assegnato a questo controllo è specificato tramite le e nidificate

61 2014/2015Programmazione Web - HTML e CSS61 Controlli della form (V) e Contenuto: : uno o più ; : testo Attributi: HTML standard, label, selected, disabled, value Gli elementi definiscono le opzioni selezionabili nei controlli ; gli elementi servono a raggruppare in modo da creare strutture logiche come i menu L’attributo label determina il testo visualizzato per le e le ; nel caso di, è possibile anche omettere la label e specificare il testo da visualizzare all’interno dell’elemento L’attributo value determina il valore dell’opzione, che sarà assegnato al nome del corrispondente campo in fase di invio del modulo; se non è specificato, verrà usato al suo posto il contenuto dell’elemento L’attributo booleano selected determina se l’opzione sarà inizialmente selezionata

62 2014/2015Programmazione Web - HTML e CSS62 Form – Esempio (IV) Volvo Saab Fiat Audi Volvo Saab Fiat Audi

63 2014/2015Programmazione Web - HTML e CSS63 Form – Esempio (IV) Volvo Saab Fiat Audi Volvo Saab Fiat Audi

64 2014/2015Programmazione Web - HTML e CSS64 Controlli della form (VI) Contenuto: flusso, eccetto elementi e tutti gli elementi usati nei moduli Attributi: HTML standard, name, value, type, disabled Gli elementi creano bottoni esattamente come gli elementi con il corrispondente type (che può essere submit, reset o button) La differenza è che il contenuto del bottone non è definito dall’attributo value, che qui rappresenta solo il valore dato al corrispondente nome quando il bottone viene premuto Il contenuto dell’elemento, che può essere HTML di qualsiasi tipo e lunghezza, verrà utilizzato per creare la “faccia” del bottone

65 2014/2015Programmazione Web - HTML e CSS65 Associare testo ai controlli Contenuto: inline Attributi: HTML standard, for L’elemento permette di associare una parte di testo inline a un controllo del modulo Il controllo associato è identificato dal valore dell’attributo for, che deve corrispondere all’ id (non al name !) di uno dei controlli del modulo corrente Il browser potrà, ad esempio, cambiare la renderizzazione del testo se il corrispondente controllo viene disabilitato Si possono associare più allo stesso controllo

66 2014/2015Programmazione Web - HTML e CSS66 Associare testo ai controlli Contenuto: inline Attributi: HTML standard, for L’elemento permette di associare una parte di testo inline a un controllo del modulo Il controllo associato è identificato dal valore dell’attributo for, che deve corrispondere all’ id (non al name !) di uno dei controlli del modulo corrente Il browser potrà, ad esempio, cambiare la renderizzazione del testo se il corrispondente controllo viene disabilitato (i) Si possono associare più allo stesso controllo

67 2014/2015Programmazione Web - HTML e CSS67 Raggruppare i controlli Contenuto: : flusso, un opzionale, : inline Attributi: HTML standard Gli elementi permettono di raggruppare logicamente parti di un modulo L’elemento, se specificato, fornisce una descrizione testuale del Questi elementi sono utili per garantire un’alta accessibilità ai moduli e facilitarne la compilazione

68 2014/2015Programmazione Web - HTML e CSS68 Frame (deprecated) I frame permettono di suddividere la finestra del browser in vari riquadri indipendenti Vantaggi evitare di ricaricare le parti comuni a più pagine di un sito mantenere sempre in vista alcune parti del layout (tipicamente il menù) non ripetere il layout in più file Svantaggi difficile indicizzazione da parte dei motori di ricerca problematica la stampa e il salvataggio dell’intera pagina

69 2014/2015Programmazione Web - HTML e CSS69 Per utilizzare i frame è necessario: impostare una pagina che dichiara la struttura che vogliamo utilizzare impostare una pagina HTML per ogni frame HTML Frame: funzionamento

70 2014/2015Programmazione Web - HTML e CSS70 Frame: definizione della struttura I frame sono realizzati tramite i tag e Il tag Definisce come dividere la finestra del browser in frame È definito tramite un set di righe e colonne Il valore associato a ciascuna riga o colonna definisce l’area dello schermo occupata dalla riga o dalla colonna, rispettivamente Il tag Definisce quale documento HTML mettere in ciascun frame

71 2014/2015Programmazione Web - HTML e CSS71 Frame – Esempio (I) Your browser does not handle frames! Your browser does not handle frames!

72 2014/2015Programmazione Web - HTML e CSS72 Frame – Esempio (I)

73 2014/2015Programmazione Web - HTML e CSS73 Frame – Esempio (II)

74 2014/2015Programmazione Web - HTML e CSS74 Frame – Esempio (II)

75 2014/2015Programmazione Web - HTML e CSS75 La pagina “tryhtml_contents” Frame a Frame b Frame c Frame a Frame b Frame c

76 2014/2015Programmazione Web - HTML e CSS76 HTML5: nuovi elementi Vengono introdotti elementi specifici per contenuti multimediali (tag e ) Vengono estesi a tutti i tag alcuni attributi, in particolare quelli relativi all'accessibilità Supporto dell'elemento Canvas per utilizzare Javascript al fine di creare animazioni e grafica bitmap Introduzione della geolocalizzazione, soprattutto per la diffusione dei sistemi operativi mobili Android e IOS I cookie vengono sostituiti da Web Storage, più efficiente Introduzione dei Web Workers, programmi Javascript standardizzati Vengono introdotti altri raffinamenti, come regole più stringenti sulla strutturazione del testo e alcuni controlli aggiuntivi, mentre vengono deprecati alcuni elementi scarsamente utilizzati (e.g., a favore di ) o eliminati elementi considerati dannosi per l'accessibilità (e.g., i frame)

77 2014/2015Programmazione Web - HTML e CSS77 Fogli di stile : foglio di stile incorporato Contenuto: testo Attributi: type, media Uno o più elementi, posti nella del documento, permettono di incorporare nello stesso (frammenti di) fogli di stile L’attributo type specifica il tipo MIME dello stile (ad esempio text/css per i fogli di stile CSS) L’attributo media permette di specificare i dispositivi per cui lo stile è stato progettato I fogli di stile possono essere anche importati dall’esterno con il tag ; inoltre, è possibile specificare uno stile specifico per ogni elemento HTML tramite l’attributo standard style L’attributo standard class permette infine di raggruppare diversi elementi HTML in classi, utili per poter attribuire loro uno stile uniforme

78 2014/2015Programmazione Web - HTML e CSS78 CSS: definizione CSS è l’acronimo di Cascading Style Sheets ossia fogli di stile a cascata Strumento che permette di separare il contenuto di una pagina Web dalla sua impaginazione grafica File di testo che definisce delle regole di formattazione da applicare alla pagina HTML Viene applicato ad un file HTML

79 2014/2015Programmazione Web - HTML e CSS79 CSS: vantaggi I CSS permettono la separazione del contenuto dallo stile quindi Migliore gestione della grafica: è possibile scegliere il font desiderato, gestire l’interlinea e la spaziatura dei contenuti della pagina in modo facile ed efficiente Modifica semplice dell’impaginazione (layout): modificando una regola di formattazione è possibile modificare l’aspetto di più pagine contemporaneamente Accessibilità: eliminando l’uso improprio di elementi HTML per la grafica e l’impaginazione (es. tabelle) si ottengono siti più facilmente navigabili dai programmi di lettura video

80 2014/2015Programmazione Web - HTML e CSS80 Collegare CSS e HTML Per collegare il file CSS ad un file HTML è necessario utilizzare il tag nell’intestazione della pagina Web 1. rel : attributo obbligatorio, descrive il tipo di relazione tra il documento e il file collegato 2. href : attributo obbligatorio, serve a definire l'URL assoluto o relativo al foglio di stile 3. type : attributo obbligatorio, identifica il tipo di dati da collegare. Per i CSS l'unico valore possibile è text/css 4. media : attributo opzionale, identifica il supporto (screen, print, etc) cui applicare il foglio di stile

81 2014/2015Programmazione Web - HTML e CSS81 CSS ed ereditarietà Meccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti Struttura del documento Titolo Primo paragrafo Secondo paragrafo Un elemento si dice genitore quando contiene altri elementi. Un elemento si dice figlio quando è racchiuso in un altro elemento. BODY è genitore (parent) di H1, DIV e P H1 è figlio (child) di BODY BODY è un antenato (ancestor) di B B è un discendente (descendant) di BODY

82 2014/2015Programmazione Web - HTML e CSS82 Regole CSS: sintassi Tre parti fondamentali: un selettore, una proprietà e un valore Selettore: l’elemento (tag) HTML di cui definire lo stile; è possibile raggruppare più selettori, separandoli con una virgola (es. h1,h2,h3 {color: green} ) Proprietà: l’attributo che si desidera modificare; se si vogliono modificare più proprietà, vanno inserite separate da ‘ ; ’ (es. {text-align:center; color: red} ) Valore: il valore che deve assumere l’attributo modificato; se il valore è costituito da più parole, queste vanno messe tra virgolette e separate da uno spazio (es. {font: “ sans serif ” } ) selettore {proprietà: valore}

83 2014/2015Programmazione Web - HTML e CSS83 Il selettore Con il selettore possiamo indicare: uno o più elementi (tag) HTML (type selector) h1 {…}h1, h2 {…} tutti gli elementi HTML (universal selector) * {…} tutti gli elementi discendenti di un altro elemento (descendant selector) h1 p {…} seleziona tutti i p discendenti di h1 tutti gli elementi figli di un altro elemento (child selector) h1 > p {…} seleziona tutti i p figli di h1 (1° livello!!!) tutti gli elementi il cui attributo class è value (class selector).value {…} seleziona tutti gli elementi con class=“value” h1.value {…} seleziona tutti gli h1 con class=“value” l’elemento il cui attributo id è value (id selector) # value {…} (nel file HTML esiste un solo tag il cui id è value !)

84 2014/2015Programmazione Web - HTML e CSS84 CSS - Esempio Esempio dell'uso dei CSS Titolo Primo paragrafo Lorem ipsum... Secondo paragrafo Lorem ipsum... primo item secondo item Prima cella Seconda cella Terza cella Quarta cella HTML

85 2014/2015Programmazione Web - HTML e CSS85 CSS - Esempio

86 2014/2015Programmazione Web - HTML e CSS86 CSS - Esempio body{background: #FFE4B5; font: 10pt Verdana; } h1 {color: blue; font: bold 20pt Tahoma; } h2 {color: #8B008B; font: bold 16pt Tahoma; } table {width: 300px; height: 100px; font: 8pt Verdana; border-width: 1pt; border-style: dotted; border-color: green; } td {border-style: dashed; border-width: 1pt; text-align: center; } div {width:500px; border: 1pt solid red; margin-top: 10px; } #primo {border: 1pt dotted red; text-align: justify; } div p {padding-left: 50px; border: 1pt dotted blue; } CSS

87 2014/2015Programmazione Web - HTML e CSS87 CSS - Esempio

88 2014/2015Programmazione Web - HTML e CSS88 Dove trovare materiale, esempi, quiz… Tutorial della W3C (http://www.w3schools.com/default.asp)http://www.w3schools.com/default.asp Specifica HTML 4 (http://www.w3.org/TR/html401/)http://www.w3.org/TR/html401/ tutorial sull’HTML e form HTM –http://www.w3schools.com/html/default.asp tutorial su CSS –http://www.w3schools.com/css/default.asp


Scaricare ppt "Programmazione Web HyperText Markup Language (HTML) e Cascading Style Sheet (CSS) 2014/2015."

Presentazioni simili


Annunci Google