HTML = HyperText Markup Language by Andrea Mantoni Ultima modifica: %%mtime(%d %B %Y) = Introduzione = L'HTML è un *linguaggio di markup*, ovvero è utilizzato principalmente per la formattazione del testo (!= linguaggi di programmazione). HTML è lo standard attuale di riferimento per la trasmissione di documenti mediante il protocollo HTTP, insieme ad *XHTML* (variante basata su XML) e *CSS=Cascading Style Sheets*. HTML è standardizzato dallo *W3C = World Wide Web Consortium* in varie versioni. -> vedi paragrafo "HTML version" tecnologie di supporto (client-side) raccomandate: - immagini raster in PNG - SVG = Scalable Vector Graphics - MathML (per le formule matematiche) - applet Java - Javascript / ECMAScript - X3D (ex VRML) vecchie tecnologie considerate obsolete: - immagini raster in GIF e JPEG - Adobe Flash, Shockwave (proprietary plugins) ... == Sintassi == L'elemento di base della pagine HTML è il *tag*: tagBody comment tag: server-side comment tag (supported by most CGI interpreters: JSP, ASP, BUT NOT PHP!): <%-- this is a server-side comment. --%> struttura pagina XHTML: XHTML 1.0 Example = Head tags = meta tags: Forniscono degli hints per i motori di ricerca. == HTML version == HTML documents are required to start with a Document Type Declaration: Solo la prima riga è obbligatoria, le altre sono richieste se la versione non è la 5. versioni standardizzate: HTML 2.0 (November 24, 1995) HTML 3.2 (January 1997) HTML 4.0 (December 1997) 3 variations: - *Strict*, in which deprecated elements are forbidden; - *Transitional*, in which deprecated elements are allowed; - *Frameset*, in which mostly only frame related elements are allowed. deprecated elements and replacements: ,
,
(ancora molto usato) deprecated attributes: background, bgcolor, align, color, size -> use CSS instead HTML 4.01 (December 1999) 3 variations (analoghe a quelle di HTML 4.0): XHTML 1.0 (January 26, 2000) 3 variations (analoghe a quelle di HTML 4.0): XHTML 1.1 (May 31, 2001) modularized: ?? - Full - Basic - Mobile ?? - RDFa (X)HTML5 (WIP) ... new tags: , ,
,
,
... = Body tags = special character escapes: syntax: &code; mandatory: > > greater than < < less than & & ampersand optional (suggested when not using UTF-8 encoding): / ⁄ slash " " quotation mark “ “ left double quote ” ” right double quote ‘ ‘ left single quote ’ ’ right single quote « « » » guillemets (European-style quotation marks)   non-breaking space © © copyright € € Euro à à è è ì ì ò ò ù ù é é paragraph tag:

text

header tags:

Level 1 Header

Level 2 Header

Level 3 Header

Level 4 Header

Level 5 Header
Level 6 Header
anchor tag (hypelink): Link name image tag: line breaks:
formatting tags: bold text italic text underlined text
quoted block of text
preserve / preformatted text
strike-through text superscript text subscript text formatting inline tags: ... ... ... horizontal rule:
== Liste == unordered list:
  • list item 1;
  • list item 2;
  • list item 3.
MEMO: it can be nested! ordered list:
  1. list item 1;
  2. list item 2;
  3. list item 3.
MEMO: it can be nested! == Tabelle == == Forms == I forms sono usati come una sorta di "front ends" per gli script CGI lato server. Ogni elemento di un form ha associato: - un *name* (stabilito dal programmatore) - un *value* (inserito dall'utente) - altri parametri grafici (dimensione, etc.) Quando il form è submitted, i dati sono inviati al server nel formato enctype="application/x-www-form-urlencoded" (the default): name1=value1&name2=value2&... Se "method" è GET i dati sono appesi all'url dopo un "?" (sono inviati "in chiaro"): http://somewhere/cgi-bin/action?name1=value1&name2=value2+with+spaces&... Se "method" è POST i dati sono inseriti direttamente nel body della request. NOTA: se non viene specificato altrimenti, si assume come metodo "get". che causa l'invio dei dati nella URL: I dati immessi vengono elaborati sul server dal programma CGI specificato nell'attributo "action": L'attributo action supporta anche: (apre il client di posta e passa i dati inseriti nel form) Ogni elemento del form ha associati: - un name univoco (fanno eccezione i checkbox e i radiobuttons che possono associare diversi valori allo stesso nome) - una valore Ogni elemento inoltre supporta gli attributi opzionali: - readonly - disabled -> l'elemento potrà essere attivato solo da uno script Tipi di elementi: - campi nascosti -> questo dato viene sempre inviato, ma non è visualizzato - campi di testo - pulsanti: OSS.: è possibile inserire più pulsanti "submit" con lo stesso nome ma con valori diversi. esempio: - checkboxes ("quadratino"): OSS.: per uno stesso parametro possono essere inviati _più valori_. - radiobutton group ("cerchietto"): OSS.: per uno stesso parametro può essere inviato _un solo valore_. - drop-down list: OSS.: per uno stesso parametro può essere inviato _un solo valore_. OSS.2: se value non è presente viene inviato come valore il body del tag "option" selezionato. === Form-based File Upload in HTML === Con lo RFC 1867, è stato aggiunta la possibilità di uploadare files mediante forms: NOTA: Non supportato da tutti i browser. ... http://www.cs.tut.fi/~jkorpela/forms/file.html == Framing == sintassi: Your browser does not support frames. iframes: NOTA: l'uso dei frames è deprecated in HTML >=4. Al loro posto si consiglia di usare: - tag DIV/SPAN + CSS ... (esempio) - server-side scripting - SSI=Server-Side Includes (non sempre dispobili) -> il file deve avere estensione .shtml, .stm, .shtm - Javascript, AJAX (client-side -> non sempre dispobili) ... (esempio) == Embedded objects == Sono spesso usati per includere file multimediali nelle pagine: alternate text HTML5 ha introdotto dei tag specifici per gli streams audio e video: ... === SVG === Un'immagine vettoriale SVG può essere inserita nella pagina con i tag: alternative image if SVG is not supported NOTA: I browser più datati supportano solo il tag non-standard "": TIP: i file SVG possono essere compressi per risparmiare spazio con il comando gzip -S z *.svg HTML5 ha introdotto gli inline-SVG con il tag "": ... = Fonti = World Wide Web Consortium (W3C) standards http://www.w3.org/TR/#tr_HTML http://en.wikibooks.org/wiki/HTML http://www.w3schools.com
Table title
table heading cell 1 table heading cell 2
table data cell 1 table data cell 2
table footer cell 1 table footer cell 2