Description

1. Sélectionnez le menu "Portfolios" du site "La Différence"
2. Inscrivez le mot de passe général, votre nom d'utilisateur et votre mot de passe
3. Ajoutez une page à votre portfolio (bouton 6) en inscrivant le numéro de la directive 3757
4. Faites un clic droit sur le logo et sélectionnez le menu "Enregistrer l'image sous..." et enregistrez cette image dans votre ordinateur.
5. Vous allez maintenant placer cette image dans votre espace de téléchargement.

   - Utilisez le cadre du bas  
   - Cliquez le bouton "Parcourir" ou "Choisissez un fichier"
   - Sélectionnez l'image logoldas.png de votre ordinateur et cliquez le bouton "Ouvrir"
   - Cliquez le bouton "Télécharger"
    
   

   
   Votre image est maintenant dans votre espace de téléchargement.
6. Vous allez maintenant vérifier si votre image est bien dans votre espace de téléchargement :

   - Utilisez le cadre du bas
   - Cliquez le lien rose  Recharger la page situé au haut du cadre
   - Votre image apparaîtra au bas de ce cadre 
   

7. Inscrivez dans le champ "Titre" (section jaune) de votre page le texte suivant : "Initiation à l'utilisation de votre portfolio"
8. Inscrivez 3757 dans le champ No de la directive
9. Sélectionnez dans la boîte à liste déroulante "matière", la matière Informatique.
10. Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
11. Cliquez le bouton de votre barre de boutons.
12. Sélectionnez dans la boîte à liste déroulante "insérer un modèle" (boîte rose dans la zone de boutons HTML, le modèle "INFO_activité_1" :
    
    
13. Cliquez le bouton rouge "Ajouter" afin d'enregistrer votre travail en cours
14. Cliquez le bouton afin de poursuivre votre travail
15. Assurez-vous que votre barre de boutons HTML est affichée en cliquant le bouton .
16. Sélectionnez les mots "Titre de niveau 1" et cliquez le bouton "TITRE DE NIVEAU 1-6" de votre assistant HTML et inscrivez 1 dans la boîte de dialogue qui s'affiche et cliquez le bouton OK. Remarquez la balise de titre "h1" qui s'ajoute à votre texte
17. Sélectionnez les mots "Titre de niveau 2" et cliquez le bouton "TITRE DE NIVEAU 1-6" de votre assistant HTML et inscrivez 2 dans la boîte de dialogue qui s'affiche
18. Sélectionnez les mots "Titre de niveau 3" et cliquez le bouton "TITRE DE NIVEAU 1-6" de votre assistant HTML et inscrivez 3 dans la boîte de dialogue qui s'affiche
19. Sélectionnez les mots "Titre de niveau 4" et cliquez le bouton "TITRE DE NIVEAU 1-6" de votre assistant HTML et inscrivez 4 dans la boîte de dialogue qui s'affiche
20. Sélectionnez les mots "Titre de niveau 5" et cliquez le bouton "TITRE DE NIVEAU 1-6" de votre assistant HTML et inscrivez 5 dans la boîte de dialogue qui s'affiche
21. Sélectionnez le mot "Bleu"
22. Sélectionnez dans la boîte à liste déroulante "Sélection d'une couleur" la couleur BLUE
23. Sélectionnez ensuite le bouton couleur du texte
24. Remarquez que la balise SPAN, le paramètre STYLE contenant la propriété COLOR et la valeur BLUE ont été ajoutés au texte afin que ce texte s'affiche de couleur bleue
25. Placez le curseur (cliquez) à la ligne suivante et cliquez le bouton "Saut de ligne"
26. Remarquez que la balise BR a été ajoutée à la ligne
27. Répétez les points précédents pour le mot Rouge qui devra s'affichez en rouge
28. Sélectionnez le mot Gras et cliquez le bouton "Gras"
29. Remarquez que la balise b a été ajoutée au texte, cette balise est de moins en moins utilisée, la nouvelle version du langage html utilise plutôt les feuilles de style (css) que nous verrons au module 3.
30. Insérez à la ligne suivante un saut de ligne (Bouton "Saut de ligne")
31. Sélectionnez le mot Italique et cliquez le bouton "Italique"
32. Remarquez que la balise i a été ajoutée au texte, cette balise est de moins en moins utilisée, la nouvelle version du langage html utilise plutôt les feuilles de style (css) que nous verrons au module 3.
33. Insérez à la ligne suivante un saut de ligne (Bouton "Saut de ligne")
34. Sélectionnez les mots Taille du texte et cliquez le bouton "Taille du texte" et inscrivez "50" dans la boîte de dialogue qui apparaît
35. Remarquez que la balise SPAN, le paramètre STYLE contenant la propriété FONT-SIZE ont été ajoutés au texte afin que ce texte s'affiche dans la taille indiquée.
36. Insérez à la ligne suivante un saut de ligne (Bouton "Saut de ligne")
37. Placez le curseur (cliquez) au dessus du texte "Élément 1 de liste numérotée" et cliquez le bouton "Liste numérotée" - inscrivez 1 et appuyez sur le bouton OK - répondez 3 et appuyez sur le bouton OK dans les fenêtres de dialogues qui s'affichent.
38. Remarquez les balises OL et LI qui se sont ajoutées
39. Déplacez (ou coupez (touches Ctlr + x) /collez (touches Ctlr + v) )) le texte "Élément 1 de liste numérotée" entre le premier LI et /LI , exemple : <li>Élément 1 de liste numérotée</li>
40. Déplacez (ou coupez (touches Ctlr + x) /collez (touches Ctlr + v) ) le texte "Élément 2 de liste numérotée" entre le deuxième LI et /LI
41. Déplacez (ou ou coupez (touches Ctlr + x) /collez (touches Ctlr + v) )) le texte "Élément 3 de liste numérotée" entre le troisième LI et /LI
42. Placez le curseur (cliquez) au dessus du texte "Élément 1 de liste non numérotée" et cliquez le bouton "Liste non numérotée" - inscrivez circle et appuyez sur le bouton OK - répondez 3 et appuyez sur le bouton OK dans les fenêtres de dialogues qui s'affichent.
43. Remarquez les balises UL et LI qui se sont ajoutées
44. Déplacer le texte "Élément 1 de liste non numérotée" à côtè de la première ligne LI (entre LI et /LI )
45. Déplacer le texte "Élément 2 de liste non numérotée" à côtè de la deuxième ligne LI (entre LI et /LI )
46. Déplacer le texte "Élément 3 de liste non numérotée" à côtè de la troisième ligne LI (entre LI et /LI )
47. Placez le curseur (cliquez) à la fin de votre page
48. Afin de placer le logo du site dans votre page, suivez cette procédure:
    
    - Cliquez le bouton 4- Accès à mon espace de téléchargement
    - Copiez l'URL de l'image en faisant un clic droit sur l'image + copier l'adresse de l'image
    - Dans votre page de travail, placez le curseur à la suite de votre travail
    - Cliquez le bouton image
    - Collez (touches Ctlr+V) l'adresse (URL) de l'image dans la fenêtre qui s'affiche
    - Cliquez le bouton OK
    
    
    
