Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Laboratorio di Web Design Base - 2014/15 - HTML/5

775 views

Published on

All must used and usefull HTML and HTML5 tags. Thi presentation is used in my course "Laboratorio di Web Design Base" @ Centro Giovani di Monfalcone in 2014/15

Published in: Education
  • Be the first to comment

Laboratorio di Web Design Base - 2014/15 - HTML/5

  1. 1. HTML & HTML5
  2. 2. –Wikipedia “L'HTML non è un linguaggio di programmazione, ma un linguaggio di markup, ossia descrive le modalità di impaginazione, formattazione e visualizzazione grafica (layout) del contenuto, testuale e non, di una pagina web”. 2
  3. 3. Linguaggio di marcatura Struttura semantica 3
  4. 4. <p>…</p> 4
  5. 5. <p>Questo è un paragrafo.</p> 5
  6. 6. <p lang=“it”>Questo è un paragrafo.</p> 6
  7. 7. <p lang=“it”>Questo &egrave; un paragrafo.</p> 7
  8. 8. <br /> 8
  9. 9. <br> 9
  10. 10. Struttura Definizione e svolgimento
  11. 11. DTD Ogni documento HTML deve averlo!
 (Document Type Definition) 11
  12. 12. Il DTD è uno strumento utilizzato dai programmatori il cui scopo è quello di definire le componenti ammesse nella costruzione di un documento XML. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html> 12
  13. 13. DTD - set di elementi leciti da usare (vocabolario); - struttura logica di ogni elemento (grammatica); - attributi e valori ammessi; - utilizzato dai parser. 13
  14. 14. <html lang=“it”> </html> <!DOCTYPE html> <head></head> <body></body> 14
  15. 15. All’interno del tag <head> troveremo: - <title>Titolo della pagia</title> - meta-dati per applicazioni esterne (es.: motori di ricerca); - collegamenti a file esterni (stili, script, ecc.); - stili/script inline. 15
  16. 16. <html lang=“it”> </html> <!DOCTYPE html> <head> <body></body> 16 </head> <title>Chi siamo</title> <meta charset=“utf-8”>
  17. 17. All’interno del tag <body> troveremo tutta la parte di front-end (interfaccia) del nostro sito. ! Testo, multimedia, e tutto ciò che l’utente potrà vedere si trova esclusivamente all’interno di <body>. 17
  18. 18. 18 <!DOCTYPE html> <html> <head> <body>
  19. 19. Headings Intestazioni
  20. 20. Sezioni principali di un testo. ! Raggruppati in ordine di importanza decrescente, da <h1> a <h6>. 20
  21. 21. <h1>Ligula Commodo Fringilla.</h1> <h2>Ligula Commodo Fringilla.</h2> <h3>Ligula Commodo Fringilla.</h3> <h4>Ligula Commodo Fringilla.</h4> <h5>Ligula Commodo Fringilla.</h5> <h6>Ligula Commodo Fringilla.</h6> 21
  22. 22. Deve esserci sempre e solo un <h1> in ogni pagina. 22
  23. 23. Testo Paragrafi e formattazioni
  24. 24. Testo <p>Raxacoricofallapatorius, first mentioned in "World War Three", is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. The difficulty characters have in pronouncing its name is a recurring joke in the show.</p> <p>According to the book Monsters and Villains, the planet is a paradise with burgundy seas and four polar regions.</p> 24
  25. 25. Testo Raxacoricofallapatorius, first mentioned in "World War Three", is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. The difficulty characters have in pronouncing its name is a recurring joke in the show. ! According to the book Monsters and Villains, the planet is a paradise with burgundy seas and four polar regions. 25
  26. 26. Testo <p><strong>Raxacoricofallapatorius</strong>, first mentioned in "World War Three", is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. The difficulty characters have in pronouncing its name is a recurring joke in the show.</ p> <p>According to the book Monsters and Villains, the planet is a paradise with burgundy seas and four polar regions.</p> 26
  27. 27. Testo <p><strong>Raxacoricofallapatorius</strong>, first mentioned in <em>"World War Three”</em>, is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. The difficulty characters have in pronouncing its name is a recurring joke in the show.</ p> <p>According to the book <em>Monsters and Villains</em>, the planet is a paradise with burgundy seas and four polar regions.</p> 27
  28. 28. Testo Raxacoricofallapatorius, first mentioned in "World War Three", is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. The difficulty characters have in pronouncing its name is a recurring joke in the show. ! According to the book Monsters and Villains, the planet is a paradise with burgundy seas and four polar regions. 28
  29. 29. Testo <p><strong>Raxacoricofallapatorius</strong>, first mentioned in <em>"World War Three”</em>, is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families. <br />The difficulty characters have in pronouncing its name is a recurring joke in the show.</p> <p>According to the book <em>Monsters and Villains</em>, the planet is a paradise with burgundy seas and four polar regions.</p> 29
  30. 30. Testo Raxacoricofallapatorius, first mentioned in "World War Three", is the home planet of the Raxacoricofallapatorians, including the criminal Slitheen, Blathereen and Hostrazeen families.
 The difficulty characters have in pronouncing its name is a recurring joke in the show. ! According to the book Monsters and Villains, the planet is a paradise with burgundy seas and four polar regions. 30
  31. 31. Testo - Apice|Pedice: <sup></sup>|<sub></sub> - Linea orizzontale: <hr /> - Quotazione: <blockquote cite=“”></blockquote> - Citazione: <cite></cite> - Abbreviazione: <abbr title=“”></abbr> - Indirizzo: <address></address> 31
  32. 32. Testo - Testo incorretto: <s></s> - Testo rimosso|Testo sostituito: <del></del>| <ins></ins> - Blocco di codice: <code></code>|<kbd></kbd>|<samp></samp> - Preformattato: <pre></pre> - Definizione termine: <dfn></dfn> - Marcatore generico: <span></span> 32
  33. 33. Liste Ordinate, non-ordinare, di definizione
  34. 34. Liste <ol> <li>Sara-Jane Smith</li> <li>Brigadier Lethbridge-Stewart</li> <li>Bad Wolf</li> <li>K-9</li> <li>Captain Jack Harkness</li> </ol> 34
  35. 35. Liste 1. Sara-Jane Smith 2. Brigadier Lethbridge-Stewart 3. Bad Wolf 4. K-9 5. Captain Jack Harkness 35
  36. 36. Liste <ul> <li>Sara-Jane Smith</li> <li>Brigadier Lethbridge-Stewart</li> <li>Bad Wolf</li> <li>K-9</li> <li>Captain Jack Harkness</li> </ul> 36
  37. 37. Liste • Sara-Jane Smith • Brigadier Lethbridge-Stewart • Bad Wolf • K-9 • Captain Jack Harkness 37
  38. 38. Liste <dl> <dt>The Doctor</dt> <dd>The Doctor is a Time Lord, an extraterrestrial from the planet Gallifrey, who travels in a time machine called the TARDIS. Sometimes he is accompanied by companions who have chosen to travel with him for a variety of reasons.</dd> <dt>Dalek</dt> <dd>Iconic villain from the British TV series Dr Who. Though their appearance is robotic, the Daleks are actually little green blobs mutated from members of the Kaled species by their chief scientist, Davros, and placed in robotic armoured travel machines.</dd> </dl> 38
  39. 39. Liste The Doctor The Doctor is a Time Lord, an extraterrestrial from the planet Gallifrey, who travels in a time machine called the TARDIS. Sometimes he is accompanied by companions who have chosen to travel with him for a variety of reasons. ! Dalek Iconic villain from the British TV series Dr Who. Though their appearance is robotic, the Daleks are actually little green blobs mutated from members of the Kaled species by their chief scientist, Davros, and placed in robotic armoured travel machines. 39
  40. 40. Links Ancore e collegamenti ipertestuali
  41. 41. Links <a href=“tardis.html”>Go to the TARDIS</a> 41
  42. 42. Links Go to the TARDIS 42
  43. 43. Links <a href=“tardis.html”>Go to the TARDIS</a> <a href=“http://www.unit.co.uk”>Visit UNIT HQ</a> <a href=“mailto:master@time.com”>Mail to the Master</a> <a href=“#cyberman”>Read about Cyberman</a> 43
  44. 44. Links <a href=“tardis.html” target=“_blank”>Go to the TARDIS</a> 44
  45. 45. Links <a href=“tardis.html” title=“Go to the TARDIS and escape from Skaro.”>Go to the TARDIS</a> 45
  46. 46. Media Immagini, video, audio e interattività
  47. 47. Media <img src=“davros.jpg” /> 47
  48. 48. Media <img src=“davros.jpg” alt=“Image of Davros.” title=“The creator of the Daleks, Davros.” /> 48
  49. 49. Media 49 The creator of the Daleks, Davros.
  50. 50. Media 50 Image of Davros.
  51. 51. Media <figure> <img src=“davros.jpg” alt=“Image of Davros.” title=“The creator of the Daleks, Davros.” /> </figure> 51
  52. 52. Media <figure> <img src=“davros.jpg” alt=“Image of Davros.” title=“The creator of the Daleks, Davros.” /> <figcaption>Davros from Doctor Who, &copy; BBC</ figcaption> </figure> 52
  53. 53. Media 53 Davros from Doctor Who, © BBC
  54. 54. Media <video poster=“tardis_video_poster.jpg” controls autoplay loop> <source src=“dw_intro.mp4” type=“video/mp4” /> <source src=“dw_intro.ogg” type=“video/ogg” /> <source src=“dw_intro.webm” type=“video/webm” /> </video> 54
  55. 55. Media <video poster=“tardis_video_poster.jpg” controls autoplay loop> <source src=“dw_intro.mp4” type=“video/mp4” /> <source src=“dw_intro.ogg” type=“video/ogg” /> <source src=“dw_intro.webm” type=“video/webm” /> <track kind=“subtitles” srclang=“it” src=“dw_intro_it.vtt” /> </video> 55
  56. 56. Media <audio controls autoplay loop> <source src=“dw_intro.mp3” type=“audio/mpeg” /> <source src=“dw_intro.ogg” type=“video/ogg” /> </audio> 56
  57. 57. Media <canvas width=“” height=“” id=“”></canvas> 57
  58. 58. Contenitori e contenitori semantici
  59. 59. Contenitori <div> <p>Time And Relative Dimentions In Space. A time/space machine concieved by the Time Lords. It has infinate rooms inside, including several console rooms, from which the ship can be piloted.</p> </div> 59
  60. 60. Contenitori - Sezione: <section></section> - Intestazione: <header></header> - Articolo: <article></article> - Footer: <footer></footer> - Navigazione: <nav></nav> - Barra laterale: <aside></aside> 60
  61. 61. Tabelle Dati, non layout!
  62. 62. Tabelle <table> <tr> <td>Daleks</td> <td>Cyberman</td> <td>Masters (The)</td> </tr> <tr> <td>1963</td> <td>1966</td> <td>1971</td> </tr> <tr> <td>2014</td> <td>2013</td> <td>2009</td> </tr> </table> 62
  63. 63. Tabelle 63 Daleks 1963 2014 Cyberman 1966 2013 Master (The) 1971 2009
  64. 64. Tabelle <table> <thead> <tr> <th>Viallain</th> <th>First apperance</th> <th>Last apperance</th> </tr> </thead> <tr> <td>Daleks</td> <td>Cyberman</td> <td>Masters (The)</td> </tr> </table> 64
  65. 65. Tabelle 65 Villain First apperance Last apperance Daleks 1963 2014 Cyberman 1966 2013 Master (The) 1971 2009
  66. 66. Tabelle <table> <tr> <td>2014</td> <td>2013</td> <td>2009</td> </tr> <tfoot> <tr> <td>Viallain</td> <td>First apperance</td> <td>Last apperance</td> </tr> </tfoot> </table> 66
  67. 67. Tabelle 67 Daleks 1963 2014 Cyberman 1966 2013 Master (The) 1971 2009 Villain First apperance Last apperance
  68. 68. Forms User Interaction
  69. 69. Forms 69
  70. 70. Forms 70 <form action=“” method=“get|post”>…</form>
  71. 71. Forms 71 <fieldset> <legend>Contact information</legend> </fieldset>
  72. 72. Forms 72 <label for=“name”>Nome</label>
  73. 73. Forms 73 <input type=“” id=“” name=“” /> ! <textarea id=“” name=“”></textarea> ! <select id=“” name=“”> <option value=“”>Option</option> </select> ! <button type=“”>Send</button>
  74. 74. Forms 74 http://www.w3schools.com/html/html5_form_input_types.asp
  75. 75. iFrames Inline Frames
  76. 76. iFrames 76 <iframe width=“” height=“” src=“” scrolling=“” frameborder=“”></iframe>
  77. 77. iFrames 77 <iframe src="https://www.google.com/maps/embed?pb=! 1m16!1m10!1m3!1d621.0341897165755! 2d-0.19329364309344388!3d51.49235780221063!2m1!3f0!3m2! 1i1024!2i768!4f13.1!3m3!1m2!1s0x48760f8b6737b9db %3A0x8f5a4c580bbfd4d7!2sTARDIS!5e0!3m2!1sit!2sit! 4v1410612406742" width="600" height="450" frameborder="0" style="border:0"></iframe>
  78. 78. iFrames 78
  79. 79. 2014 Giovanni Buffa - CC by-nd 3.0

×