Your SlideShare is downloading. ×
0
HTML5 e Css3 [2]Matteo Magni
Figure figcaption●   Figure viene impiegato per contrassegnare    illustrazioni, diagrammi, foto, listati di codice    che...
figure figcaption<figure>  <img src="/macaque.jpg" alt="Macaque in the trees">  <figcaption>A cheeky macaque, Lower Kintag...
Più immagini    http://html5doctor.com/the-figure-figcaption-elements/<figure>  <img src="/kookaburra.jpg" alt="Kooaburra"...
hgroup● Lelemento che raggruppa due o più  intestazioni successive<hgroup>        <h1>Pippo.com</h1>        <h2>Pippo il b...
hgroup●   Lo scopo nel caso di prima sarebbe non far    interferire lh2 con gli altri h2 del documento che    potrebbero s...
time● Lelemento fornisce una versione della data  leggibile per luomo ed una leggibile per le  “macchine”<time datetime="2...
Le macchine ci controlleranno?
Progress● Lelemeno progress rappresenta il grado di avanzamento di una operazione<section> <p>Progress: <progress> <span i...
meter●   Rappresenta una grandezza scalare, esempio il    Page RankYour PageRank is: <meter> 2 out of 10 </meter>
Address<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact pe...
Address●   Gli elementi address rappresentano le    informazioni di contatto per lelemento article o    lelemento antenato...
Novità nei vecchi elementi<a>The media attribute describes for which mediathe target document was designed. It is purelyad...
<b> e </i>
Davvero?<b> ed </i> fanno ancora parte delle specifiche<b class="character">Deckard</b>: <i class="voiceover">The report w...
Small● Diventa il tag per le note legali, i diritti dautore, le  piccole note a margine.<footer><address>For more details,...
menu<menu type="toolbar">        <command type="command" disabled label="Save" icon="icons/save.png" onclick="save()">    ...
Menu - type●   Context: menu di tipo contestuale (tipo quello    che si apre col tasto destro su win)●   Toolbar: menu tip...
command<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked"          label="Left" icon="ic...
Domande?             Slide:http://www.slideshare.net/ilbonzo             Code:https://github.com/ilbonzo/Cypher           ...
Upcoming SlideShare
Loading in...5
×

HTML5 e Css3 - 2 | WebMaster & WebDesigner

284

Published on

Seconda lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
284
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 e Css3 - 2 | WebMaster & WebDesigner"

  1. 1. HTML5 e Css3 [2]Matteo Magni
  2. 2. Figure figcaption● Figure viene impiegato per contrassegnare illustrazioni, diagrammi, foto, listati di codice che vengono citati nel testo principale ma senza alterarne il senso. Possono quindi essere tolti e messi in altre sezioni del sito.● Figcaption serve da didascalia per limmagine
  3. 3. figure figcaption<figure>  <img src="/macaque.jpg" alt="Macaque in the trees">  <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption></figure>
  4. 4. Più immagini http://html5doctor.com/the-figure-figcaption-elements/<figure>  <img src="/kookaburra.jpg" alt="Kooaburra">  <img src="/pelican.jpg" alt="Pelican stood on the beach">  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">  <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption></figure>
  5. 5. hgroup● Lelemento che raggruppa due o più intestazioni successive<hgroup>        <h1>Pippo.com</h1>        <h2>Pippo il bracco più famoso del mondo </h2></hgroup>
  6. 6. hgroup● Lo scopo nel caso di prima sarebbe non far interferire lh2 con gli altri h2 del documento che potrebbero servire per definire uno schema logico.● Nel nostro caso lh2 è più che altro un sottotitolo.
  7. 7. time● Lelemento fornisce una versione della data leggibile per luomo ed una leggibile per le “macchine”<time datetime="2007­08­29T13:58Z">August 29th, 2007 at 13:58</time>//lattributo datetime è opzionale, nel caso si userà la stringa data
  8. 8. Le macchine ci controlleranno?
  9. 9. Progress● Lelemeno progress rappresenta il grado di avanzamento di una operazione<section> <p>Progress: <progress> <span id="p">0</span>% </progress> </p> <script>  var progressBar = document.getElementById(p);  function updateProgress(newValue) {        progressBar.textContent = newValue;  }</script></section>
  10. 10. meter● Rappresenta una grandezza scalare, esempio il Page RankYour PageRank is: <meter> 2 out of 10 </meter>
  11. 11. Address<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, contact persons for the <a href="Activity">W3C HTML Activity</a></address>
  12. 12. Address● Gli elementi address rappresentano le informazioni di contatto per lelemento article o lelemento antenato più vicino.● Se questo è lelemento body, allora le informazioni di contatto si applicano al documento nel suo complesso.
  13. 13. Novità nei vecchi elementi<a>The media attribute describes for which mediathe target document was designed. It is purelyadvisory. The value must be a valid mediaquery. The default, if the media attribute isomitted, is "all".
  14. 14. <b> e </i>
  15. 15. Davvero?<b> ed </i> fanno ancora parte delle specifiche<b class="character">Deckard</b>: <i class="voiceover">The report would be routine retirement of a replicant which didnt make me feel...</i>Sinceramente sono non mi è chiarissimo perché vadano mantenuti.
  16. 16. Small● Diventa il tag per le note legali, i diritti dautore, le piccole note a margine.<footer><address>For more details, contact<a href="mailto:matteo@magni.me">matteo</a></address><small> © copyright ilBonzo. </small></footer>
  17. 17. menu<menu type="toolbar">        <command type="command" disabled label="Save" icon="icons/save.png" onclick="save()">        <command type="command" disabled label="Publish" icon="icons/pub.png" onclick="publish()"></menu>
  18. 18. Menu - type● Context: menu di tipo contestuale (tipo quello che si apre col tasto destro su win)● Toolbar: menu tipo barra degli strumenti● List: definisce una lista di comandi
  19. 19. command<menu type="toolbar"> <command type="radio" radiogroup="alignment" checked="checked"          label="Left" icon="icons/alL.png" onclick="setAlign(left)"> <command type="radio" radiogroup="alignment"          label="Center" icon="icons/alC.png" onclick="setAlign(center)"> <command type="radio" radiogroup="alignment"          label="Right" icon="icons/alR.png" onclick="setAlign(right)"> <hr> <command type="command" disabled          label="Publish" icon="icons/pub.png" onclick="publish()"></menu>
  20. 20. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×