unix_prog_web/unix_prog_web_04.xhtml

   1 <?xml version="1.0" encoding="utf-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
   4           >
   5 <html xmlns="http://www.w3.org/1999/xhtml" >
   6   <head>
   7     <title>Web et HTML</title>
   8
   9     <meta http-equiv="Content-Type"
  10           content="text/html; charset=utf-8" />
  11     <meta name="copyright"
  12           content="Copyright &#169; 2013 Kim Nguyễn" />
  13
  14     <!-- Load jQuery -->
  15     <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
  16     <!-- Load the library -->
  17     <script src="../simpleWebSlides.js" type="text/javascript" ></script>
  18
  19     <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css"  media="all" />
  20     <!-- Load a custom Theme, the class-element marks this style-sheet
  21          a "theme" that can be swtiched dynamicaly -->
  22     <link class="sws-theme" rel="stylesheet"  title="U-Psud style"  href="../themes/uPsud.css" type="text/css" />
  23
  24     <!-- Customize some templates and initialize -->
  25
  26     <script type="text/javascript">
  27       SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
  28       SWS.Config['sws-object-deactivate'] =  SWS.Effects.objectDeactivateFadeOut;
  29       SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
  30
  31       //Ensures that we load SWS at the very end, after MathJax has
  32       //been initialized
  33
  34       $(window).load(SWS.Presentation.init);
  35     </script>
  36   </head>
  37   <body>
  38     <a class="sws-previous" href="prog_internet_03.xhtml" />
  39     <div class="sws-slide sws-cover sws-option-nofooter">
  40       <h1>Programmation Internet</h1>
  41       <h1>Cours 4</h1>
  42       <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
  43       <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
  44     </div>
  45
  46     <div class="sws-slide" >
  47       <h1> Plan </h1>
  48       <ol >
  49         <li> Systèmes d'exploitation &#10004;</li>
  50         <li> Réseaux et Internet &#10004; </li>
  51         <li> Le Web
  52           <ul class="empty">
  53             <li class="hl">3.1 Internet et ses services</li>
  54             <li>3.2 Fonctionnement du Web</li>
  55             <li>3.3 Adressage des documents Web</li>
  56             <li>3.4 Le protocole HTTP</li>
  57             <li>3.5 HTML, le format des documents</li>
  58           </ul>
  59         </li>
  60       </ol>
  61     </div>
  62     <h1>Internet et ses services </h1>
  63     <div class="sws-slide">
  64       <h1> Bref historique d'Internet (1/2)</h1>
  65       <table class="desc">
  66         <tr>
  67           <td style="width:6.5em;">1959-1968</td> <td>ARPA
  68             (<i>Advanced Research Project Agency</i>) crée un réseau
  69             de quelques machines capable de résister à une attaque.</td>
  70         </tr>
  71         <tr>
  72           <td>1969</td> <td>ARPANET. Interconnexion des ordinateurs
  73             centraux des grandes universités et institutions
  74             américaines. Première utilisation du concept de paquet d'information.</td>
  75         </tr>
  76         <tr>
  77           <td>1970-1982 </td>
  78           <td>Interconnexion avec la Norvège et le Royaume-Uni.
  79           </td>
  80         </tr>
  81         <tr>
  82           <td>1982</td>
  83           <td> Passage au protocole TCP/IP. Naissance de l'Internet actuel.</td>
  84         </tr>
  85       </table>
  86     </div>
  87     <div class="sws-slide">
  88       <h1> Bref historique d'Internet (2/2)</h1>
  89       <table class="desc">
  90         <tr>
  91           <td style="width:6.7em;">1986</td> <td>« Autoroutes de
  92             l'information ». Des super-ordinateurs et les premières
  93             connexions à fibres optiques sont utilisées pour accélérer
  94             le débit d'Internet.</td>
  95         </tr>
  96         <tr>
  97           <td>1987-1992</td> <td>Apparition des premiers fournisseurs
  98             d'accès. Les entreprises se connectent.</td>
  99         </tr>
 100         <tr>
 101           <td>1993-2000 </td>
 102           <td>Avènement du Web. Démocratisation du haut-débit (vers
 103           2000 pour la France).
 104           </td>
 105         </tr>
 106         <tr>
 107           <td>2000-présent</td>
 108           <td> Explosion des services en ligne, arrivée des réseaux
 109           sociaux, internet mobile, <i>Cloud</i> (stockage et calcul
 110           mutualisés accessible depuis internet).</td>
 111         </tr>
 112       </table>
 113     </div>
 114
 115     <div class="sws-slide">
 116       <h1> Internet </h1>
 117       <ul>
 118         <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
 119           </li>
 120         <li> Modèle Client/Serveur</li>
 121         <li> Un serveur fournit un service:
 122           <ul>
 123             <li>courriel</li>
 124             <li>transfert de fichier (ftp)</li>
 125             <li>connexion à distance (ssh)</li>
 126             <li>Web (http)</li>
 127           </ul>
 128           </li>
 129         <li> Plusieurs services peuvent être actifs sur la même
 130         machine (serveur). Un <em>port (identifiant numérique)</em>
 131         est associé à chaque service. Sur Internet, un service est
 132         identifié par:
 133           <ul>
 134             <li>L'adresse IP de la machine sur lequel il fonctionne</li>
 135             <li>Le numéro de port sur lequel le programme attend les
 136             connexions</li>
 137           </ul>
 138         </li>
 139       </ul>
 140     </div>
 141     <div class="sws-slide">
 142       <h1> Exemples de services </h1>
 143       <table class="simple" style="width:100%">
 144         <tr><th  style="width:10%">Service</th>
 145           <th style="width:40%">Protocole</th>
 146           <th  style="width:5%">Port</th>
 147           <th style="width:45%;">Description</th>
 148         </tr>
 149         <tr>
 150           <td>ftp</td> <td >File Transfer Protocol</td> <td>
 151           20,21 </td> <td>Transfert de fichiers</td> </tr>
 152         <tr> <td>telnet</td> <td>Network Virtual
 153         Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
 154         <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
 155         distance crypté</td></tr>
 156         <tr> <td>mail</td><td>Simple Mail Transfer
 157         Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
 158         <tr><td>pop</td> <td>Post Office
 159         Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
 160         <tr><td>imap</td> <td>Internet Message Access
 161         Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
 162         <tr><td>nslookup</td> <td>Domain Name
 163         System</td> <td>42</td> <td>Serveur de noms</td></tr>
 164         <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
 165
 166       </table>
 167     </div>
 168     <div class="sws-slide">
 169       <h1> World Wide Web (1/2)</h1>
 170       <ul>
 171         <li>Service de distribution de page <em>hypertexte</em></li>
 172         <li>Une page <em>hypertexte</em> contient des références
 173           immédiatement accessibles à d'autres pages (pointeurs
 174           ou <em>liens hypertextes</em>)</li>
 175         <li>Les pages sont décrites dans le
 176           langage <em>HTML</em> (HyperText Markup Language) </li>
 177         <li>Architecture client/serveur:
 178           <ul>
 179             <li>Les pages sont stockées sur le serveur</li>
 180             <li>Les pages sont envoyées au client (navigateur Web) qui
 181               en assure le rendu</li>
 182           </ul>
 183         </li>
 184         <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
 185           le client et le serveur</li>
 186       </ul>
 187     </div>
 188
 189     <div class="sws-slide">
 190       <h1> World Wide Web (2/2)</h1>
 191       <p>Concepts clé:</p>
 192       <table class="desc">
 193         <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
 194         la page »)</td> </tr>
 195         <tr><td>HTTP</td> <td>protocole de communication entre un
 196         client et un serveur Web</td> </tr>
 197         <tr><td>HTML</td> <td>langage de description des pages
 198         Web</td> </tr>
 199       </table>
 200       <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
 201       <ul>
 202         <li>Standardisation du contenu multimédia (images, vidéos et
 203         sons en <i>streaming</i>)</li>
 204         <li>Contenu interactif avancé (stockage de fichier coté
 205         client, rendu 3D, …)</li>
 206         <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
 207       </ul>
 208     </div>
 209
 210
 211     <div class="sws-slide" >
 212       <h1> Plan </h1>
 213       <ol >
 214         <li class="done" > Systèmes d'exploitation</li>
 215         <li class="done" > Réseaux et Internet </li>
 216         <li> Le Web
 217           <ul class="empty">
 218             <li class="done">3.1 Internet et ses services</li>
 219             <li class="hl" >3.2 Fonctionnement du Web</li>
 220             <li class="">3.3 Adressage des documents Web </li>
 221             <li>3.4 Le protocole HTTP</li>
 222             <li>3.5 HTML, le format des documents</li>
 223           </ul>
 224         </li>
 225       </ol>
 226     </div>
 227     <h1> Fonctionnement du Web </h1>
 228     <div class="sws-slide">
 229       <h1>Fonctionnement du Web</h1>
 230       <div style="text-align:center;">
 231         <img style="width:90%;height:50%;" src="cours_4.svg"
 232         type="image/svg+xml" />
 233       </div>
 234
 235     </div>
 236
 237     <div class="sws-slide">
 238       <h1>Côté client</h1>
 239       <p>Le navigateur :</p>
 240       <ul>
 241         <li>Analyse l'URL demandée</li>
 242         <li>Obtient l'adresse IP auprès du serveur DNS</li>
 243         <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
 244         <li>Envoie une <em>requête HTTP</em> au serveur</li>
 245         <li>Récupère la page envoyée par le serveur dans
 246         sa <em>réponse</em></li>
 247         <li>Analyse la page et récupère les éléments référencés :
 248         images, sons, …</li>
 249         <li>Effectue le traitement du code client</li>
 250         <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
 251       </ul>
 252     </div>
 253
 254     <div class="sws-slide">
 255       <h1>Côté serveur</h1>
 256       <ul>
 257         <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
 258         connexions sur un port par défaut (80 dans le cas de HTTP)</li>
 259         <li>À chaque nouvelle connexion, le <i>listener</i> crée
 260         un <i>thread</i> de traitement et se remet en attente
 261         </li>
 262         <li>Le <i>thread</i> de traitement vérifie la validité de la
 263         requête :
 264           <ul>
 265             <li>le document demandé existe ?
 266               </li>
 267             <li>le client est autorisé à accéder au document ?
 268               </li>
 269             <li>…</li>
 270           </ul>
 271         </li>
 272         <li>Le <i>thread</i> de traitement répond à la requête :
 273           <ul>
 274             <li>Exécution de code côté serveur, récupération de
 275             données dans une BD, …
 276               </li>
 277             <li>Envoi de la page au client
 278               </li>
 279           </ul>
 280         </li>
 281       </ul>
 282     </div>
 283
 284     <div class="sws-slide" >
 285       <h1> Plan </h1>
 286       <ol >
 287         <li class="done" > Systèmes d'exploitation</li>
 288         <li class="done" > Réseaux et Internet </li>
 289         <li> Le Web
 290           <ul class="empty">
 291             <li class="done">3.1 Internet et ses services</li>
 292             <li class="done" >3.2 Fonctionnement du Web</li>
 293             <li class="hl">3.3 Adressage des documents Web </li>
 294             <li>3.4 Le protocole HTTP</li>
 295             <li>3.5 HTML, le format des documents</li>
 296           </ul>
 297         </li>
 298       </ol>
 299     </div>
 300     <h1> Adressage des documents Web </h1>
 301     <div class="sws-slide">
 302       <h1>Adressage des documents Web (1/3)</h1>
 303       <table class="desc">
 304         <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
 305         identifie un document sur internet</td></tr>
 306       </table>
 307       <p>Une URL se décompose en 3 partie</p>
 308       <ul><li><em>protocole</em> (comment ?)</li>
 309         <li><span style="color:orange;">adresse</span> (où ?)</li>
 310         <li><span style="color:blue;">document</span> (quoi ?)</li>
 311       </ul>
 312       <p>Syntaxe (simplifiée) :</p>
 313       <code>            <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
 314       <p>Exemple :</p>
 315       <code>            <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
 316     </div>
 317
 318     <div class="sws-slide">
 319       <h1>Adressage des documents Web (2/3)</h1>
 320       <p>On peut aussi préciser <span style="color:purple;">un numéro
 321       de port</span>, des <span style="color:black;">paramètres</span>
 322       et un <span style="color:red;">emplacement</span> :
 323       </p>
 324       <code>            <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&amp;<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
 325       <p class="sws-pause" >Exemple :</p>
 326       <code>    <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
 327       <p>Le serveur utilise les paramètres passés par le client dans
 328       l'URL pour <i>calculer</i> le contenu de la page (changer la
 329       chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
 330     </div>
 331     <div class="sws-slide">
 332       <h1>Adressage des documents Web (3/3)</h1>
 333       <p>
 334         La <em>racine</em> d'un site Web
 335         (ex: <em><code>http://www.lri.fr/</code></em>) correspond
 336         à un répertoire sur le disque du serveur
 337         (ex: <em><code>/var/www</code></em>). Le fichier</p>
 338       <code>      http://www.lri.fr/index.html</code>
 339       <p>se trouve à l'emplacement</p>
 340       <code>      /var/www/index.html</code>
 341       <p>Le serveur Web peut aussi effectuer des <em>réécritures
 342       d'adresses</em> :</p>
 343       <code>      http://www.lri.fr/~kn/index.html</code>
 344       <p>devient</p>
 345       <code>      /home/kn/public_html/index.html</code>
 346     </div>
 347
 348     <h1>Le protocole HTTP</h1>
 349     <div class="sws-slide" >
 350       <h1> Plan </h1>
 351       <ol >
 352         <li class="done" > Systèmes d'exploitation</li>
 353         <li class="done" > Réseaux et Internet </li>
 354         <li> Le Web
 355           <ul class="empty">
 356             <li class="done">3.1 Internet et ses services</li>
 357             <li class="done" >3.2 Fonctionnement du Web</li>
 358             <li class="done">3.3 Adressage des documents Web </li>
 359             <li class="hl">3.4 Le protocole HTTP</li>
 360             <li>3.5 HTML, le format des documents</li>
 361           </ul>
 362         </li>
 363       </ol>
 364     </div>
 365
 366     <div class="sws-slide">
 367       <h1>Caractéristiques du protocole HTTP</h1>
 368       <ul>
 369         <li>Sans connexion permanente:
 370           <ul>
 371             <li>Le client se connecte au serveur, envoie sa requête,
 372             se déconnecte</li>
 373             <li>Le serveur se connecte au client, envoie sa réponse,
 374               se déconnecte</li>
 375           </ul>
 376         </li>
 377         <li>Indépendant du contenu : permet d'envoyer des documents
 378         (hyper) texte, du son, des images, …</li>
 379         <li>Sans <em>état</em>: chaque paire requête/réponse est
 380         indépendante (le serveur ne maintient pas d'information sur le
 381           client entre les requêtes)</li>
 382         <li>Protocole en mode <em>texte</em></li>
 383       </ul>
 384     </div>
 385     <div class="sws-slide">
 386       <h1>Format des messages HTTP</h1>
 387       <p>Les messages ont la forme suivante</p>
 388       <ul><li>Ligne initiale CR LF</li>
 389         <li>zéro ou plusieurs lignes d'option CR LF</li>
 390         <li>CR LF</li>
 391         <li>Corp du message (document envoyé, paramètres de la
 392         requête, …)</li>
 393       </ul>
 394       <ul><li><em>Requête</em> la première ligne contient un nom
 395       de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
 396       méthode et la version du protocole</li>
 397         <li><em>Réponse</em> la version du protocole, le code de la
 398         réponse (200, 404, 403, …) et un message informatif
 399         </li>
 400       </ul>
 401     </div>
 402     <div class="sws-slide">
 403       <h1>Démo</h1>
 404     </div>
 405     <h1>HTML, le format des documents</h1>
 406     <div class="sws-slide" >
 407       <h1> Plan </h1>
 408       <ol >
 409         <li class="done" > Systèmes d'exploitation</li>
 410         <li class="done" > Réseaux et Internet </li>
 411         <li> Le Web
 412           <ul class="empty">
 413             <li class="done">3.1 Internet et ses services</li>
 414             <li class="done" >3.2 Fonctionnement du Web</li>
 415             <li class="done">3.3 Adressage des documents Web </li>
 416             <li class="done">3.4 Le protocole HTTP</li>
 417             <li class="hl">3.5 HTML, le format des documents</li>
 418           </ul>
 419         </li>
 420       </ol>
 421     </div>
 422     <div class="sws-slide">
 423       <h1>HTML</h1>
 424       <p>
 425         <em>HyperText Markup Language</em> : langage de mise en forme
 426         de documents hypertextes (texte + liens vers d'autres
 427         documents). Développé au CERN en 1989.<br/>
 428         <em>1991</em> : premier navigateur en mode texte<br/>
 429         <em>1993</em> : premier navigateur graphique (mosaic)
 430         développé au NCSA (National Center for Supercomputing
 431         Applications)
 432       </p>
 433     </div>
 434     <div class="sws-slide">
 435       <h1>Document HTML</h1>
 436       <ul><li> est un document <em>semi-structuré</em></li>
 437         <li> dont la structure est donnée par
 438         des <em>balises</em></li>
 439       </ul>
 440       <div>
 441       <table class="btable simple" style="width:90%;margin-left:5%">
 442         <thead>
 443           <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
 444         </thead>
 445         <tr><td ><tt><![CDATA[Un texte <b>en gras</b> ]]></tt></td><td>Un
 446         texte <b>en gras</b></td></tr>
 447         <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
 448           <td><a style="color:blue;text-decoration:underline;"
 449         href="http://www.u-psud.fr">Un lien</a></td></tr>
 450         <tr><td><code><![CDATA[<ul>
 451   <li>Premièrement</li>
 452   <li>Deuxièmement</li>
 453 </ul> ]]></code></td> <td><ul>
 454 <li>Premièrement</li>
 455 <li>Deuxièmement</li>
 456 </ul>
 457 </td></tr>
 458       </table>
 459       </div>
 460 <p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
 461     ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
 462     balise <em>fermante</em>. On peut
 463     écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
 464     <tt><![CDATA[<toto></toto>]]></tt>.
 465 </p>
 466     </div>
 467     <div class="sws-slide">
 468       <h1>Historique du langage HTML</h1>
 469 <table class="desc">
 470   <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
 471 IBM. Introduction de la notion de balise.</td></tr>
 472 <tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
 473 <tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
 474 netscape, ... ) interprètent le standard de manière
 475 différente</td></tr>
 476 <tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
 477 documents semi-structurés (SGML simplifié)</td></tr>
 478 <tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
 479     XML</td></tr>
 480 <tr><td>2008</td><td> Première proposition pour le nouveau standard,
 481     HTML5</td></tr>
 482 <tr><td>2014</td><td>Standardisation de HTML5</td></tr>
 483 </table>
 484     </div>
 485
 486     <div class="sws-slide">
 487       <h1>XHTML <i>vs</i> HTML</h1>
 488       <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
 489       <ul>
 490         <li>
 491           Les balises sont <em>bien parenthésées</em>
 492           (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red">&lt;/b&gt;</span></tt> est interdit)
 493         </li>
 494         <li>Les balises sont en minuscules</li>
 495       </ul>
 496       <p>Les avantages sont les suivants</p>
 497       <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
 498       pas fermer certaines balise … Les navigateurs corrigent ces
 499       erreurs de manières <em>différentes</em></li>
 500         <li>Le document est <em>structuré</em> comme un programme
 501         informatique (les balises ouvrantes/fermantes correspondent à
 502         { et }). Plus simple à débugger.</li>
 503       </ul>
 504     </div>
 505 <div class="sws-slide">
 506   <h1>Rôle d'(X)HTML</h1>
 507   <p>Séparer la <em>structure</em> du document de
 508   son <em>rendu</em>. La structure donne une <em>sémantique</em> au
 509   document :</p>
 510   <ul>
 511     <li>ceci est un titre</li>
 512     <li>ceci est un paragraphe</li>
 513     <li>ceci est un ensemble de caractères importants</li>
 514   </ul>
 515   <p>Cela permet au navigateur d'assurer un rendu en fonction de la
 516   sémantique. Il existe différents types de rendus:</p>
 517   <ul>
 518     <li>graphique interactif (Chrome, Firefox, Internet Explorer,
 519     …)</li>
 520     <li>texte interactif (Lynx, navigateur en mode texte)</li>
 521     <li>graphique statique (par ex: sur livre électronique)</li>
 522     <li>rendu sur papier</li>
 523     <li>graphique pour petit écran (terminal mobile)</li>
 524   </ul>
 525 </div>
 526 <div class="sws-slide">
 527   <h1>Exemple de document</h1>
 528   <p style="text-align:center;font-size:smaller;">(liste des balises
 529   données sur la feuille de TD 4!)</p>
 530 <div style="margin-left:10%;">
 531 <code style="font-size:smaller;"><![CDATA[  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 532     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 533   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 534     <head>
 535       <title>Un titre</title>
 536       <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 537     </head>
 538     <body>
 539       <h1>Titre de section</h1>
 540       <p> premier paragraphe de texte. On met
 541       un <a href="http://www.lri.fr">lien</a> ici.
 542       </p>
 543       <!-- on peut aussi mettre des commentaires -->
 544     </body>
 545   </html>]]></code>
 546 </div>
 547 </div>
 548   </body>
 549 </html>