Joyeux Anniversaire
Introduction
Dans ce projet, les enfants vont apprendre les tags HTML et les propriétés CSS. Ils apprendront également a editer les tags et propriété pour crée leur propre carte de voeux.
Ressources en ligne
Nous recommandons l’utilisation de trinket pour écrire du HTML et CSS en ligne. Ce projet contient les Trinket suivants:
Les enfants peuvent aussi se servir d’un trinket vide (jumpto.cc/trinket-blank) pour ecrire leurs propres HTML et CSS, ou bien ils peuvents utiliser l’exemple suivant (jumpto.cc/trinket-template).
Il y a aussi un trinket contenant une solution aux exercices
Ressource hors-ligne
Ce projet peut etre complété hors-ligne si besoin. Vous pouvez accéder au ressources du projet en cliquant sur les liesn ‘Download Project Materials’. Le lien contient un dossier ‘Project Resources’, qui contient les ressources pour que les enfants puissent compléter leur projet hors-ligne. Soyez sure que chaque enfant est acces a ces ressources. Ce dossier inclus:
- intro.html
- template/template.html
- template/style.css
- birthday/BirthdayCard.html
- birthday/style.css
- birthday/script.js
- birthday/10 x .png images
Vous pouvez aussi trouver une version complete des défis de ce projet dans le dossier ‘Club Leader Resources’, contenant:
- birthday-finished/BirthdayCardFinished.html
- birthday-finished/style.css
- birthday-finished/script.js
- birthday-finished/rainbow.png
- birthday-finished/dinosaur.png
Objectif de la lesson
- Ce projet introduit les tags HTML et les propriétés CSS, et permet aux enfants d’editer du contenu et de le stylisé.
Défis
- “Ajouter un autre paragraphe” - ajouter un tag HTML a un document;
- “Ajouter plus de style” - éditer des styles CSS;
- “Créer une carte personalisé” - éditer du HTML et CSS pour créer une carte de voeux personalisé.
C’est quoi HTML?
HTML veux dire HyperText Markup Language, et c’est le langage utilisé pour faire des sites internet. Prenons un example!
- Tu vas utiliser un site internet qui s’appelle Trinket pour écrire du HTML. Ouvre ce Trinket: jumpto.cc/web-intro. Si tu lis ce cours en ligne, tu peux aussi utiliser la version incorporé de ce Trinket ci-dessous.
- Le code que tu vois à gauche du Trinket, c’est du HTML. A droite tu peux voir la page internet que le code HTML a créé.
HTML utilise des tags pour fabriquer des pages internet. Peut-tu voir ce code HTML à la ligne 8 de ton code ?
est un exemple de tag, cela veux dire paragraphe. Tu peux commencer un paragraphe par et le terminer par .
- Peut-tu voir un autre tag ? Un autre tag que tu a peut-etre remarqué à la ligne 9 est le , qui veux dire bold (traduit par ‘gras’ en Francais):
Et en voila d’autres:
- <html> et </html> marque le debut de ton document HTML;
- <head> et </head> c’est la ou, entre autres, va le code CSS (On reviendra la dessus plu tard!);
- <body> et </body> c’est la ou le contenu de ton site internet doit etre.
- Fait un changement sur un des paragraphes dans le code HTML (sur la gauche). Appuie sur ‘Run’ et tu devrais voir ta page internet changer (sur la droite)!
- Si tu as fait une erreur et que tu veux revenir en arrière, tu peux cliquer sur le bouton du menu et cliquer sur ‘Reset’. Essaye-le!
Tu n’as pas besoin d’un compte Trinket pour enregistrer tes projets!
Si tu n’as pas de compte Trinket, clique sur la flèche descendante et clique sur ‘Link’. Ceci devrais te donner un lien qui te permettra de revenir plu tard sur ta page. Tu dois faire ceci à chaque fois que tu changes ton projet, le lien sera different à chaque fois.
Si tu as un compte Trinket, la facon la plus simple est de sauvegarder ta page en cliquant sur le bouton ‘Remix’ en haut de ton Trinket. Ceci enregistera ton projet dans ton profil.
Défi: Ajoute un autre paragraphe
Peut tu ajouter un 3e paragraphe de texte a ta page, en dessous des deux autres? n’oublie pas qu’un paragraphe dois commencer par un tag <p> , et finir avec un tag </p> .
Voici a quoi ta page devrais ressembler maintenant:
Peut-tu ajouter un tag bold et un texte souligné a ton nouveau paragraphe ? Tu devras utiliser le tag <u> et </u> pour souligner du texte.
CSS, c’est quoi?
CSS veux dire Cascading Style Sheets (En Francais, page de style en cascade), et c’est le language utilisé pour rendre les page internet plus jolies. Tu peux lier ta page internet avec ton fichier CSS dans le <head> de ton document HTML comme ceci:
- CSS liste toutes les propriétés pour un tag en particulier. Clique sur l’onglet ‘style.css’ pour voir le CSS de ta page.
- Trouve ce code:
Ce code CSS est a une propriété pour les paragraphes, qui va changer la couleur du texte en noir
- Change le mode ‘black’ (noir en Francais) dans le CSS, par ‘blue’ (bleu en Francais). Tu devrais voir la couleur de tous les paragraphes changer en bleu.
Défi: Encore plus de styles!
Peux-tu changer la couleur des pragraphes en orange ? et le background (couleur du fond de la page) en gris?
Fabriquer une carte d’anniversaire
Aller, maintenant nous allons utiliser ce qu’on a appris en HTML et CSS pour fabriquer une carte d’anniversaire.
- Ouvre ce Trinket: jumpto.cc/web-card, ou utilise la version incorporé si tu utilises la version en ligne.
Ne t’inquietes pas si tu ne comprends pas tout le code. Cette carte d’anniversaire à l’air plutot ennuyante, du coup, nous allons faire quelques changement en HTML et CSS
- Appuie sur le bouton sur la face recto de la carte, et tu devrais voir l’intérieur de la carte apparaitre.
- Va à la ligne 13 de ce code. Comme dans le dernier exemple, essaye de changer le texte en HTML pour customiser ta carte.
- Peut-tu trouver le code HTML de l’image du robot? (Indice: c’est à la ligne 16!) Change le mot robot par sun (soleil en Francais), et tu verras l’image changer!
Tu peux utiliser les mots boy, diamond, dinosaur, flowers, girl, rainbow, robot, spaceship, sun, tea, ou trophy.
- Tu peux aussi changer le CSS de ta carte d’anniversaire. Clique sur l’onglet “style.css”. Le code commence avec le style pour le coté recto de la carte. Change le background-color (Couleur de fond) en lightgreen (Vert clair en Francais).
- Tu peux aussi changer la taille de ton image. Va à la ligne 29 de ton code CSS, et change width (longueur) et height (hauteur) de ton image en 200px (px veux dire pixels).
- Tu peux aussi changer la typographie. Va à la ligne 24 et change font-family en Comic Sans MS et font-size (taille de texte) en 16pt.
Tu peux utiliser une typographie comme arial, Impact ou encore Tahoma.
Défi: Crée une carte personalisé
Utilise tout ce que tu as appris en HTML et CSS pour finir ta carte d’anniversaire. Tu peux même transformer ta carte d’anniversaire par une autre carte si tu veux!
Voici un exemple:
Tu peux trouver plus de couleurs CSS ici: jumpto.cc/colours
Maintenant que tu as finis ta carte, tu peux l’enregistrer et la partager a quelqu’un.
Nous suivre