techmindconsulting / workshop-html

TP : Exercices HTML

Workshop

Pré-requis :

Suivre ce cours pour un débutant en informatique : Comprendre le web

Tous vos TP(s) doivent être dans le repertoire workshop comme ceci : C:/workspace/workshop-html/ :

1. Créer un repertoire workspace dans C: ou /home/nom_de_session
2. Créer un repertoire workshop-html dans workspace
3. Créer un dossier par workshop (Ex: C:/workspace/workshop-html/tp-cv/)

• Workshop Recette : Maquette recette de cuisine

  1. Concevoir une page d'accueil avec un titre et les liens suivants :
     • Accueil
     • Voir la recette (doit avoir un lien sur la maquette HTML voir partie 2)
     • Télécharger le document
  2. Reproduire la maquette en HTML et voici les critères que vous devez respecter :
     • Je dois pouvoir naviguer sur les sections de la recette via un menu et prévoir un lien de retour sur la page d'acceuil
     • Le document doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)
     • La recette doit avoir une favicon (en pièce jointe) et une description exploitable par les moteur de recherche

• Workshop CV : Maquette cv

  • Reproduire la maquette en HTML et voici les critères que vous devez respecter :
    • Je dois pouvoir naviguer sur les sections du CV via un menu
    • Je dois pouvoir télécharger le CV au format pdf (mettre le cv pdf en lien de téléchargement)
    • Je dois pouvoir être contacter par un simple clic sur le téléphone et l'email
    • Le CV doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)
    • Le CV doit avoir une favicon (en pièce jointe) et une description exploitable par les moteur de recherche

• Workshop Lettre : Lettre

  • Maquette : https://raw.githubusercontent.com/techmindconsulting/learning-area/main/html/introduction-to-html/marking-up-a-letter-start/letter-update.png
  • Texte à intégrer https://raw.githubusercontent.com/techmindconsulting/learning-area/main/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt
    • Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.
    • Les six indices/exposants seront balisés de manière appropriée.
    • Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.
    • Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com
    • La citation et la devise de l'université doivent être marquées avec les éléments appropriés.
    • Aucun code CSS doit être utilisé
    • Le document doit être valide W3C
    • La page doit être déployé sur https://www.netlify.com/

• Workshop Galerie photo : Maquette galerie photo

  • Reproduire la maquette en HTML, tous les éléments dont vous avez besoin sont à télécharger:

    • github ou codesandbox

    • Voici les critères que vous devez respecter :

      • Je ne dois pas modifier le CSS
      • Je dois pouvoir afficher la page de galerie avec les miniatures, chaque miniature doit avoir une largeur de 400 pixel et une hauteur de 266 pixel
      • Je dois pouvoir afficher chacune des photos avec une largeur de 900 pixel et une hauteur de 600 pixel de la galerie en cliquant sur l'une des miniatures. Chacune des photos doit avoir son propre fichier html
      • Je dois pouvoir naviguer à travers la galerie pour voir chacune des photos à l'aide du menu
      • Le document doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)

• Workshop Lecteur : Lecteur vidéo

  • Reproduire la maquette en HTML, tous les éléments dont vous avez besoin sont à télécharger ici
  • Copier coller le style dans la balise

          <style>
          * {
              margin: 0;
              padding: 0;
              box-sizing: border-box;
          }
          
          html {
              font-family: "Roboto", sans-serif;
          }
          
          body {
              display: flex;
              flex-wrap: wrap;
              width: 80%;
              justify-content: center;
              margin: 0 auto;
          }
  
          article {
              margin: 32px;
              width: 640px;
          }
  
          aside {
              margin-top: 16px;
          }
  
          aside h2 {
              font-size: 20px;
              margin-bottom: 16px;
          }
  
          video {
              outline: none;
          }
  
          h1 {
              margin: 16px 0;
          }
  
          p {
              padding-bottom: 16px;
          }
  
          h1 + p {
              color: grey;
              font-size: medium;
              border-bottom: 1px solid lightgrey;
          }
          h2 {
              margin-top: 8px;
              font-size: 14px;
          }
  
          h3 {
              margin: 12px 0;
              font-size: 12px;
          }
  
          div.description {
              line-height: 1.4rem;
          }
  
          figure {
              position: relative;
              margin-bottom: 16px;
          }
  
          figcaption {
              background: rgba(0, 0, 0, 0.5);
              color: white;
              padding: 0.5rem 0;
              position: absolute;
              bottom: 0;
              text-align: center;
              width: 100%;
              height: 32px;
          }
          
          figcaption {
              font-size: 14px;
          }
  
          img {
              object-fit: cover;
          }
      </style>
  

  • Voici les critères que vous devez respecter :
    • Je ne dois pas modifier le CSS
    • Je dois pouvoir afficher une video qui ne démarre pas automatiquement
    • Je dois pouvoir voir la vignette de la vidéo
    • Je dois pouvoir gérer le format mp4 et ogg
    • Je dois pouvoir voir un message d'avertissment si le format de la vidéo n'est pas supporté
    • Je dois pouvoir voir la barre latérale, chaque image doit être cliquable
    • Le document doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)

