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¶

Télécharger la base du projet
Extraire le projet du dossier ZIP et le conserver dans votre espace de travail.

Le projet a déjà la bonne structure de départ.

Voici quelques ajouts à effectuer :

Dans le dossier css, ajouter une feuille de style par page HTML

Vous aurez donc un total de 3 feuilles de style :
- base.css
- index.css
- boutique.css
Dans le dossier css, ajouter un dossier nommé "polices"

Ce dossier servira à télécharger et conserver des polices de texte que nous ajouterons dans le projet plus loin.

Compléter le projet¶

Bien suivre les étapes données
Valider fréquemment les résultats en comparant avec les images fournies
Valider le code avec le validateur

La page index.html¶

Compléter la page d'accueil du site en suivant les étapes :

Dans <head> ajouter les informations suivantes :
- Le nom de l'auteur indique votre nom complet
  
  Indiquer les 2 noms complets si vous travaillez en équipe
- Lien vers l'icône nommé leaf.png
- Lien vers la feuille de styles base.css
- Lien vers la feuille de styles index.css

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

Nous allons créer la page par bloc.

Lorsque tout sera fait, le bloc <header> aura l'apparence suivante :

TP1

Pour y arriver, le HTML est construit comme ceci :

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

Éléments HTML du `<header>` :¶

image : header_img.png
division qui contient :
- titre 1 : icône Fontawesome + texte Le pouce vert
  
  Référez-vous à la page Fontawesome pour les étapes d'utilisation des icônes libres
- paragraphe : Pour tous vos besoins en plantes d'intérieur et extérieures
division qui contient :
- paragraphe : icône Fontawesome + texte Nos succursales
- paragraphe : EN | FR
  - balise <span> autours du FR pour pouvoir le styler par CSS

Styles CSS du `<header>`¶

Le header sera pareil sur les deux pages web.

Donc les styles doivent être inscrits dans le fichier base.css.

Voici les styles par sélecteur à ajouter dans base.css:

Sur le sélecteur header
- Couleur de fond : rgb(100,100,100)
Sur l'image qui se trouve dans le header : header img
- largeur de 10%
- alignement vertical à middle
- marge gauche de 6rem
- toutes autres marges de 2rem
Sur le titre h1
- Retirer les marges avec une valeur 0
- Appliquer une police Google Fonts
  
  Voir les notes sur Google Fonts pour les étapes de téléchargement et l'application des polices Google
- Donner une taille de police assez grande (ex.: 3rem)
- Appliquer un ombrage de texte
Sur les divisions dans le header : header div
- Alignement vertical à middle
- Affichage display à inline-bloc
Sur la division qui contient le titre et un paragraphe
- Centrer le texte
- Donner une largeur de 60%
Sur le paragraphe de slogan
- style de police italique
- taille de police 1.2rem
Sur la division qui contient les deux paragraphes
- alignement de texte à droite
- largeur de 20%
- padding droit à 5rem
Sur le span qui contient la langue FR
- poids de police en gras bold
- padding tout le tour à 0.5rem
- couleur du texte à greenyellow

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.

NAV¶

Lorsque tout sera fait, la barre de navigation nav se présentera comme suit :

TP1

Éléments HTML du `<nav>`¶

Le bloc nav contient 3 liens cliquables :

Lien interne vers la page index.html
Lien d'ancrage vers la section Nos services de la page index (le href devra être spécifié plus tard)
Lien interne vers la page boutique.html

Styles CSS du `<nav>`¶

Le nav sera pareil sur les deux pages web.

Donc les styles doivent être inscrits dans le fichier base.css.

Voici les styles par sélecteur à ajouter dans base.css:

