Programmazione Web HyperText Markup Language (HTML) e

Programmazione Web HyperText Markup Language (HTML) e
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Programmazione Web HyperText Markup Language (HTML) e Cascading Style Sheet (CSS) 2014/2015 Informazione 1 1

HyperText Markup Language
Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 2 Informazione 2 2

Programmazione Web - HTML e CSS
Devis Bianchini – Fondamenti di Informatica B 2008/2009 HTML tag Ogni tag è formato da un nome, che ne contraddistingue la funzione, racchiuso da parentesi acute <tag> 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 <tag> … </tag> 2014/2015 Programmazione Web - HTML e CSS 3 Informazione 3 3

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Annidamento dei tag I tag possono essere annidati a più livelli (!!! attenzione all’ordine di annidamento !!!) Annidamento corretto Annidamento errato!!! <tag1> <tag2> … </tag2> </tag1> <tag1> <tag2> … </tag1> </tag2> 2014/2015 Programmazione Web - HTML e CSS 4 Informazione 4 4

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 <tag attributo1=“valore” attributo2=“valore”> … </tag> 2014/2015 Programmazione Web - HTML e CSS 5 Informazione 5 5

Struttura di un documento HTML
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Struttura di un documento HTML Un documento HTML è un file ASCII racchiuso fra i tag <html> e </html> Presenta un’intestazione tra i tag <head> e </head> Presenta un corpo tra i tag <body> e </body> L’intestazione contiene informazioni sul documento Nel corpo troviamo il contenuto del documento e i tag per la resa visiva <html> <head> <title> … </title> </head> <body> … </body> </html> 2014/2015 Programmazione Web - HTML e CSS 6 Informazione 6 6

Struttura di un documento HTML
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Struttura di un documento HTML <html>: elemento principale (radice) Contenuto: <head>, <body> (entrambi obbligatori) Attributi: lang, dir Questo elemento deve aprire ogni documento HTML <head>: intestazione Contenuto: <title> (obbligatorio), <base>, <script>, <meta>, <link>, <style> Contiene informazioni sul documento che solitamente non producono alcun output ma influiscono sulla presentazione del documento stesso <body>: corpo Contenuto: blocco, <script>, <ins>, <del> Attributi: standard HTML Racchiude il vero contenuto del documento HTML 2014/2015 Programmazione Web - HTML e CSS 7 Informazione 7 7

Classificazione degli elementi (I)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Classificazione degli elementi (I) Contenuto inline Il contenuto inline è rappresentato dal testo e dai seguenti elementi: <tt>, <i>, <b>, <big>, <small>, <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <a>, <img>, <object>, <br>, <script>, <map>, <q>, <sub>, <sup>, <span>, <bdo>, <input>, <select>, <textarea>, <label>, <button> Contenuto blocco Gli elementi che costituiscono il contenuto blocco sono: <p>,<h1>...<h6>, <ol>, <ul>, <pre>, <dl>, <div>, <noscript>, <blockquote>, <form>, <hr>, <table>, <fieldset>, <address> Il contenuto di tipo flusso è dato dall’unione di inline e blocco 2014/2015 Programmazione Web - HTML e CSS 8 Informazione 8 8

Classificazione degli elementi (II)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Classificazione degli elementi (II) Tag per controllare il flusso del testo nel documento: <p>, <br>, <h1>..<h6>, <div>, <span> Tag per la formattazione di base: <tt>, <i>, <b>, <big>, <small>, <sub>, <sup> Tag per la formattazione semantica: <em>, <strong>, <dfn>, <code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>, <blockquote>, <q>, <pre>, <ins>, <del>, <address> Tag per la rappresentazione di liste: <ul>, <ol>, <li>, <dl>, <dt>, <dd> Tag per la rappresentazione di tabelle: <table>, <caption>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>, <col>, <colgroup> Tag per la rappresentazione di collegamenti: <a>, <link>, <base> Tag per l'inclusione di oggetti multimediali: <img>, <map>, <area>, <object> Tag per l'interazione con l'utente: <form>,<input>,<textarea>,<button>,.. 2014/2015 Programmazione Web - HTML e CSS 9 Informazione 9 9

