HTML avanzato e HTML5 (per cominciare)

Size: px

Start display at page:

Download "HTML avanzato e HTML5 (per cominciare)"

Darleen Benson
5 years ago
Views:

1 HTML avanzato e HTML5 (per cominciare) ugo.rinaldi@gmail.com

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

3 Struttura del documento <!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <title> Titolo nel browser </title>... </head> <body>... </body> </html> 3

4 4

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

6 Esempio <article> <header> <h1>most important heading here</h1> <h3>less important heading here</h3> <p>some additional information here</p> </header> <p>lorem Ipsum dolor set amet...</p> </article> 6

7 Nav Barra di navigazione. Definisce un insieme di link di navigazione Non tutti il link devo esser posti dentro un <nav> Esempio: <nav> <a href="/html/">html</a> <a href="/css/">css</a> <a href="/js/">javascript</a> <a href="/jquery/">jquery</a> </nav> 7

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

9 Article The <article> tag specifies independent, selfcontained 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 <article> element: Forum post Blog post News story (notizia) Comment 9

10 Esempio <article> <h1>google Chrome</h1> <p>google Chrome is a free, open-source web browser developed by Google, released in but duckduckgo don't trace you </p> </article> 10

11 Section Definisce sezioni all'interno di un documento come capitoli, headers, footers, o qualunque altra sezione del documento. Esempio: <section> <h1>wwf</h1> <p>the World Wide Fund for Nature (WWF) is...</p> </section> 11

12 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ù <footer> in un documento 12

13 Esempi con elementi semantici Modello senza CSS Modello con CSS 13

14 Il CSS degli esempi <style> 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;} </style> 14

15 Il form The <form> tag is used to create an HTML form for user input. <form action="demo_form.php" method="post"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="submit"> </form> 15

16 I pulsanti <button type="button" onclick="alert('hello world!')"> Click Me! </button> <input type="submit" value="conferma"> 16

17 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

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

19 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

20 Esempio di datalist <input type= text list="browsers"> <datalist id="browsers"> <option value="internet Explorer"> <option value="firefox"> <option value="google Chrome"> <option value="opera"> <option value="safari"> </datalist> 20

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

22 22

23 <figure> <img src="semanticelements.png" alt="sem.elements" border="1"> <figcaption> Fig.1 - Didascalia con il tag FIGCAPTION </figcaption> </figure> 23

24 <details> <summary>details+summary tag </summary> <p>the details tag is currently supported in Firefox, Opera, Chrome, and in Safari 6 </p> </details> 24

25 <p>per evidenziare usa il tag <mark> questo testo verrà evidenziato </mark> </p> 25

26 <body> <canvas id="mycanvas" width="300" height="100" style="border:1px solid #c3c3c3;"> Se leggi questo, il tuo browser non supporta il tag HTML5 canvas. </canvas> <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,150,75); </script> </body> 26

http://www.w3schools.com/html/default.asp http://www.

27 asp

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text