Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
html

HTML TP les balises sémantiques

Un cours complet pour maîtriser HTML TP les balises sémantiques.

0 chapitres 0 QCM Accès gratuit
  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>
  3. Transformer ce code en HTML5 en utilisant la balise
    .
  4. 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.

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

  • 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.