Download - HTML5 e Css3 - 2 | WebMaster & WebDesigner
HTML5 e Css3 [2]Matteo Magni
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 l'immagine
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
● L'elemento 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 far interferire l'h2 con gli altri h2 del documento che potrebbero servire per definire uno schema logico.
● Nel nostro caso l'h2 è più che altro un sottotitolo.
time
● L'elemento fornisce una versione della data leggibile per l'uomo ed una leggibile per le “macchine”
<time datetime="20070829T13:58Z">
August 29th, 2007 at 13:58
</time>
//l'attributo datetime è opzionale, nel caso si userà la stringa data
Le macchine ci controlleranno?
Progress
● L'elemeno 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 il Page Rank
Your 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 le informazioni di contatto per l'elemento article o l'elemento antenato più vicino.
● Se questo è l'elemento body, allora le informazioni di contatto si applicano al documento nel suo complesso.
Novità nei vecchi elementi
<a>
The media attribute describes for which media the target document was designed. It is purely advisory. The value must be a valid media query. The default, if the media attribute is omitted, 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 didn't make me feel...</i>
Sinceramente sono non mi è chiarissimo perché vadano mantenuti.
Small
● Diventa il tag per le note legali, i diritti d'autore, le piccole note a margine.
<footer>
<address>For more details, contact
<a href="mailto:[email protected]">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 quello che 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://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail: