WebIHM

Introduction au web et IHM en S2 Licence Informatique UNC

Exercice 1 : du document HTML à la structure

On considère le document HTML intro.html suivant :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>TD Intro HTML</title>
  </head>
  <body>
    <h1>Titre principal</h1>

    <section id="partie-1">
      <h2>Des paragraphes</h2>
      <p>Paragraphe1</p>
      <p>Paragraphe2</p>
    </section>
    <section id="partie-2">
      <h2>Des listes</h2>
      <ul>
        <li>Premier élément</li>
        <li>Deuxième élément</li>
        <li>
          Troisième élément
          <ol>
            <li>premier sous-élément du 3ème</li>
            <li>second sous-élément du 3ème</li>
          </ol>
        </li>
      </ul>
    </section>
    <section id="partie-3">
      <h2>Des contenus intégrés</h2>
      <img class="thumbnail" src="recette.png" alt="Une recette de pâtes en image" />
    </section>
  </body>
</html>

On rappelle que l’ouverture et la fermeture des balises permet d’imbriquer les éléments et de structurer ainsi le document HTML sous forme d’un arbre.

  1. Listez toutes les éléments, les attributs ainsi que les valeurs des attributs présents dans intro.html.
  2. Indiquer quelles sont la ou les balises auto-fermantes de ce document.
  3. Dessinez l’arbre de balises correspondant au document intro.html
  4. Dessinez ce qu’affichera un navigateur web si vous ouvrez intro.html(avec la mise en forme par défaut).
  5. Indiquer les erreurs que pourrait relever https://validator.w3.org/ sur intro.html.

Exercice 2 : de la structure sémantique au document HTML

On considère une recette de cuisine où les différentes zones qui la constituent sont matérialisées par des rectanles.

Un exemple de recette simple{ width=80% }

  1. Compléter la figure en indiquant la sémantique de chaque zone rectangulaire en choisissant un mot-clef parmi recette, liste, élément de liste, paragraphe, titre et section (les premiers sont déjà choisis pour l’exemple).
  2. Pour chacun des mots-clefs utilisés, choisir un élément HTML appropriée.
  3. Dessiner l’arbre HTML correspondant à structure sémantique du document.
  4. Déduire de la question précédent un document HTML valide qui représenterait la recette.
  5. On ajoute maintenant des quantités aux ingrédients. Modifier le document HTML en conséquence.

Nota bene il n’y a pas de réponse unique à cet exercice de modélisation, il y a plusieurs choix valides.