HTML TP les balises sémantiques

HTML TP les balises sémantiques

  1. Objectifs

    • ِ Etre capable d’utiliser les balises sémantiques html5 : header , nav , section, article et footer.




  2. Énoncé des exercices

    1. Exercice 01
      • Soit le code HTML4 suivant :
      • <body>
        <div class="article">
           <div class="header">
              <div class="title">Un titre</div>
              <div class="subtitle">Un sous-titre</div>
              <p class="author">Tom B.</p>
           </div>
        
           ...
        
        </div>
        </body>
      • Transformer ce code en HTML5 en utilisant la balise
        .

    2. Exercice 02
      • On souhaite structurer une page web de la manière suivante à l’aide des balises HTML5.
      • Créer une page web en HTML5 dont la partie body est structurée de la même façon, sans utiliser du CSS.

    3. Exercice 03
      • Ajouter le style CSS afin d’obtenir la page voulue de l’exercice précédent

    4. Exercice 04
      • Créez une page index.html contenant les informations suivantes:

        • Titre : Bienvenue sur ma première page.
        • Encodage : utf-8.
        • en-tête: réécrire le titre de la page,
        • créez une barre de navigation contenant un lien vers les pages cours.html,ressources.html, forums.html et contact.html,
        • créez un article (par cours) contenant:
          • en-tête: le noms du cours,
          • dans une section: des informations le concernant,
            • sous forme de liste, les chapitres de chaque cours.
            • dans une balise aside, les images de chaque cours.
        • créer un article contenant:
          • en en-tête: “Média”,
          • une vidéo (format mp4, webm ou ogv) et un mp3 de votre choix,
        • créer un article (par cours) contenant un tableau de tous les tutoriels élaborés pour chaque cours . Vous utiliserez les balises thead et tbody.
        • écrire le nom des auteurs en pied de page.

        Dans un premier temps, on se contente de placer l’information dans les bonnes balises, sans se soucier de l’affichage à l’écran.




Abonnez vous à notre chaîne YouTube gratuitement