HTML è il linguaggio di marcatura che permette di dare un volto alla Grande Rete. Oltre a questo, l’HTML, grazie a HTML Slidy, un sistema sviluppato dal W3C, può essere utilizzato anche per creare presentazioni in diapositive.
HTML Slidy permette di memorizzare in un unico file HTML una presentazione a diapositive stile OpenOffice Impress. A dispetto di quello che si potrebbe pensare, non è l’ennesimo tentativo di proporre agli utenti uno strumento per creare presentazioni in un mercato già saturo di questi strumenti, ma un modo alternativo per utilizzare e sfruttare le capacità dell’HTML.
Uno dei vantaggi di HTML Slidy è quello di inglobare in un sito o in una pagina Web una presentazione in maniera perfettamente compatibile (essendo composto di codice HTML). Inoltre permette una completa personalizzazione delle diapositive anche attraverso l’incorporamento di codice CSS, Javascript, ASP o altro.
Per poter creare e aprire una presentazione scritta mediante HTML Slidy non c’è bisogno di editor e programmi costosi in termini monetari e/o di risorse di sistema. Essendo una pagina HTML basterà un editor di testo (blocco note o Notepad++ vanno benissimo), un Web browser (per la lettura della presentazione) e una connessione ad Internet (non necessaria se si sceglie di lavorare offline).
Per poter creare una presentazione secondo HTML Slidy dobbiamo aggiungere nell’head i riferimenti a show.css, slidy.js e print.css (quest’ultimo facoltativo) per poter correttamente interpretare gli argomenti dei tag e le azioni per il controllo delle slide.
Per far ciò scriviamo nel nostro head:
<link rel="stylesheet" type="text/css" media="screen, projection" href="http://www.w3.org/Talks/Tools/Slidy/show.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy/slidy.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="print" href="http://www.w3.org/Talks/Tools/Slidy/print.css" />
Nel <body> ogni slide viene descritta tramite il tag div con la classe “slide”:
<div class="slide">...</div>
Mentre per inserire una slide principale (prima pagina):
<div class="slide cover">...</div>
Con HTML Slidy è possibile anche far entrare gli elementi in maniera seguenziale al click del mouse. Per far ciò bisogna utilizzare la classe “incremental” come mostrato nell’esempio:
<ul class="incremental">
<li>Questo elemento compare per primo</li>
<li>E questo è il secondo a comparire, dopo un click del mouse</li>
</ul>
Per impostare lo sfondo delle slide:
<div class="background">...</div>
