+<div class="sws-slide">
+ <h1>Structure d'un document XHTML</h1>
+ <p>Pour être <i>valide</i> un document XHTML contient <a>au
+ moins</a> les balises suivantes : </p>
+ <ul> <li>Une balise <tt>html</tt> qui est la <a>racine</a> (elle
+ englobe toutes les autres balises). La balise <tt>html</tt>
+ contient deux balises filles: <tt>head</tt> et <tt>body</tt></li>
+ <li>La balise <tt>head</tt> représente l'en-tête du document.
+ Elle peut contenir diverses informations (feuilles de styles,
+ titre, encodage de caractères, …). La seule
+ balise <a>obligatoire</a> dans <tt>head</tt> est le titre
+ (<tt>title</tt>). C'est le texte qui est affiché dans la barre
+ de fenêtre du navigateur ou dans l'onglet.
+ </li>
+ <li>la balise <tt>body</tt> représente le contenu de la page. On y
+ trouve diverses balises (<tt>div</tt>, <tt>p</tt>, <tt>table</tt>,
+ …) qui formattent le contenu de la page</li>
+ </ul>
+</div>
+<h1>Encodage des caractères (UTF-8) (digression)</h1>
+ <div class="sws-slide">
+ <h1>Représentation des textes</h1>
+ <p>Avant de représenter des documents complexes, on s'intéresse
+ aux textes (sans structure particulière)</p>
+ <p class="sws-pause">Problématique: comment représenter du texte
+ réaliste ?</p>
+ <p>Exemple de texte réaliste:<br/>
+ <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
+ <tt>"</tt>
+ </p>
+ </div>
+ <div class="sws-slide">
+ <h1>Historiquement…</h1>
+ <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
+ <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
+ <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
+ symboles »</li>
+ <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
+ (lettres accentuées française, italienne, …)</li>
+ <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
+ (Serbe, Hongrois, Croate, Tchèque, …)</li>
+ <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
+ esperanto, </li>
+ <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
+ lituanien, …</li>
+ <li class="sws-pause"> … </li>
+ <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
+ remplacés (par exemple pour « € » à la place de « ¤ »)</li>
+ </ul>
+ </div>
+ <div class="sws-slide">
+ <h1>… et pendant ce temps là, ailleur dans le monde </h1>
+ <p>Encodage multi-octets:</p>
+ <ul>
+ <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
+ <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
+ </ul>
+ <p>Impossibilité de mettre plusieurs « alphabets » dans un même
+ texte</p>
+ <p>Chaque logiciel « interprétait » les séquences d'octet de
+ manière prédéfinie</p>
+ </div>
+ <div class="sws-slide">
+ <h1>UTF-8</h1>
+ <p>Universal (Character Set) Transformation Format 8 bit</p>
+ <ul><li>Encodage à taille variable « universel » (contient tous
+ les alphabets connus)</li>
+ <li>Un organisme (ISO) donne un code à chaque symbole</li>
+ <li>Compatible avec ASCII 7 bits</li>
+ </ul>
+ <p>Encodage</p>
+ <table class="withborder" style="position:relative;left:8%;">
+ <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
+ 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
+ <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
+
+ <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
+ <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
+ <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
+
+ <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
+ <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
+
+ </table>
+ </div>
+ <div class="sws-slide">
+ <h1>Exemples</h1>
+ <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
+ ⟶ 0100 1010<sub>2</sub> (représenté sur un
+ seul octet)</p>
+
+ <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
+ ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
+ 3 octets) : <br/>
+ <s>1110</s><em>0001</em> <s>10</s><em>11 10
+ 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
+</p>
+ <p><tt style="font-size:200%">🐵</tt>
+ ⟶ 128053<sub>10</sub> ⟶ …
+ ≡ 240 237 220 181</p>
+ <p>Avantages</p>
+ <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
+ anglais sont toujours lisibles)</li>
+ <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
+ caractères font 32 bits)</li>
+ </ul>
+ <p>Inconvénients</p>
+ <ul>
+ <li>Caractères à taille variable: il faut parcourir le texte
+ pour trouver le n<sup>ème</sup> caractère</li>
+ <li>Les vieux logiciels doivent être adaptés</li>
+ </ul>
+ </div>