Attributi standard HTML
Devis Bianchini – Fondamenti di Informatica B 2008/2009 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) 2014/2015 Programmazione Web - HTML e CSS 10 Informazione 10 10

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 <div> e <span>; la loro semantica di base è praticamente nulla: <div> rappresenta un blocco di testo (ma non è un paragrafo) <span> è una parte del flusso testuale In pratica, il contenuto di un <div> è preceduto e seguito da un ritorno a capo, mentre uno <span> può trovarsi ovunque nel flusso del testo. 2014/2015 Programmazione Web - HTML e CSS 11 Informazione 11 11

Formattazione semantica
Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 <em>: enfasi (di solito equivale a corsivo) <strong>: enfasi forte (di solito equivale a grassetto) <cite>: riferimento o citazione <dfn>: testo di definizione (da non confondere con le liste di definizioni) <code>: codice sorgente <samp>: esempio di output <kbd>: testo scritto da tastiera (digitato dall'utente) <var>: nome di variabile <abbr>: abbreviazione (l'attributo title può essere usato per la forma completa) <acronym>: acronimo 2014/2015 Programmazione Web - HTML e CSS 12 Informazione 12 12

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Citazioni <blockquote> <q>: sono utilizzati per inserire citazioni (i browser dovrebbero inserire opportune virgolette prima e dopo la citazione) Contenuto: <q> inline, <blockquote> blocco (indentata rispetto al resto) Attributi: HTML standard, cite (può essere usato per fornire l'URI del testo citato) <blockquote>: utilizzato per citare blocchi di testo <q>: serve ad inserire brevi citazioni nel flusso del testo 2014/2015 Programmazione Web - HTML e CSS 13 Informazione 13 13

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Testo preformattato <pre> 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 (<p>, <br>, ...) e dalle dimensioni della finestra Con l’elemento <pre> 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 <img>, <object>, <big>, <small>, <sub> e <sup> 2014/2015 Programmazione Web - HTML e CSS 14 Informazione 14 14

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Revisioni <ins> <del>: 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. 2014/2015 Programmazione Web - HTML e CSS 15 Informazione 15 15

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Indirizzi <address>: 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 (<body>) o all’interno di un modulo (<form>) (!) 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.) 2014/2015 Programmazione Web - HTML e CSS 16 Informazione 16 16

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Elenchi non ordinati Gli elenchi ordinati sono costituiti da una lista i cui elementi sono contraddistinti da un segno grafico <ul> (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 <li> (list item) è il tag che individua gli elementi dell’elenco non ordinato Testo che precede la lista <ul> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ul> Testo che segue la lista Testo che precede la lista primo elemento secondo elemento terzo elemento Testo che segue la lista 2014/2015 Programmazione Web - HTML e CSS 17 Informazione 17 17

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Elenchi ordinati Gli elenchi ordinati sono costituiti da una lista i cui elementi sono contraddistinti da un numero o da una lettera crescente <ol> (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 <li> (list item) è il tag che individua gli elementi dell’elenco ordinato Testo che precede la lista <ol> <li>primo elemento</li> <li>secondo elemento</li> <li>terzo elemento</li> </ol> Testo che segue la lista Testo che precede la lista 1. primo elemento 2. secondo elemento 3. terzo elemento Testo che segue la lista 2014/2015 Programmazione Web - HTML e CSS 18 Informazione 18 18

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Liste di definizioni Le liste di definizioni sono liste i cui elementi sono contraddistinti da un termine e una definizione <dl> (definition list) è il tag che apre la lista. Lascia una riga di spazio prima e dopo il testo che eventualmente lo circonda <dt> (termine) e <dd> (definizione) sono i tag che individuano gli elementi che sono definiti 2014/2015 Programmazione Web - HTML e CSS 19 Informazione 19 19

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 <body> di un documento o in un contenitore <div>, e non devono mai essere nidificate in elementi come <p> L’elemento base della definizione delle tabelle è <table> 2014/2015 Programmazione Web - HTML e CSS 20 Informazione 20 20

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 21 Informazione 21 21

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle (III) <table>: 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 (<caption>) 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 <caption>, se presente, ha contenuto inline e rappresenta la didascalia della tabella, che potrà essere renderizzata un maniera opportuna dal browser 2014/2015 Programmazione Web - HTML e CSS 22 Informazione 22 22

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 23 Informazione 23 23

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle (V) <tr>: 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 (<tr>), 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 2014/2015 Programmazione Web - HTML e CSS 24 Informazione 24 24

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle (VI) <td> <th>: 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 <col> 2014/2015 Programmazione Web - HTML e CSS 25 Informazione 25 25

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle (VII) <thead> <tbody> <tfoot>: raggruppamento di righe Contenuto: uno o più <tr> Attributi: HTML standard, align, valign Le righe di una tabella possono essere suddivise in tre gruppi: intestazione (<thead>), corpo (<tbody>) e piè di tabella (<tfoot>) Tipicamente, le righe in <thead> e <tfoot> 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 <tbody> esplicito; non è possibile avere tabelle con soli <thead> e/o <tfoot>; se specificati, questi due gruppi devono trovarsi entrambi all’inizio della definizione della tabella, prima del <tbody> 2014/2015 Programmazione Web - HTML e CSS 26 Informazione 26 26

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle - Esempio <body> <ul> <li> <h4> Esempio di tabella </h4> <table border="1"> <tr> <td>Prima cella</td> <td>Seconda cella</td> </tr> <td>Terza cella</td> <td>Quarta cella</td> </table> </li> </ul> </body> 2014/2015 Programmazione Web - HTML e CSS 27 Informazione 27 27

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Tabelle - Esempio 2014/2015 Programmazione Web - HTML e CSS 28 Informazione 28 28

Celle ipertrofiche: rowspan
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Celle ipertrofiche: rowspan 2014/2015 Programmazione Web - HTML e CSS 29 Informazione 29 29

Celle ipertrofiche: rowspan
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Celle ipertrofiche: rowspan 2014/2015 Programmazione Web - HTML e CSS 30 Informazione 30 30

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Celle ipertrofiche: colspan 2014/2015 Programmazione Web - HTML e CSS 31 Informazione 31 31

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Celle ipertrofiche: colspan 2014/2015 Programmazione Web - HTML e CSS 32 Informazione 32 32

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Celle ipertrofiche 2014/2015 Programmazione Web - HTML e CSS 33 Informazione 33 33

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Gruppi di colonne <colgroup>: definizione di gruppi di colonne Contenuto: vuoto oppure uno o più <col> Attributi: HTML standard, align, valign, span, width Gli elementi <colgroup> rappresentano raggruppamenti logici di (definizioni di) colonne, che i browser possono renderizzare in vario modo Uno o più elementi <colgroup> possono essere posti all’inizio della tabella (prima delle righe) in alternativa agli elementi <col> Un <colgroup> 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 <col> all’interno di un <colgroup>; le caratteristiche delle <col> nidificate (compreso il loro numero totale) hanno la precedenza su quelle specificate globalmente sul <colgroup> 2014/2015 Programmazione Web - HTML e CSS 34 Informazione 34 34

Gruppi di colonne: esempio
Devis Bianchini – Fondamenti di Informatica B Gruppi di colonne: esempio 2008/2009 2014/2015 Programmazione Web - HTML e CSS 35 Informazione 35 35

Gruppi di colonne: esempio
Devis Bianchini – Fondamenti di Informatica B Gruppi di colonne: esempio 2008/2009 2014/2015 Programmazione Web - HTML e CSS 36 Informazione 36 36

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Link ipertestuali <a href=“destinazione” target=”?”>contenuto del link</a> 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=“ 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., <h2 id=”bookmark”>) È 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 2014/2015 Programmazione Web - HTML e CSS 37 Informazione 37 37

Relazioni tra documenti
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Relazioni tra documenti <link>: link tra documenti Contenuto: vuoto Attributi: HTML standard, href, type, rel, rev L’elemento <link> è utilizzabile più volte e solo nella <head> del documento Un <link> 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 <link> 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. 2014/2015 Programmazione Web - HTML e CSS 38 Informazione 38 38

Risoluzione delle URI relative
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Risoluzione delle URI relative <base>: base per le URI relative Contenuto: vuoto Attributi: HTML standard, href, target Questo elemento, utilizzabile una sola volta nella <head> 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 <base> non è specificato, la base della URI del documento corrente viene usata per risolvere tutte le URI relative 2014/2015 Programmazione Web - HTML e CSS 39 Informazione 39 39

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Immagini (I) <img>: 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) 2014/2015 Programmazione Web - HTML e CSS 40 Informazione 40 40

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Immagini (II) <img>: 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 <map> Le aree dell’immagine definite dalla mappa diverranno cliccabili 2014/2015 Programmazione Web - HTML e CSS 41 Informazione 41 41

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Mappe immagine (I) <map>: client-side image map Contenuto: blocco, <area> Attributi: HTML standard, name L’elemento <map> 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 <area> o <a>, entrambi nidificati nell’elemento <map> L’uso di elementi <a> è utile per creare mappe ad alta accessibilità, con un ricco contenuto testuale alternativo. In questo caso, il tag <a> può essere arricchito con attributi quali shape e coords, propri del tag <area> 2014/2015 Programmazione Web - HTML e CSS 42 Informazione 42 42

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Mappe immagine (II) <area>: client-side image map area Contenuto: blocco, <area> Attributi: HTML standard, shape, coords, href, alt Gli elementi <area> nidificati in una <map> 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à 2014/2015 Programmazione Web - HTML e CSS 43 Informazione 43 43