Sur le bloc nav
- Couleur de fond à noir
- alignement de texte centré
- Menu collant lorsqu'il atteint le haut de la page
```
position: sticky;
top: 0;
```
- z-index à 10 pour s'assurer qu'il soit toujours au-dessus du reste de la page
Sur tous les liens cliquables
- couleur de texte blanc
- pas de souligné (text-decoration)
- padding à 1.25rem
- transition de 0.5s sur la couleur de fond
- affichage en inline-block (pour que le padding s'applique)
Lorsque la souris passe au-dessus d'un lien du nav : nav a:hover
- couleur du texte à greenyellow
- couleur de fond à rgb(100,100,100)

MAIN¶

Le main de la page index est déjà commencé.

Les trois blocs principaux y sont, mais n'ont pas de contenu ni de styles appliqués.

En effet, le main aura 3 blocs :

Un bloc vide, avec effet parallax en CSS
Une section Nos services
Une section Notre boutique

TP1

Éléments HTML du `<main>`¶

Dans la section Nos services

Titre de niveau 2 : Nos services
Division contenant :
- icône Fontawesome
- paragraphe : Conseils jardinage et aménagement extérieur
Division contenant :
- icône Fontawesome
- paragraphe : Détection des pestes et maladies
Division contenant :
- icône Fontawesome
- paragraphe : Vente de plantes et produits intérieurs / extérieurs

Dans la section Notre boutique

Titre de niveau 2 : Notre boutique
Image magasin.jpg
Division contenant :
- paragraphe : Les plus belles plantes disponibles sur le marché, les pots les plus tendances, les meilleurs conseils horticoles et le service le plus impeccable qui soit. C'est notre promesse.
- paragraphe : icône Fontawesome + Texte 205 Rue Monseigneur-Bourget, Lévis, QC G6V 6Z9

Styles CSS du `<main>`¶

Les styles du main sont divisés dans deux fichiers css.

Les styles généraux à toutes les pages, dans base.css

Sur le sélecteur main
- couleur de fond à rgba(255,255,255,0.6)
- couleur de texte noir
- marges à 0
Sur les sections dans le main
- largeur de 75%
- section centrée (marges gauche et droite automatiques)
- padding du haut et du bas à 5rem;
- alignement du texte centré

Les styles spécifiques dans index.css

Pour les styles spécifiques aux 3 blocs du main.

Sur l'identifiant de la division pour l'image parallax
- image de fond : lot_cactus.jpg
- taille du fond qui couvre
- attachment du fond à fixed
- hauteur de la division de 75vh
Sur les divisions de la section des services
- couleur de fond à blanc
- affichage côte à côte avec largeur de 30% (voir techniques CSS dans notesde cours)
- hauteur de 12rem
- alignement vertical au milieu middle
- padding haut et bas de 2rem
- marges à 0
- bordures tout le tour de 0.2rem, solide, gris (grey)
Sur les span de la section services (donc sur les icônes Fontawesome)
- taille de police à 2rem
Sur le titre h2 de la section boutique
- bordure du bas de 0.1rem, solide, gris (grey)
Sur l'image de la section boutique
- largeur de 30%
Sur la division de la section boutique
- la rendre en affichage côte à côte avec une largeur de 65%
- alignement vertical au haut (top)
- marge de gauche à 3rem
- aligne du texte justifié (justify)

Section Services

TP1

Section Boutique

TP1

Le footer contient 4 paragraphes placés côte à côte.

tp1

Chaque paragraphe étant déjà un bloc, nous n'avons pas besoin de div.

Éléments HTML du `<footer>`¶

Un premier paragraphe contient 3 icônes Fontawesome:
- Facebook
- LinkedIn
- Instragram
Un deuxième paragraphe avec le texte : Merci de nous faire confiance!
Un troisième paragraphe avec le texte : Copyright 2024 - Le pouce vert
Un quatrième paragraphe contentant :
- Un icône Fontawesome de flèche vers le haut
- Un lien cliquable pour retourner au haut de la page, appliqué sur l'icône

Éléments CSS du `<footer>`¶

Le footer sera pareil sur les deux pages web.

Donc les styles doivent être inscrits dans le fichier base.css.

Voici les styles par sélecteur à ajouter dans base.css:

Sur le sélecteur footer
- couleur de fond rgb(100,100,100)
- padding de 3rem
- alignement du texte centré
Sur les paragraphes du footer
- marges gauche et droites de 3rem
- affichage côte à côte avec une largeur maximum de 20% (max-width)
- alignement vertical au milieu (middle)
Sur les icônes du footer
- taille à 2rem
- marge droite de 1rem

La page boutique.html¶

Cette page n'existe pas encore.

Dans votre projet, au même endroit que index.html, créer le fichier boutique.html
Copier-coller le code de index.html vers boutique.html
Supprimer tout le contenu qui se trouve dans le bloc <main>
Modifier le lien vers index.css pour boutique.css

Vous avez donc une page ayant déjà l'en-tête, le menu de navigation et le pied de page complet.

Il reste à compléter le <main>.

TP1

MAIN¶

Le main de la page boutique contient une section de 4 division.

Lorsque tout sera fait, le bloc <main> aura l'apparence suivante :

Clique sur l'image pour la voir plus grande

Éléments HTML du `<main>`¶

Dans le main de la page boutique :

Créer une section
Dans la section créer un titre de niveau 2 : "Plantes"
Sous le titre, ajouter 4 divisions div
Chaque division contient :
- Image
- titre de niveau 3
- 3 paragraphes

Compléter les divisions à l'aide de l'image fournie plus haut.

Éléments CSS du `<main>`¶

Ce qui manque à cette page sont des styles uniques à cette page.

Donc, on doit écrire le CSS suivant dans boutique.css :

Ajouter une police Google pour les titres 3 du main
Sur les divisions de la section du main
- Largeur de 35%
- affichage côte à côte
- marges de 2rem
- couleur de fond blanc
- bordure grey solide de 0.1rem
Sur les images dans une div du main
- largeur de 100%
Lorsque la souris passe au-dessus d'une division du main
- Transformation d'échelle de 1.1
Notes de cours sur les transformations

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	3 pts
Nav	2 pts
Main page index	5 pts
Main page Boutique	4 pts
Footer	2 pts
TOTAL:	20 pts

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

Exemple :

20/20 (100%) = 5/5 
15/20 (75%) = 3.75/5
12/20 (60%) = 3/5
10/20 (50%) = 2.5/5

Remise¶

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

Voici comment faire une remise :

Compresser votre dossier principal de projet avec tout son contenu :

Validez que votre fichier ZIP contient tout le contenu de votre dossier avec :
- Pages HTML
- dossier d'images
- dossier de styles
Faire la remise sur LÉA :
1. Se connecter sur Omnivox
2. Aller dans LÉA
3. Trouver le cours d'Interfaces Web
4. Cliquer sur Travaux et remises
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.

Travail pratique #1¶

Le projet¶