HTML avanzato e HTML5 (per cominciare)

Argomenti Nuovi elementi semantici Nuovi elementi per il form Tip & Tricks 2

Struttura del documento Titolo nel browser

4

Header Rappresenta un contenitore I suoi elementi tipici sono: - logo o icone authorship information Si possono avere più in un documento Non può essere posto dentro, or another 5

Esempio Most important heading here Less important heading here Some additional information here Lorem Ipsum dolor set amet.... 6

Nav Barra di navigazione. Definisce un insieme di link di navigazione Non tutti il link devo esser posti dentro un Esempio: HTML | CSS | JavaScript | jQuery 7

Aside Contenuti laterali. Potrebbe esser posto come una barra laterale in un article. Molti browser visualizzano ed i tag successivi con il seguente valore di default: aside {display: block; } Esempio: My family and I visited The Epcot center this summer. Epcot Center The Epcot Center is a theme park in Disney World, Florida. 8

Article The tag specifies independent, self- contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site. Potential sources for the element: Forum post Blog post News story (notizia) Comment 9

Esempio Google Chrome Google Chrome is a free, open-source web browser developed by Google, released in but duckduckgo don't trace you 10

Section Definisce sezioni all'interno di un documento come capitoli, headers, footers, o qualunque altra sezione del documento. Esempio: WWF The World Wide Fund for Nature (WWF) is

Footer Rappresenta un contenitore I suoi elementi tipici sono: contact information (address, ) logo and/or icon authorship information copyright information sitemap back to top links related documents Si possono avere più in un documento 12

Modello senza CSS Modello con CSS Esempi con elementi semantici 13

body {font-family: Verdana, sans-serif; font-size:0.8em;} header, nav, section, article, footer {border:1px solid grey; margin:5px; padding:8px;} nav ul {margin:0; padding:0;} nav ul li {display:inline; margin:5px;} Il CSS degli esempi 14

Il form The tag is used to create an HTML form for user input. First name: Last name: 15

I pulsanti Click Me! 16

Nuovi e vecchi type per l'input Checkbox, radio, submit, reset, text, password, hidden (Già visti) button Defines a clickable button (mostly used with a JavaScript to activate a script) color Defines a color picker date Defines a date control (year, month and day (no time)) datetime-local Defines a date and time control (year, month, day, hour, minute, second, and fraction of a second (no time zone) Defines a field for an address file Defines a file-select field and a "Browse..." button (for file uploads) image Defines an image as the submit button month Defines a month and year control (no time zone) number Defines a field for entering a number range Defines a control for entering a number whose exact value is not important (like a slider control) search Defines a text field for entering a search string tel Defines a field for entering a telephone number time Defines a control for entering a time (no time zone) url Defines a field for entering a URL week Defines a week and year control (no time zone) 17

Esempio Un form con i più utili type di input 18

News & Curious (Curiosities) autocomplete="on/off" placeholder="article, section,…" required maxlength="20" src=”image.png” (solo per il type=image) min="1" max="10" step="1" 19

Esempio di datalist 20

Un accenno alle regular expression <input type="text" name="nickname"... pattern="[a-z]{1}[a-z_]{2,19}"...> 21

22

23 Fig.1 - Didascalia con il tag FIGCAPTION

DETAILS+SUMMARY tag The details tag is currently supported in Firefox, Opera, Chrome, and in Safari 6 24

Per evidenziare usa il tag questo testo verrà evidenziato 25

Se leggi questo, il tuo browser non supporta il tag HTML5 canvas. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,150,75); 26

asp