Présentation

Directives

1. Accédez à votre portfolio
2. Créez une nouvelle page (bouton 6) en affichant l'assistant HTML ainsi que la directive 1680
3. Complétez le champ Titre en y inscrivant : Mon horaire
   
4. Inscrivez dans le champ Matière : Informatique
   
5. Inscrivez dans le champ No de la directive : 1680
   
6. Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
   
7. Cliquez le bouton de votre barre de boutons.

Exemple de travail

	Jour 1	Jour 2	Jour 3	Jour 4	Jour 5	Jour 6	Jour 7	Jour 8	Jour 9
Période 1	Anglais	Educ	info	Cuisine	Cuisine	Français	Français	Math	Math
Période 2	Math	Math	Anglais	Educ	Info	Fps	Cuisine	Français	Français
Dîner
Période 3	Français	Français	Math	Math	Anglais	Educ	Info	Cuisine	Cuisine
Période 4	Fps	Cuisine	Français	Français	Math	Math	Anglais	Educ	Info

Description

1. Insérez un TITRE DE NIVEAU 1 contenant le texte "Mon horaire"
2. CRÉATION DU TABLEAU - RANGÉE # 1
   Faire un tableau 1 rangée x 10 colonnes en utilisant le bouton TABLEAU selon les paramètres suivants :
   - Couleur de fond de votre choix
   - Taille de bordure de votre choix
   - Couleur de bordure de votre choix
   - Largeur du tableau de 1000 pixels
   - 1 rangée X 10 colonnes
   
   ATTENTION : Si vous prévisualisez ta page, tu ne verras qu'un petit rectangle car tes colonnes sont vides.
3. INSERTION D'UNE IMAGE DANS LA PREMIÈRE CELLULE DU TABLEAU
   Insérez une image de votre choix dans la colonne 1 (entre les balises TD et /TD ) (cliquez au besoin ici afin de connaître la procédure d'insertion d'une image dans une page)
   
4. REDIMENSIONNEMENT DE L'IMAGE
   Redimensionnez votre image en y ajoutant les paramètres de style style="height:100px;width:100px;" ( voir cette exemple ) : <img src="http://monimage/monimage.jpg" style="height:100px;width:100px;" />
5. COMPLÉTER LE TEXTE DES CELLULES DE LA RANGÉE 1
   Inscris ensuite dans les cellules 2 à 10 les mots : Jour1 Jour 2 ... exemple : <td> Jour 1 </td><td>Jour 2</td>
   
6. FORMATEZ LES COULEURS DE FOND DES CELLULES et les BORDURES
   Formater les couleurs de fond des cellules (chacune des balises TD) et les bordures en ajoutant à la balise TD le paramètre de style style="background-color:red;border:1px solid green;" (voir le code complet ci-dessous) : <td style="background-color:red;border:1px solid green;" >
   
7. FORMATER LA TAILLE DU TEXTE DU TABLEAU
   Formatez la taille du texte du tableau en ajoutant le paramètre FONT-SIZE:20px; dans la balise TABLE existante (voir le code ci-dessous) <table style="background-color:red;border:2px red solid;width:500px;font-size:20px;" >
   
   
8. CRÉATION DE LA RANGÉE # 2 DU TABLEAU
   Copiez cette rangée c'est à dire tout le code html compris entre les balises TR et /TR inclusivement.
   
   
9. Collez cette rangée au dessous (juste au DESSUS de la balise /TABLE)
   
   
10. MODIFIER LES DONNÉES DE LA RANGÉE # 2
    Complétez les données de la deuxième rangée (Texte et couleur de fond de chacune des cellules).
    
    - Supprimez l'image de la cellule 1 de la rangée 2 et inscrivez le texte "Période 1"
    - complétez pour chacune des cellules de la rangée 2 les matières pour chacun des jours à la période 1
    ATTENTION : Une couleur de fond différente doit être assignée pour chacune des matières
    Exemple :
    <TD STYLE="background-color:brown;border:1px solid green;" >MATH</td>
    
    
11. CRÉATION DES RANGÉES ADDITIONNELLES (Périodes 2, midi, 3 et 4)
    Répétez les opérations précédentes afin de compléter votre horaire
    
    
12. CRÉATION DES LIENS POUR CHACUNE DES MATIÈRES
    Pour chacune des matières (chacune des cellules du tableau), créez un lien internet vers un site correspondant à la matière qui s'ouvrira dans un nouvelle fenêtre en utilisant le bouton LIEN (exemple : éducation physique : http://www.rds.ca)
    Procédure :
    
    • utilise Google afin de trouver un site qui affiche des informations sur une matière (exemple : http://www.math.com).
      
    • Copiez l'URL de ce site
      
    • Sélectionnez le texte de la matière ( NE PAS SÉLECTIONNER LES BALISES td ET /td )
      
    • Sélectionnez le bouton LIEN
      
    • Inscrivez ou collez l'adresse du site de destination du lien
      
    • Cliquez deux fois sur le bouton OK