• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 e Css3 - 2 | WebMaster & WebDesigner
 

HTML5 e Css3 - 2 | WebMaster & WebDesigner

on

  • 221 views

Seconda lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

Seconda lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

Statistics

Views

Total Views
221
Views on SlideShare
220
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://cypher.informazione.me 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 e Css3 - 2 | WebMaster & WebDesigner HTML5 e Css3 - 2 | WebMaster & WebDesigner Presentation Transcript

    • HTML5 e Css3 [2]Matteo Magni
    • Figure figcaption● Figure viene impiegato per contrassegnareillustrazioni, diagrammi, foto, listati di codiceche vengono citati nel testo principale masenza alterarne il senso. Possono quindiessere tolti e messi in altre sezioni del sito.● Figcaption serve da didascalia per limmagine
    • 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>
    • <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>Più immaginihttp://html5doctor.com/the-figure-figcaption-elements/
    • hgroup● Lelemento che raggruppa due o piùintestazioni successive<hgroup>        <h1>Pippo.com</h1>        <h2>Pippo il bracco più famoso del mondo </h2></hgroup>
    • hgroup● Lo scopo nel caso di prima sarebbe non farinterferire lh2 con gli altri h2 del documento chepotrebbero servire per definire uno schemalogico.● Nel nostro caso lh2 è più che altro unsottotitolo.
    • time● Lelemento fornisce una versione della dataleggibile 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
    • Le macchine ci controlleranno?
    • 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>
    • meter● Rappresenta una grandezza scalare, esempio ilPage 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 persons for the <a href="Activity">W3C HTML Activity</a></address>
    • Address● Gli elementi address rappresentano leinformazioni di contatto per lelemento article olelemento antenato più vicino.● Se questo è lelemento body, allora leinformazioni di contatto si applicano aldocumento nel suo complesso.
    • 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".
    • <b> e </i>
    • 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.
    • Small● Diventa il tag per le note legali, i diritti dautore, lepiccole note a margine.<footer><address>For more details, contact<a href="mailto:matteo@magni.me">matteo</a></address><small> © copyright ilBonzo. </small></footer>
    • 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>
    • Menu - type● Context: menu di tipo contestuale (tipo quelloche si apre col tasto destro su win)● Toolbar: menu tipo barra degli strumenti● List: definisce una lista di comandi
    • 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>
    • Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me