Exercices sur les images en xHTML

d'affectation d'une image à l'URL d'une page web

Écrire une page web affichant cette image image.png en préfixe de l'URL dans le navigateur

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>Page de test de l'icône en URL</title>
  <link rel="shortcut icon" href="icon.png" />
</head>
<body>
  <h1>Page de test de l'icône en URL</h1>
  <p>Cette page doit afficher cette image  dans la barre d'URL du navigateur</p>
  <p><img src="icon.png" alt="l'icône" /></p>
 
  <p>page validée par <a href="http://validator.w3.org/check?uri=referer">
      <img src="images/valid_xhtml.png" alt="Valid XHTML 1.1" title="xHTML 1.1 validé !" /></a></p>
</body>
</html>
voir le résultat

utilisation d'images SVG dans une page web

Écrire une page web affichant cette image logo_svg.svg en préfixe de l'URL dans le navigateur et dans la fenêtre de navigation.

Fichier à produire  :

<!DOCTYPE html>
<html manifest="test_svg.appcache" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Page de test des images vectorielles</title>
  <link sizes="any" type="image/svg+xml" rel="icon" href="logo_svg.svg"/>
</head>
<body>
  <h1>Page de test du support des images SVG</h1>
  <p>Cette page doit également afficher cette image dans la barre URL du navigateur</p>
  <p><img src="logo_svg.svg" alt="une image en SVG" /></p>
 
  <p>page validée par <a href="http://validator.w3.org/check?uri=referer">
      <img src="images/valid_xhtml.png" alt="Valid XHTML 1.1" title="xHTML 1.1 validé !" /></a></p>
</body>
</html>
voir le résultat

Mixage des espaces de nommage XHTML+SVG dans une page web et animation par javascript

Écrire une page web affichant :

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>Animation d'une image SVG</title>
  <script type="text/javascript">
    window.onload = function(){
      var p = document.getElementsByTagName('path')[0];
      var tx = p.transform.baseVal.getItem(0);
      var x = tx.matrix.e;
      var y = tx.matrix.f;
      setInterval( function(){
        tx.setTranslate( x, y + Math.sin(new Date/400)*30 );
      },1000/30);
    }
  </script>
</head>
<body>
  <h1>Animation d'une image <em>SVG</em></h1> 
  <section>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="-210 -210 420 420">
      <circle r="200" stroke="#400" stroke-width="20" fill="red"/>
      <path fill="none" stroke="#004" stroke-width="20" transform="translate(-396,-230)"
	    d="M487.41,282.411c-15.07,36.137-50.735,61.537-92.333,61.537 c-41.421,0-76.961-25.185-92.142-61.076"/>
      <circle cx="-60" cy="-50" r="20" fill="#000"/>
      <circle cx="60" cy="-50" r="20" fill="#000"/>
    </svg>
  </section>
 
  <p>page validée par <a href="http://validator.w3.org/check?uri=referer">
      <img src="images/valid_xhtml.png" alt="Valid XHTML 1.1" title="xHTML 1.1 validé !" /></a></p>
</body>
</html>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !