Description

Explications

1. Ajoutez une page à votre portfolio en affichant la directive 2142
2. Affiche les assistants et
3. Complétez le champ titre : La notion de classe
4. Complétez le champ matière : Informatique
5. Complétez le champ no de la directive : 2142

   Partie 1 : un peu de pratique ... (partie facultative)

6. Sélectionnez le modèle Documentbase2 de la boîte à liste déroulante INSÉRER UN MODÈLE
   
   
7. Observez que dans cette page vous avez ;
   - vos balises d'en-tête (HEAD) contenant un titre de page (TITLE)
   - votre corps de page (BODY) contenant :
   - un titre de niveau 1 dans la page (H1)
   - un titre de niveau 1 avec une classe dans la page <H1 class="couleur"></h1>
8. Enregistrez et visualisez votre page
9. Insérez dans la section HEAD de votre page la feuille de style "Css2" à partir de la boîte à liste déroulante INSÉRER UN MODÈLE de la barre d'outil HTML
   
   
10. Prévisualisez votre page à nouveau et notez (observez) les modifications apportées à l'apparence de votre page.
11. Observez bien votre code afin de comprendre l'utilisation des feuilles de styles.
12. Vous avez probablement remarqué que l'affichage de vos éléments de page a été modifié conformément à votre feuille de style:
    Ainsi : Les attributs suivants de la feuille de style ont été utilisés :
    
      H1{background-color : red; color : white;} afin de paramétrer la couleur arrière plan et texte de votre titre de niveau 1
    
     .couleur{background-color : blue; color : yellow;} afin de paramétrer la couleur arrière plan et texte qui possède la classe couleur
    
13. Effacez tout le contenu de votre page

    Partie 2 : au travail maintenant

14. Cliquez maintenant le bouton Nouveau afin de créer une page Html de base
15. Dans la section BODY, ajoutez un TITRE DE NIVEAU 1 affichant le texte "Les animaux du Québec" utilisant la classe "couleur" <h1 class="couleur">Titre</h1> Vous définierez plus tard cette classe et ses propriétés en en-tête dans votre feuille de style ainsi que les propriétés utilisées pour cette classe.
16. À la suite de ce titre, écrivez un court texte de deux paragraphes (en utilisant la balise P, balise de création d'un paragraphe) sur l'animal choisi ( PAS DE COPIER-COLLER, tu dois composer toi-même ton texte, animal sauvage seulement, les animaux domestiques ne doivent pas être choisis) .
    Le contenu du texte peut porter sur :
    - l'habitat
    - le mode de vie
    - la reproduction
    - l'alimentation
    
17. Attribuez à l'un de ces paragraphes la classe p1. Exemple: <p class="p1">Texte</p> Vous définierez plus tard cette classe et ses propriétés en en-tête dans votre feuille de style ainsi que les propriétés utilisées pour cette classe.
    



18. Afin de réaliser cette activité, consultez la liste de toutes les propriétés CSS
19. Attribuez au deuxième paragraphe la classe p2. Exemple: <p class="p2">Texte</p> Vous définierez plus tard cette classe et ses propriétés en en-tête dans votre feuille de style ainsi que les propriétés utilisées pour cette classe.
20. Écrivez maintenant dans la section HEAD, UNE SEULE FEUILLE DE STYLE qui définiera les classes utilisées dans la page :
    
     a) la classe p1 : contenant un mimimum de 3 propriétés différentes : <style>.p1{color:red;}</style>  b) la classe p2 contenant un mimimum de 3 propriétés différentes
    
     c) la classe couleur contenant un mimimum de 3 propriétés différentes
    Exemple : <style> .p1{color:red;} .p2{color:green;} .couleur{color:orange;} </style>
21. Ajoutez ensuite au bas de ta page (avant la balise /BODY ) un lien vers le site internet utilisé pour recueillir vos informations.
    
22. Assignez la classe couleur à ce lien également. <a class=couleur href=....>Lien</a>
    Vous verrez que ce lien s"affiche avec les mêmes propriétés que votre titre de niveau 1
23. Visualisez votre page et apportez des modifications au besoin.