Mappe immagine: esempio
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Mappe immagine: esempio 2014/2015 Programmazione Web - HTML e CSS 44 Informazione 44 44

Mappe immagine: esempio
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Mappe immagine: esempio 2014/2015 Programmazione Web - HTML e CSS 45 Informazione 45 45

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Oggetti (dall'HTML4) <object>: inclusione di un oggetto generico (per esempio, file multimediali audio/video, Java applets, oggetti ActiveX, Flash) Contenuto: flusso, <param> 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 <param>; gli attributi name e value di questi ultimi determinano le coppie (nome,valore) passate all’oggetto in fase di inizializzazione 2014/2015 Programmazione Web - HTML e CSS 46 Informazione 46 46

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Oggetti (dall'HTML4) <object>: inclusione di un oggetto generico (per esempio, file multimediali audio/video, Java applets, oggetti ActiveX, Flash) Contenuto: flusso, <param> 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 <img> 2014/2015 Programmazione Web - HTML e CSS 47 Informazione 47 47

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form HTML (1) I moduli o form sono tag HTML che ci permettono di interagire con la pagina web <form name=“mioForm” action=“..” method=”get/post”> … </form> 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 2014/2015 Programmazione Web - HTML e CSS 48 Informazione 48 48

Controlli della form (I)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (I) <input> Contenuto: vuoto Attributi: HTML standard, type, name, value, size, maxlength, checked, disabled, readonly L’elemento <input> 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 2014/2015 Programmazione Web - HTML e CSS 49 Informazione 49 49

Controlli della form (II)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (II) <input> 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. 2014/2015 Programmazione Web - HTML e CSS 50 Informazione 50 50

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (I) <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 51 Informazione 51 51

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (I) <html> <body> <form action=""> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 52 Informazione 52 52

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (II) <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 53 Informazione 53 53

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (II) <html> <body> <form action=""> I have a bike: <input type="checkbox" name="vehicle" value="Bike"> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car"> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 54 Informazione 54 54

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (III) <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 55 Informazione 55 55

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (III) <html> <body> <form action=""> Male: <input type="radio" checked="checked" name="Sex" value="male"> <br> Female: <input type="radio" name="Sex" value="female"> </form> <p> When a user clicks on a radio-button, the button becomes checked, and all other buttons with the same name become unchecked </p> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 56 Informazione 56 56

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (V) <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 57 Informazione 57 57

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (V) <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 58 Informazione 58 58

Controlli della form (III)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (III) <textarea> Contenuto: testo Attributi: HTML standard, name, rows, cols, disabled, readonly L’elemento <textarea> 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 2014/2015 Programmazione Web - HTML e CSS 59 Informazione 59 59

Controlli della form (IV)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (IV) <select> Contenuto: uno o più elementi <option> e <optgroup> Attributi: HTML standard, name, size, multiple L’elemento <select> crea un controllo lista contenente più opzioni, ciascuna rappresentata da un elemento <option> 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 <option> e <optgroup> nidificate 2014/2015 Programmazione Web - HTML e CSS 60 Informazione 60 60

Controlli della form (V)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (V) <option> e <optgroup> Contenuto: <optgroup>: uno o più <option>; <option>: testo Attributi: HTML standard, label, selected, disabled, value Gli elementi <option> definiscono le opzioni selezionabili nei controlli <select>; gli elementi <optgroup> servono a raggruppare <option> in modo da creare strutture logiche come i menu L’attributo label determina il testo visualizzato per le <option> e le <optgroup>; nel caso di <option>, è 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 <select> 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 2014/2015 Programmazione Web - HTML e CSS 61 Informazione 61 61

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (IV) <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 62 Informazione 62 62

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Form – Esempio (IV) <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 63 Informazione 63 63

Controlli della form (VI)
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Controlli della form (VI) <button> Contenuto: flusso, eccetto elementi <a> e tutti gli elementi usati nei moduli Attributi: HTML standard, name, value, type, disabled Gli elementi <button> creano bottoni esattamente come gli elementi <input> 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 2014/2015 Programmazione Web - HTML e CSS 64 Informazione 64 64

Associare testo ai controlli
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Associare testo ai controlli <label> Contenuto: inline Attributi: HTML standard, for L’elemento <label> 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ù <label> allo stesso controllo 2014/2015 Programmazione Web - HTML e CSS 65 Informazione 65 65

Associare testo ai controlli
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Associare testo ai controlli <label> Contenuto: inline Attributi: HTML standard, for L’elemento <label> 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ù <label> allo stesso controllo 2014/2015 Programmazione Web - HTML e CSS 66 Informazione 66 66

Raggruppare i controlli
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Raggruppare i controlli <fieldset> <legend> Contenuto: <fieldset>: flusso, un <legend> opzionale, <legend>: inline Attributi: HTML standard Gli elementi <fieldset> permettono di raggruppare logicamente parti di un modulo L’elemento <legend>, se specificato, fornisce una descrizione testuale del <fieldset> Questi elementi sono utili per garantire un’alta accessibilità ai moduli e facilitarne la compilazione 2014/2015 Programmazione Web - HTML e CSS 67 Informazione 67 67

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 68 Informazione 68 68

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

Frame: definizione della struttura
Devis Bianchini – Fondamenti di Informatica B 2008/2009 Frame: definizione della struttura I frame sono realizzati tramite i tag <FRAMESET> e <FRAME> Il tag <FRAMESET> 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 <FRAME> Definisce quale documento HTML mettere in ciascun frame 2014/2015 Programmazione Web - HTML e CSS 70 Informazione 70 70

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Frame – Esempio (I) <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> <noframes> <body>Your browser does not handle frames!</body> </noframes> </frameset> </html> 2014/2015 Programmazione Web - HTML e CSS 71 Informazione 71 71

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Frame – Esempio (I) 2014/2015 Programmazione Web - HTML e CSS 72 Informazione 72 72

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Frame – Esempio (II) <html> <frameset cols="120,*"> <frame src="tryhtml_contents.html"> <frame src="frame_b.html" name="showframe"> </frameset> </html> 2014/2015 Programmazione Web - HTML e CSS 73 Informazione 73 73

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Frame – Esempio (II) <html> <frameset cols="120,*"> <frame src="tryhtml_contents.html"> <frame src="frame_b.html" name="showframe"> </frameset> </html> 2014/2015 Programmazione Web - HTML e CSS 74 Informazione 74 74

La pagina “tryhtml_contents”
Devis Bianchini – Fondamenti di Informatica B 2008/2009 La pagina “tryhtml_contents” <html> <body> <a href ="frame_a.html" target ="showframe">Frame a</a><br> <a href ="frame_b.html" target ="showframe">Frame b</a><br> <a href ="frame_c.html" target ="showframe">Frame c</a> </body> </html> 2014/2015 Programmazione Web - HTML e CSS 75 Informazione 75 75

Devis Bianchini – Fondamenti di Informatica B 2008/2009 HTML5: nuovi elementi Vengono introdotti elementi specifici per contenuti multimediali (tag <video> e <audio>) 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., <applet> a favore di <object>) o eliminati elementi considerati dannosi per l'accessibilità (e.g., i frame) 2014/2015 Programmazione Web - HTML e CSS 76 Informazione 76 76

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Fogli di stile <style>: foglio di stile incorporato Contenuto: testo Attributi: type, media Uno o più elementi <style>, posti nella <head> 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 <link>; 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 2014/2015 Programmazione Web - HTML e CSS 77 Informazione 77 77

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 78 Informazione 78 78

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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 2014/2015 Programmazione Web - HTML e CSS 79 Informazione 79 79

Devis Bianchini – Fondamenti di Informatica B 2008/2009 Collegare CSS e HTML Per collegare il file CSS ad un file HTML è necessario utilizzare il tag <link> 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 <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”/> </head> 2014/2015 Programmazione Web - HTML e CSS 80 Informazione 80 80

Devis Bianchini – Fondamenti di Informatica B 2008/2009 CSS ed ereditarietà Meccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti Un elemento si dice genitore quando contiene altri elementi. Un elemento si dice figlio quando è racchiuso in un altro elemento. <html> <head> <title>Struttura del documento</title> </head> <body> <h1>Titolo</h1> <div> <p>Primo <a href="pagina.htm">paragrafo</a> </p> </div> <p>Secondo<b>paragrafo</b></p> </body> </html> 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 2014/2015 Programmazione Web - HTML e CSS 81 Informazione 81 81

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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} 2014/2015 Programmazione Web - HTML e CSS 82 Informazione 82 82