49. Remarquez que la balise IMG, le paramètre SRC et sa valeur ../../logoldas.png ont été ajoutés à la ligne afin d'afficher votre image
50. Sélectionnez entièrement cette ligne de code (votre code html d'insertion d'une image)
51. Cliquez le bouton "Centrer"
52. Remarquez que la balise CENTER, a été ajoutée à la ligne
53. Insérez ensuite deux saut de ligne (Bouton Saut de ligne)
54. Cliquez le bouton "Ligne horizontale" et conserver les valeurs inscrites dans la boîte de dialogue qui s'affiche en appuyant deux fois sur OK.
55. Prévisualisez votre page et apportez des modifications au besoin
56. Faites corriger cette page en cochant la case à cocher "POURRIEZ-VOUS CORRIGER MON TRAVAIL S.V.P." et Cliquez le bouton ENREGISTRER
57. Sélectionnez de nouveau le menu "Portfolios" du site
58. Cliquez le bouton "5-Voir éditer mes pages" afin de modifier/voir votre page
    
    Si vous désirez modifier cette page à nouveau :
    - Cliquez le bouton Modifier cette page - Inscrivez le no de la directive 3757, cliquez le bouton "Éditer cette page"
    
    ou si vous désirez afficher votre page :
    - Cliquez le bouton "Voir cette page"