Laboratoire semaine 3¶

Consignes

Ce laboratoire vous permet de vous familiariser avec:

L'introduction au CSS
Quelques sélecteurs CSS de base

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.

Préparer le projet¶

Créer la structure du projet avec les bons dosiers, les deux fichiers HTML et le fichier CSS

Télécharger les images
Extraire les images du dossier ZIP et les coller dans le dossier images de votre projet.

Squelette HTML¶

Utiliser le squelette HTML pour commencer votre page index.html

<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="utf-8">
    <title>Vends ta maison</title>
    <meta name="author" content="NOM DE L'AUTEUR">
</head>

<body>

</body>

</html>

Compléter la section <head> avec les informations suivantes :
- Auteur : Indiquer votre nom complet / Les noms complets des coéquipiers séparés par une virgule si vous travaillez en équipe
- Lien vers l'icône icon.png qui devrait être dans votre dossier d'images

Contenu : index.html¶

index.html est la page d'accueil de notre site de compagnie immobilière.

Textes de la page d'index

Vends ta maison

On est là avec vous.
Accueil 
Maisons à vendre

Notre offre unique permet de trouver votre acheteur tout en profitant des services d'un courtier du début à la fin de la transaction. Vous bénéficierez d'un taux de commission avantageux à 2 %.
Pourquoi vendre avec un courtier immobilier ?

Depuis plus de 35 ans, notre modèle d'affaires repose sur les intérêts de nos clients; vous êtes au cœur de nos préoccupations! Chez Vends ta maison, on s'y connaît en vente de maisons de prestige et vous profitez du savoir-faire et de l'expérience d'une bannière québécoise dont l'efficacité est reconnue depuis de nombreuses décennies.
Nos services

Nous sommes présents à chaque étape de la vente de votre propriété :

Estimation gratuite de la valeur de votre maison
Prise de photos professionnelles
Stratégies de mise en marché
Affichage de votre propriété sur les plateformes les plus populaires pour un maximum de visibilité
Coordination des appels, des visites et des suivis
Service d'accompagnement pour l'achat de votre prochaine propriété

Vous cherchez une propriété ?
Consulter nos affichages

Tous droits réservés

À l'aide des textes fournis, créer le contenu de la page qui apparaît sur l'image :

Rappel HTML

Rappel:

Images : <img src="" alt="">
Titres : <h1> à <h6>
Paragraphes : <p>
Liens : <a href="">
Listes numérotées et items de liste : <ol> et <li>

Cliquer sur l'image pour la voir en plus grand

Validation¶

Valider le code dans le validateur et corriger les erreurs s'il y en a : https://validator.dinf.ca/#textarea
Assurez-vous de suivre les règles d'écriture du code HTML : Règles d'écriture du code

Corriger les erreurs et respecter les règles de présentation du code qui s'appliquent.

Contenu : maisons.html¶

Le début de la page des maisons est le même que la page d'index puisque nous restons sur le même site web.

Textes de la page maisons

Vends ta maison

On est là avec vous.
Accueil 
Maisons à vendre

Trouver une propriété

Nos propriétés de prestige ont tout pour plaire. Votre futur foyer de rêve se cache peut-être parmis celles-ci.

Imposant cottage de brique

5 chambres à coucher
3 salles de bain complètes
Cour aménagée avec goût
Beaucoup de cachet

Incontournable ranch

Tranquilité assurée, loin des regards
Écurie et terres inclues
4 chambres à coucher
Intérieur entièrement rénové au goût du jour

Luxueuse contemporaine

Le luxe en ville !
Piscine et jaccuzzi 2 en 1
3 chambres à coucher
Grandes fenêtres pour une luminosité maximale

Vie de manoir

Somptueux manoir ancestral
6 chambres à coucher
Accès par une route privée
Charme d'antan dans le luxe d'aujourd'hui

Vie de famille bien pensée

Bigénération avec maison attenante
Portes d'entrée indépendantes
Grand patio donnant accès à la piscine
Immense maison principale comprenant 6 chambres

Tous droits réservés

Retour au haut de la page

Cliquer sur l'image pour la voir en plus grand

Validation¶

Valider le code dans le validateur et corriger les erreurs s'il y en a : https://validator.dinf.ca/#textarea
Assurez-vous de suivre les règles d'écriture du code HTML : Règles d'écriture du code

Corriger les erreurs et respecter les règles de présentation du code qui s'appliquent.

Feuilles de styles (CSS)¶

Nous sommes maintenant rendus à l'ajout des styles et de la mise en page !

Dans votre dossier de projet, créer le dossier css et les trois feuilles de style suivantes :
- Commun : pour toutes les pages du site
- Index : pour la page index uniquement
- Maisons : pour la page Maisons uniquement
Dans le HTML des deux pages :

Dans le <head> des deux pages HTML ajouter les balises <link> suivantes :
- Sur la page Index: lien vers commun.css et lien vers index.css
- Sur la page Maisons: lien vers commun.css et lien vers maisons.css

Commun.css¶

Dans Commun, on met les styles qui s'appliquent à toutes les pages.

Écrire tous les éléments suivants dans commun.css :

Dans les accolades du sélecteur de balise body, appliquer les styles suivants :
- changer la couleur de fond : background-color:rgb(145, 191, 212);
- changer la couleur du texte : color: rgb(66, 66, 184);
- changer les polices : font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
- centrer le contenu sur la page : text-align: center;
- créer des espaces de remplissage à gauche et à droite : padding-left: 15rem; et padding-right: 15rem;
Code CSS complet pour body
```
body {
    background-color:rgb(145, 191, 212);
    color: rgb(66, 66, 184);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
    text-align: center;
    padding-left: 15rem;
    padding-right: 15rem;
}
```
Sauvegarder le CSS et tester.

Assurez-vous que les styles sont appliqués aux deux pages HTML.

Résultat sur la page Index :

Tester souvent

Testez souvent pour vous assurer que les modifications s'appliquent bien.

Dans commun.css, ajouter les styles suivants :

Sur le sélecteur de balise img :

largeur d'image de 25% de l'espace : width:25%;

Code CSS avec l'ajout pour image

body {
background-color:rgb(145, 191, 212);
color: rgb(66, 66, 184);
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
text-align: center;
padding-left: 15rem;
padding-right: 15rem;
}

img {
    width:25%;
}

Sur le sélecteur de balise h1 :
- taille de police à 3 fois sa taille : font-size: 3rem;
- couleur du texte en blanc : color:white;
Sur le sélecteur de balise h2 :
- couleur du texte blanc : color:white;
- marge haut et bas équivalents à 2 retours de ligne (2 "enter") : margin-top: 2rem; et margin-bottom: 2rem;
- ajouter un souligné : text-decoration: underline;
RAPPEL: n'oubliez pas de sauvegarder et valider fréquemment si les styles s'appliquent bien!
Sur le sélecteur de balise hr :
- couleur du texte blanc
- marge du haut et du bas à 2 retours de ligne (2rem) : margin-top: 2rem; et margin-bottom: 2rem;
Sur le sélecteur de balise de lien a :
- retirer le souligné : text-decoration: none;
- appliquer la couleur du texte rgb(66, 66, 184)
- couleur de fond en blanc : background-color:white;
- espaces de remplissage tout le tour du lien : padding: 0.8rem;
- appliquer des coins arrondis : border-radius: 1rem;
- Appliquer des bordures :
  - largeur de bordure : border-width: 0.1rem;
  - style de bordure : border-style: solid;
  - couleur de bordure : border-color: rgb(66, 66, 184);
- appliquer des marges :
  - marges gauche et droite : margin-left:5rem; et margin-right:5rem;
  - marges haut et bas de 2rem
  Les marges haut et bas ne s'appliquent pas... les liens sont des balises qui ne sont pas traités comme des blocs, contrairement aux paragraphes et aux titre...
  
  On doit donc ajouter un autre attribut de style :
  - définir le lien comme un bloc : display: inline-block;

Pour le moment, vos pages ressemblent maintenant à ceci :

Lab3

index.css¶

Dans index.css. nous allons ajouter des styles spécifiques à la page index.

Sur la liste des balises p et ol
- Aligner le texte à gauche : text-align:left;
RAPPEL: pour créer une liste de sélecteurs, on utilise la virgule, exemple : p, ol
Sur le sélecteur de la balise ol uniquement
- appliquer une marge gauche de 10rem

Apparencre de la page d'index après ces ajouts :

Lab3

Correctifs¶

Or, on a indiqué dans le CSS que tous les paragraphes p ont un alignement à gauche.

Pour régler le cas de ces 2 paragraphes :

Dans le HTML, donner un identifiant id au paragraphe du slogan (sur les deux pages HTML).

Exemple : <p id="slogan">On est là avec vous.</p>
Dans le CSS commun.css (parce que le slogan apparaît sur les deux pages) :
- Ajouter le sélecteur d'identifiant avec le nom que vous avez donné à votre balise
- Appliquer l'alignement centré : text-align:center;
- Rendre le texte en italic : font-style: italic;
- Augmenter la taille de police à 1.5 fois sa taille : font-size: 1.5rem;
RAPPEL: Pour appeler un identifiant, on utilise le caractère #

Résultat:

Lab3

maisons.css¶

Dans maisons.css. nous allons ajouter des styles spécifiques à la page des maisons.

Sur le sélecteur de balise h3
- couleur de texte blanc
- marges haut et bas à 2rem
Sur le sélecteur de balise ul
- aligner le texte à gauche
- appliquer une marge gauche de 5rem
- faire en sorte que les listes s'affichent à côté des images
  - largeur de 30% : width: 30%;
  - permettre du contenu voisin à la liste : display: inline-block;
- aligner les listes avec le haut des images : vertical-align:top;
Pour le bouton de retour vers le haut de la page :

On veut modifier la taille de l'image.

Attention : ce n'est pas la seule image de la page!

Donc:
1. Donner un identifiant dans le HTML de l'image de flèche vers le haut
2. Dans maisons.css, sur le sélecteur de l'identifiant :
  - largeur de 1.5rem
  - alignement de l'image au milieu du texte : vertical-align: middle;

Validation¶

Valider le CSS dans le validateur et corriger les erreurs : https://validator.dinf.ca/#textarea
Assurez-vous de suivre les règles d'écriture du CSS : Règles d'écriture du code

Pages finales¶

Pour valider vos pages finales :

Questionnaire¶

Ce questionnaire compte pour 2% de la session.

Vous avez jusqu'au 20 septembre 21:00 pour le compléter.

Vous pouvez vous entraider, mais chaque étudiant doit le compléter à l'aide de son compte pour avoir une note.

Compléter le questionnaire de la semaine 3

Rappel

Pour se connecter :

Utilisateur : #DA@cegeplevis.ca

Mot de passe : votre mot de passe Omnivox

Terminé!¶

Bravo! Vous avez terminé le laboratoire !