Introduction

Dans ce projet, tu va créer une lettre mystère avec chaque mots découpé de différents morceaux de journal, magazine, bande-desinnée ou encore autre chose.

Ressources en ligne

Nous recommandons l’usage de trinket pour écrire du HTML et du CSS. Ce projet contient les trinkets suivants:

• ‘Lettre Mystére point de départ – jumpto.cc/web-letter

Les enfants peuvent aussi utiliser ce trinket vide (jumpto.cc/trinket-blank) pour écrire leurs propre HTML et CSS, ou bien ils peuvent utiliser ce trinket (jumpto.cc/trinket-template).

Il y a aussi un trinket contenant les solutions au défis:

• ‘Lettre mystére terminé’ – trinket.io/html/1d4d4c5ce1

Ressource hors-ligne

Ce projet peuvent être terminé hors-ligne si souhaité. Vous pouvez accéder aux ressources du projet en cliquant sur le lien ‘Project Materials’ pour ce projet. Ce lien contient une section ‘Project Resources’, qui inclut les ressources que les enfants auront besoin pour terminé le projet hors-ligne. Cette section inclus les fichiers suivants.

• mystery-letter/index.html
• mystery-letter/style.css
• mystery-letter/script.js
• mystery-letter/prefixfree.js
• mystery-letter/4 x .png images
• template/template.html
• template/style.css

Vous pouvez aussi trouver une version compléte des défis de ce projet dans le dossier ‘Club Leader Resources’ qui contiens:

• mystery-letter-finished/index.html
• mystery-letter-finished/style.css
• mystery-letter-finished/script.js
• mystery-letter-finished/prefixfree.js
• mystery-letter-finished/4 x .png images

(Toutes les ressources ci-dessus sont également téléchargeable en tant fichier .zip project et volontaire)

Objectifs de la lesson

• Ce projet introduit les classes CSS et la possibilité de styliser des éléments HTML avec plusieurs classes.
• Les images de fond et les typographies Google sont aussi enseignés.

Défis

• “Style ton message” - Applique les styles des classes CSS
• “Créer un style écran d’ordinateur” - Utilisation de CSS pour récréer un exemple de classes utilisant des images de fond et des typographies Google
• “Créer ton prore style” - Utilise CSS pour créer des nouveaux styles.

Choisi ton message

Les lettres mystère sont utilisé dans les films et les livres pour envoyer des messages secrets.

• Réflechi a ton message mystère, 12 mots est à peu pres la bonne longueur. Si tu ne trouves pas de message, utilise celui ci: ‘Ton prochain indice est dans le coffre. Le code est 65536’.
• Écrit le quelque part pour que tu puisses t’en rappeler.

Édite ton message

C’est parti, écrit ton message dans ta page web.

• Ouvre ce trinket: jumpto.cc/web-letter. Si tu lis ce projet en ligne, tu peux aussi utiliser la version embarquée de ce trinket ci-dessous.

  

• l’Élément paragraphe <p> a été introduit dans le projet ‘Joyeux Anniversaire’. l’Élement <span>  peut être utiliser pour rassembler plusieurs élément de texte a l’intérieur d’un paragraphe pour qu’on puisse le stylé.

  

• Change les mots de ton message en ajoutant un mot par element <span> . Tu devras ajouter ou enlever des élements <span> si ton message a une longueur différente.

  

• Appuie sur le bouton ‘Run’ pour tester ton trinket.

  Si tu regardes les mots de plus pres, tu peux voir que les mots on été stylé et qu’on dirais qu’ils sont collés a la page.

Utilisation des classes CSS

• As-tu remarqué la propriété class="" dans les éléments <span>  ? Tu peux utiliser ceci pour stylé plusieurs choses d’une seule facon.
• Ajoute la classe magazine1 à quelques elements <span> et test ta page web.

  

• Tu peux ajouter plus d’une classe un élément. Laisse juste un espace entre chaque classes. Ajoute la class big à un de tes éléments<span>. Test ta page.

  

Défi: Style ton message

Utilise les styles deja présent pour tourner ton message en lettre mystère.

Ajoute ces classes à tes élements <span> :

• newspaper, magazine1, magazine2
• medium, big, reallybig
• rotateleft, rotateright
• skewleft, skewright

N’ajoute pas plus d’une classe par ligne à un élément <span>  en particulier.

Voici à quoi ta lettre devrais ressembler:

Édite tes classes

• Clique sur l’onglet ‘style.css’. Trouve le style pour la classe newspaper que tu viens d’utiliser.

  

• Remarque qu’il y a un point ‘.’ avant chaque nom de tes classes dans ton fichier CSS mais pas sur tes éléments dans ton document HTML.
• Maintenant regarde les autres classes CSS que tu as utiliser pour stylé ta lettre mystère. Peut tu trouver:
• Comment la classe magazine1 change le texte en le rendant tout en majuscules.
• Comment la classe magazine2 ajoute une image derrière le texte.

  

• Que se passe-t-il si tu change la propriété background-image de la classe magazine2 en canvas.png? Si tu préferes l’image pink-pattern.png tu peux toujours la remettre.

  Tu peux aussi changer les couleurs dans tes styles de magazine si tu veux.

• Trouve le code CSS utilisé pour tourner (rotate en anglais) ou incliner (skew en anglais) tes mots:

  

  Essaye de changer les nombres pour créer differents effets et ensuite les tester sur ta page.

Créer une nouvelle classe

On va maintenant créer un nouveau style qui ressemble à une page de bande-dessinnée. jumpto.cc/web-fonts te donneras plein d’exemples que tu peux utiliser gratuitement.

• Ajoute la classe comic dans ton fichier style.css. A la suite de magazine2 est une bonne idée. N’oublie pas le point au debut de ta classe.

  

  Ne t’inquiètes pas si tu vois une erreur comme ‘The Rule is empty’ (la règle est vide), on va fixer cela plutard.

• Maintenant, ajouter plus de CSS à ta nouvelle classe. Tu peux utiliser différentes couleurs si tu veux. Il y a plein de couleurs derrière ce lien jumpto.cc/web-colours

  

• Utilise les styles de la classe comic sur quelques éléments<span> dans ton document HTML et teste ta page:
• Maintenant tu peux ajouter une police un peu plus rigolote. Ouvre un nouvel onglet dans ton navigateur. Va sur la page jumpto.cc/web-fonts et recherche le mot ‘bangers’:

  

• Clique sur le bouton ‘Quick-use’ (demande l’aide de ton professeur si tu as besoin):

  

• Une nouvelle page va se charger. Fait défiler ta page jusqu’a ce que tu vois:

  

  Et copie le texte souligné.

• Copie le code <link> que tu viens de copier depuis Google fonts dans ton élément <head> de ta page.

  

  Ceci va te permettre d’utiliser la police Bangers dans ta page.

• Retourne sur ta page Google fonts et fait défiler ta liste encore plus et copie le code font-family:

  

• Maintenant, retourne sur ton fichier ‘style.css’ dans trinket et colle le code font-family dans ta classe comic:

  

• Test ta page web. Le resultat devrais ressembler à ceci:

  

Défi: Créer un style écran d’ordinateur

Créer un style écran d’ordinateur à l’ancienne et applique ce style sur quelques-uns de tes mots:

Tu auras besoin de :

• La police VT323 que tu peux trouver ici jumpto.cc/web-fonts. Retourne à l’étape 5 si tu as besoin de revoir comment ajouter une police Google.
• De l’image de fond computer-printout-paper.png. Retourne à l’étape 4 si tu as besoin de revoir comment utiliser les images de fonds.

Défi: Créer ton prore style

Maintenant crée ta propre classes et rend ta lettre mystère encore plus mysterieuse. Utilise le CSS que tu as appris dans tes projets précédents et regarde les exemples dans ton fichier style.css pour avoir plus d’idées.

Voila un exemple:

Tu peux voir les images qui sont disponible en cliquant sur l’onglet Images dans trinket.

Essaie de mettre une image de fond en utilisant une de ces images:

• rough-paper.png
• canvas.png

Si tu as un compte trinket, tu peux télécharger des images de ton ordinateur comme tu l’as fait dans le projet ‘Raconte une histoire’.

Cherche une police que tu aimes sur la page on jumpto.cc/web-fonts et copie le lien et ajoute le code CSS a ton trinket pour les utiliser.