Devis Bianchini – Fondamenti di Informatica B 2008/2009 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!) 2014/2015 Programmazione Web - HTML e CSS 83 Informazione 83 83

CSS - Esempio <html> <head> <title>Esempio dell'uso dei CSS</title> <link href="esempio.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>Titolo</h1> <h2>Primo paragrafo</h2> <div id="primo">Lorem ipsum...</div> <h2>Secondo paragrafo</h2> <div><p>Lorem ipsum...</p> <ul> <li>primo item</li> <li>secondo item</li> </ul> </div> <div> <table><tr><td>Prima cella</td><td>Seconda cella</td></tr> <tr><td>Terza cella</td><td>Quarta cella</td></tr></table> </body> </html> HTML 2014/2015 Programmazione Web - HTML e CSS 84 84 84

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

CSS - Esempio CSS 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; 2014/2015 Programmazione Web - HTML e CSS 86 86 86

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

Dove trovare materiale, esempi, quiz…
Mari, Buonanno, Sciuto – Informatica e cultura dell’informazione – McGraw-Hill 02/19/11 Dove trovare materiale, esempi, quiz… Tutorial della W3C ( Specifica HTML 4 ( tutorial sull’HTML e form HTM tutorial su CSS 2014/2015 Programmazione Web - HTML e CSS 88 88 HyperText Markup Language 88

Programmazione Web HyperText Markup Language (HTML) e

Presentazioni simili

Presentazione sul tema: "Programmazione Web HyperText Markup Language (HTML) e"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back

Entrare

Autorizzarsi attraverso i social network:

Programmazione Web HyperText Markup Language (HTML) e

Presentazioni simili

Presentazione sul tema: "Programmazione Web HyperText Markup Language (HTML) e"— Transcript della presentazione:

Presentazioni simili

Sul progetto

Feed-back