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

Programmazione WebHyperText Markup Language (HTML)

eCascading Style Sheet (CSS)

2014/2015

2014/2015 Programmazione Web - HTML e CSS 2

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


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>


Annidamento dei tag

I tag possono essere annidati a più livelli(!!! attenzione all’ordine di annidamento !!!)

<tag1><tag2>

…</tag2>

</tag1>

<tag1><tag2>

…</tag1>

</tag2>

Annidamento corretto Annidamento errato!!!


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>


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>

<html> <head>

<title> … </title> </head>

<body>…

</body></html>


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>

Attributi: lang, dir

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


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


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>,..


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)


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.


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


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


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>


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.


Indirizzi<address>: informazioni per contattare l'autore

Contenuto: inline


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.)


Elenchi non ordinatiGli 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


Elenchi ordinatiGli 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


Liste di definizioniLe 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


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>


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


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


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


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


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>


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>


Tabelle - Esempio

<body><ul> <li> <h4> Esempio di tabella </h4> <table border="1"> <tr> <td>Prima cella</td> <td>Seconda cella</td> </tr> <tr>

<td>Terza cella</td> <td>Quarta cella</td>

</tr> </table> </li></ul></body>

<body><ul> <li> <h4> Esempio di tabella </h4> <table border="1"> <tr> <td>Prima cella</td> <td>Seconda cella</td> </tr> <tr>

<td>Terza cella</td> <td>Quarta cella</td>

</tr> </table> </li></ul></body>


Tabelle - Esempio


Celle ipertrofiche: rowspan


Celle ipertrofiche: rowspan


Celle ipertrofiche: colspan


Celle ipertrofiche: colspan


Celle ipertrofiche


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>


Gruppi di colonne: esempio


Gruppi di colonne: esempio


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=“http:///www...”), permettono di mandare un'email (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


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.


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


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)


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


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>


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à


Mappe immagine: esempio


Mappe immagine: esempio


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


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>


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


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


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.


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>

<html><body>


</body></html>


Form – Esempio (I)

<html><body>


</body></html>

<html><body>


</body></html>


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"><br />I have an airplane: <input type="checkbox" name="vehicle" value="Airplane"></form>

</body></html>

<html><body>


</body></html>


Form – Esempio (II)

<html><body>


</body></html>

<html><body>


</body></html>


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>

<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>


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>

<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>


Form – Esempio (V)

<html><body>

<form action=""><input type="button" value="Hello world!"></form> </body></html>

<html><body>



Form – Esempio (V)

<html><body>


<html><body>



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


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


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


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>

<html><body>


</body></html>


Form – Esempio (IV)

<html><body>


</body></html>

<html><body>


</body></html>


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


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


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


Raggruppare i controlli<fieldset> <legend>

Contenuto: <fieldset>: flusso, un <legend> opzionale, <legend>:

inline


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


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


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

Frame: funzionamento


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


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>

<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>


Frame – Esempio (I)


Frame – Esempio (II)

<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.html"><frame src="frame_b.html" name="showframe">

</frameset>

</html>

<html>



</frameset>

</html>


Frame – Esempio (II)

<html>



</frameset>

</html>

<html>



</frameset>

</html>


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>

<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>


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)


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


CSS: definizioneCSS è 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


CSS: vantaggiI 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


Collegare CSS e HTMLPer 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>


CSS ed ereditarietàMeccanismo fondamentale dei CSS è l'ereditarietà: molte proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti

<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>

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


Regole CSS: sintassiTre 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}


Il selettoreCon 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!)


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> </div></body></html>

HTML


CSS - Esempio


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


CSS - Esempio


Dove trovare materiale, esempi, quiz…

Tutorial della W3C (http://www.w3schools.com/default.asp)

Specifica HTML 4 (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

Date post:	02-May-2015
Category:	Documents
Upload:	carlotta-mori
View:	235 times
Download:	0 times

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

Documents