• Workshop Lecteur iframe : Lecteur vidéo

  • Dans le TP précédent, remplacer la video par une iframe youtube https://youtu.be/aqz-KE-bpKQ

• Workshop Tableau simple : Maquette tableau des médailles

  • Reproduire la maquette en HTML et voici les critères que vous devez respecter :
    • Le document doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)

    <style>
        table {
          border: 1px solid black;
          border-collapse: collapse;
        }
        th, td {
          padding: 15px;
          text-align: left;
        }
      th {
          background-color: #4CAF50;
          color: white;
      }
    </style>
    

• Workshop Tableau avancé : Maquette bon de commande

  • Reproduire le bon de commande en HTML et voici les critères que vous devez respecter :
    • Le code du style doit être copié collé dans l'en-tête de votre document HTML

    <style>
        html {
          font-family: sans-serif;
        }
    
        body {
            height: 100%;
        }
    
        caption {
          caption-side: bottom;
          text-align: right;
        }
    
        tbody tr:nth-child(odd) {
            background-color: gainsboro;
        }
        tbody tr:nth-child(even) {
            background-color: ghostwhite;
        }
    
        table {
            table-layout: fixed;
            width: 100%;
            border: 1px solid black;
            border-collapse: collapse;
        }
        tr {
            background-color: #f8f6ff
        }
        th, td {
            padding-right: 5%;
            text-align: center;
            border: 1px solid black;
            letter-spacing: 1px;
        }
        th {
            font-size: 18px;
            color: #fff;
            background-color: #393939;
            padding-top: 18px;
            padding-bottom: 18px;
            text-transform: capitalize;
            letter-spacing: 2px;
    
        }
        td {
            font-size: 18px;
            color: #000000;
            line-height: 1.4;
            padding-top: 16px;
            padding-bottom: 16px;
        }
    
        tfoot th {
            text-align: right;
        }
    </style>
    

• Workshop Formualaire : Enoncé formulaire d'inscription

  
  • Créer un formulaire d'inscription avec les champs suivants, regroupez les champs obligatoires avec la légende "Informations personnelles" et les champs non obligatoire avec la légende "Autre information"
    • Photo
    • Mr ou Mme (obligatoire, 1 seul choix est possible)
    • Email (obligatoire)
    • Mot de passe (obligatoire)
    • Répétez le mot de passe (obligatoire)
    • Nom (obligatoire)
    • Prénom (obligatoire)
    • Date de naissance (obligatoire)
    • Téléphone (obligatoire) doit être un numéro français (aidez vous du site https://www.html5pattern.com)
    • Sports favori (liste déroulante avec plusieurs choix possible contenant les valeurs ci dessous avec la création de deux groupes d'options) :
      • Sport collectif
        • Football
        • Basket
        • Handball
        • Rugby
      • Sport individuel
        • Badminton
        • Judo
        • Tennis
        • Karaté
        • Ping Pong
        • Athlétisme
  • Lorsque j'arrive sur le formulaire, le focus doit automatiquement se mettre sur le champs email
  • Ce formulaire doit comporter un bouton d'envoi et de reinitialisation
  • Le formulaire doit être valide W3C [validateur HTML W3C] (https://validator.w3.org/)