Aller au contenu

Travail pratique #1

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération : 5% de la session

Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La remise se fait sur LÉA
- La date limite de remise est disponible sur LÉA

⚠️ Tout le travail se fait avec le positionnement de blocs. Aucun tableau HTML accepté.

Lire les notes de cours

Les notes de cours sont très importantes pour ce TP et vous y trouverez des exemples pour toutes les techniques demandées.

Le projet

Créer la structure de projet suivante :

TP1

Sujet

Pour ce travail, vous pouvez :

  • vous inspirer du site donné en exemple

OU

  • choisir votre propre sujet de site

⚠️ ATTENTION: Il faut respecter la présentation demandée, car c'est ce qui est évalué.

Squelette HTML

Voici le squelette HTML pour démarrer :

<!doctype html>

<html lang="fr">

    <head>
        <title>TP1 - semaine 4</title>
        <meta charset="utf-8">
    </head>

    <body>
        <header>
        </header>

        <nav>
        </nav>

        <main>
        </main>

        <footer>
        </footer>
    </body>

</html>

Présentation exigée

⚠️ La page index.html doit avoir tous les blocs demandés dans les positions données

⚠️ Tous les styles css demandés doivent être appliqués, mais vous pouvez en ajouter à votre convenance

⚠️ Les polices Google doivent être téléchargées et placées dans le sous-dossier polices

⚠️ Les icônes fontawesome doivent être téléchargés et placés dans votre dossier images

Section <head>

Dans la section <head> de la page HTML ajouter les informations suivantes :

  • Le nom de l'auteur avec votre nom complet

    Indiquer les 2 noms complets si vous travaillez en équipe

  • Lien vers un icône de page (image à placer dans votre projet)

    Exemple :

    TP1

  • Lien vers la feuille de styles CSS

Le contenu

Compléter la page du site en respectant les exigences données.

La page est déjà divisée en 4 grands blocs : header, nav, main, footer.

Nous allons créer la page par bloc.

Page entière

  • Appliquer le défilement doux sur la page

Sur BODY :

  • La page entière doit avoir une image en fond.
  • L'image ne défile pas
  • L'image ne se répète pas
  • L'image couvre tout l'espace

Tout le contenu de la page :

  • la totalité du contenu de la page prend 75% de large

  • le bloc est centré dans la page

    Exemple :

    TP1

Le bloc <header> est divisé en 3 blocs enfants :

TP1

