Présentation

Dans cette activité, vous allez produire une carte postale web concernant un des sujets suivants : a) votre rentrée scolaire à l'école secondaire du Chêne-Bleu. b) un loisir que tu aimes c) une personne que tu aimes d) une matière scolaire que tu aimes

Notions du programme

- utilisation du portfolio - insertion d'une image - formatage du texte - création et formatage d'un tableau

Voici un exemple d'un travail terminé.

Directives

1. Ajoutez une nouvelle page à votre portfolio (bouton 6) en affichant l'assistant HTML ainsi que la directive 2267
   
2. Inscrivez dans le champ titre : "Création d'une carte postale web"
   
3. Inscrivez dans le champ No de la directive : 2267
   
4. Sélectionnez la matière : Informatique
   
5. Sélectionnez dans la boîte à liste déroulante "SECTION", "Module 01 : HTML".
   
6. Cliquez le bouton de votre barre de boutons.
7. Trouvez une image de votre choix illustrant le thème de votre carte postale.
8. Enregistrez cette image (clic droit + enregistrer l'image sous...)
9. Renommez cette image au besoin
10. Accédez à votre portfolio
11. Téléchargez cette image dans votre espace de téléchargement.
12. Ajoutez un titre de niveau 1 contenant le texte : Ma carte postale
    
13. Dans votre page,

1. Créez un tableau 2 lignes x 2 colonnes en utilisant le bouton "Tableau 2x2" ayant une couleur de fond de votre choix, une largeur de bordure de votre choix, et une largeur de 900 pixels.
   
   
   Explications des balises inscrites :

   • La balise TABLE signifie : début d'un tableau
   • La balise TR signifie : début d'une rangée (de l'anglais : Table Row)
   • La balise TD signifie : début d'une cellule (case) (de l'anglais : Table DATA)
   • La balise /TD signifie : fin d'une cellule
   • La balise /TR signifie : fin d'une rangée
   • La balise /TABLE signifie : fin d'un tableau
   • Afin d'insérer un contenu texte ou image dans une cellule, il faut placer ce contenu entre les balises TD et /TD
2. Insérez un fond de couleur de votre choix à votre tableau en utilisant le paramètre STYLE="BACKGROUND-COLOR:RED;" afin d'obtenir: <table style="background-color:red;" >Insérez dans chacune des 4 cellules (TD) le paramètre STYLE="BORDER: 1px solid green;" afin d'obtenir : <td STYLE="BORDER: 1px solid green;" >
3. Insérez dans la rangée 1 colonne 1 un titre à votre carte postale Votre Sujet entre les balises <td> et </td>
   - Ajoutez la propriété de couleur du texte color:red; afin d'obtenir <TD STYLE="BORDER: 1px solid green;color:red;" >
   - Ajoutez la propriété de taille du texte font-size:40px; afin d'obtenir <TD STYLE="BORDER: 1px solid green;color:red;font-size:40px;" >
   
   
4. Utilisez maintenant l'URL de cette image image (clic droit + propriétés) et insérez cette image dans la rangée 1 colonne 2. Cliquez ici au besoin afin de connaître la procédure d'insertion d'une image dans une page
   
5. Dans cette cellule (Rangée 1 colonne 2), ajoutez le paramètre d'alignement à droite text-align:right; afin d'obtenir
   <td style="border: 1px solid green;text-align:right;" >
   
6. Insérez dans la rangée 2 colonne 1, l'image que vous avez choisie au point 3. (cliquez ici afin de connaître la procédure d'insertion d'une image dans une page) Ajustez les dimensions de cette image (environ 200 x 300) en utilisant les paramètres height et width afin d'obtenir <img src="votreimage.jpg" style="height:200px;width:300px;" />
   
7. Insérez dans la rangée 2 colonne 2, un court texte de votre choix relatif à votre sujet.
8. Ajoutez les paramètres de couleur et de taille du texte à cette cellule afin d'obtenir <TD STYLE="BORDER: 1px solid green;color:red;font-size:40px;" >
9. Cliquez le bouton ENREGISTRER
10. Visualisez votre travail
11. Apportez les corrections au besoin.