Aller au contenu

Laboratoire semaine 3

Consignes

Ce laboratoire vous permet de vous familiariser avec:

  • Apprendre à utiliser les balises principales : <header>, <nav>, <main>, <footer>, <h1> à <h3>, <p>, <ul>, <ol>, <img>, <a>, <div>, <section> et <span>.
  • Pratiquer différents types de liens cliquables.
  • Expérimenter avec les premières pages CSS

Durée: 3h, finir l'énoncé avant la prochaine période de laboratoire

Important: Le questionnaire de ce laboratoire compte pour 2% de la session. Prenez votre temps car vous n'avez un seul essai.

Structure du projet

Reproduire la structure du projet pour avoir la suivante :

lab3

➡️ Télécharger les images

HTML de base

  1. Dans chaque fichier HTML, ajouter le squelette de base :

    <!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Laboratoire 3</title>
  </head>

  <body>
  </body>
</html>

  2. Dans chaque fichier, ajouter la bonne balise pour inscrire votre nom dans la section <head>.

Corps des pages

Le corps <body> des deux pages sera divisé en 4 blocs :

Blocs

Dans ce laboratoire :

  • Le contenu du bloc <header> sera le même sur les deux pages
  • Le contenu du bloc <nav> sera le même sur les deux page
  • Le contenu du bloc <main> sera différent
  • Le contenu du bloc <footer> sera le même sur les deux pages

Dans le corps <body> de la page index.html :

  1. Créer un bloc <header>

  2. Dans <header>:

    • Insérer l'image banner.jpg
    • Ajouter le titre de niveau 1 God of war

  3. Copier-coller le code du bloc <header> dans le corps de la page personnages.html

Résultat :

Lab3

Après le bloc <header>:

  1. Créer un bloc <nav>

  2. Dans <nav> :

    • Créer un lien cliquable qui mène à l'index
    • Créer un lien cliquable qui mène à personnages

  3. Copier-coller le code du bloc <nav> dans le corps de la page personnages.html, après <header>

<main>

Astuce emoji

Pour ajouter des emoji sous Windows, utiliser les touches clavier Windows + . (point). La touche Windows se trouve entre Ctrl et Alt, elle ressemble à un drapeau.

Après le bloc <nav>:

  1. Ajouter un bloc <main> sur les deux pages

  2. Dans le bloc <main de la page index.html, reproduire les éléments suivants :

    Cliquer sur l'image pour l'afficher plus grand

    lab3

    Textes:

    Description du jeu

God of War (2018) est un jeu d'action-aventure qui réinvente la célèbre franchise en plongeant Kratos dans l'univers brutal de la mythologie nordique. Accompagné de son fils Atreus, il entreprend un périple émouvant à travers des terres sauvages peuplées de dieux et de monstres, tout en affrontant son passé tourmenté.

Description fournie par Copilot

Chapitres du jeu

Les arbres marqués
Le chemin de la montagne
Un royaume à part
La lumière d'Alfheim
Au coeur de la montagne
Nouvelle destination
Voir les 11 autres chapitres

  1. Dans le bloc <main de la page personnages.html, insérer les éléments suivant :

    • Titre de niveau 2 : Personnages

    • Bloc générique

      • Titre de niveau 3 : Kratos

      • Description du personnage

        Kratos, personnage principal du jeu, est un guerrier devenu dieu de la guerre, marqué par les cendres de sa famille et animé par une quête de rédemption à travers les mythologies grecque et nordique.

      • Image de Kratos

      Exemple : 

          <div>
        <h3>Kratos</h3>
        <p>Kratos, personnage principal du jeu, est un guerrier devenu dieu de la guerre, marqué par les cendres de sa famille et animé par une quête de rédemption à travers les mythologies grecque et nordique.</p>
        <img src="img/kratos.webp" alt="Kratos">
    </div>

    • Bloc générique

      • Titre de niveau 3 : Atreus

      • Description du personnage

        Atreus, fils de Kratos, est un jeune demi-dieu curieux et sensible, en quête de son identité entre les héritages divin, géant et humain.

      • Image d'Atreus

    • Bloc générique

      • Titre de niveau 3 : Freya

      • Description du personnage

        Freya est une puissante déesse nordique déchue, autrefois reine des Valkyries, guidée par la douleur de la perte et une volonté farouche de se libérer de son passé.

      • Image de Freya

Résultat :

lab3

Après le bloc <main> de la page index.html :

  1. créer un bloc <footer>

  2. Insérer les deux éléments suivants :

  3. Lien externe vers le site officiel du jeu : https://www.playstation.com/fr-ca/god-of-war/

  4. Un retour de ligne

  5. Emoji de flèche vers le haut, cliquable avec un lien de retour vers le haut de la page

  6. Copier-coller le code du bloc <footer> dans le corps de la page personnages.html, après <main>

Résultat :

lab3

Les styles CSS

  1. Dans le dossier css, créer un fichier nommé styles.css.

    Nous allons mettre tous les styles du site dans le même fichier.

  2. Sur les deux pages HTML, dans le <head>, ajouter le lien vers la feuille de styles.

Puis insérer les styles demandés plus bas.

➡️ Notes de cours sur les attributs CSS nécessaires au labo

Page entière

Sur le sélecteur de la balise body

  • couleur de fond noir
  • couleur de texte blanc
  • taille du texte 1.2 rem
  • famille de police Verdana, Geneva,... (choisir dans la liste proposée par VSCode)
  • Alignement du texte centré

Sauvegarder et valider que les styles s'appliquent aux deux pages.

Éléments du header

  1. Sur le sélecteur de l'enfant (descendant) img dans le parent header

    • Largeur à 100%

    Notes de cours sur le sélecteur d'enfant (ou descendant)

  2. Sur le sélecteur de balise h1

    • Taille de texte 5rem
    • Alignement du texte centré

  3. Défi :

    lab3

Liens cliquables

  1. Sur le sélecteur de balise de lien cliquable a

    • couleur de texte rouge
    • supprimer le souligné (attribut text-decoration)

    Exemple de lien sur la page :

    lab3

  2. Sur le sélecteur de l'enfant a dans le parent nav

    • couleur de fond blanc
    • marge intérieure de 1rem
    • coins arrondis à 0.2rem
    • bordure de 0.1rem solide rouge

    Exemple de lien dans le nav :

    lab3

Contenu principal

  1. Sur le sélecteur de balise main

    • alignement du texte justifié
    • bordure de 0.1rem solide blanc
    • largeur de 50%
    • marge extérieure gauche taille auto
    • marge extérieure droite taille auto
    • marge extérieure du haut de 2rem
    • Marge intérieure de 2rem

  2. Sur le sélecteur de l'enfant img dans le parent main

    • largeur de 100%

Défi :

  1. Faire en sorte que les titres de niveau 2 dans le main soient soulignés

    lab3

  2. Faire en sorte que la phrase suivante dans la description du jeu soit en italique

    lab3

  3. Sur la dernière puce de la liste des plateformes supportées : retirer la puce !

    lab3

  1. Sur les blocs génériques qui se trouvent dans le main de la page personnages

    Appliquer les attributs de style suivants :

    • largeur de 29%
    • hauteur de 30rem
    • bordure de 0.1rem pointillée rouge
    • Marges intérieures de 1rem

    Vous remarquerez que les blocs ont la bonne taille, mais ne sont pas côte à côte...

    Ajouter : display: inline-block; --> Les blocs s'affichent côte à côte...mais pas alignés verticalement...

    Ajouter : vertical-align: top; --> Le haut de chaque bloc s'aligne avec le haut des autres

    Lab3

  1. Appliquer une marge extérieure au haut du footer de 2rem

  2. Sur le lien de retour vers le haut, taille de texte à 3rem

lab3

Valider

Utiliser le validateur pour :

  1. Valider le HTML : https://validator.w3.org/#validate_by_input

  2. Valider le CSS : https://jigsaw.w3.org/css-validator/#validate_by_input

Corriger les erreurs s'il y en a !

Comparez vos pages au résultat final attendu :

cliquer sur les images pour les voir en plus grand

Lab3

lab3

Questionnaire

Le questionnaire compte pour 2% de la session.

Remplir le questionnaire de la semaine 3 : https://forms.cloud.microsoft/r/GysDDGhMnV

Date limite: 19 septembre 23h00