Dans le HTML, assurez-vous d'avoir :

  • 3 blocs de contenu
  • Du contenu dans chaque bloc
  • Un titre h1 de compagnie
  • Un slogan
  • Un élément texte stylé différemment (voir FR dans l'exemple)
  • Une image

Le contenu des blocs est libre.

Exemple :

cliquer sur l'image pour l'ouvrir dans un autre onglet

TP1

Styles CSS du <header> exigés

Voici les styles obligatoires à avoir dans le header :

  • Appliquer une couleur de fond
  • les trois blocs positionnés côte à côte
  • Le titre apparaît dans le bloc central
  • Le titre utilise une police Google téléchargée dans votre projet
  • Aux moins 2 styles appliqués sur le titre : taille, couleur, ombrage, etc.
  • Appliquer les marges extérieures et intérieures pour une présentation soignée
  • Alignement vertical centré

⚠️ Sauvegarder et tester souvent!!

⚠️ Assurez-vous d'obtenir le bon résultat dans le header avant de passer au prochain bloc. Ceci évite de devoir tout corriger en même temps à la fin.

La barre de navigation présente au moins 3 liens :

  • Retour vers index.html
  • Lien d'ancrage vers une section plus bas dans la page
  • Lien externe vers un site de votre choix

La barre de navigation nav se présentera comme suit :

TP1

Styles CSS du <nav> exigés

Voici les styles exigés pour le nav :

  • Couleur de fond opaque
  • alignement de texte centré
  • couleur de liens par défaut autre que bleu
  • liens sans souligné
  • rendre les liens plus grands avec des marges intérieures
  • changement de couleur de texte lorsque la souris passe sur un lien
  • menu collant lorsqu'il atteint le haut de la page
  • z-index à 10 pour s'assurer qu'il soit toujours au-dessus du reste de la page
  • transition de couleur de fond sur les liens lorsque la souris passe au-dessus

MAIN

En effet, le main aura 3 blocs enfants :

  • Un bloc contenant 2 sections d'information
  • Un bloc vide avec image de fond pour un effet parallax
  • Un bloc contenant 1 section d'information (c'est ici que le lien d'ancrage du menu doit mener)

Exemple :

TP1

Premier bloc*

  • Contient 2 sections d'information
  • Chaque section a un titre de niveau 2 et du contenu (paragraphe, liste, liens, etc.)
  • Au moins une image

Bloc parallax

Ce bloc est un bloc vide de contenu HTML, c'est le CSS qui produit l'effet parallax.

Dernier bloc

  • Bloc contenant une section d'information
  • Au moins 1 titre
  • Au moins deux blocs enfants positionnés côte à côte

Exemple:

TP1

Styles CSS du <main> exigés
  • couleur de fond semi transparente pour voir l'image du fond du body
  • largeur des blocs enfants à 75%
  • blocs enfants centrés dans le main
  • hauteur minimum des blocs enfants à 75vh
  • différents alignements de texte
  • titres avec bordure du bas
  • effet parallax sur le bloc central avec image de autre que celle du body
  • au moins 2 blocs côte à côte dans le dernier bloc

Le footer contient au moins 3 blocs placés côte à côte.

Exemple :

tp1

Le footer doit contenir au moins :

  • Des icônes Fontawesome (au moins 2) téléchargées
  • un paragraphe
  • un lien de retour vers le haut de page
  • couleur de fond
  • marges intrieures padding
  • alignement du texte centré
  • affichage côte à côte des blocs
  • alignement vertical centré
  • taille des icônes fontawesome ajustée

Valider et corriger

Valider le code à l'aide du validateur.

Validateur HTML: https://validator.w3.org/#validate_by_input

Validateur CSS: https://jigsaw.w3.org/css-validator/#validate_by_input

S'il reste des erreurs, on perd automatiquement des points!

Assurez-vous que votre code respecte les règles de programmation !

Règles de programmation

Si les règles ne sont pas respectées, on perd des points!

Barème de correction

Élément de correction points
Validateur sans erreur 1pt
Structure du projet 1pt
Règles de programmation 2pts
Header 2 pts
Nav 2 pts
Main 5 pts
Footer 2 pts
TOTAL: 15 pts

Votre note sur 15pts sera ramenée sur 5% de la session

Exemple : 

15/15 (100%) = 5/5 
11.25/15 (75%) = 3.75/5
7.5/15 (50%) = 2.5/5

Remise

La remise se fait sur LÉA à l'aide d'un fichier ZIP.

Voici comment faire une remise :

  1. Compresser votre dossier principal de projet avec tout son contenu :

    Remise

    ❗️ Validez que votre fichier ZIP contient tout le contenu de votre dossier avec :

    • Pages HTML
    • dossier d'images
    • dossier de styles

  2. Faire la remise sur LÉA :

    1. Se connecter sur Omnivox

    2. Aller dans LÉA

      Remise

    3. Trouver le cours d'Interfaces Web

    4. Cliquer sur Travaux et remises

      Remise

    5. Cliquer sur le travail à remettre - TP1

    6. Effectuer la remise du travail

      • Une seule remise par équipe

      • Un des coéquipiers verra "travail non remis", mais vous aurez quand même une note si votre nom apparaît dans le projet remis.

✅ Lorsque la page est rafraîchie, un crochet vert apparaîtra à côté du travail pour indiquer que la remise a bien fonctionnée.

ATTENTION

Toujours garder une copie de votre travail au cas où la remise n'aurait pas bien fonctionné!

Surveillez vos MIO, car dans le cas où la remise n'aurait pas bien fonctionné, je vous écrirai.