Écrire une page xHTML1.1 qui affiche :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title>Test des différentes mises en forme du texte en xHTML</title> </head> <body> <h1>Test des différentes mises en forme du texte en xHTML</h1> <p>Voici des exemples :<br/> texte <strong><strong> signifie que c'est important, se met généralement en gras dans les navigateurs visuels</strong>,<br/> texte <em><em> signifie que l'on met l'accent sur ce texte, se met généralement en italique dans les navigateurs visuels</em>,<br/> texte <tt><tt> en télétype utilise une police à chasse fixe</tt>,<br/> texte <samp><samp> échantillon de code, utilise une police à chasse fixe</samp>,<br/> texte <cite><cite> indique une citation</cite>,<br/> texte <q><q> mis en apostrophe</q>,<br/> texte <ins><ins> inséré s'affiche en souligné</ins>,<br/> texte <del><del> supprimé s'affiche en barré</del>,<br/> texte <dfn> voici une définition : le mot <dfn>oui</dfn> est une affirmation,<br/> texte <acronym> voici un acronyme : <acronym title="Société Nationale des Chemins de Fer">SNCF</acronym>,<br/> texte <abbr> voici une abréviation : <abbr title="Identité">ID</abbr>,<br/> texte <var> voici une déclaration de variable : <var>$ma_var</var>,<br/> texte <kbd><kbd> texte en provenance du clavier, utilise une police à chasse fixe</kbd>,<br/> texte avec des espaces,<br/> texte avec des espaces insécables "&nbsp;" ,<br/> </p> <pre>texte avec des espaces et des retours lignes préformatés</pre> <blockquote><p>Et voici le texte d'une citation très longue, si longue qu'elle ne peut rentrer sur une seule ligne excepté si vous avez un écran monstrueusement grand ou une police de caractères affreusement petite ou encore les deux simultanément. Dans tous les autres cas la ligne apparaîtra sous la forme d'un bloc de texte à priori en retrait sauf si mise en forme particulière.</p></blockquote> <address>bloc de texte destiné à indiquer une adresse:<br/> Jean Bon,<br/> 18 rue des Alouettes,<br/> 12345, le Bosquet sur rivière.<br/> France.</address> <pre><code>bloc de texte destiné à contenir du code source: foreach $key (keys %hash); { print $hash{$key}; } </code></pre> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p> </body> </html>
Écrire une page HTML 5 qui affiche :
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title>Test des mesures et progressions HTML 5</title> </head> <body> <h1>Test des mesures et progressions HTML 5</h1> <p>Le niveau de la piscine est <meter min="0" max="100" value="50" low="55" optimum="80" high="95" title="litres">à moitié rempli.</meter></p> <p>Le disque dur est rempli à <meter min="0" max="100" value="30" title="%">rempli à 30%</meter></p> <p>La probabilité de réussite est de <meter value="0.75">3 chances sur 4</meter></p> <p>Avancement du chargement <progress max="100" value="80">80%</progress></p> <p>Nous sommes le <time datetime="2011-06-17">17 juin 2011</time></p> <p>Et voici une zone <mark>en surlignage</mark>.</p> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p> </body> </html>
Écrire une page HTML 5 qui affiche :
Afin de vérifier le comportement de la direction du remplissage nous déclarerons l'entrée de type progress dans un paragraphe s'écrivant de droite à gauche (dir="rtl").
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> <title>Test de la modification d'une barre de progression par le DOM (HTML5)</title> <script type="text/javascript"> function startup() { prg = document.getElementById('mon-progress'); prg.attributes['value'].nodeValue = 0; timer = setInterval(update_progress,100); } function update_progress() { prg = document.getElementById('mon-progress'); if (prg.attributes['value'].nodeValue != 100) { prg.attributes['value'].nodeValue++; } else { alert('terminé'); clearInterval(timer); } } window.onload = startup; </script> <style type="text/css"> p {font-size:300%} </style> </head> <body> <h1>Test de la modification d'une barre de progression par le DOM (HTML5)</h1> <p dir="rtl">Avancement du chargement <progress max="100" value="80" id="mon-progress">0%</progress></p> <footer> <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p> </footer> </body> </html>