Exercices sur la manipulation du texte en xHTML

Rappel de mise en forme du texte en xHTML1.1

Écrire une page xHTML1.1 qui affiche :

Fichier à produire  :

<!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>&lt;strong&gt; signifie que c'est important, se met généralement en gras
      dans les navigateurs visuels</strong>,<br/>
    texte <em>&lt;em&gt; 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>&lt;tt&gt; en télétype utilise une police à chasse fixe</tt>,<br/>
    texte <samp>&lt;samp&gt; échantillon de code, utilise une police à chasse fixe</samp>,<br/>
    texte <cite>&lt;cite&gt; indique une citation</cite>,<br/>
    texte <q>&lt;q&gt; mis en apostrophe</q>,<br/>
    texte <ins>&lt;ins&gt; inséré s'affiche en souligné</ins>,<br/>
    texte <del>&lt;del&gt; supprimé s'affiche en barré</del>,<br/>
    texte &lt;dfn&gt; voici une définition : le mot <dfn>oui</dfn> est une affirmation,<br/>
    texte &lt;acronym&gt; voici un acronyme : <acronym title="Société Nationale des Chemins de Fer">SNCF</acronym>,<br/>
    texte &lt;abbr&gt; voici une abréviation : <abbr title="Identité">ID</abbr>,<br/>
    texte &lt;var&gt; voici une déclaration de variable : <var>$ma_var</var>,<br/>
    texte <kbd>&lt;kbd&gt; texte en provenance du clavier, utilise une police à chasse fixe</kbd>,<br/>
    texte     avec    des     espaces,<br/>
    texte &nbsp;&nbsp; avec &nbsp;&nbsp; des &nbsp;&nbsp; espaces insécables &nbsp;&nbsp; "&amp;nbsp;"&nbsp;&nbsp;&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>
voir le résultat

Affichage de grandeurs dans une page HTML 5

Écrire une page HTML 5 qui affiche :

Fichier à produire  :

<!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>
voir le résultat

Modification d'une barre de progression par le DOM

É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").

Fichier à produire  :

<!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>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !