Traitement du code source
#########################

.. raw:: html

   <iframe width="560" height="315" src="https://www.youtube.com/embed/QWXKg1n-RK0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Le HTML que nous écrivons n’est pas utilisé tel quel par le navigateur.
Avant d’être utilisé, ce dernier est traité, et enrichi, par le moteur
de rendu du navigateur.

Le moteur de rendu d’un navigateur peut changer d’un navigateur à
l’autre, et il peut arriver que le rendu ne soit pas identique de l’un à
l’autre.

.. figure:: ../images/schema-html-navigateur.svg
   :alt: todo

Le HTML lu par le navigateur est donc transformée en une arborescence
appelé le DOM, pour **Document Object Model** ou **Modèle d’Objet
Document**.

Exemple de représentation en arborescence
*****************************************

   Le schéma suivant représente notre carte postale sous forme
   d’arborescence

.. figure:: ../images/schema-carte-postale.svg
   :alt: todo

   Pour rappel le document balisé était le suivant :

.. code-block:: html

   <document>

     <!-- On peut avoir des métadonnées -->
     <metadonnees>
       <auteur>Albert</auteur>
       <type>carte postale</type>
     </metadonnes>

     <!-- Le contenu de la missive -->
     <contenu>

       <principal>
         <titre>Mes supers vacances</titre>
         <paragraphe>chère mamie, je suis en vacances à la mer, il y a des vagues.</paragraphe>
         <paragraphe>Je te fais des gros bisous, Albert</paragraphe>
         <image alt="Dessin représentant Albert à la plage. Il y a des vagues et un bateau." src="../images/dessin-d-albert.png">
       <principal>

       <!-- Affranchissement -->
       <affranchissement>
         <timbre valeur="100" devise="francs">
         <timbre valeur="1000" devise="francs">
       </affranchissement>

       <!-- La destination -->
       <destinataire>
         <nom>Mamie</nom>
         <adresse>
           <numero>10</numero>
           <rue>rue des arbres</rue>
           <cp>10000</cp>
           <localite>trifouilly-les-oies</localite>
         </adresse>
       </destinataire>

     </contenu>

   </document>